/* ============================================================
   FINOpti — Panel-Saw Cutting Optimizer
   Design system / global styles
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
  /* surfaces */
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #fbfcfd;
  --surface-3: #f1f3f5;
  --overlay:   rgba(17, 22, 28, 0.42);

  /* text */
  --text:      #14181d;
  --text-2:    #4a525c;
  --text-3:    #828b96;
  --text-inv:  #ffffff;

  /* lines */
  --border:    #e3e7ec;
  --border-2:  #d3d9e0;
  --border-strong: #b9c1cb;

  /* accent */
  --accent:        #1f5bd0;
  --accent-hover:  #1a4fb8;
  --accent-press:  #15439e;
  --accent-soft:   #e9f0fc;
  --accent-soft-2: #d7e4fa;
  --accent-text:   #1f5bd0;
  --on-accent:     #ffffff;

  /* status */
  --ok:    #1f9d55;   --ok-soft:    #e4f6ec;   --ok-text:    #157a40;
  --warn:  #c98300;   --warn-soft:  #fbf0d8;   --warn-text:  #8a5b00;
  --err:   #d23b3b;   --err-soft:   #fbe6e6;   --err-text:   #a52727;
  --muted: #8a929c;   --muted-soft: #eef0f3;   --muted-text: #5d646d;
  --info:  #1f5bd0;   --info-soft:  #e9f0fc;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(20,28,40,.06), 0 1px 1px rgba(20,28,40,.04);
  --shadow-md: 0 2px 6px rgba(20,28,40,.07), 0 6px 16px rgba(20,28,40,.06);
  --shadow-lg: 0 8px 28px rgba(20,28,40,.14), 0 2px 8px rgba(20,28,40,.08);
  --shadow-pop: 0 12px 40px rgba(20,28,40,.18);

  /* radii */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 9px;  --r-lg: 13px;  --r-xl: 18px;

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-head: var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* density (comfortable default) */
  --row-h: 42px;
  --cell-py: 10px;
  --pad: 24px;
  --gap: 16px;
  --control-h: 38px;

  --sidebar-w: 232px;
  --topbar-h: 56px;
}

[data-density="compact"] {
  --row-h: 32px;
  --cell-py: 5px;
  --pad: 16px;
  --gap: 10px;
  --control-h: 32px;
}

/* ---------- Tokens: dark ---------- */
[data-theme="dark"] {
  --bg:        #0e1116;
  --surface:   #161b22;
  --surface-2: #1b212a;
  --surface-3: #222a35;
  --overlay:   rgba(0,0,0,.58);

  --text:      #e8edf3;
  --text-2:    #aab4c0;
  --text-3:    #707a87;
  --text-inv:  #0e1116;

  --border:    #262d38;
  --border-2:  #323b48;
  --border-strong: #434e5d;

  --accent:        #4d86ec;
  --accent-hover:  #5e92ef;
  --accent-press:  #6f9ef1;
  --accent-soft:   #18233a;
  --accent-soft-2: #1f3052;
  --accent-text:   #7aa6f2;
  --on-accent:     #ffffff;

  --ok:    #34b96a;   --ok-soft:    #122a1d;   --ok-text:    #5cd28a;
  --warn:  #e0a232;   --warn-soft:  #2c2310;   --warn-text:  #ecbf63;
  --err:   #e85a5a;   --err-soft:   #2e1717;   --err-text:   #f48a8a;
  --muted: #6b7480;   --muted-soft: #20262f;   --muted-text: #9aa3ae;
  --info:  #4d86ec;   --info-soft:  #18233a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.55);
  --shadow-pop: 0 14px 44px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

.page-title, .brand-name, .ck-title { font-family: var(--font-head); }

/* numerics */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--mono); font-variant-ligatures: none; }

/* scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Layout shell
   ============================================================ */
.app { display: flex; height: 100%; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100%;
  transition: width .16s ease, flex-basis .16s ease;
}
.sidebar.collapsed { width: 60px; flex-basis: 60px; }

.brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent);
  display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.brand-name b { color: var(--accent-text); }

.nav { padding: 10px 10px; flex: 1 1 auto; overflow-y: auto; }
.nav-section-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500; font-size: 13.5px;
  cursor: pointer; white-space: nowrap; position: relative;
  margin-bottom: 1px;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item.active svg { color: var(--accent-text); }
.nav-item svg { flex: 0 0 auto; color: var(--text-3); }
.nav-item .nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-2);
  padding: 1px 7px; border-radius: 20px;
}
.sidebar.collapsed .nav-item span, .sidebar.collapsed .nav-section-label,
.sidebar.collapsed .brand-name, .sidebar.collapsed .nav-badge { display: none; }

.main { flex: 1 1 auto; display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
}
.topbar .crumbs { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-3); min-width: 0; }
.topbar .crumbs .cur { color: var(--text); font-weight: 600; }
.topbar .crumbs a:hover { color: var(--text); }
.topbar-spacer { flex: 1 1 auto; }

.content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.page { max-width: 1280px; margin: 0 auto; padding: 28px var(--pad) 60px; }
.page.wide { max-width: 1600px; }
.page.full { max-width: none; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-sub { color: var(--text-2); font-size: 14px; margin: 4px 0 0; }
.page-head .spacer { flex: 1 1 auto; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--control-h); padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text);
  font-weight: 550; font-size: 13.5px; letter-spacing: -.01em;
  white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(.5px); }
