/* ── DayZ Hub V2 design system ───────────────────────────────────────────────
   Premium dark/gold SaaS theme. Tokens from the V2 spec; class names unchanged
   so every existing view keeps working. */
:root{
  --bg-primary:#05070D; --bg-secondary:#0B1220; --bg-card:#111827; --bg-card-hover:#172033;
  --gold:#E7C98B; --gold-hover:#F4DDA5; --gold-dark:#B89455;
  --text-primary:#FFFFFF; --text-secondary:#AAB3C5; --text-muted:#828B9E;
  --success:#22C55E; --warning:#F59E0B; --danger:#EF4444; --info:#3B82F6;
  --border:#1C2536; --border-strong:#2A3650;
  --radius:18px; --radius-sm:12px; --radius-lg:22px;
  --shadow:0 14px 44px rgba(0,0,0,.5);
  --gold-grad:linear-gradient(135deg,#F4DDA5,#B89455);
  --font-display:'Oswald','Inter','Segoe UI',sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:'Inter','Segoe UI',Roboto,sans-serif;
  background:radial-gradient(1200px 620px at 50% -240px,#0C1424 0%,#05070D 56%) fixed, var(--bg-primary);
  color:var(--text-primary); min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}
a{ text-decoration:none; color:inherit; }

nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 50px; border-bottom:1px solid var(--border); background:rgba(11,18,32,.6); backdrop-filter:blur(12px); position:sticky; top:0; z-index:50; }
.brand{ font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; cursor:pointer; }
.brand span.dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); display:inline-block; }
.brand-logo{ height:58px; width:auto; object-fit:contain; display:inline-block; }
.sidebar-brand .brand-logo{ height:42px; width:auto; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease; }
.btn.primary{ background:var(--gold-grad); color:#1A1308; font-weight:700; box-shadow:0 6px 18px rgba(231,201,139,.18); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(231,201,139,.36); }
.btn.ghost{ background:rgba(255,255,255,.02); border:1px solid var(--border-strong); color:var(--text-primary); }
.btn.ghost:hover{ background:var(--bg-card-hover); border-color:var(--gold-dark); }
.btn.lg{ padding:14px 30px; font-size:15px; }
.btn.discord{ background:#5865F2; color:#fff; border:1px solid #5865F2; }
.btn.discord:hover{ background:#4752C4; border-color:#4752C4; transform:translateY(-1px); box-shadow:0 10px 26px rgba(88,101,242,.32); }
.btn.discord svg{ flex:none; }
footer a[href*="discord.gg"] svg{ width:15px; height:15px; }
footer a[href*="discord.gg"]:hover{ color:#9aa2ff !important; }

.wrap{ max-width:1040px; margin:0 auto; padding:50px 24px; }
h1{ font-size:32px; font-weight:700; margin-bottom:6px; letter-spacing:-.02em; }
.sub{ color:var(--text-secondary); font-size:14px; margin-bottom:34px; }

.guild-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.guild-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 120px), var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -20px rgba(0,0,0,.8); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.guild-card:hover{ transform:translateY(-3px); border-color:var(--gold-dark); box-shadow:var(--shadow); }
.guild-card .icon{ width:48px; height:48px; border-radius:50%; background:var(--bg-card-hover); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gold); }
.guild-card h3{ font-size:15px; font-weight:600; }

.card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 130px), var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -20px rgba(0,0,0,.8); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }

label{ display:block; font-size:12px; color:var(--text-secondary); margin-bottom:6px; margin-top:16px; font-weight:500; }
input[type=text], textarea, select{
  width:100%; background:var(--bg-secondary); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-primary); padding:11px 13px; font-size:13px; resize:vertical; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, textarea:focus, select:focus{ outline:none; border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(231,201,139,.14); }
input[type=color]{ width:46px; height:34px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-secondary); padding:2px; }
.row{ display:flex; gap:12px; align-items:center; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--border); font-size:13px; }
.toggle-row:first-of-type{ border-top:none; }
/* Modern switch toggles (was a native 18px checkbox) */
.toggle-row input[type=checkbox]{
  appearance:none; -webkit-appearance:none; margin:0; flex-shrink:0;
  width:40px; height:23px; border-radius:999px; background:var(--border-strong);
  position:relative; cursor:pointer; transition:background .22s ease;
}
.toggle-row input[type=checkbox]::after{
  content:""; position:absolute; top:3px; left:3px; width:17px; height:17px;
  border-radius:50%; background:#cdd3df; transition:transform .22s ease, background .22s ease;
}
.toggle-row input[type=checkbox]:checked{ background:var(--gold); }
.toggle-row input[type=checkbox]:checked::after{ transform:translateX(17px); background:#1A1308; }
.toggle-row input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(231,201,139,.25); }

.preview-embed{ background:var(--bg-card-hover); border-left:4px solid var(--accent, var(--gold)); border-radius:8px; padding:14px; margin-top:14px; font-size:13px; }
.preview-embed b{ display:block; margin-bottom:4px; }

.banner{ background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#7ee2a3; padding:12px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:13px; }
.info-note{ display:flex; gap:11px; align-items:flex-start; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.30); border-radius:var(--radius); padding:14px 18px; margin-bottom:20px; font-size:13px; color:var(--text-secondary); line-height:1.55; }
.info-note-ic{ font-size:16px; flex-shrink:0; line-height:1.3; }
.info-note strong{ color:var(--text-primary); }
.info-note a{ color:var(--gold); font-weight:600; }
.info-note a:hover{ text-decoration:underline; }

