/* ============================================================
   LUCA — Component system
   Built on the real Luca foundations (Ink Blue + Copper on
   Parchment, Satoshi). Tokens mirror colors_and_type.css from
   the design-system project; legacy class/token names are
   remapped onto the real palette so every screen re-skins.
   ============================================================ */

/* ---------- SATOSHI (self-hosted) ---------- */
@font-face {
  font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2"), url("../fonts/Satoshi-Regular.woff") format("woff");
}
@font-face {
  font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2"), url("../fonts/Satoshi-Medium.woff") format("woff");
}
@font-face {
  font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2"), url("../fonts/Satoshi-Bold.woff") format("woff");
}
@font-face {
  font-family: "Satoshi"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../fonts/Satoshi-Black.woff2") format("woff2"), url("../fonts/Satoshi-Black.woff") format("woff");
}

/* ----------------------------------------------------------
   1. TOKENS  (real Luca palette)
   ---------------------------------------------------------- */
:root {
  /* Brand primaries */
  --ink-blue:  #0F1D2D;
  --parchment: #F7F4EE;
  --copper:    #B87333;

  /* Ink scale */
  --ink-900:#0A1420; --ink-800:#0F1D2D; --ink-700:#16293D; --ink-600:#20384F;
  --ink-500:#2E4A64; --ink-400:#586070; --ink-300:#8A93A3; --ink-200:#C3CAD5;
  --ink-100:#E2E7EE; --ink-050:#F1F3F6;
  --slate:#586070; --blue-grey:#E2E7EE; --mist:#F1F3F6;

  /* Copper scale */
  --copper-700:#8A551F; --copper-600:#A1632A; --copper-500:#B87333;
  --copper-400:#C98C52; --copper-300:#DBA877; --copper-200:#ECCBA8; --copper-100:#F6E7D6;

  /* Semantic */
  --success:#2E7D5B; --warning:#E0A23A; --error:#D64545; --info:#3A6EA5;
  --success-bg:#E6F1EC; --warning-bg:#FBF1DE; --error-bg:#FBE6E6; --info-bg:#E4ECF5;
  --warning-ink:#9A6C14; --success-ink:#1F5A40; --error-ink:#A82F2F;

  --grad-ink: linear-gradient(160deg, #22405C 0%, #102234 55%, #070F18 100%);
  --grad-ink-radial: radial-gradient(120% 120% at 50% 0%, #1a2b3d 0%, #0a1420 60%);
  --grad-copper: linear-gradient(160deg, #C98C52 0%, #A1632A 100%);

  /* ---- legacy aliases (screens reference these) ---- */
  --brand:        var(--ink-blue);
  --brand-600:    var(--ink-700);
  --brand-700:    var(--ink-700);
  --brand-ink:    var(--ink-blue);
  --brand-ink-2:  var(--ink-700);
  --brand-tint:   var(--mist);
  --brand-tint-2: var(--blue-grey);
  --on-brand:     var(--parchment);

  --pos: var(--success);  --pos-ink: var(--success-ink);  --pos-tint: var(--success-bg);
  --warn: var(--warning); --warn-ink: var(--warning-ink); --warn-tint: var(--warning-bg);
  --danger: var(--error); --danger-ink: var(--error-ink); --danger-tint: var(--error-bg);
  /* decorative accents collapse to brand-neutral / info (palette is restrained) */
  --accent-purple: var(--slate);  --accent-purple-tint: var(--mist);
  --accent-teal:   var(--info);   --accent-teal-tint:   var(--info-bg);

  /* Neutral ramp (cool → warm-neutral Luca) */
  --n-0:#FFFFFF; --n-25:#FCFBF8; --n-50:#F7F4EE; --n-100:#F1F3F6; --n-150:#E8EBF0;
  --n-200:#E2E7EE; --n-300:#C3CAD5; --n-400:#8A93A3; --n-500:#586070; --n-600:#3F4757;
  --n-700:#16293D; --n-800:#0F1D2D; --n-900:#0A1420;

  /* Surfaces */
  --bg:        var(--parchment);
  --surface:   #FFFFFF;
  --surface-2: var(--mist);
  --line:      var(--divider, #E8EBF0);
  --divider:   #E8EBF0;
  --line-2:    var(--blue-grey);
  --border-strong: var(--ink-200);
  --ink:       var(--ink-blue);
  --ink-soft:  #1B2A3A;
  --ink-mute:  var(--slate);
  --ink-faint: var(--ink-300);

  /* Type */
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-2xs: 0.6875rem; --t-xs: 0.75rem;  --t-sm: 0.8125rem; --t-base:0.9375rem;
  --t-md:  1.0625rem; --t-lg: 1.25rem;  --t-xl: 1.5rem;    --t-2xl: 2rem;  --t-3xl: 2.75rem;

  /* Spacing */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-7:2rem; --s-8:2.5rem;

  /* Radius (real Luca) */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* Shadow (soft, warm, ink-tinted) */
  --sh-1:  0 1px 2px rgba(15,29,45,.06), 0 1px 1px rgba(15,29,45,.04);
  --sh-2:  0 4px 14px rgba(15,29,45,.08), 0 2px 4px rgba(15,29,45,.04);
  --sh-3:  0 12px 32px rgba(15,29,45,.12), 0 4px 10px rgba(15,29,45,.06);
  --sh-pop:0 12px 32px rgba(15,29,45,.16);
  --sh-ink:0 10px 30px rgba(10,20,32,.35);
  --sh-brand: var(--sh-ink);

  --ease: cubic-bezier(0.33, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--t-base);
  line-height: 1.5;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ----------------------------------------------------------
   2. ICONS
   ---------------------------------------------------------- */
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; color: currentColor; }
.ic svg { width: 1em; height: 1em; display: block; }

.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; font-size: 1.1rem;
  background: var(--mist); color: var(--ink-blue);
}
.icon-tile.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 0.95rem; }
.icon-tile.lg { width: 42px; height: 42px; border-radius: 13px; font-size: 1.2rem; }
/* decorative tiles → neutral ink-on-mist (palette is restrained) */
.tile-blue, .tile-grey, .tile-purple, .tile-teal { background: var(--mist); color: var(--ink-blue); }
/* the single copper accent — use once per view */
.tile-copper { background: var(--copper-100); color: var(--copper-700); }
/* semantic tiles carry real status meaning */
.tile-pos    { background: var(--success-bg); color: var(--success); }
.tile-warn   { background: var(--warning-bg); color: var(--warning-ink); }
.tile-danger { background: var(--error-bg);   color: var(--error); }

/* ----------------------------------------------------------
   3. CARD
   ---------------------------------------------------------- */
.card { background: var(--surface); border: none; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.card-pad { padding: var(--s-5); }

/* ----------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------- */
.btn {
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  padding: 0.6rem 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  transition: background 0.15s var(--ease), border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap; line-height: 1.1;
}
.btn:active { transform: scale(0.98); }
.btn-primary   { background: var(--ink-blue); color: var(--parchment); box-shadow: var(--sh-1); }
.btn-primary:hover   { background: var(--ink-700); box-shadow: var(--sh-2); }
.btn-copper    { background: var(--copper); color: #fff; box-shadow: var(--sh-1); }
.btn-copper:hover    { background: var(--copper-600); }
.btn-secondary { background: var(--surface); color: var(--ink-blue); border-color: var(--border-strong, var(--ink-200)); }
.btn-secondary:hover { background: var(--mist); }
.btn-ghost     { background: transparent; color: var(--slate); }
.btn-ghost:hover { background: var(--mist); color: var(--ink-blue); }
.btn-pos    { background: var(--success-bg); color: var(--success); }
.btn-pos:hover { background: #d8ebe1; }
.btn-danger-outline { background: var(--surface); color: var(--error); border-color: #eebcbc; }
.btn-danger-outline:hover { background: var(--error-bg); }
.btn-sm { padding: 0.4rem 0.72rem; font-size: var(--t-xs); border-radius: var(--r-sm); }
.btn-lg { padding: 0.75rem 1.1rem; font-size: var(--t-base); }
.btn-block { width: 100%; }
.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 11px;
  background: var(--surface); color: var(--slate); border: none; box-shadow: var(--sh-1);
}
.btn-icon:hover { box-shadow: var(--sh-2); color: var(--ink-blue); }

/* ----------------------------------------------------------
   5. CHIPS & BADGES / PILLS
   ---------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.36rem;
  font-size: var(--t-xs); font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: var(--r-xs);
  background: transparent; color: var(--fg-default);
  border: 1px solid var(--border-strong); white-space: nowrap; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.chip .ic { font-size: 0.95em; color: var(--fg-muted); }
.chip strong { font-weight: 700; color: var(--fg-strong); }
/* the single high-emphasis flag (active filter) — solid ink fill */
.chip-solid  { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
.chip-solid .ic { color: var(--parchment); }
/* colour variants tint ONLY the leading glyph; text + hairline stay neutral */
.chip-copper .ic { color: var(--copper); }
.chip-blue   .ic { color: var(--info); }
.chip-teal   .ic { color: var(--info); }
.chip-pos    .ic { color: var(--success); }
.chip-warn   .ic { color: var(--warning); }
.chip-danger .ic { color: var(--error); }
.chip-purple .ic { color: var(--slate); }
.chip-outline{ background: transparent; border-color: var(--border-strong); color: var(--fg-default); }

/* status: colour lives in a 7px signal dot, label stays ink (per DS badge spec) */
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; color: var(--fg-strong); white-space: nowrap; }
.status .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.dot-pos { background: var(--success); color: var(--success); }
.dot-warn { background: var(--warning); color: var(--warning); }
.dot-danger { background: var(--error); color: var(--error); }
.dot-copper { background: var(--copper); color: var(--copper); }
.dot-muted { background: var(--fg-muted); color: var(--fg-muted); box-shadow: none; }

/* meta pill — hairline outline, ink text, sentence case, tabular figures (subdued) */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--t-2xs); font-weight: 600;
  padding: 0.16rem 0.48rem; border-radius: var(--r-xs);
  border: 1px solid var(--border-strong); color: var(--fg-default);
  background: transparent; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tag .ic { color: var(--fg-muted); }
.tag.chip-copper .ic { color: var(--copper); }
.tag.chip-pos .ic { color: var(--success); }
.tag.chip-danger .ic { color: var(--error); }
.tag.chip-warn .ic { color: var(--warning); }
.tag.chip-blue .ic, .tag.chip-teal .ic { color: var(--info); }
.tag strong { font-weight: 700; color: var(--fg-strong); }

.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700; background: var(--ink-blue); color: var(--parchment); line-height: 1;
}
.count-badge.amber { background: var(--ink-blue); }

/* ----------------------------------------------------------
   6. LABELS
   ---------------------------------------------------------- */
.eyebrow {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate);
}
.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-head .eyebrow { color: var(--slate); }

/* ----------------------------------------------------------
   7. SUMMARY / STAT STRIP
   ---------------------------------------------------------- */
.stat-strip {
  display: flex; background: var(--surface); border: none;
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.stat-strip .stat { flex: 1; padding: 0.8rem 1rem; }
.stat-strip .stat + .stat { border-left: 1px solid var(--divider); }
.stat-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.stat-val { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--ink-blue); margin-top: 0.2rem; }
.stat-val.pos { color: var(--success); }
.stat-val.warn { color: var(--warning-ink); }
.stat-val.brand { color: var(--ink-blue); }
.stat-val.copper { color: var(--copper); }
.stat-sub { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.15rem; }

.stat-card { background: var(--surface); border: none; border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 0.9rem 1.05rem; }

/* ----------------------------------------------------------
   8. FIELDS / FORMS
   ---------------------------------------------------------- */
.field {
  background: var(--surface); border: 1.5px solid var(--blue-grey);
  border-radius: var(--r-md); padding: 0.6rem 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field.focused, .field:focus-within {
  border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100);
}
.field-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.2rem; }
.field-value { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.field-value.muted { color: var(--ink-faint); font-weight: 400; }
.field-input { font-family: inherit; font-size: var(--t-base); color: var(--ink-blue); border: none; background: none; outline: none; width: 100%; padding: 0; }
.field-row { display: flex; gap: 0.5rem; }
.field-row > .field { flex: 1; }
.field.dropdown .field-value { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.input {
  font-family: inherit; font-size: var(--t-base); color: var(--ink-blue);
  background: var(--surface); border: 1.5px solid var(--blue-grey);
  border-radius: var(--r-md); padding: 0.55rem 0.8rem; width: 100%;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }

/* toggle switch — ink-blue on-state (copper reserved as the single per-view accent) */
.switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; display: inline-block; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--ink-200); border-radius: var(--r-full); transition: background 0.2s var(--ease); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,29,45,.25); transition: transform 0.2s var(--ease); }
.switch input:checked + .track { background: var(--ink-blue); }
.switch.on .track { background: var(--ink-blue); }
.switch.on .thumb, .switch input:checked ~ .thumb { transform: translateX(17px); }