.btn svg { flex: 0 0 auto; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { background: var(--accent-press); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.danger { color: var(--err-text); border-color: var(--border-2); }
.btn.danger:hover { background: var(--err-soft); border-color: var(--err); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--r-md); }
.btn.icon { padding: 0; width: var(--control-h); }
.btn.icon.sm { width: 30px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; pointer-events: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); border: 1px solid transparent; background: transparent;
  color: var(--text-2); transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.active { background: var(--accent-soft); color: var(--accent-text); }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--pad); }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px var(--pad); border-bottom: 1px solid var(--border);
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.card-head .spacer { flex: 1 1 auto; }

.section-label { font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }

/* ============================================================
   Chips / badges
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--muted-soft); color: var(--muted-text);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok    { background: var(--ok-soft);    color: var(--ok-text); }
.chip.warn  { background: var(--warn-soft);  color: var(--warn-text); }
.chip.err   { background: var(--err-soft);   color: var(--err-text); }
.chip.info  { background: var(--accent-soft);color: var(--accent-text); }
.chip.solid { color: #fff; }
.chip.sm { height: 19px; font-size: 11px; padding: 0 7px; }
.chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); color: var(--text-2); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-xs); font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--text-2);
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { width: 100%; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.tbl thead th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-3); padding: 9px 14px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1; white-space: nowrap;
}
table.tbl tbody td { padding: var(--cell-py) 14px; border-bottom: 1px solid var(--border); height: var(--row-h); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .1s; }
table.tbl.hover tbody tr:hover { background: var(--surface-2); cursor: pointer; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-click { cursor: pointer; }

/* ============================================================
   Form controls
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.input, .select, .textarea {
  height: var(--control-h); padding: 0 11px;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font-size: 13.5px; transition: border-color .12s, box-shadow .12s; width: 100%;
}
.textarea { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input.mono { font-family: var(--mono); }
.input.sm { height: 30px; font-size: 12.5px; padding: 0 8px; }
.input.err, .select.err { border-color: var(--err); }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23828b96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 30px;
}
.input-cell {
  width: 100%; height: 100%; min-height: 30px; border: 1px solid transparent; background: transparent;
  padding: 4px 7px; border-radius: var(--r-xs); color: var(--text); font-size: 13px;
}
.input-cell:hover { border-color: var(--border-2); background: var(--surface); }
.input-cell:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.input-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.input-cell.mono { font-family: var(--mono); font-size: 12.5px; }

/* toggle switch */
.switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 20px; transition: background .15s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .thumb { transform: translateX(16px); }
.switch.disabled { opacity: .45; pointer-events: none; }

/* segmented */
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.seg button {
  border: none; background: transparent; color: var(--text-2);
  height: 28px; padding: 0 11px; border-radius: 5px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* checkbox */
.cbx { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: background .12s, border-color .12s; }
.cbx.on { background: var(--accent); border-color: var(--accent); }
.cbx svg { color: #fff; opacity: 0; }
.cbx.on svg { opacity: 1; }

/* ============================================================
   KPI / stat
   ============================================================ */
.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi .k-label { font-size: 12px; color: var(--text-3); font-weight: 550; }
.kpi .k-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .k-value small { font-size: 14px; font-weight: 600; color: var(--text-3); }
.kpi .k-sub { font-size: 12px; color: var(--text-3); }

/* ============================================================
   Tooltip
   ============================================================ */
.tip { position: relative; display: inline-flex; }
.tip .tip-body {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #11161d; color: #f1f4f8; font-size: 12px; font-weight: 500; line-height: 1.45;
  padding: 7px 10px; border-radius: var(--r-sm); width: max-content; max-width: 260px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
  z-index: 50; white-space: normal;
}
.tip:hover .tip-body { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.tip .tip-body::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #11161d; }
.help-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--surface-3); color: var(--text-3); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; cursor: help; }

/* ============================================================
   Modal
   ============================================================ */
.modal-scrim { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 100; padding: 24px; backdrop-filter: blur(2px); animation: fade .15s ease; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); width: 100%; max-width: 520px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; animation: pop .16s ease; }
.modal-head { padding: 20px 22px 0; display: flex; align-items: flex-start; gap: 12px; }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.modal-body { padding: 16px 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: var(--surface-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* dropdown menu */
.menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px; min-width: 200px; animation: pop .12s ease; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); cursor: pointer; }
.menu-item:hover { background: var(--surface-3); }
.menu-item svg { color: var(--text-3); }
.menu-item.danger { color: var(--err-text); }
.menu-item.danger svg { color: var(--err-text); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 8px 10px 4px; }

/* ============================================================
   Misc helpers
   ============================================================ */
.row { display: flex; align-items: center; gap: var(--gap); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.grow { flex: 1 1 auto; }
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.divider { height: 1px; background: var(--border); }
.vdivider { width: 1px; align-self: stretch; background: var(--border); }
.empty { text-align: center; padding: 56px 24px; color: var(--text-3); }
.empty .empty-ico { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 14px; color: var(--text-3); }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty p { margin: 0 auto; max-width: 360px; }

.banner { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); font-size: 13.5px; }
.banner.info { background: var(--accent-soft); color: var(--accent-text); }
.banner.warn { background: var(--warn-soft); color: var(--warn-text); }
.banner.err  { background: var(--err-soft);  color: var(--err-text); }
.banner.ok   { background: var(--ok-soft);   color: var(--ok-text); }
.banner b { font-weight: 700; }
.banner .x { margin-left: auto; cursor: pointer; opacity: .6; }
.banner .x:hover { opacity: 1; }

