/* ============================================================
   DeaDYBeaR Productions — Shared Theme
   Royal blue / eclipse identity. Dark by default, light optional.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&family=Bungee&display=swap');

:root{
  /* Eclipse Dark (default) */
  --bg-0:#070d24;
  --bg-1:#0b1638;
  --bg-2:#12204f;
  --bg-3:#1a2c66;
  --royal:#4169e1;
  --royal-bright:#5b7ef7;
  --royal-deep:#2b4fd8;
  --eye-red:#ff3b4e;
  --gold:#ffc84a;
  --text:#ffffff;
  --text-soft:#eef2ff;
  --text-dim:#c3cdf5;
  --line:rgba(120,150,255,.22);
  --card-grad:linear-gradient(145deg,#16255c 0%,#0d1a44 55%,#0a1334 100%);
  --panel-grad:linear-gradient(180deg,#101d4c 0%,#0a1436 100%);
  --btn-grad:linear-gradient(135deg,#5b7ef7 0%,#2b4fd8 100%);
  --btn-grad-hover:linear-gradient(135deg,#6f8ffb 0%,#3a5ce8 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%, #1b2f70 0%, transparent 60%),
              radial-gradient(900px 600px at -10% 100%, #14235a 0%, transparent 55%),
              linear-gradient(180deg,#0a1230 0%,#070d24 100%);
  --shadow:0 10px 40px rgba(3,8,30,.55);
  --glow:0 0 24px rgba(91,126,247,.45);
}
/* PulseChain Dark — official brand gradient: cyan/blue → purple → magenta/pink */
[data-theme="pulsechain"]{
  --bg-0:#0a0616;--bg-1:#150a28;--bg-2:#1f1040;--bg-3:#2a1552;
  --royal:#3aa8ff;--royal-bright:#6fd8ff;--royal-deep:#1a6fd8;
  --eye-red:#ff2d95;--gold:#6fd8ff;--text:#ffffff;--text-soft:#eaf8ff;--text-dim:#bfe8ff;
  --line:rgba(111,216,255,.28);
  --card-grad:linear-gradient(145deg,#152244 0%,#170b2e 55%,#0d0620 100%);
  --panel-grad:linear-gradient(180deg,#101d3c 0%,#0d0620 100%);
  --btn-grad:linear-gradient(100deg,#00eaff 0%,#a80af3 50%,#ff2d95 100%);
  --btn-grad-hover:linear-gradient(100deg,#4ff0ff 0%,#c04ff8 50%,#ff5cae 100%);
  --page-grad:radial-gradient(1350px 800px at 78% -5%,#1268c4 0%,transparent 65%),radial-gradient(1020px 680px at -10% 105%,#9c1470 0%,transparent 62%),linear-gradient(180deg,#0d0620 0%,#0a0616 100%);
  --shadow:0 10px 40px rgba(10,4,25,.6);--glow:0 0 26px rgba(111,216,255,.4);
}
/* PulseChain Light — same real brand gradient (blue/cyan to hot magenta), light surface, bright bold text */
[data-theme="pulsechain-light"]{
  --bg-0:#f2faff;--bg-1:#e5f5ff;--bg-2:#d3ecff;--bg-3:#bfe0fd;
  --royal:#0b8fd8;--royal-bright:#0ea5e9;--royal-deep:#0369a1;
  --eye-red:#e0195f;--gold:#a80af3;--text:#0a1a2e;--text-soft:#152a44;--text-dim:#3d6690;
  --line:rgba(14,165,233,.24);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#eaf7ff 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#e0f2ff 100%);
  --btn-grad:linear-gradient(100deg,#00c2e0 0%,#a80af3 50%,#ff2d95 100%);
  --btn-grad-hover:linear-gradient(100deg,#3ad4f0 0%,#c04ff8 50%,#ff5cae 100%);
  --page-grad:radial-gradient(1250px 680px at 80% -10%,#8fdcff 0%,transparent 60%),radial-gradient(1020px 680px at -10% 105%,#ffa8e2 0%,transparent 58%),linear-gradient(180deg,#fbfeff 0%,#e5f5ff 100%);
  --shadow:0 10px 28px rgba(14,165,233,.14);--glow:0 0 20px rgba(14,165,233,.28);
}
[data-theme="pulsechain-light"] input,[data-theme="pulsechain-light"] select,[data-theme="pulsechain-light"] textarea{background:#fff}
[data-theme="pulsechain-light"] .eyebrow::before,[data-theme="pulsechain"] .eyebrow::before{background:#ff2d78}
[data-theme="light"]{
  --bg-0:#eef2ff;
  --bg-1:#e3eaff;
  --bg-2:#d5e0ff;
  --bg-3:#c4d3ff;
  --royal:#2b4fd8;
  --royal-bright:#3a5ce8;
  --royal-deep:#1c3bb8;
  --text:#0b1638;
  --text-soft:#1a2c66;
  --text-dim:#3d4f8f;
  --line:rgba(43,79,216,.25);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#eef2ff 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#e9efff 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%, #cfdcff 0%, transparent 60%),
              linear-gradient(180deg,#f4f7ff 0%,#e6ecff 100%);
  --shadow:0 10px 30px rgba(43,79,216,.15);
  --glow:0 0 20px rgba(43,79,216,.25);
}

/* ============================================================
   10 ADDITIONAL THEME SETS
   Each grounded in music-industry color psychology:
   trust/professionalism (blues), energy/action (reds/oranges),
   creativity (purples), luxury (gold/black), calm (greens/teals),
   warmth (earth tones), boldness (high-contrast neon).
   ============================================================ */

/* 1. Midnight Velvet — luxury label, purple = creativity + prestige */
[data-theme="velvet"]{
  --bg-0:#0f0620;--bg-1:#180b32;--bg-2:#22103f;--bg-3:#2d1552;
  --royal:#8b5cf6;--royal-bright:#a78bfa;--royal-deep:#6d28d9;
  --eye-red:#f487c2;--gold:#fcd949;--text:#ffffff;--text-soft:#f0e6ff;--text-dim:#cbb8f0;
  --line:rgba(167,139,250,.24);
  --card-grad:linear-gradient(145deg,#241040 0%,#160a2c 55%,#100621 100%);
  --panel-grad:linear-gradient(180deg,#1c0e38 0%,#12071f 100%);
  --btn-grad:linear-gradient(135deg,#a78bfa 0%,#6d28d9 100%);
  --btn-grad-hover:linear-gradient(135deg,#bda3fc 0%,#7c3aed 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%,#3b1a66 0%,transparent 60%),radial-gradient(945px 630px at -10% 100%,#2a1050 0%,transparent 55%),linear-gradient(180deg,#160a2c 0%,#0f0620 100%);
  --shadow:0 10px 40px rgba(20,4,40,.6);--glow:0 0 24px rgba(167,139,250,.5);
}
/* 2. Studio Gold — luxury/prestige label, black+gold = exclusivity */
[data-theme="gold"]{
  --bg-0:#0a0806;--bg-1:#161109;--bg-2:#221a0f;--bg-3:#2e2314;
  --royal:#d4af37;--royal-bright:#f0c94a;--royal-deep:#a8841f;
  --eye-red:#ff7a6d;--gold:#ffe793;--text:#ffffff;--text-soft:#f7ecd6;--text-dim:#d8c2a0;
  --line:rgba(212,175,55,.25);
  --card-grad:linear-gradient(145deg,#1e170c 0%,#130f08 55%,#0d0a06 100%);
  --panel-grad:linear-gradient(180deg,#1a1409 0%,#0d0a06 100%);
  --btn-grad:linear-gradient(135deg,#f0c94a 0%,#a8841f 100%);
  --btn-grad-hover:linear-gradient(135deg,#ffdc73 0%,#c69929 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%,#3a2c10 0%,transparent 60%),radial-gradient(945px 630px at -10% 100%,#241a0a 0%,transparent 55%),linear-gradient(180deg,#120e08 0%,#0a0806 100%);
  --shadow:0 10px 40px rgba(0,0,0,.6);--glow:0 0 24px rgba(240,201,74,.4);
}
/* 4. Crimson Stage — rock/live-performance label, red = action+excitement */
[data-theme="crimson"]{
  --bg-0:#140506;--bg-1:#210a0b;--bg-2:#2e0f10;--bg-3:#3d1416;
  --royal:#ef3d4e;--royal-bright:#ff5f6d;--royal-deep:#c31f30;
  --eye-red:#ffbf4d;--gold:#ffdb85;--text:#fff5f5;--text-soft:#ffe4e4;--text-dim:#e2b0b4;
  --line:rgba(239,61,78,.26);
  --card-grad:linear-gradient(145deg,#2c0e10 0%,#1e0a0b 55%,#140506 100%);
  --panel-grad:linear-gradient(180deg,#250c0d 0%,#140506 100%);
  --btn-grad:linear-gradient(135deg,#ff5f6d 0%,#c31f30 100%);
  --btn-grad-hover:linear-gradient(135deg,#ff828d 0%,#df2a3c 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%,#4a1215 0%,transparent 60%),radial-gradient(945px 630px at -10% 100%,#340d0f 0%,transparent 55%),linear-gradient(180deg,#1a0708 0%,#140506 100%);
  --shadow:0 10px 40px rgba(15,2,2,.6);--glow:0 0 24px rgba(255,95,109,.45);
}
/* 7. Slate Studio — corporate/B2B label services, gray-blue = neutral trust */
[data-theme="slate"]{
  --bg-0:#0c1014;--bg-1:#141a20;--bg-2:#1c242c;--bg-3:#252f39;
  --royal:#5b8caf;--royal-bright:#7bacd0;--royal-deep:#3d6e8f;
  --eye-red:#ea8b75;--gold:#e2c580;--text:#f5f8fa;--text-soft:#dde6ed;--text-dim:#a8bac6;
  --line:rgba(123,172,208,.22);
  --card-grad:linear-gradient(145deg,#1b232b 0%,#12181e 55%,#0c1014 100%);
  --panel-grad:linear-gradient(180deg,#161d24 0%,#0c1014 100%);
  --btn-grad:linear-gradient(135deg,#7bacd0 0%,#3d6e8f 100%);
  --btn-grad-hover:linear-gradient(135deg,#95c0df 0%,#4c81a4 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%,#233241 0%,transparent 60%),radial-gradient(945px 630px at -10% 100%,#1a232c 0%,transparent 55%),linear-gradient(180deg,#10151a 0%,#0c1014 100%);
  --shadow:0 10px 34px rgba(3,6,9,.55);--glow:0 0 20px rgba(123,172,208,.35);
}
/* 6. Deep Ocean — ambient/cinematic label, teal = depth+focus+premium calm */
[data-theme="ocean"]{
  --bg-0:#02141a;--bg-1:#052029;--bg-2:#082c39;--bg-3:#0c3949;
  --royal:#22b8cf;--royal-bright:#4fd3e6;--royal-deep:#158fa3;
  --eye-red:#ff8873;--gold:#edd082;--text:#effcff;--text-soft:#d9f2f8;--text-dim:#9ac4d0;
  --line:rgba(34,184,207,.25);
  --card-grad:linear-gradient(145deg,#0a2e3a 0%,#062028 55%,#02141a 100%);
  --panel-grad:linear-gradient(180deg,#082530 0%,#02141a 100%);
  --btn-grad:linear-gradient(135deg,#4fd3e6 0%,#158fa3 100%);
  --btn-grad-hover:linear-gradient(135deg,#72e0f0 0%,#1ba6bc 100%);
  --page-grad:radial-gradient(1260px 735px at 75% -10%,#0d3f4f 0%,transparent 60%),radial-gradient(945px 630px at -10% 100%,#083038 0%,transparent 55%),linear-gradient(180deg,#04191f 0%,#02141a 100%);
  --shadow:0 10px 36px rgba(1,8,10,.6);--glow:0 0 24px rgba(79,211,230,.4);
}

/* ============================================================
   5 ADDITIONAL LIGHT THEMES — light companions to the dark palettes
   ============================================================ */
/* Velvet Light — soft lavender, creative + airy */
[data-theme="velvet-light"]{
  --bg-0:#f6f2ff;--bg-1:#efe7ff;--bg-2:#e4d6ff;--bg-3:#d8c4fb;
  --royal:#7c3aed;--royal-bright:#8b5cf6;--royal-deep:#6d28d9;
  --eye-red:#ec4899;--gold:#d97706;--text:#241540;--text-soft:#3d2564;--text-dim:#7156a3;
  --line:rgba(124,58,237,.22);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#f3ecff 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#efe4ff 100%);
  --btn-grad:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);
  --btn-grad-hover:linear-gradient(135deg,#9d72f9 0%,#7c3aed 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%,#e2d2ff 0%,transparent 60%),linear-gradient(180deg,#faf7ff 0%,#f1e9ff 100%);
  --shadow:0 10px 30px rgba(109,40,217,.13);--glow:0 0 20px rgba(139,92,246,.28);
}
/* Studio Gold Light — cream + bronze, editorial luxury */
[data-theme="gold-light"]{
  --bg-0:#fbf6ea;--bg-1:#f5ecd6;--bg-2:#efe2bf;--bg-3:#e6d3a2;
  --royal:#a8781f;--royal-bright:#c4952f;--royal-deep:#8a611a;
  --eye-red:#d64545;--gold:#b8860b;--text:#2a2010;--text-soft:#4a3a1c;--text-dim:#8a7548;
  --line:rgba(168,120,31,.25);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#f8f0dc 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#f3e8cd 100%);
  --btn-grad:linear-gradient(135deg,#c4952f 0%,#8a611a 100%);
  --btn-grad-hover:linear-gradient(135deg,#d3a748 0%,#9c7020 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%,#eeddb0 0%,transparent 60%),linear-gradient(180deg,#fdfaf1 0%,#f5ecd6 100%);
  --shadow:0 10px 28px rgba(138,97,26,.14);--glow:0 0 18px rgba(196,149,47,.3);
}
/* Crimson Light — warm ivory + red, energetic but clean */
[data-theme="crimson-light"]{
  --bg-0:#fff5f4;--bg-1:#ffe8e6;--bg-2:#ffd6d3;--bg-3:#ffc0bb;
  --royal:#d1293c;--royal-bright:#e8394c;--royal-deep:#a81f2f;
  --eye-red:#ff8a3d;--gold:#e0a020;--text:#340c10;--text-soft:#5c1a20;--text-dim:#a66c70;
  --line:rgba(209,41,60,.22);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#ffeceb 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#ffe5e3 100%);
  --btn-grad:linear-gradient(135deg,#e8394c 0%,#a81f2f 100%);
  --btn-grad-hover:linear-gradient(135deg,#f0576a 0%,#c22d3f 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%,#ffd7d3 0%,transparent 60%),linear-gradient(180deg,#fffaf9 0%,#ffe9e7 100%);
  --shadow:0 10px 28px rgba(168,31,47,.13);--glow:0 0 18px rgba(232,57,76,.28);
}
/* Slate Light — cool gray-blue, corporate/clean */
[data-theme="slate-light"]{
  --bg-0:#f4f7fa;--bg-1:#e9eef3;--bg-2:#dce4ec;--bg-3:#cbd7e2;
  --royal:#3d6e8f;--royal-bright:#4c81a4;--royal-deep:#2c5670;
  --eye-red:#c85a42;--gold:#b8973f;--text:#141d24;--text-soft:#2a3944;--text-dim:#647885;
  --line:rgba(61,110,143,.2);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#eef3f7 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#e7eef3 100%);
  --btn-grad:linear-gradient(135deg,#4c81a4 0%,#2c5670 100%);
  --btn-grad-hover:linear-gradient(135deg,#5f94b7 0%,#396a86 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%,#dbe6ee 0%,transparent 60%),linear-gradient(180deg,#f9fbfd 0%,#e9eef3 100%);
  --shadow:0 8px 24px rgba(20,29,36,.1);--glow:0 0 16px rgba(76,129,164,.25);
}
/* Deep Ocean Light — sea-glass teal, fresh + premium */
[data-theme="ocean-light"]{
  --bg-0:#f0fbfc;--bg-1:#e0f4f6;--bg-2:#cdeaee;--bg-3:#b6dde3;
  --royal:#158fa3;--royal-bright:#1ba6bc;--royal-deep:#0f7385;
  --eye-red:#e0654a;--gold:#c99a3a;--text:#062226;--text-soft:#0e3a41;--text-dim:#4d838c;
  --line:rgba(21,143,163,.22);
  --card-grad:linear-gradient(145deg,#ffffff 0%,#e6f7f9 100%);
  --panel-grad:linear-gradient(180deg,#ffffff 0%,#ddf2f4 100%);
  --btn-grad:linear-gradient(135deg,#1ba6bc 0%,#0f7385 100%);
  --btn-grad-hover:linear-gradient(135deg,#35bcd1 0%,#158a9c 100%);
  --page-grad:radial-gradient(1155px 630px at 80% -10%,#c9edf1 0%,transparent 60%),linear-gradient(180deg,#f7fdfe 0%,#e0f4f6 100%);
  --shadow:0 10px 26px rgba(15,115,133,.13);--glow:0 0 18px rgba(27,166,188,.28);
}
[data-theme="velvet-light"] input,[data-theme="velvet-light"] select,[data-theme="velvet-light"] textarea,
[data-theme="gold-light"] input,[data-theme="gold-light"] select,[data-theme="gold-light"] textarea,
[data-theme="crimson-light"] input,[data-theme="crimson-light"] select,[data-theme="crimson-light"] textarea,
[data-theme="slate-light"] input,[data-theme="slate-light"] select,[data-theme="slate-light"] textarea,
[data-theme="ocean-light"] input,[data-theme="ocean-light"] select,[data-theme="ocean-light"] textarea{background:#fff}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:14.5px}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--page-grad) fixed;
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
}
h1,h2,h3,.display{font-family:'Unbounded',sans-serif;letter-spacing:.5px;line-height:1.15}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--royal-bright);text-decoration:none}
img,svg{max-width:100%}

/* ---------- App shell ---------- */
.shell{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{flex:1;padding:32px clamp(18px,4vw,56px);max-width:1400px;width:100%;margin:0 auto}

/* ---------- Sidebar ---------- */
.sidebar{
  width:210px;flex-shrink:0;background:var(--panel-grad);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
  padding:16px 12px;position:sticky;top:60px;height:calc(100vh - 60px);
  transition:width .28s ease;overflow:hidden;
}
.sidebar.collapsed{width:68px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;white-space:nowrap}
.sidebar .brand .logo{width:40px;height:40px;flex-shrink:0}
.sidebar .brand .name{font-family:'Unbounded';font-weight:800;font-size:.82rem;color:var(--text)}
.sidebar .brand .name span{color:var(--eye-red)}
.sidebar.collapsed .brand .name{opacity:0}
.side-status{
  padding:11px 16px;border-radius:14px;background:var(--card-grad);border:1px solid var(--line);
  margin:0 2px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden;
}
.side-status .ss-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:700}
.side-status .ss-points{font-family:'Unbounded';font-size:1.05rem;color:var(--text)}
.side-status .ss-login-btn{
  width:100%;padding:9px 0;border-radius:10px;border:none;background:var(--btn-grad);
  color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;
}
.sidebar.collapsed .side-status{padding:11px 0;justify-content:center}
.sidebar.collapsed .side-status .ss-label,.sidebar.collapsed .side-status .ss-login-btn{display:none}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  color:var(--text-soft);font-weight:600;font-size:.76rem;white-space:nowrap;
  transition:.18s;border:1px solid transparent;
}
.nav-link svg{width:17px;height:17px;flex-shrink:0}
.nav-link:hover{background:var(--bg-2);color:var(--text)}
.nav-link.active{background:var(--btn-grad);color:#fff;box-shadow:var(--glow)}
.sidebar.collapsed .nav-link .lbl{opacity:0}
.collapse-btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;
  padding:10px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--text-soft);cursor:pointer;transition:.18s;
}
.collapse-btn:hover{color:var(--text);border-color:var(--royal-bright)}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,22,56,.65),transparent);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;
}
.topbar-full{
  width:100%;background:var(--panel-grad);backdrop-filter:none;
  position:sticky;top:0;z-index:300;padding:12px clamp(16px,3vw,32px);
}
[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)}
.topbar .crumbs{font-weight:700;font-size:1rem}
.topbar .crumbs em{font-style:normal;color:var(--text-dim);font-weight:500}

/* Theme flipper switch */
.flipper{
  position:relative;width:64px;height:32px;border-radius:20px;cursor:pointer;
  background:var(--card-grad);border:1px solid var(--line);flex-shrink:0;
  transition:.2s;
}
.flipper .knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--btn-grad);box-shadow:var(--glow);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:left .25s ease;
}
[data-theme="light"] .flipper .knob{left:35px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:14px;
  font-family:'Inter';font-weight:700;font-size:.95rem;cursor:pointer;border:none;
  background:var(--btn-grad);color:#fff;box-shadow:var(--glow);transition:.2s;
}
.btn:hover{background:var(--btn-grad-hover);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1.5px solid var(--royal-bright);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--bg-2)}
.btn.red{background:linear-gradient(135deg,#ff5b6a,#d81f33)}
.btn.gold{background:linear-gradient(135deg,#ffd76a,#e0a020);color:#221500}

/* ---------- Cards ---------- */
.card{
  background:var(--card-grad);border:1px solid var(--line);border-radius:20px;
  padding:26px;box-shadow:var(--shadow),0 0 22px -6px var(--royal-bright);transition:.25s;position:relative;overflow:hidden;
}
.card-glass{
  background:linear-gradient(135deg,rgba(111,216,255,.12) 0%,rgba(168,10,243,.10) 50%,rgba(255,45,149,.10) 100%),var(--card-grad);
  backdrop-filter:blur(6px);
}
.card:hover{transform:translateY(-4px);border-color:var(--royal-bright);box-shadow:var(--shadow),0 0 30px -4px var(--royal-bright)}
.card h3{font-size:1.05rem;margin-bottom:10px}
.card p{color:var(--text-dim);font-size:1rem;line-height:1.5}
.card .icon{
  width:48px;height:48px;border-radius:14px;background:var(--btn-grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--glow);
}
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---------- Sections / eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';
  font-size:.82rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-soft);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--eye-red)}
.section{padding:56px 0}
.section h2{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:14px}
.section .lead{color:var(--text-dim);max-width:640px;font-size:1.1rem;line-height:1.55}

/* ---------- Eclipse motif ---------- */
.eclipse{
  position:relative;width:180px;height:180px;border-radius:50%;
  background:#05081c;
  box-shadow:0 0 0 3px rgba(91,126,247,.9),0 0 60px 12px rgba(91,126,247,.55),0 0 140px 40px rgba(43,79,216,.35);
  animation:eclipsePulse 5s ease-in-out infinite;
}
@keyframes eclipsePulse{
  0%,100%{box-shadow:0 0 0 3px rgba(91,126,247,.9),0 0 60px 12px rgba(91,126,247,.55),0 0 140px 40px rgba(43,79,216,.35)}
  50%{box-shadow:0 0 0 3px rgba(255,200,74,.85),0 0 70px 16px rgba(91,126,247,.7),0 0 160px 50px rgba(43,79,216,.45)}
}
.eyes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:28px}
.eyes i{
  width:14px;height:14px;border-radius:50%;background:var(--eye-red);
  box-shadow:0 0 16px 4px rgba(255,59,78,.8);animation:blink 6s infinite;
}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);padding:34px clamp(18px,4vw,56px);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  color:var(--text-dim);font-size:.88rem;background:var(--panel-grad);
}
.footer b{color:var(--text)}
.footer b span{color:var(--eye-red)}

/* ---------- Forms / tables ---------- */
input,select,textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.45);
  background:var(--bg-1);color:var(--text);font-family:'Inter';font-size:1rem;outline:none;transition:.15s;
}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff;border-color:rgba(0,0,0,.3)}
[data-theme="pulsechain-light"] input,[data-theme="pulsechain-light"] select,[data-theme="pulsechain-light"] textarea,
[data-theme="velvet-light"] input,[data-theme="gold-light"] input,[data-theme="crimson-light"] input,
[data-theme="slate-light"] input,[data-theme="ocean-light"] input{border-color:rgba(0,0,0,.3)}
input::placeholder,textarea::placeholder{color:var(--text-dim);opacity:.85}
input:focus,select:focus,textarea:focus{border-color:var(--royal-bright);box-shadow:var(--glow)}
label{font-weight:700;font-size:.92rem;display:block;margin:14px 0 7px;color:var(--text-soft)}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:1rem}
th{font-family:'JetBrains Mono';font-size:.84rem;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);font-weight:700}

/* pills / badges */
.pill{display:inline-block;padding:5px 13px;border-radius:20px;font-size:.86rem;font-weight:700;background:var(--bg-2);border:1px solid var(--line);color:var(--text-soft)}
.pill.live{background:rgba(60,200,120,.15);color:#5ce69a;border-color:rgba(60,200,120,.4)}
.pill.red{background:rgba(255,59,78,.12);color:var(--eye-red);border-color:rgba(255,59,78,.4)}
.pill.gold{background:rgba(255,200,74,.12);color:var(--gold);border-color:rgba(255,200,74,.4)}

/* animations */
.rise{opacity:0;transform:translateY(24px);transition:.7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}
@media (max-width:860px){
  .sidebar{position:fixed;z-index:100;left:0;transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-flex!important}
}
.nav-item-wrap{position:relative}
.nav-flyout{
  position:absolute;left:100%;top:0;padding-left:10px;width:350px;
  display:none;z-index:200;
}
.nav-flyout-inner{
  background:var(--panel-grad);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.nav-item-wrap:hover .nav-flyout,.nav-flyout:hover{display:block}
.sidebar.collapsed .nav-flyout{left:80px}
.flyout-card{
  display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--card-grad);
  border:1px solid var(--line);text-decoration:none;transition:.15s;
}
.flyout-card:hover{border-color:var(--royal-bright);transform:translateY(-2px)}
.flyout-card .fc-title{font-weight:800;font-size:.88rem;color:var(--text)}
.flyout-card .fc-desc{font-size:.74rem;color:var(--text-dim);line-height:1.3}
.nav-link .caret{margin-left:auto;opacity:.5;font-size:.7rem}
.sidebar.collapsed .caret{display:none}
@media(max-width:860px){.nav-flyout{position:static;margin-left:0;width:100%;display:none;grid-template-columns:1fr}
  .nav-item-wrap.open .nav-flyout{display:grid}}
/* ============================================================
   TOP NAVBAR — used on all pages EXCEPT BearTracker/Productions
   (those keep the sidebar). Structure lifted from the "rounded
   pill bar" pattern; colors are 100% our own theme.
   ============================================================ */
.topnav-page{min-height:100vh;background:var(--page-grad)}
.topnav-bar{
  display:flex;align-items:center;gap:18px;margin:14px auto 0;max-width:1400px;
  padding:10px 18px;border-radius:20px;background:var(--panel-grad);border:1px solid var(--line);
  box-shadow:var(--shadow);position:sticky;top:14px;z-index:100;
}
.topnav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.topnav-brand .logo{width:38px;height:38px}
.topnav-brand .name{font-family:'Bungee',cursive;font-size:.95rem;letter-spacing:.5px;line-height:1.1}
.topnav-brand .name .b1{color:var(--text)}
.topnav-brand .name .b2{color:var(--eye-red)}
.topnav-links{display:flex;align-items:center;gap:4px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:5px;flex:1;justify-content:center;flex-wrap:wrap}
.topnav-item-wrap{position:relative}
.topnav-link{padding:9px 16px;border-radius:10px;font-weight:700;font-size:.82rem;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.topnav-link:hover{color:var(--text);background:var(--bg-2)}
.topnav-link.active{background:var(--btn-grad);color:#fff;box-shadow:var(--glow)}
.topnav-dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);width:320px;padding-top:10px;
  display:none;z-index:200;
}
.topnav-dropdown-inner{
  background:var(--panel-grad);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.topnav-item-wrap:hover .topnav-dropdown,.topnav-dropdown:hover{display:block}
.topnav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topnav-theme-picker{position:relative}
@media(max-width:960px){
  .topnav-links{display:none}
  .topnav-mobile-btn{display:inline-flex!important}
  .topnav-links.mobile-open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--panel-grad);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
  .topnav-dropdown{position:static;transform:none;width:100%;margin-top:6px}
}
.topnav-mobile-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:8px 12px;cursor:pointer}
.topnav-content{max-width:1400px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 60px}
.topnav-footer{
  border-top:1px solid var(--line);padding:34px clamp(18px,4vw,56px);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  color:var(--text-dim);font-size:.82rem;background:var(--panel-grad);margin-top:40px;
}

.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:8px 12px;cursor:pointer}

/* ---------- Bear wordmark ---------- */
.bear-word{font-family:'Bungee',cursive;letter-spacing:.5px;text-transform:uppercase;line-height:1}
.bear-word .b1{color:var(--text)}
.bear-word .b2{color:var(--eye-red)}

/* ---------- Logo with moving eyes ---------- */
.bear-logo{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden}
.bear-logo img{width:100%;height:100%;object-fit:cover;display:block}
.bear-logo .eyedot{position:absolute;width:9%;height:9%;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,120,130,.9) 0%,rgba(255,45,45,.75) 55%,rgba(168,0,20,0) 100%);box-shadow:0 0 5px 1px rgba(255,45,45,.4);opacity:.5;transition:transform .08s linear}

/* ---------- Wallet connect ---------- */
.wallet-pill{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:30px;background:var(--card-grad);border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:.85rem}
.wallet-pill .dot{width:8px;height:8px;border-radius:50%;background:#5ce69a;box-shadow:0 0 6px 1px #5ce69a}
.wallet-pill .av{width:26px;height:26px;border-radius:50%}

.wc-overlay{position:fixed;inset:0;background:rgba(5,2,12,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000}
.wc-overlay.open{display:flex}
.wc-modal{width:min(760px,92vw);max-height:88vh;background:var(--panel-grad);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;overflow:auto}
.wc-left{padding:26px 24px;background:var(--card-grad);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;position:relative}
.wc-left .logo-big{width:72px;height:72px}
.wc-right{padding:26px 24px}
.wc-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;z-index:2}
.wc-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:.86rem;cursor:pointer;margin-bottom:8px}
.wc-option:hover{border-color:var(--royal-bright)}
.wc-perk{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.wc-perk .ic{width:28px;height:28px;border-radius:8px;background:var(--btn-grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--glow);font-size:.8rem}
.wc-perk b{font-size:.88rem}
.wc-perk div div{font-size:.78rem!important;line-height:1.35}
.wc-secbox{width:100%;margin-top:10px;padding:10px 14px;border-radius:12px;background:rgba(92,230,154,.08);border:1px solid rgba(92,230,154,.3);text-align:left}
.wc-sec-title{font-weight:700;font-size:.78rem;margin-bottom:4px;color:var(--text)}
.wc-sec-item{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-dim);padding:2px 0}
.wc-sec-item .check{color:#5ce69a;font-weight:800;flex-shrink:0}
@media(max-width:720px){.wc-modal{grid-template-columns:1fr}}

/* ---------- Theme picker dropdown ---------- */
.theme-picker{position:relative}
.theme-trigger{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--card-grad);color:var(--text);cursor:pointer;font-size:.85rem;font-weight:600;
}
.theme-trigger .sw{width:14px;height:14px;border-radius:50%;background:var(--btn-grad);box-shadow:var(--glow)}
.theme-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:240px;max-height:360px;overflow-y:auto;
  background:var(--panel-grad);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:8px;display:none;z-index:200;
}
.theme-menu.open{display:block}
.theme-opt{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:.85rem;color:var(--text-soft);
}
.theme-opt:hover{background:var(--bg-2)}
.theme-opt.active{background:var(--bg-2);color:var(--text);font-weight:700}
.theme-opt .dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.25)}
.theme-opt small{margin-left:auto;color:var(--text-dim);font-weight:500}

/* ---------- Hero extras ---------- */
.hero-wrap{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,60px);
  background:var(--card-grad);border:1px solid var(--line);isolation:isolate}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;pointer-events:none}
.hero-blob.b1{width:420px;height:420px;background:var(--btn-grad);top:-160px;right:-120px;animation:float1 9s ease-in-out infinite}
.hero-blob.b2{width:300px;height:300px;background:var(--eye-red);bottom:-140px;left:-80px;opacity:.28;animation:float2 11s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,25px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}
.waveform{display:flex;align-items:flex-end;gap:4px;height:44px}
.waveform i{width:4px;border-radius:3px;background:var(--btn-grad);animation:wf 1.4s ease-in-out infinite}
@keyframes wf{0%,100%{height:20%}50%{height:100%}}
.badge-float{
  position:absolute;padding:9px 16px;border-radius:14px;background:var(--card-grad);border:1px solid var(--line);
  box-shadow:var(--shadow);font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:8px;animation:bob 5s ease-in-out infinite;
  z-index:5;white-space:nowrap;pointer-events:none;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero-blob,.waveform i,.badge-float{animation:none!important}}
@media(max-width:1080px){.badge-float{display:none}}