/* CipherTrace-unified theme for COTI TV (layered over style.css) */
:root{--color-background:#0d0f12;--color-surface:rgba(28,31,34,.62);--color-surface-solid:#1c1f22;--color-surface-hover:rgba(47,107,255,.08);
--color-border:#2a2d31;--color-border-hover:#3a3f46;--color-primary:#2f6bff;--color-primary-hover:#1f5bff;--color-primary-foreground:#fff;
--color-title:#1f5bff;--green:#22c55e;--purple:#a855f7;--amber:#f59e0b;--red:#ef4444;--color-text-secondary:#9aa3b2;--color-text-muted:#6b7280;
--radius-lg:12px;--radius-xl:16px;--glow:0 0 0 1px rgba(47,107,255,.35),0 0 18px rgba(47,107,255,.28),0 0 42px rgba(47,107,255,.12);
--font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
html{font-family:var(--font)}
body{background:radial-gradient(1100px 700px at -5% -10%,#0f1a2e 0%,rgba(15,26,46,.35) 40%,transparent 70%),linear-gradient(180deg,#0d0f12,#141618);background-attachment:fixed;min-height:100vh}
.fx-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:linear-gradient(rgba(47,107,255,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(47,107,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
header,main{position:relative;z-index:1}
.mono,code,.badge,td .mono{font-family:var(--mono);letter-spacing:0}
.label,.side h3,label,th,.eyebrow,.micro,.badge,.btn--secure,.tabs .btn,.react .muted{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:700}
.eyebrow{color:var(--color-text-secondary);letter-spacing:.32em;text-align:center;margin-top:.6rem}
.micro{color:var(--color-text-muted);font-size:.58rem;letter-spacing:.22em;margin-top:1.4rem}.center{text-align:center}
.title-neon{font-family:var(--font);font-weight:800;color:var(--color-title);text-align:center;margin:.2rem 0 .6rem;letter-spacing:-.01em;
  text-shadow:0 0 12px rgba(31,91,255,.55),0 0 34px rgba(31,91,255,.35)}
.title-xl{font-size:clamp(2.6rem,7vw,4.5rem)}
/* nav */
.nav{background:rgba(13,15,18,.72);border-bottom:1px solid var(--color-border);backdrop-filter:blur(14px)}
.brand{font-weight:800;letter-spacing:.02em;font-size:1.2rem}.brand em{font-style:normal;color:var(--color-primary);text-shadow:0 0 12px rgba(47,107,255,.6)}
.nav__links a{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:600}.nav__links a.active{color:#fff;text-shadow:0 0 10px rgba(47,107,255,.7)}
/* orbital logo */
.orb{flex:none;filter:drop-shadow(0 0 6px rgba(47,107,255,.55))}.orb .orb__spin{transform-origin:32px 32px;animation:orb 6s linear infinite}
.orb .orb__spin2{transform-origin:32px 32px;animation:orb 9s linear infinite reverse}.orb--lg{display:block;margin:0 auto}
@keyframes orb{to{transform:rotate(360deg)}}
/* glass panels */
.panel,.card,.thread,.mock{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel{padding:1rem;box-shadow:0 10px 40px rgba(0,0,0,.35)}.panel--main{box-shadow:0 10px 40px rgba(0,0,0,.35),0 0 60px rgba(47,107,255,.06)}
.glow,.card--login{box-shadow:var(--glow),0 20px 60px rgba(0,0,0,.6)}
.card--login{max-width:420px;background:rgba(10,11,14,.82);padding:2rem 1.75rem;margin-top:3rem}
.player{border-radius:12px;border-color:#24324d;box-shadow:0 0 0 1px rgba(47,107,255,.25),0 0 30px rgba(47,107,255,.18)}
.vt{font-weight:700;letter-spacing:-.01em}
/* buttons */
.btn{border-radius:10px;font-family:var(--font);font-weight:600;background:rgba(28,31,34,.7);transition:box-shadow .2s,border-color .2s,background .2s}
.btn:hover{border-color:#3b4b6b;box-shadow:0 0 14px rgba(47,107,255,.25)}
.btn--primary{background:linear-gradient(180deg,#3a76ff,#1f5bff);color:#fff;box-shadow:0 0 16px rgba(47,107,255,.45)}.btn--primary:hover{background:linear-gradient(180deg,#4a82ff,#2f6bff);box-shadow:0 0 24px rgba(47,107,255,.65)}
.btn--outline{background:rgba(47,107,255,.06);border-color:rgba(47,107,255,.55);color:#cfe0ff}
.btn--danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.45);color:#fca5a5}.btn--danger:hover{box-shadow:0 0 14px rgba(239,68,68,.35)}
.btn--secure{width:100%;justify-content:center;padding:.85rem;background:rgba(18,27,48,.85);border:1px solid rgba(47,107,255,.35);color:#c7d3ea;font-size:.72rem}
.btn--secure:hover{box-shadow:var(--glow);color:#fff}.btn--secure.busy{color:#8fb0ff;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:var(--glow)}}
.unmute{background:linear-gradient(180deg,#22c55e,#16a34a);color:#04150a;box-shadow:0 0 18px rgba(34,197,94,.55)}
.react .btn.on{border-color:var(--green);color:var(--green);box-shadow:0 0 14px rgba(34,197,94,.35)}
.react .btn[data-r="-1"].on{border-color:var(--red);color:var(--red);box-shadow:0 0 14px rgba(239,68,68,.35)}
/* inputs */
input,select,textarea{background:rgba(10,14,24,.75);border-color:#262c36;border-radius:10px;font-family:var(--font)}
input:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
label{color:#c3cad6;margin-top:1rem}
/* badges by status */
.badge{background:rgba(47,107,255,.12);color:#8fb0ff;border-color:rgba(47,107,255,.45);font-size:.6rem;padding:.15rem .55rem}
.badge--pending{background:rgba(245,158,11,.1);color:var(--amber);border-color:rgba(245,158,11,.45);box-shadow:0 0 10px rgba(245,158,11,.2)}
.badge--rejected{background:rgba(239,68,68,.1);color:var(--red);border-color:rgba(239,68,68,.45)}
.badge--approved{background:rgba(34,197,94,.1);color:var(--green);border-color:rgba(34,197,94,.45)}
/* sidebar list */
.item{border-radius:12px}.item:hover{background:rgba(47,107,255,.06);border-color:#24324d}
.item.on{border-color:rgba(47,107,255,.6);box-shadow:0 0 16px rgba(47,107,255,.22)}
.thumb{border-radius:10px;border:1px solid #23272d;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em}
.item small{font-size:.7rem}
.side h3{color:#7f8ba0}
.chip{font-family:var(--mono);font-size:.62rem;border-radius:8px}
table{font-size:.82rem}th{color:#6b7280;border-bottom-color:#2a2d31}td{border-bottom-color:rgba(42,45,49,.6)}
.adm{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:.5rem;backdrop-filter:blur(16px)}
.tabs .btn.on{border-color:var(--color-primary);color:#fff;box-shadow:0 0 14px rgba(47,107,255,.35)}
.bubble.me{background:rgba(47,107,255,.12);border:1px solid rgba(47,107,255,.3)}.bubble.staff{background:rgba(255,255,255,.04);border:1px solid #2a2d31}
.cm{border-bottom-color:#22262b}.or:before,.or:after{border-top-color:#22262b}.mock{border:1px dashed rgba(245,158,11,.55);background:rgba(245,158,11,.04)}
h2{font-weight:800;letter-spacing:-.01em}
/* stagger-in */
.stagger .panel--main{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.stagger .side{animation:rise .55s .08s cubic-bezier(.2,.8,.2,1) both}
.stagger .item{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.stagger .item:nth-child(1){animation-delay:.16s}.stagger .item:nth-child(2){animation-delay:.22s}.stagger .item:nth-child(3){animation-delay:.28s}
.stagger .item:nth-child(4){animation-delay:.34s}.stagger .item:nth-child(5){animation-delay:.40s}.stagger .item:nth-child(n+6){animation-delay:.46s}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  background:radial-gradient(800px 500px at 50% 45%,rgba(31,91,255,.14),transparent 70%),#0b0d10;transition:opacity .35s,filter .35s}
@keyframes blink{50%{opacity:.25}}
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media (max-width:900px){.panel{padding:.7rem}.brand{font-size:1.05rem}.card--login{margin-top:1.25rem}}
/* submit (anon) + leaderboard + profile */
.lead{font-size:1rem;color:#cfe0ff;margin:.2rem 0 .4rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.perks div{padding:.7rem .8rem;border:1px solid var(--color-border);border-radius:12px;background:rgba(47,107,255,.04);display:flex;flex-direction:column;gap:.2rem}
.perks span{font-size:.78rem;color:var(--color-text-secondary)}
.lb{max-width:980px;margin:1.5rem auto}.lb__tabs{justify-content:center;display:flex;gap:.4rem;margin:1rem 0}
.lbtab{width:100%;border-collapse:collapse}.lbtab th,.lbtab td{padding:.6rem .7rem;border-bottom:1px solid #1f2226;text-align:left}
.lbtab tr.top td{background:linear-gradient(90deg,rgba(47,107,255,.08),transparent)}.lbtab tr.me td{background:rgba(34,197,94,.08)}
.lbtab .rk{font-size:1.05rem;width:4rem}.lbtab .pts{color:#7ea2ff;font-weight:700;text-shadow:0 0 10px rgba(47,107,255,.5)}
.prof{max-width:980px;margin:0 auto}.prof__hd{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;max-width:none}
.prof__rank{display:flex;gap:.6rem}.rankbox{display:flex;flex-direction:column;align-items:center;padding:.6rem 1rem;border:1px solid rgba(47,107,255,.4);border-radius:12px;
  background:rgba(47,107,255,.06);text-decoration:none;box-shadow:0 0 18px rgba(47,107,255,.12)}
.rankbox span{font-size:1.4rem;font-weight:700;color:#fff;text-shadow:0 0 12px rgba(47,107,255,.7)}.rankbox small{color:var(--color-text-secondary);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1rem 0}.stat{padding:.8rem;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);text-align:center}
.stat b{display:block;font-size:1.3rem}.stat span{font-size:.7rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.12em}
.prof .card{max-width:none}.coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem}
.col{display:flex;flex-direction:column;gap:.3rem;padding:.9rem;border:1px solid var(--color-border);border-radius:14px;background:rgba(13,15,18,.6)}
.col--nft{border-color:rgba(168,85,247,.45);box-shadow:0 0 18px rgba(168,85,247,.12)}.col--locked{opacity:.5}
.col__ic{font-size:1.6rem}.nfttag{align-self:flex-start;font:700 .56rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#e9d5ff;border:1px solid rgba(168,85,247,.5);border-radius:999px;padding:.1rem .45rem}
.btn--nft{border-color:rgba(168,85,247,.5);color:#e9d5ff;background:rgba(168,85,247,.08);cursor:not-allowed;margin-top:.3rem}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}