/* REFRM v130 — unified theme layer. Load LAST on every page (after tokens.css).
   Maps each page's legacy variables onto the shared tokens, retires the competing lime / mint / purple accents,
   and applies the new shapes (pill buttons, rounder cards). No selectors, IDs or behaviour are removed. */

/* ============ 1. EDITOR + AUTH (style.css / premium / layout / v116 variable names) ============ */
:root:not([data-theme="light"]){
  --bg:var(--rf-bg); --panel:var(--rf-surface); --panel2:var(--rf-surface-2); --panel3:var(--rf-surface-3);
  --line:var(--rf-line); --line-soft:rgba(255,255,255,.06);
  --fg:var(--rf-text); --mut:var(--rf-muted); --faint:var(--rf-faint);
  --acc:#d4d4dc; --acc-hi:#ffffff; --acc-soft:rgba(255,255,255,.08); --acc-2:var(--rf-muted);
  --ok:var(--rf-ok); --warn:var(--rf-warn); --err:var(--rf-danger);
  --r-sm:10px; --r:14px; --r-lg:22px;
  --sh-2:0 16px 44px rgba(0,0,0,.4);
}
body{font-family:var(--rf-font)}

/* primary = white pill, everything else a quiet pill */
:root:not([data-theme="light"]) .primary,
:root:not([data-theme="light"]) button.primary{background:var(--rf-text);color:var(--rf-on-primary);border-color:var(--rf-text);border-radius:var(--rf-r-pill);font-weight:600;box-shadow:none}
:root:not([data-theme="light"]) .primary:hover:not(:disabled){background:#fff;opacity:.92}
:root:not([data-theme="light"]) .ghost,
:root:not([data-theme="light"]) button.ghost{border-radius:var(--rf-r-pill)}
:root:not([data-theme="light"]) .wide{border-radius:var(--rf-r-pill)}
:root:not([data-theme="light"]) .ib{border-radius:50%}
:root:not([data-theme="light"]) #top #export{border-radius:var(--rf-r-pill);padding-inline:20px}
:root:not([data-theme="light"]) #play{background:var(--rf-text);color:var(--rf-on-primary);box-shadow:0 4px 18px rgba(255,255,255,.12)}
:root:not([data-theme="light"]) .brand-mark,
:root:not([data-theme="light"]) .logo-mark{background:linear-gradient(145deg,#f6f8fc,#7f8b9b);box-shadow:0 5px 20px rgba(0,0,0,.4);color:#10151d}

/* surfaces: one neutral stage, soft violet glow only behind the preview */
:root:not([data-theme="light"]) #app{background:var(--rf-bg)}
:root:not([data-theme="light"]) #top{background:rgba(5,5,6,.85);border-bottom:1px solid var(--rf-line)}
:root:not([data-theme="light"]) #rail{background:var(--rf-bg-2)}
:root:not([data-theme="light"]) #left,
:root:not([data-theme="light"]) #right{background:var(--rf-surface)}
:root:not([data-theme="light"]) #player{background:radial-gradient(60% 60% at 50% 40%,rgba(139,124,255,.10),transparent 70%),var(--rf-bg-2)}
:root:not([data-theme="light"]) #stage{background:radial-gradient(ellipse at 50% 45%,#15151a 0%,#08080a 68%)}
:root:not([data-theme="light"]) .pbar{background:rgba(11,11,13,.94)}
:root:not([data-theme="light"]) #tl{background:linear-gradient(180deg,#0e0e11,#0a0a0c)}
:root:not([data-theme="light"]) #tlscroll{background-color:#0a0a0c}
:root:not([data-theme="light"]) #track{background-color:#101013}
:root:not([data-theme="light"]) #rail button.on{background:rgba(255,255,255,.09);color:#fff}

/* dialogs + cards: bigger radii, same border language */
dialog,.dlg,.auth-required-dialog{border-radius:var(--rf-r-card)}
:root:not([data-theme="light"]) .isec{border-radius:var(--rf-r-md)!important}
:root:not([data-theme="light"]) .auth-required-dialog{background:var(--rf-warm-glow),var(--rf-surface);border-color:var(--rf-line-strong);border-radius:var(--rf-r-panel)}
:root:not([data-theme="light"]) .auth-google-button{border-radius:var(--rf-r-pill)}
:root:not([data-theme="light"]) .auth-required-mark{background:linear-gradient(145deg,#f6f8fc,#7f8b9b)}

/* ============ 2. AUTH PAGES (login / signup): one centred card on a soft glow ============ */
.auth-wrap{display:block!important;position:relative;min-height:100dvh;background:var(--rf-glow),var(--rf-bg)!important}
.auth-wrap .auth-brand{display:block;position:absolute;top:0;left:0;right:0;padding:22px clamp(18px,4vw,40px);background:none!important;min-height:0}
.auth-wrap .auth-brand::after{display:none}
.auth-wrap .auth-feats,.auth-wrap .auth-foot{display:none}
.auth-wrap .auth-logo .mark{background:linear-gradient(145deg,#f6f8fc,#7f8b9b);box-shadow:0 6px 22px rgba(0,0,0,.4);width:34px;height:34px;border-radius:10px}
.auth-wrap .auth-logo .mark svg,.auth-wrap .auth-logo .mark{color:#10151d;font-weight:800}
.auth-wrap .auth-logo .wordmark{font-size:18px;letter-spacing:.12em}
.auth-wrap .auth-main{min-height:100dvh;padding:90px 18px 40px}
.auth-wrap .auth-card{max-width:400px;border-radius:var(--rf-r-panel);padding:40px 34px 34px;background:var(--rf-warm-glow),var(--rf-surface);border:1px solid var(--rf-line-strong);box-shadow:var(--rf-shadow-2)}
.auth-wrap .auth-card h2{font-size:26px;letter-spacing:-.02em}
.auth-wrap .gbtn{border-radius:var(--rf-r-pill);padding:14px}
.auth-wrap .auth-swap a{color:var(--rf-text);text-decoration:underline;text-underline-offset:3px}
.auth-wrap .auth-note-box{border-radius:var(--rf-r-sm);border-color:var(--rf-line-strong)}

/* ============ 3. DASHBOARD (dashboard.css names) ============ */
body.rf-dash,body.rf-acct{--bg:var(--rf-bg);--panel:var(--rf-surface);--panel2:var(--rf-surface-2);--line:var(--rf-line);--muted:var(--rf-muted);--text:var(--rf-text);--accent:var(--rf-text);--green:var(--rf-ok);
  --mint:var(--rf-text);--mint2:#d4d4dc;--warn:var(--rf-warn);--red:var(--rf-danger);--radius:var(--rf-r-card);
  background:var(--rf-bg);color:var(--rf-text);font-family:var(--rf-font)}
body.rf-dash .button,body.rf-acct .button,body.rf-acct .icon-button{border-radius:var(--rf-r-pill)}
body.rf-dash .button-primary,body.rf-acct .button-primary{background:var(--rf-text);color:var(--rf-on-primary);border-color:var(--rf-text);box-shadow:none;font-weight:600}
body.rf-dash .brand-mark,body.rf-acct .brand-mark{background:linear-gradient(145deg,#f6f8fc,#7f8b9b);color:#10151d}
body.rf-dash .eyebrow,body.rf-acct .eyebrow{color:var(--rf-muted);letter-spacing:.14em;font-weight:600}
body.rf-dash .stats article,body.rf-dash .dash-card,body.rf-dash .panel,body.rf-dash .ticket-list,body.rf-dash dialog,
body.rf-acct .card{background:var(--rf-surface);border:1px solid var(--rf-line);border-radius:var(--rf-r-card)}
body.rf-dash .dash-card:hover,body.rf-acct .pack-card:hover{border-color:var(--rf-line-strong);transform:translateY(-2px)}
body.rf-dash dialog{background:var(--rf-surface);color:var(--rf-text)}
body.rf-dash dialog::backdrop{background:rgba(3,3,5,.7);backdrop-filter:blur(8px)}

/* ============ 4. ADMIN (admin.css names): same tokens, structure untouched ============ */
:root{--admin-tokens:1}
body .admin-shell{--bg:var(--rf-bg);--bg-2:var(--rf-bg-2);--sidebar:var(--rf-bg-2);--panel:var(--rf-surface);--panel-2:var(--rf-surface-2);
  --line:var(--rf-line);--line-strong:var(--rf-line-strong);--text:var(--rf-text);--muted:var(--rf-muted);--dim:var(--rf-faint);
  --mint:var(--rf-text);--mint-strong:#d4d4dc;--blue:#b5c8ff;--purple:#c9bfff;--warning:var(--rf-warn);--danger:var(--rf-danger);--radius:var(--rf-r-card)}
body .admin-shell .sidebar{background:var(--rf-bg-2)}
body .admin-shell .nav-link.active{background:rgba(255,255,255,.08);color:#fff}


/* Signup reward popup */
.welcome-credit-dialog{width:min(430px,calc(100vw - 28px));border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.48);padding:0}
.welcome-credit-dialog::backdrop{background:rgba(4,5,8,.72);backdrop-filter:blur(8px)}
.welcome-credit-body{text-align:center;padding:24px 28px 28px}
.welcome-credit-star{margin:2px auto 14px;width:52px;height:52px;border:1px solid var(--line-strong);border-radius:17px;background:var(--surface-2);display:grid;place-items:center;font-size:28px;color:var(--text)}
.welcome-credit-body h2{margin:0 0 10px;font-size:clamp(22px,5vw,29px);letter-spacing:-.045em}
.welcome-credit-body p{margin:0 auto 18px;max-width:34ch;color:var(--muted);line-height:1.6;font-size:13px}
.welcome-credit-breakdown{margin:0 auto 20px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:12px}
.welcome-credit-body .dlg-actions{justify-content:center}.welcome-credit-body .primary{min-width:170px}