/* ============================================================
   ICEBOOK9.BET  —  shared stylesheet
   Theme (from official panel): navy→petrol-teal gradient ground,
   white login card, orange→gold brand accent, black footer.
   ============================================================ */
:root{
  --navy:#091521;
  --teal-deep:#0e2f3d;
  --teal:#155562;
  --ground-grad:linear-gradient(180deg,#091521 0%,#0d2734 42%,#155562 100%);
  --card:#ffffff;
  --card-ink:#152530;
  --card-dim:#4c6270;
  --input:#eef2f5;
  --input-line:#d4dee4;
  --line:#234352;         /* line on dark ground */
  --txt:#eaf4f8;
  --txt-dim:#a9c5d1;
  --frost:#82a6b5;
  --gold-1:#f6a723;
  --gold-2:#e8850c;
  --gold-ink:#2a1a00;
  --gold-grad:linear-gradient(100deg,#f6a723,#e8850c);
  --wa:#25d366;--wa-ink:#04250f;
  --footer:#050d13;
  --radius:14px;--radius-lg:20px;--maxw:1120px;
  --shadow:0 16px 40px rgba(0,0,0,.4);
  --card-shadow:0 20px 50px rgba(0,0,0,.35);
}

html{overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:clip;max-width:100%}
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;color:var(--txt);
  background:var(--ground-grad) var(--navy) no-repeat;background-attachment:fixed;
  min-height:100vh;
  font:16px/1.68 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-1);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Sora","Inter",sans-serif;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700}
h3{font-size:1.16rem;font-weight:700}
p{margin:0 0 1.05em}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold-1);color:var(--gold-ink);
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--gold-1);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
main{max-width:100%;overflow-x:clip;display:block}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:100;width:100%;max-width:100vw;
  background:rgba(7,15,24,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--txt-dim);font-size:.94rem;font-weight:600}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-1);text-decoration:none}
.hdr-cta{background:var(--gold-grad)!important;color:var(--gold-ink)!important;
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:.9rem;white-space:nowrap}
.hdr-cta:hover{text-decoration:none;filter:brightness(1.06)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--txt);width:44px;height:44px;border-radius:10px;font-size:1.3rem;cursor:pointer}
#mnav{position:absolute;top:100%;left:0;right:0;background:var(--teal-deep);
  border-bottom:1px solid var(--line);flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
#mnav.open{max-height:560px}
#mnav a{display:block;padding:14px 22px;border-top:1px solid var(--line);color:var(--txt-dim);font-weight:600}
#mnav .hdr-cta{margin:14px 22px;text-align:center}
@media(max-width:860px){.nav{display:none}.burger{display:block}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:12px;font-weight:800;font-size:1rem;border:none;cursor:pointer;
  transition:filter .15s,transform .15s}
.btn-gold{background:var(--gold-grad)!important;color:var(--gold-ink)!important}
.btn-gold:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.btn-wa{background:var(--wa)!important;color:var(--wa-ink)!important}
.btn-wa:hover{text-decoration:none;filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--txt)!important;border:1px solid var(--line);border-radius:12px}
.btn-ghost:hover{border-color:var(--gold-1);text-decoration:none}
.btn-lg{padding:16px 32px;font-size:1.06rem}

/* ---- login card (panel replica) ---- */
.lcard{background:var(--card);color:var(--card-ink);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--card-shadow);max-width:420px;width:100%}
.lcard h2{color:var(--card-ink);text-align:center;font-size:1.4rem;margin-bottom:20px}
.fld{display:flex;align-items:stretch;background:var(--input);border:1px solid var(--input-line);
  border-radius:10px;margin-bottom:14px;overflow:hidden}
