/* The shell pages (projects, login): the builder's own look, independent of any system's tokens.
   Premium, not royal: one accent, hairline borders, layered soft depth, a tight display face, mono meta. */
:root{--ink:#0B0F19;--ink-2:#3B4252;--ink-3:#5F6675;--ink-4:#6F7785;--canvas:#F4F5F8;--paper:#FFFFFF;--paper-2:#FAFAFC;--line:rgba(11,15,25,.08);--line-2:rgba(11,15,25,.14);
  --accent:#2563EB;--accent-ink:#1D4ED8;--accent-soft:#E8EFFF;--danger:#B91C1C;--danger-soft:#FEE2E2;
  --sh-1:0 1px 2px rgba(11,15,25,.04),0 1px 1px rgba(11,15,25,.03);--sh-2:0 8px 24px -12px rgba(11,15,25,.18),0 2px 6px -2px rgba(11,15,25,.08);--sh-3:0 32px 64px -24px rgba(11,15,25,.28),0 8px 16px -8px rgba(11,15,25,.12);
  --r-2:6px;--r-3:10px;--r-4:14px;--r-5:20px;--ease:cubic-bezier(.2,.7,.2,1);--mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light}
body.shell{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.shell a{color:inherit}
.shell :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-2)}
.shell .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* bar */
.sh-bar{height:56px;display:flex;align-items:center;gap:14px;padding:0 max(20px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(244,245,248,.85);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:5}
.sh-bar .mark{width:28px;height:28px;border-radius:8px;display:block}
.sh-bar .word{font-weight:600;letter-spacing:-.01em;font-size:14px}
.sh-bar .spacer{flex:1}
/* buttons */
.sh-btn{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:inherit;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);text-decoration:none;white-space:nowrap}
.sh-btn:hover{border-color:var(--ink-4);box-shadow:var(--sh-1)}
.sh-btn:active{transform:translateY(1px)}
.sh-btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.sh-btn.primary:hover{background:#1a2030}
.sh-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}.sh-btn.accent:hover{background:var(--accent-ink)}
.sh-btn.quiet{border-color:transparent;background:transparent;color:var(--ink-2)}.sh-btn.quiet:hover{background:rgba(11,15,25,.05);box-shadow:none}
.sh-btn.danger{color:var(--danger)}.sh-btn.danger:hover{background:var(--danger-soft);border-color:transparent}
.sh-btn.sm{height:32px;padding:0 12px;font-size:13px}
.sh-btn[disabled]{opacity:.45;cursor:not-allowed}
/* fields */
.sh-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.sh-input{height:44px;padding:0 14px;border-radius:var(--r-3);border:1px solid var(--line-2);background:var(--paper);font:inherit;font-size:15px;color:var(--ink);width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.sh-input:hover{border-color:var(--ink-4)}
.sh-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18);outline:0}
.sh-input.pin{font-family:var(--mono);font-size:22px;letter-spacing:.45em;text-align:center;height:56px}
.sh-err{color:var(--danger);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.sh-help{color:var(--ink-3);font-size:13px;font-weight:400}
/* page */
.sh-page{max-width:1180px;margin:0 auto;padding:48px 20px 96px}
.sh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.sh-head h1{font-size:40px;line-height:1.05;letter-spacing:-.035em;font-weight:600;margin:0}
.sh-head .sub{color:var(--ink-3);margin:8px 0 0;font-size:15px;max-width:52ch}
.sh-tools{display:flex;gap:8px;align-items:center}
/* cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pcard{position:relative;border-radius:var(--r-5);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.pcard:hover,.pcard:focus-within{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pcard .open{all:unset;display:block;cursor:pointer;text-align:left}
.pcard .open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-5)}
.pv{position:relative;aspect-ratio:16/9;padding:20px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line)}
.pv .aa{font-size:64px;line-height:.9;letter-spacing:-.04em;font-weight:700}
.pv .chip{position:absolute;top:16px;right:16px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center}
.pv .ramps{display:grid;gap:5px}
.pv .ramp{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:8px}
.pv .ramp i{display:block;border-radius:2px}
.pb{padding:16px 20px 18px;display:flex;flex-direction:column;gap:10px}
.pb .name{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0;display:flex;align-items:center;gap:10px}
.pb .name .dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex:none}
.pb .meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 14px}
.pb .meta b{color:var(--ink-2);font-weight:500}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 12px}
.pcard .foot .hint{font-size:12px;color:var(--ink-4);padding-left:8px}
.pcard.new{border-style:dashed;background:transparent;box-shadow:none;align-items:center;justify-content:center;min-height:300px;color:var(--ink-2)}
.pcard.new .open{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;min-height:300px;justify-content:center}
.pcard.new .plus{width:48px;height:48px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);display:grid;place-items:center;font-size:24px;line-height:1;box-shadow:var(--sh-1)}
.pcard.new:hover{background:rgba(255,255,255,.6)}
/* card manage row */
.manage{display:none;gap:6px;padding:0 12px 12px}
.manage.on{display:flex;flex-wrap:wrap}
.manage form{display:flex;gap:6px;align-items:center}
.manage .sh-input{height:32px;font-size:13px;width:9rem}
/* dialogs */
dialog.sh-dlg{border:0;padding:0;border-radius:var(--r-5);background:var(--paper);color:var(--ink);box-shadow:var(--sh-3);width:min(92vw,440px);max-height:92vh;overflow:auto}
dialog.sh-dlg.wide{width:min(94vw,980px)}
dialog.sh-dlg::backdrop{background:rgba(11,15,25,.45);backdrop-filter:blur(6px)}
.dlg-head{display:flex;align-items:center;gap:14px;padding:22px 24px 0}
.dlg-head .sw{width:40px;height:40px;border-radius:12px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dlg-head h2{margin:0;font-size:20px;letter-spacing:-.02em;font-weight:600}
.dlg-head p{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.dlg-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 22px}
.dlg-x{position:absolute;top:14px;right:14px}
/* sheet steps */
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-4);font-family:var(--mono)}
.steps b{color:var(--ink)}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:46vh;overflow:auto;padding:2px}
.pcho{position:relative;border:1.5px solid var(--line);border-radius:var(--r-4);overflow:hidden;background:var(--paper);cursor:pointer;display:block;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.pcho:hover{border-color:var(--ink-4)}
.pcho.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.pcho input{position:absolute;opacity:0;width:0;height:0}
.pcho .thumb{display:block;width:100%;aspect-ratio:4/3;border:0;pointer-events:none;background:var(--paper-2)}
.pcho .thumb.blank{display:grid;place-items:center}
.pcho .thumb.blank i{width:36px;height:36px;border-radius:999px;display:block}
.pcho .lbl{display:block;padding:8px 10px;font-size:13px;font-weight:500}
.pcho.on .lbl{color:var(--accent-ink)}
.why{color:var(--ink-3);font-size:13px;min-height:1.4em;margin:0}
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(100%,420px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-5);box-shadow:var(--sh-2);padding:36px}
.login-card .mark{width:52px;height:52px;border-radius:14px;display:block;margin-bottom:18px}
.login-card h1{font-size:24px;letter-spacing:-.025em;margin:0 0 6px;font-weight:600}
.login-card p{color:var(--ink-3);margin:0 0 22px}
.login-card .sh-btn{width:100%;justify-content:center;height:44px;margin-top:12px}
@media (max-width:640px){.sh-head h1{font-size:32px}.pgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pcard,.sh-btn,.pcho{transition:none}.pcard:hover{transform:none}}