/* Community Polls (dashboard) */
.pc-opt-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.pc-opt-row .pc-opt-label{ flex:1; min-width:0; }
.pc-opt-row .pc-opt-url{ flex:1.3; min-width:0; }
.pc-opt-row input{ background:var(--bg-secondary); border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-primary); padding:9px 11px; font-size:13px; }
.pc-opt-x{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--danger); border-radius:var(--radius-sm); width:34px; height:34px; flex-shrink:0; cursor:pointer; font-size:13px; }
.pc-opt-x:hover{ background:rgba(239,68,68,.2); }
.poll-card{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; background:var(--bg-secondary); }
.poll-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.poll-card-q{ font-size:15px; font-weight:700; }
.poll-opt{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); }
.poll-opt:first-of-type{ border-top:none; }
.poll-opt-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.poll-lead{ color:var(--gold); font-weight:700; }
.poll-bar{ height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin:6px 0; }
.poll-bar span{ display:block; height:100%; background:var(--gold-grad); border-radius:4px; transition:width .4s ease; }
.poll-img-form{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.poll-img-form input{ flex:1; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); padding:6px 9px; font-size:11px; }
.poll-opt-thumb{ width:60px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--border); flex-shrink:0; }
.poll-preview{ max-width:540px; }
.poll-prev-embed{ border-left:4px solid #ED4245; background:#2b2d31; border-radius:4px; padding:12px 14px; }
.poll-prev-btn{ display:inline-block; background:#4e5058; color:#fff; font-size:12px; padding:7px 12px; border-radius:4px; margin:4px 5px 0 0; }
@media (max-width:700px){ .pc-opt-row{ flex-wrap:wrap; } .poll-opt-thumb{ width:48px; height:48px; } }

/* Homepage Trustpilot reviews zone */
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; max-width:1100px; margin:0 auto; }
.review-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.review-stars{ color:#00B67A; font-size:18px; letter-spacing:2px; margin-bottom:10px; }
.review-stars-off{ color:var(--border-strong); }
.review-text{ color:var(--text-secondary); font-size:14px; line-height:1.6; margin-bottom:14px; }
.review-author{ font-size:13px; color:var(--text-primary); }
.reviews-cta{ max-width:760px; margin:28px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:linear-gradient(135deg, rgba(231,201,139,.14), rgba(231,201,139,.04)); border:1px solid rgba(231,201,139,.3); border-radius:var(--radius); padding:18px 22px; font-size:14px; color:var(--text-secondary); }
.reviews-cta strong{ color:var(--gold); }
@media (max-width:600px){ .reviews-cta{ flex-direction:column; text-align:center; } }

/* Promo / claim page */
.promo-step{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border); }
.promo-step:last-of-type{ border-bottom:none; }
.promo-step-n{ width:28px; height:28px; border-radius:50%; background:var(--gold-grad); color:#1A1308; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.promo-code-box{ font-family:monospace; font-size:22px; font-weight:800; letter-spacing:2px; color:var(--gold); background:var(--bg-secondary); border:1px dashed var(--gold-dark); border-radius:var(--radius-sm); padding:14px 18px; text-align:center; margin:10px 0; }
.claim-status{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.claim-pending{ background:rgba(245,158,11,.15); color:var(--warning); }
.claim-approved{ background:rgba(34,197,94,.15); color:var(--success); }
.claim-rejected{ background:rgba(239,68,68,.15); color:var(--danger); }
.tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tabs a{ padding:8px 16px; border-radius:var(--radius-sm); font-size:13px; color:var(--text-secondary); border:1px solid var(--border); transition:all .15s ease; }
.tabs a.active{ background:var(--gold-grad); color:#1A1308; border-color:transparent; font-weight:600; }
.tabs a:hover:not(.active){ color:var(--text-primary); border-color:var(--border-strong); }
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.muted{ color:var(--text-muted); font-size:13px; }
/* Empty-state copy — the only content in a card when it has no data, so it must
   stay readable (text-secondary, not the metadata-only text-muted). */
.empty-note{ color:var(--text-secondary); font-size:13px; line-height:1.5; }

/* Landing page */
.hero{ max-width:1100px; margin:0 auto; padding:92px 24px 60px; text-align:center; }
.hero .eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); background:rgba(231,201,139,.1); border:1px solid rgba(231,201,139,.3); border-radius:999px; padding:6px 16px; margin-bottom:22px; }
.hero h1{ font-size:48px; line-height:1.12; margin-bottom:18px; letter-spacing:-.03em; }
.hero h1 span{ color:var(--gold); }
.hero .sub{ max-width:640px; margin:0 auto 34px; font-size:16px; line-height:1.6; color:var(--text-secondary); }
.hero .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.section{ max-width:1100px; margin:0 auto; padding:54px 24px; }
.section h2{ font-size:30px; margin-bottom:10px; text-align:center; letter-spacing:-.02em; }
.section .lead{ color:var(--text-secondary); font-size:14px; text-align:center; max-width:560px; margin:0 auto 40px; }

/* Tabbed feature showcase (homepage) */
.feature-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:18px; }
.feature-tab{ display:flex; align-items:center; gap:10px; padding:10px 18px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s ease; position:relative; overflow:hidden; }
.feature-tab .tab-num{ width:22px; height:22px; border-radius:50%; background:var(--bg-card-hover); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.feature-tab.active{ border-color:var(--gold-dark); background:rgba(231,201,139,.1); color:var(--text-primary); }
.feature-tab.active .tab-num{ background:var(--gold-grad); color:#1A1308; }
.feature-tab:hover:not(.active){ border-color:var(--border-strong); color:var(--text-primary); }
/* Progress bar */
.tab-bar{ position:absolute; bottom:0; left:0; width:0; height:2.5px; background:var(--gold-grad); pointer-events:none; }
.feature-tab.active .tab-bar{ animation:tab-adv 6s linear forwards; }
.ftabs-paused .feature-tab.active .tab-bar{ animation-play-state:paused; }
@keyframes tab-adv{ from{width:0} to{width:100%} }

/* Feature tier badges (Free / Premium 1 / Premium 2 / Premium 3) */
.tier-tag{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:999px; vertical-align:middle; text-transform:uppercase; white-space:nowrap; }
.tier-tag.tier-free{ background:rgba(170,179,197,.16); color:#AAB3C5; border:1px solid rgba(170,179,197,.32); }
.tier-tag.tier-premium1{ background:rgba(231,201,139,.14); color:var(--gold); border:1px solid rgba(231,201,139,.38); }
.tier-tag.tier-premium2{ background:rgba(255,138,61,.14); color:#FF8A3D; border:1px solid rgba(255,138,61,.38); }
.tier-tag.tier-premium3{ background:rgba(59,130,246,.14); color:#3B82F6; border:1px solid rgba(59,130,246,.38); }
.feature-showcase h3 .tier-tag{ font-size:11px; }

.feature-showcase{ max-width:760px; margin:0 auto 14px; text-align:center; }
.feature-showcase h3{ font-size:20px; margin-bottom:8px; }
.feature-showcase p{ color:var(--text-secondary); font-size:14px; line-height:1.6; }

.feature-preview{ max-width:880px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; min-height:260px; }
.feature-preview .mock-window{ background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.feature-preview .mock-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:13px; }
.feature-preview .mock-row:last-child{ border-bottom:none; }
.feature-preview .mock-pill{ font-size:11px; padding:3px 10px; border-radius:6px; background:rgba(231,201,139,.14); color:var(--gold); }
.feature-pane{ display:none; }
.feature-pane.active{ display:block; animation:featureIn .22s cubic-bezier(.22,.68,0,1.1); }
@keyframes featureIn{ from{opacity:0;transform:translateY(10px) scale(.99)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.ftab-hint{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:8px; opacity:0; transition:opacity .2s; pointer-events:none; }
.section#features:focus-within .ftab-hint{ opacity:1; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
.feature-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.feature-card:hover{ transform:translateY(-3px); border-color:var(--gold-dark); box-shadow:var(--shadow); }
.feature-card .emoji{ font-size:26px; margin-bottom:14px; display:block; }
.feature-card h3{ font-size:16px; margin-bottom:8px; font-weight:600; }
.feature-card p{ color:var(--text-secondary); font-size:13px; line-height:1.6; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; counter-reset:step; }
.step{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; position:relative; }
.step .num{ width:32px; height:32px; border-radius:50%; background:var(--gold-grad); color:#1A1308; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:14px; }
.step h3{ font-size:15px; margin-bottom:6px; font-weight:600; }
.step p{ color:var(--text-secondary); font-size:13px; line-height:1.6; }

.cta-band{ max-width:1100px; margin:30px auto 90px; padding:48px 40px; background:linear-gradient(135deg, rgba(231,201,139,.16), rgba(231,201,139,.04)); border:1px solid rgba(231,201,139,.28); border-radius:var(--radius-lg); text-align:center; }
.cta-band h2{ font-size:26px; margin-bottom:10px; }
.cta-band p{ color:var(--text-secondary); font-size:14px; margin-bottom:26px; }

.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:18px; align-items:stretch; }
.pricing-grid-3{ grid-template-columns:repeat(3, 1fr); max-width:1000px; margin:0 auto; }
@media (max-width:820px){ .pricing-grid-3{ grid-template-columns:1fr; max-width:420px; } }
.pricing-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pricing-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pricing-card.highlight{ border-color:var(--gold-dark); box-shadow:0 0 0 1px var(--gold-dark), 0 18px 46px rgba(231,201,139,.2); background:linear-gradient(150deg,#141d30 0%,#0E1626 60%,#111827 100%); }
.pricing-card .tier-name{ font-size:18px; font-weight:600; margin-bottom:8px; }
.pricing-card .tier-price{ font-size:30px; font-weight:700; margin-bottom:2px; }
.pricing-card .tier-price span{ font-size:13px; font-weight:500; color:var(--text-secondary); }
.pricing-card .tier-billing{ color:var(--text-muted); font-size:12px; margin-bottom:18px; }
.pricing-card ul{ list-style:none; padding:0; margin:0 0 22px; flex:1; }
.pricing-card ul li{ color:var(--text-primary); font-size:13px; line-height:1.95; padding-left:24px; position:relative; }
.pricing-card ul li:before{ content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700; }
/* Tier badges above plan name */
.pc-badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:3px 12px; border-radius:999px; margin-bottom:14px; width:fit-content; }
.pc-badge-free{ background:rgba(170,179,197,.1); color:var(--text-muted); border:1px solid rgba(170,179,197,.2); }
.pc-badge-pop{ background:var(--gold-grad); color:#1A1308; box-shadow:0 2px 10px rgba(231,201,139,.2); }
.pc-badge-p2{ background:rgba(255,138,61,.12); color:#FF8A3D; border:1px solid rgba(255,138,61,.28); }
/* Feature count line */
.pc-count{ font-size:11.5px; color:var(--text-muted); margin-bottom:18px; }
.highlight .pc-count{ color:var(--gold-dark); }
.pc-p2 .pc-count{ color:#c46010; }
/* Premium 2 card — orange treatment */
.pc-p2{ border-color:rgba(255,138,61,.38) !important; box-shadow:0 0 0 1px rgba(255,138,61,.18), 0 20px 50px rgba(255,138,61,.09) !important; background:linear-gradient(150deg,#1a1208 0%,#130d05 60%,#110f08 100%) !important; }
.pc-p2 .tier-name{ color:#FF8A3D; }
.pc-p2 ul li:before{ color:#FF8A3D; }
/* Orange P2 CTA button */
.btn.p2{ background:linear-gradient(135deg,#FF9A5C 0%,#C45010 100%); color:#fff !important; font-weight:700; border:none !important; box-shadow:0 4px 16px rgba(255,138,61,.28); }
.btn.p2:hover{ background:linear-gradient(135deg,#FFAA70 0%,#D46020 100%); transform:translateY(-1px); box-shadow:0 6px 22px rgba(255,138,61,.36); }
/* Comparison table — P2 column + colored checkmarks */
.cmp td.cmp-p2,.cmp th.cmp-p2{ background:rgba(255,138,61,.04); }
.cmp thead th.cmp-p2{ color:#FF8A3D; border-bottom:1px solid rgba(255,138,61,.3); }
.cmp .yes-p1{ color:var(--gold); font-weight:700; }
.cmp .yes-p2{ color:#FF8A3D; font-weight:700; }

/* Official hosting partner banner — on-brand premium card; EUGameHost blue is the
   single accent on the dark surface (was a neon cyberpunk strip). */
.eugh-strip{ max-width:1100px; margin:0 auto 60px; padding:0 24px; }
.eugh-banner{ display:flex; flex-direction:column; gap:11px; padding:30px 34px; border-radius:var(--radius-lg); text-decoration:none;
  background:linear-gradient(135deg, rgba(0,174,255,.06), transparent 60%), var(--bg-card);
  border:1px solid var(--border-strong); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.eugh-banner:hover{ border-color:rgba(0,174,255,.5); transform:translateY(-2px); box-shadow:0 18px 46px rgba(0,0,0,.45); }
.eugh-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5fc6ff; }
.eugh-dot{ width:7px; height:7px; border-radius:50%; background:#00aeff; box-shadow:0 0 8px rgba(0,174,255,.7); }
.eugh-title{ font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em; color:var(--text-primary); margin:0; }
.eugh-brand{ color:#33b8ff; }
.eugh-desc{ color:var(--text-secondary); font-size:14px; line-height:1.6; max-width:640px; margin:0; }
.eugh-cta{ align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#dff2ff;
  background:rgba(0,174,255,.14); border:1px solid rgba(0,174,255,.4); padding:9px 16px; border-radius:var(--radius-sm); transition:background .2s ease; }
.eugh-banner:hover .eugh-cta{ background:rgba(0,174,255,.22); }

footer{ border-top:1px solid var(--border); padding:28px 50px; text-align:center; color:var(--text-muted); font-size:13px; }

/* ── Dashboard top-nav layout ──────────────────────────────────────────────── */
.dash-layout{ display:flex; flex-direction:column; min-height:100vh; }

/* ── Top navigation bar ──────────────────────────────────────────────────────*/
.dash-topnav{
  position:sticky; top:0; z-index:200; flex-shrink:0;
  background:rgba(11,18,32,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px; padding:0 20px; height:58px;
  overflow:visible;
}
/* Brand */
.dtn-logo{ height:34px; width:auto; display:block; }
/* Server switcher */
.dtn-server{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:10px; padding:5px 10px 5px 5px; max-width:172px;
  transition:border-color .15s; flex-shrink:0;
}
.dtn-server:hover{ border-color:var(--gold-dark); }
.dtn-srv-ic{
  width:28px; height:28px; border-radius:7px; object-fit:cover; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.dtn-srv-fb{ background:var(--gold-grad); font-size:11px; font-weight:800; color:#1A1308; }
.dtn-srv-meta{ display:flex; flex-direction:column; min-width:0; flex:1; }
.dtn-srv-name{ font-size:12px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtn-srv-sub{ font-size:10px; color:var(--text-muted); }
.dtn-srv-arr{ font-size:11px; color:var(--text-muted); flex-shrink:0; }
/* Divider */
.dtn-div{ width:1px; height:24px; background:var(--border-strong); flex-shrink:0; margin:0 4px; }
/* Category groups */
.dtn-groups{ display:flex; align-items:center; gap:1px; flex:1; overflow:visible; scrollbar-width:none; min-width:0; }
.dtn-groups::-webkit-scrollbar{ display:none; }
.dtn-group{ position:relative; flex-shrink:0; }
/* <details> resets — strip browser disclosure marker, keep panel in DOM */
details.dtn-group{ list-style:none; }
details.dtn-group > summary{ list-style:none; }
details.dtn-group > summary::-webkit-details-marker{ display:none; }
details.dtn-group > .dtn-panel{ display:block !important; }
/* Category trigger button */
.dtn-cat{
  display:flex; align-items:center; gap:5px; padding:6px 13px;
  border-radius:8px; font-size:13px; font-weight:500;
  color:var(--text-secondary); background:transparent; border:none; cursor:pointer;
  transition:background .13s, color .13s; white-space:nowrap; position:relative;
  outline:none; -webkit-appearance:none;
}
.dtn-cat-arr{ font-size:10px; opacity:.55; transition:transform .2s ease; display:inline-block; }
.dtn-group:hover .dtn-cat,
.dtn-group:focus-within .dtn-cat{ background:rgba(255,255,255,.05); color:var(--text-primary); }
.dtn-group:hover .dtn-cat-arr,
.dtn-group:focus-within .dtn-cat-arr{ transform:rotate(180deg); }
.dtn-group-active .dtn-cat{ color:var(--gold); font-weight:600; }
.dtn-group-active .dtn-cat::after{
  content:''; position:absolute; bottom:-1px; left:13px; right:13px;
  height:2px; background:var(--gold-grad); border-radius:2px 2px 0 0;
}
/* Standalone link (Founder) */
.dtn-cat-link{ text-decoration:none; }
/* Hover/focus panel */
.dtn-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:400;
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:0 20px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(231,201,139,.05);
  padding:6px; min-width:214px;
  opacity:0; transform:translateY(-8px) scale(.98);
  pointer-events:none; transform-origin:top center;
  transition:opacity .18s ease, transform .18s ease;
}
.dtn-group:hover .dtn-panel,
.dtn-group:focus-within .dtn-panel,
.dtn-group.dtn-open .dtn-panel,
details.dtn-group[open] .dtn-panel{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.dtn-group.dtn-open .dtn-cat,
details.dtn-group[open] > summary{ background:rgba(255,255,255,.05); color:var(--text-primary); }
.dtn-group.dtn-open .dtn-cat-arr,
details.dtn-group[open] > summary .dtn-cat-arr{ transform:rotate(180deg); }
/* Items animate in when open */
.dtn-group:hover .dtn-item,
.dtn-group:focus-within .dtn-item,
.dtn-group.dtn-open .dtn-item,
details.dtn-group[open] .dtn-item{ opacity:1; transform:translateX(0); }
/* Right-align last panels so they don't overflow the viewport */
.dtn-groups .dtn-group:nth-last-child(-n+3) .dtn-panel{ left:auto; right:0; }
/* Panel items — staggered slide-in */
.dtn-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:8px; font-size:13px;
  color:var(--text-secondary); text-decoration:none;
  transition:background .12s, color .12s; position:relative;
  opacity:0; transform:translateX(-5px);
}
.dtn-group:hover .dtn-item,
.dtn-group:focus-within .dtn-item,
.dtn-group.dtn-open .dtn-item{ opacity:1; transform:translateX(0); }
.dtn-group:hover .dtn-item:nth-child(1),.dtn-group:focus-within .dtn-item:nth-child(1),.dtn-group.dtn-open .dtn-item:nth-child(1){ transition:opacity .14s ease 0ms,transform .14s ease 0ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(2),.dtn-group:focus-within .dtn-item:nth-child(2),.dtn-group.dtn-open .dtn-item:nth-child(2){ transition:opacity .14s ease 30ms,transform .14s ease 30ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(3),.dtn-group:focus-within .dtn-item:nth-child(3),.dtn-group.dtn-open .dtn-item:nth-child(3){ transition:opacity .14s ease 55ms,transform .14s ease 55ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(4),.dtn-group:focus-within .dtn-item:nth-child(4),.dtn-group.dtn-open .dtn-item:nth-child(4){ transition:opacity .14s ease 80ms,transform .14s ease 80ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(5),.dtn-group:focus-within .dtn-item:nth-child(5),.dtn-group.dtn-open .dtn-item:nth-child(5){ transition:opacity .14s ease 100ms,transform .14s ease 100ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(6),.dtn-group:focus-within .dtn-item:nth-child(6),.dtn-group.dtn-open .dtn-item:nth-child(6){ transition:opacity .14s ease 120ms,transform .14s ease 120ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(7),.dtn-group:focus-within .dtn-item:nth-child(7),.dtn-group.dtn-open .dtn-item:nth-child(7){ transition:opacity .14s ease 138ms,transform .14s ease 138ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(8),.dtn-group:focus-within .dtn-item:nth-child(8),.dtn-group.dtn-open .dtn-item:nth-child(8){ transition:opacity .14s ease 154ms,transform .14s ease 154ms,background .12s; }
.dtn-group:hover .dtn-item:nth-child(9),.dtn-group:focus-within .dtn-item:nth-child(9),.dtn-group.dtn-open .dtn-item:nth-child(9){ transition:opacity .14s ease 168ms,transform .14s ease 168ms,background .12s; }
.dtn-item:hover{ background:rgba(255,255,255,.06); color:var(--text-primary); }
.dtn-item.dtn-item-active{ background:linear-gradient(90deg,rgba(231,201,139,.1),rgba(231,201,139,.03)); color:var(--gold); font-weight:600; }
/* Item icon box */
.dtn-item-ic{
  width:26px; height:26px; min-width:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06); flex-shrink:0;
  transition:background .15s, border-color .15s;
}
.dtn-item.dtn-on .dtn-item-ic{ background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.18); }
.dtn-item.dtn-item-active .dtn-item-ic{ background:rgba(231,201,139,.12); border-color:rgba(231,201,139,.22); }
.dtn-item:hover .dtn-item-ic{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.12); }
.dtn-item.dtn-locked{ opacity:.45; }
.dtn-item.dtn-on{ color:var(--text-primary); }
.dtn-item-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtn-item-dot{
  width:6px; height:6px; border-radius:50%; background:var(--success);
  flex-shrink:0; box-shadow:0 0 5px rgba(34,197,94,.5);
}
.dtn-item-lock{
  font-size:9px; font-weight:700; letter-spacing:.02em;
  color:var(--text-muted); background:rgba(255,255,255,.07);
  padding:1px 5px; border-radius:4px; flex-shrink:0;
}
/* Right edge */
.dtn-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
.dtn-alert-btn{
  display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  background:rgba(239,68,68,.15); color:#f87171;
  padding:4px 10px; border-radius:8px; transition:background .14s;
}
.dtn-alert-btn:hover{ background:rgba(239,68,68,.28); }
.dtn-servers-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; font-size:16px;
  color:var(--text-muted); background:rgba(255,255,255,.04);
  transition:background .14s, color .14s;
}
.dtn-servers-btn:hover{ background:rgba(255,255,255,.09); color:var(--text-primary); }
.dtn-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--bg-card-hover); display:flex;
  align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--gold); flex-shrink:0;
}
.dtn-username{ font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.dtn-logout{ color:var(--text-muted); font-size:16px; padding:6px; border-radius:6px; flex-shrink:0; transition:color .14s, background .14s; }
.dtn-logout:hover{ color:var(--danger); background:rgba(239,68,68,.1); }

/* Main content — full width below topnav */
.dash-main{ flex:1; min-width:0; max-width:1140px; margin:0 auto; padding:36px 36px; width:100%; }

/* Stat cards / overview */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 110px), var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:22px 24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -20px rgba(0,0,0,.8); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.stat-card:hover{ transform:translateY(-3px); border-color:var(--gold-dark); box-shadow:var(--shadow); }
.stat-card .stat-label{ display:flex; align-items:center; justify-content:space-between; color:var(--text-secondary); font-size:13px; margin-bottom:10px; }
.stat-card .stat-icon{ width:40px; height:40px; border-radius:12px; background:var(--bg-card-hover); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--gold); }
.stat-card .stat-value{ font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1.05; }

/* Data tables, badges, pagination, avatars */
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; color:var(--text-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td{ padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:hover td{ background:var(--bg-card-hover); }
.cell-user{ display:flex; align-items:center; gap:10px; }
.cell-avatar{ width:32px; height:32px; border-radius:50%; background:var(--bg-card-hover); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0; }
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge.open{ background:rgba(34,197,94,.15); color:var(--success); }
.badge.closed{ background:rgba(239,68,68,.15); color:var(--danger); }
.pagination{ display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:6px 12px; border-radius:var(--radius-sm); font-size:13px; border:1px solid var(--border); color:var(--text-secondary); }
.pagination a:hover{ color:var(--text-primary); border-color:var(--border-strong); }
.pagination .current{ background:var(--gold-grad); color:#1A1308; border-color:transparent; }
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter-bar select, .filter-bar input{ background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); padding:8px 12px; font-size:13px; }
.leaderboard{ list-style:none; padding:0; margin:0; }
.leaderboard li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.leaderboard li:last-child{ border-bottom:none; }
.leaderboard .lb-rank{ color:var(--gold); font-weight:700; width:22px; }
.char-counter{ font-size:11px; color:var(--text-muted); text-align:right; margin-top:4px; }

/* Discord embed previews (homepage feature showcase) */
.dc-msg{ display:flex; gap:12px; align-items:flex-start; text-align:left; }
.dc-avatar{ width:40px; height:40px; border-radius:50%; background:var(--gold-grad); color:#1A1308; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
.dc-body{ flex:1; min-width:0; }
.dc-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dc-name{ font-weight:600; font-size:14px; color:#fff; }
.dc-bot{ font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:#5865F2; color:#fff; padding:1px 5px; border-radius:4px; }
.dc-time{ font-size:11px; color:var(--text-muted); }
.dc-ping{ font-size:13px; color:#c7ccf5; background:rgba(88,101,242,.12); display:inline-block; padding:0 4px; border-radius:3px; margin-bottom:7px; }
.dc-embed{ border:1px solid var(--border); border-left:4px solid var(--dc-accent,#E7C98B); background:#0A0E16; border-radius:6px; padding:14px 16px; max-width:540px; }
.dc-author{ font-size:12px; color:var(--text-secondary); margin-bottom:5px; font-weight:500; }
.dc-embed-title{ font-size:15px; font-weight:600; color:#fff; margin-bottom:6px; }
.dc-embed-desc{ font-size:13px; color:var(--text-secondary); line-height:1.55; }
.dc-embed-desc strong{ color:#fff; font-weight:600; }
.dc-mention{ color:#c7ccf5; background:rgba(88,101,242,.15); padding:0 3px; border-radius:3px; }
.dc-fields{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:13px; }
.dc-field-name{ font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.dc-field-val{ font-size:13px; color:var(--text-secondary); margin-top:2px; }
.dc-footer{ font-size:11px; color:var(--text-muted); margin-top:13px; }
.dc-reactions{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.dc-reaction{ display:inline-flex; align-items:center; gap:5px; font-size:12px; background:rgba(88,101,242,.1); border:1px solid rgba(88,101,242,.3); color:#c7ccf5; padding:2px 9px; border-radius:8px; }
.dc-buttons{ display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; }
.dc-btn{ font-size:12px; font-weight:600; padding:8px 14px; border-radius:6px; background:#4E5058; color:#fff; }
.dc-btn.primary{ background:#5865F2; }
.dc-btn.success{ background:#248046; }
.dc-btn.danger{ background:#DA373C; }

/* Activity timeline (overview) */
.tl-item{ position:relative; padding:0 0 16px 22px; border-left:2px solid var(--border); }
.tl-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl-dot{ position:absolute; left:-6px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--bg-card); }
.tl-action{ font-size:13px; color:var(--text-primary); line-height:1.45; }
.tl-meta{ font-size:11px; color:var(--text-muted); margin-top:3px; }

/* Overview widgets — quick actions, voters, status */
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qa-tile{ display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-secondary); transition:transform .15s ease, border-color .15s ease; }
.qa-tile:hover{ transform:translateY(-2px); border-color:var(--gold-dark); }
.qa-ic{ font-size:18px; flex-shrink:0; }
.qa-title{ font-size:13px; font-weight:600; color:var(--text-primary); }
.qa-sub{ font-size:11px; color:var(--text-muted); }
.voter-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
.voter-row:last-child{ border-bottom:none; }
.voter-rank{ color:var(--gold); font-weight:700; width:26px; flex-shrink:0; }
.voter-name{ flex:1; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voter-count{ color:var(--text-muted); font-size:12px; white-space:nowrap; flex-shrink:0; }
.status-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-secondary); }
.status-row:last-child{ border-bottom:none; }
.st-ok{ color:var(--success); font-size:12px; font-weight:600; }
.st-bad{ color:var(--danger); font-size:12px; font-weight:600; }

/* Overview — growth chart head, legend, range toggle */
.grid-growth{ display:grid; grid-template-columns:1.85fr 1fr; gap:20px; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.chart-legend{ display:flex; gap:14px; margin-top:6px; }
.cl-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.cl-item i{ display:inline-block; width:14px; height:3px; border-radius:2px; }
.range-toggle{ display:inline-flex; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:2px; flex-shrink:0; }
.range-toggle button{ background:none; border:none; color:var(--text-muted); font-size:11px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer; transition:all .15s ease; font-family:inherit; }
.range-toggle button.active{ background:var(--gold-grad); color:#1A1308; }
.range-toggle button:hover:not(.active){ color:var(--text-primary); }
#growthChart{ height:190px !important; }

/* Overview — recent activity feed with colored icons */
.ov-feed{ display:flex; flex-direction:column; gap:2px; }
.ov-act{ display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); }
.ov-act:last-child{ border-bottom:none; }
.ov-act-ic{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ov-act-title{ font-size:13px; color:var(--text-primary); line-height:1.4; }
.ov-act-meta{ font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Overview — system status with check icons */
.sr-left{ display:flex; align-items:center; gap:9px; }
.sr-ic{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.sr-ok{ background:rgba(34,197,94,.15); color:var(--success); }
.sr-bad{ background:rgba(239,68,68,.15); color:var(--danger); }

/* Overview — bottom trust strip */
.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.trust-item{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; gap:13px; }
.trust-ic{ font-size:22px; flex-shrink:0; }
.trust-t{ font-size:11px; color:var(--text-muted); }
.trust-s{ font-size:14px; font-weight:700; color:var(--text-primary); margin-top:1px; }
@media (max-width:880px){ .grid-growth{ grid-template-columns:1fr; } .trust-strip{ grid-template-columns:1fr 1fr; } }

/* Founder demo-mode banner */
.demo-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(231,201,139,.14),rgba(231,201,139,.04)); border:1px solid rgba(231,201,139,.35); border-radius:var(--radius); padding:12px 18px; margin-bottom:18px; font-size:13px; color:var(--text-secondary); }
.demo-banner strong{ color:var(--gold); }
.demo-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); margin-right:4px; }

/* ── Homepage hero v2 (product-as-hero) ─────────────────────────────────────── */
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{ font-size:14px; color:var(--text-secondary); font-weight:500; }
.nav-links a:hover{ color:var(--text-primary); }
.hero-v2{ max-width:1300px; margin:0 auto; padding:46px 24px 26px; display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--gold); background:rgba(231,201,139,.08); border:1px solid rgba(231,201,139,.3); border-radius:999px; padding:7px 16px; margin-bottom:22px; }
.hero-left h1{ font-size:52px; line-height:1.04; letter-spacing:-.03em; margin-bottom:20px; font-weight:800; }
.hero-left h1 .gold{ color:var(--gold); }
.hero-desc{ color:var(--text-secondary); font-size:15px; line-height:1.65; margin-bottom:14px; max-width:520px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin:24px 0 20px; }
.hero-checks{ display:flex; flex-wrap:wrap; gap:12px 22px; }
.hero-check{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-secondary); }
.hero-check .ck{ color:var(--gold); font-weight:700; }
.hero-stats{ max-width:1300px; margin:6px auto 44px; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hero-stat{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; display:flex; align-items:center; gap:16px; transition:transform .18s ease, border-color .18s ease; }
.hero-stat:hover{ transform:translateY(-3px); border-color:var(--gold-dark); }
.hero-stat .hs-ic{ font-size:22px; }
.hero-stat .hs-val{ font-size:25px; font-weight:800; letter-spacing:-.02em; }
.hero-stat .hs-lbl{ font-size:12px; color:var(--text-muted); }

/* ── Hero dashboard mockup ─────────────────────────────────────────────────── */
.hero-mock{ display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(15,21,36,.97),rgba(9,15,28,.98)); border:1px solid rgba(231,201,139,.22); border-radius:18px; overflow:hidden; box-shadow:0 32px 90px rgba(0,0,0,.65),0 0 70px rgba(231,201,139,.09),inset 0 1px 0 rgba(255,255,255,.04); }

/* Topbar */
.hm-bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); background:rgba(5,7,13,.7); flex-shrink:0; gap:8px; }
.hm-bar-brand{ font-size:11px; font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.hm-bar-icon{ color:var(--gold); }
.hm-bar-right{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.hm-server-name{ font-size:9px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.hm-server-ct{ font-size:8px; color:var(--text-muted); white-space:nowrap; }
.hm-ava{ width:18px; height:18px; border-radius:50%; background:var(--gold-grad); color:#1A1308; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:800; flex-shrink:0; }

/* Body */
.hm-body{ display:flex; flex:1; min-height:0; overflow:hidden; }

/* Sidebar */
.hm-side{ width:114px; flex-shrink:0; background:rgba(5,7,13,.55); border-right:1px solid var(--border); padding:7px 6px; }
.hm-sec{ font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding:6px 5px 3px; }
.hm-link{ font-size:9px; color:var(--text-secondary); padding:3px 5px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.6; }
.hm-active{ background:rgba(231,201,139,.12); color:var(--gold); box-shadow:inset 2px 0 0 var(--gold); font-weight:600; }

/* Main content */
.hm-main{ flex:1; min-width:0; padding:9px 10px; overflow:hidden; }
.hm-pg-hd{ margin-bottom:7px; }
.hm-pg-title{ font-size:13px; font-weight:700; line-height:1; }
.hm-pg-sub{ font-size:7.5px; color:var(--text-muted); margin-top:2px; }

/* KPI cards */
.hm-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:6px; }
.hm-kpi{ background:var(--bg-card); border:1px solid var(--border); border-radius:7px; padding:6px 7px; }
.hm-kl{ font-size:7px; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.hm-kic{ font-size:9px; }
.hm-kv{ font-size:13px; font-weight:800; letter-spacing:-.01em; }
.hm-kt{ font-size:6.5px; margin-top:2px; }
.hm-kt.up{ color:var(--success); }
.hm-kt.down{ color:var(--danger); }

/* Charts row */
.hm-row2{ display:grid; grid-template-columns:1.6fr 1fr; gap:5px; margin-bottom:5px; }
.hm-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:7px; padding:7px 8px; }
.hm-ct{ font-size:8px; color:var(--text-secondary); font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.hm-badge{ font-size:6px; background:rgba(231,201,139,.12); color:var(--gold); border:1px solid rgba(231,201,139,.25); border-radius:999px; padding:1px 5px; white-space:nowrap; }
.hm-legend-row{ display:flex; gap:6px; margin-bottom:3px; }
.hm-leg{ display:flex; align-items:center; gap:3px; font-size:6.5px; color:var(--text-muted); }
.hm-leg i{ display:inline-block; width:12px; height:2px; border-radius:1px; flex-shrink:0; font-style:normal; }
.hm-svg{ width:100%; height:40px; display:block; }
.hm-xaxis{ display:flex; justify-content:space-between; margin-top:3px; }
.hm-xaxis span{ font-size:6px; color:var(--text-muted); }
.hm-donutwrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hm-ring{ width:48px; height:48px; border-radius:50%; margin:4px auto; background:conic-gradient(var(--gold) 0 98.2%, #1A2438 98.2% 100%); display:flex; align-items:center; justify-content:center; }
.hm-ring span{ width:33px; height:33px; border-radius:50%; background:var(--bg-card); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--gold); }
.hm-ring-label{ font-size:7px; color:var(--text-muted); margin-top:3px; }

/* Bottom row: Activity / Voters / Status */
.hm-row3b{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.hm-act{ display:flex; align-items:flex-start; gap:5px; padding:2.5px 0; }
.hm-adot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:1px; }
.hm-at{ font-size:7.5px; color:var(--text-primary); font-weight:500; line-height:1.3; }
.hm-as{ font-size:6.5px; color:var(--text-muted); }
.hm-vr{ display:flex; align-items:center; gap:4px; padding:2.5px 0; border-bottom:1px solid var(--border); }
.hm-vr:last-child{ border-bottom:none; }
.hm-vrk{ color:var(--gold); font-weight:700; width:9px; flex-shrink:0; font-size:7px; }
.hm-vn{ flex:1; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:8px; }
.hm-vc{ color:var(--text-muted); font-size:7px; white-space:nowrap; flex-shrink:0; }
.hm-sr{ display:flex; align-items:center; justify-content:space-between; padding:2.5px 0; border-bottom:1px solid var(--border); font-size:7.5px; color:var(--text-secondary); gap:4px; }
.hm-sr:last-child{ border-bottom:none; }
.hm-sok{ color:var(--success); font-size:6.5px; font-weight:600; white-space:nowrap; flex-shrink:0; }

/* Stat card trend indicators (overview dashboard) */
.stat-trend-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; margin-top:6px; }
.stat-trend-up{ color:var(--success); font-weight:700; font-size:11px; }
.stat-trend-down{ color:var(--danger); font-weight:700; font-size:11px; }

@media (max-width:1000px){
  .hero-v2{ grid-template-columns:1fr; gap:28px; padding-top:32px; }
  .nav-links{ display:none; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .hero-left h1{ font-size:34px; }
  .hero-stats{ grid-template-columns:1fr; }
}
@media (max-width:880px){
  nav{ padding:14px 20px; }
  .wrap{ padding:34px 18px; }
  .hero h1{ font-size:34px; }
  .dash-topnav{ padding:0 12px; height:50px; gap:4px; }
  .dtn-logo{ height:28px; }
  .dtn-server{ max-width:130px; }
  .dtn-srv-sub, .dtn-username{ display:none; }
  .dtn-cat{ padding:5px 9px; font-size:12px; }
  .dash-main{ padding:24px 16px; }
  .grid3{ grid-template-columns:1fr; }
  .quick-actions{ grid-template-columns:1fr; }
}

/* ── V2.1 polish: hero atmosphere · grouped features · reveal · hamburger ──── */

/* DayZ atmosphere — animated gold glow + faint grain, scoped to the hero */
.hero-v2{ position:relative; isolation:isolate; }
.hero-v2::before{
  content:""; position:absolute; inset:-60px -8vw -30px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(820px 360px at 24% 14%, rgba(231,201,139,.13), transparent 66%),
    radial-gradient(680px 340px at 90% 32%, rgba(239,68,68,.06), transparent 70%);
  animation:heroGlow 8s ease-in-out infinite alternate;
}
.hero-v2::after{
  content:""; position:absolute; inset:-60px -8vw -30px; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes heroGlow{ from{ opacity:.6; } to{ opacity:1; } }

/* Grouped feature showcase (replaces the 23-tab strip) */
#feature-tabs{ display:flex; flex-direction:column; gap:10px; }
.ftab-group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; text-align:center; color:var(--text-muted); margin:4px 0 2px; }
.ftab-group-label.tier-free{ color:#94a3a0; }
.ftab-group-label.tier-premium1{ color:var(--gold); }
.ftab-group-label.tier-premium2{ color:#E7A33B; }
.ftab-group-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }

/* Reveal-on-scroll (only applied by JS when IntersectionObserver exists) */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion:reduce){ .reveal,.reveal.in{ opacity:1; transform:none; } }

/* Mobile hamburger nav (links were display:none at ≤1000px with no fallback) */
.nav-burger{ display:none; background:none; border:none; color:var(--text-primary); font-size:26px; line-height:1; cursor:pointer; padding:2px 8px; }
.nav-collapse{ display:contents; }
@media (max-width:1000px){
  .nav-burger{ display:block; }
  .nav-collapse{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:14px; background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:18px 22px; box-shadow:var(--shadow); }
  body.nav-open .nav-collapse{ display:flex; }
  .nav-collapse .nav-links{ display:flex !important; flex-direction:column; gap:14px; }
  .nav-collapse .row{ flex-direction:column; align-items:stretch; gap:10px; }
  .nav-collapse .btn{ width:100%; }
}

/* Modern card surface on the public marketing cards (matches the dashboard .card
   treatment). Placed last so it overrides each card's base background; the
   2-class `.pricing-card.highlight` keeps its own gradient + glow. */
.pricing-card, .feature-card, .hero-stat, .review-card, .step{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 140px), var(--bg-card);
  border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px -20px rgba(0,0,0,.8);
}

/* Faint tactical grid atmosphere (DayZ command-console feel), fades from top */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(231,201,139,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(231,201,139,.022) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 24%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 24%, #000 0%, transparent 72%);
}

/* ── DayZ tactical display type: Oswald headings + stat numerals ──────────── */
h1{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-weight:600; }
.hero-left h1, .hero h1{ font-weight:700; letter-spacing:.012em; }
.section h2, .cta-band h2, .why-head h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-weight:600; }
.mstat-val, .stat-card .stat-value, .hero-stat .hs-val, .pricing-card .tier-price, .hm-kv{ font-family:var(--font-display); font-weight:700; letter-spacing:.005em; }

/* Sidebar server-switcher card */
.sidebar-switch{ display:flex; align-items:center; gap:10px; padding:9px 10px; margin:2px 0 4px; border:1px solid var(--border-strong); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--bg-card); transition:border-color .15s ease; }
.sidebar-switch:hover{ border-color:var(--gold-dark); }
.sidebar-switch .ssw-ic{ width:34px; height:34px; border-radius:9px; object-fit:cover; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#1A1308; background:var(--gold-grad); }
.sidebar-switch .ssw-meta{ display:flex; flex-direction:column; min-width:0; flex:1; }
.sidebar-switch .ssw-name{ font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-switch .ssw-sub{ font-size:11px; color:var(--text-muted); }
.sidebar-switch .ssw-chev{ color:var(--text-muted); font-size:15px; flex-shrink:0; }

/* ── DayzHub Shop — public storefront ─────────────────────────────────────── */
.shop-page{ min-height:100vh; display:flex; flex-direction:column; }

/* ─ Header ─ */
.shop-header{ padding:56px 20px 44px; text-align:center; position:relative; overflow:hidden; background:radial-gradient(ellipse 1000px 360px at 50% -100px,#0c1e3a 0%,var(--bg-primary) 100%); border-bottom:1px solid var(--border); }
.shop-header::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(231,201,139,.05) 0%,transparent 55%); pointer-events:none; }
.shop-header-icon{ width:88px; height:88px; border-radius:22px; margin:0 auto 20px; display:block; object-fit:cover; position:relative; z-index:1; box-shadow:0 0 0 8px rgba(231,201,139,.12),0 20px 48px rgba(0,0,0,.5); }
.shop-header-icon-ph{ width:88px; height:88px; border-radius:22px; margin:0 auto 20px; background:var(--gold-grad); display:flex; align-items:center; justify-content:center; font-size:36px; position:relative; z-index:1; box-shadow:0 0 0 8px rgba(231,201,139,.12),0 0 0 1px rgba(231,201,139,.3),0 20px 48px rgba(0,0,0,.5); }
.shop-header-badge{ display:inline-flex; align-items:center; gap:5px; background:rgba(231,201,139,.1); border:1px solid rgba(231,201,139,.2); color:var(--gold); font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; position:relative; z-index:1; }
.shop-header h1{ font-size:32px; font-weight:800; color:var(--text-primary); margin:0 0 10px; letter-spacing:-.02em; position:relative; z-index:1; }
.shop-header-desc{ color:var(--text-secondary); font-size:15px; max-width:560px; margin:0 auto 20px; line-height:1.65; position:relative; z-index:1; }
.shop-header-meta{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }

/* ─ Compact nav (product/success pages) ─ */
.shop-nav{ padding:16px 20px; border-bottom:1px solid var(--border); background:rgba(11,18,32,.7); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.shop-nav-inner{ max-width:1040px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.shop-main{ flex:1; padding:40px 20px; max-width:1040px; margin:0 auto; width:100%; box-sizing:border-box; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:20px; }

/* ─ Product cards ─ */
.shop-product-card{ background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 110px),var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 20px rgba(0,0,0,.3); transition:border-color .18s,transform .18s,box-shadow .18s; }
.shop-product-card:hover{ border-color:var(--gold-dark); transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.52),0 0 0 1px rgba(184,148,85,.15); }
.shop-product-card.shop-card-featured{ border-color:rgba(231,201,139,.25); }
.shop-product-card.shop-card-featured:hover{ border-color:var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.52),0 0 28px rgba(231,201,139,.12); }
.shop-product-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--bg-secondary); }
.shop-product-thumb-ph{ width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#0b1626 0%,#111827 50%,#0b1626 100%); display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--text-muted); }
.shop-product-body{ padding:18px; flex:1; display:flex; flex-direction:column; }
.shop-featured-badge{ display:inline-flex; align-items:center; gap:4px; background:var(--gold-grad); color:#1A1308; font-size:10px; font-weight:700; padding:3px 9px; border-radius:5px; margin-bottom:10px; letter-spacing:.06em; text-transform:uppercase; align-self:flex-start; }
.shop-product-name{ font-size:15px; font-weight:700; color:var(--text-primary); margin:0 0 6px; }
.shop-product-desc{ font-size:13px; color:var(--text-secondary); margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; line-height:1.55; }
.shop-product-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.shop-price{ font-size:22px; font-weight:800; color:var(--gold); letter-spacing:-.01em; }
.shop-out-tag{ font-size:12px; color:var(--danger); font-weight:600; }
.shop-role-pill{ background:rgba(231,201,139,.1); border:1px solid rgba(231,201,139,.2); color:var(--gold); font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }

/* ─ Empty state ─ */
.shop-empty{ text-align:center; padding:80px 20px; color:var(--text-muted); }
.shop-empty-icon{ width:72px; height:72px; border-radius:20px; background:linear-gradient(135deg,#0c1424,#111827); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 20px; border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }

/* ─ Footer ─ */
.shop-footer-bar{ padding:24px; text-align:center; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; }
.shop-footer-bar a{ color:var(--gold); text-decoration:none; }

/* ─ Premium shop additions ─ */
@keyframes shopGlowPulse{ 0%,100%{ opacity:.5; transform:translateX(-50%) scale(1); } 50%{ opacity:.85; transform:translateX(-50%) scale(1.06); } }
.shop-header-glow{ position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:700px; height:320px; background:radial-gradient(ellipse,rgba(231,201,139,.14) 0%,transparent 68%); pointer-events:none; animation:shopGlowPulse 5s ease-in-out infinite; }
.shop-hstats{ display:flex; align-items:center; justify-content:center; margin-top:28px; background:rgba(255,255,255,.03); border:1px solid rgba(231,201,139,.12); border-radius:40px; padding:10px 24px; position:relative; z-index:1; width:fit-content; margin-left:auto; margin-right:auto; }
.shop-hstat{ display:flex; align-items:center; gap:7px; padding:0 18px; }
.shop-hstat-num{ font-size:15px; font-weight:800; color:var(--gold); letter-spacing:-.01em; }
.shop-hstat-lab{ font-size:12px; color:var(--text-muted); font-weight:500; }
.shop-hstat-div{ width:1px; height:20px; background:rgba(231,201,139,.15); flex-shrink:0; }
.shop-section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.shop-section-label::after{ content:''; flex:1; height:1px; background:var(--border); }
.shop-spotlight{ display:grid; grid-template-columns:1fr 1.1fr; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(231,201,139,.22); background:linear-gradient(135deg,rgba(231,201,139,.06) 0%,rgba(255,255,255,.02) 60%),var(--bg-card); text-decoration:none; margin-bottom:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 40px rgba(0,0,0,.4); transition:transform .2s,box-shadow .2s,border-color .2s; }
.shop-spotlight:hover{ transform:translateY(-3px); border-color:rgba(231,201,139,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 56px rgba(0,0,0,.5),0 0 40px rgba(231,201,139,.08); }
.shop-spotlight-media{ position:relative; overflow:hidden; min-height:220px; }
.shop-spotlight-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.shop-spotlight:hover .shop-spotlight-img{ transform:scale(1.04); }
.shop-spotlight-img-ph{ width:100%; height:100%; min-height:220px; background:linear-gradient(135deg,#0b1626 0%,#111827 50%,#0b1626 100%); display:flex; align-items:center; justify-content:center; font-size:72px; color:var(--text-muted); }
.shop-spotlight-body{ padding:32px 36px; display:flex; flex-direction:column; justify-content:center; }
.shop-spotlight-name{ font-size:26px; font-weight:800; color:var(--text-primary); margin:12px 0 10px; letter-spacing:-.02em; line-height:1.2; }
.shop-spotlight-desc{ font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:24px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.shop-spotlight-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.shop-spotlight-cta{ display:inline-flex; align-items:center; background:var(--gold-grad); color:#1A1308; font-size:13px; font-weight:700; padding:10px 20px; border-radius:var(--radius-sm); transition:opacity .15s,transform .15s; }
.shop-spotlight:hover .shop-spotlight-cta{ transform:translateX(2px); }
.shop-card-overlay{ position:absolute; bottom:0; left:0; right:0; padding:10px 14px; background:linear-gradient(0deg,rgba(5,7,13,.92) 0%,transparent 100%); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.04em; opacity:0; transition:opacity .18s; pointer-events:none; }
.shop-product-card{ position:relative; }
.shop-product-card:hover .shop-card-overlay{ opacity:1; }
@media(max-width:700px){ .shop-spotlight{ grid-template-columns:1fr; } .shop-spotlight-body{ padding:22px 20px; } .shop-spotlight-name{ font-size:20px; } .shop-hstats{ padding:8px 12px; } .shop-hstat{ padding:0 10px; } .shop-hstat-lab{ display:none; } }

/* ─ Topbar / breadcrumb ─ */
.shop-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:12px; }
.shop-topbar-left{ display:flex; align-items:center; gap:12px; }
.shop-breadcrumb{ color:var(--text-muted); font-size:14px; font-weight:600; text-decoration:none; transition:color .15s; }
.shop-breadcrumb:hover{ color:var(--text-primary); }

/* ─ Product detail page ─ */
.shop-product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.shop-product-image{ width:100%; border-radius:var(--radius); display:block; aspect-ratio:16/9; object-fit:cover; box-shadow:0 4px 28px rgba(0,0,0,.45); }
.shop-product-image-ph{ width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#0b1626 0%,#111827 50%,#0b1626 100%); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:72px; color:var(--text-muted); box-shadow:0 4px 28px rgba(0,0,0,.45); }
.shop-product-desc-section{ margin-top:24px; }
.shop-product-desc-section h3{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.shop-product-desc-section p{ color:var(--text-secondary); font-size:15px; line-height:1.75; white-space:pre-wrap; }
.shop-buy-box{ background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 140px),var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:28px; position:sticky; top:72px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 36px rgba(0,0,0,.42); }
.shop-buy-price{ font-size:38px; font-weight:800; color:var(--gold); margin:0 0 4px; letter-spacing:-.02em; }
.shop-buy-sub{ font-size:13px; color:var(--text-muted); margin:0 0 20px; }
.shop-user-pill{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(88,101,242,.08); border:1px solid rgba(88,101,242,.2); border-radius:var(--radius-sm); margin-bottom:16px; font-size:13px; color:var(--text-secondary); }
.shop-user-pill strong{ color:var(--text-primary); }
.shop-detail-meta{ display:flex; flex-direction:column; margin:0 0 20px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; font-size:13px; }
.shop-detail-meta-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); }
.shop-detail-meta-row:last-child{ border-bottom:none; }
.shop-detail-meta-row span:first-child{ color:var(--text-muted); }
.shop-detail-meta-row span:last-child{ color:var(--text-primary); font-weight:600; }

/* ─ Dashboard shop stats ─ */
.shop-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.shop-stat{ background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 80px),var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.shop-stat-val{ font-size:24px; font-weight:800; color:var(--text-primary); font-family:var(--font-display); letter-spacing:-.01em; }
.shop-stat-lab{ font-size:11px; color:var(--text-muted); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }

/* ─ Order status badges ─ */
.badge-completed{ color:var(--success); font-weight:600; font-size:12px; }
.badge-pending{ color:var(--warning); font-weight:600; font-size:12px; }
.badge-failed{ color:var(--danger); font-weight:600; font-size:12px; }
.badge-refunded{ color:var(--text-muted); font-weight:600; font-size:12px; }

/* ─ Product table thumbnail ─ */
.prod-thumb-sm{ width:42px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg-secondary); }
.prod-thumb-sm-ph{ width:42px; height:42px; border-radius:8px; background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }

/* ─ Success page ─ */
.shop-success-wrap{ display:flex; justify-content:center; padding:20px 0 40px; }
.shop-success-box{ max-width:520px; width:100%; text-align:center; }
.shop-success-card{ background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 140px),var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:40px 36px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5); }
.shop-success-icon{ width:80px; height:80px; border-radius:22px; background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.06)); border:1px solid rgba(34,197,94,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; box-shadow:0 0 0 8px rgba(34,197,94,.07),0 8px 32px rgba(0,0,0,.3); }
.shop-success-order{ background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; text-align:left; margin-bottom:24px; }
.shop-success-order-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.shop-success-order-row:last-child{ border-bottom:none; }
.shop-success-order-row span:first-child{ color:var(--text-muted); }
.shop-success-order-row span:last-child{ color:var(--text-primary); font-weight:600; }

@media(max-width:700px){
  .shop-product-detail{ grid-template-columns:1fr; }
  .shop-stat-grid{ grid-template-columns:1fr 1fr; }
  .shop-header{ padding:40px 16px 32px; }
  .shop-buy-box{ position:static; }
  .shop-success-card{ padding:28px 20px; }
}

/* ── Shop Revenue Dashboard ────────────────────────────────────────────────── */
.rev-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.rev-stat{ background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 100px),var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 36px -22px rgba(0,0,0,.85); position:relative; overflow:hidden; }
.rev-stat::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(231,201,139,.03) 0%,transparent 60%); pointer-events:none; }
.rev-stat-label{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.rev-stat-val{ font-size:32px; font-weight:800; color:var(--text-primary); font-family:var(--font-display); letter-spacing:-.02em; margin-bottom:8px; }
.rev-change{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:3px 8px; border-radius:6px; }
.rev-change.up{ background:rgba(34,197,94,.12); color:#22C55E; border:1px solid rgba(34,197,94,.2); }
.rev-change.down{ background:rgba(239,68,68,.12); color:var(--danger); border:1px solid rgba(239,68,68,.2); }
.rev-change.neutral{ background:rgba(109,116,132,.1); color:var(--text-muted); border:1px solid var(--border); }
.rev-delta{ font-size:12px; color:var(--text-muted); margin-top:4px; }

.rev-mid{ display:grid; grid-template-columns:1fr 320px; gap:16px; margin-bottom:16px; }
.rev-bot{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rev-chart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.rev-chart-wrap{ overflow:hidden; }
.rev-chart-svg{ display:block; width:100%; height:auto; }

.rev-cust-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.rev-cust-row:last-child{ border-bottom:none; }
.rev-cust-avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#1c2a42,#2a3c58); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--text-secondary); flex-shrink:0; }
.rev-cust-name{ font-size:13px; font-weight:600; color:var(--text-primary); }
.rev-cust-sub{ font-size:11px; color:var(--text-muted); margin-top:1px; }
.rev-cust-amount{ font-size:14px; font-weight:800; color:var(--gold); margin-left:auto; white-space:nowrap; }
.rev-cust-purchases{ font-size:11px; color:var(--text-muted); text-align:right; }

.rev-activity-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.rev-activity-row:last-child{ border-bottom:none; }
.rev-act-date{ width:42px; height:42px; border-radius:var(--radius-sm); background:var(--bg-secondary); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.rev-act-date-mon{ font-size:9px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.rev-act-date-day{ font-size:16px; font-weight:800; color:var(--text-primary); line-height:1; }
.rev-act-product{ font-size:13px; font-weight:600; color:var(--text-primary); }
.rev-act-buyer{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.rev-act-amount{ font-size:14px; font-weight:700; color:var(--gold); margin-left:auto; }

.rev-prod-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.rev-prod-row:last-child{ border-bottom:none; }
.rev-prod-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.rev-prod-name{ font-size:13px; font-weight:600; color:var(--text-primary); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rev-prod-orders{ font-size:11px; color:var(--text-muted); }
.rev-prod-amount{ font-size:13px; font-weight:700; color:var(--gold); white-space:nowrap; }
.rev-prod-bar-wrap{ height:4px; background:var(--bg-secondary); border-radius:2px; margin-top:4px; }
.rev-prod-bar{ height:4px; border-radius:2px; animation:revBarReveal .55s cubic-bezier(.4,0,.2,1) both; }
@keyframes revBarReveal{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0% 0 0); } }

.rev-donut-wrap{ display:flex; align-items:center; gap:24px; padding:12px 0; }
.rev-empty{ text-align:center; padding:48px 20px; }
.rev-empty-icon{ font-size:36px; margin-bottom:10px; }

@media(max-width:900px){
  .rev-mid{ grid-template-columns:1fr; }
  .rev-stat-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .rev-stat-grid{ grid-template-columns:1fr; }
  .rev-bot{ grid-template-columns:1fr; }
}

/* ── v50: Pay Methods · Discounts · Coupons · Gift Cards · Transactions · FAQ ── */

/* Pay Methods page */
.pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.pm-provider-card{ background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,var(--bg-card) 100%); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:border-color .2s; }
.pm-provider-card.pm-live{ border-color:rgba(34,197,94,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(34,197,94,.06); }
.pm-provider-card.pm-soon{ opacity:.55; pointer-events:none; }
.pm-provider-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; }
.pm-provider-name{ font-size:20px; font-weight:800; color:var(--text-primary); display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.pm-provider-tagline{ font-size:13px; color:var(--text-muted); margin-top:2px; }
.pm-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:.02em; white-space:nowrap; }
.pm-badge-live{ background:rgba(34,197,94,.12); color:#22C55E; border:1px solid rgba(34,197,94,.2); }
.pm-badge-soon{ background:rgba(109,116,132,.1); color:var(--text-muted); border:1px solid var(--border); }
.pm-account-row{ display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid var(--border); font-size:13px; color:var(--text-secondary); }
.pm-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pm-dot-ok{ background:var(--success); box-shadow:0 0 6px rgba(34,197,94,.4); }
.pm-dot-no{ background:var(--text-muted); }
@media(max-width:700px){ .pm-grid{ grid-template-columns:1fr; } }

/* Product compare-at price (discounts) */
.shop-price-orig{ text-decoration:line-through; color:var(--text-muted); font-size:13px; margin-right:3px; }
.shop-sale-badge{ display:inline-block; background:rgba(239,68,68,.12); color:var(--danger); border:1px solid rgba(239,68,68,.18); border-radius:5px; padding:1px 7px; font-size:11px; font-weight:700; margin-left:4px; vertical-align:middle; }
.shop-buy-price-orig{ text-decoration:line-through; color:var(--text-muted); font-size:15px; }
.shop-buy-price-row{ display:flex; align-items:baseline; gap:8px; }

/* Coupon + gift card input on storefront */
.shop-discount-section{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.shop-discount-section h4{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; }
.shop-code-row{ display:flex; gap:8px; margin-bottom:8px; }
.shop-code-row input{ flex:1; font-size:13px; text-transform:uppercase; letter-spacing:.06em; padding:9px 12px; }
.shop-code-btn{ white-space:nowrap; padding:9px 16px; font-size:13px; }
.shop-code-result{ padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; }
.shop-code-result.ok{ background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:#22C55E; }
.shop-code-result.err{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--danger); }
.shop-summary-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--text-muted); }
.shop-summary-row .val{ color:var(--text-secondary); }
.shop-summary-total{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 0; border-top:1px solid var(--border); margin-top:6px; font-size:15px; font-weight:700; color:var(--text-primary); }
.shop-summary-total .gold{ color:var(--gold); }

/* Coupon codes admin */
.coup-code-chip{ display:inline-block; font-family:monospace; font-size:13px; font-weight:700; letter-spacing:.06em; background:rgba(231,201,139,.08); border:1px solid rgba(231,201,139,.2); color:var(--gold); padding:4px 10px; border-radius:6px; cursor:default; }
.coup-type-badge{ display:inline-block; font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; }
.coup-type-pct{ background:rgba(88,101,242,.12); color:#8b93ff; border:1px solid rgba(88,101,242,.2); }
.coup-type-fixed{ background:rgba(34,197,94,.1); color:#22C55E; border:1px solid rgba(34,197,94,.2); }
.coup-meta{ font-size:12px; color:var(--text-muted); line-height:1.5; }
.coup-limit-track{ height:3px; background:var(--border); border-radius:2px; margin-top:5px; overflow:hidden; width:80px; }
.coup-limit-fill{ height:100%; border-radius:2px; background:var(--gold); }

/* Gift cards admin */
.gc-code-chip{ display:inline-block; font-family:monospace; font-size:14px; font-weight:800; letter-spacing:.1em; background:rgba(231,201,139,.08); border:1px solid rgba(231,201,139,.25); color:var(--gold); padding:7px 14px; border-radius:8px; cursor:default; }
.gc-st-active{ color:var(--success); font-size:12px; font-weight:700; }
.gc-st-used{ color:var(--text-muted); font-size:12px; font-weight:700; }
.gc-st-expired{ color:var(--danger); font-size:12px; font-weight:700; }
.gc-balance-track{ height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:5px; width:80px; }
.gc-balance-fill{ height:100%; border-radius:2px; background:var(--gold); animation:revBarReveal .55s cubic-bezier(.4,0,.2,1) both; }

/* Enhanced transactions page */
.txn-id{ font-family:monospace; font-size:11px; color:var(--text-muted); background:var(--bg-secondary); padding:2px 6px; border-radius:4px; display:inline-block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.txn-gw{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; background:rgba(231,201,139,.1); color:var(--gold); border:1px solid rgba(231,201,139,.18); }
.txn-fee-tag{ display:inline-flex; align-items:center; font-size:10px; font-weight:600; background:rgba(239,68,68,.08); color:var(--danger); border:1px solid rgba(239,68,68,.15); padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:middle; }
.txn-discount-tag{ display:inline-flex; align-items:center; font-size:10px; font-weight:600; background:rgba(34,197,94,.08); color:#22C55E; border:1px solid rgba(34,197,94,.15); padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:middle; }
.txn-search-wrap{ display:flex; gap:10px; margin-bottom:16px; align-items:center; }
.txn-search-wrap input{ flex:1; max-width:300px; }
.txn-pagination{ display:flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; }
.txn-pg-btn{ padding:5px 12px; border-radius:6px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer; font-size:13px; }
.txn-pg-btn:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.txn-pg-btn.active{ background:rgba(231,201,139,.1); border-color:rgba(231,201,139,.3); color:var(--gold); font-weight:600; }
.txn-pg-info{ color:var(--text-muted); font-size:12px; }

/* Fee FAQ accordion */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; cursor:pointer; font-size:14px; font-weight:600; color:var(--text-primary); user-select:none; gap:12px; list-style:none; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:hover{ color:var(--gold); }
.faq-arr{ font-size:11px; color:var(--text-muted); transition:transform .18s; flex-shrink:0; }
details[open] .faq-arr{ transform:rotate(180deg); }
.faq-a{ padding:0 0 16px; font-size:13px; color:var(--text-secondary); line-height:1.7; }
.faq-a strong{ color:var(--text-primary); }
.faq-gold{ color:var(--gold); font-weight:600; }

/* ── v51: Multi-role picker tags ── */
.role-tag-wrap{ display:flex; flex-wrap:wrap; gap:4px; min-height:28px; padding:4px 0; }


/* Floating "rent a dedicated server" affiliate CTA */
.rent-cta-wrap{ position:fixed; left:20px; bottom:20px; z-index:900; max-width:282px; }
.rent-cta{ position:relative; display:block; padding:16px 18px; text-decoration:none; color:var(--text-primary);
  background:linear-gradient(150deg,#121a2b,#0b1220); border:1px solid var(--gold-dark); border-radius:16px;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  animation:rentFloat 3.4s ease-in-out infinite, rentGlow 2.8s ease-in-out infinite;
  transition:transform .18s ease, border-color .18s ease; }
.rent-cta:hover{ transform:translateY(-3px); border-color:var(--gold); }
.rent-cta-eyebrow{ display:block; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.rent-cta-q{ display:block; font-size:13.5px; font-weight:700; line-height:1.35; color:#fff; margin-bottom:13px; }
.rent-cta-by{ display:flex; align-items:center; gap:8px; }
.rent-cta-by-lbl{ font-size:11px; color:var(--text-muted); }
.rent-cta-logo{ height:15px; width:auto; display:block; opacity:.95; }
.rent-cta-arrow{ margin-left:auto; color:var(--gold); font-weight:800; font-size:15px; transition:transform .18s ease; }
.rent-cta:hover .rent-cta-arrow{ transform:translateX(3px); }
.rent-cta-x{ position:absolute; top:-9px; right:-9px; width:21px; height:21px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border-strong); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; cursor:pointer; padding:0; z-index:2; }
.rent-cta-x:hover{ color:var(--text-primary); border-color:var(--gold-dark); }
@keyframes rentFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes rentGlow{ 0%,100%{ box-shadow:0 14px 36px rgba(0,0,0,.55), 0 0 0 0 rgba(231,201,139,0) } 50%{ box-shadow:0 14px 36px rgba(0,0,0,.55), 0 0 20px 2px rgba(231,201,139,.22) } }
@media (max-width:600px){ .rent-cta-wrap{ left:12px; right:12px; bottom:12px; max-width:none } }
@media (prefers-reduced-motion: reduce){ .rent-cta{ animation:none } }


/* Feature comparison (Free | Premium) slides */
.cmp-intro{ text-align:center; font-size:13px; color:var(--text-secondary); margin:-4px 0 18px; }
.cmp-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.cmp-col{ background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; }
.cmp-col-prem{ border-color:var(--gold-dark); }
.cmp-col-head{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); margin-bottom:13px; font-weight:600; }
.cmp-locked{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:11px; padding:22px 12px; color:var(--text-muted); min-height:150px; }
.cmp-lock-ic{ font-size:30px; opacity:.55; }
.cmp-locked p{ font-size:13px; line-height:1.5; max-width:250px; margin:0; }
.shop-perks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.shop-perks li{ font-size:13px; color:var(--text-secondary); line-height:1.45; }
.shop-perks strong{ color:var(--text-primary); }
@media (max-width:760px){ .cmp-2col{ grid-template-columns:1fr; } }


/* ── /updates changelog page ─────────────────────────────────────────────── */
.cl-page{ max-width:800px; margin:0 auto; padding:56px 24px 96px; }

/* Hero */
.cl-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); background:rgba(231,201,139,.1); border:1px solid rgba(231,201,139,.28); border-radius:999px; padding:5px 15px; margin-bottom:20px; }
.cl-hero{ text-align:center; margin-bottom:60px; }
.cl-hero h1{ font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.03em; margin:0 0 14px; }
.cl-hero h1 .gold{ color:var(--gold); }
.cl-hero-sub{ color:var(--text-secondary); font-size:15px; line-height:1.6; max-width:520px; margin:0 auto 18px; }
.cl-hero-meta{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:6px 18px; }
.cl-hero-meta strong{ color:var(--text-primary); font-weight:600; }
.cl-hero-sep{ opacity:.4; }

/* Feed */
.cl-feed{ display:flex; flex-direction:column; gap:0; }

/* Entry row: spine + card */
.cl-entry{ display:grid; grid-template-columns:36px 1fr; gap:0 20px; }

/* Spine */
.cl-spine{ display:flex; flex-direction:column; align-items:center; padding-top:22px; }
.cl-node{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cl-node-dot{ display:block; width:10px; height:10px; border-radius:50%; background:var(--border-strong); border:2px solid var(--border); }
.cl-node-dot-gold{ background:var(--gold); border-color:var(--gold-dark); box-shadow:0 0 0 4px rgba(231,201,139,.18), 0 0 12px rgba(231,201,139,.22); }
.cl-node-first .cl-node-dot{ width:12px; height:12px; }
.cl-line{ flex:1; width:1px; background:linear-gradient(to bottom, var(--border-strong), var(--border) 80%, transparent); margin:6px 0; min-height:24px; }

/* Card */
.cl-card{ background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.01) 120px), var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:22px 24px 20px; margin-bottom:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.35); transition:border-color .2s ease, transform .2s ease; }
.cl-card:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.cl-card-latest{ border-color:rgba(231,201,139,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(231,201,139,.1); }
.cl-card-latest:hover{ border-color:var(--gold-dark); }

/* Card header */
.cl-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.cl-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.cl-latest-pill{ flex-shrink:0; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1A1308; background:var(--gold-grad); border-radius:999px; padding:3px 10px; }
.cl-title{ font-size:17px; font-weight:700; color:var(--text-primary); letter-spacing:-.015em; margin:0; line-height:1.3; }
.cl-date-badge{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:12px; font-weight:500; color:var(--text-muted); background:var(--bg-secondary); border:1px solid var(--border); border-radius:6px; padding:4px 10px; white-space:nowrap; }

/* Summary count row */
.cl-summary{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.cl-sum{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; }
.cl-sum-new{ background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.22); }
.cl-sum-impr{ background:rgba(59,130,246,.12); color:#60a5fa; border:1px solid rgba(59,130,246,.22); }
.cl-sum-fix{ background:rgba(239,68,68,.11); color:#f87171; border:1px solid rgba(239,68,68,.2); }

/* Divider */
.cl-divider{ height:1px; background:var(--border); margin:0 0 16px; }

/* Change list */
.cl-changes{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.cl-change{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-secondary); line-height:1.55; }
.cl-chip{ flex-shrink:0; display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:5px; padding:2px 7px; margin-top:2px; white-space:nowrap; }
.cl-chip-new{ background:rgba(34,197,94,.13); color:#4ade80; }
.cl-chip-impr{ background:rgba(59,130,246,.13); color:#60a5fa; }
.cl-chip-fix{ background:rgba(239,68,68,.12); color:#f87171; }
.cl-change-text{ flex:1; }

/* Empty state */
.cl-empty{ text-align:center; padding:80px 0; }
.cl-empty-ic{ font-size:40px; margin-bottom:16px; opacity:.6; }
.cl-empty-title{ font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.cl-empty-sub{ font-size:14px; color:var(--text-muted); }

/* Discord CTA strip */
.cl-cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(88,101,242,.12),rgba(88,101,242,.04)); border:1px solid rgba(88,101,242,.28); border-radius:var(--radius); padding:18px 24px; margin-top:12px; }
.cl-cta-body{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.cl-cta-ic{ font-size:24px; flex-shrink:0; }
.cl-cta-title{ display:block; font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.cl-cta-sub{ font-size:13px; color:var(--text-secondary); }

/* Mobile */
@media (max-width:600px){
  .cl-page{ padding:40px 16px 72px; }
  .cl-entry{ grid-template-columns:24px 1fr; gap:0 14px; }
  .cl-spine{ padding-top:20px; }
  .cl-card{ padding:18px 16px 16px; }
  .cl-card-head{ flex-direction:column; gap:10px; }
  .cl-date-badge{ align-self:flex-start; }
  .cl-cta{ flex-direction:column; align-items:flex-start; }
  .cl-cta .btn{ width:100%; justify-content:center; }
  .cl-hero-meta{ flex-direction:column; gap:4px; text-align:center; }
}
@media (max-width:400px){
  .cl-spine{ display:none; }
  .cl-entry{ grid-template-columns:1fr; }
}
/* ── Billing plan comparison — premium, categorized (v60) ───────────────── */
.cmpb-card{ margin-top:20px; }
.cmpb-head h2{ margin:0; }
.cmpb-head p{ margin:6px 0 0; font-size:13px; color:var(--text-secondary); max-width:600px; }
.cmpb-scroll{ overflow-x:auto; margin-top:22px; }
.cmpb{ width:100%; border-collapse:collapse; min-width:600px; }
.cmpb thead th{ text-align:center; vertical-align:bottom; padding:0 12px 16px; width:140px; }
.cmpb thead th:first-child{ text-align:left; width:auto; font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; }
.cmpb-plan{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.cmpb-h0 .cmpb-plan{ color:var(--text-secondary); }
.cmpb-h1 .cmpb-plan{ color:var(--gold); }
.cmpb-h2 .cmpb-plan{ color:#FF8A3D; }
.cmpb-h3 .cmpb-plan{ color:#3B82F6; }
.cmpb-price{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-top:3px; white-space:nowrap; }
.cmpb-price small{ font-weight:500; opacity:.8; }
.cmpb-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#60A5FA,#2563EB); padding:3px 9px; border-radius:999px; margin-bottom:8px; box-shadow:0 3px 10px rgba(59,130,246,.3); }
.cmpb thead th.cmpb-h3{ border-top-left-radius:12px; border-top-right-radius:12px; }
.cmpb td.cmpb-p3, .cmpb th.cmpb-h3{ background:rgba(59,130,246,.05); }
.cmpb-cat td{ padding:20px 12px 8px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); border:none !important; }
.cmpb-cat td .tier-tag{ margin-left:8px; }
.cmpb tbody td{ padding:10px 12px; border-top:1px solid var(--border); text-align:center; vertical-align:middle; }
.cmpb tbody td.cmpb-feat{ text-align:left; }
.cmpb tbody tr:hover td{ background-color:rgba(255,255,255,.015); }
.cmpb tbody tr:hover td.cmpb-p3{ background-color:rgba(59,130,246,.075); }
.cmpb-fname{ display:block; font-size:13.5px; color:var(--text-primary); font-weight:500; }
.cmpb-note{ display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }
.cmpb-ck{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:800; line-height:1; }
.cmpb-ck::after{ content:"\2713"; }
.cmpb-ck0{ background:rgba(255,255,255,.05); color:var(--text-secondary); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.cmpb-ck1{ background:rgba(231,201,139,.14); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(231,201,139,.4); }
.cmpb-ck2{ background:rgba(255,138,61,.16); color:#FF8A3D; box-shadow:inset 0 0 0 1px rgba(255,138,61,.45); }
.cmpb-ck3{ background:rgba(59,130,246,.16); color:#3B82F6; box-shadow:inset 0 0 0 1px rgba(59,130,246,.45); }
.cmpb-no{ color:var(--text-muted); font-size:15px; opacity:.4; }
.cmpb-lim{ display:inline-block; font-size:10.5px; font-weight:600; color:var(--text-secondary); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); padding:3px 9px; border-radius:999px; }
.cmpb-fee{ font-size:13px; font-weight:700; color:var(--text-muted); }
.cmpb-fee1{ color:var(--gold); }
.cmpb-fee2{ color:#FF8A3D; }
.cmpb-fee3{ color:#3B82F6; }
.cmpb-perk{ display:inline-block; font-size:11px; font-weight:600; color:var(--text-muted); line-height:1.2; }
.cmpb-perk1{ color:var(--gold); }
.cmpb-perk2{ color:#FF8A3D; }
.cmpb-perk3{ color:#3B82F6; }
.cmpb tbody tr.cmpb-lastrow td.cmpb-p3{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.cmpb-foot{ margin-top:20px; font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.cmpb-foot svg{ flex-shrink:0; opacity:.7; }
@media (max-width:600px){
  .cmpb thead th, .cmpb tbody td{ padding-left:7px; padding-right:7px; }
  .cmpb-plan{ font-size:14px; }
  .cmpb-fname{ font-size:12.5px; }
  .cmpb-badge{ font-size:8px; padding:2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Operations-Deck refinement layer — v61
   Appends on top of the existing system. Overrides are intentional.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS vars: JetBrains Mono token ─────────────────────────────────────── */
:root{
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ── Top-nav: gold scanline atmosphere ───────────────────────────────────── */
.dash-topnav{
  border-bottom:none;
  box-shadow:0 1px 0 rgba(231,201,139,.22),0 2px 20px rgba(0,0,0,.5);
  background:rgba(5,7,13,.92);
}
.dash-topnav::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg,rgba(231,201,139,.018) 0 1px,transparent 1px 4px);
  opacity:.7;
}

/* ── Active nav item: gold ring glow ─────────────────────────────────────── */
.dtn-item.dtn-item-active{
  background:linear-gradient(90deg,rgba(231,201,139,.16) 0%,rgba(231,201,139,.06) 55%,rgba(231,201,139,.02) 100%);
  box-shadow:inset 0 0 0 1px rgba(231,201,139,.14);
}

/* ── Page heading: gold dot accent ──────────────────────────────────────── */
.topbar h1{
  display:flex; align-items:center; gap:10px;
}
.topbar h1::before{
  content:''; display:inline-block; width:8px; height:8px;
  background:var(--gold-grad); border-radius:50%; flex-shrink:0;
}

/* ── Card headings: display font + gold underline ───────────────────────── */
.card h2{
  font-family:var(--font-display);
  font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px; padding-bottom:12px;
  border-bottom:1px solid rgba(231,201,139,.1);
}

/* ── Labels: JetBrains Mono instrument readout ───────────────────────────── */
label{
  font-family:var(--font-mono);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:6px; display:block;
}

/* ── Banner: full border (matches info-note pattern) ────────────────────── */
.banner{
  border-radius:var(--radius-sm);
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.07);
  font-size:13px; font-weight:600;
  padding:12px 16px; margin-bottom:20px;
}

/* ── Alert items: full border, tier variants ─────────────────────────────── */
.alert-item{
  border:1px solid rgba(245,158,11,.3);
  background:rgba(245,158,11,.07);
  border-radius:var(--radius-sm); padding:10px 14px;
  font-size:13px; margin-bottom:8px;
}
.alert-item.alert-danger{ border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.07); }
.alert-item.alert-ok{ border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.06); }

/* ── Button polish ───────────────────────────────────────────────────────── */
.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(231,201,139,.28);
}
.btn.ghost:hover{
  border-color:var(--gold-dark);
  color:var(--gold);
}

/* ── Admin table row hover ───────────────────────────────────────────────── */
.admin-row{ transition:background .14s; }
.admin-row:hover{ background:rgba(231,201,139,.035); }

/* ── Guild card hover (Your Servers) ─────────────────────────────────────── */
.guild-card{
  border:1px solid var(--border-strong);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.guild-card:hover{
  border-color:rgba(231,201,139,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 20px rgba(231,201,139,.06);
  transform:translateY(-3px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .dash-main{ padding:20px 16px; }
  .topbar h1{ font-size:18px; }
}
@media (max-width:700px){
  .dash-main{ padding:14px 12px; }
  .topbar{ margin-bottom:16px; padding-bottom:12px; }
  .card h2{ font-size:13px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   OPERATIONS-DECK v62 — Full Visual Overhaul
   Transforms DayZ Hub from functional to premium Control-Room aesthetic.
   All overrides are additive — existing layout & functionality intact.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Body: richer ambient atmosphere ──────────────────────────────────────── */
body {
  background:
    radial-gradient(900px 400px at 50% -60px, rgba(231,201,139,.05) 0%, transparent 70%),
    radial-gradient(1200px 620px at 50% -240px, #0C1424 0%, #05070D 56%) fixed,
    #05070D;
}

/* ── Dashboard main content area ─────────────────────────────────────────── */
.dash-main {
  padding:32px 36px;
}

/* ── TOPBAR — Signature header card with gold accent bar ─────────────────── */
.topbar {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:14px;
  padding:22px 26px 22px 26px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.01) 100%);
  border:1px solid var(--border-strong);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 24px rgba(0,0,0,.45);
  overflow:hidden;
}
/* Gold gradient top accent — more distinctive than a side-border */
.topbar::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg,
    var(--gold) 0%,
    rgba(231,201,139,.5) 50%,
    rgba(231,201,139,.08) 100%);
}
.topbar::after {
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg,
    rgba(231,201,139,.012) 0 1px,
    transparent 1px 5px);
}
.topbar h1 {
  font-family:var(--font-display) !important;
  font-size:23px !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  color:var(--text-primary) !important;
  margin:0 !important;
  line-height:1.15 !important;
}
.topbar .sub {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  color:var(--text-muted) !important;
  margin:5px 0 0 !important;
}

/* ── CARDS — Premium glass treatment ─────────────────────────────────────── */
.card {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.01) 90px),
    var(--bg-card);
  border:1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 8px rgba(0,0,0,.28),
    0 24px 44px -20px rgba(0,0,0,.65);
  border-radius:var(--radius);
  padding:24px;
}
.card::before {
  content:'';
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:70%; height:100px;
  background:radial-gradient(ellipse, rgba(231,201,139,.035) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.card > * { position:relative; z-index:1; }

/* ── CARD SECTION HEADERS (h2) — gold label style ────────────────────────── */
.card h2 {
  font-family:var(--font-display) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  margin-bottom:20px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(231,201,139,.12) !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
.card h2::before {
  content:'';
  display:inline-block; width:5px; height:5px;
  background:var(--gold-grad); border-radius:50%;
  flex-shrink:0; box-shadow:0 0 6px rgba(231,201,139,.5);
}

/* ── LABELS — JetBrains Mono data labels ─────────────────────────────────── */
label {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--text-muted) !important;
  margin-bottom:7px !important;
  margin-top:18px !important;
  display:block !important;
}
label:first-child { margin-top:0 !important; }

/* ── INPUTS — precise, focused ───────────────────────────────────────────── */
input[type=text], textarea, select {
  background:rgba(5,7,13,.7);
  border:1px solid var(--border-strong);
  font-size:13px;
  letter-spacing:-.01em;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input[type=text]:hover, textarea:hover, select:hover {
  background:rgba(11,18,32,.9);
  border-color:rgba(42,54,80,.9);
}
input[type=text]:focus, textarea:focus, select:focus {
  background:rgba(11,18,32,1);
  border-color:var(--gold-dark);
  box-shadow:0 0 0 3px rgba(231,201,139,.12), 0 0 0 1px rgba(231,201,139,.2);
}

/* ── BUTTONS — refined ───────────────────────────────────────────────────── */
.btn {
  letter-spacing:.01em;
}
.btn.primary {
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .22s ease;
}
.btn.primary::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events:none;
}
.btn.primary:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(231,201,139,.32), 0 2px 8px rgba(231,201,139,.2);
}
.btn.ghost:hover {
  border-color:rgba(231,201,139,.35);
  background:rgba(231,201,139,.04);
  color:var(--gold);
}

/* ── BANNER ──────────────────────────────────────────────────────────────── */
.banner {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-weight:600 !important;
  border:1px solid rgba(34,197,94,.3) !important;
  background:rgba(34,197,94,.07) !important;
  border-radius:var(--radius-sm) !important;
  padding:12px 16px !important;
  margin-bottom:20px !important;
  font-size:13px !important;
  color:#7ee2a3 !important;
}

/* ── STATUS PULSE ────────────────────────────────────────────────────────── */
.status-live {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(34,197,94,.1); color:var(--success);
  border:1px solid rgba(34,197,94,.25); border-radius:999px;
  padding:4px 11px;
}
.status-live::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--success); box-shadow:0 0 7px var(--success);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

/* ── DATA TABLE ──────────────────────────────────────────────────────────── */
.data-table th {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  background:rgba(255,255,255,.025) !important;
  color:var(--text-muted) !important;
}
.data-table td {
  color:var(--text-secondary);
}
.data-table tbody tr:hover td {
  background:rgba(231,201,139,.03);
  color:var(--text-primary);
}

/* ── STAT CARDS (overview) ───────────────────────────────────────────────── */
.mstat {
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.mstat:hover {
  border-color:rgba(231,201,139,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 28px 56px -24px rgba(0,0,0,.9),
    0 0 0 1px rgba(231,201,139,.1),
    0 8px 32px -12px rgba(231,201,139,.15) !important;
}
.mstat-val {
  font-family:var(--font-display) !important;
  font-size:40px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  margin-top:16px !important;
}
.mstat-lbl {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:var(--text-muted) !important;
  margin-top:6px !important;
}
.mstat-trend {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:.04em !important;
}

/* ── QUICK ACTIONS ───────────────────────────────────────────────────────── */
.qa-tile {
  border:1px solid var(--border-strong) !important;
  background:rgba(255,255,255,.025) !important;
  border-radius:var(--radius-sm) !important;
  padding:14px !important;
  transition:transform .15s ease, border-color .15s ease, background .15s ease !important;
}
.qa-tile:hover {
  transform:translateY(-2px) !important;
  border-color:rgba(231,201,139,.3) !important;
  background:rgba(231,201,139,.04) !important;
}
.qa-title {
  font-size:13px !important; font-weight:600 !important; color:var(--text-primary) !important;
}
.qa-sub {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10px !important; color:var(--text-muted) !important; margin-top:2px !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
}

/* ── SERVER CARDS ────────────────────────────────────────────────────────── */
.srv-card {
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.srv-card:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(231,201,139,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 32px 60px -24px rgba(0,0,0,.9),
    0 0 0 1px rgba(231,201,139,.1),
    0 12px 44px -16px rgba(231,201,139,.18) !important;
}
.srv-name {
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
.srv-plan {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:9.5px !important; font-weight:700 !important; letter-spacing:.07em !important;
}

/* ── PRICING CARDS ───────────────────────────────────────────────────────── */
.pricing-card {
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.pricing-card:hover {
  transform:translateY(-5px) !important;
}
.pricing-card .tier-name {
  font-family:var(--font-display) !important;
  font-size:20px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
}
.pricing-card .tier-price {
  font-family:var(--font-display) !important;
  font-size:34px !important; font-weight:700 !important;
  letter-spacing:-.01em !important;
}

/* ── HOMEPAGE NAV ────────────────────────────────────────────────────────── */
nav {
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  background:rgba(5,7,13,.88) !important;
  backdrop-filter:blur(20px) !important;
}

/* ── HOMEPAGE HERO ───────────────────────────────────────────────────────── */
.hero-left h1 {
  font-family:var(--font-display) !important;
  font-size:clamp(38px,5vw,62px) !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
}
.hero-badge {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
}
.hero-check {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:11px !important; letter-spacing:.06em !important; text-transform:uppercase !important;
}

/* ── HOMEPAGE SECTION HEADINGS ───────────────────────────────────────────── */
.section h2 {
  font-family:var(--font-display) !important;
  font-size:34px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
  line-height:1.1 !important;
}
.feature-showcase h3 {
  font-family:var(--font-display) !important;
  font-size:22px !important; font-weight:600 !important;
  letter-spacing:.03em !important; text-transform:uppercase !important;
}
.cta-band h2 {
  font-family:var(--font-display) !important;
  font-size:30px !important; font-weight:700 !important;
  letter-spacing:.05em !important; text-transform:uppercase !important;
}
.feature-card h3 {
  font-family:var(--font-display) !important;
  font-size:16px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
}
.step h3 {
  font-family:var(--font-display) !important;
  font-size:15px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
}

/* ── HOMEPAGE HERO STATS ─────────────────────────────────────────────────── */
.hero-stat .hs-val {
  font-family:var(--font-display) !important;
  font-size:28px !important; font-weight:700 !important;
  letter-spacing:.02em !important;
}
.hero-stat .hs-lbl {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:9.5px !important; letter-spacing:.09em !important; text-transform:uppercase !important;
}

/* ── FEATURE CARDS ───────────────────────────────────────────────────────── */
.feature-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%),
    var(--bg-card) !important;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.feature-card:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(231,201,139,.25) !important;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.8), 0 0 20px rgba(231,201,139,.05) !important;
}

/* ── TABS ────────────────────────────────────────────────────────────────── */
.tabs a {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.feature-tab {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}

/* ── VOTER / STATUS ROWS ─────────────────────────────────────────────────── */
.voter-row:hover, .status-row:hover {
  background:rgba(231,201,139,.03);
}
.voter-rank {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-weight:700 !important;
}
.voter-count {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:11px !important; letter-spacing:.04em !important;
}

/* ── ACTIVITY FEED ───────────────────────────────────────────────────────── */
.ov-act-title {
  font-size:13px; color:var(--text-primary); font-weight:500;
}
.ov-act-meta {
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:10px; color:var(--text-muted); margin-top:2px;
  letter-spacing:.04em; text-transform:uppercase;
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .topbar { padding:16px 20px 16px 22px; }
  .topbar h1 { font-size:19px !important; }
  .dash-main { padding:24px 18px; }
  .grid3 { grid-template-columns:1fr !important; }
}
@media (max-width:700px) {
  .topbar { padding:14px 16px 14px 18px; margin-bottom:20px; }
  .topbar h1 { font-size:17px !important; }
  .dash-main { padding:16px 12px; }
  .hero-left h1 { font-size:clamp(30px,8vw,46px) !important; }
  .section h2 { font-size:26px !important; }
  .mstat-val { font-size:32px !important; }
}

/* ══ END Operations-Deck v62 ════════════════════════════════════════════════ */

/* ══ v62b — Card h2 correction ════════════════════════════════════════════════
   The v62 .card h2 rule was too aggressive: font-size:13px and border-bottom
   made action-CTA h2 elements (trial banners, plan names, etc.) tiny gold chips.
   This block reverts the structural overrides while keeping Oswald+gold.
   The full section-label treatment (13px, dot, underline) is now class-gated.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow inline font-size to win; keep the Oswald+gold identity */
.card h2 {
  font-size: unset !important;
  margin-bottom: unset !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  display: block !important;
}
.card h2::before { content: none !important; display: none !important; }

/* Opt-in section label: class="card-label" on h2 elements that are true labels */
.card-label {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(231,201,139,.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.card-label::before {
  content: '' !important;
  display: inline-block !important; width: 5px !important; height: 5px !important;
  background: var(--gold-grad) !important; border-radius: 50% !important;
  flex-shrink: 0 !important; box-shadow: 0 0 6px rgba(231,201,139,.5) !important;
}

/* Card h2 that are section names (not tiny labels) — keep Oswald+gold, readable size */
.card h2:not(.card-label) {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

/* Action/CTA h2 elements (trial, nudge, checklist banners) — stay white, no uppercase */
.card h2.card-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}

/* Billing plan name h2 — large Oswald, white */
.card h2.plan-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  margin-bottom: 8px !important;
}

/* ══ END v62b ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   v64 — REAL VISUAL OVERHAUL
   Previous CSS tweaked things that were already set. This block makes changes
   the eye can actually see. Every rule here targets something visually prominent.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: Visible gold atmospheric glow ─────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.hero::before {
  content: '';
  position: absolute;
  top: -160px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(231,201,139,.18) 0%,
    rgba(231,201,139,.07) 35%,
    transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(231,201,139,.025) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,
      rgba(231,201,139,.025) 0 1px, transparent 1px 88px);
}
.hero > *, .hero-v2 > * { position: relative; z-index: 1; }

/* ── 2. HERO STAT VALUES: gold so they stand out ────────────────────────── */
.hs-val { color: var(--gold) !important; }
.hero-stat { border: 1px solid rgba(231,201,139,.18) !important; border-radius: var(--radius-sm); }

/* ── 3. HERO EYEBROW BADGE ──────────────────────────────────────────────── */
.hero-badge, .eyebrow {
  border-color: rgba(231,201,139,.4) !important;
  background: rgba(231,201,139,.09) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 14px rgba(231,201,139,.1) !important;
}

/* ── 4. NAV: gold accent bottom line ────────────────────────────────────── */
nav {
  position: relative;
}
nav::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(231,201,139,.4) 30%, rgba(231,201,139,.6) 50%,
    rgba(231,201,139,.4) 70%, transparent 100%);
  pointer-events: none;
}

/* ── 5. SECTION H2: gold accent underline bar ───────────────────────────── */
.section h2 {
  position: relative;
  padding-bottom: 20px !important;
}
.section h2::after {
  content: '';
  display: block;
  width: 52px; height: 3px;
  background: var(--gold-grad);
  margin: 16px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(231,201,139,.35);
}

/* ── 6. PRICING CARD HIGHLIGHT: visible gold glow ──────────────────────── */
.pricing-card.highlight {
  border: 1px solid rgba(231,201,139,.55) !important;
  box-shadow:
    0 0 0 1px rgba(231,201,139,.22),
    0 0 50px rgba(231,201,139,.14),
    0 32px 64px rgba(0,0,0,.75) !important;
  background: linear-gradient(160deg, #14202f 0%, #0e1929 60%, #111827 100%) !important;
}

/* ── 7. PRICING CARD P2: orange accent ─────────────────────────────────── */
.pricing-card.pc-p2 {
  border: 1px solid rgba(255,138,61,.35) !important;
  box-shadow:
    0 0 0 1px rgba(255,138,61,.12),
    0 0 40px rgba(255,138,61,.08),
    0 24px 48px rgba(0,0,0,.7) !important;
}

/* ── 8. PRICING VALUES: display font ───────────────────────────────────── */
.tier-price {
  font-family: var(--font-display) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
.tier-price span {
  font-size: 15px !important;
  font-weight: 400 !important;
  opacity: .65 !important;
  letter-spacing: 0 !important;
}
.tier-name {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* ── 9. CTA BAND: gold-touched background ───────────────────────────────── */
.cta-band {
  position: relative !important;
  background: linear-gradient(135deg,
    rgba(9,14,24,1) 0%,
    rgba(15,23,40,1) 50%,
    rgba(9,14,24,1) 100%) !important;
  border-top: 1px solid rgba(231,201,139,.2) !important;
  border-bottom: 1px solid rgba(231,201,139,.12) !important;
  overflow: hidden !important;
}
.cta-band::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold-dark) 30%, var(--gold) 50%, var(--gold-dark) 70%, transparent 100%);
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(231,201,139,.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band h2, .cta-band .cta-band-h { position: relative; z-index: 1; }

/* ── 10. HOW IT WORKS — step cards: visible treatment ──────────────────── */
.step {
  background: linear-gradient(160deg,
    rgba(20,32,50,.9) 0%,
    rgba(10,18,32,.95) 100%) !important;
  border: 1px solid rgba(231,201,139,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.step:hover {
  border-color: rgba(231,201,139,.4) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.7), 0 0 24px rgba(231,201,139,.07) !important;
  transform: translateY(-4px) !important;
}
.step-num, .promo-step-num {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  color: #1A1308 !important;
  font-family: var(--font-mono,'JetBrains Mono',monospace) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  box-shadow: 0 0 16px rgba(231,201,139,.3) !important;
}

/* ── 11. FEATURE CARDS: borders + hover glow ───────────────────────────── */
.feature-card {
  border: 1px solid rgba(231,201,139,.1) !important;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.feature-card:hover {
  border-color: rgba(231,201,139,.35) !important;
  box-shadow: 0 0 35px rgba(231,201,139,.09), 0 24px 48px rgba(0,0,0,.7) !important;
  transform: translateY(-5px) !important;
}

/* ── 12. FEATURE SHOWCASE: visible gold border on right/active panel ────── */
.feature-showcase {
  border: 1px solid rgba(231,201,139,.12) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(7,11,19,.8) !important;
}

/* ── 13. HERO STATS SECTION: visible separator above ───────────────────── */
.hero-stats {
  border-top: 1px solid rgba(231,201,139,.12) !important;
  padding-top: 28px !important;
  margin-top: 16px !important;
}

/* ── 14. WHY SECTION: vs-hub card glow ─────────────────────────────────── */
.vs-hub {
  box-shadow:
    0 0 0 1px rgba(184,148,85,.45),
    0 0 50px rgba(231,201,139,.12),
    0 32px 64px rgba(0,0,0,.6) !important;
}

/* ── 15. ACTIVE FEATURE TAB: gold underline ─────────────────────────────── */
.feature-tab.active, .feature-tab[aria-selected=true],
.tabs a.active, .tabs a[aria-current] {
  color: #1A1308 !important;
}

/* ── 16. "Add To Discord" / CTA primary btn glow ───────────────────────── */
.btn.primary {
  box-shadow: 0 4px 24px rgba(231,201,139,.2) !important;
  letter-spacing: .02em !important;
}
.btn.primary:hover {
  box-shadow: 0 8px 36px rgba(231,201,139,.38) !important;
  transform: translateY(-2px) !important;
}

/* ── 17. BODY: stronger ambient atmosphere ──────────────────────────────── */
body {
  background:
    radial-gradient(800px 500px at 50% -80px, rgba(231,201,139,.09) 0%, transparent 65%),
    radial-gradient(1400px 700px at 50% -300px, #0C1424 0%, #05070D 60%) fixed,
    #05070D !important;
}

/* ══ END v64 ════════════════════════════════════════════════════════════════ */

/* ══ v64b — Fix hero selector (hero-v2 not hero) + force gold stats ═══════ */

/* Hero class in home.ejs is .hero-v2 not .hero */
.hero-v2 {
  position: relative;
  overflow: hidden;
}
.hero-v2::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 800px;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(231,201,139,.20) 0%,
    rgba(231,201,139,.08) 38%,
    transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero-v2::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(231,201,139,.028) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg,
      rgba(231,201,139,.028) 0 1px, transparent 1px 90px);
}
.hero-v2 > * { position: relative; z-index: 1; }

/* Stat values: force gold — specificity win with full path */
.hero-stat .hs-val {
  color: var(--gold) !important;
  text-shadow: 0 0 20px rgba(231,201,139,.25) !important;
}

/* Hero badge: force gold styling */
.hero-badge {
  border: 1px solid rgba(231,201,139,.4) !important;
  background: rgba(231,201,139,.09) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 16px rgba(231,201,139,.12) !important;
}

/* ══ END v64b ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   v66 — DASHBOARD FIXES
   Root causes of "nothing changed":
   1. .mstat-val never had color:gold — overrides the inline <style> block
   2. v62 targeted .guild-card but guilds.ejs uses .srv-card — wrong class
   3. Topbar gold line was there but not visible enough
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── MSTAT CARDS: stat values → gold, cards → premium dark ─────────────── */
.mstat-val {
  color: var(--gold) !important;
  text-shadow: 0 0 24px rgba(231,201,139,.22) !important;
  font-family: var(--font-display) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.mstat {
  background: linear-gradient(160deg, rgba(18,28,48,.95) 0%, rgba(10,16,28,.98) 100%) !important;
  border: 1px solid rgba(231,201,139,.16) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.mstat:hover {
  border-color: rgba(231,201,139,.38) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.75), 0 0 24px rgba(231,201,139,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateY(-4px) !important;
}
.mstat-lbl {
  color: var(--text-muted) !important;
  font-family: var(--font-mono,'JetBrains Mono',monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}

/* ── TOPBAR: visible gold top-accent line ───────────────────────────────── */
.topbar {
  position: relative !important;
  padding-top: 18px !important;
  border-bottom: 1px solid rgba(231,201,139,.1) !important;
  margin-bottom: 24px !important;
}
.topbar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    rgba(231,201,139,.7) 35%,
    rgba(231,201,139,.25) 70%,
    transparent 100%) !important;
  box-shadow: 0 2px 12px rgba(231,201,139,.25) !important;
  pointer-events: none !important;
}
.topbar h1 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.topbar h1::before {
  content: '' !important;
  display: inline-block !important;
  width: 10px !important; height: 10px !important;
  background: var(--gold-grad) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 10px rgba(231,201,139,.4) !important;
}

/* ── SRV-CARD (guilds.ejs Your Servers): gold borders + hover glow ──────── */
.srv-card {
  background: linear-gradient(160deg, rgba(18,28,48,.95) 0%, rgba(10,16,28,.98) 100%) !important;
  border: 1px solid rgba(231,201,139,.15) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.srv-card:hover {
  border-color: rgba(231,201,139,.4) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.75), 0 0 30px rgba(231,201,139,.09), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateY(-4px) !important;
}
.srv-card.is-add {
  border-style: dashed !important;
  border-color: rgba(231,201,139,.2) !important;
}
.srv-name {
  color: var(--gold) !important;
  letter-spacing: .03em !important;
}

/* ── PICK-SECTION labels (guilds.ejs section headers: ACTIVE, ADD A SERVER) */
.pick-section {
  color: var(--gold) !important;
  border-bottom-color: rgba(231,201,139,.18) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}
.pick h1 {
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}

/* ── DASH NAV: gold dot before active nav item ──────────────────────────── */
.dash-nav a.active {
  color: var(--gold) !important;
  background: rgba(231,201,139,.08) !important;
  border-color: rgba(231,201,139,.25) !important;
}

/* ── CARD: ensure dashboard cards have visible treatment ────────────────── */
.dash-main .card {
  background: linear-gradient(160deg, rgba(18,28,48,.9) 0%, rgba(10,16,28,.95) 100%) !important;
  border: 1px solid rgba(231,201,139,.1) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
}
.dash-main .card:hover {
  border-color: rgba(231,201,139,.22) !important;
}

/* ── MSTAT-GRID spacing ─────────────────────────────────────────────────── */
.mstat-grid {
  gap: 20px !important;
  margin-bottom: 28px !important;
}

/* ══ END v66 ════════════════════════════════════════════════════════════════ */

/* ═══ TIER FEATURE GRID ═══════════════════════════════════════════════════ */
.tier-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:32px 0 0;}
.tier-col{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-secondary);}
.tier-col:last-child{border-right:none;}
.tier-col--p1{background:rgba(231,201,139,.03);}
.tier-col--p2{background:rgba(255,138,61,.03);}

/* column header */
.tier-col-hd{padding:22px 18px 18px;border-bottom:1px solid var(--border);text-align:center;}
.tier-col-pill{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:8px;background:rgba(170,179,197,.12);color:var(--text-muted);border:1px solid rgba(170,179,197,.2);}
.tier-col-pill--p1{background:rgba(231,201,139,.14);color:var(--gold);border-color:rgba(231,201,139,.35);}
.tier-col-pill--p2{background:rgba(255,138,61,.14);color:#FF8A3D;border-color:rgba(255,138,61,.35);}
.tier-col-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.tier-col-sub{font-size:11.5px;color:var(--text-muted);letter-spacing:.01em;}

/* dividers */
.fc-divider{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 14px 7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-primary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:4px;}
.fc-divider:first-of-type{margin-top:0;border-top:none;}
.fc-divider--all{color:#94a3a0;}
.fc-divider--p1{color:var(--gold-dark);}
.fc-divider--p2{color:#C86E28;}
.fc-div-note{font-size:9px;font-weight:600;letter-spacing:.07em;opacity:.7;}

/* feature cards */
.fc-card{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid rgba(28,37,54,.7);transition:background .12s,color .12s,border-left-color .12s;border-left:2px solid transparent;user-select:none;}
.fc-card:last-of-type{border-bottom:none;}
.fc-card:hover{background:rgba(231,201,139,.06);color:var(--text-primary);border-left-color:rgba(231,201,139,.3);}
.fc-card.fc-active{background:rgba(231,201,139,.1);color:var(--text-primary);border-left-color:var(--gold-dark);}
.fc-card--p1.fc-active{border-left-color:var(--gold);}
.fc-card--p2.fc-active{border-left-color:#FF8A3D;}
.fc-card--shared:hover,.fc-card--shared.fc-active{border-left-color:#94a3a0;}
.fc-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.fc-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-badge{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.fc-badge--all{background:rgba(148,163,184,.12);color:#94a3a0;border:1px solid rgba(148,163,184,.2);}
.fc-badge--p1{background:rgba(231,201,139,.12);color:var(--gold-dark);border:1px solid rgba(231,201,139,.25);}

/* inherited P1 cards inside P2 column — slightly more muted */
.fc-card--inherited{opacity:.85;}
.fc-card--inherited:hover,.fc-card--inherited.fc-active{opacity:1;}

/* empty note (Free column) */
.fc-empty-note{padding:14px;font-size:11.5px;color:var(--text-muted);text-align:center;font-style:italic;border-top:1px solid var(--border);margin-top:auto;}

/* responsive */
@media(max-width:760px){.tier-cols{grid-template-columns:1fr;}.tier-col{border-right:none;border-bottom:1px solid var(--border);}.tier-col:last-child{border-bottom:none;}}
/* ═══════════════════════════════════════════════════════════════════════════ */


/* Accessibility: visible keyboard focus ring (added in audit 2026-06-22) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role=button]:focus-visible{
  outline:2px solid var(--gold,#E7C98B);outline-offset:2px;border-radius:6px;
}
:focus:not(:focus-visible){outline:none}


/* ── CFTools integration strip ─────────────────────────────────────────────── */
.syncs-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 36px 0 42px;
}
.syncs-with-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}
.syncs-with-divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
}
.syncs-with-logo {
  display: flex;
  align-items: center;
  opacity: .55;
  transition: opacity .2s ease;
}
.syncs-with-logo:hover { opacity: 1; }
.syncs-with-logo img { height: 20px; width: auto; }

/* ── Public ban-appeal page (/appeal/:key) ───────────────────────────────────
   Standalone page: the viewer is a banned player, not a customer, so it
   deliberately carries no dashboard nav and no upsell. Uses the same tokens as
   the rest of the site so it still reads as DayZ Hub.                        */
.appeal-body{min-height:100vh;display:flex;align-items:flex-start;justify-content:center}
.appeal-wrap{width:100%;max-width:640px;padding:48px 20px 80px}
.appeal-head{text-align:center;margin-bottom:26px}
.appeal-icon{width:76px;height:76px;border-radius:20px;object-fit:cover;margin:0 auto 14px;display:block;
  border:1px solid var(--border-strong);box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.appeal-icon-fallback{display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad);color:#1A1308;font-size:30px;font-weight:800}
.appeal-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.appeal-sub{color:var(--text-secondary);font-size:14px;margin-top:4px}
.appeal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;margin-bottom:16px}
.appeal-card h2{font-size:18px;font-weight:700;margin-bottom:8px}
.appeal-card p{color:var(--text-secondary);font-size:14px;line-height:1.6;margin-bottom:12px}
.appeal-muted{color:var(--text-muted);font-size:13px}
.appeal-ok{border-color:rgba(34,197,94,.35)}
.appeal-bad{border-color:rgba(239,68,68,.35)}
.appeal-note{border-style:dashed}
.appeal-blocked{color:#f0b56b}
.appeal-who{display:flex;align-items:center;gap:14px}
.appeal-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0}
.appeal-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.appeal-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-secondary)}
.appeal-field em{color:var(--danger);font-style:normal}
.appeal-field input,.appeal-field textarea{width:100%}
.appeal-foot{text-align:center;color:var(--text-muted);font-size:12.5px;margin-top:26px}
.appeal-foot a{color:var(--gold);text-decoration:none}
@media(max-width:600px){.appeal-wrap{padding:28px 14px 60px}.appeal-card{padding:18px}}