/* =====================================================================
   Skilli Godmind — home + sign-in look (loads AFTER shell.css and re-themes it)
   Deep-navy sky, blue/violet gradient headlines, navy cards with hairline
   borders, purple / blue / green nav pills. Everything the shared shell
   still paints (ads, modals, alerts, pricing, announcement) follows the
   palette through the variables below.
   ===================================================================== */
:root{
  --bg-0:#060f2a; --bg-1:#0a1a3f; --bg-2:#0f2452;
  --panel:rgba(13,28,68,.78); --panel-2:rgba(11,24,58,.72);
  --hairline:rgba(120,160,255,.14); --hairline-2:rgba(120,160,255,.28);
  --text:#e9f0ff; --text-dim:#9fb0d6; --text-soft:#c6d3f0;
  --violet:#3b82f6; --violet-2:#60a5fa; --violet-3:#1d4ed8;
  --accent:#7db0ff; --chrome:#eaf0ff; --chrome-2:#9fb0d6;
  --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --shadow-glow:0 0 40px -10px rgba(59,130,246,.55);
  --sk-blue:#3b82f6; --sk-blue-2:#2563eb; --sk-blue-l:#8fb6ff;
  --sk-purple:#7c3aed; --sk-purple-2:#6d28d9;
  --sk-green:#22c55e; --sk-green-2:#16a34a;
  --sk-gold:#f5b301;
  --sk-card:#0d1c44; --sk-card-2:#0b1839; --sk-line:rgba(110,150,255,.16);
  --sk-title:linear-gradient(92deg,#9cc0ff 0%,#5d8bff 48%,#8b7dff 100%);
}
html{ background:#060f2a; }
body{
  font-family:'Outfit',-apple-system,system-ui,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 640px at 50% -8%, rgba(37,78,180,.55), transparent 62%),
    radial-gradient(900px 520px at 88% 18%, rgba(88,64,220,.22), transparent 60%),
    radial-gradient(800px 560px at 8% 60%, rgba(30,90,210,.18), transparent 60%),
    linear-gradient(180deg,#0a1a45 0%,#081538 38%,#060f2a 100%);
  background-attachment:scroll;
  min-height:100vh;
}
.nebula, .stars{ display:none !important; }
/* a slow aurora drift behind everything — compositor-only, off when motion is reduced */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sky i{ position:absolute; border-radius:50%; filter:blur(10px); opacity:.5; will-change:transform; }
.sky i:nth-child(1){ width:60vw; height:60vw; left:-14vw; top:-24vw; background:radial-gradient(circle,rgba(56,110,255,.30),transparent 62%); animation:skyA 46s ease-in-out infinite alternate; }
.sky i:nth-child(2){ width:52vw; height:52vw; right:-16vw; top:6vw; background:radial-gradient(circle,rgba(124,77,255,.22),transparent 62%); animation:skyB 58s ease-in-out infinite alternate; }
.sky i:nth-child(3){ width:64vw; height:64vw; left:18vw; bottom:-38vw; background:radial-gradient(circle,rgba(30,140,255,.14),transparent 62%); animation:skyA 71s ease-in-out infinite alternate-reverse; }
@keyframes skyA{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(6vw,4vw,0) } }
@keyframes skyB{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-5vw,6vw,0) } }
@media (prefers-reduced-motion:reduce){ .sky i{ animation:none !important; } }
@media (max-width:640px){ .sky i{ filter:blur(6px); } }
.page{ position:relative; z-index:1; }
.container{ width:min(1120px, calc(100% - 32px)); margin:0 auto; }

