/* ============================================================================
   InterSpace Distribution · brand theme for the CMS  (css/interspace-brand.css)

   Carries the interspacemusic.com design language into the app: warm paper
   surface, charcoal ink, Inter + Geist Mono, pill buttons, soft 24–34px panels,
   ring-and-glow shadows instead of borders, quiet 140/260ms easing.

   Loaded LAST in includes/header.php, admin/includes/header.php and every
   standalone auth page. It only re-declares tokens and re-skins the existing
   component classes — no markup contract changes, so removing the <link>
   restores the previous look.

   Specificity notes: admin-console.css scopes its rules as `.admin-shell X`
   (0,2,0). Everything inside the app uses `.app-shell X` here (same weight,
   later source wins); things that live outside the shell use `body X`.
   ============================================================================ */

/* ---- 1. Tokens: light paper is the default everywhere ------------------- */
:root, body, body.admin-shell, [data-theme="light"] {
    --paper:   #fafaf7;  --paper-2: #f3f2ec;
    --panel-a: #f1f0eb;  --panel-b: #eae8e2;  --panel-c: #eceae4;
    --ink:     #2a2a27;  --ink-2:   #66645d;  --muted: #8a8880;  --muted-2: #b1aea5;
    --line:    rgba(42, 42, 39, 0.08);  --line-2: rgba(42, 42, 39, 0.12);
    --white:   #ffffff;
    --live:    #3aa676;  --live-soft: rgba(58, 166, 118, 0.14);
    --wait:    #d69a2a;  --wait-soft: rgba(214, 154, 42, 0.16);
    --violet:  #7466e8;  --violet-soft: rgba(116, 102, 232, 0.12);
    --accent-soft: rgba(222, 10, 38, 0.10);
    --glass: rgba(255,255,255,0.6);      /* translucent white for ghost pills/buttons */

    /* CMS token names, remapped to the brand palette */
    --bg:        var(--paper);
    --bg-2:      var(--paper-2);
    --bg-3:      var(--panel-c);
    --surface:   var(--white);
    --surface-2: #f7f6f2;
    --surface-3: var(--paper-2);
    --surface-1: var(--white);
    --input-bg:  var(--white);
    --accent:       #de0a26;
    --accent-hover: #c40921;
    --accent-dim:   var(--accent-soft);
    --accent-glow:  rgba(222, 10, 38, 0.18);
    --admin:        #de0a26;  --admin-dim: var(--accent-soft);
    --teal:      #2f9c86;  --teal-dim:    rgba(47, 156, 134, 0.12);
    --text:      var(--ink);
    --text-1:    var(--ink);
    --text-2:    var(--ink-2);
    --text-3:    var(--muted);
    --text-4:    var(--muted-2);
    --border:    var(--line);
    --border-1:  var(--line);
    --border-2:  var(--line-2);
    --danger:    #de0a26;  --danger-dim:  var(--accent-soft);  --err: #de0a26; --error: #de0a26;
    --warning:   #d69a2a;  --warning-dim: var(--wait-soft);
    --success:   #3aa676;  --success-dim: var(--live-soft);
    --info:      #7466e8;  --info-dim:    var(--violet-soft);

    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --r-pill: 999px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   24px;
    --r-2xl:  34px;

    --shadow-card:  0 0 0 1px rgba(42, 42, 39, 0.06), 0 4px 14px rgba(42, 42, 39, 0.08);
    --shadow-float: 0 1px 2px rgba(42, 42, 39, 0.05), 0 14px 36px rgba(42, 42, 39, 0.10), 0 40px 90px rgba(42, 42, 39, 0.10), 0 0 0 1px rgba(42, 42, 39, 0.06);
    --shadow-btn:   0 14px 30px rgba(42, 42, 39, 0.14), 0 2px 6px rgba(42, 42, 39, 0.08);
    --shadow-sm:    0 0 0 1px rgba(42, 42, 39, 0.05), 0 1px 2px rgba(42, 42, 39, 0.04);
    --shadow:       var(--shadow-card);
    --shadow-md:    0 0 0 1px rgba(42, 42, 39, 0.06), 0 12px 30px rgba(42, 42, 39, 0.10);
    --shadow-lg:    var(--shadow-float);
    --shadow-xl:    var(--shadow-float);
    --ring-accent:  0 0 0 3px rgba(222, 10, 38, 0.16);

    --ease:     cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-quick:  140ms;
    --t-std:    260ms;
    --transition:    var(--t-quick) var(--ease);
    --transition-md: var(--t-std) var(--ease);

    /* tokens some pages reference with dark fallbacks but nothing defined */
    --bg-paper: var(--white); --surface2: var(--surface-2); --surface-hover: var(--paper-2); --text-muted: var(--muted); --primary: var(--ink); --red: #de0a26;
    --sidebar-w: 256px;
    --topbar-h:  68px;
    color-scheme: light;
}

/* Dark: the same language on ink surfaces (toggle in the topbar) */
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] body.admin-shell {
    --paper:   #1b1b19;  --paper-2: #232321;
    --panel-a: #24241f;  --panel-b: #2b2b26;  --panel-c: #262622;
    --ink:     #f3f2ec;  --ink-2:   #b8b6ad;  --muted: #8a8880;  --muted-2: #6a685f;
    --line:    rgba(255, 255, 255, 0.08);  --line-2: rgba(255, 255, 255, 0.14);
    --white:   #262622;  --glass: rgba(255, 255, 255, 0.05);
    --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--panel-c);
    --surface: var(--white); --surface-2: #2c2c28; --surface-3: #33332e; --surface-1: var(--white); --input-bg: #1f1f1c;
    --text: var(--ink); --text-1: var(--ink); --text-2: var(--ink-2); --text-3: var(--muted); --text-4: var(--muted-2);
    --border: var(--line); --border-1: var(--line); --border-2: var(--line-2);
    --live-soft: rgba(58, 166, 118, 0.20); --wait-soft: rgba(214, 154, 42, 0.22); --violet-soft: rgba(116, 102, 232, 0.22); --accent-soft: rgba(222, 10, 38, 0.18);
    --accent-dim: var(--accent-soft); --success-dim: var(--live-soft); --warning-dim: var(--wait-soft); --info-dim: var(--violet-soft); --danger-dim: var(--accent-soft);
    --shadow-card:  0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-btn:   0 14px 30px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-sm:    0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow: var(--shadow-card); --shadow-md: var(--shadow-card); --shadow-lg: var(--shadow-float); --shadow-xl: var(--shadow-float);
    color-scheme: dark;
}

/* ---- 2. Base ------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-display);
    font-size: 15px; line-height: 1.5;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}
body h1, body h2, body h3, body h4 { font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
body p { text-wrap: pretty; }
body :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: none; }
body ::selection { background: rgba(222, 10, 38, 0.16); }
body .mono, body .num { font-variant-numeric: tabular-nums; }
body .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
body img { outline-offset: -1px; }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-thumb { background: rgba(42, 42, 39, 0.16); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
body ::-webkit-scrollbar-track { background: transparent; }

/* Old hard-coded heavy weights → the brand's 500/600 scale */
.app-shell [style*="font-weight:800"], .app-shell [style*="font-weight:900"], .app-shell [style*="font-weight: 800"], .app-shell [style*="font-weight: 900"] { font-weight: 600 !important; }

/* ---- 3. App shell: sidebar --------------------------------------------- */
.app-shell { background: var(--bg); }
.admin-shell .app-shell { background: var(--bg); }
.app-shell .sidebar, .admin-shell .sidebar {
    background: var(--bg);
    border: 0; border-right: 1px solid var(--line);
    box-shadow: none; border-radius: 0;
    padding: 14px 12px 12px;
    transition: transform var(--t-std) var(--ease), width var(--t-std) var(--ease);
}
.app-shell .sidebar-logo, .admin-shell .sidebar-logo { padding: 8px 10px 14px !important; border: 0; gap: 10px !important; flex-direction: row !important; align-items: center !important; }
.app-shell .sidebar-logo img, .admin-shell .sidebar-logo img { height: 36px !important; width: 36px !important; border-radius: 0 !important; transition: transform var(--t-quick) var(--ease); }
.app-shell .sidebar-logo:hover img { transform: scale(1.04); }
.app-shell .sidebar-logo .brand-word, .admin-shell .sidebar-logo .brand-word {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; text-transform: lowercase; color: var(--ink); line-height: 1.2; font-weight: 400;
}
.app-shell .sidebar-logo > span:not(.brand-word) { display: none; }   /* the old uppercase caption */
.app-shell .admin-sidebar-header {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 8px;
    padding: 5px 12px 5px 6px; border-radius: var(--r-pill);
    background: var(--white); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.app-shell .admin-sidebar-header span { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--ink) !important; font-weight: 400 !important; }
.app-shell .admin-sidebar-header-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }

