/* ===== Svmmon backend — faithful recreation, shared shell ===== */
:root{
  --bg:#f4ede0;          /* app background (warm cream) */
  --content:#f1eadd;     /* content panel */
  --cell:#f8f3ea;        /* calendar cell / card surface */
  --cell2:#efe7d8;       /* secondary surface (hook rows) */
  --tan:#e8dfce;         /* tan button / credits card */
  --tan2:#e3d9c6;        /* input fill */
  --border:#e4dac6;      /* hairline */
  --border2:#d6cbb4;     /* stronger border */
  --ink:#23201a;         /* headings */
  --body:#3b362d;        /* body */
  --muted:#897f70;       /* muted */
  --faint:#a99f8d;       /* faint */
  --violet:#7c3aed;
  --deep:#6d28d9;
  --violet-soft:#ece4fb; /* light violet fill */
  --violet-line:#7c3aed;
  --active:#e7ddc9;      /* nav active */
  --red:#df4a39;
  --orange:#e08a3c;
  --green:#2f9e63;
  /* profile dot colors */
  --c-quinn:#7c3aed; --c-reese:#4a8fd6; --c-harper:#2fa86b;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
.app{width:1600px;display:grid;grid-template-columns:236px 1fr;background:var(--bg);font-family:var(--sans);color:var(--body);position:relative;overflow:hidden}

/* ---------- sidebar ---------- */
.side{border-right:1px solid var(--border);display:flex;flex-direction:column;padding:26px 18px 20px}
.logo{display:flex;align-items:center;gap:10px;padding:2px 6px 30px}
.logo .ic{display:flex;flex-direction:column;gap:2.5px}
.logo .ic i{height:3px;border-radius:2px;background:var(--violet);display:block}
.logo .ic i:nth-child(1){width:9px}.logo .ic i:nth-child(2){width:15px}.logo .ic i:nth-child(3){width:11px;margin-left:0}
.logo .wm{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.16em;color:var(--ink)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;font-size:16px;color:var(--body);text-decoration:none;font-weight:400}
.nav a.on{background:var(--active);color:var(--ink);font-weight:500}
.nav a.dim{color:var(--faint)}
.credits{margin-top:26px;background:var(--tan);border-radius:14px;padding:16px 16px 15px}
.credits .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.credits .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);font-family:var(--mono)}
.credits .v{font-size:15px;color:var(--ink);font-family:var(--mono);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.credits .reset{font-size:12.5px;color:var(--faint);margin:6px 0 13px}
.credits .manage{border:1px solid var(--border2);border-radius:10px;text-align:center;padding:11px;font-family:var(--serif);font-weight:600;font-size:15px;color:var(--body);background:transparent}
.side .sp{flex:1}
.side .support{font-size:16px;color:var(--body);padding:9px 14px;font-weight:400}
.signed{border:1px solid var(--border2);border-radius:14px;padding:15px 16px;margin-top:8px}
.signed .k{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:11px;font-family:var(--mono)}
.signed .out{font-size:15px;color:var(--violet);font-weight:500}

/* ---------- main ---------- */
.main{padding:34px 44px 40px;overflow:hidden;position:relative}
.h1{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--ink);letter-spacing:-0.015em;line-height:1}
.subh{font-size:17px;color:var(--muted);margin-top:9px}
.slabel{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;font-family:var(--sans)}
.mlabel{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-family:var(--mono)}
.refresh{position:absolute;top:34px;right:44px;border:1px solid var(--border2);background:var(--cell);border-radius:11px;padding:11px 17px;font-size:14.5px;color:var(--body);display:flex;align-items:center;gap:8px}

/* ===== animation utilities =====
   NOTE: motion is driven entirely in JS (inline styles via rAF) — NO CSS
   transitions here on purpose. The preview editor restarts CSS transitions
   on tracked elements during rapid class mutation, which pins them at the
   start frame. JS-set inline styles are immune. These classes only mark the
   hidden base state for the pre-script paint. */
.rise{opacity:0;transform:translateY(15px)}
.fade{opacity:0}
.pop{opacity:0;transform:scale(.94)}