/* Modern light theme with subtle shadows and good spacing */
:root{
  --bg:#f3f6fb;
  --bg-accent:#e8f1fb;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --card-soft:#fbfdff;
  --line:#dbe5f0;
  --line-strong:#c7d6e6;
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --dup:#fff7e6;

  --radius:16px;
  --shadow: 0 18px 40px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.05);
  --shadow-soft: 0 8px 20px rgba(15,23,42,.045), 0 1px 3px rgba(15,23,42,.04);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.tk{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 220px);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
}

/* Header / nav */
.tk-header{
  position:sticky;top:0;z-index:20;
  background:#dce3ea;
  backdrop-filter:none;
  border-bottom:1px solid #c7d0da;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.tk-header-inner{
  width:100%;display:flex;align-items:center;gap:20px;
  padding:12px 22px;
}
.tk-brand{
  text-decoration:none;
  color:var(--brand-600);
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  min-height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.tk-brand-logo{
  display:block;
  height:52px;
  width:auto;
  max-width:320px;
  object-fit:contain;
  transform:none;
}
@media (max-width:860px){
  .tk-brand-logo{height:40px;max-width:230px;}
}
.tk-nav{
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:auto;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.tk-nav-link{
  color:var(--muted);
  text-decoration:none;
  padding:9px 12px;
  border-radius:10px;
  font-weight:600;
  transition:.16s background-color, .16s color, .16s border-color;
}
.tk-nav-link:hover{color:var(--text);background:#e1e8f0}
.tk-nav-link.active{
  color:#0f3b66;
  background:transparent;
  box-shadow:none;
  position:relative;
}
.tk-nav-link.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:#60a5fa;
}
.tk-nav-link.danger{color:var(--danger)}

/* Main page container */
.tk-container{
  max-width:100%;
  margin:22px auto;
  padding:0 22px 26px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.tk-container-auth{
  margin:0 auto;
  min-height:100vh;
}

/* Viewer: make the editor span full width and cancel left/right padding so the sidebar sits at the window edge */
.page-wide{
  flex:1 1 auto;           /* occupy full width of the container */
  margin:0 -20px;          /* negate tk-container left/right padding */
  width:calc(100% + 40px); /* keep content full width after negative margins */
}

/* Layout */
.editor-grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr); /* fixed sidebar + fluid editor */
  gap:18px;
  width:100%;
}
@media (max-width:960px){.editor-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .tk-header-inner{align-items:flex-start;flex-wrap:wrap;}
  .tk-nav{width:100%;margin-left:0;justify-content:flex-start;}
  .viewer-empty-hero{flex-direction:column;align-items:flex-start;}
  .viewer-empty-hero h1{font-size:34px;}
  .viewer-empty-brand{width:100%;max-width:100%;align-items:flex-start;}
  .viewer-empty-brand-label{text-align:left;}
}

.panel{
  background:linear-gradient(180deg, var(--card-soft), var(--card));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:16px;
}
.panel.sidebar{position:sticky;top:84px;height:fit-content}
.panel.main{min-height:480px}
.panel.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-title{
  font-weight:800;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:12px;
}
.viewer-empty-shell{
  display:grid;
  gap:18px;
}
.viewer-empty-hero{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:24px;
  padding:28px 24px;
}
.viewer-empty-copy{
  max-width:720px;
}
.viewer-empty-kicker{
  font-size:14px;
  font-weight:700;
  color:#475569;
  margin-bottom:10px;
}
.viewer-empty-hero h1{
  margin:0;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-0.03em;
}
.viewer-empty-hero p{
  margin:14px 0 0;
  max-width:620px;
  color:#475569;
  font-size:16px;
}
.viewer-empty-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.viewer-empty-brand{
  min-width:220px;
  max-width:320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  border:1px solid #d8e7f6;
  border-radius:18px;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.14), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.viewer-empty-brand-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
  text-align:center;
}
.viewer-empty-brand-logo{
  max-width:100%;
  max-height:96px;
  width:auto;
  height:auto;
  object-fit:cover; object-position:center; transform: scale(1.55);
}
.viewer-empty-note-title{
  font-weight:700;
  color:#1e293b;
}
.viewer-empty-note-copy{
  color:#64748b;
}
.viewer-empty-note{
  padding-top:14px;
  padding-bottom:14px;
}
.divider{height:1px;background:#e5edf6;margin:14px 0}

/* Sidebar */
.emp-list{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.emp-list li{margin:0}
.emp-list li a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
.emp-list li.active a{background:#eaf2ff;border:1px solid #c9dbff}
.emp-list li a:hover{background:#f7fafc}
.emp-list .empty{color:var(--muted);padding:6px 8px}
.actions .btn{margin-bottom:8px}
.w-full{width:100%}

/* Controls */
.label{
  color:var(--muted);
  margin-right:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.input,.select{
  background:#fff;
  border:1px solid var(--line-strong);
  color:var(--text);
  padding:9px 11px;
  border-radius:12px;
  outline:none;
  min-width:90px;
  transition:.15s border-color, .15s box-shadow, .15s background-color;
}
.input:focus,.select:focus{border-color:#7fb0ea;box-shadow:0 0 0 4px rgba(96,165,250,.18);background:#fff}
.inline{display:inline-flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  appearance:none;
  border:1px solid #bfd0e3;
  background:#eef4fb;
  color:#1e3a5f;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:.15s background-color, .15s border-color, .15s color, .15s transform, .15s box-shadow;
}
.btn:hover{
  background:#e2ecf8;
  border-color:#93b1d2;
  color:#163250;
}
.btn:focus-visible{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(96,165,250,.22);
}
.btn.primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:white;border-color:#3b82f6;box-shadow:none}
.btn.primary.sm{padding:8px 12px;border-radius:10px}
.btn.danger{background:linear-gradient(180deg,#fca5a5,#ef4444);color:white;border-color:#ef4444}
.btn[disabled], .btn:disabled{opacity:.58;cursor:not-allowed;filter:none}

/* Alerts */
.alert{border-radius:14px;padding:13px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.alert.success{background:#ecfdf5;border:1px solid #a7f3d0}
.alert.warn{background:#fff7ed;border:1px solid #fed7aa}
.mb-8{margin-bottom:8px}
.mt-8{margin-top:8px}

/* Totals */
.panel.totals{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
}
.total{background:linear-gradient(180deg,#fbfdff,#f3f7fc);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.t-label{color:var(--muted);font-size:12px;margin-bottom:4px}
.t-val{font-weight:800}

/* Table */
.table-wrap{overflow:auto}
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14px;
  background:rgba(255,255,255,.74);
  border:1px solid #dbe5f0;
  border-radius:14px;
  overflow:hidden;
}
.table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,#f8fbff,#edf3fa);
  border-bottom:1px solid var(--line-strong);
  text-align:left;
  padding:12px 14px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#475569;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.75);
}
.table td{
  border-bottom:1px solid #e7eef6;
  padding:12px 14px;
  vertical-align:middle;
  color:#1e293b;
  background:rgba(255,255,255,.72);
}
.table tbody tr:nth-child(even) td{background:rgba(248,251,255,.88)}
.table tbody tr:hover td{background:rgba(232,241,251,.88)}
.table tbody td:first-child{font-weight:600;color:#0f172a}
.table .num{text-align:right}
.table .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.table.compact td,.table.compact th{padding:8px}
.table tbody tr:last-child td{border-bottom:0}
.table tr.total td{
  font-weight:800;
  border-top:2px solid var(--line-strong);
  background:linear-gradient(180deg,#f8fbff,#eef4fb);
}
.dup-row{background:var(--dup)}
.table input.input{width:110px}
.table .select{width:130px}

/* Utility */
.mr-8{margin-right:8px}