.code-path {
  font-family: var(--mono); font-size: 12.5px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px;
  color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.code-path .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.fade-in { animation: fade .2s ease; }
.slide-up { animation: slideup .22s cubic-bezier(.2,.7,.3,1); }
@keyframes slideup { from { opacity: 0; transform: translateY(10px); } }

/* ---- Subtle motion layer ----------------------------------------------
   Route content rises + fades on every navigation; cards/KPIs/list rows
   stagger in just behind it. All respect prefers-reduced-motion. */
/* fill-mode "backwards" (not "both"): a kept transform turns the wrapper
   into a containing block for position:fixed children — the jobs page's
   selection bulkbar then pins to the PAGE bottom instead of the screen. */
.route-anim { animation: pageEnter .28s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } }
/* The cockpit is a full-height app screen (.ck { height: 100% } with its
   own internal scroll area and the sheet-thumbnail strip pinned at the
   bottom). The animation wrapper above has no height of its own, which
   collapsed that design: .ck fell back to content height, the page
   scrolled, and the thumbnails ended up below the fold. Give the wrapper
   full height ONLY when it hosts the cockpit so every other page keeps
   its normal document scrolling. (:has — fine in Chrome/Edge/Safari.) */
.route-anim:has(> .ck) { height: 100%; }

/* Staggered reveal: drop .stagger on a container; direct children fade up
   with an increasing delay. Caps at ~12 so long lists settle quickly. */
.stagger > * { animation: revealUp .34s cubic-bezier(.2,.7,.3,1) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .11s; }
.stagger > *:nth-child(5) { animation-delay: .14s; }
.stagger > *:nth-child(6) { animation-delay: .17s; }
.stagger > *:nth-child(7) { animation-delay: .20s; }
.stagger > *:nth-child(8) { animation-delay: .23s; }
.stagger > *:nth-child(n+9) { animation-delay: .26s; }
@keyframes revealUp { from { opacity: 0; transform: translateY(10px); } }

/* KPI grids stagger automatically wherever they appear. */
.kpi-grid > * { animation: revealUp .34s cubic-bezier(.2,.7,.3,1) both; }
.kpi-grid > *:nth-child(2) { animation-delay: .05s; }
.kpi-grid > *:nth-child(3) { animation-delay: .10s; }
.kpi-grid > *:nth-child(4) { animation-delay: .15s; }

/* Gentle hover lift for clickable cards (kept off form/editor cards via
   the .card-static escape hatch). */
.card.hoverable { transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s; }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .route-anim, .stagger > *, .kpi-grid > *, .fade-in, .slide-up, .card.hoverable { animation: none !important; transition: none !important; }
}

/* progress / meter */
.meter { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width .3s; }

/* paywall blur */
.locked { position: relative; }
.locked .blurred { filter: blur(7px); pointer-events: none; user-select: none; opacity: .8; }
.paywall {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  background: linear-gradient(180deg, rgba(246,247,249,.2), var(--bg) 78%);
}
[data-theme="dark"] .paywall { background: linear-gradient(180deg, rgba(14,17,22,.2), var(--bg) 78%); }

/* grain icons */
.grain-ico { width: 26px; height: 26px; border-radius: var(--r-xs); border: 1px solid var(--border-2); display: grid; place-items: center; cursor: pointer; background: var(--surface); }
.grain-ico.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

/* grain segmented mini-control (parts table) */
.grain-seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-xs); overflow: hidden; background: var(--surface); }
.grain-seg button { width: 26px; height: 24px; display: grid; place-items: center; border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; }
.grain-seg button + button { border-left: 1px solid var(--border); }
.grain-seg button:hover { background: var(--surface-3); color: var(--text-2); }
.grain-seg button.on { background: var(--accent-soft); color: var(--accent-text); }

/* invalid part rows */
table.tbl tbody tr.row-issue td { background: var(--err-soft, rgba(220, 60, 60, .08)); }

/* parts table: th text sits at 14px inset; td pads 7px so input text (7px inner pad) lands at the same 14px */
.parts-tbl tbody td { padding-left: 7px; padding-right: 7px; }
.parts-tbl tbody td:first-child { padding-right: 14px; }

/* seq checkmark (parts table) */
.seq-check { width: 24px; height: 24px; border-radius: var(--r-xs); border: 1px solid var(--border-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; }
.seq-check:hover { border-color: var(--border-strong); }
.seq-check.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

/* file tree */
.tree { font-family: var(--mono); font-size: 13px; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); }
.tree-row:hover { background: var(--surface-2); }
.tree-row .t-name { color: var(--text); }
.tree-row .t-meta { margin-left: auto; color: var(--text-3); font-size: 11.5px; }
.tree-indent { width: 18px; flex: 0 0 auto; }

/* print document is hidden on screen; shown only when printing (see end of file) */
.app-root { height: 100%; }
.print-doc { display: none; }

/* ============================================================
   Optimize cockpit (single-screen)
   ============================================================ */
.ck { display: flex; flex-direction: column; height: 100%; position: relative; background: var(--bg); }
/* Wrap so every action stays visible instead of clipping off the right
   edge — the bar grows in height as needed and the body sits below it. */
.ck-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; min-height: 52px; border-bottom: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; row-gap: 6px; }
.ck-bar .ck-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.ck-bar .ck-machine { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); background: var(--surface-3); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ck-bar .vd { width: 1px; height: 24px; background: var(--border); flex: 0 0 auto; }

