/* ── Aeonik — self-hosted woff2 (font-face here ensures registration whenever this file loads) ── */
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Bold.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-BoldItalic.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
}

/* ──────────────────────────────────────────────────────────────────
   GLOBAL THEME TOKENS
   Hoisted to :root so the whole platform can use them, not just
   .tn-scope. Light theme overrides live under html[data-theme="light"].
   Default is dark (no override).
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces (dark default) */
  --tg-bg:           #0d0d0d;
  --tg-surface:      #131316;
  --tg-surface-2:    #18181d;
  --tg-surface-3:    #1f1f25;
  --tg-surface-hi:   #26262e;
  /* Lines */
  --tg-line:         rgba(255,255,255,0.07);
  --tg-line-2:       rgba(255,255,255,0.12);
  --tg-line-strong:  rgba(255,255,255,0.18);
  /* Text */
  --tg-text:         #ffffff;
  --tg-text-muted:   rgba(255,255,255,0.88);
  --tg-text-subtle:  rgba(255,255,255,0.55);
  --tg-text-invert:  #0d0d0d;
  /* Brand */
  --tg-brand:        var(--brand-primary, #DE0A26);
  --tg-brand-hover:  #b80820;
  --tg-brand-soft:   rgba(222,10,38,0.14);
  --tg-brand-ring:   rgba(222,10,38,0.22);
  /* Elevation + overlay scrim (theme-aware) */
  --tg-shadow-sm:    0 1px 2px rgba(0,0,0,.35);
  --tg-shadow-md:    0 6px 18px rgba(0,0,0,.45);
  --tg-shadow-lg:    0 10px 28px rgba(0,0,0,.55);
  --tg-shadow-xl:    0 24px 64px rgba(0,0,0,.75);
  --tg-scrim:        rgba(0,0,0,.65);
}
/* Light theme — values mirror /var/www/api-docs.tonegrid.pro/tonegrid-api.css
   so the app's light mode matches the api-docs light mode exactly.
   ToneGrid brand stays red; api-docs uses purple, that difference is intentional. */
/* Light surface scale: standard SaaS app — soft grey canvas with white
   cards floating on top (Linear / Stripe / Vercel pattern). Avoid the
   "white on white" wash by giving the page a subtle tinted background
   and reserving pure white for elevated cards / modals. */
html[data-theme="light"] {
  --tg-bg:           #ffffff;  /* white page canvas */
  --tg-surface:      #ffffff;  /* cards, panels, modals — white, separated by borders */
  --tg-surface-2:    #e7e9ee;  /* inputs, secondary cards, table stripes — clearly greyer */
  --tg-surface-3:    #d4d7dd;  /* hover states, stronger surfaces */
  --tg-surface-hi:   #c4c8d0;  /* pressed / strong hover */
  --tg-line:         #d4d7dd;  /* dividers, subtle borders */
  --tg-line-2:       #c4c8d0;  /* default control borders */
  --tg-line-strong:  #9aa0a8;  /* emphasized borders */
  --tg-text:         #000000;  /* pure black per Eric — high-contrast */
  --tg-text-muted:   #000000;  /* black — body, hints, sub-copy stay full contrast */
  --tg-text-subtle:  #1a1a1e;  /* near-black — placeholders, secondary meta */
  --tg-text-invert:  #ffffff;
  --tg-brand-soft:   rgba(222,10,38,0.08);
  --tg-brand-ring:   rgba(222,10,38,0.18);

  /* Legacy --color-* tokens (defined dark in tonegrid-base.css and used
     throughout tonegrid-components.css for .tabs, tables, empty-states,
     buttons, panels). The platform sweeper converted most hard-coded hex
     codes to --tg-* but the legacy variable set was never flipped for
     light mode — translucent-white borders/hovers vanish against the
     light canvas (e.g. the 1px stroke under .tabs on /artist/releases).
     Mirror the --tg-* light values so every legacy consumer flips too. */
  --color-bg:            #ffffff;
  --color-surface:       #ffffff;
  --color-surface-alt:   #e7e9ee;
  --color-text:          #000000;
  --color-text-muted:    #000000;
  --color-text-subtle:   #1a1a1e;
  --color-border:        rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.20);
  --color-hover-bg:      rgba(0, 0, 0, 0.05);
  /* Elevation + overlay scrim --- softer in light mode (slate-blue cast) */
  --tg-shadow-sm:    0 1px 2px rgba(15,23,42,.06);
  --tg-shadow-md:    0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --tg-shadow-lg:    0 16px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --tg-shadow-xl:    0 28px 64px rgba(15,23,42,.18), 0 8px 20px rgba(15,23,42,.08);
  --tg-scrim:        rgba(15,23,42,.45);
}

/* ──────────────────────────────────────────────────────────────────
   GLOBAL BODY ENFORCEMENT (font family + theme surface/text)
   Loaded on every super-admin + main-app page via includes/header.php.
   Sets background + text color from theme tokens so every page
   responds to the white/dark toggle, even pages that haven't been
   migrated to .tn-scope yet.
   ────────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--tg-bg);
  color: var(--tg-text);
  transition: background-color .2s ease, color .2s ease;
}
/* ─────────────────────────────────────────────────────────────────
   AEONIK FONT LOCK (global)
   Inheritance from body should already carry Aeonik down the tree,
   but third-party CSS (Tamagui, the styles-35FETTNT.css bundle,
   ad-hoc page styles) sometimes pins font-family on individual
   elements. The exhaustive tag list below makes Aeonik the
   non-negotiable default for every text-bearing element platform-wide,
   while leaving code/mono containers and icon-font classes alone.
   ───────────────────────────────────────────────────────────────── */
body,
body input, body button, body select, body textarea,
body table, body th, body td,
body p, body h1, body h2, body h3, body h4, body h5, body h6,
body div, body span, body a, body li, body ul, body ol,
body dl, body dt, body dd,
body label, body legend, body fieldset, body option, body optgroup,
body strong, body b, body em, body i, body u, body s,
body blockquote, body cite, body q, body figcaption, body figure,
body small, body sub, body sup, body mark,
body article, body section, body header, body footer,
body nav, body main, body aside, body details, body summary,
body address, body time {
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
/* Mono containers keep JetBrains Mono. */
body code, body pre, body kbd, body samp,
body .mono, body .tn-mono {
  font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
}
/* Icon-font classes are exempt — they need their own glyph fonts. */
.material-icons, .material-symbols-outlined,
.material-symbols-rounded, .material-symbols-sharp,
.fa, .fas, .far, .fal, .fad, .fab, .fak,
[class^="fa-"], [class*=" fa-"],
.bi, [class^="bi-"], [class*=" bi-"] {
  font-family: revert !important;
}

/* Native text containers inherit the theme text color. Specific
   inline colors (style="color:#xxx") still win on individual
   elements, and brand/status utility classes are unaffected. */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body dt, body dd,
body td, body th, body label, body figcaption, body blockquote {
  color: inherit;
}

/*
 * ToneGrid SaaS skin — global design system
 * ------------------------------------------------------------------
 * Token system + reusable components for the ToneGrid super-admin /
 * tenant apps. Inspired by Revelator (interspace.revelator.pro):
 *   - Surfaces: #0d0d0d body bg + 11-step grayscale taxonomy
 *   - Type: Aeonik @ 15px, line-height 1.65, ss01 + cv11 features
 *   - Radius: 12px default (form controls), 16px containers
 *   - Components: stepper, panel, panel-head, ctl, color-field,
 *     agreement-card, pills, buttons, hero crumbs
 *
 * Activation: scoped to `.tn-scope`. Add the class to a page wrapper
 * (e.g. `<main class="settings-page tn-scope">`) to opt the page
 * into the SaaS skin. The stylesheet has no effect on pages that
 * don't add the class.
 *
 * Loaded via super/includes/header.php on every super-admin page.
 */

.tn-scope {
  /* ── Surfaces (bound to global theme tokens so they flip with data-theme) ── */
  --tn-bg:           var(--tg-bg);
  --tn-surface:      var(--tg-surface);
  --tn-surface-2:    var(--tg-surface-2);
  --tn-surface-3:    var(--tg-surface-3);
  --tn-surface-hi:   var(--tg-surface-hi);

  /* ── Dividers + lines ── */
  --tn-line:         var(--tg-line);
  --tn-line-2:       var(--tg-line-2);
  --tn-line-strong:  var(--tg-line-strong);

  /* ── Text ── */
  --tn-text:         var(--tg-text);
  --tn-muted:        var(--tg-text-muted);
  --tn-muted-2:      var(--tg-text-subtle);

  /* ── ToneGrid brand (red) ── */
  --tn-brand:        var(--brand-primary, #DE0A26);
  --tn-brand-hover:  #b80820;
  --tn-brand-soft:   rgba(222,10,38,0.14);
  --tn-brand-ring:   rgba(222,10,38,0.22);

  /* ── Status ── */
  --tn-success:      #34d399;
  --tn-warn:         #fbbf24;
  --tn-danger:       #f87171;
  --tn-info:         #60a5fa;

  /* ── Radii (Revelator dominant 12px → form, 16px → containers) ── */
  --tn-radius:       16px;
  --tn-radius-sm:    12px;
  --tn-radius-xs:    8px;

  --tn-shadow:       0 1px 0 rgba(255,255,255,0.04) inset,
                     0 20px 60px -20px rgba(0,0,0,0.65);

  /* ── Type base ── (Revelator app shell: 14px / 16px, liga + kern features) */
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tn-text);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  font-feature-settings: 'liga', 'kern';
  -webkit-tap-highlight-color: transparent;
}
/* Inline-boot rule lifted verbatim from Revelator: tap highlight + box-sizing
   layer for everything inside the skin. */
.tn-scope * { -webkit-tap-highlight-color: transparent; }
@layer global { .tn-scope *, .tn-scope *::before, .tn-scope *::after { box-sizing: border-box; } }
.tn-scope, .tn-scope * {
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tn-scope code,
.tn-scope .hex,
.tn-scope .tn-mono,
.tn-scope .dns-badge {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
}

/* ── Quiet scrollbars + selection inside the skin ── */
.tn-scope ::-webkit-scrollbar { width: 10px; height: 10px; }
.tn-scope ::-webkit-scrollbar-track { background: transparent; }
.tn-scope ::-webkit-scrollbar-thumb {
  background: var(--tn-line-2); border-radius: 8px;
  border: 2px solid var(--tn-bg);
}
.tn-scope ::-webkit-scrollbar-thumb:hover { background: var(--tn-line-strong); }
.tn-scope ::selection { background: var(--tn-brand-ring); color: var(--tn-text); }

/* Theme-aware text default for semantic elements inside .tn-scope.
   Was hard-coded white pre-theme; now flips with data-theme. */
.tn-scope h1, .tn-scope h2, .tn-scope h3, .tn-scope h4, .tn-scope h5, .tn-scope h6 {
  color: var(--tg-text);
}
.tn-scope p, .tn-scope li, .tn-scope dt, .tn-scope dd,
.tn-scope td, .tn-scope th, .tn-scope label {
  color: var(--tg-text);
}
.tn-scope a:not(.btn):not(.tn-btn) { color: var(--tg-text); }
.tn-scope a:not(.btn):not(.tn-btn):hover { color: var(--tg-text-muted); }

/* ── Page surface for the standard super-admin <main> wrapper ── */
.tn-scope.settings-page,
main.settings-page.tn-scope {
  background:
    radial-gradient(1200px 600px at 50% -300px, rgba(222,10,38,0.08), transparent 60%),
    var(--tn-bg);
  min-height: 100vh;
}

/* ──────────────────────────────────────────────────────────────────
   HERO + CRUMBS
   ────────────────────────────────────────────────────────────────── */
.tn-scope .page-hero { margin: 12px 0 22px; }
.tn-scope .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--tn-muted-2);
  margin-bottom: 12px;
}
.tn-scope .crumbs a { color: var(--tn-muted); text-decoration: none; transition: color .15s; }
.tn-scope .crumbs a:hover { color: var(--tn-text); }
.tn-scope .crumbs .sep { opacity: .5; }
.tn-scope .crumbs .current { color: var(--tn-text); font-weight: 700; }

