@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&display=swap');

/* ============================================================
   SoloBooks — token layer
   :root                  = the shipping product (warm cream)
   [data-theme="cockpit"] = concept edition (lone pilot's cockpit)
   Same token names in both, so one component set serves both.
   ============================================================ */

:root{
  --canvas:#f5efe4; --paper:#fbf7ef; --panel:#f5efe4; --panel-2:#f5efe4;
  --surface-soft:#efe7d7; --surface-strong:#e6dcc6;
  --hairline:#c9bda4; --hairline-soft:#ddd2bb; --hairline-bright:#a8997c;
  --ink:#14201d; --body:#4a5752; --muted:#75807a; --muted-soft:#a39e8f;
  --accent:#5b4bd8; --accent-active:#4838b8; --accent-dim:rgba(91,75,216,.55); --accent-quiet:rgba(91,75,216,.12); --on-accent:#f7f0e3;
  --up:#4f7a3a; --down:#b13a26; --brass:#c9962f;
  --glow:none; /* @kind shadow */ --glow-soft:none; /* @kind shadow */ --scanline:transparent; --grid:transparent;
  --r-xl:20px; --r-md:10px; --r-sm:6px; --r-pill:100px;
  --shadow-soft:0 4px 12px rgba(20,32,29,.06); --shadow-lift:0 12px 32px rgba(20,32,29,.14);
  --font-display:'Fraunces',Georgia,serif;
  --font-sans:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --display-track:-.02em; --display-weight:400;
  --dur-micro:180ms; /* @kind other */ --dur-state:240ms; /* @kind other */ --dur-hero:600ms; /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */ --ease-inout:cubic-bezier(.45,.05,.55,.95); /* @kind other */
}

[data-theme="cockpit"]{
  --canvas:#05080c; --paper:#fbf7ef; --panel:#080e15; --panel-2:#0c141d;
  --surface-soft:#0c131b; --surface-strong:#111c26;
  --hairline:rgba(79,214,255,.19); --hairline-soft:rgba(196,222,238,.09); --hairline-bright:rgba(79,214,255,.5);
  --ink:#e6f3fa; --body:rgba(230,243,250,.72); --muted:rgba(230,243,250,.48); --muted-soft:rgba(230,243,250,.27);
  --accent:#4fd6ff; --accent-active:#7ee2ff; --accent-dim:rgba(79,214,255,.55); --accent-quiet:rgba(79,214,255,.09); --on-accent:#03141c;
  --up:#57d99a; --down:#ff6f5c; --brass:#e0b155;
  --glow:0 0 22px rgba(79,214,255,.26); /* @kind shadow */ --glow-soft:0 0 14px rgba(79,214,255,.14); /* @kind shadow */
  --scanline:rgba(255,255,255,.022); --grid:rgba(230,243,250,.032);
  --shadow-soft:0 2px 14px rgba(0,0,0,.5); --shadow-lift:0 22px 50px -12px rgba(0,0,0,.8);
  --font-display:'Sora',var(--font-sans);
  --display-track:.055em; --display-weight:300;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-active)}
.sb-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sb-display{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track)}
.sb-label{font:600 11px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ── ambient: starfield + instrument grid ─────────────────── */
.sb-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 8% 14%,rgba(255,255,255,.6),transparent 100%),radial-gradient(1px 1px at 21% 62%,rgba(255,255,255,.4),transparent 100%),radial-gradient(1.4px 1.4px at 33% 27%,rgba(196,232,255,.55),transparent 100%),radial-gradient(1px 1px at 44% 81%,rgba(255,255,255,.34),transparent 100%),radial-gradient(1.1px 1.1px at 57% 11%,rgba(255,255,255,.5),transparent 100%),radial-gradient(1px 1px at 63% 47%,rgba(196,232,255,.3),transparent 100%),radial-gradient(1.5px 1.5px at 72% 72%,rgba(255,255,255,.45),transparent 100%),radial-gradient(1px 1px at 84% 33%,rgba(255,255,255,.38),transparent 100%),radial-gradient(1.2px 1.2px at 91% 58%,rgba(196,232,255,.42),transparent 100%),radial-gradient(1px 1px at 15% 89%,rgba(255,255,255,.3),transparent 100%),radial-gradient(1px 1px at 38% 4%,rgba(255,255,255,.32),transparent 100%),radial-gradient(1.3px 1.3px at 68% 93%,rgba(255,255,255,.36),transparent 100%),radial-gradient(1px 1px at 96% 82%,rgba(255,255,255,.28),transparent 100%),radial-gradient(1px 1px at 5% 44%,rgba(255,255,255,.26),transparent 100%);background-repeat:no-repeat}
.sb-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 160px)}
.sb-glowfield{position:absolute;pointer-events:none;width:1100px;height:800px;border-radius:50%;background:radial-gradient(circle,var(--accent-quiet),transparent 62%)}