.ck-body { flex: 1 1 auto; display: grid; grid-template-columns: 270px minmax(0,1fr) 300px; min-height: 0; }
.ck-mat-switch { display: none; }
@media (max-width: 1280px) { .ck-body { grid-template-columns: 240px minmax(0,1fr) 280px; } }
@media (max-width: 1080px) { .ck-body { grid-template-columns: minmax(0,1fr) 280px; } .ck-rail.l { display: none; } .ck-mat-switch { display: inline-block; } }
@media (max-width: 820px) { .ck-body { grid-template-columns: minmax(0,1fr); } .ck-rail.r { display: none; } .ck-feed { display: none; } }
.ck-rail { overflow-y: auto; background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.ck-rail.l { border-right: 1px solid var(--border); }
.ck-rail.r { border-left: 1px solid var(--border); }
.ck-sec { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ck-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ck-sec-h .t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ck-sec-h .c { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface-3); padding: 1px 7px; border-radius: 20px; }

.ck-mat { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; border: 1px solid var(--border); cursor: pointer; margin-bottom: 7px; background: var(--surface); }
.ck-mat.on { border-color: var(--accent); background: var(--accent-soft); }
.ck-mat .sw { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border-2); flex: 0 0 auto; }
.ck-mat .nm { font-weight: 650; font-size: 13px; }
.ck-mat .mt { font-size: 11px; color: var(--text-3); }
.ck-mat .yld { margin-left: auto; text-align: right; }
.ck-mat .yld .v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.ck-mat .yld .l { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

.ck-canvas { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface-2); }
.ck-canvas-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; row-gap: 6px; }
.ck-canvas-top > * { flex: 0 0 auto; }
.ck-canvas-top .grow { flex: 1 1 auto; min-width: 8px; }
.ck-scroll { flex: 1 1 auto; overflow: auto; padding: 22px; display: grid; place-items: center; }
.ck-thumbs { display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--border); background: var(--surface); overflow-x: auto; flex: 0 0 auto; align-items: flex-start; }
.ck-thumb { border: 2px solid var(--border-2); border-radius: 7px; overflow: hidden; cursor: pointer; flex: 0 0 auto; width: 86px; background: var(--surface); position: relative; }
.ck-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ck-thumb .tl { font-size: 10px; font-weight: 700; text-align: center; padding: 2px; color: var(--text-2); display: flex; justify-content: space-between; padding: 2px 5px; }
.ck-thumb .tl .y { color: var(--ok-text); }

.ck-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ck-kpi { background: var(--surface); padding: 12px 13px; }
.ck-kpi .l { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ck-kpi .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ck-kpi .v small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.ck-kpi .s { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

.strat-row { display: grid; grid-template-columns: 14px 1fr 92px 42px; gap: 7px; align-items: center; font-size: 11.5px; padding: 3px 0; color: var(--text-2); }
.strat-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.strat-bar > i { display: block; height: 100%; background: var(--border-strong); border-radius: 3px; }
.strat-row .pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-3); }
.strat-row.on { color: var(--text); font-weight: 700; }
.strat-row.on .strat-bar > i { background: var(--accent); }
.strat-row.on .pct { color: var(--text); }
.strat-row .sdot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }

/* Optimization panel — real engine strategy reporting */
.opt-pill { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
            border: 1px solid var(--border); border-radius: 9px;
            background: var(--surface-2); margin-bottom: 10px; }
.opt-pill .dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
                 box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.opt-pill .nm  { font-weight: 700; font-size: 13.5px; letter-spacing: .01em; }
.opt-pill .sub { margin-left: auto; font-size: 10px; color: var(--text-3);
                 text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.opt-cell { background: var(--surface-2); border: 1px solid var(--border);
            border-radius: 8px; padding: 7px 9px; min-width: 0; }
.opt-cell .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
               color: var(--text-3); margin-bottom: 2px; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.opt-cell .v { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.opt-cell .v small { font-weight: 600; font-size: 10px; color: var(--text-3); margin-left: 2px; }

.me-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border); }
.me-row:last-child { border-bottom: none; }
.me-row .v { font-weight: 650; font-variant-numeric: tabular-nums; }

.ck-overlay { position: absolute; inset: 0; background: var(--bg); z-index: 30; display: flex; flex-direction: column; animation: fade .14s ease; }
.ck-overlay-h { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; }
.ck-overlay-b { flex: 1 1 auto; overflow-y: auto; padding: 22px; }


/* ============================================================
   Cockpit — interactive canvas, selection, tooltip, shortcuts
   ============================================================ */
@keyframes ckpulse { 0%,100% { opacity: .85; } 50% { opacity: .25; } }
.ck-pulse { animation: ckpulse 1.25s ease-in-out infinite; }

/* clickable part rows in the left rail */
.ck-prow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s; }
.ck-prow:hover { background: var(--surface-3); }
.ck-prow.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.ck-prow.on .mono { color: var(--accent-text); }

/* selected-part inspector card */
.ck-selcard { background: var(--accent-soft); border-bottom: 1px solid var(--border); animation: fade .16s ease; }
.ck-selcard .me-row { border-bottom-color: var(--border-2); }
.ck-clear { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent-text); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.ck-clear:hover { background: var(--accent-soft-2); }

/* keyboard-hint button */
.ck-keyhint { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3); font-weight: 700; font-size: 12px; cursor: pointer; display: grid; place-items: center; }
.ck-keyhint:hover { border-color: var(--accent); color: var(--accent-text); }