.tn-scope .hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tn-scope .hero-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--tg-text);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.tn-scope .hero-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--tn-muted);
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}
.tn-scope .hero-actions { display: flex; gap: 10px; align-items: center; }

/* ──────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────── */
.tn-scope .btn,
.tn-scope .tn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-sm);
  padding: 11px 18px;
  background: var(--tn-surface-2);
  color: var(--tn-text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
}
.tn-scope .btn:hover,
.tn-scope .tn-btn:hover {
  background: var(--tn-surface-3); border-color: rgba(255,255,255,0.16);
}
.tn-scope .btn:active,
.tn-scope .tn-btn:active { transform: translateY(1px); }
.tn-scope .btn:focus-visible,
.tn-scope .tn-btn:focus-visible {
  outline: 2px solid var(--tn-brand);
  outline-offset: 2px;
}
.tn-scope .btn-primary {
  background: var(--tn-brand);
  border-color: transparent;
  color: var(--tg-text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -6px rgba(222,10,38,0.55);
}
.tn-scope .btn-primary:hover {
  background: var(--tn-brand-hover);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px -8px rgba(222,10,38,0.7);
}
.tn-scope .btn-ghost { background: transparent; border-color: var(--tn-line-2); }
.tn-scope .btn-ghost:hover { background: var(--tn-surface-2); }
.tn-scope .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.tn-scope .btn .ico,
.tn-scope .tn-btn .ico { width: 14px; height: 14px; stroke-width: 2; }

/* ──────────────────────────────────────────────────────────────────
   CARDS / WIZARD CONTAINER
   ────────────────────────────────────────────────────────────────── */
.tn-scope .wizard,
.tn-scope .tn-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────
   STEPPER
   ────────────────────────────────────────────────────────────────── */
.tn-scope .steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 26px 40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
    var(--tn-surface);
  border-bottom: 1px solid var(--tn-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tn-scope .steps::-webkit-scrollbar { display: none; }

.tn-scope .step {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; gap: 12px;
  cursor: default;
  color: var(--tn-muted);
  font-size: 14px;
  font-weight: 700;
  position: relative;
  padding: 0;
  text-align: left;
  background: transparent;
  letter-spacing: -0.005em;
}
.tn-scope .step + .step::before {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--tn-line-2);
  margin: 0 14px;
  border-radius: 2px;
  transition: background .25s;
}
.tn-scope .step .step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tn-surface-3);
  border: 1px solid var(--tn-line-2);
  color: var(--tn-muted);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.tn-scope .step .step-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-scope .step.completed { color: var(--tn-text); cursor: pointer; }
.tn-scope .step.completed .step-circle {
  background: var(--tn-surface-3);
  border-color: rgba(34,197,94,0.4);
  color: var(--tn-success);
}
.tn-scope .step.completed + .step::before { background: rgba(34,197,94,0.4); }
.tn-scope .step.active { color: var(--tg-text); font-weight: 700; }
.tn-scope .step.active .step-circle {
  background: var(--tn-brand);
  border-color: var(--tn-brand);
  color: var(--tg-text);
  box-shadow: 0 0 0 5px var(--tn-brand-soft);
}
.tn-scope .step.completed:hover .step-circle { border-color: var(--tn-brand); }

/* ──────────────────────────────────────────────────────────────────
   PANELS (form sections)
   ────────────────────────────────────────────────────────────────── */
.tn-scope .panel {
  padding: 34px 44px 20px;
  /* NOT display:none by default — that was a wizard-stepper behavior that
     hid panels on EVERY tn-scope page (release-details has 4 panels:
     Overview/Tracks/Delivery/Audit, all invisible without this fix). The
     show/hide is now scoped to wizards (.wizard .panel) only. */
}
/* Wizard stepper pattern — panels are hidden until they receive .active.
   Used by /super/tenant-new. Other pages just use .panel as a layout class. */
.tn-scope .wizard .panel { display: none; animation: tn-panel-fade .25s ease; }
.tn-scope .wizard .panel.active { display: block; }
@keyframes tn-panel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.tn-scope .panel-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tn-line);
}
.tn-scope .panel-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-brand);
  margin-bottom: 8px;
}
.tn-scope .panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tg-text);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.tn-scope .panel-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--tn-muted);
  margin: 0;
  max-width: 760px;
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────
   FORM ROWS + LABELS
   ────────────────────────────────────────────────────────────────── */
.tn-scope .row {
  display: grid;
  grid-template-columns: minmax(240px, 26%) 1fr;
  gap: 40px;
  align-items: flex-start;
  margin: 22px 0;
}
.tn-scope .label {
  color: var(--tg-text);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.tn-scope .label .pill { margin-left: 8px; vertical-align: middle; }
.tn-scope .hint {
  color: var(--tn-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  margin-top: 6px;
}

/* ──────────────────────────────────────────────────────────────────
   CONTROLS
   ────────────────────────────────────────────────────────────────── */
.tn-scope .ctl {
  display: flex; align-items: center; gap: 10px;
  background: var(--tn-surface-2);
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-sm);
  padding: 13px 16px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tn-scope .ctl:hover { border-color: rgba(255,255,255,0.18); }
.tn-scope .ctl:focus-within {
  border-color: var(--tn-brand);
  background: var(--tn-surface-2);
  box-shadow: 0 0 0 3px var(--tn-brand-soft);
}
.tn-scope .ctl input,
.tn-scope .ctl select,
.tn-scope .ctl textarea {
  width: 100%;
  background: transparent;
  border: 0; outline: 0;
  color: var(--tn-text);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}
.tn-scope .ctl input::placeholder,
.tn-scope .ctl textarea::placeholder { color: var(--tn-muted-2); }
.tn-scope .ctl select {
  appearance: none;
  -webkit-appearance: none;
  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 fill='none' stroke='%239aa0aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 18px;
}
.tn-scope .ctl select option { background: var(--tn-surface); color: var(--tn-text); }
.tn-scope .ctl input[type="color"] {
  height: 32px; width: 44px;
  padding: 0;
  border: 0; border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.tn-scope .ctl input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tn-scope .ctl input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--tn-line-2); border-radius: 8px;
}

/* Color picker swatch + hex display */
.tn-scope .color-field {
  display: flex; align-items: center; gap: 12px;
  background: var(--tn-surface-2);
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-sm);
  padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.tn-scope .color-field:focus-within {
  border-color: var(--tn-brand);
  box-shadow: 0 0 0 3px var(--tn-brand-soft);
}
.tn-scope .color-field .hex {
  font-size: 13px;
  color: var(--tn-muted);
}

/* Pills / chips */
.tn-scope .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-scope .pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--tn-line-2);
  background: var(--tn-surface-3);
  color: var(--tg-text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tn-scope .pill.required {
  color: var(--tn-brand);
  border-color: rgba(222,10,38,0.3);
  background: var(--tn-brand-soft);
}
.tn-scope .pill.optional { color: rgba(255,255,255,0.65); }

.tn-scope .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ──────────────────────────────────────────────────────────────────
   AGREEMENT CARD (compliance checkbox pattern)
   ────────────────────────────────────────────────────────────────── */
.tn-scope .agree-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--tn-surface-2);
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-sm);
  padding: 16px;
  color: var(--tn-text);
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tn-scope .agree-card:hover { border-color: rgba(255,255,255,0.18); }
.tn-scope .agree-card input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--tn-line-2);
  background: var(--tn-surface);
  cursor: pointer; position: relative; flex-shrink: 0; margin-top: 1px;
  transition: background .15s, border-color .15s;
}
.tn-scope .agree-card input[type="checkbox"]:checked {
  background: var(--tn-brand); border-color: var(--tn-brand);
}
.tn-scope .agree-card input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ──────────────────────────────────────────────────────────────────
   FOOTER (wizard / form footer)
   ────────────────────────────────────────────────────────────────── */
