:root {
      --ink-950: oklch(0.16 0.015 265);
      --ink-900: oklch(0.19 0.018 265);
      --ink-850: oklch(0.22 0.02 265);
      --ink-800: oklch(0.26 0.02 265);
      --ink-700: oklch(0.34 0.02 265);
      --ink-500: oklch(0.55 0.02 265);
      --ink-400: oklch(0.66 0.015 265);
      --ink-300: oklch(0.78 0.012 265);
      --ink-200: oklch(0.88 0.008 265);
      --ink-100: oklch(0.94 0.006 90);
      --ink-50:  oklch(0.975 0.005 90);
      --paper:   oklch(0.985 0.004 90);
      --accent: oklch(0.62 0.18 278);
      --accent-ink: oklch(0.52 0.20 278);
      --accent-soft: oklch(0.62 0.18 278 / 0.14);
      --accent-line: oklch(0.62 0.18 278 / 0.32);
      --warm: oklch(0.78 0.13 62);
      --warm-soft: oklch(0.78 0.13 62 / 0.14);
      --ok: oklch(0.72 0.14 155);
      --warn: oklch(0.72 0.15 45);
      --err: oklch(0.62 0.20 25);
      --font-display: 'DM Serif Display', 'Times New Roman', serif;
      --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
      --radius-sm: 6px;
      --radius: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-sans);
      background: var(--paper);
      color: var(--ink-800);
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    a { color: inherit; text-decoration: none; }

    /* ── Portal nav ── */
    .portal-nav {
      padding: 16px 28px;
      background: white;
      border-bottom: 1px solid var(--ink-200);
      display: flex;
      align-items: center;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 10;
      flex-shrink: 0;
    }
    .portal-nav .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 16px;
      color: var(--ink-900);
      text-decoration: none;
    }
    .portal-nav .logo-mark { display: flex; align-items: center; flex-shrink: 0; }
    .portal-tag {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-500);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding-left: 14px;
      border-left: 1px solid var(--ink-200);
    }
    .portal-nav .right {
      margin-left: auto;
      display: flex;
      gap: 16px;
      align-items: center;
      font-size: 13px;
      color: var(--ink-500);
    }
    .portal-nav .right a { color: var(--ink-500); text-decoration: none; }
    .portal-nav .right a:hover { color: var(--ink-900); }
    .portal-nav .usr {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border: 1px solid var(--ink-200);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--ink-700);
    }
    .usr .av {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--warm), var(--accent));
      flex-shrink: 0;
    }

    /* ── Portal shell (sidebar + main) ── */
    .portal-shell {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: calc(100vh - 57px);
      flex: 1;
    }
    .portal-side {
      padding: 32px 18px;
      border-right: 1px solid var(--ink-200);
      background: white;
    }
    .side-title {
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--ink-900);
      letter-spacing: -0.015em;
      padding: 0 12px;
      margin-bottom: 24px;
    }
    .side-section {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-500);
      padding: 8px 12px;
      margin-top: 18px;
    }
    .side-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 14px;
      color: var(--ink-700);
      font-weight: 500;
      margin: 2px 0;
      text-decoration: none;
      transition: background 0.1s, color 0.1s;
    }
    .side-link:hover { background: var(--ink-100); color: var(--ink-900); }
    .side-link.active { background: var(--accent-soft); color: var(--accent-ink); }
    .side-link .count {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-500);
    }
    .side-link.active .count { color: var(--accent-ink); }

    /* ── Portal main ── */
    .portal-main {
      padding: 40px 48px 72px;
      max-width: 1100px;
      position: relative;
    }
    .page-head { margin-bottom: 32px; }
    .page-head h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 48px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--ink-900);
      margin-bottom: 8px;
    }
    .page-head h1 em { font-style: italic; color: var(--warm); }
    .page-head p { color: var(--ink-500); font-size: 15px; }

    /* ── Stat tiles ── */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }
    .stat {
      background: white;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius);
      padding: 20px 22px;
      position: relative;
      overflow: hidden;
    }
    .stat.accent::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 32px;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }
    .stat .lbl {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--ink-500);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .stat .num {
      font-family: var(--font-display);
      font-size: 48px;
      line-height: 1;
      color: var(--ink-900);
      letter-spacing: -0.02em;
    }
    .stat .sub {
      font-size: 12px;
      color: var(--ink-500);
      margin-top: 8px;
      font-family: var(--font-mono);
    }
    .stat .link {
      font-size: 12px;
      color: var(--accent-ink);
      margin-top: 10px;
      display: inline-block;
      font-weight: 500;
    }
    .stat .link:hover { text-decoration: underline; }

    /* ── Cards ── */
    .card-l {
      background: white;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 16px;
    }
    .card-l-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .card-l-head h3 {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 15px;
      color: var(--ink-900);
    }
    .card-l-head .tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-500);
    }
    /* legacy .card alias */
    .card {
      background: white;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 16px;
    }
    .card h2 { font-size: 16px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
    .card p { color: var(--ink-500); font-size: 14px; margin-bottom: 12px; }
    .card p:last-child { margin-bottom: 0; }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font-sans);
      border: 1px solid transparent;
      cursor: pointer;
      transition: all .15s ease;
      white-space: nowrap;
      text-decoration: none;
    }
    button { font-family: var(--font-sans); }
    .btn-primary {
      background: var(--accent);
      color: white;
      box-shadow: 0 1px 0 color-mix(in oklch, white 20%, transparent) inset, 0 6px 20px -8px color-mix(in oklch, var(--accent) 60%, transparent);
    }
    .btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
    .btn-ghost {
      background: transparent;
      color: var(--ink-800);
      border-color: var(--ink-200);
    }
    .btn-ghost:hover { background: var(--ink-100); }
    .btn-danger {
      background: transparent;
      color: var(--err);
      border-color: color-mix(in oklch, var(--err) 35%, transparent);
    }
    .btn-danger:hover { background: color-mix(in oklch, var(--err) 10%, transparent); }
    .btn-sm { padding: 7px 12px; font-size: 13px; }
    .btn-lg { padding: 14px 24px; font-size: 15px; }
    .btn-loading {
      opacity: 0.82;
      cursor: wait;
      pointer-events: none;
    }
    .btn-loading::before {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: btn-spin 0.65s linear infinite;
    }
    @keyframes btn-spin { to { transform: rotate(360deg); } }

    /* ── Pills ── */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid var(--accent-line);
      font-weight: 500;
    }
    .pill-warm {
      background: var(--warm-soft);
      color: var(--warm);
      border-color: color-mix(in oklch, var(--warm) 30%, transparent);
    }
    .pill-ok {
      background: color-mix(in oklch, var(--ok) 12%, transparent);
      color: var(--ok);
      border-color: color-mix(in oklch, var(--ok) 30%, transparent);
    }

    /* ── Forms ── */
    label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-700); }
    input[type="email"], input[type="password"], input[type="text"] {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-sm);
      font-size: 14px;
      margin-bottom: 16px;
      outline: none;
      background: white;
      color: var(--ink-900);
      font-family: var(--font-sans);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    input[type="number"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font-sans);
    }
    input[type="range"] { width: 100%; }
    input[type="file"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-sm);
      font-size: 13px;
      background: white;
      cursor: pointer;
      margin-bottom: 4px;
      font-family: var(--font-sans);
    }
    select {
      width: 100%;
      padding: 9px 10px;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font-sans);
      background: white;
      color: var(--ink-900);
    }

    /* ── Alerts ── */
    .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; }
    .alert-error { background: color-mix(in oklch, var(--err) 10%, transparent); border: 1px solid color-mix(in oklch, var(--err) 30%, transparent); color: var(--err); }
    .alert-success { background: color-mix(in oklch, var(--ok) 12%, transparent); border: 1px solid color-mix(in oklch, var(--ok) 30%, transparent); color: var(--ok); }
    .alert-info { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); }
    .alert-warning { background: color-mix(in oklch, var(--warn) 12%, transparent); border: 1px solid color-mix(in oklch, var(--warn) 35%, transparent); color: var(--warn); }

    /* ── Key display ── */
    .key-display {
      background: var(--ink-950);
      color: var(--accent);
      padding: 16px 20px;
      border-radius: var(--radius);
      font-family: var(--font-mono);
      font-size: 13px;
      word-break: break-all;
      margin: 12px 0;
      line-height: 1.7;
      border: 1px solid var(--ink-800);
    }
    .card-new-key { border-color: var(--accent-line); background: var(--accent-soft); }
    .card-new-key h2 { color: var(--accent-ink); }
    .card-new-key .key-display { border-color: var(--accent); }

    /* ── Tables ── */
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--ink-200);
      font-weight: 600;
      color: var(--ink-500);
      font-size: 11px;
      font-family: var(--font-mono);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    td { padding: 12px 12px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: var(--ink-50); }

    /* ── Badges ── */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 500;
      letter-spacing: 0.06em;
    }
    .badge-active { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ok); }
    .badge-revoked { background: color-mix(in oklch, var(--err) 10%, transparent); color: var(--err); }
    .badge-free { background: var(--accent-soft); color: var(--accent-ink); }
    .badge-paid { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ok); }

    /* ── Misc utilities ── */
    .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
    .text-muted { color: var(--ink-500); }
    .text-center { text-align: center; }
    .mb-4 { margin-bottom: 16px; }
    .flex-between { display: flex; justify-content: space-between; align-items: center; }
    .link { color: var(--accent-ink); text-decoration: none; }
    .link:hover { text-decoration: underline; }

    /* ── Usage chart ── */
    .usage-chart { display: flex; flex-direction: column; gap: 6px; }
    .usage-day { display: flex; align-items: center; gap: 10px; font-size: 13px; }
    .usage-day-label { width: 90px; color: var(--ink-500); flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; }
    .usage-day-bar-wrap { flex: 1; background: var(--ink-100); border-radius: 4px; height: 18px; overflow: hidden; }
    .usage-day-bar { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; transition: width 0.2s; }
    .usage-day-count { width: 32px; text-align: right; color: var(--ink-500); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }

    /* ── Call log ── */
    .call-log { font-size: 13px; }
    .call-entry { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
    .call-entry:last-child { border-bottom: none; }
    .call-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .call-dot-match { background: var(--ok); }
    .call-dot-no-match { background: var(--ink-400); }
    .call-meta { flex: 1; }
    .call-time { font-size: 11px; color: var(--ink-400); font-family: var(--font-mono); }

    /* ── Param rows (upload) ── */
    .param-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .param-group { margin-bottom: 16px; }
    .param-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--ink-700); }
    .param-hint { font-size: 11px; color: var(--ink-400); margin-top: 4px; }

    /* ── Upload row ── */
    .upload-row { display: grid; grid-template-columns: 2fr 2fr auto; gap: 10px; align-items: center; }
    .upload-row input[type="file"], .upload-row input[type="text"] { margin-bottom: 0; }
    .upload-advanced { margin-top: 14px; }
    .upload-advanced > summary { cursor: pointer; font-size: 12px; color: var(--accent-ink); padding: 4px 0; }
    .upload-advanced > summary:hover { text-decoration: underline; }

    /* ── Library workspace ── */
    .workspace {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 16px;
      margin-bottom: 24px;
      align-items: start;
    }
    .ws-sidebar {
      background: white;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-lg);
      padding: 14px;
      position: sticky;
      top: 80px;
    }
    .ws-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 4px 6px; }
    .ws-sidebar-header h3 { font-size: 11px; font-family: var(--font-mono); font-weight: 500; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.1em; }
    .new-lib-details { margin-bottom: 10px; }
    .new-lib-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 7px 12px;
      background: var(--accent-soft);
      border: 1px dashed var(--accent-line);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--accent-ink);
      text-align: center;
    }
    .new-lib-details > summary::-webkit-details-marker { display: none; }
    .new-lib-details > summary:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); }
    .new-lib-details[open] > summary { background: color-mix(in oklch, var(--accent) 20%, transparent); }
    .new-lib-form { padding: 12px 8px 4px; display: flex; flex-direction: column; gap: 8px; }
    .new-lib-form input, .new-lib-form select { width: 100%; margin-bottom: 0; padding: 7px 10px; font-size: 13px; }
    .new-lib-form button { padding: 7px 12px; font-size: 13px; }
    .lib-list { list-style: none; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
    .lib-item a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 12px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--ink-700);
      font-size: 14px;
      transition: background 0.1s;
    }
    .lib-item a:hover { background: var(--ink-100); color: var(--ink-900); }
    .lib-item.active a { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
    .lib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lib-count {
      font-size: 11px;
      color: var(--ink-500);
      background: var(--ink-100);
      padding: 2px 8px;
      border-radius: 999px;
      flex-shrink: 0;
      margin-left: 8px;
      font-family: var(--font-mono);
    }
    .lib-item.active .lib-count { background: var(--accent-line); color: var(--accent-ink); }
    .lib-revoked { opacity: 0.55; }
    .ws-main { min-width: 0; position: relative; }
    .empty-state {
      background: white;
      border: 1px dashed var(--ink-200);
      border-radius: var(--radius-lg);
      padding: 60px 24px;
      text-align: center;
      color: var(--ink-500);
    }
    .empty-state h2 { font-size: 18px; color: var(--ink-900); margin-bottom: 8px; font-family: var(--font-display); font-weight: 400; }
    .empty-state p { font-size: 14px; margin-bottom: 20px; }
    .empty-steps { list-style: decimal; text-align: left; max-width: 320px; margin: 0 auto; padding-left: 20px; font-size: 13px; line-height: 1.9; color: var(--ink-700); }
    .lib-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
    .lib-header h2 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
    .lib-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-500); }
    .lib-id-copy { cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.1s; user-select: none; }
    .lib-id-copy:hover { background: var(--ink-100); color: var(--ink-900); }
    .song-search {
      padding: 6px 10px;
      font-size: 13px;
      width: 200px;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-sm);
      background: white;
      color: var(--ink-900);
      outline: none;
      margin-bottom: 0;
      font-family: var(--font-sans);
    }
    .song-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

    /* ── Profile rows ── */
    .profile-grid {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 12px 24px;
      font-size: 14px;
    }
    .profile-label { color: var(--ink-500); font-size: 13px; }
    .profile-value { color: var(--ink-900); }

    /* ── Section heading ── */
    .section-head { margin-bottom: 20px; }
    .section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--ink-900); margin-bottom: 4px; letter-spacing: -0.01em; }
    .section-head p { color: var(--ink-500); font-size: 14px; }

    /* ── Dash grid (sparkline + jump back) ── */
    .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
    .dash-sparkline { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
    .spark-bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-width: 4px; opacity: 0.8; }
    .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

    /* ── Upgrade callout ── */
    .upgrade-callout {
      background: linear-gradient(135deg, var(--accent-soft), var(--warm-soft));
      border: 1px solid var(--accent-line);
      border-radius: var(--radius-lg);
      padding: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .upgrade-callout h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ink-900); margin-bottom: 4px; }
    .upgrade-callout p { color: var(--ink-700); font-size: 14px; }

    /* ── Activity summary ── */
    .activity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }

    /* ── Auth pages ── */
    .auth-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100vh - 57px);
      flex: 1;
    }
    .auth-form-side {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 48px;
      background: white;
    }
    .auth-form-inner { width: 100%; max-width: 400px; }
    .auth-form-inner h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 36px;
      color: var(--ink-900);
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .auth-form-inner .sub { color: var(--ink-500); font-size: 15px; margin-bottom: 32px; }
    .auth-art-side {
      background: var(--ink-950);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 48px;
      position: relative;
      overflow: hidden;
    }
    .auth-art-side::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 30% 40%, oklch(0.62 0.18 278 / 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 70% 70%, oklch(0.78 0.13 62 / 0.15) 0%, transparent 60%);
    }
    .auth-art-content { position: relative; text-align: center; }
    .auth-art-logo { color: var(--accent); margin-bottom: 24px; }
    .auth-art-logo svg { width: 56px; height: 56px; }
    .auth-art-tagline {
      font-family: var(--font-display);
      font-size: 28px;
      color: white;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 12px;
    }
    .auth-art-tagline em { font-style: italic; color: var(--warm); }
    .auth-art-sub { color: var(--ink-400); font-size: 14px; }

    /* ── Simple page wrapper (for verify / check-email) ── */
    .page-body { flex: 1; }
    .container { max-width: 560px; margin: 64px auto; padding: 0 24px; }
    .container.wide { max-width: 1100px; }

    /* ── Footer ── */
    footer {
      background: white;
      border-top: 1px solid var(--ink-200);
      padding: 20px 32px;
      text-align: center;
      font-size: 12px;
      color: var(--ink-500);
      flex-shrink: 0;
    }
    footer a { color: var(--ink-500); text-decoration: none; }
    footer a:hover { color: var(--ink-900); }

    /* ── Navigation skeleton ── */
    .nav-skeleton-overlay {
      position: absolute;
      inset: 0;
      z-index: 60;
      display: none;
      background: color-mix(in oklch, var(--paper) 92%, white);
      pointer-events: none;
      border-radius: var(--radius-lg);
      padding: 40px 48px 72px;
    }
    .ws-main > .nav-skeleton-overlay {
      padding: 0;
      background: var(--paper);
    }
    .is-nav-loading .nav-skeleton-overlay { display: block; }
    .nav-skeleton-body {
      padding: 0;
    }
    .skeleton-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }
    .skeleton-card {
      border-radius: var(--radius);
      border: 1px solid var(--ink-200);
      background: linear-gradient(90deg, var(--ink-100) 20%, var(--ink-50) 45%, var(--ink-100) 70%);
      background-size: 200% 100%;
      animation: nav-skeleton-shimmer 1.1s linear infinite;
      height: 130px;
    }
    .skeleton-hero {
      height: 86px;
      margin-bottom: 14px;
      border-radius: var(--radius-lg);
    }
    .skeleton-wide {
      height: 220px;
      border-radius: var(--radius-lg);
    }
    .nav-skeleton-library {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .skeleton-library-card {
      height: 236px;
      border-radius: var(--radius-lg);
    }
    .skeleton-library-table {
      height: 320px;
    }
    @keyframes nav-skeleton-shimmer {
      from { background-position: 180% 0; }
      to { background-position: -20% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .skeleton-card { animation: none; }
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .portal-shell { grid-template-columns: 1fr; }
      .portal-side { border-right: none; border-bottom: 1px solid var(--ink-200); padding: 16px; }
      .portal-main { padding: 24px 20px 48px; }
      .side-title { font-size: 22px; margin-bottom: 12px; }
      .workspace { grid-template-columns: 1fr; }
      .ws-sidebar { position: static; }
      .stat-row { grid-template-columns: repeat(2, 1fr); }
      .dash-grid { grid-template-columns: 1fr; }
      .activity-stats { grid-template-columns: repeat(2, 1fr); }
      .auth-split { grid-template-columns: 1fr; }
      .auth-art-side { display: none; }
      .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
      .nav-skeleton-overlay { padding: 24px 20px 48px; }
      .nav-skeleton-body { padding: 0; }
    }
    @media (max-width: 640px) {
      .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
      .portal-nav { padding: 12px 16px; }
      .portal-tag { display: none; }
      .upload-row { grid-template-columns: 1fr; }
      .param-row { grid-template-columns: 1fr; }
      table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    }
    @media (max-width: 480px) {
      .stat-row { grid-template-columns: 1fr; }
      .stat .num { font-size: 36px; }
      .page-head h1 { font-size: 36px; }
      .activity-stats { grid-template-columns: 1fr; }
      .skeleton-grid { grid-template-columns: 1fr; }
    }