/* ==========================================================================
   GOTYA BRIDGE STYLESHEET  ·  fase 1 rebranding
   --------------------------------------------------------------------------
   Deze sheet laadt NA app.css en overschrijft die op bronvolgorde.
   app.css blijft ongewijzigd, dus de hele rebrand is terug te draaien door
   in main.php de <link> naar dit bestand weg te halen.

   Merk: mat zwart #0A0A0A, goud #FFC629, Barlow + Barlow Condensed.
   Verhouding ongeveer 70% zwart / 20% wit / 10% goud. Goud is een schok,
   geen behang: als een scherm geel voelt, is het fout.

   Secties staan in vaste volgorde. Voeg nieuwe regels toe in de sectie waar
   ze horen, niet onderaan het bestand.
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   Zet de drie bestanden in public/assets/fonts/. Zie 03-ASSETS/ASSETS.md.
   Alleen ttf-bronnen: er zijn (nog) geen woff2-bestanden, en een verwijzing
   ernaar gaf drie 404's per paginaweergave. Zet de woff2-src's terug zodra
   de bestanden bestaan (zie 03-ASSETS/ASSETS.md).
   Ontbrekende gewichten worden bewust op een aanwezig bestand gemapt:
   Barlow 500 -> Regular, Barlow Condensed 600 -> Bold. Zie ASSETS.md.
   ========================================================================== */
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   2. TOKENS
   Eerst de canonieke merk-set (--g-*), daarna de oude tokens daarop richten.
   Deze ene sectie repareert elke var()-consument in app.css EN elke inline
   style in de views die var() gebruikt. Verwijder later app.css en de --g-*
   set blijft staan.
   ========================================================================== */