.tn-scope .footer,
.tn-scope .tn-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border-top: 1px solid var(--tn-line);
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,0.015)),
    var(--tn-surface);
}
.tn-scope .footer-meta {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; font-weight: 400; color: var(--tn-muted);
}
.tn-scope .footer-meta strong {
  color: var(--tg-text); font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
}
.tn-scope .footer-actions { display: flex; gap: 10px; align-items: center; }

/* ──────────────────────────────────────────────────────────────────
   ERRORS
   ────────────────────────────────────────────────────────────────── */
.tn-scope .errors {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fecaca;
  border-radius: var(--tn-radius-sm);
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
}
.tn-scope .errors strong { color: var(--tg-text); }
.tn-scope .errors ul { margin: 6px 0 0 18px; padding: 0; }

/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .tn-scope .row { grid-template-columns: 1fr; gap: 10px; }
  .tn-scope .grid2 { grid-template-columns: 1fr; }
  .tn-scope .panel { padding: 24px 18px 10px; }
  .tn-scope .steps { padding: 18px 18px; }
  .tn-scope .step .step-label { display: none; }
  .tn-scope .step + .step::before { margin: 0 8px; }
  .tn-scope .footer,
  .tn-scope .tn-footer { padding: 16px 18px; }
}

/* ──────────────────────────────────────────────────────────────────
   tn-select — searchable dark dropdown (auto-enhanced from <select>)
   Activated platform-wide by tonegrid-select.js. Lives outside
   .tn-scope so it works on every page, including ones that haven't
   opted into the skin.
   ────────────────────────────────────────────────────────────────── */
.tn-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.tn-select {
  position: relative;
  display: block;
  width: 100%;
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
}
.tn-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tg-surface);
  color: var(--tg-text);
  border: 1px solid var(--tg-line-2);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.tn-select-trigger:hover { border-color: var(--tg-line-strong); }
.tn-select.is-open .tn-select-trigger {
  border-color: var(--tg-brand);
  background: var(--tg-surface-2);
  box-shadow: 0 0 0 3px var(--tg-brand-ring);
}
.tn-select-trigger:focus-visible {
  outline: 2px solid var(--tg-brand);
  outline-offset: 2px;
}
.tn-select.is-disabled .tn-select-trigger,
.tn-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tn-select-value {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-select-value.is-placeholder {
  color: var(--tg-text-subtle);
  font-weight: 400;
}
.tn-select-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--tg-text-muted);
  flex-shrink: 0;
  transition: transform .2s, color .15s;
}
.tn-select.is-open .tn-select-chev {
  transform: rotate(180deg);
  color: var(--tg-text);
}
.tn-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 10050; /* above .tg-modal-overlay (9999) so the panel is not hidden when a select opens inside a modal */
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.45), 0 4px 16px -4px rgba(0,0,0,0.18);
  overflow: hidden;
  animation: tn-select-pop .15s ease-out;
}
@keyframes tn-select-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tn-select-search-wrap {
  position: relative;
  border-bottom: 1px solid var(--tg-line);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tg-text-subtle);
}
.tn-select-search-wrap svg { flex-shrink: 0; width: 14px; height: 14px; }
.tn-select-search {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--tg-text);
  font: inherit;
  font-size: 13px;
  padding: 6px 0;
}
.tn-select-search::placeholder { color: var(--tg-text-subtle); }
.tn-select-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.tn-select-list::-webkit-scrollbar { width: 6px; }
.tn-select-list::-webkit-scrollbar-track { background: transparent; }
.tn-select-list::-webkit-scrollbar-thumb {
  background: var(--tg-line-2); border-radius: 6px;
}
.tn-select-list::-webkit-scrollbar-thumb:hover { background: var(--tg-line-strong); }
.tn-select-item {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.tn-select-item:hover,
.tn-select-item.is-focused {
  background: var(--tg-surface-2);
}
.tn-select-item.is-selected {
  background: var(--tg-surface-3);
  font-weight: 700;
}
.tn-select-item.is-disabled {
  opacity: 0.4; cursor: not-allowed;
}
.tn-select-empty {
  padding: 14px 12px;
  text-align: center;
  color: var(--tg-text-subtle);
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────
   Skeleton loading utilities
   ──────────────────────────────────────────────────────────────────
   .tn-skeleton          — generic gray pulsing block
   .tn-skeleton-text     — single line of text-height placeholder
   .tn-skeleton-circle   — circular (avatar) placeholder
   .tn-skeleton-button   — button-sized rounded placeholder
   .tn-skeleton-card     — card-sized block placeholder
   ────────────────────────────────────────────────────────────────── */
@keyframes tn-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.tn-skeleton,
.tn-skeleton-text,
.tn-skeleton-circle,
.tn-skeleton-button,
.tn-skeleton-card {
  display: block;
  background:
    linear-gradient(90deg,
      var(--tg-surface-2) 0%,
      var(--tg-surface-3) 50%,
      var(--tg-surface-2) 100%);
  background-size: 200% 100%;
  animation: tn-shimmer 1.6s linear infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
  border: 0 !important;
}
.tn-skeleton-text {
  height: 14px;
  width: 100%;
  margin: 6px 0;
  border-radius: 4px;
}
.tn-skeleton-text.short { width: 40%; }
.tn-skeleton-text.medium { width: 65%; }
.tn-skeleton-text.long { width: 100%; }
.tn-skeleton-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
}
.tn-skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: 10px;
}
.tn-skeleton-card {
  width: 100%;
  height: 160px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .tn-skeleton, .tn-skeleton-text, .tn-skeleton-circle,
  .tn-skeleton-button, .tn-skeleton-card { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Page-level loading curtain — applied to <html> by
   tonegrid-skeleton.js before first paint, removed on
   DOMContentLoaded. Hides the actual page content and shows a
   minimal full-screen shimmer until the DOM is parsed.
   ────────────────────────────────────────────────────────────────── */
html.tn-loading body { overflow: hidden; }
html.tn-loading body > *:not(.tn-loading-curtain) {
  visibility: hidden !important;
}
html.tn-loading::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--tg-bg);
  pointer-events: none;
  transition: opacity .35s ease;
}
/* Bar-chart preloader (matches the login/signup `#page-loader`).
   Built entirely from CSS gradients animated via background-size/position,
   so no markup is needed — :after is enough. */