.toggle-row { display: flex; align-items: center; gap: 0.8rem; background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: var(--r-md); padding: 0.7rem 0.8rem; }
.toggle-row .t-body { flex: 1; }
.toggle-row .t-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.toggle-row .t-detail { font-size: var(--t-xs); color: var(--slate); margin-top: 0.1rem; line-height: 1.4; }

/* segmented control */
.segment { display: inline-flex; background: var(--mist); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.segment button { flex: 1; border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--slate); padding: 0.35rem 0.85rem; border-radius: var(--r-sm); transition: all 0.15s var(--ease); white-space: nowrap; }
.segment button.active { background: var(--surface); color: var(--ink-blue); box-shadow: var(--sh-1); font-weight: 700; }

/* ----------------------------------------------------------
   9. TABS  (active = copper)
   ---------------------------------------------------------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--divider); }
.tabs button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--slate); padding: 0.75rem 1rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 0.35rem; }
.tabs button:hover { color: var(--ink-blue); }
.tabs button.active { color: var(--copper); border-bottom-color: var(--copper); font-weight: 700; }

/* ----------------------------------------------------------
   10. DROPDOWN MENU
   ---------------------------------------------------------- */
.menu { background: var(--surface); border: none; border-radius: var(--r-md); box-shadow: var(--sh-pop); min-width: 184px; overflow: hidden; padding: 0.35rem; }
.menu-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); border-radius: var(--r-sm); cursor: pointer; }
.menu-item:hover { background: var(--mist); }
.menu-item .ic { font-size: 1rem; color: var(--slate); }
.menu-item.brand { color: var(--copper); } .menu-item.brand .ic { color: var(--copper); }
.menu-item.danger { color: var(--error); } .menu-item.danger .ic { color: var(--error); }
.menu-sep { height: 1px; background: var(--divider); margin: 0.35rem 0; }