/* ── nav ── */
.nav{ position:sticky; top:0; z-index:40; background:rgba(7,17,44,.78); border-bottom:1px solid var(--sk-line); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); }
@media (hover:none){ .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(7,17,44,.94); } }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; padding:0; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0; }
.brand-mark, .brand .logo{ width:40px; height:40px; flex:none; border-radius:11px; background:none; box-shadow:0 6px 22px -8px rgba(59,130,246,.9); }
.brand-name{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:#9fc1ff; font-family:inherit; text-transform:none; text-shadow:0 0 22px rgba(96,165,250,.35); }
.brand-sub{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav-link{ color:#d6e2ff; text-decoration:none; font-weight:600; font-size:15px; padding:8px 10px; border-radius:9px; opacity:.92; }
.nav-link:hover, .nav-link.active{ color:#fff; opacity:1; background:rgba(120,160,255,.08); }
.nav-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:10px; font-weight:700; font-size:14.5px; color:#fff !important; text-decoration:none; border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 22px -12px rgba(0,0,0,.8); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; cursor:pointer; font-family:inherit; line-height:1.2; }
.nav-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.nav-btn.purple{ background:linear-gradient(135deg,var(--sk-purple),var(--sk-purple-2)); box-shadow:0 10px 26px -12px rgba(124,58,237,.9); }
.nav-btn.blue{ background:linear-gradient(135deg,var(--sk-blue),var(--sk-blue-2)); box-shadow:0 10px 26px -12px rgba(59,130,246,.9); }
.nav-btn.green{ background:linear-gradient(135deg,var(--sk-green),var(--sk-green-2)); box-shadow:0 10px 26px -12px rgba(34,197,94,.9); }
.nav-btn.ghost{ background:rgba(120,160,255,.08); }
@media (max-width:640px){
  .nav-inner{ min-height:60px; }
  .brand-name{ font-size:17px; }
  .nav-link{ display:none; }
  .nav-btn{ padding:8px 12px; font-size:13px; }
}

/* ── hero ── */
.hero{ text-align:center; padding:74px 0 34px; position:relative; }
.hero-logo{ width:96px; height:96px; margin:0 auto 26px; display:block; filter:drop-shadow(0 14px 34px rgba(59,130,246,.55)); animation:logoFloat 6s ease-in-out infinite; }
@keyframes logoFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@media (prefers-reduced-motion:reduce){ .hero-logo{ animation:none; } }
.hero-title{ margin:0; font-family:inherit; font-size:clamp(34px, 6.2vw, 58px); font-weight:800; letter-spacing:-.025em; line-height:1.08; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 0 28px rgba(93,139,255,.35)); }
.hero-sub{ margin:16px auto 0; max-width:640px; color:var(--text-dim); font-size:16px; line-height:1.6; }
.hero-cta{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn-start{ display:inline-flex; align-items:center; gap:10px; padding:13px 30px; border-radius:999px; background:linear-gradient(180deg,#132a63,#0d1e4c); border:1px solid rgba(150,180,255,.38); color:#fff; font-weight:700; font-size:15.5px; text-decoration:none; box-shadow:0 12px 34px -14px rgba(59,130,246,.9), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; font-family:inherit; cursor:pointer; }
.btn-start:hover{ transform:translateY(-2px); border-color:#8fb6ff; box-shadow:0 18px 44px -14px rgba(59,130,246,1), 0 0 0 4px rgba(59,130,246,.12); }
.btn-start svg{ width:16px; height:16px; }
.btn-start.secondary{ background:transparent; border-color:rgba(150,180,255,.22); box-shadow:none; color:#cfe0ff; }
.btn-start.secondary:hover{ border-color:#8fb6ff; box-shadow:0 0 0 4px rgba(59,130,246,.10); }

/* platform facts strip */
.facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:44px auto 0; max-width:900px; }
.fact{ padding:16px 12px; border-radius:14px; background:rgba(13,28,68,.66); border:1px solid var(--sk-line); }
.fact b{ display:block; font-size:24px; font-weight:800; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; letter-spacing:-.02em; }
.fact span{ display:block; margin-top:3px; font-size:12.5px; color:var(--text-dim); }
@media (max-width:640px){ .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:32px; } .fact b{ font-size:21px; } }

/* live markets strip (only shows once Deriv streams a tick) */
.mkt-strip{ margin:22px auto 0; max-width:1000px; display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.mkt-strip::-webkit-scrollbar{ display:none; }
.mkt-strip[hidden]{ display:none; }
.mkt{ flex:0 0 auto; display:grid; grid-template-columns:auto auto; gap:2px 12px; align-items:center; padding:10px 14px; border-radius:12px; background:rgba(13,28,68,.7); border:1px solid var(--sk-line); min-width:168px; text-align:left; }
.mkt u{ grid-column:1 / span 2; text-decoration:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.mkt b{ font-size:16px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.mkt b.up{ color:#4ade80; } .mkt b.down{ color:#fb7185; }
.mkt i{ font-style:normal; font-size:12px; font-weight:800; color:#0b1839; background:#8fb6ff; padding:2px 8px; border-radius:999px; justify-self:end; }
.mkt-live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); margin-top:10px; }
.mkt-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 1.6s infinite; }
@keyframes pulse{ to{ box-shadow:0 0 0 8px rgba(74,222,128,0); } }

/* ── sections ── */
.section{ padding:54px 0; }
.section-title{ margin:0 0 30px; text-align:center; font-family:inherit; font-size:clamp(26px, 3.6vw, 34px); font-weight:800; letter-spacing:-.02em; line-height:1.15; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.section-title.plain{ background:none; color:#f1f5ff; -webkit-text-fill-color:#f1f5ff; }
.section-lead{ margin:-18px auto 30px; max-width:680px; text-align:center; color:var(--text-dim); font-size:15.5px; line-height:1.6; }

/* why cards */
.why-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.why-card{ padding:30px 26px 28px; border-radius:16px; background:linear-gradient(180deg,#10224f 0%,#0c1a40 100%); border:1px solid var(--sk-line); text-align:center; box-shadow:0 20px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.why-card:hover{ transform:translateY(-3px); border-color:rgba(120,160,255,.34); box-shadow:0 26px 56px -28px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.why-card h3{ margin:0 0 12px; display:flex; align-items:center; justify-content:center; gap:10px; font-family:inherit; font-size:19px; font-weight:800; color:#9cc0ff; letter-spacing:-.01em; }
.why-card h3 .ic{ font-size:20px; line-height:1; filter:drop-shadow(0 0 10px rgba(96,165,250,.5)); }
.why-card p{ margin:0; color:#b7c6e8; font-size:14.5px; line-height:1.68; }
@media (max-width:760px){ .why-grid{ grid-template-columns:minmax(0,1fr); gap:14px; } .why-card{ padding:24px 20px; } }

/* how it works */
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.step{ position:relative; padding:26px 22px 24px 22px; border-radius:16px; background:rgba(13,28,68,.7); border:1px solid var(--sk-line); }
.step b{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--sk-blue),var(--sk-purple)); color:#fff; font-size:16px; font-weight:800; margin-bottom:14px; box-shadow:0 10px 24px -12px rgba(59,130,246,.9); }
.step h3{ margin:0 0 8px; font-family:inherit; font-size:17px; font-weight:800; color:#e9f0ff; }
.step p{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.62; }
@media (max-width:760px){ .steps{ grid-template-columns:minmax(0,1fr); } }

/* testimonials */
.voices{ display:flex; flex-direction:column; gap:14px; max-width:960px; margin:0 auto; }
.voice{ padding:20px 22px; border-radius:14px; background:linear-gradient(180deg,rgba(16,34,79,.92),rgba(11,24,58,.92)); border:1px solid var(--sk-line); }
.voice .stars{ display:block !important; color:var(--sk-gold); font-size:15px; letter-spacing:2px; margin-bottom:8px; text-shadow:0 0 14px rgba(245,179,1,.35); }
.voice p{ margin:0; font-size:15px; line-height:1.6; color:#e4ecff; }
.voice .who{ margin-top:8px; font-size:13px; color:var(--text-dim); font-weight:600; }
.voices-note{ margin:14px auto 0; max-width:960px; text-align:center; font-size:12.5px; color:var(--text-dim); }

/* faq */
.faq{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq details{ border-radius:14px; background:rgba(13,28,68,.7); border:1px solid var(--sk-line); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; font-size:15.5px; color:#e9f0ff; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:20px; color:#8fb6ff; flex:none; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0; padding:0 18px 16px; color:var(--text-dim); font-size:14.5px; line-height:1.62; }

/* pricing (shell markup, navy skin) */
.pricing-wrap{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.pricing-card{ position:relative; padding:26px 22px 22px; border-radius:18px; background:linear-gradient(180deg,#10224f,#0b1839); border:1px solid var(--sk-line); display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px -30px rgba(0,0,0,.9); }
.pricing-card.is-featured{ border-color:rgba(124,58,237,.55); box-shadow:0 0 0 1px rgba(124,58,237,.25), 0 30px 60px -30px rgba(124,58,237,.6); }
.pricing-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:5px 12px; border-radius:999px; background:linear-gradient(135deg,var(--sk-purple),var(--sk-blue)); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; }
.pricing-sale-flag{ align-self:flex-start; padding:4px 10px; border-radius:999px; background:rgba(245,179,1,.14); border:1px solid rgba(245,179,1,.4); color:#ffd166; font-size:12px; font-weight:800; }
.pricing-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.pricing-amount{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pricing-amount .num{ font-size:36px; font-weight:800; color:#fff; letter-spacing:-.02em; font-family:inherit; }
.pricing-amount .cur{ font-size:15px; font-weight:700; color:var(--text-dim); }
.pricing-old{ font-size:14px; color:var(--text-dim); text-decoration:line-through; margin-right:6px; }
.pricing-period{ font-size:13px; color:var(--text-dim); margin-top:-6px; }
.pricing-features{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pricing-features li{ position:relative; padding-left:22px; font-size:14px; color:#d5e0f8; line-height:1.5; }
.pricing-features li::before{ content:"✓"; position:absolute; left:0; top:0; color:#4ade80; font-weight:800; }
.pricing-cta{ margin-top:auto; }
.pricing-signin{ text-align:center; font-size:13px; color:#8fb6ff; text-decoration:none; }
.pricing-signin:hover{ text-decoration:underline; }
.pricing-note{ font-size:12px; color:var(--text-dim); text-align:center; }
@media (max-width:900px){ .pricing-wrap{ grid-template-columns:minmax(0,1fr); max-width:520px; margin:0 auto; } }

/* buttons the shell markup still uses */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; background:linear-gradient(135deg,var(--sk-blue),var(--sk-blue-2)); color:#fff !important; font-weight:700; font-size:15px; text-decoration:none; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 30px -14px rgba(59,130,246,1); cursor:pointer; font-family:inherit; transition:transform .18s ease, filter .18s ease; }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn-primary::after{ display:none !important; }
.btn-primary:disabled, .btn-primary[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.btn-ghost, .btn-quiet{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:12px; background:rgba(120,160,255,.08); color:#dbe6ff; font-weight:700; font-size:14px; text-decoration:none; border:1px solid var(--sk-line); cursor:pointer; font-family:inherit; }
.btn-ghost:hover, .btn-quiet:hover{ border-color:rgba(120,160,255,.4); color:#fff; }
.btn-launch .ico{ width:16px; height:16px; }

/* socials + footer */
.socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.social-link{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; background:rgba(13,28,68,.7); border:1px solid var(--sk-line); color:#dbe6ff; text-decoration:none; font-weight:700; font-size:14px; }
.social-link svg{ width:18px; height:18px; }
.social-link:hover{ border-color:rgba(120,160,255,.4); color:#fff; }
.foot{ border-top:1px solid var(--sk-line); padding:34px 0 40px; margin-top:20px; color:var(--text-dim); font-size:13.5px; background:rgba(5,12,34,.6); }
.foot-row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot a{ color:#c9d8ff; text-decoration:none; display:block; margin-bottom:8px; font-weight:600; }
.foot a:hover{ color:#fff; }
.foot .brand-name{ font-size:15px; }
.dim{ color:var(--text-dim); }
.center{ text-align:center; }
.mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:20px; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ── sign-in ── */
.login-wrap{ min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:36px 0 48px; }
.login-card{ width:min(460px, 100%); padding:34px 30px 28px; border-radius:22px; background:linear-gradient(180deg,rgba(16,34,79,.96),rgba(11,24,58,.96)); border:1px solid var(--sk-line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(59,130,246,.08), inset 0 1px 0 rgba(255,255,255,.05); }
.login-card .logo{ width:68px; height:68px; display:block; margin:0 auto 16px; filter:drop-shadow(0 12px 28px rgba(59,130,246,.55)); }
.login-card h1{ margin:0; text-align:center; font-family:inherit; font-size:26px; font-weight:800; letter-spacing:-.02em; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.login-card .sub{ margin:8px 0 22px; text-align:center; color:var(--text-dim); font-size:14.5px; line-height:1.55; }
.field{ margin-bottom:14px; }
.field label, .label{ display:block; margin-bottom:6px; font-size:13px; font-weight:700; color:#c9d8ff; letter-spacing:.01em; }
.input, .textarea, .select{ width:100%; height:48px; padding:0 14px; border-radius:12px; background:#0a1636; border:1px solid rgba(120,160,255,.22); color:#fff; font-family:inherit; font-size:15px; outline:none; transition:border-color .18s ease, box-shadow .18s ease; -webkit-appearance:none; appearance:none; }
.input::placeholder{ color:#6f82ad; }
.input:focus{ border-color:#5b8cff; box-shadow:0 0 0 4px rgba(59,130,246,.16); }
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:74px; }
.pw-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); height:34px; padding:0 12px; border-radius:9px; background:rgba(120,160,255,.10); border:1px solid var(--sk-line); color:#c9d8ff; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.checkbox-row{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:rgba(10,22,54,.7); border:1px solid var(--sk-line); cursor:pointer; }
.checkbox-row input[type=checkbox]{ width:18px; height:18px; margin:2px 0 0; accent-color:#3b82f6; flex:none; }
.checkbox-row .copy{ font-size:13px; color:var(--text-soft); line-height:1.5; }
.checkbox-row a{ color:#8fb6ff; }
.login-links{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; font-size:13.5px; }
.login-links a{ color:#8fb6ff; text-decoration:none; font-weight:700; }
.login-links a:hover{ text-decoration:underline; }
.login-foot{ margin:18px auto 0; width:min(460px,100%); text-align:center; font-size:12.5px; color:var(--text-dim); line-height:1.6; }
.login-foot .price{ color:#fff; font-weight:800; }
.setup-hint{ display:block; margin-top:10px; color:#ffd166; }
.setup-hint a{ color:#ffd166; text-decoration:underline; }
.alert{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; line-height:1.5; border:1px solid; }
.alert .ico{ flex:none; font-weight:800; }
.alert-error{ background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.35); color:#fecaca; }
.alert-warn{ background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.35); color:#fde68a; }
.alert-success{ background:rgba(74,222,128,.10); border-color:rgba(74,222,128,.35); color:#bbf7d0; }
.alert-info{ background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.35); color:#dbeafe; }
.disclaim{ padding:14px 16px; border-radius:12px; background:rgba(10,22,54,.7); border:1px solid var(--sk-line); font-size:13px; color:var(--text-soft); line-height:1.55; }
.disclaim::before{ display:none; }
.hide{ display:none !important; }

/* modals / toast the shell markup still uses */
.modal-backdrop{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(3,8,24,.72); }
.modal-backdrop.show{ display:flex; }
.modal{ position:relative; width:min(640px,100%); max-height:88vh; overflow:auto; padding:24px 22px; border-radius:20px; background:linear-gradient(180deg,#10224f,#0b1839); border:1px solid var(--sk-line); color:var(--text); box-shadow:0 40px 90px -40px rgba(0,0,0,.95); }
.modal h3{ margin:0 0 12px; font-family:inherit; font-size:20px; font-weight:800; color:#fff; }
.modal-acts{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
#terms-long .tc-clause{ margin:0 0 10px; }
#terms-long .tc-clause strong{ color:#9cc0ff; }
#terms-long .tc-lead{ margin:0 0 12px; color:#e4ecff; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); opacity:0; z-index:90; padding:11px 16px; border-radius:12px; background:#10224f; border:1px solid var(--sk-line); color:#fff; font-size:14px; font-weight:600; transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.err{ border-color:rgba(248,113,113,.5); }
.skilli-announcement{ position:relative; z-index:41; background:linear-gradient(90deg,#1d4ed8,#6d28d9); color:#fff; }
.skilli-announcement[hidden]{ display:none; }
.ann-inner{ display:flex; align-items:center; gap:10px; width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:9px 0; font-size:14px; }
.ann-text{ flex:1; }
.ann-close{ background:rgba(255,255,255,.14); border:0; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:18px; line-height:1; }

/* ── shell typography → the page's sans (waitlist + any shell heading) ── */
.h-display, .h-section, .h-hero{ font-family:inherit !important; font-weight:800; letter-spacing:-.02em; text-transform:none; line-height:1.12; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.eyebrow{ font-family:inherit !important; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8fb6ff; }
.eyebrow::before{ content:none; }
.field label, .label{ text-transform:none; letter-spacing:.01em; font-size:13px; color:#c9d8ff; font-weight:700; }
/* ── sign-up (waitlist) page ── */
.waitlist-page{ padding:40px 0 34px; }
.waitlist-shell{ background:linear-gradient(180deg,rgba(16,34,79,.92),rgba(11,24,58,.92)); border:1px solid var(--sk-line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.waitlist-shell::before{ background:linear-gradient(115deg,rgba(120,160,255,.10),transparent 40%,rgba(124,58,237,.10) 70%,transparent); }
.waitlist-points span{ font:700 12.5px/1 inherit; font-family:inherit; letter-spacing:0; text-transform:none; color:#c9d8ff; background:rgba(120,160,255,.10); border:1px solid var(--sk-line); padding:7px 12px; }
.waitlist-form{ background:rgba(10,22,54,.7); border:1px solid var(--sk-line); }
.waitlist-form small.dim{ font-size:12.5px; }
/* ── phone nav: one row, everything fits ── */
@media (max-width:640px){
  .brand{ gap:8px; }
  .brand-mark, .brand .logo{ width:34px; height:34px; border-radius:10px; }
  .brand-name{ font-size:16px; white-space:nowrap; }
  .nav-actions{ gap:6px; flex-wrap:nowrap; }
  .nav-btn{ padding:7px 10px; font-size:12.5px; border-radius:9px; }
}
@media (max-width:360px){ .nav-btn{ padding:7px 8px; font-size:12px; } .brand-name{ font-size:15px; } }
.hero, .section, main{ background:transparent !important; border:0; box-shadow:none; }
.mkt-live[hidden], .facts[hidden], .smart-strip{ display:none !important; }
.input::-ms-reveal, .input::-ms-clear{ display:none; }
.login-foot a, .disclaim a{ color:#8fb6ff; }
/* ── j78: admin tag, ad-card logo mark ── */
.brand-tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius:999px; background:rgba(124,58,237,.28); color:#d8ccff; margin-left:6px; vertical-align:middle; text-shadow:none; }
img.ad-brand-mark{ width:18px; height:18px; border-radius:5px; vertical-align:middle; margin-right:6px; background:none; box-shadow:0 4px 12px -6px rgba(59,130,246,.9); }
/* ── j78: last shell components that still carried amber (admin / ad popup) ── */
.derivapp-badge, .ad-popup-eyebrow{ border-color:rgba(110,150,255,.4) !important; background:rgba(59,130,246,.12) !important; color:#c9d8ff !important; }
.derivapp-redirect{ border-color:rgba(110,150,255,.35) !important; }
.ad-popup-aura{ background:radial-gradient(60% 60% at 50% 0%, rgba(59,130,246,.35), transparent 70%) !important; }
.control-card .ic, .setup-steps .ic, .ic{ background-image:none !important; background-color:rgba(59,130,246,.14) !important; color:#8fb6ff !important; }
.brand-name{ text-shadow:0 0 22px rgba(96,165,250,.35) !important; }
/* ── j78: the sign-in Terms modal (shell id rules were amber) ── */
#terms-modal .modal{ background:linear-gradient(180deg,#10224f,#0b1839) !important; border:1px solid rgba(110,150,255,.22) !important; box-shadow:0 40px 90px -40px rgba(0,0,0,.95) !important; }
#terms-modal .modal h3{ color:#fff !important; background:var(--sk-title); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-family:inherit !important; text-transform:none !important; letter-spacing:-.02em; }
#terms-modal .modal h3::before{ content:"" !important; display:inline-block; width:22px; height:22px; margin-right:8px; vertical-align:-4px; background:url('/skilli-ai-logo.svg?v=20260724j79') center/contain no-repeat; -webkit-text-fill-color:initial; }
#terms-long .tc-lead{ color:#dbe6ff !important; }
#terms-long .tc-clause{ background:rgba(10,22,54,.7) !important; border:1px solid var(--sk-line) !important; }
#terms-long .tc-clause:hover{ border-color:rgba(110,150,255,.45) !important; background:rgba(59,130,246,.10) !important; }
#terms-long .tc-clause strong{ color:#9cc0ff !important; }
#terms-modal .modal-acts{ border-top:1px solid rgba(110,150,255,.18) !important; }
#terms-long::-webkit-scrollbar-thumb{ background:rgba(110,150,255,.5) !important; }
#terms-modal .btn-primary{ background:linear-gradient(135deg,#3b82f6,#2563eb) !important; color:#fff !important; }
/* ── j78: blue scrollbars on every shell page ── */
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar{ width:10px; height:10px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track{ background:rgba(6,15,42,.5); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#5b8cff,#2f5fd8) !important; border-radius:8px; border:2px solid rgba(0,0,0,.3); }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#7fa6ff,#3b6ff0) !important; }
html, body, *{ scrollbar-color:#4d7ff0 rgba(6,15,42,.5) !important; }
/* ── j80: password Show/Hide — no native eye underneath, room for the button ── */
#login-pw::-ms-reveal, #login-pw::-ms-clear, input[type="password"]::-ms-reveal, input[type="text"]::-ms-reveal{ display:none !important; width:0 !important; height:0 !important; }
#login-pw{ padding-right:82px !important; }
.pw-wrap .pw-eye{ z-index:2; min-width:58px; justify-content:center; display:inline-flex; align-items:center; }
/* j80b — Show/Hide beside the field (a native eye can never sit under it) */
.pw-wrap{ position:static !important; display:flex !important; align-items:center; gap:8px; }
.pw-wrap .input{ flex:1 1 auto; min-width:0; }
#login-pw{ padding-right:14px !important; }
.pw-wrap .pw-eye{ position:static !important; transform:none !important; height:48px; min-width:64px; padding:0 14px; border-radius:12px; font-size:13px; }

/* ═══ h2 — the header links carry their logo beside their name, like the platform's own header: Home · Analyzer (Trading) ·
   Admin · Login (Sign in) · Sign Up · Sign out. The icon is a mask on ::before in the link's own colour; it never changes a
   link's display (the phone rule that hides the text links keeps working) and a link it doesn't know gets none. ═══ */
:root{ --ic-home:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010.5L12%203l9%207.5%27%2F%3E%3Cpath%20d%3D%27M5.5%209.5V20h5v-6h3v6h5V9.5%27%2F%3E%3C%2Fsvg%3E"); --ic-analyzer:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2012h4l2.5-6%204%2012%202.5-6H21%27%2F%3E%3C%2Fsvg%3E"); --ic-admin:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7.5%203v5.5c0%204.3-3.2%208-7.5%209.5-4.3-1.5-7.5-5.2-7.5-9.5V6z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2.2%202.2L15.5%2010%27%2F%3E%3C%2Fsvg%3E"); --ic-login:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%204h4a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-4%27%2F%3E%3Cpath%20d%3D%27M10%2017l5-5-5-5%27%2F%3E%3Cpath%20d%3D%27M15%2012H3%27%2F%3E%3C%2Fsvg%3E"); --ic-signup:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2020c0-3.6%202.9-6.5%206.5-6.5s6.5%202.9%206.5%206.5%27%2F%3E%3Cpath%20d%3D%27M19%208v6%27%2F%3E%3Cpath%20d%3D%27M16%2011h6%27%2F%3E%3C%2Fsvg%3E"); --ic-logout:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%204H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h4%27%2F%3E%3Cpath%20d%3D%27M15%2017l5-5-5-5%27%2F%3E%3Cpath%20d%3D%27M20%2012H9%27%2F%3E%3C%2Fsvg%3E"); }
.nav-actions .nav-link::before, .nav-actions .nav-btn::before, .nav-actions #logout-top::before{ content:""; flex:none; width:16px; height:16px; background:currentColor;
  -webkit-mask:var(--nv-ic, none) center / contain no-repeat; mask:var(--nv-ic, none) center / contain no-repeat; }
.nav-actions .nav-link::before, .nav-actions #logout-top::before{ display:inline-block; vertical-align:-3px; margin-right:6px; }
.nav-actions :is(.nav-link, .nav-btn, #logout-top):not([href="/"], [href="/trade"], [href^="/login"], [href="/admin"], [href="/waitlist.html"], #logout-btn, #logout-top)::before{ display:none; }
.nav-actions a[href="/"]{ --nv-ic:var(--ic-home); }
.nav-actions a[href="/trade"], .nav-actions a[href^="/login?return=/trade"]{ --nv-ic:var(--ic-analyzer); }
.nav-actions a[href="/admin"]{ --nv-ic:var(--ic-admin); }
.nav-actions a[href="/login"]{ --nv-ic:var(--ic-login); }
.nav-actions a[href="/waitlist.html"]{ --nv-ic:var(--ic-signup); }
.nav-actions :is(#logout-btn, #logout-top){ --nv-ic:var(--ic-logout); }
/* a phone: the buttons keep icon + name on one line — tighter padding, a smaller icon (measured: 3 buttons + the brand fit 360px) */
@media (max-width:480px){ .nav-actions .nav-btn{ gap:5px; white-space:nowrap; } .nav-actions .nav-btn::before{ width:14px; height:14px; } }
@media (max-width:420px){ .nav-actions{ gap:5px; } .nav-actions .nav-btn{ padding:7px 8px; font-size:12px; gap:4px; } .nav-actions .nav-btn::before{ width:13px; height:13px; } }
@media (max-width:380px){ .nav-actions .nav-btn{ padding:7px 7px; font-size:11.5px; } }
/* the logo is the brand on a phone (as on the platform header): with three buttons carrying their icons the name no longer fits beside them */
@media (max-width:440px){ .nav .brand .brand-name{ display:none; } }

/* ═══ v42 — SLATE (the operator's photo, as on the platform): a flat slate page, flat slate cards with one hairline edge and small
   corners, the blue logo tile with the two-tone name, and the photo's button colours — blue, green, rose. No drifting sky. ═══ */
:root{
  --bg-0:#151d28; --bg-1:#1a2330; --bg-2:#1f2a38;
  --panel:#1c2632; --panel-2:#1a2330; --hairline:rgba(148,163,184,.14); --hairline-2:rgba(148,163,184,.24);
  --text:#e8eef7; --text-dim:#93a3b9; --text-soft:#c3cfdf;
  --sk-card:#1c2632; --sk-card-2:#1a2330; --sk-line:rgba(148,163,184,.14);
  --sk-blue:#6e9bec; --sk-blue-2:#4b7ddc; --sk-green:#34c79c; --sk-green-2:#22a983;
  --sk-title:linear-gradient(92deg,#ffffff 0%,#e2ebf7 55%,#b3caeb 100%);
}
html{ background:#151d28 !important; }
body{ background:#151d28 !important; }
.sky{ display:none !important; }
/* the bar */
.nav{ background:#1c2631 !important; box-shadow:none !important; border-bottom:1px solid rgba(148,163,184,.14) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.brand-mark, .brand .logo{ border-radius:10px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 16px -6px rgba(59,130,246,.7) !important; }
.brand-name{ display:inline-flex; align-items:baseline; gap:8px; font-family:'Outfit',-apple-system,system-ui,sans-serif; color:#fff !important; text-shadow:none !important; letter-spacing:0; }
.brand-name .bn-1{ font-weight:800; letter-spacing:-.01em; color:#fff; }
.brand-name .bn-2{ font-weight:500; font-size:.62em; letter-spacing:.26em; text-transform:uppercase; color:#a9bbd4; }
.nav-btn{ border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -10px rgba(0,0,0,.8); }
.nav-btn.purple{ background:linear-gradient(180deg, rgba(64,100,166,.55), rgba(48,84,140,.55)); border-color:rgba(150,180,230,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.nav-btn.blue{ background:linear-gradient(180deg,#6e9bec,#4b7ddc); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px rgba(75,125,220,.85); }
.nav-btn.green{ background:linear-gradient(180deg,#3ccf9f,#24a882); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px rgba(47,193,149,.8); }
.nav-btn.ghost{ background:rgba(148,163,184,.08); }
#logout-top, #logout-btn{ background:linear-gradient(180deg,#f05a72,#e5435e) !important; border-color:rgba(255,170,184,.35) !important; color:#fff !important; }
/* the cards: flat slate, one hairline edge, small corners */
.fact, .why-card, .step, .voice, .faq details, .pricing-card, .login-card, .modal, .waitlist-shell, .waitlist-form, .mkt, .social-link, .disclaim, .checkbox-row, #terms-modal .modal, #terms-long .tc-clause{
  background:#1c2632 !important; border:1px solid rgba(148,163,184,.14) !important; border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.22) !important; }
.why-card:hover{ transform:none; border-color:rgba(148,163,184,.24) !important; }
.why-card h3, #terms-long .tc-clause strong{ color:#e2ebf7 !important; }
.why-card h3 .ic{ filter:none; }
.step b{ background:linear-gradient(180deg,#6e9bec,#4b7ddc); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); border-radius:8px; }
.waitlist-shell::before{ display:none !important; }
/* fields: slate wells */
.input, .textarea, .select{ background:#151d28 !important; border:1px solid rgba(148,163,184,.18) !important; border-radius:8px !important; }
.input:focus{ border-color:#6e9bec !important; box-shadow:0 0 0 3px rgba(110,155,236,.18) !important; }
.pw-wrap .pw-eye{ background:#1c2632 !important; border:1px solid rgba(148,163,184,.18) !important; border-radius:8px !important; }
/* buttons */
.btn-primary, #terms-modal .btn-primary{ background:linear-gradient(180deg,#6e9bec,#4b7ddc) !important; border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -10px rgba(75,125,220,.85) !important; }
.btn-start{ background:#1c2632; border-color:rgba(148,163,184,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.btn-start:hover{ border-color:#6e9bec; box-shadow:0 0 0 3px rgba(110,155,236,.14); }
.btn-ghost, .btn-quiet{ background:rgba(148,163,184,.08); border-color:rgba(148,163,184,.18); }
/* type */
.hero-title, .section-title, .login-card h1, .h-display, .h-section, .h-hero, .fact b{ filter:none !important; }
.hero-logo{ filter:drop-shadow(0 10px 26px rgba(59,130,246,.45)); }
.eyebrow, .login-links a, .login-foot a, .disclaim a, .checkbox-row a, .pricing-signin{ color:#8fb4f0 !important; }
.foot{ background:#121924 !important; border-top:1px solid rgba(148,163,184,.12) !important; }
.toast, .modal{ background:#1c2632 !important; }
/* the shell's scrollbars follow */
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track{ background:#151d28; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35) !important; border:2px solid #151d28; }
html, body, *{ scrollbar-color:rgba(148,163,184,.35) #151d28 !important; }

/* ══ 31 · v52 — SCROLLBARS: THIN, WHITE, AND ONLY THERE WHILE SOMETHING SCROLLS (the operator: "upgrade all scrolling panel on the platform
   to disappear if not in use they are too big also fix, change all their color to white"). 6px, a white thumb on no track; hidden at rest;
   shown while the page or a panel is being scrolled (gm-scroll.js marks the element that moved with .gm-sb-on and holds it 0.9s after
   its last scroll) or while the pointer is on the thumb. ⚠ Edge/Chrome 121+ skip ::-webkit-scrollbar on any element whose
   scrollbar-width or scrollbar-color is not auto (measured in Edge 156: 15px default, 10px "thin", 6px only with both auto) — so the
   platform's standard-property scrollbars are handed back to auto here; a bar meant to stay hidden keeps its ::-webkit-scrollbar
   {display:none} (every one of them has it). Firefox, which has no ::-webkit-scrollbar, gets the standard thin bar, clear at rest. ══ */
@supports selector(::-webkit-scrollbar){
  html:not(#gm-sb), html body:not(#gm-sb), html body *:not(#gm-sb){ scrollbar-width:auto !important; scrollbar-color:auto !important; }
  html:not(#gm-sb)::-webkit-scrollbar, html body:not(#gm-sb)::-webkit-scrollbar, html body *:not(#gm-sb)::-webkit-scrollbar{ width:6px !important; height:6px !important; background:transparent !important; }
  html:not(#gm-sb)::-webkit-scrollbar-track, html body:not(#gm-sb)::-webkit-scrollbar-track, html body *:not(#gm-sb)::-webkit-scrollbar-track,
  html:not(#gm-sb)::-webkit-scrollbar-track-piece, html body:not(#gm-sb)::-webkit-scrollbar-track-piece, html body *:not(#gm-sb)::-webkit-scrollbar-track-piece,
  html:not(#gm-sb)::-webkit-scrollbar-corner, html body:not(#gm-sb)::-webkit-scrollbar-corner, html body *:not(#gm-sb)::-webkit-scrollbar-corner{ background:transparent !important; border:0 !important; box-shadow:none !important; }
  html:not(#gm-sb)::-webkit-scrollbar-button, html body:not(#gm-sb)::-webkit-scrollbar-button, html body *:not(#gm-sb)::-webkit-scrollbar-button{ display:none !important; width:0 !important; height:0 !important; }
  html:not(#gm-sb)::-webkit-scrollbar-thumb, html body:not(#gm-sb)::-webkit-scrollbar-thumb, html body *:not(#gm-sb)::-webkit-scrollbar-thumb{
    background:transparent !important; border:0 !important; border-radius:99px !important; box-shadow:none !important; }
  html.gm-sb-on:not(#gm-sb)::-webkit-scrollbar-thumb, html body.gm-sb-on:not(#gm-sb)::-webkit-scrollbar-thumb, html body .gm-sb-on:not(#gm-sb)::-webkit-scrollbar-thumb,
  html:not(#gm-sb)::-webkit-scrollbar-thumb:hover, html body:not(#gm-sb)::-webkit-scrollbar-thumb:hover, html body *:not(#gm-sb)::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.66) !important; }
}
@supports not selector(::-webkit-scrollbar){
  html:not(#gm-sb), html body:not(#gm-sb), html body *:not(#gm-sb){ scrollbar-color:transparent transparent !important; }
  html.gm-sb-on:not(#gm-sb), html body .gm-sb-on:not(#gm-sb){ scrollbar-color:rgba(255,255,255,.66) transparent !important; }
  :where(html){ scrollbar-width:thin; }
}