:root{
  /* canoniek merk */
  --g-bg:#0A0A0A; --g-panel:#111214; --g-panel2:#15161a; --g-card:#17181d;
  --g-line:#26272b; --g-line2:#33353a;
  --g-ink:#ffffff; --g-mut:#9a9ca2; --g-mut2:#8a8d94;
  --g-gold:#FFC629; --g-gold2:#F5A623; --g-amber:#E8990A;
  --g-grad:linear-gradient(135deg,#FFC629,#F5A623,#E8990A);
  --g-green:#22A757; --g-red:#FF6B5E; --g-hot:#FF6B2C; --g-cgc:#4FC3F7; --g-psa:#FF6B5E;
  --g-cond:'Barlow Condensed','Barlow',sans-serif;
  --g-sans:'Barlow',-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* oude tokens omgericht op het merk */
  --bg:var(--g-bg);
  --bg-elev:var(--g-panel);
  --bg-card:var(--g-card);
  --bg-card-2:#1d1e23;
  --border:var(--g-line2);
  --border-soft:var(--g-line);
  --text:var(--g-ink);
  --text-dim:var(--g-mut);
  --text-faint:#8a8d94;          /* zelfde als --g-mut2: bewust lichter dan het ontwerp (#6a6c72 haalt WCAG AA niet) */
  --primary:var(--g-gold);
  --primary-d:var(--g-amber);
  --accent:var(--g-gold);
  --danger:var(--g-red);
  --warn:var(--g-gold2);
  --ok:var(--g-green);

  /* zeldzaamheidsladder: piekt bewust in de merkkleur */
  --common:#82858c;
  --uncommon:#22A757;
  --rare:#4FC3F7;
  --epic:#B07BFF;
  --legendary:#FFC629;
  --grail:#FF6B2C;

  --radius:16px;
  --radius-sm:11px;
  --shadow:0 18px 44px -14px rgba(0,0,0,.8);
}

/* ==========================================================================
   3. BASIS
   ========================================================================== */
body{
  font-family:var(--g-sans);
  background:radial-gradient(1100px 620px at 76% -180px,rgba(255,198,41,.10),transparent 62%),
             radial-gradient(800px 480px at -140px 45%,rgba(255,140,40,.05),transparent 60%),
             var(--g-bg) fixed;
  color:var(--g-ink);
}
html{scrollbar-color:#2a2b30 var(--g-bg)}
h1,h2,h3,h4{letter-spacing:.2px}
a{color:inherit}
::selection{background:rgba(255,198,41,.28)}

/* Kopregels in Condensed: dat is het handschrift van het merk. */
.page h1,.section-head h1,.home-welcome h1,.lb-hero h1,.hero-copy h1,.pd-title,
.section-title,.gwd-title,.mk-count,.big-price,.big-price-xl{
  font-family:var(--g-cond);font-weight:700;letter-spacing:.4px;
}
.page h1,.section-head h1,.home-welcome h1,.lb-hero h1{text-transform:uppercase}

/* ==========================================================================
   4. SHELL EN SIDEBAR
   ========================================================================== */
.sidebar{background:var(--g-panel);border-right:1px solid var(--g-line)}
.sb-link{
  font-family:var(--g-cond);font-weight:600;font-size:1.03rem;letter-spacing:.8px;
  text-transform:uppercase;color:var(--g-mut);border-radius:9px;
}
.sb-link:hover{color:var(--g-gold);background:transparent}
.sb-link.active{background:#161206;color:var(--g-gold)}
.sb-link.active::before{background:var(--g-gold);width:3px;top:6px;bottom:6px}
.sb-link.sb-admin{color:var(--g-mut2)}
.sb-link.sb-admin:hover{color:var(--g-gold)}
.sb-badge{background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700}
.sb-badge-open{background:var(--g-grad);color:#0A0A0A}
.sb-sep{background:var(--g-line)}
.sb-collapse{color:var(--g-mut2)}
.sb-collapse:hover{color:var(--g-gold)}
.sb-wallet{background:var(--g-card);border:1px solid var(--g-line2);border-radius:11px}
.sb-wallet:hover{border-color:rgba(255,198,41,.45)}
.sb-wallet-label{font-family:var(--g-cond);font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--g-mut2)}
.sb-wallet-amt{
  font-family:var(--g-cond);font-weight:700;font-size:1.5rem;color:var(--g-gold);
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,198,41,.35);
}
/* De enige pulserende CTA in de shell. Voeg er geen tweede toe. */
.sb-cta{
  background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:1.3px;border-radius:11px;
  animation:gPulse 2.6s ease-in-out infinite;
}
@keyframes gPulse{0%,100%{box-shadow:0 8px 22px rgba(255,198,41,.22)}50%{box-shadow:0 10px 36px rgba(255,198,41,.46)}}
.sb-overlay{background:rgba(0,0,0,.62)}

/* ==========================================================================
   5. TOPBAR, USERMENU, AVATAR
   ========================================================================== */
.app-topbar{
  background:linear-gradient(180deg,rgba(10,10,10,.94),rgba(10,10,10,.78));
  backdrop-filter:blur(12px);border-bottom:1px solid var(--g-line);
}
.topbar-icon{border-color:var(--g-line);color:var(--g-mut);border-radius:11px}
.topbar-icon:hover{color:var(--g-gold);border-color:var(--g-gold)}
.topbar-dot{background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;box-shadow:0 0 12px rgba(255,198,41,.7)}
.wallet-pill{
  background:rgba(255,198,41,.08);border:1px solid rgba(255,198,41,.34);color:var(--g-gold);
  font-family:var(--g-cond);font-weight:700;font-size:1.06rem;letter-spacing:.6px;
  font-variant-numeric:tabular-nums;border-radius:11px;
}
.wallet-pill:hover{border-color:rgba(255,198,41,.6)}
.wallet-pill-bonus{color:#7ddba4;border-left-color:rgba(255,198,41,.28)}
.points-pill{background:rgba(255,198,41,.08);border:1px solid rgba(255,198,41,.34);color:var(--g-gold);font-family:var(--g-cond);font-weight:700}
/* Avatar was een paars-teal verloop. Nu rustig, met gouden rand. */
.avatar{
  background:var(--g-card);border:1px solid var(--g-line2);color:var(--g-gold);
  border-radius:11px;font-family:var(--g-cond);font-weight:700;font-size:1.05rem;
}
.avatar:hover{border-color:var(--g-gold)}
.usermenu-drop{background:var(--g-panel2);border:1px solid var(--g-line2);border-radius:12px;box-shadow:var(--shadow)}
.usermenu-drop a,.usermenu-drop button{color:var(--g-mut)}
.usermenu-drop a:hover,.usermenu-drop button:hover{color:var(--g-gold);background:rgba(255,198,41,.06)}
.usermenu-drop .admin-link{color:var(--g-gold)}
.app-footer{border-top:1px solid var(--g-line);color:var(--g-mut2)}
.app-footer a:hover{color:var(--g-gold)}
/* Verplichte compliance-regel (merkregels): 18+ · Play responsibly · odds. */
.footer-compliance{font-family:var(--g-cond);font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;font-size:.72rem;color:var(--g-mut2)}
.footer-social a{color:var(--g-mut2)}
.footer-social a:hover{color:var(--g-gold)}

/* ==========================================================================
   6. KNOPPEN
   .btn-primary en .btn-ghost worden door app.js omgewisseld: namen blijven.
   ========================================================================== */
.btn{
  font-family:var(--g-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:1.3px;border-radius:11px;font-size:.99rem;
}
.btn-primary{background:var(--g-grad);color:#0A0A0A;box-shadow:0 8px 24px rgba(255,198,41,.26)}
.btn-primary:hover{background:var(--g-grad);box-shadow:0 10px 34px rgba(255,198,41,.44)}
.btn-ghost{background:transparent;color:var(--g-mut);border:1px solid var(--g-line2)}
.btn-ghost:hover{border-color:var(--g-gold);color:var(--g-gold);background:transparent}
.btn-accent{background:var(--g-grad);color:#0A0A0A}
.btn-danger{color:var(--g-red);border-color:rgba(255,107,94,.4);background:transparent}
.btn-danger:hover{background:rgba(255,107,94,.1)}
.btn:disabled,.btn.disabled{opacity:.45}
.btn-google{background:#fff;color:#1f1f1f;font-family:var(--g-sans);text-transform:none;letter-spacing:0}
/* Knoppen die .btn omzeilen en hun eigen geometrie hebben.
   .reveal-keep-btn hoort hier NIET bij: dat is bewust de secundaire (ghost)
   knop onder Accept — twee gouden knoppen in het buyback-paneel breekt de
   een-primaire-knop-regel en de hover werd onleesbaar. */
/* LET OP: .pd-buy is GEEN knop maar de koop-wrapper (form met qty-selector);
   hem hier opnemen verfde het hele blok goud. De knop daarbinnen is .buy-btn. */
.price-btn,.buy-btn,.co-buy,.lm-submit,.accept-offer-btn,.fc-bidbtn{
  background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;border-color:transparent;
}
/* app.css geeft deze knoppen box-shadow in var(--primary): vroeger subtiel
   paars, met goud een felle waas. Rustige diepteschaduw, vleugje bij hover. */
.price-btn,.buy-btn,.co-buy,.accept-offer-btn{box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.price-btn:hover,.buy-btn:hover,.co-buy:hover{box-shadow:0 12px 26px -12px rgba(255,198,41,.28)}
/* app.css wisselt deze knoppen bij hover naar effen var(--primary-d): die
   shorthand wist het gradient en de kleur-transitie start op transparant,
   dus de knop knippert zwart. Het gradient blijft bij hover gewoon staan
   (de :not(:disabled) is nodig om de app.css-specificiteit te evenaren). */
.buy-btn:hover:not(:disabled),.co-buy:hover,.lm-submit:hover,.fc-bidbtn:hover{background:var(--g-grad)}
.accept-offer-btn:hover{box-shadow:0 12px 26px -12px rgba(255,198,41,.28);transform:translateY(-1px)}
.price-btn.sold{background:var(--g-card);color:var(--g-mut2);border:1px solid var(--g-line2);box-shadow:none}
.show-more,.pd-odds-btn,.co-coupon-btn{
  background:transparent;color:var(--g-mut);border:1px solid var(--g-line2);
  font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:1.1px;
}
.show-more:hover,.pd-odds-btn:hover,.co-coupon-btn:hover{border-color:var(--g-gold);color:var(--g-gold)}
.reveal-keep-btn{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:1.1px}
.reveal-keep-btn:hover{border-color:var(--g-gold);background:rgba(255,198,41,.1)}
/* Eindstaat: Accept staat ernaast, dus keep blijft ook hier de ghost —
   twee gouden knoppen gestapeld breekt de een-primaire-knop-regel. Deze
   override verslaat wel de app.css-regel met het oude paars (#7b69ff). */
.reveal-final .reveal-keep-btn{background:transparent;border:1px solid var(--g-line2);color:var(--g-ink);box-shadow:none}
.reveal-final .reveal-keep-btn span{color:var(--g-gold)}

/* ==========================================================================
   7. FORMULIEREN
   ========================================================================== */
.input,select,textarea,.co-coupon-input,.mk-search input,.lm-priceinput,.fc-bidselect{
  background:var(--g-bg);border:1px solid var(--g-line2);border-radius:10px;color:var(--g-ink);
  font-family:var(--g-sans);
}
.input:focus,select:focus,textarea:focus{
  border-color:var(--g-gold);box-shadow:0 0 0 3px rgba(255,198,41,.16);
}
.input::placeholder,textarea::placeholder{color:var(--g-mut2)}
.field label{
  font-family:var(--g-cond);font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--g-mut);
}
.checkbox{accent-color:var(--g-gold)}
.dropzone{border-color:var(--g-line2);background:var(--g-card)}
.dropzone.dragging{border-color:var(--g-gold);background:rgba(255,198,41,.1)}
.qty-select,.qty-opt{background:var(--g-card);border-color:var(--g-line2);color:var(--g-ink)}
.qty-opt.on,.qty-opt.active{background:var(--g-grad);color:#0A0A0A;border-color:transparent}

/* ==========================================================================
   8. OPPERVLAKKEN EN TABELLEN
   ========================================================================== */
.card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:16px}
.hr{background:var(--g-line)}
.section-head h1,.section-head h2{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.muted,.note{color:var(--g-mut)}
.code{background:var(--g-card);border:1px solid var(--g-line2);color:var(--g-gold)}
.empty{color:var(--g-mut2)}
.table th{
  font-family:var(--g-cond);font-weight:600;font-size:.78rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--g-mut2);border-bottom-color:var(--g-line);
}
.table td{border-bottom-color:var(--g-line)}
.table tr:hover td{background:rgba(255,255,255,.02)}
.kv{border-bottom-color:var(--g-line)}
.kv .k,.kv dt{color:var(--g-mut)}

/* ==========================================================================
   9. PILLS, BADGES, CHIPS
   Eén recept: 12% tint, 55% rand, verzadigde tekst, Condensed uppercase.
   ========================================================================== */
.pill,.badge,.tag,.gw-badge{font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.pill-green{background:rgba(34,167,87,.14);color:#4cd07f;border:1px solid rgba(34,167,87,.4)}
.pill-blue{background:rgba(79,195,247,.12);color:var(--g-cgc);border:1px solid rgba(79,195,247,.4)}
.pill-amber{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4)}
.pill-gray{background:transparent;color:var(--g-mut2);border:1px solid var(--g-line2)}
.pill-red{background:rgba(255,107,94,.12);color:var(--g-red);border:1px solid rgba(255,107,94,.4)}
.badge-low{background:rgba(255,107,94,.12);color:var(--g-red);border:1px solid rgba(255,107,94,.4)}
.badge-restock{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4)}
.badge-grail{background:rgba(255,107,44,.14);color:var(--g-hot);border:1px solid rgba(255,107,44,.45)}
.badge-live{background:rgba(34,167,87,.14);color:#4cd07f;border:1px solid rgba(34,167,87,.4)}
.badge-paused{background:transparent;color:var(--g-mut2);border:1px solid var(--g-line2)}
.points-badge{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4)}
.vaulted-pill{background:rgba(34,167,87,.14);color:#4cd07f;border:1px solid rgba(34,167,87,.4)}
.cert-badge{background:rgba(255,107,94,.12);color:var(--g-psa);border:1px solid rgba(255,107,94,.45);font-family:var(--g-cond);font-weight:700}
.tip,.tip-body{background:var(--g-panel2);border:1px solid var(--g-line2);color:var(--g-mut);border-radius:10px}

/* ==========================================================================
   10. HOME
   ========================================================================== */
.hero h1{background:linear-gradient(90deg,#FFF0B8,#FFD84D 25%,#FFC629 50%,#FFF0B8 75%,#FFD84D);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--g-cond);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  filter:drop-shadow(0 4px 22px rgba(255,198,41,.4))}
.hero p{color:var(--g-mut)}
.stat-row .num{font-family:var(--g-cond);font-weight:700;color:var(--g-gold);font-variant-numeric:tabular-nums}
.stat-row .lbl{font-family:var(--g-cond);letter-spacing:1.4px;text-transform:uppercase;color:var(--g-mut2)}
.home-welcome h1{font-family:var(--g-cond);font-weight:700;text-transform:uppercase}
/* Stat-tegels naar het ontwerp: icoon-vak links, subtiele gouden radial,
   bedragen goud in Condensed. Markup levert hs-ic/hs-body/hs-note. */
.hs-tile{background:var(--g-panel);border:1px solid rgba(255,198,41,.14);border-radius:14px;
  display:flex;gap:13px;align-items:center;padding:15px 17px;position:relative;overflow:hidden}
.hs-tile::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px 100px at 12% -30px,rgba(255,198,41,.12),transparent 70%)}
.hs-tile:hover{border-color:rgba(255,198,41,.45);transform:translateY(-3px)}
.hs-ic{width:40px;height:40px;border-radius:10px;background:rgba(255,198,41,.08);color:var(--g-gold);
  display:grid;place-items:center;border:1px solid rgba(255,198,41,.2);flex:none;position:relative}
.hs-body{flex:1;position:relative;display:flex;flex-direction:column;min-width:0}
.hs-label{font-family:var(--g-cond);letter-spacing:1.4px;text-transform:uppercase;color:var(--g-mut);font-size:.76rem}
.hs-val{font-family:var(--g-cond);font-weight:700;font-size:1.72rem;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,198,41,.3);line-height:1.15}
.hs-val.hs-gold{color:var(--g-gold)}
.hs-note{color:var(--g-mut2);font-size:.72rem;margin-top:3px}
/* View all-links in de sectiekoppen: goud, Condensed, zoals het ontwerp. */
.section-head a.muted{color:var(--g-gold);font-family:var(--g-cond);font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;font-size:.82rem}
.section-head a.muted:hover{text-shadow:0 0 12px rgba(255,198,41,.6)}
/* De pending-banner was paars. Nu de gouden shimmer-rij uit het ontwerp. */
.pending-banner{
  background:linear-gradient(90deg,#241b06,var(--g-card) 72%);
  border:1px solid rgba(255,198,41,.47);border-radius:14px;position:relative;overflow:hidden;
}
.pending-banner::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,220,110,.16),transparent);
  transform:skewX(-18deg);animation:gShine 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes gShine{0%{left:-70%}60%,100%{left:140%}}
/* Binnenruimte: deze tegels hadden in het oude ontwerp geen zichtbare rand,
   dus de inhoud stond op 0px van de rand. Met de panel-look hoort er lucht. */
.jp-card,.jp2-card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:12px;padding:9px}
.jp2-card:hover{border-color:rgba(255,198,41,.4)}
/* app.css geeft de slab een navy gradient uit het oude thema; nu de tegel
   zelf een zwart paneel is, oogt dat als een blauwe doos om de kaart. */
.jp-slab{background:var(--g-panel2)}
/* app.css zet de slab even breed als de tegel zelf (132/170px vast); met de
   9px padding van het paneel stak de kaart daardoor rechts uit de tegel.
   Twee klassen diep omdat app.css 170px zet via .jp2-card-top .jp-slab. */
.jp-card .jp-slab,.jp2-card .jp-slab{width:100%}
.jp2-name{font-weight:600}
.jp2-time,.jp2-pack-meta,.jp2-pack-name{color:var(--g-mut2)}
.jp-live{color:var(--g-gold);font-family:var(--g-cond);letter-spacing:2px}
.jp-live i{background:var(--g-gold);box-shadow:0 0 10px rgba(255,198,41,.9)}
.bh-gain,.bh-profit{color:var(--g-gold);font-family:var(--g-cond);font-weight:700;font-variant-numeric:tabular-nums}
.bh-mult{color:var(--g-gold);background:rgba(255,198,41,.12);border:1px solid rgba(255,198,41,.4);font-family:var(--g-cond);font-weight:700}
.bh-meta,.bh-who,.bh-when,.bh-from{color:var(--g-mut2)}
.home-banner-dots button.on{background:var(--g-gold);box-shadow:0 0 12px rgba(255,198,41,.9)}
.hh-cell,.hh-card{border-color:var(--g-line)}
/* app.css geeft de cel een blauwgrijze radial uit het oude thema; zelfde
   dieptewerking, maar in de neutrale zwarttinten van het merk. */
.hh-cell{background:radial-gradient(120% 90% at 50% 18%, #232428 0%, var(--g-panel) 70%)}
.section-title{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:.6px}

/* ==========================================================================
   11. PACKS EN VENDING
   ========================================================================== */
.packs-hero{border:1px solid rgba(255,198,41,.22);border-radius:18px}
.hero-bg::after{background:linear-gradient(90deg,rgba(10,10,10,.92),rgba(10,10,10,.35) 60%,transparent)}
.eyebrow{color:var(--g-gold);font-family:var(--g-cond);font-weight:700;letter-spacing:2.4px;text-transform:uppercase}
.hero-copy h1{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.hero-copy p{color:var(--g-mut)}
.hero-dots button.on{background:var(--g-gold);box-shadow:0 0 12px rgba(255,198,41,.9)}
.cat-tab{
  background:transparent;border:1px solid var(--g-line2);color:var(--g-mut);border-radius:99px;
  font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.cat-tab:hover{border-color:rgba(255,198,41,.5);color:var(--g-gold)}
.cat-tab.active{background:var(--g-grad);color:#0A0A0A;border-color:transparent;box-shadow:0 4px 16px rgba(255,198,41,.3)}
.pack-name{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pack-cell:hover .pack-foil{box-shadow:0 26px 46px -16px rgba(255,198,41,.32)}
.pf-badge{background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700}
.pf-fmv{color:var(--g-mut2)}
.pf-soldout{background:rgba(10,10,10,.82);color:var(--g-mut);font-family:var(--g-cond);font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.price-btn{font-variant-numeric:tabular-nums}
.pd-title{font-family:var(--g-cond);font-weight:700;text-transform:uppercase}
.pd-cap,.pd-desc{color:var(--g-mut)}
.pd-odds-panel{background:var(--g-panel);border:1px solid var(--g-line2);border-radius:16px}
.pd-odds-ev{color:var(--g-gold);font-family:var(--g-cond);font-weight:700}
.odds-tile{background:var(--g-card);border:1px solid var(--g-line);border-radius:11px}
.prob-bar{background:var(--g-line);border-radius:99px}
.prob-bar > span{background:var(--g-grad)}

/* ==========================================================================
   12. MARKET
   ========================================================================== */
.mk-card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:14px}
.mk-card:hover{border-color:rgba(255,198,41,.4);box-shadow:0 18px 44px -14px rgba(255,198,41,.22)}
.mk-img{background:radial-gradient(120% 90% at 50% 20%,#22242b,#101114 75%);border-radius:10px}
.mk-name{font-weight:600}
.mk-price{font-family:var(--g-cond);font-weight:700;font-size:1.25rem;color:var(--g-gold);font-variant-numeric:tabular-nums}
.mk-fmv{color:var(--g-mut2);background:var(--g-card);border-radius:7px}
/* Korting was groen, is nu de gouden deal-chip uit het ontwerp. */
.mk-off{background:var(--g-grad);color:#0A0A0A;border:0;font-family:var(--g-cond);font-weight:700;letter-spacing:.8px}
.mk-heart{background:rgba(10,10,10,.8);border:1px solid var(--g-line2);color:var(--g-mut);border-radius:9px}
.mk-heart:hover{color:var(--g-red);border-color:rgba(255,107,94,.4)}
.mk-heart.liked{color:var(--g-red);border-color:rgba(255,107,94,.5)}
.mk-auction{
  background:rgba(10,10,10,.8);border:1px solid rgba(255,198,41,.34);color:var(--g-gold);
  font-family:var(--g-cond);font-weight:700;font-variant-numeric:tabular-nums;
}
.mk-auction.urgent{border-color:rgba(255,107,94,.45);color:var(--g-red)}
.mk-status{font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mk-tab{border:1px solid var(--g-line2);color:var(--g-mut);border-radius:99px;font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mk-tab:hover{color:var(--g-gold);border-color:rgba(255,198,41,.4)}
.mk-tab.active{background:var(--g-grad);color:#0A0A0A;border-color:transparent}
.mk-count{color:var(--g-mut);letter-spacing:1px;text-transform:uppercase}
.mk-filter-btn,.vt{background:transparent;border:1px solid var(--g-line2);color:var(--g-mut);border-radius:9px}
.mk-filter-btn:hover,.vt:hover{border-color:var(--g-gold);color:var(--g-gold)}
.vt.active{background:var(--g-grad);color:#0A0A0A;border-color:transparent}
.mk-filters{background:var(--g-panel);border-left:1px solid var(--g-line2)}
.mk-filters-head{border-bottom-color:var(--g-line)}
.mk-filters-actions{background:var(--g-panel);border-top-color:var(--g-line)}
.filt{border-bottom-color:var(--g-line)}
.filt > summary{font-family:var(--g-cond);font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--g-mut)}
.pg{border:1px solid var(--g-line2);color:var(--g-mut);border-radius:9px;font-family:var(--g-cond);font-weight:700}
.pg:hover{border-color:var(--g-gold);color:var(--g-gold)}
.pg.on{background:var(--g-grad);color:#0A0A0A;border-color:transparent}

/* ==========================================================================
   13. COLLECTION EN PROFIEL
   ========================================================================== */
.hold-banner{background:linear-gradient(120deg,#241b06,#15120a 70%);border:1px solid rgba(255,198,41,.4);border-radius:16px}
.hold-badge{background:rgba(10,10,10,.82);border:1px solid rgba(255,198,41,.4);color:var(--g-gold);font-family:var(--g-cond);font-weight:700}
.hold-badge.soon{border-color:rgba(255,107,94,.45);color:var(--g-red)}
.pf-tab{color:var(--g-mut);font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.pf-tab.on,.pf-tab.active{color:var(--g-gold);border-bottom-color:var(--g-gold)}
.asset-stage{background:radial-gradient(120% 90% at 50% 15%,#22242b,#0d0e10 78%)}

/* ==========================================================================
   14. LEADERBOARD
   ========================================================================== */
.lb-hero h1{font-family:var(--g-cond);font-weight:700;text-transform:uppercase}
.lb-reset{background:transparent;border:1px solid var(--g-line2);color:var(--g-mut2);font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.pod{background:var(--g-panel);border:1px solid var(--g-line);border-radius:16px}
.pod-plat{background:var(--g-card);border:1px solid var(--g-line);border-radius:14px}
/* De winnaar krijgt de animerende gouden rand: het enige element met deze behandeling. */
.pod-1 .pod-plat{background:linear-gradient(160deg,#1d1707,#15120a 70%);border-color:rgba(255,198,41,.5)}
.pod-1 .pod-avatar{box-shadow:0 0 44px -6px rgba(255,198,41,.75)}
/* De tekst CHAMPION erft de emoji-geometrie uit app.css (1.4rem, top:-22px);
   zonder deze correctie overlapt een brede gouden balk de winnaars-avatar. */
.pod-crown{background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;box-shadow:0 0 22px rgba(255,198,41,.6);font-size:.6rem;line-height:1.1;padding:3px 10px;border-radius:999px;top:-12px}
.pod-name{font-weight:600}
.pod-rank{font-family:var(--g-cond);letter-spacing:1.6px;text-transform:uppercase;color:var(--g-mut2)}
.pod-pts{font-family:var(--g-cond);font-weight:700;color:var(--g-gold);font-variant-numeric:tabular-nums}
.lb-status{background:linear-gradient(120deg,#241b06,#15120a 70%);border:1px solid rgba(255,198,41,.34);border-radius:16px}
.lb-you-rank{color:var(--g-gold);font-family:var(--g-cond);font-weight:700}
.lb-promo{color:var(--g-mut)}
.lb-prizes span,.lb-prizes li{background:rgba(255,198,41,.1);color:var(--g-gold);border:1px solid rgba(255,198,41,.36);font-family:var(--g-cond);font-weight:700}
.lb-toggle a{border:1px solid var(--g-line2);color:var(--g-mut);border-radius:99px;font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.lb-toggle a.on{background:var(--g-grad);color:#0A0A0A;border-color:transparent}
.lb-row{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px}
.lb-row.is-me{border-color:rgba(255,198,41,.47);background:linear-gradient(90deg,#241b06,var(--g-card) 72%)}
.lb-pos{font-family:var(--g-cond);font-weight:700;color:var(--g-mut2);font-variant-numeric:tabular-nums}
.lb-row.is-me .lb-pos{color:var(--g-gold)}
.lb-pts{font-family:var(--g-cond);font-weight:700;font-variant-numeric:tabular-nums}

/* ==========================================================================
   15. GIVEAWAYS
   ========================================================================== */
.gw2-tabs a,.gw2-scope a{border:1px solid var(--g-line2);color:var(--g-mut);border-radius:99px;font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.gw2-tabs a.on,.gw2-scope a.on{background:var(--g-grad);color:#0A0A0A;border-color:transparent}
.gw2-create{background:var(--g-grad);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;border-radius:11px}
.gw2-card{background:var(--g-panel);border:1px solid var(--g-line);border-top:2px solid var(--g-gold);border-radius:16px}
.gw2-name{font-weight:600}
.gw2-verif{color:var(--g-gold)}
.gw2-role,.gw2-part,.gw2-when{color:var(--g-mut2)}
.gw2-hot{background:var(--g-hot);color:#0A0A0A;font-family:var(--g-cond);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 0 14px rgba(255,107,44,.7)}
.gw2-stage{background:radial-gradient(120% 90% at 50% 20%,#22242b,#101114 78%);border-radius:12px}
.gw2-pname{color:var(--g-ink)}
.gw2-pprice{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4);font-family:var(--g-cond);font-weight:700}
.gw2-nav{background:rgba(10,10,10,.72);border:1px solid var(--g-line2);color:var(--g-mut)}
.gw2-nav:hover{color:var(--g-gold);border-color:var(--g-gold)}
.gw2-dots span.on{background:var(--g-gold)}
.gw2-total{border-top-color:var(--g-line);font-family:var(--g-cond);letter-spacing:1px;text-transform:uppercase;color:var(--g-mut)}
.gw2-total strong{color:var(--g-gold);font-family:var(--g-cond);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums}
.gw2-timer{gap:8px}
.gw2-timer > div{background:var(--g-card);border:1px solid var(--g-line2);border-radius:10px}
.gw2-timer b{font-family:var(--g-cond);font-weight:700;color:var(--g-gold);font-variant-numeric:tabular-nums}
.gw2-timer span{font-family:var(--g-cond);letter-spacing:1.4px;text-transform:uppercase;color:var(--g-mut2)}
.gw2-cta{background:var(--g-grad);color:#0A0A0A;border:0;font-family:var(--g-cond);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;border-radius:11px}
.gw2-cta:hover{background:var(--g-grad);box-shadow:0 10px 30px rgba(255,198,41,.38)}
.gw-active{background:rgba(34,167,87,.14);color:#4cd07f;border:1px solid rgba(34,167,87,.4)}
.gw-upcoming{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4)}
.gw-ended,.gw-cancelled{background:transparent;color:var(--g-mut2);border:1px solid var(--g-line2)}
.gw-joined{background:rgba(34,167,87,.12);border:1px solid rgba(34,167,87,.34);color:#4cd07f}
.gwd-title{font-family:var(--g-cond);font-weight:700;text-transform:uppercase}
.gwd-stat,.gwd-prize{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px}
.gwd-money{color:var(--g-gold);font-family:var(--g-cond);font-weight:700;font-variant-numeric:tabular-nums}
.gwd-prize-price{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4);font-family:var(--g-cond);font-weight:700}
.gwd-req{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px}
.gwd-req.met{border-color:rgba(34,167,87,.4)}

/* ==========================================================================
   16. WALLET EN CHECKOUT
   Het balansgetal is het geldmoment van de site: Condensed, goud, met gloed.
   ========================================================================== */
.big-price,.big-price-xl{
  font-family:var(--g-cond);font-weight:700;color:var(--g-gold);
  font-variant-numeric:tabular-nums;text-shadow:0 0 34px rgba(255,198,41,.35);
}
.wallet-held,.wallet-total{color:var(--g-mut)}
.wallet-bonus > strong,.wallet-bonus-row .wbr-amt{color:#7ddba4;font-family:var(--g-cond);font-weight:700}
.deposit-presets button,.deposit-presets a{
  background:transparent;border:1px solid var(--g-line2);color:var(--g-mut);border-radius:10px;
  font-family:var(--g-cond);font-weight:700;
}
.deposit-presets button:hover{border-color:var(--g-gold);color:var(--g-gold)}
.deposit-presets button.on,.deposit-presets .on{background:var(--g-grad);color:#0A0A0A;border-color:transparent}
.co-method{background:var(--g-card);border:1px solid var(--g-line2);border-radius:12px}
.co-method:has(input:checked){border-color:var(--g-gold);background:rgba(255,198,41,.08)}
.co-coupon-msg.ok{color:#4cd07f}
.co-coupon-msg.err{color:var(--g-red)}
.co-total,.co-line strong{font-family:var(--g-cond);font-weight:700;color:var(--g-gold);font-variant-numeric:tabular-nums}

/* ==========================================================================
   17. REDEMPTIONS, ACTIVITY, SETTINGS
   ========================================================================== */
.shout-item{border-bottom-color:var(--g-line)}
.shout-dot{background:var(--g-line2)}
.shout-link .shout-dot{background:var(--g-gold);box-shadow:0 0 10px rgba(255,198,41,.8)}
.shout-go{color:var(--g-mut2)}
.shout-item:hover{background:rgba(255,198,41,.04)}
.rd-status,.rd-hint{color:var(--g-mut2)}

/* ==========================================================================
   18. REWARDS (fase 1: alleen meeliften, niets structureels)
   Het tier-systeem is fase 2. Raak deze pagina verder niet aan.
   ========================================================================== */
.invite-hero{background:linear-gradient(120deg,#241b06,#15120a 70%);border:1px solid rgba(255,198,41,.34);border-radius:16px}
.quest-card,.reward-card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:14px}

/* ==========================================================================
   19. REVEAL FX
   De rip is het emotionele hoogtepunt en de enige plek waar goud groot mag.
   LET OP: app.js schrijft hier klassenamen in de DOM. Nooit hernoemen:
   pedestal-card hit-{tier}, reveal-fx fx-{tier}, jp-slab glow-{rarity}.
   ========================================================================== */
.unbox-stage{background:radial-gradient(120% 80% at 50% 30%,#161206,#0A0A0A 72%)}
.pack-aura{filter:drop-shadow(0 0 60px rgba(255,198,41,.4))}
.rip-flash{background:radial-gradient(circle at 50% 45%,rgba(255,240,190,.95),rgba(255,198,41,.5) 40%,transparent 70%)}
.grail-flash{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.98),rgba(255,107,44,.6) 45%,transparent 72%)}
.pedestal-card-wrap{filter:drop-shadow(0 30px 48px rgba(0,0,0,.75))}
/* Waarde-tiers: van rustig naar heet, met goud als piek van het merk. */
.fx-green{color:#4cd07f}
.fx-blue{color:var(--g-cgc)}
.fx-purple{color:#B07BFF}
.fx-gold{color:var(--g-gold);text-shadow:0 0 30px rgba(255,198,41,.75)}
.fx-grail{color:var(--g-hot);text-shadow:0 0 34px rgba(255,107,44,.8)}
.vr-amount{font-family:var(--g-cond);font-weight:700;font-variant-numeric:tabular-nums}
.vr-label{font-family:var(--g-cond);letter-spacing:1.6px;text-transform:uppercase;color:var(--g-mut)}
.vr-mult,.vr-badge{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4);font-family:var(--g-cond);font-weight:700}
/* app.css kleurt bedrag en badge met twee-klasse-selectors (0,2,0) in het
   oude palet; gelijke specificiteit hier, later in bron, wint. */
.fx-green .vr-amount{color:#22A757}
.fx-blue .vr-amount{color:var(--g-cgc)}
.fx-purple .vr-amount{color:#B07BFF}
.fx-gold .vr-amount{color:var(--g-gold)}
.fx-grail .vr-amount{color:var(--g-hot);text-shadow:0 0 26px rgba(255,107,44,.7)}
.fx-green .vr-badge{background:rgba(34,167,87,.14);color:#22A757;border:1px solid rgba(34,167,87,.5)}
.fx-blue .vr-badge{background:rgba(79,195,247,.14);color:var(--g-cgc);border:1px solid rgba(79,195,247,.5)}
.fx-purple .vr-badge{background:rgba(176,123,255,.15);color:#B07BFF;border:1px solid rgba(176,123,255,.5)}
.fx-gold .vr-badge{background:rgba(255,198,41,.15);color:var(--g-gold);border:1px solid rgba(255,198,41,.55)}
.fx-grail .vr-badge{background:var(--g-grad);color:#161206;border:none;box-shadow:0 6px 24px rgba(232,153,10,.55)}
/* In het oude ontwerp was dit paneel onzichtbaar (geen vlak), dus app.css
   geeft het geen padding; met een zichtbaar paneel hoort die er wel bij. */
.buyback-panel{background:var(--g-panel);border:1px solid var(--g-line2);border-radius:16px;padding:20px 22px 16px}
.bb-label,.bb-sub{color:var(--g-mut)}
.bb-amt,.bb-mv{font-family:var(--g-cond);font-weight:700;color:var(--g-gold);font-variant-numeric:tabular-nums}
.bb-pill{background:rgba(255,198,41,.12);color:var(--g-gold);border:1px solid rgba(255,198,41,.4);font-family:var(--g-cond);font-weight:700}
.reveal-name{font-family:var(--g-cond);font-weight:700;text-transform:uppercase}
.reveal-rarity,.reveal-grade{font-family:var(--g-cond);font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.sfx-toggle,.fairness-toggle{color:var(--g-mut2);border-color:var(--g-line2)}
.aura-common{--tease:#82858c}
.aura-uncommon{--tease:#22A757}
.aura-rare{--tease:#4FC3F7}
.aura-epic{--tease:#B07BFF}
.aura-legendary{--tease:#FFC629}
.aura-grail{--tease:#FF6B2C}

/* ==========================================================================
   20. GLOW-HAKEN
   app.js schrijft glow-common t/m glow-grail in de DOM. De gekleurde gloed
   stond hier kort aan maar is op verzoek van Vasco (24 aug) uitgezet: de
   rand/gloed om kaarten matcht niet met de rest. Haken blijven bestaan,
   zodat een subtiele variant later een kwestie van waarden is.
   ========================================================================== */
.glow-common,.glow-uncommon,.glow-rare,.glow-epic,.glow-legendary,.glow-grail{box-shadow:none}

/* ==========================================================================
   21. FLASH, TOASTS, MODALS
   ========================================================================== */
.flash{border-radius:12px}
.flash-ok,.flash-success{background:rgba(34,167,87,.12);border:1px solid rgba(34,167,87,.4);color:#4cd07f}
.flash-err,.flash-error{background:rgba(255,107,94,.12);border:1px solid rgba(255,107,94,.4);color:var(--g-red)}
.flash-info{background:rgba(255,198,41,.1);border:1px solid rgba(255,198,41,.36);color:var(--g-gold)}
.toast{background:var(--g-panel2);border:1px solid rgba(255,198,41,.34);color:var(--g-ink);border-radius:12px;box-shadow:var(--shadow)}
/* Binnenruimte hoort bij de panel-look; zonder padding plakt de tekst op de rand. */
.confirm-card,.complete-card,.hh-modal-body,.refmodal{background:var(--g-panel);border:1px solid var(--g-line2);border-radius:16px;padding:26px 30px}
.confirm-ok{background:var(--g-grad);color:#0A0A0A}
.confirm-cancel{background:transparent;color:var(--g-mut);border:1px solid var(--g-line2)}
.complete-check{color:var(--g-gold)}
.hh-modal-overlay,.confirm-overlay,.refmodal-overlay{background:rgba(0,0,0,.72)}
.ref-chip{background:var(--g-card);border:1px solid var(--g-line2);color:var(--g-mut)}
.ref-chip.volts{background:rgba(255,198,41,.12);border-color:rgba(255,198,41,.4);color:var(--g-gold)}
.ref-btn.primary{background:var(--g-grad);color:#0A0A0A}

/* ==========================================================================
   22. COOKIE-BANNER
   Gebruikt #ck-banner ID-selectors in een inline <style>, dus hier is
   verdubbelde ID-specificiteit nodig. Blijft werken zonder PHP-edit.
   ========================================================================== */
#ck-banner#ck-banner{background:var(--g-panel);border:1px solid var(--g-line2);border-radius:14px;color:var(--g-ink);font-family:var(--g-sans)}
#ck-banner#ck-banner h4,#ck-banner#ck-banner strong{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
#ck-banner#ck-banner p,#ck-banner#ck-banner small{color:var(--g-mut)}
#ck-banner#ck-banner a{color:var(--g-gold)}
#ck-banner#ck-banner button{font-family:var(--g-cond);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;border-radius:10px}
#ck-banner#ck-banner .ck-accept,#ck-banner#ck-banner .ck-save{background:var(--g-grad);color:#0A0A0A;border:0}
#ck-banner#ck-banner .ck-essential,#ck-banner#ck-banner .ck-custom{background:transparent;color:var(--g-mut);border:1px solid var(--g-line2)}

/* ==========================================================================
   23. OVERIG EN INLINE-VERSLAAN
   ========================================================================== */
/* Onderhoudsbalk (main.php, alleen voor staff zichtbaar): signaal in merkrood. */
.maint-bar{background:#3a1512;color:#FF6B5E;border-bottom:1px solid rgba(255,107,94,.4);
  text-align:center;font-family:var(--g-cond);font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;font-size:.86rem;padding:8px 14px}
.maint-bar a{color:var(--g-gold);text-decoration:underline}
.machine-card:hover{border-color:rgba(255,198,41,.5)}
/* gicon(): inline SVG's uit helpers.php. Zonder dit staan ze op de tekst-baseline. */
.gicon{display:inline-block;vertical-align:-.14em}
.pb-emoji .gicon{width:26px;height:26px;vertical-align:middle}
.admin-brand-logo,.sb-logo-full{filter:drop-shadow(0 0 14px rgba(255,198,41,.3))}
/* De inline hoogte is uit de markup gehaald; zonder deze regel rendert het
   nieuwe 656x200-logo op ware grootte in de admin-topbar. */
.admin-brand-logo{height:30px;width:auto}
.auth-wrap .card{background:var(--g-panel);border-color:var(--g-line2)}
/* Asset-pagina: het kader om de kaartweergave matcht niet — weg (Vasco). */
.asset-stage{border:none}
.ai-scan{border:1px solid rgba(255,198,41,.3);background:linear-gradient(180deg,rgba(255,198,41,.06),transparent)}
.row-preselected{background:rgba(255,198,41,.07)}
.ob-name{color:var(--g-gold)}
.fc-youlead{color:var(--g-gold)}
.guard-green{color:#4cd07f}
.guard-orange{color:var(--g-gold2)}
.guard-red{color:var(--g-red)}

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media(max-width:980px){
  .app-topbar{background:rgba(10,10,10,.94)}
  .sidebar{background:var(--g-panel);border-right-color:var(--g-line)}
}
@media(max-width:720px){
  .hero h1{letter-spacing:.2px}
  .big-price,.big-price-xl{font-size:2.1rem}
}

/* ==========================================================================
   25. BEWEGING BEPERKEN
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}