/* ----------------------------------------------------------
   11. TABLE
   ---------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); padding: 0.65rem 0.9rem; background: var(--mist); border-bottom: 1px solid var(--divider); text-align: left; }
.table th.r { text-align: right; } .table th.c { text-align: center; }
.table td { padding: 0.75rem 0.9rem; font-size: var(--t-sm); color: var(--ink-soft); border-bottom: 1px solid var(--divider); vertical-align: middle; }
.table td.r { text-align: right; } .table td.c { text-align: center; }
.table tr:last-child td { border-bottom: none; }
.table tr.total td { background: var(--mist); font-weight: 700; color: var(--ink-blue); border-bottom: none; }

/* ----------------------------------------------------------
   12. ALERT / BANNER
   ---------------------------------------------------------- */
.banner { display: flex; gap: 0.75rem; align-items: flex-start; border-radius: var(--r-md); padding: 0.85rem 0.9rem; border: 1px solid var(--divider); background: var(--surface); box-shadow: var(--sh-1); }
.banner .ic { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; color: var(--fg-muted); }
.banner-title { font-size: var(--t-sm); font-weight: 700; color: var(--fg-strong); }
.banner-detail { font-size: var(--t-xs); margin-top: 0.15rem; line-height: 1.45; color: var(--fg-muted); }
.banner-detail strong { color: var(--fg-strong); font-weight: 700; }
.banner-danger .ic { color: var(--error); }
.banner-warn .ic { color: var(--warning); }
.banner-blue .ic { color: var(--info); }
.banner-pos .ic { color: var(--success); }
.banner-copper .ic { color: var(--copper); }