.fld span.lbl{flex:1;padding:14px 16px;color:#7c8a94;font-size:.98rem}
.fld span.ic{width:52px;display:grid;place-items:center;background:#e3e9ee;border-left:1px solid var(--input-line)}
.fld span.ic svg{width:20px;height:20px;fill:#5a6a74}
.lcard .btn{width:100%;margin-top:6px}
.lcard .btn+.btn{margin-top:12px}
/* secondary demo button: dark ink solid (readable on white card, matches panel) */
.lcard .btn-ghost{background:#12222e!important;color:#fff!important;border-color:#12222e}
.lcard .btn-ghost:hover{filter:brightness(1.15);border-color:#12222e}
.lcard .note{text-align:center;font-size:.83rem;color:var(--card-dim);margin:14px 0 0}
.lcard .note a{color:var(--gold-2);font-weight:700}

/* ---- generic cards ---- */
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold-1);margin-bottom:10px}

/* ---- content images ---- */
.shot{margin:26px auto;max-width:820px;width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.shot figcaption{margin-top:9px;font-size:.85rem;color:var(--txt-dim);text-align:center}

/* ---- seo box ---- */
.seo-box{background:rgba(5,12,18,.5);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:36px 0;max-height:280px;overflow-y:auto}
.seo-box h2{color:var(--gold-1);margin-top:0}
.seo-box h3{color:var(--txt);font-size:1.02rem;margin-top:1.1em}
.seo-box p,.seo-box li{color:var(--txt-dim);font-size:.93rem}
.seo-box .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.seo-box .kv dt{font-weight:700;color:var(--txt)}
.seo-box .kv dd{margin:0}
.seo-box .qa p{margin:.2em 0 1em}
.seo-box .two{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
@media(max-width:600px){.seo-box .two{grid-template-columns:1fr}}

/* ---- also-search chips ---- */
.also-search{margin:30px 0 10px}
.also-search h2{font-size:1.1rem;color:var(--txt-dim);margin-bottom:14px}
.also-search ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.also-search a{display:inline-block;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--txt-dim);padding:9px 14px;border-radius:999px;font-size:.85rem;min-height:38px}
.also-search a:hover{border-color:var(--gold-1);color:var(--gold-1);text-decoration:none}

/* ---- FAQ ---- */
.faq details{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;font-family:"Sora",sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold-1);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--txt-dim);margin:0 0 15px}

/* ---- footer ---- */
.ft{background:var(--footer);border-top:1px solid var(--line);margin-top:56px;padding:44px 0 26px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.ft-grid img{height:28px;margin-bottom:14px}
.ft h4,.ft h3{color:var(--txt);font-size:.95rem;margin-bottom:14px}
.ft a{display:block;color:var(--txt-dim);font-size:.9rem;padding:4px 0}
.ft a:hover{color:var(--gold-1)}
.ft .blurb{color:var(--frost);font-size:.9rem;max-width:40ch}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{width:34px;height:34px;display:grid;place-items:center;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;padding:0}
.socials a:hover{border-color:var(--gold-1)}
.socials svg{width:18px;height:18px;fill:var(--txt-dim)}
.socials a:hover svg{fill:var(--gold-1)}
.trust{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;padding:8px 14px;font-size:.82rem;color:var(--txt-dim)}
.trust svg{width:16px;height:16px}
.ft-base{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;color:var(--frost);font-size:.82rem;text-align:center}
.ft-base .age{display:inline-block;border:1px solid var(--gold-1);color:var(--gold-1);border-radius:6px;padding:1px 8px;font-weight:700;margin-right:8px}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr;gap:26px}}

/* ---- whatsapp float ---- */
.wa-float{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;z-index:120;box-shadow:0 6px 20px rgba(0,0,0,.4);animation:wapulse 2.4s infinite}
.wa-float svg{width:33px;height:33px;fill:#fff}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---- breadcrumb ---- */
.crumb{font-size:.82rem;color:var(--frost);padding:16px 0 0}
.crumb a{color:var(--frost)}
.crumb a:hover{color:var(--gold-1)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* responsive table guard */
@media(max-width:640px){
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .ledger th,.ledger td{padding:8px 8px;font-size:.83rem}
}
.ft-grid img{width:auto;max-width:80%}
.socials{flex-wrap:wrap}