/* ── panel: holographic console surface ──────────────────── */
.sb-panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-soft)}
.sb-panel__glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px)}
.sb-panel__glass::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.sb-panel__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--hairline-soft)}
.sb-panel__ttl{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:17px}
.sb-panel__body{padding:22px}

/* power-on: 1px scan sweep per card, content fades behind it */
.sb-boot{animation:sb-boot-in .42s var(--ease-out) both;animation-delay:var(--d,0ms)}
.sb-boot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:var(--glow);animation:sb-scan .52s var(--ease-out) both;animation-delay:var(--d,0ms);z-index:4;pointer-events:none}
@keyframes sb-boot-in{from{opacity:0}to{opacity:1}}
@keyframes sb-scan{0%{top:0;opacity:0}12%{opacity:1}100%{top:100%;opacity:0}}

/* ── buttons ─────────────────────────────────────────────── */
.sb-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-pill);font:600 14px var(--font-sans);cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);white-space:nowrap}
.sb-btn:active{transform:scale(.98)}
.sb-btn--sm{height:34px;padding:0 16px;font-size:12.5px}
.sb-btn--primary{background:var(--accent);color:var(--on-accent)}
.sb-btn--primary:hover{background:var(--accent-active);box-shadow:var(--glow)}
.sb-btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.sb-btn--ghost:hover{border-color:var(--hairline-bright);box-shadow:var(--glow-soft);color:var(--ink)}
.sb-btn--danger{background:transparent;color:var(--down);border-color:color-mix(in oklab,var(--down) 45%,transparent)}
.sb-btn--danger:hover{border-color:var(--down);box-shadow:0 0 14px color-mix(in oklab,var(--down) 22%,transparent)}
.sb-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.sb-btn__ico{display:inline-flex;flex:none}

/* ── pills (filters) ────────────────────────────────────── */
.sb-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:transparent;font:500 14px var(--font-sans);color:var(--body);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.sb-pill:hover{border-color:var(--hairline-bright);box-shadow:var(--glow-soft)}
.sb-pill__n{font:500 12px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sb-pill.is-active{background:var(--accent-quiet);border-color:var(--accent-dim);color:var(--ink);box-shadow:var(--glow-soft)}
.sb-pill.is-active .sb-pill__n{color:var(--accent)}
.sb-pill--dashed{border-style:dashed;color:var(--muted)}
.sb-pill--down{color:var(--down)}
.sb-pill--down .sb-pill__n{color:var(--down)}
.sb-pill__x{color:var(--muted-soft);font-size:15px;line-height:1;margin-left:2px}

/* ── status badges ──────────────────────────────────────── */
.sb-badge{display:inline-flex;align-items:center;height:24px;padding:0 12px;border:1px solid;border-radius:var(--r-pill);font:600 11px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;backface-visibility:hidden}
.sb-badge--draft{border-color:var(--hairline);color:var(--muted)}
.sb-badge--issued{border-color:var(--accent-dim);color:var(--accent);box-shadow:var(--glow-soft)}
.sb-badge--paid{border-color:color-mix(in oklab,var(--up) 45%,transparent);color:var(--up)}
.sb-badge--overdue{border-color:color-mix(in oklab,var(--down) 45%,transparent);color:var(--down)}
.sb-badge--cancelled{border-color:var(--hairline);color:var(--muted-soft);text-decoration:line-through}
.sb-badge--credited{border-color:color-mix(in oklab,var(--brass) 50%,transparent);color:var(--brass)}
.sb-badge.is-flip{animation:sb-flip .34s var(--ease-inout) both}
@keyframes sb-flip{0%{transform:rotateX(0)}45%{transform:rotateX(-90deg)}55%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}

/* ── inputs ─────────────────────────────────────────────── */
.sb-field{display:flex;flex-direction:column;gap:7px}
.sb-field__lbl{font:600 10.5px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sb-input{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--r-md);transition:border-color var(--dur-state) var(--ease-inout),box-shadow var(--dur-state) var(--ease-inout)}
.sb-input:hover{border-color:var(--hairline-bright)}
.sb-input:focus-within{border-color:var(--accent);box-shadow:var(--glow)}
.sb-input input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:400 15px var(--font-sans)}
.sb-input input::placeholder{color:var(--muted-soft)}
.sb-input--mono input{font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums}
.sb-input__suffix{flex:none;font:500 12px var(--font-mono);color:var(--muted);letter-spacing:.04em}
.sb-input.is-error{border-color:var(--down)}
.sb-input.is-readonly{background:transparent;border-style:dashed}
.sb-field__hint{font-size:12px;color:var(--muted)}
.sb-field__hint.is-error{color:var(--down)}

