/* .btn/.admin-btn (and any future component that sets its own display)
       set display unconditionally at author-stylesheet specificity, which
       beats the browser's built-in [hidden]{display:none} default — so a
       button toggled hidden via the `hidden` attribute or `.hidden=true`
       stayed visibly rendered (e.g. Creators directory's "Load more"
       button showing up even with an empty result set). Restore the
       expected behavior everywhere, regardless of which class is involved. */
    [hidden] { display: none !important; }
    :root {
      color-scheme: dark;
      --red: #ff2635;
      --red-line: #d12432;
      --white: #f7f7f8;
      --text: #f4f4f6;
      --muted: #989ba5;
      --panel: rgba(8, 8, 10, .72);
      --panel-solid: rgba(10, 10, 12, .985);
      --line: rgba(255, 255, 255, .09);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
    }

    * { box-sizing: border-box; }

    html {
      min-height: 100%;
      background: #000;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(255, 38, 53, .06), transparent 16%),
        radial-gradient(circle at 85% 88%, rgba(255, 38, 53, .05), transparent 18%),
        linear-gradient(180deg, #000 0%, #020203 48%, #000 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
    }

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      isolation: isolate;
    }

    .background-layer {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
      isolation: isolate;
    }

    .background-layer::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .16;
      background-image: radial-gradient(rgba(255, 255, 255, .22) .55px, transparent .55px);
      background-size: 4px 4px;
      mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    }

    .watermark,
    .floating-symbol {
      position: absolute;
      user-select: none;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 900;
      line-height: 1;
      animation: symbol-drift 11s ease-in-out infinite;
    }

    .watermark--rupee {
      top: 112px;
      left: 30px;
      color: rgba(255, 255, 255, .075);
      font-size: 94px;
      transform: rotate(-8deg);
      text-shadow:
        0 0 24px rgba(255, 255, 255, .025),
        0 0 42px rgba(255, 38, 53, .04);
    }

    .watermark--plus {
      right: 32px;
      bottom: 94px;
      color: rgba(255, 38, 53, .105);
      font-size: 108px;
      transform: rotate(7deg);
      text-shadow:
        0 0 26px rgba(255, 38, 53, .07),
        0 0 56px rgba(255, 38, 53, .045);
      animation-delay: -3s;
    }

    .floating-symbol--rupee {
      color: rgba(230, 231, 236, .30);
      font-size: 17px;
      text-shadow: 0 0 8px rgba(255, 255, 255, .04);
    }

    .floating-symbol--plus {
      color: rgba(255, 38, 53, .40);
      font-size: 20px;
      text-shadow: 0 0 14px rgba(255, 38, 53, .20);
    }

    @keyframes symbol-drift {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -9px; }
    }

    .brandAnimatedLogo {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .30));
    }

    .frame-line {
      fill: none;
      stroke: var(--red-line);
      stroke-width: 1.6;
      stroke-linecap: round;
    }

    .frame-main {
      stroke-dasharray: 885;
      stroke-dashoffset: 885;
    }

    .frame-tip {
      opacity: 0;
    }

    .word {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 86px;
      font-weight: 300;
      letter-spacing: 10px;
      opacity: 0;
    }

    .magic {
      fill: var(--white);
      clip-path: inset(0 100% 0 0);
      transform: translateX(-24px);
      transform-origin: center;
    }

    .plus-word {
      fill: var(--red);
      clip-path: inset(0 0 0 100%);
      transform: translateX(24px);
      transform-origin: center;
    }

    .brand-mark {
      opacity: 0;
      transform: scale(.45) rotate(-7deg);
      transform-box: fill-box;
      transform-origin: center;
    }

    .impact-ring,
    .impact-ray,
    .mark-shine {
      display: none;
    }

    .tagline {
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 5.5px;
      opacity: 0;
      transform: translateY(10px);
      transform-origin: center;
    }

    .playing .frame-main {
      animation: line-draw .78s cubic-bezier(.45, 0, .2, 1) .08s forwards;
    }

    .playing .frame-tip {
      animation: tip-in .22s ease-out .72s forwards;
    }

    .playing .magic {
      animation: magic-in .68s var(--ease-out) .34s forwards;
    }

    .playing .plus-word {
      animation: plus-in .68s var(--ease-out) .44s forwards;
    }

    .playing .brand-mark {
      animation: mark-beat 1.25s cubic-bezier(.2, .8, .25, 1) .82s forwards;
    }

    .playing .tagline {
      animation: tagline-in .55s var(--ease-out) 1.38s forwards;
    }

    @keyframes line-draw { to { stroke-dashoffset: 0; } }
    @keyframes tip-in { to { opacity: 1; } }

    @keyframes magic-in {
      0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-24px);
        filter: blur(3px);
      }
      100% {
        opacity: 1;
        clip-path: inset(0);
        transform: translateX(0);
        filter: blur(0);
      }
    }

    @keyframes plus-in {
      0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
        transform: translateX(24px);
        filter: blur(3px);
      }
      100% {
        opacity: 1;
        clip-path: inset(0);
        transform: translateX(0);
        filter: blur(0);
      }
    }

    @keyframes mark-beat {
      0% {
        opacity: 0;
        transform: scale(.62);
        filter: blur(5px) brightness(1.15);
      }
      28% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
      }
      42% {
        opacity: 1;
        transform: scale(1.09);
        filter: blur(0) brightness(1.12) drop-shadow(0 0 9px rgba(255, 38, 53, .28));
      }
      53% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
      }
      68% {
        opacity: 1;
        transform: scale(1.055);
        filter: blur(0) brightness(1.07) drop-shadow(0 0 6px rgba(255, 38, 53, .18));
      }
      79%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
      }
    }

    @keyframes tagline-in {
      0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(255, 255, 255, .065);
      background: rgba(2, 2, 3, .78);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .site-header::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 38, 53, .30), transparent);
    }

    .header-inner {
      width: min(1320px, calc(100% - 28px));
      min-height: 106px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .header-logo {
      display: block;
      width: min(430px, 47vw);
      min-width: 285px;
      line-height: 0;
    }

    .menu-button {
      min-height: 50px;
      padding: 11px 14px 11px 18px;
      display: inline-flex;
      align-items: center;
      gap: 13px;
      flex: 0 0 auto;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 14px;
      background: rgba(255, 255, 255, .035);
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .menu-button:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 38, 53, .32);
      background: rgba(255, 255, 255, .055);
    }

    .menu-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .hamburger {
      width: 24px;
      height: 18px;
      display: grid;
      align-content: space-between;
    }

    .hamburger i {
      display: block;
      height: 2px;
      border-radius: 99px;
      background: #fff;
    }

    .hamburger i:nth-child(2) { width: 70%; justify-self: end; }
    .hamburger i:nth-child(3) { width: 86%; justify-self: end; }

    .spacer {
      flex: 1 1 auto;
      min-height: 320px;
    }

    .site-footer {
      margin-top: auto;
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255, 38, 53, .20);
      background:
        radial-gradient(circle at 8% 0, rgba(255, 38, 53, .13), transparent 30%),
        radial-gradient(circle at 92% 100%, rgba(255, 38, 53, .075), transparent 28%),
        rgba(10, 10, 12, .985);
      box-shadow:
        0 -28px 90px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .018);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .site-footer::before {
      content: "";
      position: absolute;
      top: -1px;
      right: 0;
      left: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 38, 53, .34), transparent);
    }

    .footer-inner {
      width: min(1280px, calc(100% - 24px));
      margin: 0 auto;
      padding: 42px 0 22px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(220px, .75fr) minmax(260px, .95fr);
      gap: 44px 56px;
      align-items: start;
      padding-bottom: 30px;
      border-bottom: 1px solid var(--line);
    }

    .footer-logo {
      width: min(405px, 100%);
      line-height: 0;
      margin-bottom: 22px;
    }

    .footer-copy {
      max-width: 520px;
      margin: 0;
      color: #9d9da5;
      font-size: 15px;
      line-height: 1.8;
    }

    .social-row {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .social-chip {
      width: 46px;
      height: 46px;
      min-height: 46px;
      padding: 0;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 12px;
      background: rgba(255, 255, 255, .035);
      color: #e2e2e5;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .008);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .social-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 38, 53, .26);
      background: rgba(255, 255, 255, .055);
    }

    .social-chip:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .90);
      outline-offset: 3px;
    }

    .social-chip svg {
      width: 21px;
      height: 21px;
      flex: 0 0 auto;
    }

    .social-chip[aria-label="Facebook"] svg { color: #1877f2; }
    .social-chip[aria-label="Instagram"] svg { color: #e1306c; }
    .social-chip[aria-label="X"] svg { color: #ffffff; }
    .social-chip[aria-label="Discord"] svg { color: #5865f2; }
    .social-chip[aria-label="YouTube"] svg { color: #ff2635; }

    .footer-links-title {
      margin: 0 0 16px;
      color: #67676f;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      min-height: 44px;
      padding: 11px 14px;
      display: flex;
      align-items: center;
      color: #e2e2e5;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 12px;
      background: rgba(255, 255, 255, .035);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      transition: transform .2s ease, color .18s ease, border-color .2s ease, background .2s ease;
    }

    .footer-links a:hover {
      transform: translateY(-1px);
      color: #fff;
      border-color: rgba(255, 38, 53, .24);
      background: rgba(255, 255, 255, .055);
    }

    .footer-bottom {
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #92929a;
      font-size: 13px;
    }

    .footer-bottom strong {
      color: rgba(255,255,255,.82);
      font-weight: 600;
    }

    .drawer-overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      visibility: hidden;
      opacity: 0;
      background: rgba(0, 0, 0, .66);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      transition: opacity .25s ease, visibility .25s ease;
    }

    .drawer-overlay.open {
      visibility: visible;
      opacity: 1;
    }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 50;
      width: min(430px, 100%);
      height: 100dvh;
      padding: 22px;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      border-left: 1px solid rgba(255, 38, 53, .20);
      background:
        radial-gradient(circle at 90% 0, rgba(255, 38, 53, .13), transparent 31%),
        var(--panel-solid);
      box-shadow: -28px 0 90px rgba(0, 0, 0, .50);
      transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    }

    .drawer.open { transform: translateX(0); }

    .drawer-top {
      flex: 0 0 auto;
      min-height: 82px;
      padding-bottom: 17px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--line);
    }

    .drawer-heading {
      margin: 7px 0 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.02em;
    }

    .close-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 12px;
      background: rgba(255, 255, 255, .035);
      cursor: pointer;
      font-size: 24px;
    }

    .drawer-body {
      min-height: 0;
      flex: 1 1 auto;
      padding: 24px 0 18px;
      overflow-y: auto;
    }

    .account-card {
      display: none;
      margin-bottom: 22px;
      padding: 16px;
      border: 1px solid rgba(255, 38, 53, .20);
      border-radius: 14px;
      background: rgba(255, 38, 53, .055);
    }

    .account-card.show { display: block; }

    .account-card span,
    .account-card strong,
    .account-card small {
      display: block;
    }

    .account-card span {
      color: #85858d;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .account-card strong {
      margin-top: 7px;
      font-size: 16px;
    }

    .account-card small {
      margin-top: 5px;
      color: #9d9da5;
      font-size: 10px;
    }

    .section-label {
      margin: 0 0 10px 3px;
      color: #67676f;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .action-grid {
      display: grid;
      gap: 10px;
    }

    .action-primary,
    .action-secondary {
      min-height: 52px;
      padding: 12px 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 900;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .action-primary {
      background: linear-gradient(135deg, #ff3b49, #de1728 58%, #aa0d1b);
      box-shadow: 0 14px 35px rgba(255, 38, 53, .20);
    }

    .action-secondary {
      color: #e2e2e5;
      border: 1px solid rgba(255, 255, 255, .09);
      background: rgba(255, 255, 255, .035);
    }

    .action-primary:hover,
    .action-secondary:hover {
      transform: translateY(-1px);
    }

    .action-secondary.danger {
      color: #ff8992;
    }

    .drawer-bottom {
      flex: 0 0 auto;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .domain {
      color: #92929a;
      font-size: 11px;
      font-weight: 850;
    }

    .socials {
      display: flex;
      gap: 8px;
    }

    .social {
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 11px;
      background: rgba(255, 255, 255, .035);
      transition: transform .2s ease, border-color .2s ease;
    }

    .social:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, .22);
    }

    .social svg {
      width: 19px;
      height: 19px;
    }

    .facebook { color: #1877f2; }
    .instagram { color: #e1306c; }
    .x-brand { color: #fff; }
    .discord { color: #5865f2; }
    .youtube { color: #ff2635; }

    @media (max-width: 900px) {
      .footer-top {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .watermark--rupee {
        top: 118px;
        left: 15px;
        font-size: 76px;
      }

      .watermark--plus {
        right: 14px;
        bottom: 96px;
        font-size: 88px;
      }

      .header-inner {
        width: min(100% - 12px, 1320px);
        min-height: 86px;
      }

      .header-logo {
        width: min(292px, calc(100vw - 70px));
        min-width: 0;
      }

      .menu-button {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 10px;
        justify-content: center;
      }

      .menu-label {
        display: none;
      }

      .spacer {
        min-height: 240px;
      }

      .footer-inner {
        width: min(100% - 16px, 1280px);
        padding-top: 34px;
      }

      .footer-logo {
        width: min(322px, 100%);
        margin-bottom: 20px;
      }

      .tagline {
        font-size: 30px;
        letter-spacing: 5px;
      }

      .social-row {
        gap: 9px;
      }

      .social-chip {
        width: 44px;
        height: 44px;
        min-height: 44px;
        border-radius: 11px;
      }

      .social-chip svg {
        width: 20px;
        height: 20px;
      }

      .footer-copy {
        font-size: 14px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .drawer {
        width: 100%;
        padding: 17px;
        border-left: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .watermark,
      .floating-symbol {
        animation: none;
      }

      .frame-main {
        stroke-dashoffset: 0;
      }

      .frame-tip,
      .word,
      .brand-mark,
      .tagline {
        opacity: 1;
        clip-path: none;
        transform: none;
        filter: none;
      }

      .playing * {
        animation: none !important;
      }
    }
  

/* MagicPlus content system — the uploaded shell above remains unchanged. */
:root{--surface:#09090b;--surface-2:#111114;--surface-3:#17171b;--card:rgba(15,15,18,.78);--card-hover:rgba(20,20,24,.9);--red-soft:rgba(255,38,53,.12);--green:#3ddc97;--amber:#ffbf47;--blue:#69a8ff;--max:1240px}
.site-main{width:min(var(--max),calc(100% - 32px));margin:0 auto;flex:1 1 auto;padding:52px 0 76px;position:relative;z-index:1}.site-main.wide{--max:1400px}
.shell-section{padding:56px 0}.shell-section:first-child{padding-top:18px}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;color:#ff7b85;font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.eyebrow:before{content:"";width:24px;height:1px;background:var(--red)}
h1,h2,h3,h4,p{margin-top:0}.display-title{max-width:960px;margin-bottom:20px;font-size:clamp(42px,7vw,86px);line-height:.95;letter-spacing:-.055em;font-weight:850}.display-title .accent,.section-title .accent{color:var(--red)}.lead{max-width:760px;color:#a8a8b0;font-size:clamp(17px,2vw,21px);line-height:1.72}.section-title{margin-bottom:14px;font-size:clamp(30px,4vw,52px);line-height:1.04;letter-spacing:-.04em}.section-copy{max-width:720px;color:#9b9ba4;line-height:1.75}.center{text-align:center}.center .lead,.center .section-copy{margin-left:auto;margin-right:auto}
.hero{min-height:calc(100vh - 106px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:48px;padding:52px 0 70px}.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{min-height:50px;padding:13px 19px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:13px;font-weight:850;font-size:14px;cursor:pointer;transition:.2s ease;color:#fff}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#ff4150,#db1728 60%,#a90c1a);box-shadow:0 16px 38px rgba(255,38,53,.2)}.btn-secondary{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.045)}.btn-ghost{border-color:rgba(255,38,53,.22);background:rgba(255,38,53,.055);color:#ff9ba2}.btn-danger{border-color:rgba(255,69,84,.25);background:rgba(255,69,84,.08);color:#ff8992}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn-sm{min-height:40px;padding:9px 13px;font-size:12px}.btn-block{width:100%}
.hero-visual{position:relative;min-height:520px}.visual-panel{position:absolute;inset:7% 0 0 7%;padding:26px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(145deg,rgba(20,20,24,.88),rgba(5,5,7,.93));box-shadow:0 40px 100px rgba(0,0,0,.55);overflow:hidden}.visual-panel:before{content:"";position:absolute;width:310px;height:310px;border-radius:50%;right:-100px;top:-100px;background:rgba(255,38,53,.16);filter:blur(50px)}.stream-window{position:relative;aspect-ratio:16/9;border-radius:18px;background:linear-gradient(135deg,#1a1a20,#09090c);border:1px solid rgba(255,255,255,.08);overflow:hidden;display:grid;place-items:center}.stream-window:before{content:"LIVE";position:absolute;top:14px;left:14px;padding:7px 10px;border-radius:8px;background:#d91425;font-size:10px;font-weight:900;letter-spacing:.12em}.stream-glow{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ff5260 0,#b90f1e 28%,rgba(255,38,53,.08) 62%,transparent 70%);filter:blur(1px);animation:pulse 2.8s ease-in-out infinite}.support-alert{position:absolute;right:18px;bottom:22px;width:min(320px,78%);padding:15px 16px;border:1px solid rgba(255,38,53,.25);border-radius:14px;background:rgba(8,8,10,.92);box-shadow:0 14px 40px rgba(0,0,0,.4)}.support-alert strong{display:block;font-size:14px}.support-alert span{display:block;color:#a0a0a8;font-size:12px;margin-top:5px}.mini-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.mini-stat{padding:14px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}.mini-stat span{display:block;color:#74747d;font-size:9px;text-transform:uppercase;font-weight:900;letter-spacing:.11em}.mini-stat strong{display:block;margin-top:7px;font-size:15px}.float-card{position:absolute;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(13,13,16,.94);box-shadow:0 20px 45px rgba(0,0,0,.45);font-size:13px;font-weight:800}.float-card.one{left:-7%;top:10%;animation:float 6s ease-in-out infinite}.float-card.two{right:-4%;bottom:7%;animation:float 7s ease-in-out infinite reverse}.float-card i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--red);box-shadow:0 0 14px rgba(255,38,53,.7)}
@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.18)}}@keyframes float{50%{transform:translateY(-10px)}}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature-card,.content-card,.stat-card,.form-card,.table-card{position:relative;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.22)}.feature-card{padding:24px;overflow:hidden;transition:.22s ease}.feature-card:hover{transform:translateY(-4px);border-color:rgba(255,38,53,.24);background:var(--card-hover)}.feature-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-40px;top:-40px;background:rgba(255,38,53,.1);filter:blur(18px)}.feature-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px;border-radius:13px;border:1px solid rgba(255,38,53,.22);background:rgba(255,38,53,.08);color:#ff6570;font-size:20px;font-weight:900}.feature-card h3{margin-bottom:9px;font-size:18px}.feature-card p{margin:0;color:#96969f;font-size:14px;line-height:1.65}.feature-card .meta{display:inline-block;margin-top:16px;color:#ff7780;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.content-card{padding:24px}.content-card.compact{padding:18px}.content-card h3{margin-bottom:8px}.content-card p:last-child{margin-bottom:0}.divider{height:1px;margin:22px 0;background:rgba(255,255,255,.08)}.muted{color:#93939c}.tiny{font-size:12px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--green)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}.step{position:relative;padding:26px;border-left:1px solid rgba(255,38,53,.22)}.step:before{counter-increment:step;content:"0" counter(step);display:block;margin-bottom:18px;color:#ff5f6c;font-size:12px;font-weight:900;letter-spacing:.12em}.step h3{font-size:19px}.step p{color:#96969f;line-height:1.7}
.dashboard-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px}.dash-nav{position:sticky;top:126px;align-self:start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(10,10,12,.86)}.dash-nav button,.dash-nav a{width:100%;min-height:45px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:0;border-radius:11px;background:transparent;color:#a1a1aa;text-align:left;font-size:13px;font-weight:800;cursor:pointer}.dash-nav button:hover,.dash-nav button.active,.dash-nav a:hover{background:rgba(255,38,53,.1);color:#fff}.dash-pane{display:none}.dash-pane.active{display:block}.dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.dashboard-head h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.04em;margin-bottom:6px}.dashboard-head p{color:#909099;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.stat-card{padding:18px}.stat-card span{display:block;color:#777780;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.stat-card strong{display:block;margin-top:10px;font-size:24px;letter-spacing:-.03em}.stat-card small{display:block;margin-top:6px;color:#8f8f98}.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-card{padding:24px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{color:#b9b9c0;font-size:12px;font-weight:800}.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{width:100%;min-height:48px;padding:12px 14px;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0c0c0f;outline:none;font:inherit}.field textarea{min-height:110px;resize:vertical}.field input:not([type="checkbox"]):not([type="radio"]):focus,.field textarea:focus,.field select:focus{border-color:rgba(255,38,53,.65);box-shadow:0 0 0 3px rgba(255,38,53,.1)}.field input[type="checkbox"],.field input[type="radio"]{width:auto;min-height:0}.field small{color:#74747d;font-size:11px;line-height:1.5}.field-error{color:#ff737e;font-size:12px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.input-row{display:flex;gap:9px}.input-row>*:first-child{flex:1}.check-row{display:flex;align-items:flex-start;gap:10px;color:#aaaab2;font-size:13px;line-height:1.5}.check-row input{margin-top:3px}.upload-zone{padding:20px;border:1px dashed rgba(255,255,255,.17);border-radius:13px;background:rgba(255,255,255,.02);text-align:center}.upload-zone input{max-width:100%}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.tab-btn{min-height:42px;padding:9px 14px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.03);color:#a4a4ac;font-weight:800;cursor:pointer}.tab-btn.active,.tab-btn:hover{color:#fff;border-color:rgba(255,38,53,.28);background:rgba(255,38,53,.09)}
.table-card{overflow:hidden}.table-toolbar{padding:15px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.07)}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th,.data-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.065);font-size:13px}.data-table th{color:#73737c;font-size:10px;text-transform:uppercase;letter-spacing:.11em}.data-table td{color:#c7c7cd}.data-table tr:last-child td{border-bottom:0}.badge{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:#c7c7ce;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.badge.success{background:rgba(61,220,151,.1);color:#66e6aa}.badge.warn{background:rgba(255,191,71,.1);color:#ffd071}.badge.danger{background:rgba(255,69,84,.11);color:#ff8c96}.badge.info{background:rgba(105,168,255,.11);color:#8fbdff}
.empty-state{padding:48px 20px;text-align:center}.empty-state .empty-icon{width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;background:rgba(255,38,53,.08);border:1px solid rgba(255,38,53,.18);color:#ff6671;font-size:24px}.empty-state h3{margin-bottom:7px}.empty-state p{max-width:480px;margin:0 auto;color:#85858e;line-height:1.65}
.creator-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.creator-card{display:block;padding:20px;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(14,14,17,.78);transition:.2s}.creator-card:hover{transform:translateY(-3px);border-color:rgba(255,38,53,.25)}.creator-head{display:flex;align-items:center;gap:13px}.avatar{width:54px;height:54px;border-radius:15px;object-fit:cover;background:linear-gradient(135deg,#2a2a31,#111116);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;font-weight:900;color:#ff727c}.creator-head h3{margin:0 0 4px;font-size:16px}.creator-head p{margin:0;color:#777780;font-size:12px}.creator-card .bio{margin:15px 0 0;color:#9999a2;line-height:1.6;font-size:13px}.live-pill{margin-left:auto;padding:6px 9px;border-radius:999px;background:rgba(255,38,53,.12);color:#ff6873;font-size:9px;font-weight:900;letter-spacing:.1em}.creator-cover{height:230px;border-radius:22px;background:linear-gradient(135deg,rgba(255,38,53,.18),rgba(20,20,25,.9));border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.creator-cover img{width:100%;height:100%;object-fit:cover}.creator-profile-row{display:flex;align-items:flex-end;gap:20px;margin:-62px 26px 0;position:relative}.creator-profile-row .avatar{width:116px;height:116px;border-radius:26px;border:5px solid #060607;font-size:32px}.creator-profile-copy{padding-bottom:8px}.creator-profile-copy h1{margin:0 0 6px;font-size:34px}.creator-profile-copy p{margin:0;color:#8c8c95}.support-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:20px;margin-top:28px}.support-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.support-option{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.025);cursor:pointer;transition:.2s}.support-option:hover,.support-option.active{border-color:rgba(255,38,53,.3);background:rgba(255,38,53,.065)}.support-option strong{display:block}.support-option span{display:block;margin-top:6px;color:#85858e;font-size:12px}.amount-chips{display:flex;flex-wrap:wrap;gap:8px}.amount-chip{min-height:38px;padding:8px 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.03);color:#ccc;font-weight:800;cursor:pointer}.amount-chip.active{border-color:#ff4250;background:rgba(255,38,53,.1);color:#fff}
.progress-track{height:10px;border-radius:99px;background:#19191e;overflow:hidden}.progress-bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#d91628,#ff5260)}.rank-list{display:grid;gap:10px}.rank-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.022)}.rank-number{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(255,38,53,.08);color:#ff6973;font-weight:900}.rank-row strong{display:block}.rank-row small{display:block;margin-top:3px;color:#777780}.rank-xp{font-weight:900}
.modal-backdrop{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.modal-backdrop.open{display:grid}.modal{width:min(620px,100%);max-height:90vh;overflow:auto;padding:24px;border:1px solid rgba(255,38,53,.2);border-radius:20px;background:#0b0b0e;box-shadow:0 40px 120px rgba(0,0,0,.65)}.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}.modal-head h2{margin:0}.modal-close{width:40px;height:40px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font-size:20px;cursor:pointer}
.toast{position:fixed;z-index:120;right:18px;bottom:18px;max-width:380px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#151519;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:none;opacity:1}.toast.error{border-color:rgba(255,69,84,.35);color:#ff9aa2}.toast.success{border-color:rgba(61,220,151,.3);color:#83efbd}
.skeleton{min-height:90px;border-radius:15px;background:linear-gradient(90deg,#101014,#18181d,#101014);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}
/* Corner fullscreen toggle for the admin/Studio OBS preview canvases — an icon button pinned to the
   video frame itself (YouTube's player convention) instead of a same-weight text button sitting in
   a row of unrelated controls (Replay/Stop/Clear/Mute). Shared here since both admin-console-obs.js
   and studio.js render this same 16:9 preview shell. */
.mp-fullscreen-toggle{position:absolute;right:10px;bottom:10px;z-index:20;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}
.mp-fullscreen-toggle:hover{background:rgba(0,0,0,.8);transform:scale(1.06)}
.mp-fullscreen-toggle:focus-visible{outline:2px solid rgba(255,38,53,.85);outline-offset:2px}
.mp-fullscreen-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-fullscreen-toggle .mp-fs-compress{display:none}
.mp-fullscreen-toggle.is-fullscreen .mp-fs-expand{display:none}
.mp-fullscreen-toggle.is-fullscreen .mp-fs-compress{display:block}
.auth-wrap{min-height:calc(100vh - 220px);display:grid;place-items:center}.auth-card{width:min(520px,100%);padding:30px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:rgba(10,10,13,.87);box-shadow:0 30px 90px rgba(0,0,0,.4)}.role-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}.role-option{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer;text-align:left;color:#fff}.role-option.active{border-color:rgba(255,38,53,.42);background:rgba(255,38,53,.09)}.role-option strong,.role-option span{display:block}.role-option span{margin-top:4px;color:#81818a;font-size:11px}
.wizard-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}.wizard-step{height:5px;border-radius:99px;background:#1b1b20}.wizard-step.active,.wizard-step.done{background:var(--red)}.wizard-panel{display:none}.wizard-panel.active{display:block}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px}.legal-nav{position:sticky;top:126px;align-self:start}.legal-content h2{margin-top:38px}.legal-content h2:first-child{margin-top:0}.legal-content p,.legal-content li{color:#aaaab2;line-height:1.8}.legal-content ul{padding-left:20px}.notice{padding:14px 16px;border:1px solid rgba(255,191,71,.2);border-radius:12px;background:rgba(255,191,71,.05);color:#d9c186;font-size:13px;line-height:1.6}
/* .overlay-alert's own visual theme (card size, colours, states) used to live here — it's now
   entirely owned by assets/css/overlay-theme.css, loaded after this file on the three pages that
   ever render .overlay-alert (overlay/index.html, studio/index.html, admin/obs/index.html), so this
   block keeps only what overlay-theme.css doesn't redefine: page chrome and structural positioning. */
.overlay-page{background:transparent!important}.overlay-page .background-layer,.overlay-page .site-header,.overlay-page .site-footer,.overlay-page .drawer-overlay,.overlay-page .drawer{display:none!important}.overlay-page .site-main{width:100%;height:100vh;padding:0}.overlay-stage{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:5vh}
/* Fixed 1920x1080 logical canvas every widget is actually tuned against (fonts, padding, the
   Challenge ring, etc. are real pixel values, not %/vw — verified by reading the CSS, not assumed).
   assets/js/pages/overlay.js scales this transform to fit whatever the Browser Source's REAL
   resolution is (720p/1440p/4K/anything), so the whole design scales as one unit instead of looking
   tiny at 4K or oversized at 720p. transform-origin 0 0 keeps it pinned to the real top-left corner,
   matching a 16:9 Browser Source with zero letterboxing (any non-16:9 source just leaves transparent
   margin at the bottom/right, which is invisible against a chroma/transparent overlay anyway).
   Descendant position:fixed rules (.overlay-stage, .overlay-hud, .overlay-poll, .overlay-challenge)
   automatically resolve against THIS box once it has a transform, not the real viewport — a plain
   CSS containing-block rule, not something this file or overlay-renderer.js has to special-case. */
.overlay-canvas{position:fixed;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0}
.payment-state{min-height:60vh;display:grid;place-items:center;text-align:center}.state-icon{width:84px;height:84px;margin:0 auto 22px;display:grid;place-items:center;border-radius:26px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:36px}.state-icon.success{color:#68e7ad;border-color:rgba(61,220,151,.25);background:rgba(61,220,151,.07)}.state-icon.error{color:#ff7e88;border-color:rgba(255,69,84,.25);background:rgba(255,69,84,.07)}
@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-visual{min-height:460px}.card-grid,.creator-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.support-layout,.two-col{grid-template-columns:1fr}.dashboard-layout{grid-template-columns:1fr}.dash-nav{position:static;display:flex;overflow:auto}.dash-nav button,.dash-nav a{width:auto;white-space:nowrap}.legal-layout{grid-template-columns:1fr}.legal-nav{position:static}}
@media(max-width:760px){.site-main{width:min(100% - 18px,var(--max));padding-top:30px}.hero{padding-top:20px}.display-title{font-size:clamp(42px,14vw,64px)}.hero-visual{min-height:390px}.visual-panel{inset:4% 0 0}.float-card.one{left:0}.float-card.two{right:0}.card-grid,.creator-grid,.steps,.three-col,.form-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.support-options{grid-template-columns:1fr}.field.full{grid-column:auto}.creator-profile-row{align-items:center;margin:-42px 14px 0;gap:13px}.creator-profile-row .avatar{width:88px;height:88px;border-radius:22px}.creator-profile-copy h1{font-size:25px}.dashboard-head{display:block}.dashboard-head .button-row{margin-top:14px}.form-card,.content-card{padding:18px}.role-picker{grid-template-columns:1fr}.wizard-progress{gap:4px}.footer-bottom strong{font-weight:800}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr 1fr}.mini-stat:last-child{grid-column:1/-1}.hero-visual{min-height:350px}.visual-panel{padding:14px}.support-alert{right:9px;bottom:10px}.button-row,.hero-actions{display:grid}.button-row .btn,.hero-actions .btn{width:100%}}

/* Structural positioning only — overlay-theme.css owns every visual property (background, border,
   padding, typography) for .overlay-goal/.overlay-wall/.overlay-boost themselves.

   Goal and Boost are both full-bleed top edge-to-edge banners by design (see overlay-theme.css's own
   section comments) — a 3-column grid with Boost pinned to the middle column used to be here, which
   silently became Boost's *containing block* once it had an explicit grid-column, collapsing its
   authored `left:0;right:0` down to that column's ~35%-of-canvas width instead of the full frame
   (verified live: computed style showed left:0/right:0 as authored, but a resolved width of ~453px
   out of a 1280px canvas). .overlay-hud is now just a top-anchored flex column so Goal/Boost (plain
   flow children, stretched full-width by the column's default align-items:stretch) genuinely span
   edge to edge and stack rather than overlap when both are active — DOM order (goal, then boost)
   decides which sits on top. Wall was never part of that overlap problem (it's a corner podium, not
   an edge banner) — pulling it out to its own absolute position is a plain win, not a workaround.

   top was the reference's literal 12% at first, which is 129.6px on the documented 1920x1080 canvas
   — but Goal (~72px) and Boost (~50px) are both fixed-px height, not a % of canvas height, so a
   Goal+Boost stack (~122px, when both are active at once) left only ~7.6px of clearance: real but
   fragile, one longer Goal title away from Wall's podium visibly overlapping the boost banner
   underneath it (verified live in the admin OBS sandbox with all three shown together). 15%
   (162px on 1080p) gives ~40px of real margin instead of a margin thinner than a single text line. */
.overlay-hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column}
/* width was 240px — sized for the old 3-row ranked list. The champion+ticker+socials redesign
   (overlay-theme.css's .mp-wall, ported from the reference file) is a 4-row card at the reference's
   own 15px name/amount type sizes, and felt visibly cramped at the old width — verified live, this
   is noticeably more comfortable while staying a corner widget, not a banner. */
.overlay-wall{position:absolute;right:4%;top:15%;width:min(340px,30%)}

html.overlay-mode,html.overlay-mode body{background:transparent!important}

/* Onboarding wizard: [hidden] must win over layout display rules on wizard
   panels and form action rows. Previously injected at runtime by
   onboarding-ui-fixes.js; moved here so it applies on first paint. */
.wizard-panel [hidden],.form-actions [hidden]{display:none!important}

/* Streamer Studio OBS tab layout (studio-obs.js). Previously injected at runtime by
   studio.js's injectStyles(); moved here — OBS-REBUILD-BRIEF.md Phase 4 — now that the stage
   internals it used to sit alongside (.studio-preview-shell/-stage, .studio-resize-handle,
   .studio-safe-zone, .studio-drag-guide) are gone, replaced by the shared obs-preview.js module's
   own markup/CSS. These four classes are still live: the outer grid, its toolbar row, the
   control-stack form column, and the x/y/scale readout text. */
.studio-obs-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:16px}
.studio-obs-grid input[type=range]{accent-color:var(--brand,#ff2635)}
.studio-preview-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.studio-preview-toolbar .btn{margin:0}
.studio-control-stack{display:grid;gap:13px}
.studio-layout-readout{margin-left:auto;align-self:center;font-size:12px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
/* Fullscreen targets #studioObsFullscreenTarget (box + toolbar together), not the module's own
   stage-only fullscreen button — same reasoning, and same rule, as Admin's
   #adminObsFullscreenTarget in admin-polish.css. */
.studio-preview-fullscreen-target:fullscreen{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;background:#000}
.studio-preview-fullscreen-target:fullscreen .obs-preview-shell{width:min(100%,calc((100vh - 120px) * 16 / 9));flex:0 0 auto;border-radius:0}
.studio-preview-fullscreen-target:fullscreen .studio-preview-toolbar{justify-content:center}


/* Bundled at release build to avoid late readability layout shifts. */
/* MagicPlus readability pass — intentionally excludes live OBS overlay rendering. */
:root{
  --readable-muted:#a9adb7;
  --readable-subtle:#8f949e;
}

.skip-link{position:fixed;top:10px;left:10px;z-index:10000;padding:10px 14px;border-radius:10px;background:#fff;color:#080808;font-weight:800;text-decoration:none;transform:translateY(-160%);transition:transform .16s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid #ff2635;outline-offset:2px}

body:not(.overlay-page) .muted{color:var(--readable-muted)}
body:not(.overlay-page) .tiny{font-size:13px;line-height:1.55}
body:not(.overlay-page) .eyebrow{font-size:12px;letter-spacing:.13em}
body:not(.overlay-page) .menu-label{font-size:12px}
body:not(.overlay-page) .footer-copy{color:#b0b2ba;font-size:15.5px}
body:not(.overlay-page) .footer-links a{font-size:14px;line-height:1.5}
body:not(.overlay-page) .section-label{color:#8b8e97;font-size:10.5px;letter-spacing:.13em}
body:not(.overlay-page) .account-card span{color:#9da1aa;font-size:10.5px}
body:not(.overlay-page) .account-card small{color:#b0b3bb;font-size:12px}
body:not(.overlay-page) .action-primary,
body:not(.overlay-page) .action-secondary{font-size:14px;font-weight:800}

body:not(.overlay-page) .btn{font-size:15px}
body:not(.overlay-page) .btn-sm{font-size:13px}
body:not(.overlay-page) .field label{color:#c7cad1;font-size:13px}
body:not(.overlay-page) .field input,
body:not(.overlay-page) .field textarea,
body:not(.overlay-page) .field select{font-size:15px}
body:not(.overlay-page) .field small{color:#9499a3;font-size:12px;line-height:1.55}
body:not(.overlay-page) .field-error{font-size:13px}
body:not(.overlay-page) .check-row{font-size:14px;color:#b9bbc2}
body:not(.overlay-page) .tab-btn{font-size:14px;color:#b3b5bd}
body:not(.overlay-page) .feature-card .meta{font-size:12px}
body:not(.overlay-page) .support-alert span{font-size:13px;color:#b2b4bc}
body:not(.overlay-page) .mini-stat span{font-size:10.5px;color:#9699a2}
body:not(.overlay-page) .dash-nav button,
body:not(.overlay-page) .dash-nav a{font-size:14px;color:#b5b8c0}
body:not(.overlay-page) .dashboard-head p{color:#a8abb4}
body:not(.overlay-page) .stat-card span{color:#92969f;font-size:11px}
body:not(.overlay-page) .stat-card small{color:#a0a4ad;font-size:12.5px;line-height:1.45}
body:not(.overlay-page) .data-table th{color:#92969f;font-size:11px}
body:not(.overlay-page) .data-table td{font-size:14px}
body:not(.overlay-page) .badge{font-size:11px}
body:not(.overlay-page) .creator-head p{color:#969aa4;font-size:13px}
body:not(.overlay-page) .creator-card .bio{color:#a9acb4;font-size:14px}
body:not(.overlay-page) .live-pill{font-size:10.5px}
body:not(.overlay-page) .support-option span{color:#9fa3ac;font-size:13px}
body:not(.overlay-page) .rank-row small{color:#969aa4;font-size:12.5px}
body:not(.overlay-page) .notice{font-size:14px}

/* Auth: the account-type switch was previously falling back to native browser buttons. */
body[data-page="auth"] .auth-card{width:min(560px,100%)}
body[data-page="auth"] .auth-card>.muted{font-size:16px;line-height:1.55;color:#aeb2bb}
body[data-page="auth"] .role-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:16px 0 20px;
  padding:5px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
body[data-page="auth"] .role-switch button{
  min-height:44px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:10px;
  background:#111216;
  color:#d8dbe2;
  font-size:15px;
  font-weight:850;
  line-height:1.2;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
body[data-page="auth"] .role-switch button:hover{background:#17191e;color:#fff}
body[data-page="auth"] .role-switch button.active{
  border-color:rgba(255,51,69,.48);
  background:rgba(255,38,53,.16);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,38,53,.10);
}
body[data-page="auth"] .role-switch button:focus-visible{outline:2px solid rgba(255,75,90,.9);outline-offset:2px}
body[data-page="auth"] .auth-mode-switch button{font-size:15px!important;color:#c0c3ca!important}
body[data-page="auth"] .auth-mode-switch button.active{color:#fff!important}
body[data-page="auth"] .field label{font-size:13.5px}
body[data-page="auth"] .field input{font-size:16px}
body[data-page="auth"] .password-requirements>p{font-size:13px!important;color:#e0e2e7!important}
body[data-page="auth"] .password-rules{font-size:13px!important;color:#a4a8b1!important;line-height:1.45}
body[data-page="auth"] .password-rules .passed{color:#bceecb!important}
body[data-page="auth"] .auth-link-button{font-size:14px!important}

/* Admin console: keep density, remove sub-11px operational text. */
body.admin-body{
  --admin-muted:#a7aeb8;
  --admin-subtle:#858d98;
}
body.admin-body .admin-brand-copy strong{font-size:15px}
body.admin-body .admin-brand-copy span{font-size:12px}
body.admin-body .admin-nav-label{color:#838b96;font-size:11px}
body.admin-body .admin-nav-link{color:#bcc2ca;font-size:14px}
body.admin-body .admin-private-label{color:#929aa5;font-size:12px}
body.admin-body .admin-page-meta h1{font-size:19px}
body.admin-body .admin-page-meta p{font-size:12px}
body.admin-body .admin-profile-copy strong{font-size:13px}
body.admin-body .admin-profile-copy span{font-size:11px}
body.admin-body .admin-signout{font-size:12px}
body.admin-body .admin-page-intro p{font-size:14px;color:#aeb4bd}
body.admin-body .admin-btn{font-size:13px}
body.admin-body .admin-btn.sm{font-size:12px}
body.admin-body .admin-metric-label{font-size:12px}
body.admin-body .admin-metric-note{color:#8f97a2;font-size:11.5px;line-height:1.45}
body.admin-body .admin-panel-title strong{font-size:14px}
body.admin-body .admin-panel-title span{font-size:11.5px;line-height:1.4}
body.admin-body .admin-task-copy strong{font-size:13px}
body.admin-body .admin-task-copy span{font-size:11.5px;line-height:1.5}
body.admin-body .admin-table th{color:#929aa5;font-size:10.5px}
body.admin-body .admin-table td{font-size:12.5px;line-height:1.45}
body.admin-body .admin-cell-secondary{font-size:11.5px;line-height:1.45}
body.admin-body .admin-badge{font-size:10.5px}
body.admin-body .admin-filter{font-size:12.5px}
body.admin-body .admin-segment{color:#a1a8b2;font-size:12px}
body.admin-body .admin-empty h3{font-size:14px}
body.admin-body .admin-empty p{font-size:12.5px;line-height:1.6}
body.admin-body .admin-field label{color:#b8bec7;font-size:12px}
body.admin-body .admin-field input,
body.admin-body .admin-field select,
body.admin-body .admin-field textarea{font-size:14px}
body.admin-body .admin-field small{color:#9098a3;font-size:11px;line-height:1.55}
body.admin-body .admin-alerts-header strong{font-size:13px}
body.admin-body .admin-alerts-header span{font-size:11px}
body.admin-body .admin-alert-copy strong{font-size:12px}
body.admin-body .admin-alert-copy span{font-size:11px;line-height:1.5}

@media(max-width:760px){
  body:not(.overlay-page) .field input,
  body:not(.overlay-page) .field textarea,
  body:not(.overlay-page) .field select{font-size:16px}
  body[data-page="auth"] .role-switch{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  body[data-page="auth"] .role-switch{grid-template-columns:1fr}
}