/* floating hover tooltip */
.ck-tip { position: fixed; z-index: 80; pointer-events: none; width: 216px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 9px; box-shadow: var(--shadow-lg); padding: 10px 12px; animation: fade .1s ease; }
.ck-tip-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ck-tip-h .mono { font-size: 13px; }
.ck-tip-dim { font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-tip-label { font-size: 11.5px; color: var(--text-2); margin: 2px 0 7px; }
.ck-tip-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.ck-tip-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ck-tip-meta span { font-size: 10px; font-weight: 600; color: var(--text-3); background: var(--surface-3); padding: 1px 6px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
.ck-tip-meta .ck-tip-rot { background: var(--accent-soft); color: var(--accent-text); }
.ck-tip-hint { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--text-3); }

/* optimize-run overlay */
.ck-opt { position: absolute; inset: 0; z-index: 25; background: color-mix(in srgb, var(--surface-2) 78%, transparent); backdrop-filter: blur(2px); display: grid; place-items: center; animation: fade .12s ease; }
.ck-opt-card { text-align: center; padding: 4px; }
.ck-opt-spin { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin: 0 auto 14px; animation: ckspin 0.9s linear infinite; }
@keyframes ckspin { to { transform: rotate(360deg); } }
.ck-opt-t { font-weight: 700; font-size: 15px; }
.ck-opt-strat { font-size: 12px; color: var(--accent-text); margin-top: 4px; min-height: 16px; }
.ck-opt-bar { width: 220px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 12px auto 8px; }
.ck-opt-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; animation: ckfill .76s cubic-bezier(.4,.1,.2,1) forwards; }
@keyframes ckfill { from { width: 4%; } to { width: 100%; } }
.ck-opt-sub { font-size: 11.5px; color: var(--text-3); }

/* shortcuts overlay */
.ck-keys-scrim { position: fixed; inset: 0; z-index: 90; background: var(--overlay); display: grid; place-items: center; animation: fade .14s ease; }
.ck-keys { width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop .18s ease; overflow: hidden; }
.ck-keys-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.ck-keys-grid { padding: 10px 16px 16px; display: flex; flex-direction: column; }
.ck-keys-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px dashed var(--border); }
.ck-keys-row:last-child { border-bottom: none; }
.ck-kbd { flex: 0 0 84px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 8px; text-align: center; }

/* ============================================================
   Jobs — selection, bulk action bar, danger button
   ============================================================ */
th.sel-cell, td.sel-cell { width: 40px; text-align: center; padding-left: 8px; padding-right: 8px; }
.tbl tbody tr.row-sel { background: var(--accent-soft); }
.tbl tbody tr.row-sel:hover { background: var(--accent-soft); }
.card-sel { outline: 2px solid var(--accent); outline-offset: -1px; box-shadow: 0 0 0 4px var(--accent-soft); }

.btn.btn-danger { color: var(--err-text); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); background: var(--surface); }
.btn.btn-danger:hover { background: var(--err-soft); border-color: var(--err); }