/* ── table rows ─────────────────────────────────────────── */
.sb-row{position:relative;display:grid;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--hairline-soft);font-size:14px;overflow:hidden;cursor:pointer}
.sb-row::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent-quiet),transparent);transform:translateX(-100%);opacity:0}
.sb-row:hover::after{animation:sb-sweep .5s var(--ease-out) forwards}
.sb-row:hover{background:var(--surface-soft)}
.sb-row.is-selected{background:var(--accent-quiet)}
@keyframes sb-sweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:0}}
.sb-row__hd{display:grid;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--hairline);background:var(--surface-soft);font:600 10.5px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sb-row__code{font-family:var(--font-mono);font-size:13.5px;white-space:nowrap}
.sb-row__client{display:flex;align-items:center;gap:10px;min-width:0;font-weight:500}
.sb-row__dot{flex:none;width:8px;height:8px;border-radius:50%}
.sb-row__amt{text-align:right;font:500 14px var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-row__r{text-align:right}

/* ── KPI tile ───────────────────────────────────────────── */
.sb-kpi{padding:20px 24px 18px;border-left:1px solid var(--hairline-soft)}
.sb-kpi:first-child{border-left:0}
.sb-kpi__lbl{font:600 10.5px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sb-kpi__val{font-family:var(--font-mono);font-weight:500;font-size:30px;letter-spacing:-.01em;margin-top:9px;font-variant-numeric:tabular-nums;line-height:1.1}
.sb-kpi__val--up{color:var(--up)}
.sb-kpi__val--down{color:var(--down)}
.sb-kpi__hint{font-size:12px;color:var(--muted);margin-top:6px}
.sb-kpi__hint b{font-weight:600;color:var(--body)}
.sb-kpi.is-flicker .sb-kpi__val{animation:sb-flicker .42s steps(1,end) 2}
@keyframes sb-flicker{0%{opacity:1}25%{opacity:.45;text-shadow:var(--glow)}50%{opacity:1}75%{opacity:.7}100%{opacity:1}}

/* ── timer widget ───────────────────────────────────────── */
.sb-timer{display:flex;align-items:center;gap:26px;padding:22px 24px}
.sb-timer__who{flex:1;min-width:0;overflow:hidden}
.sb-timer__state{display:flex;align-items:center;gap:9px}
.sb-timer__dot{width:7px;height:7px;border-radius:50%;background:var(--muted-soft)}
.sb-timer.is-running .sb-timer__dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-quiet);animation:sb-breathe 2.6s var(--ease-inout) infinite}
@keyframes sb-breathe{0%,100%{box-shadow:0 0 0 3px var(--accent-quiet)}50%{box-shadow:0 0 0 7px var(--accent-quiet)}}
.sb-timer__clk{font-family:var(--font-mono);font-size:42px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:10px;line-height:1;color:var(--ink)}
.sb-timer__clk.is-locked{animation:sb-settle .34s var(--ease-out) both}
@keyframes sb-settle{0%{transform:scale(1.035)}60%{transform:scale(.994)}100%{transform:scale(1)}}
.sb-timer__chipwrap{position:relative;height:26px;margin-top:11px;overflow:hidden}
.sb-timer__chip{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;border:1px solid var(--hairline);border-radius:var(--r-pill);font:500 12.5px var(--font-sans);color:var(--body);white-space:nowrap}
.sb-timer__chip.is-in{animation:sb-chip-in .3s var(--ease-out) both}
.sb-timer__chip.is-out{position:absolute;left:0;top:0;animation:sb-chip-out .3s var(--ease-out) both}
@keyframes sb-chip-in{from{transform:translateX(26px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes sb-chip-out{from{transform:translateX(0);opacity:1}to{transform:translateX(-26px);opacity:0}}
.sb-timer__btnwrap{position:relative;flex:none;width:76px;height:76px;display:grid;place-items:center}
.sb-timer__ring{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none}
.sb-timer__ring circle{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--accent-dim))}
.sb-timer.is-running .sb-timer__ring{animation:sb-ring-pulse 2.6s var(--ease-inout) infinite}
.sb-timer__ring.is-igniting circle{animation:sb-ignite .5s var(--ease-out) both}
.sb-timer__ring.is-collapsing{animation:sb-collapse .28s var(--ease-inout) both}
@keyframes sb-ignite{from{stroke-dashoffset:220}to{stroke-dashoffset:0}}
@keyframes sb-collapse{to{transform:rotate(-90deg) scale(.05);opacity:0}}
@keyframes sb-ring-pulse{0%,100%{opacity:.6}50%{opacity:1}}
.sb-timer__go{width:52px;height:52px;border-radius:50%;border:1px solid var(--hairline);background:var(--surface-soft);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:all var(--dur-micro) var(--ease-out)}
.sb-timer__go:hover{border-color:var(--hairline-bright);box-shadow:var(--glow-soft)}
.sb-timer__go:active{transform:scale(.98)}
.sb-timer.is-running .sb-timer__go{border-color:var(--accent-dim);color:var(--accent)}
.sb-timer__bars{display:flex;align-items:flex-end;gap:6px;height:60px}
.sb-timer__bars i{display:block;width:14px;background:var(--surface-strong);border-radius:2px 2px 0 0}
.sb-timer__bars i.on{background:var(--accent-dim)}
.sb-timer__days{display:flex;gap:6px;margin-top:7px}
.sb-timer__days span{width:14px;text-align:center;font:500 9px var(--font-mono);color:var(--muted-soft)}

/* ── empty state ────────────────────────────────────────── */
.sb-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 32px}
.sb-empty__ttl{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:23px;margin-top:22px}
.sb-empty__body{font-size:14.5px;color:var(--muted);margin-top:10px;max-width:380px;line-height:1.55;text-wrap:pretty}
.sb-empty__acts{display:flex;gap:10px;margin-top:24px}

