@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #050608;
  --bg-2: #090b0f;
  --panel: rgba(13, 16, 22, .82);
  --panel-2: rgba(16, 19, 26, .65);
  --line: rgba(255,255,255,.09);
  --text: #f5f7fa;
  --muted: #8b929f;
  --red: #ff342f;
  --orange: #ff8a00;
  --gold: #f9c53d;
  --blue: #3587ff;
  --green: #42ef9b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 3%, rgba(255,52,47,.10), transparent 26%),
    radial-gradient(circle at 10% 18%, rgba(249,197,61,.07), transparent 25%),
    linear-gradient(180deg, #07090d 0%, #040506 100%);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; opacity: .010; pointer-events:none; z-index:50; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position:fixed; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,70,40,.10), transparent 65%); pointer-events:none; transform:translate(-50%,-50%); z-index:0; filter:blur(8px); }

.topbar {
  position: sticky; top:0; z-index:40; height:76px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px,5vw,90px); border-bottom:1px solid var(--line); background:rgba(5,6,8,.82); backdrop-filter: blur(20px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(255,80,30,.25)); }
.brand div { display:flex; flex-direction:column; line-height:1; gap:4px; }
.brand strong { font:700 16px 'Space Grotesk'; letter-spacing:.14em; }
.brand span { font-size:9px; color:var(--muted); letter-spacing:.26em; }
.topbar nav { display:flex; gap:34px; font-size:13px; color:#b7bdc7; }
.topbar nav a { position:relative; transition:.25s; }
.topbar nav a:hover { color:#fff; }
.topbar nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-10px; height:1px; background:linear-gradient(90deg,var(--red),var(--gold)); transition:.3s; }
.topbar nav a:hover:after { right:0; }
.top-actions { display:flex; align-items:center; gap:18px; }
.whitelist-badge { font-size:10px; letter-spacing:.18em; color:#d9ffe9; border:1px solid rgba(66,239,155,.22); background:rgba(66,239,155,.06); padding:9px 12px; border-radius:999px; }
.whitelist-badge i { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; margin-right:7px; box-shadow:0 0 12px var(--green); }
.logout { font-size:12px; color:var(--muted); }

.section-pad { padding-left:clamp(24px,5vw,90px); padding-right:clamp(24px,5vw,90px); }
.hero { min-height:730px; position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding-top:65px; overflow:hidden; border-bottom:1px solid var(--line); }
.hero:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.015), transparent 35%), radial-gradient(circle at 75% 40%, rgba(255,61,35,.11), transparent 27%); }
.hero-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 75%,transparent); }
.hero-copy { position:relative; z-index:2; max-width:760px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.29em; color:#bdc2ca; text-transform:uppercase; margin-bottom:20px; }
.hero h1, .section-heading h2, .network-copy h2 { margin:0; font:600 clamp(48px,6vw,92px)/.94 'Space Grotesk'; letter-spacing:-.055em; }
.hero h1 span, .section-heading h2 span, .network-copy h2 span { color:transparent; background:linear-gradient(92deg,#fff 0%,var(--gold) 36%,var(--orange) 70%,var(--red)); -webkit-background-clip:text; background-clip:text; }
.hero-copy > p { color:#a6adb8; line-height:1.75; max-width:620px; font-size:15px; margin:28px 0 32px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:11px; height:48px; padding:0 20px; border-radius:9px; border:1px solid var(--line); font-weight:700; font-size:12px; letter-spacing:.03em; transition:.25s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,#d9231f,#ff5b31); box-shadow:0 12px 38px rgba(255,52,47,.18); border-color:rgba(255,100,75,.45); }
.btn-secondary { background:#11151c; }
.btn-discord { background:#5865f2; border-color:#6976ff; box-shadow:0 12px 32px rgba(88,101,242,.16); }
.btn-large { width:100%; height:56px; }

.hero-logo-wrap { min-height:520px; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.hero-logo { width:min(88%,580px); position:relative; z-index:4; filter:drop-shadow(0 30px 60px #000) drop-shadow(0 0 22px rgba(255,115,15,.10)); animation:floatLogo 6s ease-in-out infinite; }
.hero-ring { position:absolute; border:1px solid rgba(255,255,255,.075); border-radius:50%; }
.ring-one { width:490px; height:490px; animation:spin 25s linear infinite; border-top-color:rgba(255,65,30,.45); }
.ring-two { width:610px; height:610px; animation:spinReverse 34s linear infinite; border-right-color:rgba(249,197,61,.28); }
.hero-bottom { position:absolute; left:clamp(24px,5vw,90px); bottom:42px; display:flex; gap:42px; z-index:3; }
.metric { display:flex; align-items:center; gap:12px; }
.metric > span { color:#59606b; font:700 10px 'Space Grotesk'; }
.metric div { display:flex; flex-direction:column; gap:4px; }
.metric strong { font-size:11px; letter-spacing:.12em; }
.metric small { color:#707784; font-size:10px; }

.dashboard-grid { display:grid; grid-template-columns:1.08fr 1fr 1.1fr; gap:16px; padding-top:28px; padding-bottom:95px; }
.panel { min-height:285px; padding:24px; border:1px solid var(--line); border-radius:16px; position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(17,20,27,.92),rgba(8,10,14,.82)); box-shadow:0 24px 60px rgba(0,0,0,.22); }
.panel:before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-90px; top:-110px; background:radial-gradient(circle,rgba(255,78,38,.10),transparent 65%); }
.panel-label { color:#68707d; letter-spacing:.23em; font-size:9px; font-weight:800; margin-bottom:26px; }
.profile-head { display:flex; gap:16px; align-items:center; }
.avatar { width:72px; height:72px; border-radius:18px; object-fit:cover; border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 32px #000; }
.avatar-fallback { display:flex; align-items:center; justify-content:center; font:700 28px 'Space Grotesk'; background:linear-gradient(145deg,#202531,#11141a); }
.profile-head small { color:var(--green); font-size:10px; }
.profile-head h2 { margin:5px 0 5px; font:600 25px 'Space Grotesk'; }
.id-text { color:#636b78; font-size:9px; }
.profile-flags { display:flex; gap:7px; flex-wrap:wrap; margin-top:28px; }
.profile-flags span { color:#a9b1bc; background:#0a0d11; border:1px solid var(--line); border-radius:999px; padding:8px 9px; font-size:8px; letter-spacing:.08em; }
.server-live { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; margin-bottom:30px; }
.server-live i { width:11px; height:11px; background:var(--green); border-radius:50%; box-shadow:0 0 20px var(--green); }
.server-live span { color:#a5adb9; font-size:11px; }
.server-live strong { color:var(--green); font:700 20px 'Space Grotesk'; }
.status-row { display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid rgba(255,255,255,.055); color:#767e8b; font-size:11px; }
.status-row b { color:#cbd0d7; font-weight:600; }
.scanner { height:2px; background:#12161c; margin-top:20px; overflow:hidden; }
.scanner span { display:block; width:25%; height:100%; background:linear-gradient(90deg,transparent,var(--green),transparent); animation:scan 2.4s linear infinite; }
.quick-panel { display:flex; flex-direction:column; }
.quick-link { display:grid; grid-template-columns:74px 1fr auto; align-items:center; border-top:1px solid rgba(255,255,255,.06); padding:15px 0; transition:.25s; }
.quick-link:hover { padding-left:8px; }
.quick-link span { color:#666e7a; font-size:9px; letter-spacing:.12em; }
.quick-link b { font:600 14px 'Space Grotesk'; }
.quick-link i { color:var(--red); font-style:normal; }

.dealer-section { padding-bottom:110px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:45px; }
.section-heading h2 { font-size:clamp(42px,5vw,72px); }
.section-heading > p { max-width:410px; color:#7e8692; line-height:1.7; font-size:13px; }
.dealer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dealer-card { min-height:390px; padding:27px; border:1px solid var(--line); border-radius:18px; position:relative; overflow:hidden; background:#0a0d12; transition:.4s cubic-bezier(.2,.8,.2,1); }
.dealer-card:hover { transform:translateY(-8px); border-color:rgba(255,255,255,.18); }
.dealer-number { font:700 11px 'Space Grotesk'; color:#59616e; }
.dealer-content { position:absolute; left:27px; right:27px; bottom:28px; z-index:2; }
.dealer-content small { color:#7e8794; letter-spacing:.2em; font-size:8px; }
.dealer-content h3 { margin:8px 0 9px; font:600 clamp(50px,5vw,75px)/.86 'Space Grotesk'; letter-spacing:-.06em; }
.dealer-content p { color:#848c98; font-size:11px; margin-bottom:28px; }
.dealer-content span { font-size:10px; letter-spacing:.1em; }
.dealer-glow { position:absolute; width:320px; height:320px; border-radius:50%; right:-110px; top:-90px; opacity:.65; filter:blur(10px); }
.dealer-bmw .dealer-glow { background:radial-gradient(circle,rgba(33,130,255,.32),transparent 68%); }
.dealer-vw .dealer-glow { background:radial-gradient(circle,rgba(65,168,255,.23),transparent 68%); }
.dealer-soon .dealer-glow { background:radial-gradient(circle,rgba(255,64,35,.22),transparent 68%); }

.network-section { padding-bottom:90px; }
.network-card { min-height:460px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:linear-gradient(130deg,#0b0e13,#07080b); display:grid; grid-template-columns:1.15fr .85fr; align-items:center; padding:55px; position:relative; }
.network-card:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(88,101,242,.035),transparent 45%), radial-gradient(circle at 82% 50%,rgba(88,101,242,.13),transparent 25%); }
.network-copy { position:relative; z-index:2; }
.network-copy h2 { font-size:clamp(44px,5vw,72px); }
.network-copy p { max-width:570px; color:#7f8794; line-height:1.75; font-size:13px; }
.discord-url { display:inline-flex; margin-top:20px; padding:15px 18px; border-radius:10px; color:#cdd2ff; border:1px solid rgba(110,120,255,.28); background:rgba(88,101,242,.08); font:600 12px 'Space Grotesk'; letter-spacing:.04em; }
.network-orbit { height:360px; position:relative; display:flex; align-items:center; justify-content:center; }
.orbit { position:absolute; border:1px solid rgba(125,135,255,.18); border-radius:50%; }
.orbit-a { width:245px; height:245px; animation:spin 18s linear infinite; border-top-color:#6571ff; }
.orbit-b { width:330px; height:330px; animation:spinReverse 24s linear infinite; border-left-color:rgba(255,80,45,.33); }
.discord-core { width:142px; height:142px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0d1018; border:1px solid rgba(255,255,255,.13); box-shadow:0 0 60px rgba(88,101,242,.16); font:700 25px 'Space Grotesk'; }
.discord-core span { color:#707cff; }

footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(24px,5vw,90px); border-top:1px solid var(--line); color:#5e6571; font-size:10px; }
.footer-brand { display:flex; align-items:center; gap:10px; letter-spacing:.14em; color:#8b929c; }
.footer-brand img { width:34px; height:34px; object-fit:contain; }
footer a:hover { color:#fff; }

/* Auth */
.auth-page { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:38px; }
.auth-shell { width:min(1180px,100%); min-height:700px; display:grid; grid-template-columns:.92fr 1.08fr; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:rgba(8,10,14,.82); box-shadow:0 40px 120px rgba(0,0,0,.45); position:relative; z-index:2; }
.auth-card { padding:62px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.logo-halo { width:150px; height:150px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle,rgba(255,82,35,.11),transparent 68%); margin-bottom:18px; }
.auth-logo { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 18px 30px #000); }
.auth-card h1 { font:600 clamp(45px,5vw,66px)/.95 'Space Grotesk'; letter-spacing:-.055em; margin:6px 0 21px; }
.auth-card h1 span { color:var(--gold); }
.auth-copy { color:#8e96a2; max-width:500px; font-size:13px; line-height:1.65; }
.gate-list { margin:28px 0; border-top:1px solid var(--line); }
.gate-list div { padding:13px 0; border-bottom:1px solid var(--line); color:#a8b0bb; font-size:11px; }
.gate-list span { display:inline-block; width:42px; color:#5d6571; font-size:9px; }
.privacy { text-align:center; color:#59616c; font-size:9px; margin-top:12px; }
.auth-visual { position:relative; overflow:hidden; padding:58px; display:flex; flex-direction:column; justify-content:flex-end; background:radial-gradient(circle at 75% 25%,rgba(255,63,35,.15),transparent 30%), linear-gradient(145deg,#0b0d12,#050608); }
.visual-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; }
.visual-caption,.visual-title,.visual-stats,.ghost-link { position:relative; z-index:2; }
.visual-caption { color:#727a86; font-size:9px; letter-spacing:.28em; }
.visual-title { font:600 clamp(48px,5vw,74px)/.88 'Space Grotesk'; letter-spacing:-.06em; margin:18px 0 34px; }
.visual-title span { color:var(--red); }
.visual-stats { display:flex; gap:12px; }
.visual-stats div { border:1px solid var(--line); padding:13px 16px; min-width:104px; background:rgba(255,255,255,.018); }
.visual-stats strong,.visual-stats small { display:block; }
.visual-stats strong { font:700 16px 'Space Grotesk'; }
.visual-stats small { color:#69717d; font-size:8px; margin-top:4px; }
.ghost-link { margin-top:28px; color:#9ca4af; font-size:10px; }
.ambient { position:fixed; border-radius:50%; filter:blur(80px); opacity:.14; }
.ambient-one { width:450px; height:450px; background:#ff3c21; top:-160px; right:-130px; }
.ambient-two { width:400px; height:400px; background:#ffbc2f; bottom:-220px; left:-160px; }
.denied-shell { width:min(660px,calc(100% - 40px)); text-align:center; border:1px solid var(--line); border-radius:20px; padding:55px; background:rgba(9,11,15,.92); position:relative; z-index:2; }
.denied-logo { width:150px; height:150px; object-fit:contain; }
.denied-shell h1 { font:600 36px 'Space Grotesk'; margin:22px 0 10px; }
.denied-shell p { color:#8c949f; }
.status-pill { display:inline-block; padding:7px 10px; border-radius:999px; font-size:8px; letter-spacing:.2em; }
.status-red { color:#ff9d99; border:1px solid rgba(255,70,60,.24); background:rgba(255,50,45,.06); }
.denied-actions { display:flex; justify-content:center; gap:10px; margin-top:28px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.reveal-delay { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
@keyframes floatLogo { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes spinReverse { to{transform:rotate(-360deg)} }
@keyframes scan { from{transform:translateX(-120%)} to{transform:translateX(500%)} }

@media (max-width: 1000px) {
  .topbar nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:90px; padding-bottom:180px; }
  .hero-logo-wrap { min-height:410px; }
  .hero-bottom { gap:20px; flex-wrap:wrap; }
  .dashboard-grid,.dealer-grid { grid-template-columns:1fr; }
  .network-card { grid-template-columns:1fr; padding:34px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-card { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width: 650px) {
  .topbar { padding:0 18px; }
  .brand span,.whitelist-badge { display:none; }
  .section-pad { padding-left:18px; padding-right:18px; }
  .hero h1 { font-size:48px; }
  .hero-bottom { left:18px; bottom:30px; }
  .metric:nth-child(3) { display:none; }
  .auth-page { padding:14px; }
  .auth-card,.auth-visual { padding:30px; }
  .visual-stats { flex-wrap:wrap; }
  footer { align-items:flex-start; flex-direction:column; padding-top:30px; padding-bottom:30px; }
}


/* =========================================================
   GMBRP V4 – Extensions for Economy / Business / Admin
   Uses the original dashboard visual language.
   ========================================================= */

.economy-section { padding-top: 28px; padding-bottom: 20px; }

.economy-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.economy-card {
  position:relative;
  min-height:155px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(17,20,27,.92),rgba(8,10,14,.82));
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.economy-card:before {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-55px;
  top:-65px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,75,30,.13),transparent 68%);
}

.economy-card.blue:before { background:radial-gradient(circle,rgba(53,135,255,.18),transparent 68%); }
.economy-card.gold:before { background:radial-gradient(circle,rgba(249,197,61,.16),transparent 68%); }
.economy-card.green:before { background:radial-gradient(circle,rgba(66,239,155,.13),transparent 68%); }

.economy-card small {
  position:relative;
  z-index:2;
  display:block;
  color:#68707d;
  letter-spacing:.19em;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

.economy-card strong {
  position:relative;
  z-index:2;
  display:block;
  margin-top:16px;
  font:600 30px 'Space Grotesk';
  letter-spacing:-.04em;
}

.economy-card span {
  position:relative;
  z-index:2;
  display:block;
  margin-top:6px;
  color:#707784;
  font-size:10px;
}

.business-section { padding-top:35px; padding-bottom:55px; }

.business-card {
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(130deg,#0b0e13,#07080b);
  padding:32px;
  position:relative;
  overflow:hidden;
}

.business-card:before {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  top:-180px;
  right:-110px;
  background:radial-gradient(circle,rgba(249,197,61,.11),transparent 67%);
}

.business-head {
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:24px;
}

.business-head h2 {
  margin:6px 0 0;
  font:600 38px 'Space Grotesk';
  letter-spacing:-.045em;
}

.business-role {
  color:#ffe9aa;
  border:1px solid rgba(249,197,61,.22);
  background:rgba(249,197,61,.06);
  border-radius:999px;
  padding:9px 13px;
  font-size:9px;
  letter-spacing:.17em;
  font-weight:800;
}

.business-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.business-stat {
  min-height:105px;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.018);
}

.business-stat span {
  display:block;
  color:#69717d;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.business-stat strong {
  display:block;
  margin-top:10px;
  font:600 21px 'Space Grotesk';
}

.admin-section { padding-bottom:100px; }

.admin-shell {
  border:1px solid rgba(255,52,47,.17);
  border-radius:18px;
  padding:28px;
  background:linear-gradient(145deg,rgba(36,9,10,.28),rgba(8,10,14,.86));
  position:relative;
  overflow:hidden;
}

.admin-shell:before {
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  right:-100px;
  top:-170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,52,47,.12),transparent 68%);
}

.admin-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  position:relative;
  z-index:2;
  margin-bottom:20px;
}

.admin-heading h2 {
  margin:6px 0 0;
  font:600 38px 'Space Grotesk';
  letter-spacing:-.045em;
}

.secure-badge {
  border:1px solid rgba(255,70,60,.22);
  color:#ff9d99;
  background:rgba(255,50,45,.06);
  padding:8px 11px;
  border-radius:999px;
  font-size:8px;
  letter-spacing:.17em;
  font-weight:800;
}

.admin-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.admin-card {
  min-height:190px;
  padding:20px;
  border:1px solid var(--line);
  background:#0a0d12;
  position:relative;
  overflow:hidden;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}

.admin-card:hover {
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.16);
}

.admin-card:after {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-70px;
  top:-80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,52,47,.12),transparent 70%);
}

.admin-card .icon {
  font-size:25px;
  position:relative;
  z-index:2;
}

.admin-card h3 {
  position:relative;
  z-index:2;
  margin:24px 0 8px;
  font:600 18px 'Space Grotesk';
}

.admin-card p {
  position:relative;
  z-index:2;
  color:#737c89;
  font-size:10px;
  line-height:1.65;
}

.admin-card small {
  position:absolute;
  bottom:18px;
  left:20px;
  z-index:2;
  color:#94463d;
  font-size:7px;
  letter-spacing:.18em;
}

.role-owner { color:var(--gold) !important; border-color:rgba(249,197,61,.24) !important; }
.role-admin { color:#ff9d99 !important; border-color:rgba(255,52,47,.24) !important; }
.role-player { color:#a7f5cd !important; border-color:rgba(66,239,155,.22) !important; }

@media (max-width: 1000px) {
  .economy-grid { grid-template-columns:1fr 1fr; }
  .business-grid { grid-template-columns:1fr 1fr; }
  .admin-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 650px) {
  .economy-grid,.business-grid,.admin-grid { grid-template-columns:1fr; }
  .business-head,.admin-heading { align-items:flex-start; flex-direction:column; }
}


/* Safe reveal: content remains visible if JavaScript fails */
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(22px); }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }


/* =========================================================
   Compact music player
   ========================================================= */
.music-player{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(8,10,14,.72);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  min-width:360px;
}

.music-toggle{
  height:34px;
  min-width:76px;
  padding:0 10px;
  border:1px solid rgba(255,90,50,.28);
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,#b91f1a,#ff5b31);
  font:700 10px 'Space Grotesk';
  letter-spacing:.08em;
  cursor:pointer;
  transition:.25s;
}

.music-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(255,52,47,.18);
}

.music-toggle.is-playing{
  background:#11151c;
  border-color:rgba(255,255,255,.12);
}

.music-meta{
  display:flex;
  min-width:88px;
  flex-direction:column;
  gap:2px;
  line-height:1.05;
}

.music-meta span{
  color:#59616d;
  font-size:7px;
  letter-spacing:.16em;
  font-weight:800;
}

.music-meta strong{
  max-width:96px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 11px 'Space Grotesk';
}

.volume-wrap{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:145px;
}

.volume-icon{
  color:#656d79;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}

.volume-slider{
  width:90px;
  accent-color:var(--red);
  cursor:pointer;
}

#volumeValue{
  width:30px;
  color:#8b929f;
  font-size:8px;
  text-align:right;
}

@media (max-width: 1180px){
  .music-meta{display:none}
  .music-player{min-width:250px}
}

@media (max-width: 850px){
  .music-player{
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:80;
    min-width:280px;
    background:rgba(7,9,13,.94);
    backdrop-filter:blur(16px);
  }
}

@media (max-width: 480px){
  .music-player{left:12px;right:12px;min-width:0}
  .volume-wrap{flex:1}
  .volume-slider{width:100%}
}