.bulkbar {
  position: fixed; bottom: 24px; left: calc(50% + 115px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; z-index: 120;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px;
  box-shadow: var(--shadow-pop); padding: 9px 12px; animation: slideup .22s cubic-bezier(.2,.7,.3,1);
  max-width: calc(100vw - 48px); flex-wrap: wrap;
}
@media (max-width: 1080px) { .bulkbar { left: 50%; } }
.bulkbar .bb-count { font-size: 13px; font-weight: 700; padding-left: 4px; }
.bulkbar .bb-clear { font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.bulkbar .bb-clear:hover { color: var(--text); background: var(--surface-3); }
.bulkbar .bb-div { width: 1px; height: 22px; background: var(--border); }

/* ============================================================
   Responsive / mobile
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 22px; }
.nav-scrim { display: none; }
/* responsive grid utilities (override inline grids on small screens) */
.rgrid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.rgrid-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.rsplit { display: grid; grid-template-columns: 320px 1fr; }

@media (max-width: 768px) {
  /* ---- off-canvas sidebar drawer ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 268px !important; flex-basis: 268px !important;
    transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,.1,.2,1);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* never show the desktop icon-rail on mobile — always the full drawer */
  .sidebar.collapsed { width: 268px !important; flex-basis: 268px !important; }
  .sidebar.collapsed .nav-item span { display: inline; }
  .sidebar.collapsed .nav-section-label { display: block; }
  .sidebar.collapsed .brand-name { display: block; }
  .sidebar.collapsed .nav-badge { display: inline-block; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 190;
    background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .nav-scrim.show { opacity: 1; pointer-events: auto; }
  .main { width: 100%; }

  /* ---- topbar ---- */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-density { display: none; }
  .topbar .crumbs { overflow: hidden; flex-wrap: nowrap; }

  /* ---- page chrome ---- */
  .page, .page.wide, .page.full { padding: 18px 14px 84px; }
  .page-head { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
  .page-head .spacer { flex-basis: 100%; height: 0; }   /* drop action buttons to their own row */
  .page-title { font-size: 19px; }
  .page-sub { font-size: 13px; }

  .kpi-grid { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
  .rgrid-2, .rgrid-3, .rsplit { grid-template-columns: minmax(0,1fr); }
  .stack-mobile { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  /* let grid/flex children shrink so wide content (tables) scrolls instead of forcing the page wide */
  .rgrid-2 > *, .rgrid-3 > *, .rsplit > *, .stack-mobile > *, .settings-split > *, .ck-body > *, .card { min-width: 0; }
  /* settings: tab rail becomes a horizontal scroller above content */
  .settings-split { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; }
  .settings-split > nav { position: static !important; flex-direction: row !important; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .settings-split > nav > * { flex: 0 0 auto; }
  /* auth: full-width form, drop the brand panel */
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-aside { display: none !important; }
  /* classic result page: 6-up summary KPIs reflow to 2-up */
  .result-kpis { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; }

  /* ---- cards / tables ---- */
  .card-head { flex-wrap: wrap; row-gap: 10px; }
  .card-head .spacer { flex-basis: 100%; height: 0; }
  /* tables: scroll horizontally inside their card, with a right-edge fade cueing more columns */
  .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0;
    background:
      linear-gradient(to right, var(--surface), transparent 12px) 0 0 / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface), transparent 12px) 100% 0 / 24px 100% no-repeat local,
      linear-gradient(to right, rgba(20,28,40,.10), transparent) 0 0 / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(20,28,40,.10), transparent) 100% 0 / 14px 100% no-repeat scroll;
  }
  table.tbl { font-size: 12.5px; }
  table.tbl thead th, table.tbl tbody td { padding-left: 9px; padding-right: 9px; white-space: nowrap; }

  /* ---- modals ---- */
  .modal { max-width: calc(100vw - 24px) !important; }
  .modal-scrim { padding: 12px; }

  /* ---- bulk action bar ---- */
  .bulkbar { left: 12px !important; right: 12px; transform: none; bottom: 14px; justify-content: center; }

  /* ---- cockpit: stack rails below the canvas instead of hiding them ---- */
  .ck { height: auto; min-height: 100%; }
  .route-anim:has(> .ck) { height: auto; }   /* mobile keeps document scrolling */
  .ck-body { display: flex; flex-direction: column; }
  .ck-rail, .ck-canvas { overflow: visible; }
  .ck-rail.l, .ck-rail.r { display: flex; border-left: none; border-right: none; border-top: 1px solid var(--border); }
  .ck-canvas { order: -1; }
  .ck-rail.r { order: 0; }
  .ck-rail.l { order: 1; }
  .ck-feed { display: none; }
  .ck-mat-switch { display: inline-block; }
  .ck-scroll { min-height: 44vh; overflow: auto; }
  .ck-bar { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
}

/* FINOPTI-THEMES-APPENDED */
/* ============================================================
   FINOpti — full-system design directions
   Re-skins EVERY page via token overrides + chrome tweaks.
   Switch live with data-design = classic | machinist | workshop
   (combines with data-theme = light | dark)
   Load AFTER styles.css.
   ============================================================ */

/* =====================================================================
   MACHINIST — shop-floor instrument. Graphite on white, amber safety
   accent, IBM Plex Sans/Mono, square corners, hairline borders, dense.
   ===================================================================== */
[data-design="machinist"] {
  --bg:        #e9ecef;
  --surface:   #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #e6eaee;
  --overlay:   rgba(12, 16, 20, 0.5);

  --text:   #14181c;
  --text-2: #434a52;
  --text-3: #79818b;
  --text-inv: #ffffff;

  --border:        #d4d9de;
  --border-2:      #c1c8cf;
  --border-strong: #a4adb7;

  --accent:        #c2560a;
  --accent-hover:  #a84a09;
  --accent-press:  #8e3e07;
  --accent-soft:   #fbeadd;
  --accent-soft-2: #f6d8bd;
  --accent-text:   #b04d07;
  --on-accent:     #ffffff;

  --ok:    #2f7d4f;  --ok-soft:    #e3f0e7;  --ok-text:    #246b41;
  --warn:  #c07a0c;  --warn-soft:  #fbeed4;  --warn-text:  #8a5600;
  --err:   #c0392b;  --err-soft:   #fbe4e1;  --err-text:   #9c2c20;
  --muted: #828a94;  --muted-soft: #e8ebee;  --muted-text: #565d66;
  --info:  #c2560a;  --info-soft:  #fbeadd;

  --shadow-sm: 0 0 0 1px rgba(20,28,40,.02);
  --shadow-md: 0 1px 0 rgba(20,28,40,.05), 0 2px 5px rgba(20,28,40,.05);
  --shadow-lg: 0 6px 20px rgba(20,28,40,.13);
  --shadow-pop: 0 10px 30px rgba(20,28,40,.2);

  --r-xs: 1px; --r-sm: 2px; --r-md: 3px; --r-lg: 3px; --r-xl: 4px;

  --font: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-head: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --pad: 18px;
}
[data-design="machinist"][data-theme="dark"] {
  --bg:        #0a0c0e;
  --surface:   #15181b;
  --surface-2: #1b1f23;
  --surface-3: #23282d;
  --overlay:   rgba(0,0,0,.62);

  --text:   #e9edf1;
  --text-2: #aab3bd;
  --text-3: #6f7882;
  --text-inv: #0a0c0e;

  --border:        #262c32;
  --border-2:      #333a41;
  --border-strong: #454e57;

  --accent:        #e2842c;
  --accent-hover:  #ec9442;
  --accent-press:  #f0a259;
  --accent-soft:   #2a1d0f;
  --accent-soft-2: #3a2713;
  --accent-text:   #f0a050;
  --on-accent:     #1a1206;

  --ok:    #3aa869;  --ok-soft:    #102a1c;  --ok-text:    #5fcf8c;
  --warn:  #dca233;  --warn-soft:  #2c2310;  --warn-text:  #edc164;
  --err:   #e15a4c;  --err-soft:   #2c1715;  --err-text:   #f08a7e;
  --muted: #6b7480;  --muted-soft: #20262c;  --muted-text: #99a2ad;
  --info:  #e2842c;  --info-soft:  #2a1d0f;

  --shadow-sm: 0 0 0 1px rgba(0,0,0,.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.6);
  --shadow-pop: 0 14px 44px rgba(0,0,0,.65);
}

/* machinist chrome */
[data-design="machinist"] body { font-feature-settings: "tnum" 1; }
[data-design="machinist"] .card { box-shadow: none; }
[data-design="machinist"] .page-title { letter-spacing: -.01em; font-weight: 600; }
[data-design="machinist"] .brand-name { letter-spacing: .01em; font-weight: 600; }
[data-design="machinist"] .section-label,
[data-design="machinist"] .nav-section-label { letter-spacing: .09em; }
[data-design="machinist"] .nav-item.active { box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
[data-design="machinist"] .btn { letter-spacing: .005em; font-weight: 600; }
[data-design="machinist"] .btn.primary { box-shadow: none; }
[data-design="machinist"] .chip { border-radius: 2px; }
[data-design="machinist"] .kpi .k-value { font-family: var(--mono); letter-spacing: -.02em; }
[data-design="machinist"] table.tbl thead th { letter-spacing: .06em; background: var(--surface-2); }
[data-design="machinist"] .topbar, [data-design="machinist"] .ck-bar { background: var(--surface-2); }
[data-design="machinist"] .brand-mark { border-radius: 2px; }

/* =====================================================================
   WORKSHOP — warm joinery craft. Paper tones, sage + terracotta,
   Newsreader headings + Hanken Grotesk body, soft corners, airy.
   ===================================================================== */
[data-design="workshop"] {
  --bg:        #ece5d8;
  --surface:   #fbf8f2;
  --surface-2: #f4eee2;
  --surface-3: #e9e0d0;
  --overlay:   rgba(50, 40, 28, 0.42);

  --text:   #322c24;
  --text-2: #5f564a;
  --text-3: #948876;
  --text-inv: #fbf8f2;

  --border:        #e2d8c6;
  --border-2:      #d4c8b2;
  --border-strong: #bdad92;

  --accent:        #b3582f;
  --accent-hover:  #9c4c28;
  --accent-press:  #853f20;
  --accent-soft:   #f4e3d8;
  --accent-soft-2: #ecccb8;
  --accent-text:   #a44d28;
  --on-accent:     #fdf6ef;

  --ok:    #5e8a4e;  --ok-soft:    #e7f0dd;  --ok-text:    #4a7340;
  --warn:  #bf8a2e;  --warn-soft:  #f6ebd4;  --warn-text:  #8a6011;
  --err:   #b84a3a;  --err-soft:   #f6e2dd;  --err-text:   #97382b;
  --muted: #9a8e7c;  --muted-soft: #ece4d6;  --muted-text: #6a6051;
  --info:  #5e7d8a;  --info-soft:  #e3edf0;

  --shadow-sm: 0 1px 2px rgba(90,70,40,.07);
  --shadow-md: 0 3px 10px rgba(90,70,40,.09), 0 1px 3px rgba(90,70,40,.06);
  --shadow-lg: 0 14px 34px rgba(90,70,40,.16);
  --shadow-pop: 0 18px 48px rgba(70,52,30,.24);

  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px;

  --font: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-head: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --pad: 26px;
  --gap: 18px;
}
[data-design="workshop"][data-theme="dark"] {
  --bg:        #1f1b15;
  --surface:   #29241d;
  --surface-2: #322c23;
  --surface-3: #3c352b;
  --overlay:   rgba(0,0,0,.55);

  --text:   #f0e9dc;
  --text-2: #c3b8a6;
  --text-3: #8a7e6c;
  --text-inv: #1f1b15;

  --border:        #3a342a;
  --border-2:      #48402f;
  --border-strong: #5e5340;

  --accent:        #d27c54;
  --accent-hover:  #db8b64;
  --accent-press:  #e39b77;
  --accent-soft:   #34231a;
  --accent-soft-2: #432d20;
  --accent-text:   #e29871;
  --on-accent:     #1f1109;

  --ok:    #7cae63;  --ok-soft:    #1c2916;  --ok-text:    #9cc585;
  --warn:  #d6a648;  --warn-soft:  #2e2510;  --warn-text:  #e6c272;
  --err:   #d6685a;  --err-soft:   #2e1815;  --err-text:   #ea8e80;
  --muted: #7a6f5d;  --muted-soft: #2c261d;  --muted-text: #a99d8a;
  --info:  #6f97a6;  --info-soft:  #1b262a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 3px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.6);
  --shadow-pop: 0 18px 48px rgba(0,0,0,.66);
}

/* workshop chrome */
[data-design="workshop"] .page-title { font-weight: 600; letter-spacing: -.01em; }
[data-design="workshop"] .brand-name { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; }
[data-design="workshop"] .card-head h3 { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; }
[data-design="workshop"] .modal-head h3 { font-family: var(--font-head); }
[data-design="workshop"] .kpi .k-value { font-family: var(--font-head); font-weight: 600; }
[data-design="workshop"] .section-label,
[data-design="workshop"] .nav-section-label { text-transform: none; letter-spacing: .01em; font-weight: 700; }
[data-design="workshop"] .btn { font-weight: 600; }
[data-design="workshop"] .nav-item { border-radius: 10px; }
[data-design="workshop"] .empty .empty-ico { border-radius: 16px; }
[data-design="workshop"] table.tbl thead th { text-transform: none; letter-spacing: .01em; font-size: 12px; }

/* design switcher (top bar) */
.design-swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.design-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; }
.design-menu-item:hover { background: var(--surface-3); }
.design-menu-item.on { background: var(--accent-soft); }
.design-menu-item .dm-name { font-weight: 600; font-size: 13px; }
.design-menu-item .dm-desc { font-size: 11.5px; color: var(--text-3); }

/* ============================================================
   PRINT — professional, branded paper documents
   The on-screen app is replaced by .print-doc when printing.
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 13mm 14mm 16mm; }

  /* hide everything but the print document */
  .app, .toast-wrap, .no-print { display: none !important; }
  html, body, #root, .app-root { height: auto !important; overflow: visible !important; background: #fff !important; }

  .print-doc {
    display: block !important;
    /* force a clean light palette regardless of theme/design so the SVGs & tokens print correctly */
    --surface: #ffffff; --surface-2: #ffffff; --surface-3: #eeeeea;
    --border: #d8d8d2; --border-2: #cfcfc8; --border-strong: #9a9a92;
    --text: #141414; --text-2: #3a3a3a; --text-3: #767670;
    color: #141414;
    font-family: var(--font);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-size: 10px; line-height: 1.4;
  }
  .print-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ---- letterhead ---- */
  .pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    padding-bottom: 12px; border-bottom: 2px solid #141414; margin-bottom: 14px; }
  .pd-shop { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
  .pd-shop-sub { font-size: 9.5px; color: #555; margin-top: 2px; }
  .pd-head-r { text-align: right; min-width: 230px; }
  .pd-doctype { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #777; }
  .pd-ref { font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1.05; margin: 1px 0 7px; }
  .pd-meta { margin-left: auto; border-collapse: collapse; font-size: 9.5px; }
  .pd-meta td { padding: 1px 0 1px 14px; text-align: right; }
  .pd-meta td:first-child { color: #888; text-transform: uppercase; letter-spacing: .05em; font-size: 8.5px; }
  .pd-meta td:last-child { font-weight: 600; }

  /* ---- summary strip ---- */
  .pd-summary { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #d8d8d2; border-radius: 5px; overflow: hidden; margin-bottom: 16px; }
  .pd-sum-cell { padding: 8px 10px; border-right: 1px solid #e6e6e0; }
  .pd-sum-cell:last-child { border-right: none; }
  .pd-sum-cell .l { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #888; }
  .pd-sum-cell .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }

  /* ---- section + material headings ---- */
  .pd-h2 { font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 10px; padding-bottom: 5px; border-bottom: 1px solid #d8d8d2; break-after: avoid; }
  .pd-h2-sub { font-weight: 500; color: #888; font-size: 10px; margin-left: 6px; }
  .pd-section { break-before: page; }
  .pd-matgroup + .pd-matgroup { break-before: page; }

  /* ---- per-sheet block ---- */
  .pd-sheet { break-inside: avoid; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed #cfcfc8; }
  .pd-sheet:last-child { border-bottom: none; }
  .pd-sheet-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .pd-sheet-t { font-size: 14px; font-weight: 700; }
  .pd-sheet-t span { font-weight: 400; color: #888; }
  .pd-sheet-meta { display: flex; flex-wrap: wrap; gap: 5px; }
  .pd-chip { font-size: 8.5px; font-weight: 600; padding: 2px 7px; border: 1px solid #cfcfc8; border-radius: 20px; color: #333; white-space: nowrap; }
  .pd-chip.dark { background: #141414; color: #fff; border-color: #141414; }
  .pd-canvas { width: 100%; margin: 0 auto 10px; }
  .pd-canvas svg { width: 100% !important; height: auto !important; max-height: 138mm; display: block; }

  /* ---- tables ---- */
  .pd-table { width: 100%; border-collapse: collapse; font-size: 9px; }
  .pd-table thead { display: table-header-group; }
  .pd-table th { text-align: left; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #777;
    border-bottom: 1.2px solid #9a9a92; padding: 4px 7px; }
  .pd-table td { padding: 3px 7px; border-bottom: 1px solid #e6e6e0; }
  .pd-table tr { break-inside: avoid; }
  .pd-table .r { text-align: right; }
  .pd-table .mono { font-family: var(--mono); }
  .pd-table .mut { color: #999; }
  .pd-table.wide { font-size: 9px; }
  .pd-cutmat { margin-bottom: 16px; break-inside: avoid; }
  .pd-cutmat-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .pd-cutmat-c { font-size: 9px; color: #888; }

  /* ---- labels (Brother/Zebra-style) ---- */
  .pd-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm 5mm; }
  .pd-label { break-inside: avoid; border: 1px solid #bbb; border-radius: 4px; padding: 7px 9px; height: 30mm; box-sizing: border-box; display: flex; flex-direction: column; }
  .pd-label-top { display: flex; align-items: baseline; justify-content: space-between; }
  .pd-label-id { font-size: 15px; font-weight: 800; }
  .pd-label-sheet { font-size: 9px; font-weight: 700; color: #fff; background: #141414; border-radius: 3px; padding: 1px 6px; }
  .pd-label-desc { font-size: 9px; color: #444; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-label-dim { font-size: 13px; font-weight: 700; }
  .pd-label-row { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; color: #555; margin-top: 1px; }
  .pd-barcode { width: 100%; height: 22px; margin-top: auto; }
  .pd-label-foot { font-size: 7px; color: #888; letter-spacing: .02em; margin-top: 2px; }

  /* ---- running footer (repeats each page) ---- */
  .pd-foot { position: fixed; bottom: -10mm; left: 0; right: 0; display: flex; justify-content: space-between;
    font-size: 8px; color: #999; border-top: 1px solid #e0e0da; padding-top: 3px; }
}