/* ── mascot: the AccountSolo pilot ──────────────────────── */
.sb-mascot{display:block;overflow:visible}
.sb-mascot__body{animation:sb-float 5.4s var(--ease-inout) infinite}
@keyframes sb-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.sb-mascot__eye{transform-origin:center;animation:sb-blink 7s step-end infinite}
@keyframes sb-blink{0%,96%{transform:scaleY(1)}97%,99%{transform:scaleY(.12)}100%{transform:scaleY(1)}}
.sb-mascot__arm-r{transform-origin:68px 92px;transition:transform var(--dur-state) var(--ease-out)}
.sb-mascot:hover .sb-mascot__arm-r,.sb-mascot.is-saluting .sb-mascot__arm-r{transform:rotate(-62deg)}
.sb-mascot__rim{opacity:.85}

/* ── toast ──────────────────────────────────────────────── */
.sb-toast{position:relative;display:flex;align-items:flex-start;gap:12px;width:340px;padding:15px 18px 16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden;animation:sb-toast-in .34s var(--ease-out) both}
@keyframes sb-toast-in{from{transform:translate(28px,-16px) rotate(1.5deg);opacity:0}to{transform:translate(0,0) rotate(0);opacity:1}}
.sb-toast__ttl{font-weight:600;font-size:14px}
.sb-toast__msg{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.sb-toast__bar{position:absolute;left:0;bottom:0;height:1.5px;background:var(--accent);box-shadow:var(--glow);animation:sb-drain 5s linear forwards}
@keyframes sb-drain{from{width:100%}to{width:0}}

/* ── mono print sequence (invoice number "prints") ──────── */
.sb-print-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   Neutral scope — legal documents (invoice / credit note).
   Never themed, never animated, regardless of ancestor theme.
   ============================================================ */
.sb-neutral,[data-theme] .sb-neutral{--canvas:#fbf7ef;--panel:#fbf7ef;--panel-2:#fbf7ef;--surface-soft:#f4efe4;--surface-strong:#e9e2d3;--hairline:#c9bda4;--hairline-soft:#ddd2bb;--hairline-bright:#a8997c;--ink:#14201d;--body:#4a5752;--muted:#75807a;--muted-soft:#a39e8f;--accent:#14201d;--accent-dim:rgba(20,32,29,.4);--accent-quiet:transparent;--on-accent:#fbf7ef;--up:#4f7a3a;--down:#b13a26;--glow:none; /* @kind shadow */ --glow-soft:none; /* @kind shadow */ --scanline:transparent;--grid:transparent;--font-display:'Fraunces',Georgia,serif;--display-track:-.01em;--display-weight:400;background:#fbf7ef;color:#14201d}
.sb-neutral *,.sb-neutral *::before,.sb-neutral *::after{animation:none!important;transition:none!important}
.sb-neutral .sb-panel__glass,.sb-neutral .sb-stars,.sb-neutral .sb-grid{display:none}

@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sb-stars,.sb-grid,.sb-glowfield,.sb-panel__glass{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .sb-boot{animation:sb-boot-in .2s linear both!important}
  .sb-boot::before,.sb-row::after{display:none}
  .sb-mascot__body,.sb-mascot__eye{animation:none!important}
  .sb-btn:active,.sb-timer__go:active{transform:none}
  .sb-toast{animation:sb-boot-in .2s linear both!important}
  .sb-toast__bar{animation:none;width:100%}
}