.app-shell .sidebar-nav { padding: 4px 0; gap: 2px; scrollbar-color: rgba(42, 42, 39, 0.16) transparent; }
.app-shell .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(42, 42, 39, 0.16); }
.app-shell .sidebar-section-label, .admin-shell .sidebar-section-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 6px;
}
.app-shell .nav-item, .admin-shell .nav-item, .app-shell .nav-group > summary, .admin-shell .nav-group > summary {
    padding: 9px 12px; border-radius: var(--r-pill);
    color: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: -0.008em;
    transition: color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
    gap: 11px; margin: 0; overflow: visible;
}
.app-shell .nav-item:hover, .admin-shell .nav-item:hover, .app-shell .nav-group > summary:hover, .admin-shell .nav-group > summary:hover { background: rgba(42, 42, 39, 0.05); color: var(--ink); }
.app-shell .nav-item.active, .admin-shell .nav-item.active {
    background: var(--white); color: var(--ink); font-weight: 500;
    box-shadow: var(--shadow-card);
}
.app-shell .nav-item.active::before { display: none; }              /* polish.css red rail */
.app-shell .nav-item.active .nav-icon svg, .admin-shell .nav-item.active svg, .admin-shell .nav-item.active .nav-icon, .admin-shell .nav-item.active .nav-label { stroke: currentColor; color: var(--ink); }
.app-shell .nav-icon, .admin-shell .nav-icon { color: var(--muted); width: 20px; height: 20px; }
.app-shell .nav-item:hover .nav-icon, .app-shell .nav-item.active .nav-icon { color: var(--ink); }
.app-shell .nav-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.app-shell .nav-badge, .app-shell .admin-sidebar-badge, .admin-shell .admin-sidebar-badge {
    background: var(--ink) !important; color: var(--white) !important;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
    min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
}
.app-shell .nav-item.active .admin-sidebar-badge, .admin-shell .nav-item.active .admin-sidebar-badge { background: var(--accent) !important; color: #fff !important; }
.app-shell .nav-chevron, .admin-shell .nav-chevron { color: var(--muted-2); transition: transform var(--t-std) var(--ease); }
.app-shell .nav-group-body .nav-item, .admin-shell .nav-group-body .nav-item { padding: 8px 12px 8px 40px; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.app-shell .nav-group-body .nav-item.active { font-weight: 500; }
.app-shell .nav-group-body .nav-item .nav-icon { display: none; }
.app-shell .nav-group-body, .admin-shell .nav-group-body { margin: 2px 0 6px; gap: 1px; }
.app-shell .sidebar .divider { display: none; }

.app-shell .sidebar-bottom, .admin-shell .sidebar-bottom { border-top: 1px solid var(--line); padding: 12px 4px 4px; margin-top: 8px; }
.app-shell .sidebar-plan-badge {
    background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); border: 0;
    box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); border-radius: var(--r-md); padding: 10px 12px;
}
html[data-theme="dark"] .app-shell .sidebar-plan-badge { background: linear-gradient(#2b2b26 0%, #262622 100%); }
.app-shell .sidebar-plan-badge:hover { box-shadow: var(--shadow-card); background: var(--white); }
.app-shell .plan-icon { background: var(--ink); color: var(--white); border-radius: 9px; box-shadow: none; }
.app-shell .plan-name { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.app-shell .plan-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.app-shell .sidebar-artist { border-radius: var(--r-md); padding: 8px 8px; }
.app-shell .sidebar-artist:hover { background: rgba(42, 42, 39, 0.05); }
.app-shell .sidebar-avatar, .app-shell .topbar-avatar, .app-shell .admin-user-avatar { background: var(--ink); color: var(--white); border: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
.app-shell .sidebar-artist-name { font-weight: 500; font-size: 13.5px; }
.app-shell .sidebar-artist-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.app-shell .sidebar-logout-btn { width: 36px; height: 36px; border-radius: var(--r-pill); border: 0; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.app-shell .sidebar-logout-btn:hover { background: var(--white); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(222, 10, 38, 0.35); }
.app-shell .sidebar-overlay { background: rgba(42, 42, 39, 0.35); backdrop-filter: blur(4px); }

/* ---- 4. Topbar ----------------------------------------------------------- */
.app-shell .topbar, .admin-shell .topbar {
    min-height: var(--topbar-h); height: auto;
    background: rgba(250, 250, 247, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 0; box-shadow: 0 1px 0 var(--line);
    padding: 12px 28px; gap: 14px; margin: 0; border-radius: 0;
}
html[data-theme="dark"] .app-shell .topbar { background: rgba(27, 27, 25, 0.86); }
.admin-shell .topbar { margin: 0 -14px; }
.app-shell .topbar.is-scrolled, [data-theme="light"] .app-shell .topbar.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(42, 42, 39, 0.06); }
.app-shell .topbar-title, .admin-shell .topbar-title { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.app-shell .topbar-hamburger, .admin-shell .topbar-hamburger, .app-shell .topbar-icon-btn, .admin-shell .topbar-icon-btn {
    width: 40px; height: 40px; border-radius: var(--r-pill); border: 0;
    background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink);
    transition: background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.app-shell .topbar-icon-btn:hover, .admin-shell .topbar-icon-btn:hover, .app-shell .topbar-hamburger:hover, .admin-shell .topbar-hamburger:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); color: var(--ink); border-color: transparent; }
.app-shell .topbar-icon-btn:active { transform: scale(0.96); }
.app-shell .topbar-icon-btn svg { width: 17px; height: 17px; stroke-width: 1.75; }
.app-shell .topbar-badge { background: var(--accent); border-color: var(--bg); }
.app-shell .topbar-avatar-btn, .admin-shell .topbar-avatar-btn {
    height: 40px; padding: 4px 12px 4px 4px; gap: 9px; border: 0; border-radius: var(--r-pill);
    background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2);
}
.app-shell .topbar-avatar-btn:hover, .admin-shell .topbar-avatar-btn:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
.app-shell .topbar-avatar { width: 30px; height: 30px; }
.app-shell .topbar-name { font-weight: 500; font-size: 13.5px; }
.admin-shell .topbar-name small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.app-shell .topbar-search input, .admin-shell .topbar-search input {
    height: 40px; border: 0; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: var(--r-pill); font-size: 14px; color: var(--ink);
    transition: box-shadow var(--t-quick) var(--ease);
}
.app-shell .topbar-search input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); }
.app-shell .topbar-search svg { color: var(--muted); }

/* Dropdowns: white sheet, 18px radius, floating shadow (marketing .menu) */
.app-shell .topbar-dropdown, .admin-shell .topbar-dropdown, body .t-dropdown, body .notif-dropdown, body .menu-dropdown, body .dropdown-menu {
    background: rgba(255, 255, 255, 0.97); border: 0; border-radius: 18px; padding: 10px; box-shadow: var(--shadow-float); min-width: 220px;
}
html[data-theme="dark"] .app-shell .topbar-dropdown, html[data-theme="dark"] body .t-dropdown { background: var(--surface); }
.app-shell .topbar-dropdown-item, .admin-shell .topbar-dropdown-item, body .notif-dropdown-item, body .menu-item {
    border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.008em;
}
.app-shell .topbar-dropdown-item:hover, .admin-shell .topbar-dropdown-item:hover, body .notif-dropdown-item:hover, body .menu-item:hover { background: var(--paper-2); color: var(--ink); }
.app-shell .topbar-dropdown-item.active { background: var(--paper-2); }
.app-shell .topbar-dropdown-item.danger, .admin-shell .topbar-dropdown-item.danger { color: var(--accent); }
.app-shell .topbar-dropdown-item.danger:hover { background: var(--accent-soft); }
.app-shell .topbar-dropdown-divider { background: var(--line); }
body .notif-dropdown-header, body .notif-dropdown-footer { border-color: var(--line); }
body .notif-dropdown-title { font-weight: 500; }
body .notif-dropdown-item-title { font-weight: 500; }
body .notif-dropdown-item-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
body .notif-dropdown-markread, body .notif-dropdown-footer { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
body .notif-dropdown-footer:hover, body .notif-dropdown-markread:hover { color: var(--ink); }

/* Theme toggle icon pairing (artist header uses .icon-sun/.icon-moon, admin uses .theme-ico-*) */
.app-shell .theme-toggle-btn .icon-sun { display: none; }
.app-shell .theme-toggle-btn .icon-moon { display: block; }
html[data-theme="dark"] .app-shell .theme-toggle-btn .icon-sun { display: block; }
html[data-theme="dark"] .app-shell .theme-toggle-btn .icon-moon { display: none; }

/* ---- 5. Page content + headings ---------------------------------------- */
.app-shell .main-wrap { background: var(--bg); }
.app-shell .page-content { padding: 28px 32px 56px; max-width: 1400px; }
.admin-shell .page-content { padding: 22px 8px 48px; }
.app-shell .page-header { margin-bottom: 22px; }
.app-shell .page-title, .admin-shell .page-title, .app-shell h1.page-title { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.app-shell .page-subtitle, .admin-shell .page-subtitle, .admin-shell .page-header p { font-size: 15px; color: var(--ink-2); margin-top: 6px; letter-spacing: -0.005em; }
.app-shell .section-title, .app-shell .card-title, .admin-shell .card-title { font-size: 15.5px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.app-shell .card-subtitle { font-size: 13px; color: var(--muted); margin-top: 3px; }
.app-shell .breadcrumb, .app-shell .crumbs, .app-shell .breadcrumb a { font-size: 13px; color: var(--muted); }
.app-shell .breadcrumb a:hover { color: var(--ink); }

/* ---- 6. Buttons: pill, dark primary, ghost ring ------------------------- */
body .btn, .app-shell .btn, .admin-shell .btn {
    height: 40px; padding: 0 18px; gap: 8px;
    border-radius: var(--r-pill); border: 0;
    font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.008em; line-height: 1;
    box-shadow: none; text-transform: none;
    transition-property: transform, box-shadow, background-color, color;
    transition-duration: var(--t-quick); transition-timing-function: var(--ease);
    transform: translateZ(0);
}
body .btn:active, .app-shell .btn:active { transform: scale(0.96); }
body .btn svg, .app-shell .btn svg { width: 16px; height: 16px; flex: none; }
body .btn-primary, .app-shell .btn-primary, .admin-shell .btn-primary, .admin-shell .btn.btn-primary, body .btn.btn-primary, body .rs-btn-primary, body .auth-submit-btn {
    background: var(--ink); color: #ffffff; box-shadow: var(--shadow-btn); border: 0;
}
body .btn-primary:hover, .app-shell .btn-primary:hover, .admin-shell .btn-primary:hover, .admin-shell .btn.btn-primary:hover, body .btn.btn-primary:hover, body .auth-submit-btn:hover {
    background: #000000; color: #fff; box-shadow: 0 18px 34px rgba(42, 42, 39, 0.20), 0 2px 6px rgba(42, 42, 39, 0.10); transform: translateY(-1px);
}
html[data-theme="dark"] body .btn-primary, html[data-theme="dark"] .app-shell .btn-primary { background: #f3f2ec; color: #1b1b19; }
html[data-theme="dark"] body .btn-primary:hover, html[data-theme="dark"] .app-shell .btn-primary:hover { background: #ffffff; color: #1b1b19; }
body .btn-primary:active, .app-shell .btn-primary:active { transform: scale(0.96); }
body .btn-secondary, .app-shell .btn-secondary, .admin-shell .btn-secondary, body .btn-ghost, .app-shell .btn-ghost, .admin-shell .btn-ghost, body .btn-outline, .app-shell .btn.btn-outline, body .btn-light {
    background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); border: 0;
}
body .btn-secondary:hover, .app-shell .btn-secondary:hover, .admin-shell .btn-secondary:hover, body .btn-ghost:hover, .app-shell .btn-ghost:hover, .admin-shell .btn-ghost:hover, body .btn-outline:hover {
    background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); border-color: transparent;
}
body .btn-danger, .app-shell .btn-danger, body .btn-error, .app-shell .btn.btn-danger { background: var(--accent-soft); color: var(--accent); border: 0; box-shadow: none; }
body .btn-danger:hover, .app-shell .btn-danger:hover { background: var(--accent); color: #fff; }
body .btn-success, .app-shell .btn-success { background: var(--live); color: #fff; }
body .btn-warning, .app-shell .btn-warning { background: var(--wait-soft); color: #9a6a12; }
body .btn-info, .app-shell .btn-info, body .btn-accent, .app-shell .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
body .btn-accent:hover, .app-shell .btn-accent:hover, body .btn-info:hover { background: var(--accent-hover); transform: translateY(-1px); }
body .btn-link, .app-shell .btn-link { background: transparent; box-shadow: none; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); border-radius: 0; height: auto; padding: 0 0 1px; }
body .btn-link:hover { border-color: var(--ink); }
body .btn-sm, .app-shell .btn-sm, .admin-shell .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
body .btn-xs, .app-shell .btn-xs { height: 28px; padding: 0 11px; font-size: 12px; }
body .btn-lg, .app-shell .btn-lg { height: 48px; padding: 0 24px; font-size: 15.5px; }
body .btn-xl, .app-shell .btn-xl { height: 54px; padding: 0 28px; font-size: 16px; }
body .btn-full, body .btn-block, .app-shell .btn-full { width: 100%; }
body .btn-square, body .btn-circle, .app-shell .btn-square, .app-shell .btn-circle { padding: 0; width: 40px; }
body .btn-circle { border-radius: 50%; }
body .btn:disabled, body .btn[disabled], body .btn.is-loading, .app-shell .btn:disabled { opacity: 0.5; transform: none; box-shadow: none; cursor: not-allowed; }
body .btn-icon, .app-shell .btn-icon { width: 40px; padding: 0; border-radius: var(--r-pill); }
/* Chevron nudge, like the marketing CTAs */
.app-shell .btn:hover svg.chev, .app-shell .btn:hover .chev { transform: translateX(2px); }

/* ---- 7. Forms ----------------------------------------------------------- */
body .form-group, .app-shell .form-group { margin-bottom: 18px; }
body .form-label, .app-shell .form-label, .admin-shell .form-label, body .vc-label, body .lbl {
    font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 6px;
}
body .form-label span { color: var(--accent); }
body .form-input, body .form-select, body .form-textarea, body .vc-input, body .vc-select, body .admin-search-input, body .admin-filter-select, body .tag-input-wrap, body .calc-row input,
.app-shell .form-input, .app-shell .form-select, .app-shell .form-textarea, .admin-shell .form-input, .admin-shell .form-select, .admin-shell .admin-search-input, .admin-shell .admin-filter-select,
body input.input, body select.select, body textarea.textarea {
    font-family: var(--font-display); font-size: 14.5px; color: var(--ink);
    height: 44px; padding: 0 14px; border-radius: 12px; border: 0;
    background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2);
    transition: box-shadow var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease);
    color-scheme: light;
}
html[data-theme="dark"] body .form-input, html[data-theme="dark"] body .form-select, html[data-theme="dark"] body .form-textarea, html[data-theme="dark"] .app-shell .form-input, html[data-theme="dark"] .app-shell .form-select, html[data-theme="dark"] .app-shell .form-textarea { color-scheme: dark; background: var(--input-bg); }
body .form-textarea, .app-shell .form-textarea, body textarea.form-input, body textarea.textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
body .form-input:hover, body .form-select:hover, body .form-textarea:hover, .app-shell .form-input:hover { box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
body .form-input:focus, body .form-select:focus, body .form-textarea:focus, body .admin-search-input:focus, body .admin-filter-select:focus, body .vc-input:focus,
.app-shell .form-input:focus, .app-shell .form-select:focus, .app-shell .form-textarea:focus, .admin-shell .form-input:focus, .admin-shell .form-select:focus, .admin-shell .admin-search-input:focus, .admin-shell .admin-filter-select:focus {
    outline: none; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white);
}
body .form-input::placeholder, body .form-textarea::placeholder, .app-shell .form-input::placeholder { color: var(--muted-2); }
body .form-select, .app-shell .form-select, body .admin-filter-select, .admin-shell .admin-filter-select {
    appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238a8880' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
body .form-input.input-sm, body .form-select.input-sm, body .form-input.form-input-sm, body .admin-search-input, body .admin-filter-select { height: 40px; font-size: 14px; }
body .form-hint, body .input-hint, .app-shell .form-hint, .app-shell .input-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
body .field-error, .app-shell .field-error { font-size: 13px; color: var(--accent); margin-top: 6px; }
body .form-input.is-error, body .form-input.input-error, body .form-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
body .form-input.is-valid, body .form-input.input-success { box-shadow: inset 0 0 0 1.5px var(--live); }
body input[type="checkbox"], body input[type="radio"], .app-shell input[type="checkbox"], .app-shell input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; }
body .toggle-track, .app-shell .toggle-track { background: rgba(42, 42, 39, 0.14); }
body .toggle-track.on, .app-shell .toggle-track.on { background: var(--ink); }
body .toggle-thumb { box-shadow: 0 1px 3px rgba(42, 42, 39, 0.25); }
body .form-grid-2, .app-shell .form-grid-2 { gap: 14px 16px; }
body .tag-input-wrap { height: auto; min-height: 44px; padding: 6px 10px; }
body .tag-input-field { font: inherit; }
/* Upload / drop zones */
.app-shell .upload-zone, .app-shell .dropzone, .app-shell .drop-zone, .app-shell .upload-area {
    border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--white); color: var(--muted);
    transition: border-color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease);
}
.app-shell .upload-zone:hover, .app-shell .dropzone:hover, .app-shell .upload-zone.dragover { border-color: var(--ink); background: var(--paper-2); }

/* ---- 8. Cards, stats, KPIs ---------------------------------------------- */
body .card, .app-shell .card, .admin-shell .card, .app-shell .card-glass, .admin-shell .card-glass, body .modal-box, body .dcard, body .nmf-card, body .toolbox-panel, body .ai-card {
    background: var(--white); border: 0; border-radius: var(--r-lg);
    box-shadow: var(--shadow-card); padding: 22px 24px; backdrop-filter: none;
    transition: box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.app-shell .card-header { margin-bottom: 16px; gap: 12px; }
.app-shell .card-border, .app-shell .card-dash { box-shadow: inset 0 0 0 1px var(--line-2); }
.app-shell .card-soft, .app-shell .card.soft { background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); }
.app-shell .card.dark, .app-shell .card-dark, .app-shell .tile-dark { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); }
.app-shell .card.dark .card-title, .app-shell .card.dark .card-subtitle { color: rgba(255, 255, 255, 0.72); }

.app-shell .stat-card, .admin-shell .admin-kpi-card, .app-shell .admin-kpi-card, body .rs-stat, body .detail-stat, body .pdm-kpi, body .fraud-stat, body .stat-strip > * {
    background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 22px 24px;
    transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
.app-shell .stat-card:hover, .app-shell .admin-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(42, 42, 39, 0.06), 0 12px 30px rgba(42, 42, 39, 0.10); border-color: transparent; }
.app-shell .stat-value, .admin-shell .admin-kpi-value, .app-shell .admin-kpi-value, body .rs-stat-value, body .detail-stat-value, body .pdm-kpi-val {
    font-size: 34px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.app-shell .stat-label, .admin-shell .admin-kpi-label, .app-shell .admin-kpi-label, body .rs-stat-label, body .detail-stat-label, body .pdm-kpi-lbl {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 8px;
}
.app-shell .stat-icon, .admin-shell .admin-kpi-icon, .app-shell .admin-kpi-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2) !important; color: var(--ink) !important; margin-bottom: 14px; }
.app-shell .stat-icon svg, .app-shell .admin-kpi-icon svg { width: 18px; height: 18px; }
.app-shell .stat-trend { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; font-weight: 500; }
.app-shell .trend-up, .app-shell .admin-kpi-badge.up, .app-shell .admin-kpi-delta--up { color: #23764f; background: var(--live-soft); }
.app-shell .trend-down, .app-shell .admin-kpi-badge.down { color: var(--accent); background: var(--accent-soft); }
.app-shell .admin-kpi-badge { border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 3px 8px; }
.app-shell .admin-kpi-sub, .admin-shell .admin-kpi-sub, .app-shell .stat-sub { font-size: 13px; color: var(--muted); }
.app-shell .admin-kpi-sub b { color: var(--ink); font-weight: 500; }
.admin-shell .admin-kpi-datehdr, .app-shell .admin-kpi-datehdr { border: 0; box-shadow: 0 0 0 1px var(--line-2); background: var(--white); border-radius: var(--r-pill); font-weight: 500; font-size: 13.5px; }

/* Hero banners (welcome, pricing, subscription, marketing hub): the marketing "stage" */
.app-shell .welcome-banner, .app-shell .pricing-header, .app-shell .sub-hero, .app-shell .plan-hero, .app-shell .hero-card, .app-shell .mh-hero, .app-shell .tb-hero {
    background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); border: 0; border-radius: var(--r-2xl);
    box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); color: var(--ink);
}
html[data-theme="dark"] .app-shell .welcome-banner, html[data-theme="dark"] .app-shell .pricing-header, html[data-theme="dark"] .app-shell .sub-hero, html[data-theme="dark"] .app-shell .plan-hero, html[data-theme="dark"] .app-shell .hero-card, html[data-theme="dark"] .app-shell .mh-hero, html[data-theme="dark"] .app-shell .tb-hero, html[data-theme="dark"] .app-shell .card-soft, html[data-theme="dark"] .app-shell .card.soft { background: linear-gradient(#2b2b26 0%, #24241f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.app-shell .welcome-banner::before, .app-shell .pricing-header::before {
    inset: 0; top: 0; right: 0; width: auto; height: auto; border-radius: 0;
    background: radial-gradient(60% 60% at 18% 0%, rgba(116, 102, 232, 0.10), transparent 70%), radial-gradient(50% 50% at 88% 100%, rgba(222, 10, 38, 0.08), transparent 70%);
}
.app-shell .welcome-banner::after, .app-shell .pricing-header::after { display: none; }
.app-shell .welcome-banner *, .app-shell .pricing-header * { position: relative; }
.app-shell .welcome-banner h1, .app-shell .welcome-banner h2, .app-shell .welcome-banner .welcome-title { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.app-shell .welcome-banner p, .app-shell .welcome-banner .welcome-sub { color: var(--ink-2); }
.app-shell .pricing-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.app-shell .pricing-title { font-size: 40px; font-weight: 500; letter-spacing: -0.035em; }
.app-shell .pricing-subtitle { color: var(--ink-2); }
.app-shell .pricing-header-blob { display: none; }

/* Release cards + bento tiles */
.app-shell .release-card, .app-shell .tb-bento-card, .app-shell .collab-card, .app-shell .artist-card, .app-shell .kyc-card {
    background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card);
    transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
.app-shell .release-card:hover, .app-shell .tb-bento-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(42, 42, 39, 0.06), 0 12px 30px rgba(42, 42, 39, 0.10); border-color: transparent; }
.app-shell .release-card img, .app-shell .release-cover { outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
.app-shell .release-card-body { padding: 16px; }
.app-shell .tb-bento-icon { background: var(--paper-2); color: var(--ink); border-radius: 12px; }
.app-shell .tb-bento-name { font-weight: 500; letter-spacing: -0.012em; }
.app-shell .tb-bento-desc, .app-shell .tb-bento-meta { color: var(--ink-2); }
.app-shell .tb-bento-arrow { color: var(--muted); }

/* ---- 9. Badges, chips, filter pills, tabs -------------------------------- */
body .badge, .app-shell .badge, .admin-shell .badge, .admin-shell .pill, body .chip, body .pdm-pill, body .sa-pill {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0 9px; height: 24px; border-radius: var(--r-pill); gap: 6px; border: 0;
    background: rgba(42, 42, 39, 0.06); color: var(--ink-2);
}
body .badge-dot { width: 6px; height: 6px; background: currentColor; }
body .badge-live, .app-shell .badge-live, .admin-shell .badge-live, body .badge-approved, .admin-shell .badge-approved, body .badge-success, body .badge-completed, .admin-shell .badge-completed, body .badge-active, body .badge-paid, body .badge-teal { background: var(--live-soft); color: #23764f; }
body .badge-live .badge-dot, .app-shell .badge-live .badge-dot { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(58, 166, 118, 0.45); } 60% { box-shadow: 0 0 0 5px rgba(58, 166, 118, 0); } }
body .badge-review, .app-shell .badge-review, .admin-shell .badge-review, body .badge-pending, .admin-shell .badge-pending, body .badge-warning, body .badge-processing, body .badge-delivered { background: var(--wait-soft); color: #9a6a12; }
body .badge-draft, .app-shell .badge-draft, .admin-shell .badge-draft, body .badge-neutral, body .badge-ghost, body .badge-queued { background: rgba(42, 42, 39, 0.06); color: var(--muted); }
body .badge-changes, .app-shell .badge-changes, .admin-shell .badge-changes, body .badge-rejected, .admin-shell .badge-rejected, body .badge-red, .admin-shell .badge-red, body .badge-danger, body .badge-error, body .badge-takedown { background: var(--accent-soft); color: var(--accent); }
body .badge-info, body .badge-primary, body .badge-accent, body .badge-secondary, body .badge-violet { background: var(--violet-soft); color: #4c3fc7; }
body .badge-outline, body .badge-dash { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
body .badge-sm, body .badge-xs { height: 20px; font-size: 10px; padding: 0 7px; }
body .badge-lg { height: 28px; font-size: 12px; padding: 0 12px; }
body .tag, .app-shell .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); padding: 4px 9px; border-radius: var(--r-pill); background: var(--paper-2); }

.app-shell .filter-pill, .admin-shell .filter-pill, .app-shell .ryl-tab-pill, .app-shell .seg-btn, .app-shell .segmented button, body .tabs-boxed .tab, body .chip-select {
    height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 0;
    background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2);
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em;
    transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.app-shell .filter-pill:hover, .admin-shell .filter-pill:hover, .app-shell .seg-btn:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
.app-shell .filter-pill:active { transform: scale(0.96); }
.app-shell .filter-pill.active, .admin-shell .filter-pill.active, .app-shell .seg-btn.active, .app-shell .segmented .active, body .tabs-boxed .tab-active, body .chip-select.is-active { background: var(--ink); color: #fff; box-shadow: var(--shadow-btn); font-weight: 500; }
html[data-theme="dark"] .app-shell .filter-pill.active { background: #f3f2ec; color: #1b1b19; }

/* Underline tabs (royalties, settings, subscription) */
.app-shell .ryl-tabs, .app-shell .tabs, .app-shell .tab-nav, .app-shell .pdm-tabs, .app-shell .legal-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.app-shell .ryl-tab, .app-shell .tabs .tab, .app-shell .tab-nav .tab, .app-shell .pdm-tab, body .legal-tab {
    font-size: 14px; font-weight: 500; letter-spacing: -0.008em; color: var(--muted); padding: 12px 14px; border: 0; background: transparent; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.app-shell .ryl-tab:hover, .app-shell .tabs .tab:hover, body .legal-tab:hover { color: var(--ink); }
.app-shell .ryl-tab.active, .app-shell .tabs .tab.active, .app-shell .tabs .tab-active, .app-shell .tab-nav .tab.active, .app-shell .pdm-tab.active, body .legal-tab.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }
.app-shell .ryl-tab.active svg, .app-shell .tabs .tab.active svg { stroke: var(--ink); color: var(--ink); }

/* ---- 10. Tables ---------------------------------------------------------- */
.app-shell .table-wrap, .app-shell .data-table-wrap, .admin-shell .data-table-wrap { border-radius: var(--r-lg); }
.app-shell .card > .table-wrap, .app-shell .card > .data-table-wrap { margin: 0 -24px -22px; padding: 0; }
.app-shell .data-table, .admin-shell .data-table, body .data-table { font-size: 14px; }
.app-shell .data-table th, .admin-shell .data-table th, body .data-table th {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
    padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.app-shell .data-table td, .admin-shell .data-table td, body .data-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.app-shell .data-table td:first-child, .admin-shell .data-table td:first-child { color: var(--ink); }
.app-shell .data-table td strong, .app-shell .data-table td b, .admin-shell .data-table td strong { color: var(--ink); font-weight: 500; }
.app-shell .data-table tbody tr { transition: background-color var(--t-quick) var(--ease); }
.app-shell .data-table tbody tr:hover, .admin-shell .data-table tbody tr:hover { background: rgba(42, 42, 39, 0.03); }
.app-shell .data-table tbody tr:hover td { background: transparent; color: var(--ink-2); }
.app-shell .data-table tbody tr:last-child td, .admin-shell .data-table tbody tr:last-child td { border-bottom: 0; }
.app-shell .data-table .num, .app-shell .data-table .text-right { font-variant-numeric: tabular-nums; }
.app-shell .admin-user-row .admin-user-name, .app-shell .admin-user-row b { font-weight: 500; }
.app-shell .admin-user-row small, .app-shell .data-table small { color: var(--muted); }
.app-shell .pagination a, .app-shell .pagination button, .app-shell .page-link { height: 36px; min-width: 36px; border-radius: var(--r-pill); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--glass); color: var(--ink-2); }
.app-shell .pagination .active, .app-shell .page-link.active { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ---- 11. Alerts, toasts, modals ----------------------------------------- */
body .alert, .app-shell .alert, body .t-alert { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; }
body .alert-info { background: var(--violet-soft); color: #4c3fc7; box-shadow: none; }
body .alert-success { background: var(--live-soft); color: #23764f; box-shadow: none; }
body .alert-warning { background: var(--wait-soft); color: #9a6a12; box-shadow: none; }
body .alert-error, body .alert-danger { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
body .alert-title { font-weight: 500; }
body .callout, .app-shell .callout, .app-shell .guidance-note, .app-shell .info-box { background: var(--paper-2); border: 0; border-radius: 14px; color: var(--ink-2); }
body .toast, body .toast-item { background: var(--ink); color: var(--paper); border: 0; border-radius: 14px; box-shadow: var(--shadow-float); font-size: 14px; }
body .toast-success { background: var(--ink); }
body .modal-backdrop, body .modal-overlay, body .legal-overlay { background: rgba(42, 42, 39, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body .modal, body .modal-box, body .legal-modal, .app-shell .modal {
    background: var(--white); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-float); padding: 28px;
}
body .modal-header { margin-bottom: 18px; }
body .modal-title, body .legal-modal-hd h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
body .modal-close, body .legal-close, body .alert-close { width: 36px; height: 36px; border-radius: var(--r-pill); border: 0; background: var(--paper-2); color: var(--ink-2); }
body .modal-close:hover, body .legal-close:hover { background: var(--panel-c); color: var(--ink); }
/* legal modal close: the pages' own 14px 18px padding left no room for the icon inside the 36px circle */
body .legal-close { padding: 0; flex: none; align-self: center; margin: 0 10px 0 4px; display: inline-flex; align-items: center; justify-content: center; }
body .modal-footer, body .modal-action, body .legal-modal-ft { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; gap: 10px; }
body .legal-accept-btn { height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); border: 0; font-weight: 500; }
body .legal-body { color: var(--ink-2); line-height: 1.65; }
body .legal-body h1, body .legal-body h2, body .legal-body h3 { color: var(--ink); }
body [data-tooltip]::after, body .tooltip { background: var(--ink); color: var(--paper); border-radius: 8px; font-size: 12.5px; }
body .skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, var(--panel-c) 50%, var(--paper-2) 75%); border-radius: 10px; }
body .empty-state, body .aid-empty, body .pdm-empty { color: var(--muted); }
body .empty-state h3, body .empty-title { color: var(--ink); font-weight: 500; }
body .spinner { border-color: var(--line-2); border-top-color: var(--ink); }
body .progress, body .meter, .app-shell .progress-track, .app-shell .progress-bar { background: rgba(42, 42, 39, 0.08); border-radius: 4px; height: 6px; }
body .progress > span, body .meter > span, .app-shell .progress-fill, .app-shell .progress-bar > i, .admin-shell .meter > span { background: var(--ink); border-radius: 4px; }
body .divider, .app-shell .divider, .app-shell hr { background: var(--line); border: 0; height: 1px; }

/* Timelines, steps, notification list rows */
.app-shell .step-item, .app-shell .timeline-item, .app-shell .sched-tl-item { color: var(--ink-2); }
.app-shell .step-item.active .step-count, .app-shell .step-count.active { background: var(--ink); color: var(--paper); }
.app-shell .step-count { font-family: var(--font-mono); font-size: 12px; background: var(--paper-2); color: var(--ink-2); border-radius: 50%; }
.app-shell .sched-tl-dot { background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.app-shell .notif-item, .app-shell .activity-item, .app-shell .admin-activity-item { border-bottom: 1px solid var(--line); }
.app-shell .notif-item:hover { background: var(--paper-2); }
.app-shell .notif-item.unread { background: rgba(222, 10, 38, 0.04); }

/* Charts read the tokens at render time; tone down the canvas chrome */
.app-shell .chart-legend, .app-shell .chart-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* Utilities that were hard-coded to the dark palette */
.app-shell .text-muted, .app-shell .muted, .app-shell .sa-muted { color: var(--muted) !important; }
.app-shell .text-accent { color: var(--accent); }
.app-shell .text-success { color: #23764f; }
.app-shell .text-warning { color: #9a6a12; }
.app-shell [style*="color:#fff"], .app-shell [style*="color: #fff"] { }

/* ---- 12. Auth pages (login, signup, reset, verify, invites, onboarding) --- */
body .auth-shell { background: var(--bg); }
body .auth-brand-panel {
    flex-basis: 500px; background: var(--ink); border: 0; color: #fff; padding: 44px 44px;
}
body .auth-brand-blob { display: none; }
body .auth-brand-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 60% at 18% 0%, rgba(116, 102, 232, 0.22), transparent 70%), radial-gradient(50% 50% at 88% 100%, rgba(222, 10, 38, 0.22), transparent 70%); }
body .auth-brand-logo { gap: 10px; margin-bottom: 48px; }
body .auth-brand-logo-mark { width: 36px; height: 36px; background: transparent; border-radius: 0; box-shadow: none; overflow: hidden; }
body .auth-brand-logo-mark svg, body .auth-brand-logo-mark img { width: 36px; height: 36px; }
body .auth-brand-logo-text { font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; color: #fff; }
body .auth-brand-logo-text span { color: #fff; }
body .auth-brand-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
body .auth-brand-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body .auth-brand-headline { font-size: 40px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; color: #fff; margin-bottom: 18px; }
body .auth-brand-headline span { background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, 0.55); }
body .auth-brand-tagline { font-size: 15.5px; color: rgba(255, 255, 255, 0.62); line-height: 1.55; max-width: 380px; }
body .auth-brand-feat-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.10) !important; color: #8be0b6 !important; }
body .auth-brand-feat-icon svg { stroke: currentColor; }
body .auth-brand-feat-text { color: rgba(255, 255, 255, 0.72); font-weight: 400; font-size: 14.5px; }
body .auth-brand-feat-text strong { color: #fff; font-weight: 500; }
body .auth-brand-testimonial { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; backdrop-filter: none; }
body .auth-brand-quote { font-style: normal; color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
body .auth-brand-quote::before { color: var(--accent); font-size: 26px; line-height: 0; vertical-align: -9px; margin-right: 4px; }
body .auth-brand-quote::after { content: none; }
body .auth-brand-attr-avatar { background: #fff; color: var(--ink); font-family: var(--font-mono); }
body .auth-brand-attr-name { font-weight: 500; }
body .auth-brand-attr-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
body .auth-brand-dsp-badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); font-weight: 400; }
body .auth-form-panel { background: var(--bg); padding: 48px 32px; }
body .auth-form-wrap { max-width: 440px; }
body .auth-mobile-logo-mark { background: transparent; box-shadow: none; }
body .auth-mobile-logo-text { font-family: var(--font-mono); font-weight: 400; text-transform: lowercase; letter-spacing: -0.01em; }
body .auth-mobile-logo-text span { color: var(--ink); }
body .auth-heading, body h2.auth-heading { font-size: 34px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin-bottom: 10px; }
body .auth-subheading { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 28px; }
body .auth-subheading a, body .auth-switch a, body .auth-forgot, body .auth-footer a { color: var(--ink); border-bottom: 1px solid var(--line-2); font-weight: 500; transition: border-color var(--t-quick) var(--ease); }
body .auth-subheading a:hover, body .auth-switch a:hover, body .auth-forgot:hover { border-color: var(--ink); }
body .auth-error-box, body .auth-success-box { border: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
body .auth-error-box { background: var(--accent-soft); color: var(--accent); }
body .auth-success-box { background: var(--live-soft); color: #23764f; }
body .auth-input-wrap .form-input { padding-left: 42px; }
body .auth-input-icon { color: var(--muted); left: 14px; }
body .auth-input-icon svg { width: 16px; height: 16px; }
body .auth-password-toggle { color: var(--muted); right: 12px; border-radius: var(--r-pill); }
body .auth-password-toggle:hover { color: var(--ink); background: var(--paper-2); }
body .auth-row { margin: 4px 0 20px; font-size: 14px; }
body .auth-remember { color: var(--ink-2); gap: 8px; }
body .auth-submit-btn { height: 48px; width: 100%; border-radius: var(--r-pill); font-size: 15.5px; font-weight: 500; letter-spacing: -0.008em; border: 0; gap: 8px; transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease); }
body .auth-submit-btn:active { transform: scale(0.96); }
body .auth-social-btn { height: 44px; border-radius: var(--r-pill); border: 0; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-weight: 500; }
body .auth-social-btn:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
body .auth-divider { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
body .auth-divider::before, body .auth-divider::after { background: var(--line); }
body .auth-switch { font-size: 14px; color: var(--ink-2); margin-top: 22px; }
body .auth-footer { font-size: 12.5px; color: var(--muted); margin-top: 28px; }
body .auth-footer a { border: 0; color: var(--muted); font-weight: 400; }
body .auth-footer a:hover { color: var(--ink); }
body .otp-input, body .auth-otp-box, body .otp-box { border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 12px; background: var(--white); font-family: var(--font-mono); color: var(--ink); }
body .otp-input:focus, body .otp-box:focus { box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; }
body .auth-strength-bar, body .pw-strength { background: rgba(42, 42, 39, 0.08); border-radius: 4px; }
body .fade-in { animation: rise 0.7s var(--ease-out) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 18px)); } to { opacity: 1; transform: none; } }

/* ---- 13. Motion: staggered page entrance, quiet and interruptible -------- */
@media (prefers-reduced-motion: no-preference) {
    /* backwards fill only: once the entrance ends, an element's own opacity wins again (hidden modals stay hidden) */
    .app-shell .page-content > :not([hidden]):not(.modal-bg):not(.modal-overlay):not(.modal-backdrop):not(.legal-overlay):not(.cel-overlay):not(.toast-container):not(script):not(style):not(template) { animation: rise 0.6s var(--ease-out) backwards; }
    .app-shell .page-content > :nth-child(1) { animation-delay: 0.03s; }
    .app-shell .page-content > :nth-child(2) { animation-delay: 0.09s; }
    .app-shell .page-content > :nth-child(3) { animation-delay: 0.15s; }
    .app-shell .page-content > :nth-child(4) { animation-delay: 0.21s; }
    .app-shell .page-content > :nth-child(5) { animation-delay: 0.27s; }
    .app-shell .page-content > :nth-child(n+6) { animation-delay: 0.33s; }
    .app-shell .sidebar-nav .nav-item, .app-shell .sidebar-nav .nav-group { animation: rise 0.5s var(--ease-out) both; --rise: 8px; animation-delay: calc(0.04s + var(--i, 0) * 0.03s); }
    .app-shell .sidebar-nav > :nth-child(2) { --i: 1; } .app-shell .sidebar-nav > :nth-child(3) { --i: 2; } .app-shell .sidebar-nav > :nth-child(4) { --i: 3; }
    .app-shell .sidebar-nav > :nth-child(5) { --i: 4; } .app-shell .sidebar-nav > :nth-child(6) { --i: 5; } .app-shell .sidebar-nav > :nth-child(7) { --i: 6; }
    .app-shell .sidebar-nav > :nth-child(8) { --i: 7; } .app-shell .sidebar-nav > :nth-child(9) { --i: 8; } .app-shell .sidebar-nav > :nth-child(n+10) { --i: 9; }
}
@media (prefers-reduced-motion: reduce) {
    body *, body *::before, body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- 14. Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
    .app-shell .page-content { padding: 20px 16px 48px; }
    .app-shell .topbar { padding: 10px 16px; }
    .app-shell .page-title { font-size: 24px; }
    .app-shell .sidebar { box-shadow: var(--shadow-float); border-right: 0; }
    body .auth-brand-panel { display: none; }
}

/* ---- 15. Page-specific leftovers --------------------------------------- */
/* Admin search boxes: room for the leading icon */
.app-shell .admin-search-wrap .admin-search-input, .admin-shell .admin-search-input { padding-left: 40px; }
.app-shell .admin-search-icon { left: 14px; color: var(--muted); }
/* "It's on its way" celebration (artist/dashboard.php inline styles) */
body .cel-overlay { background: rgba(42, 42, 39, 0.45); }
body .cel-card { background: var(--white); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-float); color: var(--ink); }
body .cel-canvas { border-radius: var(--r-xl); }
body .cel-title { color: var(--ink); font-weight: 500; letter-spacing: -0.03em; font-size: 28px; }
body .cel-sub { color: var(--ink-2); }
body .cel-sub strong { color: var(--ink); font-weight: 500; }
body .cel-x { color: var(--muted); }
body .cel-x:hover { color: var(--ink); }
body .cel-cover { border-radius: 16px; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; box-shadow: var(--shadow-card); }
body .cel-badge { box-shadow: var(--shadow-card); }
body .cel-btn { border-radius: var(--r-pill); font-weight: 500; font-size: 15px; padding: 0 18px; height: 46px; transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease); }
body .cel-btn:active { transform: scale(0.96); }
body .cel-btn-x { background: var(--ink); color: #fff; border: 0; box-shadow: var(--shadow-btn); }
body .cel-btn-x:hover { background: #000; filter: none; }
body .cel-btn-ghost { background: var(--glass); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
body .cel-btn-ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
body .cel-later { color: var(--muted); }
body .cel-later:hover { color: var(--ink); }
body .cel-toast { background: var(--ink); border-radius: 12px; box-shadow: var(--shadow-float); }
/* Auth pages: show the brand mark above the heading at every width */
body .auth-mobile-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
body .auth-mobile-logo img { height: 36px !important; width: 36px !important; object-fit: contain; }
body .auth-mobile-logo-text { font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; color: var(--ink); }
body .auth-mobile-logo-text::after { content: " distribution"; }
/* View toggles (admin releases list/grid) */
.app-shell .view-toggle, .app-shell .layout-toggle { gap: 4px; }
.app-shell .view-toggle button, .app-shell .view-toggle a, .app-shell .layout-toggle button { width: 36px; height: 36px; border-radius: var(--r-pill); border: 0; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.app-shell .view-toggle .active, .app-shell .view-toggle button.active, .app-shell .layout-toggle .active { background: var(--ink); color: var(--paper); box-shadow: none; }
/* Dark-mode icon contrast inside ink chips */
.app-shell .plan-icon svg, .app-shell .sidebar-avatar svg, .app-shell .topbar-avatar svg { stroke: var(--paper); }
html[data-theme="dark"] .app-shell .plan-icon { background: #f3f2ec; }
html[data-theme="dark"] .app-shell .plan-icon svg { stroke: #1b1b19; }
html[data-theme="dark"] .app-shell .topbar-avatar-btn, html[data-theme="dark"] .admin-shell .topbar-avatar-btn { background: var(--glass) !important; }

/* ============================================================================
   16. Signature layer: the marketing site's own moments, inside the app
   ============================================================================ */

/* Key / value rows (many detail panels use .k / .v) */
.app-shell .k, body .info-k, body .rv-label, body .admin-settings-row-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.app-shell .v, body .info-v, body .rv-value { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
body .admin-settings-row-label { font-family: var(--font-display); font-size: 14.5px; letter-spacing: -0.005em; text-transform: none; color: var(--ink); font-weight: 500; }
body .admin-settings-row-hint { color: var(--muted); font-size: 13px; }

/* Cross-document view transitions: the shell stays put, the page cross-fades,
   and the white active pill slides to the destination in the sidebar. */
@view-transition { navigation: auto; }
.app-shell .sidebar { view-transition-name: isd-sidebar; }
.app-shell .topbar { view-transition-name: isd-topbar; }
.app-shell .sidebar-nav .nav-item.active { view-transition-name: isd-nav-active; }
::view-transition-old(root) { animation: 160ms var(--ease) both isd-fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both isd-rise-in; }
::view-transition-group(isd-nav-active) { animation-duration: 320ms; animation-timing-function: var(--ease); }
@keyframes isd-fade-out { to { opacity: 0; } }
@keyframes isd-rise-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Reveals (js adds data-reveal to cards below the fold, then .is-in) */
html.js-reveal [data-reveal], body [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
body [data-reveal].is-in { opacity: 1; transform: none; }

/* Plan tile in the sidebar: the marketing "tile-dark" */
.app-shell .sidebar-plan-badge, html[data-theme="dark"] .app-shell .sidebar-plan-badge { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); border-radius: var(--r-md); padding: 12px 12px; }
.app-shell .sidebar-plan-badge:hover { background: #000; box-shadow: 0 18px 34px rgba(42, 42, 39, 0.20), 0 2px 6px rgba(42, 42, 39, 0.10); }
html[data-theme="dark"] .app-shell .sidebar-plan-badge { background: #f3f2ec; color: #1b1b19; }
html[data-theme="dark"] .app-shell .sidebar-plan-badge:hover { background: #fff; }
.app-shell .sidebar-plan-badge .plan-icon { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .app-shell .sidebar-plan-badge .plan-icon { background: rgba(0, 0, 0, 0.08); }
.app-shell .sidebar-plan-badge .plan-icon svg { stroke: currentColor; }
.app-shell .sidebar-plan-badge .plan-name { color: inherit; }
.app-shell .sidebar-plan-badge .plan-label { color: inherit; opacity: 0.55; }

/* Topbar ⌘K pill (artist) and kbd hint (admin search) */
.app-shell .topbar-cmdk {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: var(--r-pill); border: 0;
    background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; cursor: pointer;
    transition: background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.app-shell .topbar-cmdk:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
.app-shell .topbar-cmdk:active { transform: scale(0.96); }
.app-shell .topbar-cmdk svg { width: 15px; height: 15px; color: var(--muted); }
body kbd, .app-shell .topbar-cmdk kbd, .app-shell .topbar-kbd, .cmdk kbd {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); line-height: 1;
    padding: 4px 6px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); text-transform: none;
}
.app-shell .topbar-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.app-shell .topbar-search input { padding-right: 52px; }
@media (max-width: 900px) { .app-shell .topbar-cmdk span, .app-shell .topbar-cmdk kbd { display: none; } .app-shell .topbar-cmdk { width: 40px; padding: 0; justify-content: center; } }

/* Command palette */
.cmdk { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: start center; padding-top: min(18vh, 160px); opacity: 0; pointer-events: none; transition: opacity var(--t-quick) var(--ease); }
.cmdk.is-open { opacity: 1; pointer-events: auto; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(42, 42, 39, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cmdk-sheet { position: relative; width: min(600px, calc(100vw - 32px)); background: var(--white); border-radius: 22px; box-shadow: var(--shadow-float); overflow: hidden; transform: translateY(8px) scale(0.98); transition: transform var(--t-std) var(--ease-out); }
.cmdk.is-open .cmdk-sheet { transform: none; }
.cmdk-head { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 18px; border-bottom: 1px solid var(--line); }
.cmdk-head svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmdk-input { flex: 1; height: 52px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.cmdk-input::placeholder { color: var(--muted-2); }
.cmdk-list { max-height: min(52vh, 420px); overflow: auto; padding: 8px; display: grid; gap: 2px; }
.cmdk-item { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em; }
.cmdk-item.is-active { background: var(--paper-2); }
.cmdk-ico { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.cmdk-ico svg { width: 17px; height: 17px; stroke-width: 1.75; }
.cmdk-item.is-active .cmdk-ico { color: var(--ink); }
.cmdk-hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.cmdk-foot { display: flex; gap: 18px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.cmdk-foot span { display: inline-flex; gap: 4px; align-items: center; }
.cmdk-brand { margin-left: auto; text-transform: lowercase; }
body.cmdk-open { overflow: hidden; }

/* Delivery ledger (auth panel today; any page can use the same markup) */
body .ledger { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-float); overflow: hidden; display: flex; flex-direction: column; color: #2a2a27; }
body .ledger-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(42, 42, 39, 0.08); }
body .ledger-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
body .ledger-art { width: 38px; height: 38px; border-radius: 9px; flex: none; position: relative; overflow: hidden; background: conic-gradient(from 210deg at 50% 50%, #2a2a27, #7466e8 30%, #de0a26 62%, #f1c27a 82%, #2a2a27); }
body .ledger-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.35), transparent 45%); }
body .ledger-title strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .ledger-title .mono { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0.02em; font-size: 11px; color: #8a8880; }
body .ledger-count { font-family: var(--font-mono); font-size: 11.5px; color: #66645d; white-space: nowrap; }
body .ledger-count b { color: #2a2a27; font-weight: 500; }
body .ledger-rows { display: grid; }
body .ledger-row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(42, 42, 39, 0.08); font-size: 13.5px; }
body .ledger-row:last-child { border-bottom: 0; }
body .ledger-row img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
body .ledger-row .territory { font-family: var(--font-mono); font-size: 11px; color: #8a8880; letter-spacing: 0.02em; }
body .ledger .chip { display: inline-grid; align-items: center; height: 24px; width: 96px; padding: 0; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; position: relative; overflow: hidden; background: rgba(42, 42, 39, 0.06); color: #8a8880; }
body .ledger .chip i { grid-area: 1 / 1; font-style: normal; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 24px; border-radius: 999px; opacity: 0; }
body .ledger .chip i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body .ledger .chip .chip-q { color: #8a8880; }
body .ledger .chip .chip-d { background: rgba(214, 154, 42, 0.16); color: #9a6a12; }
body .ledger .chip .chip-l { background: rgba(58, 166, 118, 0.14); color: #23764f; }
/* Each store walks queued → delivered → live on a 14s loop, staggered by --r */
@keyframes chip-q { 0%, 23% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes chip-d { 0%, 24% { opacity: 0; } 25%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes chip-l { 0%, 54% { opacity: 0; } 55%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
body .ledger-demo .chip .chip-q { animation: chip-q 14s linear infinite; animation-delay: calc(var(--r, 0) * -0.9s); }
body .ledger-demo .chip .chip-d { animation: chip-d 14s linear infinite; animation-delay: calc(var(--r, 0) * -0.9s); }
body .ledger-demo .chip .chip-l { animation: chip-l 14s linear infinite; animation-delay: calc(var(--r, 0) * -0.9s); }
body .ledger-demo .chip .chip-l::before { animation: pulse 2.2s ease-in-out infinite; }
body .ledger-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fafaf7; border-top: 1px solid rgba(42, 42, 39, 0.08); }
body .ledger-foot .mono { color: #8a8880; font-size: 11px; }
body .ledger-foot .progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(42, 42, 39, 0.08); overflow: hidden; }
body .ledger-foot .progress i { display: block; height: 100%; border-radius: 4px; background: #2a2a27; transform-origin: left; animation: ledger-progress 14s linear infinite; }
@keyframes ledger-progress { from { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
body .auth-brand-panel .ledger { margin-top: 32px; max-width: 420px; animation: rise 0.9s var(--ease-out) 0.35s both; --rise: 30px; }
body .auth-brand-panel .ledger-row { animation: rise 0.5s var(--ease-out) both; --rise: 8px; animation-delay: calc(0.6s + var(--r, 0) * 0.05s); }
body .auth-brand-foot { position: relative; margin-top: auto; padding-top: 24px; color: rgba(255, 255, 255, 0.45); font-size: 11px; }
body .auth-brand-panel .auth-brand-body > * { animation: rise 0.7s var(--ease-out) both; }
body .auth-brand-panel .auth-brand-body > :nth-child(1) { animation-delay: 0.05s; }
body .auth-brand-panel .auth-brand-body > :nth-child(2) { animation-delay: 0.15s; }
body .auth-brand-panel .auth-brand-body > :nth-child(3) { animation-delay: 0.26s; }
body .auth-shell:has(.auth-brand-panel) .auth-mobile-logo { display: none; }
@media (max-width: 900px) { body .auth-shell:has(.auth-brand-panel) .auth-mobile-logo { display: flex; } }
@media (max-width: 1180px) { body .auth-brand-panel { flex-basis: 420px; padding: 36px; } body .auth-brand-headline { font-size: 34px; } }

/* Theme toggle: cross-fade the two icons (scale .25→1, blur 4→0) */
.app-shell .theme-toggle-btn, .app-shell #themeToggleBtn { position: relative; }
.app-shell .theme-toggle-btn svg, .app-shell #themeToggleBtn svg { position: absolute; inset: 0; margin: auto; transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease), filter var(--t-std) var(--ease); }
.app-shell .theme-toggle-btn .icon-sun, .app-shell #themeToggleBtn .theme-ico-sun { display: block !important; opacity: 0; transform: scale(0.25); filter: blur(4px); }
.app-shell .theme-toggle-btn .icon-moon, .app-shell #themeToggleBtn .theme-ico-moon { display: block !important; opacity: 1; transform: scale(1); filter: blur(0); }
html[data-theme="dark"] .app-shell .theme-toggle-btn .icon-sun, html[data-theme="dark"] .app-shell #themeToggleBtn .theme-ico-sun { opacity: 1; transform: scale(1); filter: blur(0); }
html[data-theme="dark"] .app-shell .theme-toggle-btn .icon-moon, html[data-theme="dark"] .app-shell #themeToggleBtn .theme-ico-moon { opacity: 0; transform: scale(0.25); filter: blur(4px); }

/* Waveform (empty states) */
body .wave { display: flex; gap: 3px; align-items: center; height: 28px; justify-content: center; margin: 0 auto 14px; }
body .wave i { width: 3px; border-radius: 2px; background: var(--ink); height: var(--h, 40%); opacity: 0.6; transform-origin: center; animation: breathe 1.3s ease-in-out infinite; }
body .wave i:nth-child(2n) { animation-duration: 1.7s; } body .wave i:nth-child(3n) { animation-duration: 1.1s; animation-delay: 0.2s; } body .wave i:nth-child(5n) { animation-duration: 1.5s; animation-delay: 0.1s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
body .empty-state, body .aid-empty, body .pdm-empty { text-align: center; padding: 40px 20px; }

/* Tables: sticky mono header, ledger rhythm */
.app-shell .table-wrap { max-height: none; }
.app-shell .data-table thead th { position: sticky; top: 0; z-index: 1; }
.app-shell .data-table td .badge { vertical-align: middle; }

/* Toasts: ink pill, bottom centre */
body .toast-container, body #toastContainer, body .toasts { bottom: 24px; }
body .toast { border-radius: var(--r-pill); padding: 12px 18px; font-weight: 500; letter-spacing: -0.008em; }
body .toast .toast-icon { color: #8be0b6; }
body .toast.toast-error .toast-icon, body .toast.error .toast-icon { color: #ff8a97; }

/* Number cells count with tabular figures everywhere */
.app-shell .stat-value, .app-shell .admin-kpi-value, .app-shell .data-table td, .app-shell .num, .app-shell .price { font-variant-numeric: tabular-nums; }

.cmdk-input:focus-visible { outline: none; }
body .auth-brand-panel { justify-content: space-between; }
body .auth-brand-body { justify-content: center; }
body .auth-brand-panel .ledger { margin-top: 26px; }
body .auth-brand-tagline { margin-bottom: 0; }
body .auth-brand-foot { text-transform: none; letter-spacing: 0.02em; white-space: nowrap; padding-top: 18px; }
@media (max-height: 820px) { body .auth-brand-panel .ledger-row:nth-child(n+7) { display: none; } body .auth-brand-headline { font-size: 34px; } }

/* ---- 19. Promo studio (artist/toolbox.php, js/promo-studio.js) ----------- */
body .ps .ps-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
body .ps .ps-stage-col { position: sticky; top: 12px; }
body .ps .ps-formats { display: inline-flex; padding: 3px; background: var(--paper-2, #f3f2ec); border-radius: 999px; margin-bottom: 14px; }
body .ps .ps-seg { border: 0; background: transparent; color: var(--text-muted); font: 500 13px/1 Inter, sans-serif; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background var(--t-std, .26s) var(--ease, ease), color var(--t-std, .26s), box-shadow var(--t-std, .26s); }
body .ps .ps-seg.is-on { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); }
body .ps .ps-stage { border-radius: var(--r-lg, 20px); overflow: hidden; box-shadow: var(--shadow-float); background: var(--paper-2); outline: none; max-width: 460px; }
body .ps .ps-stage:focus-visible { box-shadow: var(--shadow-float), 0 0 0 3px rgba(42,42,39,.18); }
body .ps .ps-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
body .ps .ps-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; max-width: 460px; border-radius: var(--r-lg, 20px); background: var(--paper-2); color: var(--text-muted); text-align: center; padding: 32px; font-size: 13.5px; }
body .ps .ps-empty p { margin: 0; max-width: 28ch; }
body .ps .ps-empty-art { display: flex; gap: 6px; align-items: flex-end; height: 34px; }
body .ps .ps-empty-art span { width: 6px; border-radius: 3px; background: var(--ink); opacity: .55; animation: ps-wave 1.4s var(--ease, ease-in-out) infinite; }
body .ps .ps-empty-art span:nth-child(1) { height: 14px; } body .ps .ps-empty-art span:nth-child(2) { height: 30px; animation-delay: .15s; }
body .ps .ps-empty-art span:nth-child(3) { height: 20px; animation-delay: .3s; } body .ps .ps-empty-art span:nth-child(4) { height: 26px; animation-delay: .45s; }
@keyframes ps-wave { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
body .ps .ps-styles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
body .ps .ps-style { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line-2, rgba(42,42,39,.12)); background: var(--white); color: var(--text-muted); font: 500 13px/1 Inter, sans-serif; cursor: pointer; transition: border-color var(--t-quick, .14s), color var(--t-quick, .14s), background var(--t-quick, .14s), transform var(--t-quick, .14s); }
body .ps .ps-style:active { transform: scale(.96); }
body .ps .ps-style.is-on { border: 1.5px solid var(--ink); color: var(--ink); background: rgba(42,42,39,.06); }
body .ps .ps-swatch { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42,42,39,.10); display: inline-block; }
body .ps .ps-meta { margin-top: 10px; font: 400 10.5px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
body .ps .ps-controls { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
body .ps .ps-section { display: flex; flex-direction: column; gap: 10px; }
body .ps .ps-label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #66645d); }
body .ps .ps-hint { font: 400 12px/1.4 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
body .ps .ps-chips, body .ps .ps-dots { display: flex; flex-wrap: wrap; gap: 8px; }
body .ps .ps-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2, rgba(42,42,39,.12)); background: var(--white); color: var(--ink-2); font: 500 12px/1 Inter, sans-serif; cursor: pointer; transition: background var(--t-quick, .14s), color var(--t-quick, .14s), border-color var(--t-quick, .14s), transform var(--t-quick, .14s); }
body .ps .ps-chip:active { transform: scale(.96); }
body .ps .ps-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body .ps .ps-input { height: 42px; border-radius: 12px; }
body .ps .ps-dot { width: 38px; height: 38px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(42,42,39,.12); cursor: pointer; position: relative; transition: transform var(--t-quick, .14s), box-shadow var(--t-quick, .14s); }
body .ps .ps-dot:hover { transform: translateY(-1px); }
body .ps .ps-dot.is-on { box-shadow: inset 0 0 0 2.5px var(--ink), var(--shadow-btn); }
body .ps .ps-dot.is-on::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 7px; border-left: 2.5px solid var(--paper); border-bottom: 2.5px solid var(--paper); transform: translateY(-2px) rotate(-45deg); mix-blend-mode: difference; }
body .ps .ps-toggles { display: flex; flex-direction: column; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); padding: 4px 16px; }
body .ps .ps-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font: 500 14px/1.2 Inter, sans-serif; color: var(--ink); border-bottom: 1px solid var(--line); cursor: pointer; }
body .ps .ps-toggle:last-child { border-bottom: 0; }
body .ps .ps-toggle--inline { padding: 8px 0 0; border: 0; font-size: 13px; }
body .ps .ps-toggle input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(42,42,39,.14); position: relative; cursor: pointer; transition: background var(--t-std, .26s); margin: 0; flex-shrink: 0; }
body .ps .ps-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--t-std, .26s) var(--ease, ease); }
body .ps .ps-toggle input:checked { background: var(--ink); }
body .ps .ps-toggle input:checked::after { transform: translateX(18px); }
body .ps .ps-caption { font: 400 13px/1.55 Inter, sans-serif; border-radius: 16px; resize: vertical; min-height: 128px; }
body .ps .ps-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink); font: 500 12px/1 Inter, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; padding: 4px 0; }
body .ps .ps-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
body .ps .ps-actions .btn { flex: 1; min-width: 150px; }
body .ps .ps-note { flex-basis: 100%; font: 400 10.5px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); min-height: 14px; }
html[data-theme="dark"] body .ps .ps-formats, html[data-theme="dark"] body .ps .ps-empty { background: var(--surface-2, #262421); }
html[data-theme="dark"] body .ps .ps-style, html[data-theme="dark"] body .ps .ps-chip { background: var(--glass); color: var(--text-muted); }
html[data-theme="dark"] body .ps .ps-style.is-on { border-color: var(--paper); color: var(--paper); background: rgba(250,250,247,.08); }
html[data-theme="dark"] body .ps .ps-chip.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
html[data-theme="dark"] body .ps .ps-seg.is-on { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] body .ps .ps-toggle input:checked { background: var(--paper); }
html[data-theme="dark"] body .ps .ps-toggle input:checked::after { background: var(--ink); }
html[data-theme="dark"] body .ps .ps-dot.is-on { box-shadow: inset 0 0 0 2.5px var(--paper); }
@media (max-width: 900px) {
  body .ps .ps-grid { grid-template-columns: 1fr; }
  body .ps .ps-stage-col { position: static; }
  body .ps .ps-stage, body .ps .ps-empty { max-width: none; }
}

/* ---- 20. Royalties statement (artist/royalties.php) ------------------------ */
.app-shell .ryl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.app-shell .ryl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.app-shell .ryl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.app-shell .ryl-title { font: 500 30px/1.05 Inter, sans-serif; letter-spacing: -.03em; color: var(--ink); margin: 0; }
.app-shell .ryl-sub { margin: 6px 0 0; color: var(--text-muted); font-size: 13.5px; }
.app-shell .ryl-periods { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.app-shell .ryl-periods .filter-pill { border-radius: 999px; }
.app-shell .ryl-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.app-shell .ryl-statement { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--r-2xl, 34px); padding: 28px 30px; box-shadow: var(--shadow-btn); display: flex; flex-direction: column; gap: 22px; min-height: 300px; }
.app-shell .ryl-statement::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(222,10,38,.28), transparent 62%); pointer-events: none; }
.app-shell .ryl-statement .k { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.app-shell .ryl-statement .ryl-big { font: 500 56px/1 Inter, sans-serif; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin-top: 8px; color: var(--paper); }
.app-shell .ryl-statement .ryl-note { margin-top: 8px; font-size: 13px; color: color-mix(in srgb, var(--paper) 66%, transparent); }
.app-shell .ryl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); position: relative; }
.app-shell .ryl-facts .v { font: 500 18px/1.1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 5px; color: var(--paper); }
.app-shell .ryl-facts .v.up { color: color-mix(in srgb, #3aa676 60%, var(--paper)); }
.app-shell .ryl-statement .ryl-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; margin-top: auto; }
.app-shell .ryl-statement .btn-paper { background: var(--paper); color: var(--ink); border-radius: 999px; padding: 11px 18px; font: 500 13.5px/1 Inter, sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform var(--t-quick, .14s); }
.app-shell .ryl-statement .btn-glass { background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); border-radius: 999px; padding: 11px 18px; font: 500 13.5px/1 Inter, sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); transition: transform var(--t-quick, .14s); }
.app-shell .ryl-statement .btn-paper:active, .app-shell .ryl-statement .btn-glass:active { transform: scale(.96); }
.app-shell .ryl-stores { display: flex; flex-direction: column; }
.app-shell .ryl-stores .ryl-store { display: grid; grid-template-columns: 32px minmax(0, 1fr) 100px 52px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.app-shell .ryl-stores .ryl-store:last-child { border-bottom: 0; }
.app-shell .ryl-store-logo { width: 32px; height: 32px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.app-shell .ryl-store-logo img { width: 20px; height: 20px; object-fit: contain; }
.app-shell .ryl-store-logo span { font: 500 12px/1 Inter, sans-serif; color: var(--ink); }
.app-shell .ryl-store-name { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell .ryl-store-sub { font: 400 10.5px/1.4 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); letter-spacing: .04em; }
.app-shell .ryl-store-bar { height: 6px; border-radius: 3px; background: rgba(42,42,39,.08); overflow: hidden; }
.app-shell .ryl-store-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); transform-origin: left; animation: ryl-grow .8s var(--ease-out, ease-out) both; }
@keyframes ryl-grow { from { transform: scaleX(0); } }
.app-shell .ryl-store-pct { text-align: right; font: 500 12px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-shell .ryl-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.app-shell .ryl-mini { padding: 12px 14px; border-radius: 16px; background: var(--paper-2); }
.app-shell .ryl-mini .k { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.app-shell .ryl-mini .v { margin-top: 6px; font: 500 17px/1.1 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-shell .ryl-mini .s { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.app-shell .ryl-tabs { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-shell .ryl-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2); font: 500 13px/1 Inter, sans-serif; cursor: pointer; transition: background var(--t-quick, .14s), color var(--t-quick, .14s), border-color var(--t-quick, .14s); }
.app-shell .ryl-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app-shell .ryl-rank { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); }
.app-shell .ryl-rank.top { color: var(--accent); }
.app-shell .ryl-stmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.app-shell .ryl-stmt { position: relative; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column; gap: 4px; transition: transform var(--t-std, .26s) var(--ease, ease), opacity var(--t-std, .26s), box-shadow var(--t-std, .26s); }
.app-shell .ryl-stmt.is-dim { opacity: .38; }
.app-shell .ryl-stmt.is-on { box-shadow: var(--shadow-card), 0 0 0 2px var(--ink); }
.app-shell .ryl-stmt .k { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.app-shell .ryl-stmt .v { font: 500 22px/1.1 Inter, sans-serif; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.app-shell .ryl-stmt .s { font-size: 11.5px; color: var(--text-muted); }
.app-shell .ryl-stmt .ryl-dl { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font: 500 12px/1 Inter, sans-serif; text-decoration: none; background: var(--glass); }
.app-shell .ryl-stmt .ryl-dl:hover { border-color: var(--ink); }
.app-shell .ryl-tip { background: var(--ink) !important; color: var(--paper); border: 0 !important; border-radius: 12px; box-shadow: var(--shadow-float); }
.app-shell .ryl-tip-title { color: color-mix(in srgb, var(--paper) 60%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--paper) 14%, transparent) !important; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500 !important; }
.app-shell .ryl-tip-k { color: color-mix(in srgb, var(--paper) 66%, transparent) !important; }
.app-shell .ryl-tip-v { color: var(--paper) !important; font-weight: 500 !important; }
html[data-theme="dark"] .app-shell .ryl-store-bar { background: color-mix(in srgb, var(--paper) 10%, transparent); }
html[data-theme="dark"] .app-shell .ryl-store-bar i { background: var(--paper); }
html[data-theme="dark"] .app-shell .ryl-tab.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
html[data-theme="dark"] .app-shell .ryl-tip { background: var(--paper) !important; color: var(--ink); }
html[data-theme="dark"] .app-shell .ryl-tip-title { color: rgba(42,42,39,.6) !important; }
html[data-theme="dark"] .app-shell .ryl-tip-k { color: rgba(42,42,39,.66) !important; }
html[data-theme="dark"] .app-shell .ryl-tip-v { color: var(--ink) !important; }
@media (max-width: 960px) { .app-shell .ryl-hero { grid-template-columns: 1fr; } .app-shell .ryl-facts { grid-template-columns: repeat(2, 1fr); } .app-shell .ryl-minis { grid-template-columns: 1fr; } .app-shell .ryl-periods { justify-content: flex-start; } }
@media (max-width: 640px) { .app-shell .ryl-statement { padding: 22px; border-radius: 24px; } .app-shell .ryl-statement .ryl-big { font-size: 42px; } .app-shell .ryl-stores .ryl-store { grid-template-columns: 32px minmax(0, 1fr) 52px; } .app-shell .ryl-store-bar { display: none; } }

/* ---- 21. Admin command centre (admin/dashboard.php) ------------------------ */
.admin-shell .cc-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--r-2xl, 34px); padding: 30px 32px; box-shadow: var(--shadow-btn); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); gap: 28px; margin-bottom: 20px; }
.admin-shell .cc-hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(116,102,232,.32), transparent 62%); pointer-events: none; }
.admin-shell .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.admin-shell .cc-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(222,10,38,.5); animation: cc-pulse 2.4s ease-out infinite; }
@keyframes cc-pulse { 0% { box-shadow: 0 0 0 0 rgba(222,10,38,.5); } 70% { box-shadow: 0 0 0 8px rgba(222,10,38,0); } 100% { box-shadow: 0 0 0 0 rgba(222,10,38,0); } }
.admin-shell .cc-title { font: 500 32px/1.05 Inter, sans-serif; letter-spacing: -.035em; color: var(--paper); margin: 10px 0 6px; }
.admin-shell .cc-sub { color: color-mix(in srgb, var(--paper) 66%, transparent); font-size: 13.5px; margin: 0; }
.admin-shell .cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); position: relative; }
.admin-shell .cc-kpi .k { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.admin-shell .cc-kpi .v { font: 500 28px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--paper); margin-top: 8px; }
.admin-shell .cc-kpi .s { font-size: 11.5px; color: color-mix(in srgb, var(--paper) 60%, transparent); margin-top: 6px; }
.admin-shell .cc-kpi .s b { color: var(--paper); font-weight: 500; }
.admin-shell .cc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; position: relative; }
.admin-shell .cc-hero .btn-paper { background: var(--paper); color: var(--ink); border-radius: 999px; padding: 11px 18px; font: 500 13.5px/1 Inter, sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.admin-shell .cc-hero .btn-glass { background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); border-radius: 999px; padding: 11px 18px; font: 500 13.5px/1 Inter, sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.admin-shell .cc-queue { position: relative; background: color-mix(in srgb, var(--paper) 6%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 22px; padding: 18px 18px 8px; display: flex; flex-direction: column; }
.admin-shell .cc-queue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.admin-shell .cc-queue-head .k { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.admin-shell .cc-queue-total { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; color: var(--paper); padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 12%, transparent); }
.admin-shell .cc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); text-decoration: none; color: var(--paper); }
.admin-shell .cc-row:first-of-type { border-top: 0; }
.admin-shell .cc-row .n { font: 500 22px/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 40px; }
.admin-shell .cc-row .t { flex: 1; font-size: 13.5px; }
.admin-shell .cc-row .t small { display: block; font: 400 10.5px/1.5 "Geist Mono", ui-monospace, monospace; color: color-mix(in srgb, var(--paper) 55%, transparent); letter-spacing: .04em; }
.admin-shell .cc-row .chip { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); }
.admin-shell .cc-row .chip.hot { background: color-mix(in srgb, #de0a26 26%, transparent); color: color-mix(in srgb, #de0a26 60%, var(--paper)); }
.admin-shell .cc-row .chip.warm { background: color-mix(in srgb, #d69a2a 26%, transparent); color: color-mix(in srgb, #d69a2a 60%, var(--paper)); }
.admin-shell .cc-row .chip.ok { background: rgba(58,166,118,.28); color: color-mix(in srgb, #3aa676 60%, var(--paper)); }
.admin-shell .cc-row svg { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.admin-shell .cc-clear { padding: 18px 0 12px; display: flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--paper) 75%, transparent); font-size: 13.5px; }
.admin-shell .cc-clear i { width: 8px; height: 8px; border-radius: 50%; background: #3aa676; }
.admin-shell .cc-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-shell .cc-pulse .card { padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.admin-shell .cc-pulse .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.admin-shell .cc-pulse .v { font: 500 22px/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.admin-shell .cc-pulse .k { font: 500 10px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.admin-shell .cc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.admin-shell .cc-pipe { display: flex; gap: 3px; height: 8px; margin: 4px 0 14px; }
.admin-shell .cc-pipe i { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.admin-shell .cc-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.admin-shell .cc-leg div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.admin-shell .cc-leg b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-shell .cc-leg i { width: 8px; height: 8px; border-radius: 50%; }
.admin-shell .cc-plan { display: flex; flex-direction: column; gap: 10px; }
.admin-shell .cc-plan-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.admin-shell .cc-plan-row .bar { height: 6px; border-radius: 3px; background: rgba(42,42,39,.08); overflow: hidden; }
.admin-shell .cc-plan-row .bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.admin-shell .cc-plan-row .n { text-align: right; font: 500 12px/1 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); }
.admin-shell .cc-plan-row .p { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-shell .cc-age { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.admin-shell .cc-age::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.admin-shell .cc-age.fresh { background: var(--live-soft, rgba(58,166,118,.14)); color: #23764f; }
.admin-shell .cc-age.warm { background: var(--wait-soft, rgba(214,154,42,.16)); color: #9a6a12; }
.admin-shell .cc-age.hot { background: var(--accent-soft, rgba(222,10,38,.1)); color: var(--accent); }
.admin-shell .cc-sla { display: flex; gap: 14px; flex-wrap: wrap; font: 400 11px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--text-muted); }
.admin-shell .cc-sla b { color: var(--ink); font-weight: 500; }
@media (max-width: 1100px) { .admin-shell .cc-hero { grid-template-columns: 1fr; } .admin-shell .cc-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .admin-shell .cc-hero { padding: 22px; border-radius: 24px; } .admin-shell .cc-title { font-size: 26px; } }

/* ---- 22. Platform analytics (admin/analytics.php) -------------------------- */
.admin-shell .an-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-shell .an-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.admin-shell .an-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.admin-shell .an-title { font: 500 32px/1.05 Inter, sans-serif; letter-spacing: -.035em; color: var(--ink); margin: 10px 0 6px; }
.admin-shell .an-sub { margin: 0; max-width: 62ch; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.admin-shell .an-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-shell .an-seg { display: inline-flex; padding: 3px; background: var(--paper-2); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.admin-shell .an-seg a { white-space: nowrap; }
.admin-shell .an-seg a { padding: 8px 14px; border-radius: 999px; font: 500 12.5px/1 Inter, sans-serif; color: var(--text-muted); text-decoration: none; transition: background var(--t-std, .26s) var(--ease, ease), color var(--t-std, .26s); }
.admin-shell .an-seg a.is-on { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); }
.admin-shell .an-nav { position: sticky; top: 8px; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; margin: 0 0 18px; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; box-shadow: var(--shadow-card); width: fit-content; max-width: 100%; }
.admin-shell .an-nav a { padding: 7px 12px; border-radius: 999px; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: background var(--t-quick, .14s), color var(--t-quick, .14s); }
.admin-shell .an-nav a:hover { color: var(--ink); }
.admin-shell .an-nav a.is-on { background: var(--ink); color: var(--paper); }
.admin-shell .an-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--r-2xl, 34px); padding: 28px 30px; box-shadow: var(--shadow-btn); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 26px; margin-bottom: 22px; }
.admin-shell .an-hero::after { content: ""; position: absolute; inset: auto -12% -70% auto; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(222,10,38,.26), transparent 62%); pointer-events: none; }
.admin-shell .an-hero .k { font: 500 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.admin-shell .an-hero-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 18px 20px; position: relative; }
.admin-shell .an-hero-big .v { font: 500 34px/1 Inter, sans-serif; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--paper); margin-top: 8px; }
.admin-shell .an-hero-big .s { font-size: 11.5px; color: color-mix(in srgb, var(--paper) 62%, transparent); margin-top: 6px; }
.admin-shell .an-hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); position: relative; }
.admin-shell .an-hero-facts > div { display: flex; flex-direction: column; gap: 5px; }
.admin-shell .an-hero-facts .v { font: 500 16px/1.1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--paper); }
.admin-shell .an-hero-facts .v small { font: 400 11.5px/1 Inter, sans-serif; color: color-mix(in srgb, var(--paper) 60%, transparent); margin-left: 4px; }
.admin-shell .an-hero-facts .v.warn { color: color-mix(in srgb, #d69a2a 60%, var(--paper)); }
.admin-shell .an-hero-side { position: relative; background: color-mix(in srgb, var(--paper) 6%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 22px; padding: 16px 16px 6px; }
.admin-shell .an-side-head { margin-bottom: 4px; }
.admin-shell .an-side-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); color: var(--paper); text-decoration: none; }
.admin-shell .an-side-row:first-of-type { border-top: 0; }
.admin-shell .an-side-row .n { font: 500 18px/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 48px; }
.admin-shell .an-side-row .n.hot { color: color-mix(in srgb, #de0a26 60%, var(--paper)); }
.admin-shell .an-side-row .n.wait { color: color-mix(in srgb, #d69a2a 60%, var(--paper)); }
.admin-shell .an-side-row .t { flex: 1; font-size: 13px; }
.admin-shell .an-side-row svg { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.admin-shell .an-clear { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.admin-shell .an-clear i { width: 8px; height: 8px; border-radius: 50%; background: #3aa676; flex-shrink: 0; }
.admin-shell .an-clear--paper { color: var(--ink-2); padding: 14px 20px 18px; }
.admin-shell .an-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-shell .an-group-k { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px 4px; }
.admin-shell .an-tiles { display: grid; gap: 10px; }
.admin-shell .an-tile { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "v v" "k k" "s s"; position: relative; }
.admin-shell .an-tile .v { grid-area: v; font: 500 24px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.admin-shell .an-tile .k { grid-area: k; margin-top: 7px; font: 500 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .an-tile .s { grid-area: s; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.admin-shell .an-tile::after { content: ""; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.admin-shell .an-tile.is-hot::after { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft, rgba(222,10,38,.12)); }
.admin-shell .an-tile.is-warm::after { background: #d69a2a; box-shadow: 0 0 0 4px rgba(214,154,42,.18); }
.admin-shell .an-section { margin-bottom: 30px; scroll-margin-top: 70px; }
.admin-shell .an-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-shell .an-section-head h2 { font: 500 22px/1.15 Inter, sans-serif; letter-spacing: -.025em; color: var(--ink); margin: 8px 0 0; }
.admin-shell .an-note { font: 400 10.5px/1.5 "Geist Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .an-multiples, .admin-shell .an-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-shell .an-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-shell .an-two--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.admin-shell .an-multiple { padding: 18px 18px 14px; }
.admin-shell .an-multiple-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.admin-shell .an-multiple-head .k { font: 500 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .an-multiple-head .v { font: 500 24px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 6px; }
.admin-shell .an-canvas { position: relative; height: 150px; }
.admin-shell .an-canvas--tall { margin: 4px 18px 0; }
.admin-shell .an-ledger .card-header { padding-bottom: 6px; }
.admin-shell .an-ledger-body { padding: 4px 20px 16px; }
.admin-shell .an-ledger-body--tight { padding-top: 0; }
.admin-shell .an-segs { display: flex; gap: 3px; height: 8px; margin: 8px 0 14px; }
.admin-shell .an-segs i { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.admin-shell .an-segs .is-none { background: var(--paper-2); }
.admin-shell .mute, .admin-shell .an-segs .mute, .admin-shell .dot.mute { --tone: #b1aea5; }
.admin-shell .an-segs .ink, .admin-shell .dot.ink { --tone: var(--ink); }
.admin-shell .an-segs .violet, .admin-shell .dot.violet { --tone: #7466e8; }
.admin-shell .an-segs .accent, .admin-shell .dot.accent { --tone: #de0a26; }
.admin-shell .an-segs .live, .admin-shell .dot.live { --tone: #3aa676; }
.admin-shell .an-segs .wait, .admin-shell .dot.wait { --tone: #d69a2a; }
.admin-shell .an-segs .hot, .admin-shell .dot.hot { --tone: #de0a26; }
.admin-shell .an-segs i, .admin-shell .an-row .dot { background: var(--tone, var(--ink)); }
.admin-shell .an-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
.admin-shell .an-ledger-body > .an-row:first-child, .admin-shell .an-segs + .an-row { border-top: 0; }
.admin-shell .an-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-shell .an-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .an-row .t small { font: 400 10.5px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.admin-shell .an-row .n { font: 500 13px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; min-width: 44px; }
.admin-shell .an-row .n.warn { color: #9a6a12; }
.admin-shell .an-row .p { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); min-width: 36px; text-align: right; }
.admin-shell .an-row .rank, .admin-shell .an-table .rank { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); }
.admin-shell .an-table .rank.top, .admin-shell .an-row .rank.top { color: var(--accent); }
.admin-shell .an-row--bar .t { flex: 0 1 44%; }
.admin-shell .an-row--store .t { flex: 0 1 46%; }
.admin-shell .an-row--total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.admin-shell .an-row--total .t { font-weight: 500; }
.admin-shell .an-row--link:hover .t { color: var(--ink); }
.admin-shell .an-bar { flex: 1; display: block; height: 6px; border-radius: 3px; background: rgba(42,42,39,.08); overflow: hidden; min-width: 40px; }
.admin-shell .an-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); transform-origin: left; animation: ryl-grow .8s var(--ease-out, ease-out) both; }
.admin-shell .an-bar.violet i { background: #7466e8; }
.admin-shell .an-bar.accent i { background: #de0a26; }
.admin-shell .an-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.admin-shell .an-mark img { width: 18px; height: 18px; object-fit: contain; }
.admin-shell .an-mark b { font: 500 12px/1 Inter, sans-serif; color: var(--ink); }
.admin-shell .an-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.admin-shell .an-chip.live { background: var(--live-soft, rgba(58,166,118,.14)); color: #23764f; }
.admin-shell .an-chip.wait { background: var(--wait-soft, rgba(214,154,42,.16)); color: #9a6a12; }
.admin-shell .an-chip.hot { background: var(--accent-soft, rgba(222,10,38,.1)); color: var(--accent); }
.admin-shell .an-chip.violet { background: rgba(116,102,232,.12); color: #5b4fd1; }
.admin-shell .an-chip.ink { background: var(--ink); color: var(--paper); }
.admin-shell .an-chip.mute { background: rgba(42,42,39,.06); color: var(--ink-2); }
.admin-shell .an-snapshot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--line); margin-top: 8px; }
.admin-shell .an-snapshot .v { font: 500 15px/1.2 Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.admin-shell .an-snapshot .k { margin-top: 4px; font: 400 10px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .an-insight { padding: 12px 20px; font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.admin-shell .an-insight b { color: var(--ink); font-weight: 500; }
.admin-shell .an-foot { padding: 12px 20px 16px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); border-top: 1px solid var(--line); }
.admin-shell .an-empty { padding: 20px 4px; color: var(--text-muted); font-size: 13px; text-align: center; }
.admin-shell .card .data-table-wrap { overflow-x: auto; max-height: none; overflow-y: visible; margin-bottom: 0 !important; }
.admin-shell .card .data-table-wrap + .an-foot { margin-top: 0; }
.admin-shell .an-table { width: 100%; }
.admin-shell .an-table td, .admin-shell .an-table th { font-size: 13px; padding: 10px 12px; white-space: nowrap; }
.admin-shell .an-table td:first-child, .admin-shell .an-table th:first-child { padding-left: 20px; }
.admin-shell .an-table td:last-child, .admin-shell .an-table th:last-child { padding-right: 20px; }
.admin-shell .an-table .an-num { font-variant-numeric: tabular-nums; text-align: right; }
.admin-shell .an-table .an-num small { color: var(--text-muted); font-size: 11px; }
.admin-shell .an-table .an-strong { font-weight: 500; color: var(--ink); }
.admin-shell .an-table .an-dim { color: var(--text-muted); }
.admin-shell .an-table .an-mono { font: 400 11px/1.4 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.admin-shell .an-table .an-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .an-table .an-pct { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink-2); margin-left: 8px; }
.admin-shell .an-table tr.is-dim { opacity: .55; }
.admin-shell .an-table td .an-bar { display: inline-block; width: 70px; vertical-align: middle; }
.admin-shell .an-person { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.admin-shell .an-person b { font-weight: 500; }
.admin-shell .an-person small { font-size: 11px; color: var(--text-muted); }
.admin-shell .an-toggle { display: inline-flex; padding: 3px; background: var(--paper-2); border-radius: 999px; }
.admin-shell .an-toggle button { border: 0; background: transparent; padding: 7px 12px; border-radius: 999px; font: 500 12px/1 Inter, sans-serif; color: var(--text-muted); cursor: pointer; transition: background var(--t-std, .26s), color var(--t-std, .26s); }
.admin-shell .an-toggle button.is-on { background: var(--ink); color: var(--paper); }
.admin-shell .an-ops-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; padding: 4px 20px 14px; }
.admin-shell .an-ops-big .v { font: 500 26px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.admin-shell .an-ops-big .v.hot { color: var(--accent); }
.admin-shell .an-ops-big .v.warn { color: #9a6a12; }
.admin-shell .an-ops-big .k { margin-top: 6px; font: 400 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
html[data-theme="dark"] .admin-shell .an-seg, html[data-theme="dark"] .admin-shell .an-toggle, html[data-theme="dark"] .admin-shell .an-mark, html[data-theme="dark"] .admin-shell .an-insight { background: var(--surface-2, #262421); }
html[data-theme="dark"] .admin-shell .an-bar { background: rgba(250,250,247,.1); }
html[data-theme="dark"] .admin-shell .an-chip.mute { background: rgba(250,250,247,.08); }
html[data-theme="dark"] .admin-shell .an-chip.live { color: #8be0b6; } html[data-theme="dark"] .admin-shell .an-chip.wait { color: #f1c27a; } html[data-theme="dark"] .admin-shell .an-chip.violet { color: #a59cf3; }
html[data-theme="dark"] .admin-shell .an-row .n.warn, html[data-theme="dark"] .admin-shell .an-ops-big .v.warn { color: #f1c27a; }
html[data-theme="dark"] .admin-shell .an-nav { background: color-mix(in srgb, var(--paper) 86%, transparent); }
@media (max-width: 1200px) { .admin-shell .an-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-shell .an-hero { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .admin-shell .an-multiples, .admin-shell .an-three, .admin-shell .an-two, .admin-shell .an-two--wide { grid-template-columns: 1fr; } .admin-shell .an-snapshot { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .admin-shell .an-groups { grid-template-columns: 1fr; } .admin-shell .an-hero { padding: 22px; border-radius: 24px; } .admin-shell .an-title { font-size: 26px; } .admin-shell .an-hero-big .v { font-size: 28px; } .admin-shell .an-row--bar .t, .admin-shell .an-row--store .t { flex-basis: 40%; } }

/* ---- 23. QC review workbench (admin/qc-review.php) ------------------------- */
.admin-shell .qc-flash { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft, rgba(222,10,38,.1)); color: var(--accent); font-size: 13.5px; font-weight: 500; }
.admin-shell .qc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.admin-shell .qc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-shell .qc-head > div:first-child .qc-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.admin-shell .qc-title { font: 500 32px/1.05 Inter, sans-serif; letter-spacing: -.035em; color: var(--ink); margin: 10px 0 6px; }
.admin-shell .qc-sub { margin: 0; max-width: 64ch; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.admin-shell .qc-facts { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 18px; background: var(--white); border-radius: 18px; box-shadow: var(--shadow-card); }
.admin-shell .qc-facts > div { display: flex; flex-direction: column; gap: 4px; }
.admin-shell .qc-facts .v { font: 500 22px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.admin-shell .qc-facts .v.hot { color: var(--accent); } .admin-shell .qc-facts .v.warn { color: #9a6a12; }
.admin-shell .qc-facts .k { font: 400 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .qc-lanes { display: flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.admin-shell .qc-lane { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font: 500 13px/1 Inter, sans-serif; white-space: nowrap; transition: background var(--t-std, .26s) var(--ease, ease), color var(--t-std, .26s); }
.admin-shell .qc-lane b { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; padding: 4px 7px; border-radius: 999px; background: rgba(42,42,39,.08); color: var(--ink); min-width: 22px; text-align: center; }
.admin-shell .qc-lane.is-empty { color: var(--text-muted); } .admin-shell .qc-lane.is-empty b { color: var(--text-muted); }
.admin-shell .qc-lane.is-on { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); }
.admin-shell .qc-lane.is-on b { background: color-mix(in srgb, var(--paper) 18%, transparent); color: var(--paper); }
.admin-shell .qc-lane-hint { margin: 10px 4px 16px; font-size: 13px; color: var(--text-muted); }
.admin-shell .qc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-shell .qc-search { flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text-muted); }
.admin-shell .qc-search:focus-within { border-color: var(--ink); border-width: 1.5px; }
.admin-shell .qc-search input { flex: 1; border: 0; background: transparent; font: 400 13.5px/1 Inter, sans-serif; color: var(--ink); outline: none; min-width: 0; }
.admin-shell .qc-sort { display: inline-flex; padding: 3px; background: var(--paper-2); border-radius: 999px; }
.admin-shell .qc-sort a { padding: 8px 12px; border-radius: 999px; font: 500 12px/1 Inter, sans-serif; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.admin-shell .qc-sort a.is-on { background: var(--ink); color: var(--paper); }
.admin-shell .qc-count { font: 400 10.5px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .qc-empty { padding: 56px 24px; text-align: center; }
.admin-shell .qc-empty .t { font: 500 18px/1.2 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); margin-top: 14px; }
.admin-shell .qc-empty .s { color: var(--text-muted); font-size: 13.5px; margin-top: 6px; }
.admin-shell .qc-empty-mark { display: inline-flex; gap: 6px; align-items: flex-end; height: 34px; }
.admin-shell .qc-empty-mark i { width: 6px; border-radius: 3px; background: var(--ink); opacity: .5; animation: ps-wave 1.4s ease-in-out infinite; }
.admin-shell .qc-empty-mark i:nth-child(1) { height: 14px; } .admin-shell .qc-empty-mark i:nth-child(2) { height: 30px; animation-delay: .15s; } .admin-shell .qc-empty-mark i:nth-child(3) { height: 20px; animation-delay: .3s; } .admin-shell .qc-empty-mark i:nth-child(4) { height: 26px; animation-delay: .45s; }
/* Chips */
.admin-shell .qc-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: rgba(42,42,39,.06); color: var(--ink-2); }
.admin-shell .qc-chip.live { background: var(--live-soft, rgba(58,166,118,.14)); color: #23764f; }
.admin-shell .qc-chip.wait { background: var(--wait-soft, rgba(214,154,42,.16)); color: #9a6a12; }
.admin-shell .qc-chip.hot { background: var(--accent-soft, rgba(222,10,38,.1)); color: var(--accent); }
.admin-shell .qc-chip.violet { background: rgba(116,102,232,.12); color: #5b4fd1; }
.admin-shell .qc-chip.sky { background: rgba(14,165,233,.12); color: #0369a1; }
.admin-shell .qc-chip.is-late { background: var(--accent-soft, rgba(222,10,38,.1)); color: var(--accent); }
/* Bench */
.admin-shell .qc-bench { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.admin-shell .qc-row { grid-column: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; border: 0; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-card); cursor: pointer; font-family: Inter, sans-serif; color: var(--ink); transition: transform var(--t-quick, .14s), box-shadow var(--t-std, .26s); }
.admin-shell .qc-row:hover { box-shadow: var(--shadow-card), 0 8px 24px rgba(42,42,39,.08); }
.admin-shell .qc-row:active { transform: scale(.985); }
.admin-shell .qc-row.is-on { box-shadow: var(--shadow-card), 0 0 0 2px var(--ink); }
.admin-shell .qc-row:focus-visible { outline: none; box-shadow: var(--shadow-card), 0 0 0 3px rgba(42,42,39,.25); }
.admin-shell .qc-cover { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; }
.admin-shell .qc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-shell .qc-cover i, .admin-shell .qc-panel-cover i { font: 500 9px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-style: normal; }
.admin-shell .qc-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-shell .qc-row-title { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .qc-row-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .qc-row-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.admin-shell .qc-row-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.admin-shell .qc-row-date { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .qc-row-date.hot { color: var(--accent); } .admin-shell .qc-row-date.wait { color: #9a6a12; }
.admin-shell .qc-score { --tone: #3aa676; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(42,42,39,.08) 0); position: relative; }
.admin-shell .qc-score::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--white); }
.admin-shell .qc-score b { position: relative; font: 500 12px/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.admin-shell .qc-score.wait { --tone: #d69a2a; } .admin-shell .qc-score.hot { --tone: #de0a26; }
.admin-shell .qc-panel { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 12px; background: var(--white); border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; }
.admin-shell .qc-panel-head { display: flex; gap: 18px; padding: 22px 24px 18px; }
.admin-shell .qc-panel-cover { width: 108px; height: 108px; border-radius: 16px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-card); }
.admin-shell .qc-panel-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-shell .qc-panel-id { min-width: 0; flex: 1; }
.admin-shell .qc-panel-id h2 { margin: 6px 0 4px; font: 500 22px/1.15 Inter, sans-serif; letter-spacing: -.025em; }
.admin-shell .qc-panel-id h2 a { color: var(--ink); text-decoration: none; }
.admin-shell .qc-panel-by { font-size: 13.5px; color: var(--ink-2); } .admin-shell .qc-panel-by span { color: var(--text-muted); }
.admin-shell .qc-spec { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.admin-shell .qc-spec span { display: flex; flex-direction: column; gap: 3px; }
.admin-shell .qc-spec i { font: 400 9.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
.admin-shell .qc-spec b { font-weight: 500; font-size: 13px; color: var(--ink); }
.admin-shell .qc-spec b.mono { font: 500 12px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .03em; }
.admin-shell .qc-spec b em { font-style: normal; color: #0369a1; } .admin-shell .qc-spec b.hot { color: var(--accent); } .admin-shell .qc-spec b.wait { color: #9a6a12; }
.admin-shell .qc-verdict { display: flex; align-items: center; gap: 18px; margin: 0 24px; padding: 16px 18px; border-radius: 16px; background: var(--paper-2); }
.admin-shell .qc-verdict.hot { background: var(--accent-soft, rgba(222,10,38,.08)); } .admin-shell .qc-verdict.wait { background: var(--wait-soft, rgba(214,154,42,.14)); } .admin-shell .qc-verdict.live { background: var(--live-soft, rgba(58,166,118,.12)); } .admin-shell .qc-verdict.sky { background: rgba(14,165,233,.1); }
.admin-shell .qc-verdict-ring { --tone: #3aa676; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(42,42,39,.1) 0); position: relative; flex-shrink: 0; }
.admin-shell .qc-verdict-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--white); }
.admin-shell .qc-verdict-ring b, .admin-shell .qc-verdict-ring i { position: relative; }
.admin-shell .qc-verdict-ring b { font: 500 19px/1 Inter, sans-serif; letter-spacing: -.03em; color: var(--ink); }
.admin-shell .qc-verdict-ring i { font: 400 8px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-style: normal; margin-top: 2px; }
.admin-shell .qc-verdict-ring.wait { --tone: #d69a2a; } .admin-shell .qc-verdict-ring.hot { --tone: #de0a26; }
.admin-shell .qc-verdict-label { font: 500 19px/1.15 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.admin-shell .qc-verdict-hint { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.admin-shell .qc-verdict-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.admin-shell .qc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.admin-shell .qc-actions .qc-inline { display: inline; }
.admin-shell .qc-actions .btn-primary { border-radius: 999px; }
.admin-shell .qc-actions-more { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.admin-shell .qc-why { flex-basis: 100%; font-size: 12px; color: var(--text-muted); line-height: 1.45; order: 9; }
.admin-shell .qc-danger { color: var(--accent) !important; }
.admin-shell .qc-btn-danger { background: var(--accent) !important; color: #fff !important; }
.admin-shell .qc-findings { padding: 18px 24px 6px; }
.admin-shell .qc-pass { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--live-soft, rgba(58,166,118,.12)); color: #23764f; font-size: 13.5px; font-weight: 500; }
.admin-shell .qc-pass i { width: 8px; height: 8px; border-radius: 50%; background: #3aa676; flex-shrink: 0; }
.admin-shell .qc-group { margin-bottom: 18px; }
.admin-shell .qc-group-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-shell .qc-group-hint { font-size: 12px; color: var(--text-muted); }
.admin-shell .qc-finding { padding: 11px 14px; border-radius: 12px; background: var(--paper-2); border-left: 3px solid var(--ink); margin-bottom: 6px; }
.admin-shell .qc-finding.hot { border-left-color: var(--accent); } .admin-shell .qc-finding.wait { border-left-color: #d69a2a; } .admin-shell .qc-finding.violet { border-left-color: #7466e8; } .admin-shell .qc-finding.mute { border-left-color: #b1aea5; }
.admin-shell .qc-finding-msg { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.admin-shell .qc-finding-msg small { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.admin-shell .qc-finding-detail { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.admin-shell .qc-tracks { padding: 6px 24px 22px; }
.admin-shell .qc-track { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-shell .qc-track-n { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--text-muted); }
.admin-shell .qc-track-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-shell .qc-track-title { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .qc-track-title em { font: 500 9px/1 "Geist Mono", ui-monospace, monospace; font-style: normal; padding: 2px 5px; border-radius: 4px; background: rgba(42,42,39,.08); color: var(--ink-2); margin-left: 6px; }
.admin-shell .qc-track-sub { font-size: 11.5px; color: var(--text-muted); }
.admin-shell .qc-track-sub .mono { font: 400 11px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .03em; }
.admin-shell .qc-track-flags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.admin-shell .qc-pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 20px 0 8px; flex-wrap: wrap; }
/* Modals */
.admin-shell .qc-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(42,42,39,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-shell .qc-modal[hidden] { display: none; }
.admin-shell .qc-dialog { background: var(--paper); border-radius: 24px; width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-float); animation: rise .32s var(--ease-out, ease-out) both; }
.admin-shell .qc-dialog--sm { max-width: 560px; }
.admin-shell .qc-dialog-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-shell .qc-dialog-title { font: 500 20px/1.2 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); margin-top: 6px; }
.admin-shell .qc-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.admin-shell .qc-dialog-body { padding: 20px 26px; }
.admin-shell .qc-banner { margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: rgba(116,102,232,.1); color: #5b4fd1; font-size: 13px; }
.admin-shell .qc-field-label { font: 500 13.5px/1.3 Inter, sans-serif; color: var(--ink); margin: 0 0 10px; }
.admin-shell .qc-field-label span { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.admin-shell .qc-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-bottom: 18px; }
.admin-shell .qc-reason { text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--white); cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-family: Inter, sans-serif; transition: border-color var(--t-quick, .14s), background var(--t-quick, .14s), box-shadow var(--t-quick, .14s); }
.admin-shell .qc-reason b { font-weight: 500; font-size: 13px; color: var(--ink); }
.admin-shell .qc-reason span { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.admin-shell .qc-reason:hover { border-color: var(--ink); }
.admin-shell .qc-reason.is-on { border-color: var(--ink); background: rgba(42,42,39,.05); box-shadow: inset 0 0 0 1px var(--ink); }
.admin-shell .qc-reason.is-on b::before { content: "✓ "; }
.admin-shell .qc-fieldbox { border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; background: var(--white); }
.admin-shell .qc-fieldbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-shell .qc-fieldchips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-shell .qc-fieldchip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2); font: 500 12px/1 Inter, sans-serif; cursor: pointer; transition: background var(--t-quick, .14s), color var(--t-quick, .14s), border-color var(--t-quick, .14s); }
.admin-shell .qc-fieldchip:hover { border-color: var(--ink); color: var(--ink); }
.admin-shell .qc-fieldchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.admin-shell .qc-fieldnotes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.admin-shell .qc-fieldnote { display: flex; gap: 10px; align-items: center; }
.admin-shell .qc-fieldnote span { font: 500 12px/1.3 Inter, sans-serif; color: var(--ink); min-width: 140px; flex-shrink: 0; }
.admin-shell .qc-fieldnote input, .admin-shell .qc-textarea { flex: 1; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font: 400 13px/1.4 Inter, sans-serif; outline: none; }
.admin-shell .qc-fieldnote input:focus, .admin-shell .qc-textarea:focus { border-color: var(--ink); }
.admin-shell .qc-textarea { resize: vertical; }
.admin-shell .qc-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--white); cursor: pointer; }
.admin-shell .qc-switch b { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink); }
.admin-shell .qc-switch small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.admin-shell .qc-switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(42,42,39,.14); position: relative; cursor: pointer; margin: 0; flex-shrink: 0; transition: background var(--t-std, .26s); }
.admin-shell .qc-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--t-std, .26s) var(--ease, ease); }
.admin-shell .qc-switch input:checked { background: var(--ink); } .admin-shell .qc-switch input:checked::after { transform: translateX(18px); }
.admin-shell .qc-dialog-foot { padding: 14px 26px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-shell .qc-dialog-foot .qc-why { flex-basis: auto; order: 0; }
.admin-shell .qc-dialog-btns { display: flex; gap: 8px; margin-left: auto; }
html[data-theme="dark"] .admin-shell .qc-lanes, html[data-theme="dark"] .admin-shell .qc-sort, html[data-theme="dark"] .admin-shell .qc-verdict, html[data-theme="dark"] .admin-shell .qc-finding, html[data-theme="dark"] .admin-shell .qc-cover, html[data-theme="dark"] .admin-shell .qc-panel-cover { background: var(--surface-2, #262421); }
html[data-theme="dark"] .admin-shell .qc-lane b { background: rgba(250,250,247,.1); }
html[data-theme="dark"] .admin-shell .qc-score::after, html[data-theme="dark"] .admin-shell .qc-verdict-ring::after { background: var(--surface, #1c1b19); }
html[data-theme="dark"] .admin-shell .qc-chip { background: rgba(250,250,247,.08); }
html[data-theme="dark"] .admin-shell .qc-chip.live { color: #8be0b6; } html[data-theme="dark"] .admin-shell .qc-chip.wait { color: #f1c27a; } html[data-theme="dark"] .admin-shell .qc-chip.hot, html[data-theme="dark"] .admin-shell .qc-chip.is-late { color: #ff9aa6; background: rgba(222,10,38,.22); } html[data-theme="dark"] .admin-shell .qc-verdict.hot { background: rgba(222,10,38,.14); } html[data-theme="dark"] .admin-shell .qc-verdict.wait { background: rgba(214,154,42,.16); } html[data-theme="dark"] .admin-shell .qc-verdict.live { background: rgba(58,166,118,.16); } html[data-theme="dark"] .admin-shell .qc-chip.violet { color: #a59cf3; } html[data-theme="dark"] .admin-shell .qc-chip.sky { color: #7dd3fc; }
html[data-theme="dark"] .admin-shell .qc-pass { color: #8be0b6; }
html[data-theme="dark"] .admin-shell .qc-reason.is-on { background: rgba(250,250,247,.06); }
@media (max-width: 1000px) {
  .admin-shell .qc-bench { grid-template-columns: 1fr; }
  .admin-shell .qc-row, .admin-shell .qc-panel { grid-column: 1; }
  .admin-shell .qc-panel { grid-row: auto; position: static; margin: 0 0 16px; }
  .admin-shell .qc-facts { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) { .admin-shell .qc-title { font-size: 26px; } .admin-shell .qc-panel-head { flex-direction: column; } .admin-shell .qc-verdict { margin: 0 16px; } .admin-shell .qc-actions, .admin-shell .qc-findings, .admin-shell .qc-tracks { padding-left: 16px; padding-right: 16px; } .admin-shell .qc-actions-more { margin-left: 0; } }

/* ---- 24. Signups (admin/signups.php) --------------------------------------- */
.admin-shell .sg-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 4px 0; font: 400 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .sg-legend span { display: inline-flex; align-items: center; gap: 7px; }
.admin-shell .sg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.admin-shell .sg-dot.s1 { background: #7466e8; } .admin-shell .sg-dot.s2 { background: #d69a2a; } .admin-shell .sg-dot.s3 { background: #3aa676; } .admin-shell .sg-dot.s4 { background: #de0a26; }
.admin-shell .sg-src { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.admin-shell .sg-src svg { color: var(--text-muted); }
.admin-shell .sg-src b { font-weight: 500; }
.admin-shell .an-toggle a { padding: 7px 12px; border-radius: 999px; font: 500 12px/1 Inter, sans-serif; color: var(--text-muted); text-decoration: none; }
.admin-shell .an-toggle a.is-on { background: var(--ink); color: var(--paper); }
.admin-shell .an-side-row .t small { display: block; font: 400 10.5px/1.5 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; color: color-mix(in srgb, var(--paper) 55%, transparent); text-transform: uppercase; }

/* ---- 25. Admin detail heroes: user page (.up-*) and release page (.rv-*) --- */
.admin-shell .up-back { margin-bottom: 14px; }
.admin-shell .up-hero, .admin-shell .rv-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--r-2xl, 34px); padding: 28px 30px; box-shadow: var(--shadow-btn); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr); gap: 26px; margin-bottom: 22px; }
.admin-shell .up-hero::after, .admin-shell .rv-hero::after { content: ""; position: absolute; inset: auto -14% -70% auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(116,102,232,.28), transparent 62%); pointer-events: none; }
.admin-shell .rv-hero::after { background: radial-gradient(circle, rgba(222,10,38,.26), transparent 62%); }
.admin-shell .up-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.admin-shell .up-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.admin-shell .up-title { font: 500 30px/1.08 Inter, sans-serif; letter-spacing: -.03em; color: var(--paper); margin: 8px 0 6px; }
.admin-shell .up-id, .admin-shell .rv-id { display: flex; gap: 20px; align-items: flex-start; position: relative; }
.admin-shell .up-avatar { width: 84px; height: 84px; border-radius: 24px; background: color-mix(in srgb, var(--paper) 14%, transparent); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; position: relative; box-shadow: var(--shadow-card); }
.admin-shell .up-avatar span { font: 500 30px/1 Inter, sans-serif; color: var(--paper); }
.admin-shell .up-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-shell .rv-cover { width: 132px; height: 132px; border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--paper) 12%, transparent); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.admin-shell .rv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-shell .rv-cover i { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, #de0a26 60%, var(--paper)); font-style: normal; }
.admin-shell .up-id-text, .admin-shell .rv-id-text { min-width: 0; flex: 1; }
.admin-shell .up-contact, .admin-shell .rv-by { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.admin-shell .rv-by span { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.admin-shell .up-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.admin-shell .up-hero .qc-chip, .admin-shell .rv-hero .qc-chip { background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); }
.admin-shell .up-hero .qc-chip.live, .admin-shell .rv-hero .qc-chip.live { background: rgba(58,166,118,.28); color: color-mix(in srgb, #3aa676 60%, var(--paper)); }
.admin-shell .up-hero .qc-chip.wait, .admin-shell .rv-hero .qc-chip.wait { background: rgba(214,154,42,.28); color: color-mix(in srgb, #d69a2a 60%, var(--paper)); }
.admin-shell .up-hero .qc-chip.hot, .admin-shell .rv-hero .qc-chip.hot { background: rgba(222,10,38,.3); color: color-mix(in srgb, #de0a26 55%, var(--paper)); }
.admin-shell .up-hero .qc-chip.violet, .admin-shell .rv-hero .qc-chip.violet { background: rgba(116,102,232,.3); color: color-mix(in srgb, #7466e8 55%, var(--paper)); }
.admin-shell .up-hero .qc-chip.ink, .admin-shell .rv-hero .qc-chip.ink { background: var(--paper); color: var(--ink); }
.admin-shell .up-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); position: relative; }
.admin-shell .up-facts .k { font: 500 10px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.admin-shell .up-facts .v { font: 500 24px/1 Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--paper); margin-top: 7px; }
.admin-shell .up-facts .v.small { font-size: 16px; letter-spacing: -.01em; }
.admin-shell .up-facts .v.mono { font: 500 13px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .03em; }
.admin-shell .up-facts .v em { font-style: normal; color: color-mix(in srgb, #d69a2a 60%, var(--paper)); }
.admin-shell .up-facts .s { font-size: 11.5px; color: color-mix(in srgb, var(--paper) 60%, transparent); margin-top: 5px; }
.admin-shell .up-hero-side { position: relative; background: color-mix(in srgb, var(--paper) 6%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 22px; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.admin-shell .up-side-k { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.admin-shell .up-actions { display: flex; flex-direction: column; gap: 8px; }
.admin-shell .up-actions form { margin: 0; display: contents; }
.admin-shell .up-actions .btn-paper, .admin-shell .up-actions .btn-glass { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 0; font: 500 13.5px/1 Inter, sans-serif; cursor: pointer; text-decoration: none; transition: transform var(--t-quick, .14s); box-sizing: border-box; }
.admin-shell .up-actions .btn-paper { background: var(--paper); color: var(--ink); }
.admin-shell .up-actions .btn-glass { background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.admin-shell .up-actions .up-danger { color: color-mix(in srgb, #de0a26 55%, var(--paper)); }
.admin-shell .up-actions .btn-paper:active, .admin-shell .up-actions .btn-glass:active { transform: scale(.97); }
.admin-shell .up-side-note { font-size: 11.5px; line-height: 1.45; color: color-mix(in srgb, var(--paper) 58%, transparent); margin-top: 4px; }
.admin-shell .rv-ai-slot:empty { display: none; }
.admin-shell .rv-ai-slot button { width: 100%; justify-content: center; border-radius: 999px !important; height: 40px; }
.admin-shell .up-kv { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.admin-shell .up-kv:last-child { border-bottom: 0; }
.admin-shell .up-kv .k { width: 96px; flex-shrink: 0; font: 500 10px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.admin-shell .up-kv .v { font-size: 13px; font-weight: 500; color: var(--ink); min-width: 0; word-break: break-word; }
.admin-shell .up-kv .v.mono { font: 500 12.5px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .03em; }
.admin-shell .rv-kv { padding: 0 20px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
/* Release page: the older cards keep their markup, the sheet re-dresses them */
.admin-shell .ral-card .ral-header-icon { background: var(--paper-2); border-radius: 12px; }
.admin-shell .ral-header-title { font-weight: 500; }
.admin-shell .ral-icon { font-weight: 500; }
.admin-shell .ral-action-label { font-weight: 500; }
.admin-shell .ral-badge, .admin-shell .ral-pill { font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; }
.admin-shell .ral-reason { border-radius: 0 12px 12px 0; }
.admin-shell #codes-card input, .admin-shell #presave-card input { border-radius: 10px !important; border: 1px solid var(--line-2) !important; background: var(--white) !important; color: var(--ink) !important; font-family: "Geist Mono", ui-monospace, monospace !important; }
.admin-shell #codes-card input:focus, .admin-shell #presave-card input:focus { border-color: var(--ink) !important; outline: none; }
.admin-shell .fp-match-badge { border-radius: 999px !important; }
@media (max-width: 1100px) { .admin-shell .up-hero, .admin-shell .rv-hero { grid-template-columns: 1fr; } .admin-shell .rv-kv { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .admin-shell .up-hero, .admin-shell .rv-hero { padding: 22px; border-radius: 24px; } .admin-shell .up-title { font-size: 24px; } .admin-shell .rv-id, .admin-shell .up-id { flex-direction: column; } }

/* ---- GENERATED by _dev/gen_overrides.py: page component families -------- */
/* bordered surface cards → ring shadow, brand radius (32) */
body .admin-detail-header, body .admin-review-bar, body .aid-modal, body .anl-kpi-card, body .asp-modal, body .cfl-dispute-step-indicator, body .cfl-explainer-card, body .cfl-hero-card, body .cfl-msg, body .cfl-stat-card, body .cs-modal, body .info-panel, body .invite-card, body .kyc-actionbar, body .minpay-note, body .ms-kpi, body .no-splits, body .onb-profile-preview, body .pdm-card, body .pdm-kpi, body .pdm-row, body .pdm-timeline li, body .pf-modal, body .rv-modal-card, body .sa-stat, body .seat-quota, body .splits-kpi-card, body .tag-dropdown, body .team-tabs, body .test-stat-card, body .tfa-qr-wrap, body .tk-del-box { border: 0; box-shadow: var(--shadow-card); border-radius: var(--r-lg); background: var(--white); }
/* 900/800 weights → 600 (137) */
body .aa-chip .aa-chip-init, body .admin-detail-name, body .admin-kpi-value, body .admin-shell .admin-kpi-value, body .admin-shell .page-title, body .admin-shell .topbar-title, body .ai-card h4, body .ai-card-name, body .aiag-stat .n, body .aid-stat-value, body .amt-val, body .anl-kpi-val, body .asp-explicit, body .asp-hero-name, body .asp-stat-val, body .audience h5, body .auth-brand-headline, body .auth-heading, body .av-status, body .avail-amount, body .balance-amount, body .bucket-head .lbl, body .ca-modal-title, body .calc-row.net .k, body .calc-row.net .v, body .card-head h1, body .cel-title, body .cfl-rev-amount, body .client-name, body .commission-note strong, body .cs-ai-card h4, body .cs-bucket-head .lbl, body .cs-hero h2, body .cs-modal h3, body .cs-nmf-card h3, body .cs-section-head h3, body .cs-spotify-card h3, body .cs-spotify-target b, body .cs-status-toggle button, body .cstat-val { font-weight: 600; letter-spacing: -0.02em; }
body .cw-progress-step .num, body .cw-step-head h2, body .doc-h1, body .dsp-logo-fallback, body .dstat-val, body .explicit-card-label, body .ficon, body .fw-800, body .green, body .hero h2, body .ip-promo-badge, body .ip-promo-title, body .istm-h, body .istm-thanks h3, body .kyc-check-icon, body .metric-val, body .mkh-tier-price, body .mkh-tier-ribbon, body .ms-header h1, body .ms-kpi-val, body .nmf-card .ttl, body .nmf-card h3, body .nmf-grouplabel, body .nmf-rel .a, body .nmf-rel .badge, body .nmf-rel .tick, body .onb-logo-text, body .onb-plan-amount, body .onb-plan-name, body .onb-plan-popular-badge, body .onb-slide-title, body .onb-success-title, body .page-head h1, body .party-avatar, body .party-name, body .payable-hero .amount, body .pdm-avatar, body .pf-avatar-placeholder, body .pricing-amount, body .pricing-annual-save-tag { font-weight: 600; letter-spacing: -0.02em; }
body .pricing-compare-group, body .pricing-compare-plan-name, body .pricing-plan-name, body .pricing-popular-badge, body .pricing-save-chip, body .pricing-title, body .pu-month-label, body .rank, body .review-header h1, body .rs-explicit, body .rs-hero-title, body .rv-dsp-chip-fallback, body .rv-explicit-badge, body .rv-track-num, body .ryl-stmt-amount, body .ryl-tip-v, body .sa-proc, body .sa-stat-val, body .sat-number, body .seat-avatar span, body .section-count, body .section-title, body .sftp-guide h3, body .split-badge-pct, body .split-pct-badge, body .split-preview-pct, body .split-stat-val, body .splits-kpi-value, body .spotify-block h4, body .stat-value, body .step-num, body .stmt-brand-name, body .stmt-doc-period, body .sub-plan-card-price, body .sub-plan-name, body .sub-price, body .sub-progress-tooltip, body .sw-intro h2, body .swm-btn-spin, body .swm-title { font-weight: 600; letter-spacing: -0.02em; }
body .tb-bento-name, body .tb-modal-title, body .team-hero h1, body .test-header-left h2, body .test-stat-value, body .tfa-step-num, body .tk-explicit, body .tk-noaudio, body .tk-num, body .toolbox-asset-branding, body .tooltip-icon, body .total-row td, body .upgrade-gate h2, body .vc-step h3, body .vid-status, body .vs-section h3, body .vs-status { font-weight: 600; letter-spacing: -0.02em; }
/* uppercase micro-labels → Geist Mono (83) */
body .acr-match__score-label, body .acr-match__yours-label, body .adm-brand-name small, body .adm-or, body .admin-search-label, body .admin-shell .data-table th, body .admin-shell .sidebar-section-label, body .ai-card h4, body .ai-card-stat-lbl, body .aiag-tbl th, body .aid-chart-title, body .aid-section h4, body .aid-stat-label, body .anl-kpi-lbl, body .anl-section-label, body .asp-stat-lbl, body .audience h5, body .auth-brand-eyebrow, body .auth-divider, body .av-table th, body .calc-row.net .k, body .cfl-dsp-label, body .cfl-kv-label, body .cfl-msg-action-flag, body .cfl-rev-label, body .cfl-rev-ledger-title, body .cfl-split-hd, body .ck, body .cs-ai-card h4, body .cstat-lbl, body .cw-progress-step .lbl, body .cw-review-card .rk, body .cw-step-head .step-count, body .data-table th, body .detail-stat-label, body .dstat-label, body .fraud-table th, body .info-k, body .ip-promo-album-label, body .iscp-aa { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; font-size: 11px; color: var(--muted); }
body .iscp-cd small, body .iscp-cpy, body .iscp-disc small, body .iscp-eye, body .iscp-lbl, body .istm-eyebrow, body .kyc-field__label, body .metric-label, body .ms-kpi-lbl, body .nmf-grouplabel, body .nmf-label, body .onb-step-eyebrow, body .party-label, body .payable-hero .eyebrow, body .payout-sect-title, body .payout-table th, body .pdm-card h4, body .pdm-kpi-lbl, body .perm-group-label, body .pricing-compare-current-label, body .pricing-compare-group, body .pricing-eyebrow, body .pu-month-label, body .rs-stat-label, body .rv-label, body .ryl-stmt-label, body .ryl-tip-title, body .sa-stat-lbl, body .sa-table th, body .sat-label, body .sidebar-section-label, body .sp-drawer-item dt, body .split-stat-lbl, body .splits-kpi-label, body .splits-table th, body .stat-label, body .stmt-brand-sub, body .stmt-doc-eyebrow, body .test-table th, body .tk-dl { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; font-size: 11px; color: var(--muted); }
body .tk-noaudio, body .toolbox-asset-branding, body .total-label { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; font-size: 11px; color: var(--muted); }
/* dark hero gradients → stage (3) */
body .pricing-header, body .sub-hero, body .welcome-banner { background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); border: 0; box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); color: var(--ink); }
/* bordered pills → ghost pill (6) */
body .admin-kpi-datehdr, body .admin-shell .topbar-avatar-btn, body .cfl-dsp-pill, body .pdm-pill, body .radar-mood-chip, body .radio-pill { border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--glass); border-radius: 999px; color: var(--ink-2); }
/* hard-coded dark surfaces → paper (11) */
body .adm-submit, body .ip-promo-card, body .iscp-perf .n, body .iscp-punch, body .istm-cta, body .nmf-chip, body .nmf-modal .box header, body .nmf-rel, body .nmf-warn, body .pt-tab.on, body .toolbox-asset-card { background: var(--white); color: var(--ink); border-color: var(--line); }
/* solid indigo accents → ink (3) */
body .cfl-tstep-dot--current, body .pdm-tl-dot.info, body .sp-pct-fill { background: var(--ink); color: var(--paper); border-color: transparent; }
/* bordered inputs → inset ring (38) */
body .aa-chip, body .admin-filter-select, body .admin-search-input, body .admin-search-item, body .ai-search-input, body .aid-filter input, body .aid-filter select, body .artist-chip-locked, body .asp-dsp-btn, body .asp-link-item, body .cfl-filter-search, body .credit-name-input, body .credit-row, body .fg input, body .fg textarea, body .fin-filter-bar input, body .fin-filter-bar select, body .form-details, body .form-group input, body .form-group select, body .form-group textarea, body .form-input, body .form-select, body .form-textarea, body .pu-search input, body .rc-search, body .rc-select-trigger, body .rs-dsp-item, body .rv-dsp-chip, body .sp-filter-bar input, body .sp-filter-bar select, body .tag-input-wrap, body .test-form-group input, body .test-form-group select, body .test-form-group textarea, body .test-link-box input, body .test-share-row input, body .topbar-search input { border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--white); border-radius: 12px; color: var(--ink); }
/* ---- END GENERATED ---- */

/* Topbar on phones: title truncates, avatar collapses to a round button, theme toggle lives in ⌘K */
.app-shell .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .app-shell .topbar { gap: 8px; padding: 10px 12px; }
    .app-shell .topbar-actions { gap: 6px; }
    .app-shell .topbar-avatar-btn { width: 40px; padding: 0; justify-content: center; }
    .app-shell .topbar-name, .app-shell .topbar-avatar-btn > svg, .app-shell .topbar-avatar-btn .lucide-chevron-down { display: none; }
    .app-shell .theme-toggle-btn, .app-shell #themeToggleBtn { display: none; }
}

/* ---- 17. Wallet: the balance card becomes the ink statement tile --------- */
.app-shell .balance-card {
    --text: var(--paper); --text-1: var(--paper); --text-2: rgba(250,250,247,.72); --text-3: rgba(250,250,247,.55); --border: rgba(255,255,255,.14); --border-2: rgba(255,255,255,.2); --teal: #8be0b6;
    background: var(--ink) !important; border: 0 !important; border-radius: var(--r-2xl) !important; box-shadow: var(--shadow-btn) !important; color: var(--paper); padding: 28px 30px !important; position: relative; overflow: hidden;
}
.app-shell .balance-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 18% 0%, rgba(116,102,232,.18), transparent 70%), radial-gradient(50% 50% at 88% 100%, rgba(222,10,38,.16), transparent 70%); }
.app-shell .balance-card > * { position: relative; }
html[data-theme="dark"] .app-shell .balance-card { --text: #1b1b19; --text-1: #1b1b19; --text-2: rgba(27,27,25,.72); --text-3: rgba(27,27,25,.55); --border: rgba(0,0,0,.12); --teal: #23764f; background: #f3f2ec !important; color: #1b1b19; }
.app-shell .balance-card .balance-amount { font-size: clamp(40px, 4vw, 56px) !important; font-weight: 500 !important; letter-spacing: -.04em !important; line-height: 1 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.app-shell .balance-card [style*="text-transform:uppercase"] { font-family: var(--font-mono); letter-spacing: .06em !important; font-size: 11px !important; font-weight: 400 !important; }
.app-shell .balance-card .btn-primary { background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important; }
.app-shell .balance-card .btn-primary:hover { background: #fff !important; }
html[data-theme="dark"] .app-shell .balance-card .btn-primary { background: #1b1b19 !important; color: #f3f2ec !important; }
.app-shell .balance-card .btn-secondary { background: rgba(255,255,255,.1) !important; color: var(--paper) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; }
.app-shell .balance-card .btn-secondary:hover { background: rgba(255,255,255,.16) !important; }
html[data-theme="dark"] .app-shell .balance-card .btn-secondary { background: rgba(0,0,0,.06) !important; color: #1b1b19 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14) !important; }
.app-shell .balance-card [style*="font-size:1.125rem"] { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body .wlt-modal-backdrop { background: rgba(42,42,39,.45) !important; }

/* ---- 18. Release wizard: ink step indicator and ink selection pills ------ */
.app-shell .step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.app-shell .step-dot.current { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 4px rgba(42,42,39,.10); border: 0; }
.app-shell .step-dot.done, .app-shell .step-dot.completed { background: var(--live-soft); color: #23764f; box-shadow: none; }
.app-shell .step-connector { background: var(--line-2); height: 1.5px; }
.app-shell .step-item .step-label, .app-shell .step-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.app-shell .step-item .step-label.current, .app-shell .step-dot.current + .step-label, .app-shell .step-item.current .step-label { color: var(--ink); }
.app-shell .radio-pill { border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--glass); border-radius: 999px; color: var(--ink-2); }
.app-shell .radio-pill input[type=radio] { accent-color: var(--ink); }
.app-shell .radio-pill:has(input:checked) { border: 0; background: var(--ink); color: var(--paper); font-weight: 500; box-shadow: none; }
.app-shell .radio-pill:has(input:checked) input[type=radio] { accent-color: var(--paper); }