.callout { border-radius: var(--r-md); padding: 0.6rem 0.8rem; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; background: var(--mist); border: 1px solid var(--divider); color: var(--fg-default); }
.callout .ic { color: var(--fg-muted); }
.callout strong { color: var(--fg-strong); font-weight: 700; }
.callout-pos .ic { color: var(--success); }
.callout-warn .ic { color: var(--warning); }
.callout-blue .ic { color: var(--info); }
.callout-copper .ic { color: var(--copper); }
.callout-grey { }

/* ----------------------------------------------------------
   13. LIST ROW
   ---------------------------------------------------------- */
.row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; }
.row + .row { border-top: 1px solid var(--divider); }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 1px; }
.row-amt { font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.amt-pos { color: var(--success); } .amt-neg { color: var(--ink-blue); } .amt-danger { color: var(--error); }

/* ----------------------------------------------------------
   14. APP SHELL — DESKTOP SIDEBAR  (ink-blue, copper active)
   ---------------------------------------------------------- */
.app { display: flex; height: 100%; background: var(--bg); }

.sidebar { width: 232px; flex-shrink: 0; background: var(--ink-blue); display: flex; flex-direction: column; color: var(--parchment); transition: width 0.22s var(--ease); position: relative; z-index: 3; }
.sidebar.collapsed { width: 60px; }
.sb-brand { display: flex; align-items: center; gap: 0.65rem; height: 60px; padding: 0 0.9rem; border-bottom: 1px solid rgba(247,244,238,0.08); flex-shrink: 0; position: relative; }
.sb-logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sb-logo img { width: 100%; height: 100%; display: block; }
.sb-logo svg { width: 22px; height: 22px; }
.sb-wordmark { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; flex: 1; color: #fff; }
.sb-collapse { width: 28px; height: 28px; border-radius: 8px; background: rgba(247,244,238,0.08); border: none; color: rgba(247,244,238,0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-collapse:hover { background: rgba(247,244,238,0.16); color: #fff; }

/* collapsed rail: hovering the L mark swaps it for the toggle + a dark "Open sidebar" pill */
.expand-hint { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: var(--t-2xs); font-weight: 600; color: var(--parchment); background: var(--ink-700); border: 1px solid rgba(247,244,238,0.14); border-radius: var(--r-sm); padding: 0.32rem 0.62rem; opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease); box-shadow: var(--sh-2); }
.sidebar.collapsed .sb-brand { cursor: pointer; }

.sb-nav { flex: 1; overflow-y: auto; padding: 0.65rem 0.55rem; scrollbar-width: thin; }
.sb-nav::-webkit-scrollbar { width: 0; }
.sb-group { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,244,238,0.34); padding: 0.9rem 0.6rem 0.35rem; }
.sb-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem;
  border-radius: 11px; color: rgba(247,244,238,0.66); cursor: pointer;
  font-size: var(--t-sm); font-weight: 500; position: relative;
  transition: background 0.12s, color 0.12s; min-height: 40px; text-decoration: none;
}
.sb-item .ic { font-size: 1.2rem; flex-shrink: 0; }
.sb-item .sb-label { flex: 1; white-space: nowrap; overflow: hidden; }
.sb-item:hover { background: rgba(247,244,238,0.08); color: #fff; }
.sb-item.active { background: rgba(247,244,238,0.10); color: #fff; font-weight: 700; }
.sb-item.active .ic { color: var(--copper-300); }
.sb-item.active::before { content: ''; position: absolute; left: -0.55rem; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--copper); border-radius: 0 3px 3px 0; }
.sidebar.collapsed .sb-label, .sidebar.collapsed .sb-group, .sidebar.collapsed .sb-wordmark, .sidebar.collapsed .count-badge, .sidebar.collapsed .sb-collapse { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 0.55rem; }
.sidebar.collapsed .sb-brand { justify-content: center; padding: 0; }
/* collapsed + hovered: hide the mark, reveal the toggle in its place + the guide pill */
.sidebar.collapsed.show-expand .sb-logo { display: none; }
.sidebar.collapsed.show-expand .sb-collapse { display: flex; }
.sidebar.collapsed.show-expand .expand-hint { opacity: 1; }

.sb-foot { padding: 0.65rem; border-top: 1px solid rgba(247,244,238,0.08); display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.sb-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(247,244,238,0.16); display: flex; align-items: center; justify-content: center; font-size: var(--t-sm); font-weight: 700; flex-shrink: 0; color: #fff; }
.sb-user { flex: 1; font-size: var(--t-xs); color: rgba(247,244,238,0.6); white-space: nowrap; overflow: hidden; }
.sb-foot-btn { width: 30px; height: 30px; border-radius: 8px; background: none; border: none; color: rgba(247,244,238,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sb-foot-btn:hover { background: rgba(247,244,238,0.12); color: #fff; }
.sidebar.collapsed .sb-user { display: none; }
.sidebar.collapsed .sb-foot { flex-direction: column; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 60px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: 0.75rem; padding: 0 1.5rem; }
.topbar-title { font-size: var(--t-md); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: right; color: var(--ink-blue); flex: 1; }
.scroll { flex: 1; overflow-y: auto; }

/* ----------------------------------------------------------
   15. MOBILE — PHONE FRAME + APP HEADER
   ---------------------------------------------------------- */
.phone {
  width: 390px; height: 820px; background: var(--parchment);
  border-radius: 36px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-ink); border: 10px solid #0b1119;
}
.app-header {
  background: var(--ink-blue); color: var(--parchment); flex-shrink: 0;
  padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.app-header .h-left { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.app-header .h-title { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: #fff; }
.app-header .h-right { display: flex; align-items: center; gap: 0.4rem; }
.h-btn { width: 32px; height: 32px; border-radius: 9px; background: rgba(247,244,238,0.12); border: none; color: var(--parchment); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.h-btn:hover { background: rgba(247,244,238,0.22); }
.h-btn.lg { width: 36px; height: 36px; font-size: 1.1rem; }
.h-text-btn { background: rgba(247,244,238,0.12); border: none; color: var(--parchment); border-radius: 9px; padding: 0.32rem 0.65rem; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.h-back { background: none; border: none; color: var(--parchment); cursor: pointer; display: flex; align-items: center; gap: 0.25rem; font-size: var(--t-sm); font-weight: 500; font-family: inherit; }

.perspective { background: var(--mist); color: var(--slate); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 0.35rem; flex-shrink: 0; }

.mtabs { display: flex; background: var(--surface); border-bottom: 1px solid var(--divider); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs button { flex: 1; min-width: 76px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--slate); padding: 0.7rem 0.4rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.mtabs button.active { color: var(--copper); border-bottom-color: var(--copper); font-weight: 700; }

.screen-body { flex: 1; overflow-y: auto; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* scroll-column children keep their natural height and let the body scroll,
   instead of flex-shrinking (which would collapse + clip cards like .stat-strip) */
.screen-body > * { flex-shrink: 0; }

.sheet-overlay { position: absolute; inset: 0; background: rgba(10,20,32,0.45); backdrop-filter: blur(2px); display: flex; align-items: flex-end; z-index: 40; }
.sheet { background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; padding: 1.1rem 1.1rem 1.35rem; display: flex; flex-direction: column; gap: 0.7rem; max-height: 92%; overflow-y: auto; box-shadow: var(--sh-lg, var(--sh-3)); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-200); margin: 0 auto 0.2rem; }
.sheet-title { font-size: var(--t-md); font-weight: 700; text-align: center; letter-spacing: -0.01em; color: var(--ink-blue); }
.sheet-sub { font-size: var(--t-xs); color: var(--ink-faint); text-align: center; margin-top: -0.4rem; }

.fab { position: absolute; bottom: 1.35rem; right: 1.1rem; width: 54px; height: 54px; border-radius: 18px; background: var(--ink-blue); border: none; color: var(--parchment); cursor: pointer; box-shadow: var(--sh-2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; z-index: 20; transition: transform 0.1s; }
.fab:active { transform: scale(0.94); }

.action-bar { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--divider); padding: 0.85rem; display: flex; gap: 0.55rem; }

/* assistant (dark ink) card — the "That's Luca." pattern */
.assist-card { display: flex; gap: 0.95rem; align-items: flex-start; background: var(--grad-ink); border-radius: var(--r-lg); padding: 1.1rem; box-shadow: var(--sh-ink); color: #fff; }
.assist-star { width: 44px; height: 44px; border-radius: 13px; background: rgba(247,244,238,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--copper-300); font-size: 1.3rem; }
.assist-line { font-size: var(--t-sm); font-weight: 700; line-height: 1.45; }
.assist-sign { color: var(--copper-300); }

/* ----------------------------------------------------------
   16. money helper
   ---------------------------------------------------------- */
.money { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }

/* legacy strong-weight cleanups: keep within Satoshi's 400/500/700/900 */