/* public/styles/design-system.css — the single source of visual truth for M6. */
:root{
  --bg:#0f1115; --bg-1:#13161c; --bg-2:#181c23; --bg-3:#1f242e;
  --card:#14171d; --card-2:#181c23;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13);
  --text:#e8eaf0; --muted:#9aa2ae; --faint:#646b78;
  --a1:#6ea8fe; --a2:#a98cff;
  --grad:linear-gradient(135deg,#6ea8fe,#a98cff);
  --grad-soft:linear-gradient(135deg,rgba(110,168,254,.16),rgba(169,140,255,.16));
  --hi:#6fe3b8; --mid:#f0c674; --low:#f2a08e;
  --hi-bg:rgba(111,227,184,.12); --mid-bg:rgba(240,198,116,.12); --low-bg:rgba(242,160,142,.12);
  --hi-bd:rgba(111,227,184,.30); --mid-bd:rgba(240,198,116,.30); --low-bd:rgba(242,160,142,.32);
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --radius:12px;
}
/* Light theme is defined for a future toggle (M6 ships dark only — no toggle UI). */
[data-theme="light"]{
  --bg:#f4f5f8; --bg-1:#fff; --bg-2:#f0f1f5; --bg-3:#e7e9ef;
  --card:#fff; --card-2:#f7f8fb;
  --border:rgba(15,17,21,.09); --border-2:rgba(15,17,21,.16);
  --text:#1a1d24; --muted:#5a626e; --faint:#9aa1ad;
  --hi:#1aa177; --mid:#b9842a; --low:#cf6347;
  --hi-bg:rgba(26,161,119,.10); --mid-bg:rgba(185,132,42,.10); --low-bg:rgba(207,99,71,.10);
  --hi-bd:rgba(26,161,119,.28); --mid-bd:rgba(185,132,42,.28); --low-bd:rgba(207,99,71,.30);
}
@keyframes rt-spin{to{transform:rotate(360deg)}}
@keyframes rt-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes rt-fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rt-breathe{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}

body{font-family:var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}

/* Buttons */
.rt-btn{height:42px;padding:0 18px;border-radius:11px;border:1px solid var(--border-2);
  background:var(--bg-1);color:var(--text);font-family:var(--font);font-weight:600;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,background .15s}
.rt-btn--primary{border:none;background:var(--grad);color:#0b0d12;font-weight:700;box-shadow:0 8px 22px rgba(110,168,254,.28)}
.rt-btn--primary:hover{filter:brightness(1.05)}
.rt-btn--ghost{background:transparent;color:var(--muted)}
.rt-btn--ghost:hover{color:var(--text);background:var(--bg-1)}
.rt-btn:disabled,.rt-btn[disabled]{background:var(--bg-2);color:var(--faint);border-color:var(--border);cursor:not-allowed;box-shadow:none;filter:none}

/* Cards */
.rt-card{border:1px solid var(--border);border-radius:16px;background:var(--card)}
.rt-card--pad{padding:20px}

/* Inputs */
.rt-input,.rt-textarea{width:100%;background:var(--bg-1);border:1px solid var(--border-2);border-radius:11px;
  color:var(--text);font-family:var(--font);font-size:14px;outline:none}
.rt-input{height:44px;padding:0 14px}
.rt-textarea{padding:14px;resize:vertical}
.rt-input:focus,.rt-textarea:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(110,168,254,.16)}

/* Pills / tags / chips */
.rt-pill{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--border-2);background:var(--bg-2);color:var(--muted)}
.rt-tag{padding:4px 9px;border-radius:7px;font-size:11.5px;font-weight:600;border:1px solid var(--border);background:var(--bg-2);color:var(--muted)}
.rt-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border-2)}
.rt-chip.is-high{background:var(--hi-bg);color:var(--hi);border-color:var(--hi-bd)}
.rt-chip.is-mid{background:var(--mid-bg);color:var(--mid);border-color:var(--mid-bd)}
.rt-chip.is-low{background:var(--low-bg);color:var(--low);border-color:var(--low-bd)}
.rt-chip__dots{display:inline-flex;gap:2px}
.rt-chip__dot{width:5px;height:5px;border-radius:50%;background:var(--border-2)}

/* Progress / mastery bar */
.rt-bar{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.rt-bar__fill{height:100%;border-radius:99px;background:var(--grad);transition:width .5s ease}

/* Tone helpers (text + bar fill) */
.tone-low{color:var(--low)} .tone-mid{color:var(--mid)} .tone-high{color:var(--hi)}
.fill-low{background:var(--low)} .fill-mid{background:var(--mid)} .fill-high{background:var(--grad)}

.rt-mono{font-family:var(--mono)}

/* Brand wordmark (shared across login + shell) */
.rt-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  font-weight:800;font-size:17px;letter-spacing:-.03em}
.rt-brand__mark{width:26px;height:26px;border-radius:8px;background:var(--grad);box-shadow:0 5px 14px rgba(110,168,254,.35)}