html.tn-loading::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  z-index: 100000;
  --c:  linear-gradient(#fff 0 0);
  --r1: radial-gradient(farthest-side at bottom, #fff 93%, #0000);
  --r2: radial-gradient(farthest-side at top,    #fff 93%, #0000);
  background:
    var(--c), var(--r1), var(--r2),
    var(--c), var(--r1), var(--r2),
    var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: tn-page-loader 1s infinite alternate;
  pointer-events: none;
  transition: opacity .35s ease;
}
/* Light-mode: bars need to be dark to show against the off-white bg */
html[data-theme="light"].tn-loading::after {
  --c:  linear-gradient(#0d0d10 0 0);
  --r1: radial-gradient(farthest-side at bottom, #0d0d10 93%, #0000);
  --r2: radial-gradient(farthest-side at top,    #0d0d10 93%, #0000);
}
/* Fade-out when the page is ready */
html.tn-loaded::before,
html.tn-loaded::after { opacity: 0; }
@keyframes tn-page-loader {
  0%,25% {
    background-size:
      8px 0,   8px 4px, 8px 4px,
      8px 0,   8px 4px, 8px 4px,
      8px 0,   8px 4px, 8px 4px;
    background-position:
      0   50%, 0   calc(50% - 2px), 0   calc(50% + 2px),
      50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px),
      100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
  }
  50% {
    background-size:
      8px 100%, 8px 4px, 8px 4px,
      8px 0,    8px 4px, 8px 4px,
      8px 0,    8px 4px, 8px 4px;
    background-position:
      0   50%, 0   calc(0%   - 2px), 0   calc(100% + 2px),
      50% 50%, 50% calc(50% - 2px),  50% calc(50% + 2px),
      100% 50%,100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  75% {
    background-size:
      8px 100%, 8px 4px, 8px 4px,
      8px 100%, 8px 4px, 8px 4px,
      8px 0,    8px 4px, 8px 4px;
    background-position:
      0   50%, 0   calc(0%   - 2px), 0   calc(100% + 2px),
      50% 50%, 50% calc(0%   - 2px), 50% calc(100% + 2px),
      100% 50%,100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  95%,100% {
    background-size:
      8px 100%, 8px 4px, 8px 4px,
      8px 100%, 8px 4px, 8px 4px,
      8px 100%, 8px 4px, 8px 4px;
    background-position:
      0   50%, 0   calc(0%   - 2px), 0   calc(100% + 2px),
      50% 50%, 50% calc(0%   - 2px), 50% calc(100% + 2px),
      100% 50%,100% calc(0%   - 2px),100% calc(100% + 2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.tn-loading::after { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   tg-theme-toggle — universal light/dark switcher button
   Dropped into the global header on every page. Sun / moon icons
   swap based on the current theme. JS handler: tonegrid-theme.js.
   ────────────────────────────────────────────────────────────────── */
.tg-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 8px 0 0;
  background: transparent;
  border: 1px solid var(--tg-line-2);
  border-radius: 10px;
  color: var(--tg-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.tg-theme-toggle:hover {
  background: var(--tg-surface-2);
  border-color: var(--tg-line-strong);
}
.tg-theme-toggle:focus-visible {
  outline: 2px solid var(--tg-brand);
  outline-offset: 2px;
}
.tg-theme-toggle svg {
  width: 18px; height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the moon (switch-to-dark) in light mode, the sun (switch-to-light) in dark mode */
.tg-theme-toggle .icon-sun  { display: none; }
.tg-theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .tg-theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .tg-theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .tg-theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .tg-theme-toggle .icon-sun  { display: block; }

/* ──────────────────────────────────────────────────────────────────
   Nav icon theme-flip
   ──────────────────────────────────────────────────────────────────
   The platform uses icons8 PNGs whose colour is baked into the URL
   (e.g. /FFFFFF/home.png). In dark mode those white pixels read fine;
   in light mode they vanish against the white surface. We can't swap
   the URLs without touching every <img> tag, so we use a targeted
   CSS filter: any <img> whose src contains /FFFFFF/, /ffffff/, FFFFFF.,
   or ffffff. gets `filter: invert(1)` in light mode — flipping every
   white pixel to black while leaving truly white-on-coloured icons
   alone (their bg is part of the image).

   Targeted by URL pattern, not by class, so it catches header nav,
   sidebar nav, mobile nav, dashboard cards, anywhere icons8/FFFFFF
   PNGs appear without per-page edits.
   ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] img[src*="/FFFFFF/"],
html[data-theme="light"] img[src*="/ffffff/"],
html[data-theme="light"] img[src*="FFFFFF."],
html[data-theme="light"] img[src*="ffffff."],
/* near-white shades used by icons8 (EBEBEB, E0E0E0, F5F5F5, etc.) */
html[data-theme="light"] img[src*="/EBEBEB/"],
html[data-theme="light"] img[src*="/ebebeb/"],
html[data-theme="light"] img[src*="/E0E0E0/"],
html[data-theme="light"] img[src*="/e0e0e0/"],
html[data-theme="light"] img[src*="/F5F5F5/"],
html[data-theme="light"] img[src*="/f5f5f5/"],
html[data-theme="light"] img[src*="/FAFAFA/"],
html[data-theme="light"] img[src*="/fafafa/"],
html[data-theme="light"] img[src*="/EEEEEE/"],
html[data-theme="light"] img[src*="/eeeeee/"],
html[data-theme="light"] img[src*="/E8EAED/"],
html[data-theme="light"] img[src*="/e8eaed/"] {
  filter: invert(1) brightness(0);  /* pure black */
}

/* Also catch SVGs/icons rendered via background-image url() pattern */
html[data-theme="light"] [style*="/FFFFFF/"],
html[data-theme="light"] [style*="/ffffff/"] {
  /* Don't invert wholesale — too risky for backgrounds. Leave for now;
     can address per-element if a specific spot is missed. */
}

/* ──────────────────────────────────────────────────────────────────
   LIGHT MODE POLISH — borders, shadows, elevation
   ──────────────────────────────────────────────────────────────────
   Dark mode hides flat layouts because the surfaces have natural
   contrast and brand glow. Light mode needs explicit borders +
   subtle shadows to give cards/panels presence on the grey canvas.

   Strategy: target the dominant card-like classes (.card, .panel,
   .stat-card, .kpi-card, .create-box, .release-card, .wizard,
   .welcome) and any element using --tg-surface as background.
   ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .release-card,
html[data-theme="light"] .wizard,
html[data-theme="light"] .widget,
html[data-theme="light"] .tile,
html[data-theme="light"] .welcome,
html[data-theme="light"] .welcome-card,
html[data-theme="light"] .metric,
html[data-theme="light"] .module,
html[data-theme="light"] .box,
html[data-theme="light"] .tn-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  border-radius: 12px;
}
/* Subtle hover lift for interactive tiles */
html[data-theme="light"] .release-card:hover,
html[data-theme="light"] .tile:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .kpi-card:hover {
  border-color: var(--tg-line-2);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* ──────────────────────────────────────────────────────────────────
   LIGHT MODE — neutral text starts black. Components own semantic
   colors and the paired foregrounds of brand fills and artwork.
   Inheritance keeps icons and nested labels consistent with their
   container instead of overriding every descendant independently.
   ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --tg-text-subtle: #000000;
}
html[data-theme="light"] body {
  color: var(--tg-text);
}

/* Dashboard "Create Release" / "Music Video" cards keep their brand
   gradient colours in both themes — they are CTAs, not surface cards.
   Force white text + white button border regardless of theme so the
   content stays legible on the blue/purple backgrounds. */
.create-box,
html[data-theme="light"] .create-box,
html[data-theme="dark"] .create-box {
  color: #ffffff !important;
  border: 0;
  box-shadow: 0 6px 18px rgba(47, 47, 239, 0.18);
}
.create-box h4,
html[data-theme="light"] .create-box h4,
.create-box button,
html[data-theme="light"] .create-box button {
  color: #ffffff !important;
}
html[data-theme="light"] .create-box button,
.create-box button {
  border-color: #ffffff !important;
}
html[data-theme="light"] .create-box:hover,
.create-box:hover {
  box-shadow: 0 10px 24px rgba(47, 47, 239, 0.25);
}

/* Form controls — give every input/select/textarea a visible border in
   light mode. Dark mode hides flat-bordered inputs via the surface tint,
   but on a grey canvas they need an outline to be discoverable.
   Excluded: inputs already wrapped in a styled container (.search-bar,
   .input-wrap, .ctl, .dsp-toolbar, .tn-select-search) — those have their
   own visual treatment and adding a second border looks wrong. */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(.tn-select-search):not(.dsp-search):not(.tn-skip-style),
html[data-theme="light"] select:not(.tn-select-native),
html[data-theme="light"] textarea {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  color: var(--tg-text);
}
/* Cancel the border for inputs already inside a styled wrapper */
html[data-theme="light"] .search input,
html[data-theme="light"] .search-bar input,
html[data-theme="light"] .input-wrap input,
html[data-theme="light"] .ctl input,
html[data-theme="light"] .ctl select,
html[data-theme="light"] .ctl textarea,
html[data-theme="light"] .color-field input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3px var(--tg-brand-ring);
  outline: 0;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--tg-text-subtle); }

/* Search-bar wrapper polish — theme-aware container with proper
   focus-within ring, larger search icon, comfortable padding.
   Targets the legacy .search-bar pattern used across the artist /
   admin / super pages. */
.search-bar {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within {
  border-color: var(--tg-brand);
  box-shadow: 0 0 0 3px var(--tg-brand-ring);
}
.search-bar svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--tg-text-subtle) !important;
  flex-shrink: 0;
}
.search-bar input {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--tg-text) !important;
  font: inherit;
  font-size: 14px;
  margin-left: 0 !important;
  width: 100%;
  padding: 0 !important;
}
.search-bar input::placeholder { color: var(--tg-text-subtle); }
html[data-theme="dark"] .search-bar {
  background: var(--tg-surface-2);
  border-color: var(--tg-line);
}

/* Tables — light borders + subtle row stripe so dense data doesn't blur */
html[data-theme="light"] table {
  border-collapse: collapse;
  background: var(--tg-surface);
}
html[data-theme="light"] table th,
html[data-theme="light"] table td {
  border-bottom: 1px solid var(--tg-line);
}
html[data-theme="light"] table thead th {
  background: var(--tg-surface-2);
  border-bottom: 1px solid var(--tg-line-2);
  color: var(--tg-text-muted);
  font-weight: 700;
}
html[data-theme="light"] table tbody tr:hover {
  background: var(--tg-surface-2);
}

/* Buttons — give secondary/ghost buttons a visible border in light mode */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.tg-theme-toggle),
html[data-theme="light"] button.btn:not(.btn-primary):not(.btn-danger),
html[data-theme="light"] .tn-btn:not(.btn-primary) {
  border: 1px solid var(--tg-line-2);
  background: var(--tg-surface);
  color: var(--tg-text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.tg-theme-toggle):hover,
html[data-theme="light"] button.btn:not(.btn-primary):not(.btn-danger):hover,
html[data-theme="light"] .tn-btn:not(.btn-primary):hover {
  background: var(--tg-surface-2);
  border-color: var(--tg-line-strong);
}

/* Dropdown / select chrome */
html[data-theme="light"] .tn-select-trigger {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
html[data-theme="light"] .tn-select-panel {
  box-shadow: 0 12px 32px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
}

/* Header + sidebar chrome — give them a slightly bolder bottom/right
   border so the separation from the page canvas reads clearly (was
   1px, too thin on hi-DPI; Eric asked for "a lil bit bolder"). */
.header, header.header { border-bottom-width: 2px; border-bottom-style: solid; }
.sidebar, aside.sidebar, nav.sidebar { border-right-width: 2px; border-right-style: solid; }
html[data-theme="dark"] .header,
html[data-theme="dark"] header.header { border-bottom-color: var(--tg-line); }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] aside.sidebar,
html[data-theme="dark"] nav.sidebar { border-right-color: var(--tg-line); }

html[data-theme="light"] .header,
html[data-theme="light"] header.header {
  background: var(--tg-surface);
  border-bottom: 2px solid var(--tg-line);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] aside.sidebar,
html[data-theme="light"] nav.sidebar {
  background: var(--tg-surface);
  border-right: 2px solid var(--tg-line);
}

/* Modal / overlay surfaces */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-content,
html[data-theme="light"] dialog {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  box-shadow: 0 24px 48px -12px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.08);
}

/* Status badges/pills — semi-transparent backgrounds so brand red etc.
   read on the white surface */
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .chip {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line);
  color: var(--tg-text);
}

/* Divider rules + horizontal lines */
html[data-theme="light"] hr,
html[data-theme="light"] .divider {
  border: 0;
  border-top: 1px solid var(--tg-line);
  margin: 16px 0;
}

/* Code / pre blocks */
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] kbd {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-line);
  color: var(--tg-text);
}

/* The hero glow that the .tn-scope adds is too red on a light canvas —
   tone it down */
html[data-theme="light"] .tn-scope.settings-page,
html[data-theme="light"] main.settings-page.tn-scope {
  background:
    radial-gradient(1200px 600px at 50% -300px, rgba(222,10,38,0.04), transparent 60%),
    var(--tg-bg);
}

/* ──────────────────────────────────────────────────────────────────
   Active nav state — grey-dark pill + dark icon
   ──────────────────────────────────────────────────────────────────
   Targets the sidebar / mobile-nav active link. The container gets a
   surface-3 background (sits visibly above the page) with rounded
   corners and a brand-red left edge. The icon flips to dark for
   contrast against the lighter active pill.

   Light mode: white nav surface + grey active pill + black icon.
   Dark mode:  dark nav surface + lighter dark active pill + already-white icon.
   ────────────────────────────────────────────────────────────────── */

/* Active pill — both themes */
.sidebar nav a.active,
.sidebar a.active,
.mobile-nav a.active {
  background: var(--tg-surface-3);
  border-radius: 8px;
  position: relative;
}

/* Active label — bolder, full-contrast text */
.sidebar nav a.active span,
.sidebar a.active span,
.mobile-nav a.active span {
  color: var(--tg-text);
  font-weight: 700;
}

/* Active icon — in LIGHT mode the global /FFFFFF/ invert already
   makes nav icons dark. On the active pill specifically (any theme),
   force the icon dark so it reads as the "selected" state on the
   lighter surface-3 fill. */
html[data-theme="light"] .sidebar nav a.active img,
html[data-theme="light"] .sidebar a.active img,
html[data-theme="light"] .mobile-nav a.active img {
  filter: invert(1) brightness(0);   /* pure black */
}

/* Dark mode: active icon stays white, but pill bg differentiates it.
   Add a subtle brightening so the icon contrasts against the lighter
   surface-3 (#1f1f25 vs #131316 surface). */
html[data-theme="dark"] .sidebar nav a.active img,
html[data-theme="dark"] .sidebar a.active img,
html[data-theme="dark"] .mobile-nav a.active img {
  filter: brightness(1.15);
}

/* Hover state (non-active items) — quiet lift */
.sidebar nav a:not(.active):hover,
.sidebar a:not(.active):hover,
.mobile-nav a:not(.active):hover {
  background: var(--tg-surface-2);
  border-radius: 8px;
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE NAV — bottom-sheet pattern (matches Eric's mockup)
   ──────────────────────────────────────────────────────────────────
   On mobile (≤768px), the .mobile-nav becomes a bottom sheet that
   slides up from below with a backdrop. 2-column tile grid, brand
   header, sectioned by "Where to?" / "Resources" eyebrows, footer pill.

   Desktop (>768px): mobile nav is hidden, sidebar handles everything.
   ────────────────────────────────────────────────────────────────── */

/* Backdrop */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  /* No backdrop-filter: causes ghost double-render on iOS Safari and
     with parent transforms. Solid translucent dim instead. */
  background: rgba(0,0,0,0.62);
  opacity: 0;
  pointer-events: none;
  z-index: 9990;
  transition: opacity .25s ease;
}
body.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Sheet container (mobile only) */
@media (max-width: 768px) {
  .mobile-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 88vh;
    width: 100% !important;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    z-index: 9991;
    background: var(--tg-bg);
    border-top: 1px solid var(--tg-line);
    border-radius: 20px 20px 0 0;
    /* Shadow only when open — see comment in .account-sheet above. */
    box-shadow: none;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }
  body.mobile-nav-open .mobile-nav {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 -20px 50px -10px rgba(0,0,0,0.45);
  }
  body.mobile-nav-open { overflow: hidden; }
}
/* Desktop: bottom sheet is hidden (sidebar handles nav) */
@media (min-width: 769px) {
  .mobile-nav,
  .mobile-nav-backdrop { display: none !important; }
}

/* All mobile-nav children use !important to beat the legacy
   .mobile-nav a/img rules in /css/style.css (padding:15px, img:20×20). */

/* Drag handle pill — sits at the very top, centered, alone */
nav.mobile-nav .mn-handle {
  display: block !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--tg-line-strong) !important;
  margin: 10px auto 4px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Header: workspace logo + name on left, close X on right */
nav.mobile-nav .mn-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 20px 18px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
nav.mobile-nav .mn-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
nav.mobile-nav .mn-logo {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: var(--tg-surface-2) !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.mobile-nav .mn-logo-fallback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tg-brand) !important;
  color: var(--brand-button-text, #fff) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}
nav.mobile-nav .mn-workspace {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--tg-text) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.mobile-nav .mn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--tg-surface-2) !important;
  color: var(--tg-text) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background .15s !important;
}
nav.mobile-nav .mn-close:hover { background: var(--tg-surface-3) !important; }
nav.mobile-nav .mn-close svg { width: 18px !important; height: 18px !important; }

/* Scrollable middle region */
nav.mobile-nav .mn-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 20px !important;
  margin: 0 !important;
}
nav.mobile-nav .mn-scroll::-webkit-scrollbar { width: 0; }

/* Section eyebrow */
nav.mobile-nav .mn-section-title {
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--tg-text-subtle) !important;
  margin: 18px 0 10px !important;
  padding: 0 !important;
}
nav.mobile-nav .mn-section-title:first-child { margin-top: 4px !important; }

/* 2-col tile grid */
nav.mobile-nav .mn-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Tile = nav card */
nav.mobile-nav .mn-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px !important;
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-line) !important;
  border-radius: 14px !important;
  color: var(--tg-text) !important;
  text-decoration: none !important;
  min-height: 96px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s !important;
}
nav.mobile-nav .mn-tile:hover {
  background: var(--tg-surface-2) !important;
  border-color: var(--tg-line-2) !important;
}
nav.mobile-nav .mn-tile:active { transform: scale(0.98) !important; }
nav.mobile-nav .mn-tile.active {
  background: var(--tg-surface-3) !important;
  border-color: var(--tg-line-strong) !important;
}
nav.mobile-nav .mn-tile-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: var(--tg-surface-3) !important;
  color: var(--tg-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.mobile-nav .mn-tile-icon svg {
  width: 18px !important;
  height: 18px !important;
}
nav.mobile-nav .mn-tile-label {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tg-text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer pill — full-width centered */
/* CRITICAL: legacy style.css sets .mobile-nav { align-items: flex-start }
   which makes flex column children shrink-fit horizontally. Override so
   header, scroll region, and footer all stretch to full sheet width. */
nav.mobile-nav {
  align-items: stretch !important;
}

nav.mobile-nav .mn-footer {
  display: block !important;
  width: 100% !important;
  padding: 14px 16px max(20px, env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  border-top: 1px solid var(--tg-line) !important;
  background: var(--tg-bg) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
/* Full-width sleek pill — tighter padding + softer shadow + cleaner type */
nav.mobile-nav .mn-pill-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 20px !important;
  background: var(--tg-surface-2) !important;
  border: 1px solid var(--tg-line) !important;
  border-radius: 999px !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
nav.mobile-nav .mn-pill-btn:hover {
  background: var(--tg-surface-3) !important;
  border-color: var(--tg-line-2) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.08) !important;
}
nav.mobile-nav .mn-pill-btn:active {
  transform: scale(0.99);
}

/* Section with a single tile becomes a single-column grid so it fills
   the row instead of looking orphaned in a 2-col grid. */
nav.mobile-nav .mn-grid:has(.mn-tile:only-child) {
  grid-template-columns: 1fr !important;
}

/* Hide legacy children that the original markup used to render */
nav.mobile-nav > img.logo,
nav.mobile-nav > a:not(.mn-tile):not(.mn-pill-btn),
nav.mobile-nav .collapse-icon { display: none !important; }

/* ──────────────────────────────────────────────────────────────────
   Header — hide the user greeting + email on mobile
   ──────────────────────────────────────────────────────────────────
   The .user-info block holds [avatar] + [.details (name + email)] +
   the dropdown. On mobile, only the avatar (+ theme toggle next to it)
   should show — collapse the .details wrapper.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header .user-info .details,
  header .user-info .details,
  .user-info .details { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   Top-bar theme toggle — HIDDEN (theme switch moved to Appearance
   row inside the account sheet)
   ────────────────────────────────────────────────────────────────── */
.tg-theme-toggle { display: none !important; }

/* ──────────────────────────────────────────────────────────────────
   Account sheet — bottom-sheet (mobile) / popover (desktop)
   ────────────────────────────────────────────────────────────────── */
.account-sheet-backdrop {
  position: fixed; inset: 0;
  /* No backdrop-filter — causes ghost double-render on iOS Safari and
     conflicts with sheet's transform. Solid translucent dim instead. */
  background: rgba(0,0,0,0.62);
  opacity: 0; pointer-events: none;
  z-index: 9990;
  transition: opacity .25s ease;
}
body.account-sheet-open .account-sheet-backdrop { opacity: 1; pointer-events: auto; }

.account-sheet {
  position: fixed;
  z-index: 9991;
  background: var(--tg-bg);
  border: 1px solid var(--tg-line);
  display: flex !important;
  flex-direction: column;
  /* IMPORTANT: not hidden — the sub-picker popups need to overflow. */
  overflow: visible;
  /* NO box-shadow here — when the sheet is translated off-screen (closed
     state), the upward shadow would still render and produce a dark band
     at the bottom of every page. Shadow only applied when open via
     body.account-sheet-open below. */
  box-shadow: none;
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, sans-serif;
  /* When closed, fully out of compositor / no shadow */
  visibility: hidden;
  pointer-events: none;
}
body.account-sheet-open .account-sheet {
  visibility: visible;
  pointer-events: auto;
  box-shadow: 0 -20px 50px -10px rgba(0,0,0,0.45);
}
/* Inner scrollable region for the rows so the sheet still scrolls if
   long without clipping the picker popups. */
.account-sheet .as-rows {
  position: relative;     /* anchor for the absolute pickers */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
}

/* Mobile: bottom sheet */
@media (max-width: 1023px) {
  .account-sheet {
    left: 0; right: 0; bottom: 0;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  body.account-sheet-open .account-sheet { transform: translateY(0); }
  body.account-sheet-open { overflow: hidden; }
  .account-sheet .as-handle {
    display: block;
    width: 36px; height: 4px;
    border-radius: 2px;
    background: var(--tg-line-strong);
    margin: 10px auto 6px;
    flex-shrink: 0;
  }
}

/* Desktop: popover anchored top-right */
@media (min-width: 1024px) {
  .account-sheet-backdrop { display: none !important; }
  .account-sheet {
    top: 60px; right: 12px;
    width: 300px;
    max-height: 80vh;
    border-radius: 14px;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.45);
    opacity: 0; transform: translateY(-6px) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
  }
  body.account-sheet-open .account-sheet {
    opacity: 1; transform: none; pointer-events: auto;
  }
  .account-sheet .as-handle { display: none; }
}
.account-sheet:not(.show) { /* default: hidden via transform/opacity above */ }

/* User card — elevated sub-panel at the top of the sheet containing
   avatar + identity. Stripe/Linear/Vercel pattern. */
.account-sheet .as-user-card {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 10px 6px;
  padding: 10px 12px;
  background: var(--tg-surface-2);
  border-radius: 10px;
  flex-shrink: 0;
}
.account-sheet .as-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #d4a017;
  color: #fff; font-weight: 800; font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.account-sheet .as-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-sheet .as-identity { flex: 1; min-width: 0; }
.account-sheet .as-email {
  font-size: 13px; font-weight: 700;
  color: var(--tg-text);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 1px;
}
.account-sheet .as-sub {
  font-size: 12px;
  color: var(--tg-text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rows — flat list, no icons */
.account-sheet .as-rows {
  padding: 2px 10px;
  flex-shrink: 0;
}
.account-sheet .as-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--tg-text);
  font: inherit; font-size: 13px; font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.account-sheet .as-row:hover { background: var(--tg-surface-2); }
.account-sheet .as-row-label { flex: 1; color: var(--tg-text); }
.account-sheet .as-row-value {
  font-weight: 500; color: var(--tg-text-subtle); font-size: 12px;
}
.account-sheet .as-row-chev {
  color: var(--tg-text-subtle);
  flex-shrink: 0;
}

/* Divider above Sign Out */
.account-sheet .as-divider {
  height: 1px;
  background: var(--tg-line);
  margin: 4px 14px;
  flex-shrink: 0;
}

/* Sign Out row — same flat style as other rows, with safe-area padding
   so it doesn't sit under the home indicator on iPhone. */
.account-sheet .as-signout-row {
  margin: 2px 10px max(10px, env(safe-area-inset-bottom));
}

/* ── Sub-picker (Appearance / Language) — floating panel ─────── */
/* The JS moves pickers OUT of .account-sheet into <body> at init time
   so they aren't clipped by sheet overflow / transform stacking. So
   selectors here are NOT scoped to .account-sheet — they target the
   picker wherever it lives. */
.as-picker {
  position: fixed;
  display: none !important;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line-2);
  border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.18);
  padding: 6px;
  min-width: 220px;
  z-index: 10001;
  overflow-y: auto;
  max-height: 280px;
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, sans-serif;
  /* JS sets top/left/width on open */
  left: 12px;
  right: 12px;
}
.as-picker.show {
  display: block !important;
  animation: tn-picker-pop .15s ease-out;
}
@keyframes tn-picker-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.as-picker-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--tg-text);
  font: inherit; font-size: 14px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.as-picker-item:hover { background: var(--tg-surface-2); }
.as-picker-item .as-picker-check {
  display: none;
  color: #fff;
  background: #22c55e;
  width: 20px; height: 20px;
  padding: 4px;
  border-radius: 50%;
}
.as-picker-item.is-selected {
  background: var(--tg-surface-2);
}
.as-picker-item.is-selected .as-picker-check {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────
   Header layout — menu on the left, avatar on the right (all roles)
   ──────────────────────────────────────────────────────────────────
   Locks the order: hamburger menu first, flexible spacer, then the
   avatar trigger last. Applies to both main app + super admin headers.
   ────────────────────────────────────────────────────────────────── */
.header,
header.header {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;   /* override any per-page row-reverse */
  gap: 8px;
}
.header .mobile-menu-btn,
header.header .mobile-menu-btn {
  order: -10 !important;
  margin-right: auto !important;
}
.header .spacer,
header.header .spacer {
  flex: 1 1 auto !important;
  order: -5 !important;
}
.header .user-info,
header.header .user-info {
  order: 10 !important;
  margin-left: auto !important;
}
.header .lang-switch,
header.header .lang-switch { order: 5 !important; }

/* Strip browser-default <button> chrome on header bar buttons. Pages
   that don't include meta.php (royalties, videos, etc.) miss the
   tonegrid-base.css button reset — without this lock, the
   <button class="user-info"> and the hamburger render with the OS
   button gradient, which reads as a "black box" behind the avatar
   in light mode. */
.header button,
header.header button {
  background: transparent !important;
  border: none !important;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.header .user-info,
header.header .user-info,
.header .mobile-menu-btn,
header.header .mobile-menu-btn {
  padding: 0 !important;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.header .user-info:focus-visible,
header.header .user-info:focus-visible {
  outline: 2px solid var(--tg-brand-ring);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Avatar — keep the green pad from style.css (the standard look)
   but always paint the tenant brand-red ring around it. Pages that
   skip meta.php (royalties, videos, etc.) miss tonegrid-components.css
   and therefore lose the `border: 2px solid var(--color-primary)`
   that gives every other page its red stroke. The skin reinstates it
   here so the ring is universal. */
.header .user-info .avatar,
header.header .user-info .avatar {
  border: 2px solid var(--brand-primary, var(--tg-brand)) !important;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin-left: 10px;
}

/* ──────────────────────────────────────────────────────────────────
   Page padding — pages shouldn't hug the screen edges
   ──────────────────────────────────────────────────────────────────
   Adds responsive horizontal padding to the main content wrapper so
   cards / lists have breathing room. Scopes to common <main> wrappers
   used across the platform. Page canvases fill the available shell width;
   inner form controls, media, dialogs and reading measures keep their bounds.
   ────────────────────────────────────────────────────────────────── */
main.main,
main.wrap,
main.settings-page,
main.super-page,
main.as-wrap,
main.manage-sub {
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  main.main, main.wrap, main.settings-page, main.super-page, main.as-wrap, main.manage-sub {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
@media (max-width: 600px) {
  main.main, main.wrap, main.settings-page, main.super-page, main.as-wrap, main.manage-sub {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Sub-copy / placeholders / meta — keep a near-black shade so the
   hierarchy still reads, but never grey enough to feel washed out. */
html[data-theme="light"] .hint,
html[data-theme="light"] .panel-desc,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .meta,
html[data-theme="light"] .muted,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .text-subtle,
html[data-theme="light"] small.text-muted,
html[data-theme="light"] .footer-meta,
html[data-theme="light"] .as-sub,
html[data-theme="light"] .mn-section-title,
html[data-theme="light"] .crumbs,
html[data-theme="light"] .crumbs a {
  color: #1a1a1e !important;
}
html[data-theme="light"] ::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #5a5a66 !important;
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   Sidebar + main-content layout — single source of truth
   ──────────────────────────────────────────────────────────────────
   Locks the SaaS shell so every authenticated page (artist + admin
   + super, light + dark) renders the same column geometry. Pages
   used to set their own `main.X { margin-left: … }` with values
   ranging from 0 → 200px, which made the canvas visibly jump on
   navigation and sometimes pushed content under the fixed rail.
   The skin now owns the layout; per-page rules can't fight it.
   ────────────────────────────────────────────────────────────────── */
:root {
  --tg-sidebar-w:          60px;
  --tg-sidebar-expanded-w: 200px;
}

/* Always reserve the vertical-scrollbar gutter on <html>. Without
   this, short pages (no scrollbar) and long pages (scrollbar) have
   different layout-viewport widths — every navigation visibly
   shifts the fixed header + sidebar tooltips by ~15px as the gutter
   appears or disappears. `stable` keeps the gutter present even
   when content fits, so nothing jumps between routes. */
html {
  scrollbar-gutter: stable !important;
  overflow-y: scroll;   /* fallback for browsers that don't support scrollbar-gutter */
}

/* Pinned sidebar — always 60px, always full height, never scrolls
   with the page. When user opens the rail it grows to 200px and
   OVERLAYS content (a backdrop is added by sidebar.js); main column
   does not shift. */
.sidebar,
aside.sidebar,
nav.sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--tg-sidebar-w) !important;
  z-index: 950 !important;
  transition: width .2s ease !important;
  /* Lock interior layout to box-sizing:border-box so any per-page
     resets (e.g. *,*::before,*::after{box-sizing}) can't change
     how padding sums into width. */
  box-sizing: border-box !important;
  /* Pin display so the rail can't be flexed/gridded by a stray rule */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 0 !important;
}
.sidebar.expanded,
aside.sidebar.expanded,
nav.sidebar.expanded {
  width: var(--tg-sidebar-expanded-w) !important;
  align-items: flex-start !important;
  padding-left: 16px !important;
}

/* Lock the sidebar's internal nav geometry to ABSOLUTE PX so the
   rail stays identical across every page. Previously these used
   rems (e.g. padding: 0.9rem), so any page that shipped a CSS file
   touching root font-size — PrimeNG, Tamagui, or a stray reset —
   nudged every icon's spacing and the whole rail visibly drifted.
   Pixel values are immune to root font-size changes. */
.sidebar nav,
aside.sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 16px 0 8px !important;
  padding: 0 5px !important;
  overflow-y: auto;
  flex: 1 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.sidebar nav a,
aside.sidebar nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 0 !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.sidebar.expanded nav a,
aside.sidebar.expanded nav a {
  justify-content: flex-start !important;
  padding: 14px 14px !important;
}
.sidebar nav a img,
aside.sidebar nav a img,
.sidebar nav img,
aside.sidebar nav img {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Pinned header — always sits right of the sidebar gutter */
.header,
header.header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: var(--tg-sidebar-w) !important;
  z-index: 900 !important;
}

/* Reserve the sidebar gutter on every recognized <main> wrapper.
   Selector list covers every wrapper class currently used in the
   codebase plus the bare <main>. Per-page styles that try to set
   margin-left lose to !important here. */
main.main,
main.wrap,
main.settings-page,
main.super-page,
main.as-wrap,
main.manage-sub,
main.analytics-page,
main.rpt-page,
main.tg-main,
main:not([class]) {
  margin-left: var(--tg-sidebar-w) !important;
  box-sizing: border-box;
}

/* Belt-and-braces: kill the dead `.expanded`/sibling shifts that
   legacy per-page stylesheets still ship. Sidebar overlays now —
   content never moves sideways. */
main.expanded,
.sidebar.expanded ~ main,
.sidebar.expanded ~ main.main,
.sidebar.expanded ~ main.wrap,
.sidebar.expanded ~ main.settings-page,
.sidebar.expanded ~ main.super-page,
.sidebar.expanded ~ main.as-wrap,
.sidebar.expanded ~ main.manage-sub,
.sidebar.expanded ~ main.analytics-page,
.sidebar.expanded ~ main.rpt-page,
.sidebar.expanded ~ main.tg-main {
  margin-left: var(--tg-sidebar-w) !important;
}
.header.expanded { left: var(--tg-sidebar-w) !important; }

/* Impersonation banner pushes the fixed header down 33px. */
body:has(.imp-banner) .header,
body:has(.imp-banner) header.header { top: 33px !important; }

/* Mobile — sidebar hides, header hugs the edge, main reclaims the gutter */
@media (max-width: 768px) {
  .sidebar,
  aside.sidebar,
  nav.sidebar { display: none !important; }

  .header,
  header.header { left: 0 !important; }

  main.main,
  main.wrap,
  main.settings-page,
  main.super-page,
  main.as-wrap,
  main.manage-sub,
  main.analytics-page,
  main.rpt-page,
  main.tg-main,
  main:not([class]) {
    margin-left: 0 !important;
  }
}

/* Fluid page canvases. Browser zoom changes the available CSS viewport;
   normal block layout fills it without scaling tricks or resize listeners.
   Root wrappers retain the existing sidebar offset and responsive gutters.
   Direct-child selectors deliberately leave inner cards/forms/dialogs alone. */
@layer components {
  html[data-tg-react] body:is(.tg-admin-shell, .tg-super-shell) #root > main,
  html:not([data-tg-react]) body:has(> aside.sidebar) > main {
    box-sizing: border-box !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  html[data-tg-react] body:is(.tg-admin-shell, .tg-super-shell) #root > main > :is(.s-inner, .page-inner),
  html:not([data-tg-react]) body:has(> aside.sidebar) > main > :is(
    .content, .container, .container-clamp, .page, .page-inner, .wrap,
    .s-inner, .h-inner, .tg-inner, .anl-wrap, .dlt-wrap, .iid-page,
    .insp-page, .mkt-wrap, .amp-content, .ytm-main, #akRoot, #apRoot, #whRoot, #mktAdmin
  ) {
    box-sizing: border-box !important;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* ── Global back button ──────────────────────────────────────────── */
.tg-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-surface-3);
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--tg-text);
  flex-shrink: 0;
  position: relative;
  transition: background .15s;
}
.tg-back-btn:hover { background: var(--tg-surface-hi); color: var(--tg-text); }
[data-theme="light"] .tg-back-btn { background: var(--tg-surface-2); }
[data-theme="light"] .tg-back-btn:hover { background: var(--tg-surface-3); }
.tg-back-btn::before {
  content: 'Back';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tg-surface-hi);
  color: var(--tg-text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
[data-theme="light"] .tg-back-btn::before { background: var(--tg-surface-hi); }
.tg-back-btn:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   Canonical primary-CTA button (redesigned 2026-08-27, was a 999px pill
   with filter-only hover since 2026-05-25 — see git history for the prior
   version). Source of the new shape/motion: /admin/email-settings, brought
   app-wide per Eric's request. Every primary action button across tenant
   admin pages + general tenant-facing pages adopts this style.
   !important is intentional — beats per-page inline <style> blocks. Secondary
   patterns (.btn-ghost, .btn-outline, .btn-muted, .btn-danger, .btn-cancel,
   pagination/filter/tab/icon-only) are deliberately excluded.
═══════════════════════════════════════════════════════════════════════════ */
.btn-pill,
.btn-new,
.btn-primary,
.btn-save,
.btn-submit,
.btn.btn-primary,
.btn.btn-success,
.btn.pri,
.btn.submit,
.btn-success,
.btn-sm.primary,
.btn-small.btn-primary,
.btn-primary.btn-small,
.wiz-btn-primary,
.nc-btn.nc-btn-continue,
.ap-btn.primary,
.submit-btn:not(.secondary) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  border: none !important;
  background: var(--tg-brand) !important;
  color: var(--brand-button-text, #fff) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  text-shadow: none !important;
  min-width: 0;
}

.btn-pill:hover,
.btn-new:hover,
.btn-primary:hover,
.btn-save:hover,
.btn-submit:hover,
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.pri:hover,
.btn.submit:hover,
.btn-success:hover,
.btn-sm.primary:hover,
.btn-small.btn-primary:hover,
.btn-primary.btn-small:hover,
.wiz-btn-primary:hover,
.nc-btn.nc-btn-continue:hover,
.ap-btn.primary:hover,
.submit-btn:not(.secondary):hover {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tg-brand) 40%, transparent) !important;
  background: var(--tg-brand) !important;
}

.btn-pill:active,
.btn-new:active,
.btn-primary:active,
.btn-save:active,
.btn-submit:active,
.btn.btn-primary:active,
.btn.btn-success:active,
.btn.pri:active,
.btn.submit:active,
.btn-success:active,
.btn-sm.primary:active,
.btn-small.btn-primary:active,
.btn-primary.btn-small:active,
.wiz-btn-primary:active,
.nc-btn.nc-btn-continue:active,
.ap-btn.primary:active,
.submit-btn:not(.secondary):active {
  transform: scale(.95) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}

.btn-pill:focus-visible,
.btn-new:focus-visible,
.btn-primary:focus-visible,
.btn-save:focus-visible,
.btn-submit:focus-visible,
.btn.btn-primary:focus-visible,
.btn.btn-success:focus-visible,
.btn.pri:focus-visible,
.btn.submit:focus-visible,
.btn-success:focus-visible,
.btn-sm.primary:focus-visible,
.btn-small.btn-primary:focus-visible,
.btn-primary.btn-small:focus-visible,
.wiz-btn-primary:focus-visible,
.nc-btn.nc-btn-continue:focus-visible,
.ap-btn.primary:focus-visible,
.submit-btn:not(.secondary):focus-visible {
  outline: 2px solid var(--tg-brand) !important;
  outline-offset: 2px !important;
}

.btn-pill:disabled,
.btn-new:disabled,
.btn-primary:disabled,
.btn-save:disabled,
.btn-submit:disabled,
.btn.btn-primary:disabled,
.btn.btn-success:disabled,
.btn.pri:disabled,
.btn.submit:disabled,
.btn-success:disabled,
.btn-sm.primary:disabled,
.btn-small.btn-primary:disabled,
.btn-primary.btn-small:disabled,
.wiz-btn-primary:disabled,
.nc-btn.nc-btn-continue:disabled,
.ap-btn.primary:disabled,
.submit-btn:not(.secondary):disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill, .btn-new, .btn-primary, .btn-save, .btn-submit,
  .btn.btn-primary, .btn.btn-success, .btn.pri, .btn.submit, .btn-success,
  .btn-sm.primary, .btn-small.btn-primary, .btn-primary.btn-small,
  .wiz-btn-primary, .nc-btn.nc-btn-continue, .ap-btn.primary,
  .submit-btn:not(.secondary) {
    transition: none !important;
  }
  .btn-pill:hover, .btn-new:hover, .btn-primary:hover, .btn-save:hover,
  .btn-submit:hover, .btn.btn-primary:hover, .btn.btn-success:hover,
  .btn.pri:hover, .btn.submit:hover, .btn-success:hover,
  .btn-sm.primary:hover, .btn-small.btn-primary:hover,
  .btn-primary.btn-small:hover, .wiz-btn-primary:hover,
  .nc-btn.nc-btn-continue:hover, .ap-btn.primary:hover,
  .submit-btn:not(.secondary):hover,
  .btn-pill:active, .btn-new:active, .btn-primary:active, .btn-save:active,
  .btn-submit:active, .btn.btn-primary:active, .btn.btn-success:active,
  .btn.pri:active, .btn.submit:active, .btn-success:active,
  .btn-sm.primary:active, .btn-small.btn-primary:active,
  .btn-primary.btn-small:active, .wiz-btn-primary:active,
  .nc-btn.nc-btn-continue:active, .ap-btn.primary:active,
  .submit-btn:not(.secondary):active {
    transform: none !important;
  }
}

.btn-pill svg,
.btn-new svg,
.btn-primary svg,
.btn-save svg,
.btn-submit svg,
.btn.btn-primary svg,
.btn.pri svg,
.btn.submit svg,
.btn-success svg,
.wiz-btn-primary svg,
.nc-btn.nc-btn-continue svg,
.ap-btn.primary svg,
.submit-btn:not(.secondary) svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

/* ── nc-btn-cancel: dark pill, white text in both themes ──────────── */
.nc-btn.nc-btn-cancel,
html[data-theme="light"] .nc-btn.nc-btn-cancel,
html[data-theme="dark"] .nc-btn.nc-btn-cancel {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* ── Sidebar pinned bottom section ──────────────────────────────── */
.sb-divider {
  width: 28px;
  height: 1px;
  background: var(--tg-line);
  margin: 4px auto 6px;
  flex-shrink: 0;
  align-self: center;
}
.sb-bottom {
  flex-shrink: 0 !important;
  width: 100% !important;
  padding: 0 5px 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.sb-bottom a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 0 !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.sidebar.expanded .sb-bottom a,
aside.sidebar.expanded .sb-bottom a {
  justify-content: flex-start !important;
  padding: 12px 14px !important;
}
.sb-bottom a img {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.sb-bottom a span {
  display: none !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--tg-text-muted) !important;
  margin-left: 10px !important;
  white-space: nowrap !important;
}
.sidebar.expanded .sb-bottom a span,
aside.sidebar.expanded .sb-bottom a span {
  display: block !important;
}
.sb-bottom a:not(.sb-accent):hover {
  background: var(--tg-surface-2) !important;
}
.sb-bottom a.sb-accent {
  background: linear-gradient(135deg,#4611ea,#3409c0) !important;
}
.sb-bottom a.sb-accent:hover {
  background: linear-gradient(135deg,#3409c0,#2907a0) !important;
}
.sb-bottom a.sb-accent img,
html[data-theme="light"] .sb-bottom a.sb-accent img {
  filter: brightness(1) !important;
}
/* mobile nav tile accent */
nav.mobile-nav .mn-tile.sb-accent,
html[data-theme="light"] nav.mobile-nav .mn-tile.sb-accent {
  background: linear-gradient(135deg,#4611ea,#3409c0) !important;
  color: #fff !important;
  border-color: transparent !important;
}
nav.mobile-nav .mn-tile.sb-accent .mn-tile-label,
html[data-theme="light"] nav.mobile-nav .mn-tile.sb-accent .mn-tile-label {
  color: #fff !important;
}
nav.mobile-nav .mn-tile.sb-accent .mn-tile-icon img {
  filter: brightness(1) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Canonical SECONDARY button (added 2026-09-04, per Eric: "use the button
   style on /admin/email-settings on every other page", with
   https://animate-ui.com/docs/components/buttons/button as the reference).

   The primary-CTA token above deliberately excluded every secondary pattern,
   so ghost/outline/cancel/danger buttons kept whatever each page invented —
   brightness-filter hovers, translateY presses, or no feedback at all. That
   was the visible difference between email-settings and the rest of the app.
   Animate UI gives every variant the same motion, so this does too: the
   identical scale(1.02) hover / scale(.95) press / cubic-bezier(.16,1,.3,1)
   as the primary token, with variant colouring instead of a brand fill.

   Scale stays 1.02, not Animate UI's 1.05 — Eric asked for that toned down
   when the primary token was built (see the 2026-08-27 note above).

   Sizing is forced on full-size buttons only. .btn-sm / .btn-small / .sm /
   icon-only variants get the motion and focus ring but keep their own
   dimensions, so compact and icon buttons are not blown up to 10px 18px.

   !important is intentional, same reason as the primary token: this file
   loads after per-page <style> blocks. A page that must deviate uses the
   id-tier trick (#pageId .btn-ghost{...!important}) — see
   reference_tonegrid_saas_pill_button_lock.
═══════════════════════════════════════════════════════════════════════════ */
.btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background-color .15s ease, border-color .15s ease, box-shadow .18s ease !important;
  background: var(--tg-surface-2) !important;
  color: var(--tg-text) !important;
  border: 1px solid var(--tg-line) !important;
}
.btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled),
.act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  transform: scale(1.02) !important;
  filter: none !important;
  background: var(--tg-surface-3) !important;
  border-color: var(--tg-line-strong) !important;
}
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  background: transparent !important;
  border-color: var(--tg-line-strong) !important;
}
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  background: var(--tg-surface-2) !important;
}
.btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background-color .15s ease, border-color .15s ease, box-shadow .18s ease !important;
  background: color-mix(in srgb, #ef4444 10%, transparent) !important;
  color: #ef4444 !important;
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent) !important;
}
.btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon):hover:not(:disabled) {
  transform: scale(1.02) !important;
  filter: none !important;
  background: color-mix(in srgb, #ef4444 18%, transparent) !important;
  border-color: color-mix(in srgb, #ef4444 45%, transparent) !important;
}
/* Press, focus and disabled cover the compact and icon variants too, so a
   small ghost button still answers the click the same way. */
.btn-ghost:active:not(:disabled),
.btn-outline:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-cancel:active:not(:disabled),
.cancel:active:not(:disabled),
.btn-muted:active:not(:disabled),
.act-btn:active:not(:disabled),
.btn-danger:active:not(:disabled) {
  transform: scale(.95) !important;
}
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible,
.btn-cancel:focus-visible,
.cancel:focus-visible,
.btn-muted:focus-visible,
.act-btn:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--tg-brand) !important;
  outline-offset: 2px !important;
}
.btn-ghost:disabled,
.btn-outline:disabled,
.btn-secondary:disabled,
.btn-cancel:disabled,
.cancel:disabled,
.btn-muted:disabled,
.act-btn:disabled,
.btn-danger:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}
.btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) > svg,
.btn-ghost:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-outline:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-secondary:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.cancel:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-muted:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.act-btn:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon),
.btn-danger:not(.btn-sm):not(.btn-small):not(.small):not(.sm):not(.icon-btn):not(.btn-icon) svg {
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.btn-ghost,
.btn-outline,
.btn-secondary,
.btn-cancel,
.cancel,
.btn-muted,
.act-btn,
.btn-danger {
    transition: none !important;
  }
.btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover,
.btn-cancel:hover,
.cancel:hover,
.btn-muted:hover,
.act-btn:hover,
.btn-danger:hover,
.btn-ghost:active,
.btn-outline:active,
.btn-secondary:active,
.btn-cancel:active,
.cancel:active,
.btn-muted:active,
.act-btn:active,
.btn-danger:active {
    transform: none !important;
  }
}