/* VisionVix Simulators, "Classroom Blue" theme.
   Every rule is scoped to html[data-theme="blue"], so the original green look is untouched.
   Pictures for this theme live in /images/blue/ (see the README there). Until a picture
   exists the page falls back to a navy gradient (hero, banners) or the current card picture. */

html[data-theme=blue]{
  --bg:#070d1a;--lime:#3b86ff;--lime2:#6aa6ff;--green:#2f7dff;--green-dk:#1a56c4;
  --line:rgba(120,160,230,.18);--text:#eef3fb;--muted:rgba(214,224,240,.86);--gold:#6aa6ff;
  --bb:#1d5fe0;--bb2:#3a8cff;--bl:#2f86ff;--navy:#070d1a;--panel:#0d1628;--edge:rgba(120,160,230,.16)
}
html[data-theme=blue] body{background:var(--navy);color:var(--text)}
html[data-theme=blue] .bt-only{display:block}
html[data-theme=blue] .gt-only,html[data-theme=blue] .gt-only-i{display:none!important}

/* ---------- navigation ---------- */
html[data-theme=blue] .top-nav{background:rgba(7,12,24,.92);border-bottom:1px solid rgba(120,160,230,.14)}
html[data-theme=blue] .nav-logo{color:#fff}
html[data-theme=blue] .logo-box{background:linear-gradient(135deg,#1d5fd6,#4a95ff);color:#fff;box-shadow:none}
html[data-theme=blue] .logo-sep{color:rgba(220,230,245,.45)}
html[data-theme=blue] .logo-plat{color:#c9d5ea}
html[data-theme=blue] .nav-links a{color:#d7e0ef;text-shadow:none}
html[data-theme=blue] .nav-links a:hover,html[data-theme=blue] .nav-links a.on{color:#fff;text-shadow:none}
html[data-theme=blue] .nav-links a.on::after{background:var(--bl);box-shadow:none}
html[data-theme=blue] .btn-ghost{border:1px solid rgba(220,230,245,.32);color:#eef3fb;background:transparent;box-shadow:none}
html[data-theme=blue] .btn-ghost:hover{border-color:#fff;color:#fff;box-shadow:none}
html[data-theme=blue] .btn-primary,html[data-theme=blue] .btn-cta{background:var(--bb);color:#fff;border:1px solid var(--bb);box-shadow:0 6px 18px rgba(31,122,255,.32);text-shadow:none}
html[data-theme=blue] .btn-primary:hover,html[data-theme=blue] .btn-cta:hover{background:var(--bb2);border-color:var(--bb2);box-shadow:0 8px 22px rgba(31,122,255,.4)}
html[data-theme=blue] .search{border-color:rgba(220,230,245,.16);color:rgba(214,224,240,.6)}
html[data-theme=blue] .search:focus-within{border-color:rgba(59,134,255,.65);box-shadow:none}
html[data-theme=blue] .vvn-btn:hover,html[data-theme=blue] .vvn-li.open .vvn-btn{color:#fff;text-shadow:none}
html[data-theme=blue] .vvn-pan{background:#0d1628;border-color:rgba(120,160,230,.26);box-shadow:0 18px 50px rgba(0,0,0,.55)}
html[data-theme=blue] .vvn-pan a:hover{background:rgba(59,134,255,.14)}
html[data-theme=blue] .vvn-pan i{box-shadow:none}
html[data-theme=blue] .vvn-pan .all{color:#6aa6ff!important;border-top-color:rgba(120,160,230,.2)}

/* ---------- landing hero ---------- */
html[data-theme=blue] .hero2{background:var(--navy)}
html[data-theme=blue] .h2-stage{color:#eef3fb;
  background:url("/images/blue/hero.webp") right center/cover no-repeat,
    radial-gradient(55% 75% at 74% 46%,rgba(47,125,255,.26),transparent 70%),
    radial-gradient(35% 45% at 93% 18%,rgba(140,185,255,.16),transparent 70%),
    linear-gradient(180deg,#0c1831,#070d1a)}
html[data-theme=blue] .h2-shade{background:
    linear-gradient(90deg,rgba(7,13,26,.9) 0%,rgba(7,13,26,.66) 32%,rgba(7,13,26,.12) 60%,rgba(7,13,26,0) 78%),
    linear-gradient(0deg,rgba(7,13,26,.85) 0%,rgba(7,13,26,0) 26%)}
html[data-theme=blue] .h2-screen,html[data-theme=blue] .h2-sign,html[data-theme=blue] .h2-pc,
html[data-theme=blue] .h2-vr,html[data-theme=blue] .h2-stats{display:none!important}
html[data-theme=blue] .h2-copy{top:6.4cqw;width:44cqw}
html[data-theme=blue] .h2-h1{color:#fff;font-size:4.7cqw;font-weight:800;line-height:1;letter-spacing:-.03em;text-shadow:0 2px 26px rgba(0,0,0,.45)}
html[data-theme=blue] .h2-h1 span{color:var(--bl);text-shadow:none}
html[data-theme=blue] .h2-sub{max-width:33cqw;margin-top:1.6cqw;font-size:max(14px,1.2cqw);line-height:1.5;color:#dbe4f2;text-shadow:0 1px 10px rgba(0,0,0,.6)}
html[data-theme=blue] .bt-ctas{display:flex;flex-wrap:wrap;gap:max(12px,1.1cqw);margin-top:max(20px,2.2cqw)}
.bt-btn{display:inline-flex;align-items:center;gap:10px;height:max(46px,3.3cqw);padding:0 max(22px,1.8cqw);border-radius:999px;
  font:700 max(15px,1.08cqw) "DM Sans",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .18s,transform .18s,box-shadow .18s}
.bt-btn svg{width:19px;height:19px;flex:none}
.bt-btn.p{background:#1d5fe0;color:#fff;box-shadow:0 8px 24px rgba(31,122,255,.38)}
.bt-btn.p:hover{background:#3a8cff;transform:translateY(-1px)}
.bt-btn.s{border:1.5px solid rgba(255,255,255,.72);color:#fff;background:rgba(7,13,26,.35)}
.bt-btn.s:hover{background:rgba(255,255,255,.09)}

/* feature strip that overlaps the bottom of the hero */
html[data-theme=blue] .bt-strip{position:relative;z-index:4;background:var(--navy);padding:0 40px}
.bt-strip-in{max-width:1400px;margin:-48px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(13,22,40,.94);border:1px solid var(--edge,rgba(120,160,230,.16));border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bt-f{display:flex;align-items:center;gap:16px;padding:20px 26px}
.bt-f+.bt-f{border-left:1px solid rgba(120,160,230,.16)}
.bt-f svg{width:38px;height:38px;color:#e9f0fb;flex:none}
.bt-f b{display:block;font:700 16px "DM Sans",system-ui,sans-serif;color:#fff}
.bt-f span{display:block;margin-top:2px;font:400 13.5px "DM Sans",system-ui,sans-serif;color:#aebbd2}

/* ---------- choose your 3D world (landing) ---------- */
html[data-theme=blue] .choose{border-top:0;padding-top:76px;
  background:url("/images/blue/section-bg.webp") center/cover no-repeat,
    radial-gradient(900px 520px at 12% 8%,rgba(47,125,255,.12),transparent 70%),
    radial-gradient(800px 520px at 92% 80%,rgba(47,125,255,.08),transparent 70%),
    linear-gradient(180deg,#070d1a,#060b16)}
html[data-theme=blue] .choose::before{display:none}
html[data-theme=blue] .choose h2{color:#fff;text-shadow:none;text-align:center;letter-spacing:-1px}
html[data-theme=blue] .choose h2 span{color:var(--bl)}
html[data-theme=blue] .choose .ch-sub{margin:14px auto 28px;text-align:center;color:#c3cee0}
html[data-theme=blue] .ch-chips{justify-content:center}
html[data-theme=blue] .ch-chip{border-color:rgba(220,230,245,.16);background:rgba(255,255,255,.04);color:#dbe4f2}
html[data-theme=blue] .ch-chip:hover{border-color:rgba(59,134,255,.6)}
html[data-theme=blue] .ch-chip.on{background:var(--bb);color:#fff;border-color:transparent;box-shadow:none}
html[data-theme=blue] .ch-card{background:var(--panel);border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.4)}
html[data-theme=blue] .ch-card.live:hover{border-color:rgba(59,134,255,.7);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(59,134,255,.35)}
html[data-theme=blue] .ch-thumb{aspect-ratio:1.9/1;background:linear-gradient(135deg,#132649,#0b1530)}
html[data-theme=blue] .ch-thumb::after{background:linear-gradient(180deg,transparent 45%,rgba(13,22,40,.96))}
html[data-theme=blue] .ch-name{color:#fff;font-weight:700;font-size:17px}
html[data-theme=blue] .ch-desc{color:#b8c4d8}
html[data-theme=blue] .ch-stats{display:none}
html[data-theme=blue] .ch-enter{color:#fff;background:var(--bb);border:1px solid var(--bb);border-radius:999px}
html[data-theme=blue] .ch-enter:hover{background:var(--bb2);color:#fff;box-shadow:none}
html[data-theme=blue] .ch-enter i{display:none}
html[data-theme=blue] .ch-enter.sn{color:#c3cee0;background:transparent;border-color:rgba(220,230,245,.25)}
html[data-theme=blue] .ch-more{color:#6aa6ff;border-bottom-color:rgba(106,166,255,.5)}

/* ---------- worlds page ---------- */
html[data-theme=blue] body::before{background:url("/images/blue/section-bg.webp") center/cover no-repeat,
    radial-gradient(900px 520px at 10% 25%,rgba(47,125,255,.12),transparent 70%),
    radial-gradient(900px 600px at 95% 75%,rgba(47,125,255,.08),transparent 70%),
    linear-gradient(180deg,#0a1428,#070d1a)}
html[data-theme=blue] body::after{background:none}
html[data-theme=blue] .top-bg{background:url("/images/blue/worlds-banner.webp") center top/cover no-repeat,
    radial-gradient(55% 90% at 78% 40%,rgba(47,125,255,.24),transparent 70%),
    linear-gradient(100deg,#0a1630,#0b1a38 55%,#081226)}
html[data-theme=blue] .top-bg::after{background:linear-gradient(90deg,rgba(7,13,26,.86) 0%,rgba(7,13,26,.45) 45%,rgba(7,13,26,0) 80%)}
html[data-theme=blue] .badge,html[data-theme=blue] .hud-wrap{display:none}
html[data-theme=blue] h1{color:#fff;text-shadow:none}
html[data-theme=blue] h1 .g{color:var(--bl);text-shadow:none}
html[data-theme=blue] .hero p.sub{color:#d0dbec;text-shadow:none}
html[data-theme=blue] .beam{background:linear-gradient(transparent,#9cc4ff 20%,#2f7dff 80%,transparent);box-shadow:0 0 22px 5px rgba(47,125,255,.55)}
html[data-theme=blue] .card.hl{border-color:#3b86ff;box-shadow:0 0 0 2px rgba(59,134,255,.55),0 0 30px rgba(59,134,255,.35)}
html[data-theme=blue] .chip{color:#dbe4f2;border-color:rgba(220,230,245,.14);background:rgba(255,255,255,.04)}
html[data-theme=blue] .chip svg{color:#9fb0cc}
html[data-theme=blue] .chip:hover{border-color:rgba(59,134,255,.6);background:rgba(59,134,255,.08)}
html[data-theme=blue] .chip.on{background:var(--bb);color:#fff;border-color:var(--bb);box-shadow:none}
html[data-theme=blue] .chip.on svg{color:#fff}
html[data-theme=blue] .sort select{border-color:rgba(220,230,245,.16);background:rgba(255,255,255,.04)}
html[data-theme=blue] .sort select:focus{border-color:rgba(59,134,255,.65)}
html[data-theme=blue] .sort select option{background:#0d1628}
html[data-theme=blue] .count{color:rgba(170,190,220,.6)}
html[data-theme=blue] .card{background:var(--panel);border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.4)}
html[data-theme=blue] .card:hover{border-color:rgba(59,134,255,.7);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(59,134,255,.35)}
html[data-theme=blue] .thumb{aspect-ratio:1.9/1;background:#0f1d38}
html[data-theme=blue] .thumb::after{background:linear-gradient(180deg,transparent 45%,rgba(13,22,40,.96))}
html[data-theme=blue] .tile,html[data-theme=blue] .mini,html[data-theme=blue] .stats{display:none}
html[data-theme=blue] .row-t h3{color:#fff;font-weight:700;font-size:17px}
html[data-theme=blue] .row-d{margin-top:8px}
html[data-theme=blue] .row-d p{color:#b8c4d8}
html[data-theme=blue] .enter{margin-left:auto;color:#fff;background:var(--bb);border:1px solid var(--bb);border-radius:999px}
html[data-theme=blue] .enter:hover{background:var(--bb2);color:#fff;box-shadow:none}
html[data-theme=blue] .enter .dot{display:none}
html[data-theme=blue] .enter.sn{color:#c3cee0;background:transparent;border-color:rgba(220,230,245,.25)}
html[data-theme=blue] .enter.sn:hover{color:#fff;background:rgba(255,255,255,.06);box-shadow:none}
html[data-theme=blue] .toast{color:#eef3fb;background:rgba(13,22,40,.96);border-color:rgba(59,134,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---------- footer ---------- */
html[data-theme=blue] #footer{--g:#5b9cff;color:#e8eef8;border-top:1px solid rgba(120,160,230,.24);box-shadow:none;
  background:radial-gradient(900px 420px at 18% 8%,rgba(47,125,255,.10),transparent 60%),linear-gradient(180deg,#0a1324 0%,#070d1a 60%,#050a14 100%)}
html[data-theme=blue] .vf-earth{box-shadow:0 0 60px rgba(47,125,255,.35),inset -40px -20px 80px rgba(0,0,0,.7);filter:none}
html[data-theme=blue] .vf-brand p{color:rgba(225,233,246,.8)}
html[data-theme=blue] .vf-soc a{border-color:rgba(120,160,230,.4);background:rgba(47,125,255,.06);color:#8db8ff}
html[data-theme=blue] .vf-soc a:hover{background:rgba(47,125,255,.18);box-shadow:none}
html[data-theme=blue] .vf-col nav a{color:rgba(232,238,248,.88);border-bottom-color:rgba(120,160,230,.14)}
html[data-theme=blue] .vf-col nav a:hover{color:#8db8ff}
html[data-theme=blue] .vf-cta{border-color:rgba(120,160,230,.3);background:linear-gradient(180deg,rgba(47,125,255,.10),rgba(47,125,255,.03));box-shadow:none}
html[data-theme=blue] .vf-cta .vf-atom{filter:none}
html[data-theme=blue] .vf-btn{background:#1d5fe0;color:#fff!important;box-shadow:0 8px 20px rgba(31,122,255,.35)}
html[data-theme=blue] .vf-btn:hover{filter:none;background:#3a8cff;box-shadow:0 8px 22px rgba(31,122,255,.45)}
html[data-theme=blue] .vf-pills,html[data-theme=blue] .vf-copy{border-top-color:rgba(120,160,230,.22)}
html[data-theme=blue] .vf-pill{border-color:rgba(120,160,230,.3);background:rgba(47,125,255,.05);color:#e8eef8}
html[data-theme=blue] .vf-pill:hover{background:rgba(47,125,255,.14);box-shadow:none}
html[data-theme=blue] .vf-copy p{color:rgba(225,233,246,.8)}

/* ---------- cookie box ---------- */
html[data-theme=blue] #vv-cc{background:rgba(10,18,34,.97);border-color:rgba(120,160,230,.35);box-shadow:0 10px 40px rgba(0,0,0,.6);color:#c9d4e6}
html[data-theme=blue] #vv-cc b{color:#fff}
html[data-theme=blue] #vv-cc a{color:#6aa6ff}
html[data-theme=blue] #vv-cc button{border-color:#1d5fe0;color:#8db8ff}
html[data-theme=blue] #vv-cc button.y{background:#1d5fe0;color:#fff}
html[data-theme=blue] #vv-cc button:hover{box-shadow:none;filter:brightness(1.1)}

/* ---------- theme switch button (added by vv-nav.js) ---------- */
.vvt-sw{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.vvt-sw i{width:16px;height:16px;border-radius:50%;background:linear-gradient(90deg,#22d63c 50%,#2f7dff 50%)}
.vvt-sw:hover{border-color:rgba(255,255,255,.55)}

/* ---------- tablets and phones ---------- */
@media (max-width:1000px){
  html[data-theme=blue] .h2-stage{min-height:520px;justify-content:center;background-position:70% center,center,center,center}
  html[data-theme=blue] .h2-shade{background:linear-gradient(180deg,rgba(7,13,26,.82) 0%,rgba(7,13,26,.7) 55%,rgba(7,13,26,.92) 100%)}
  html[data-theme=blue] .h2-copy{width:auto;top:auto}
  html[data-theme=blue] .h2-h1{font-size:clamp(36px,9vw,60px)}
  html[data-theme=blue] .h2-sub{max-width:560px;margin:14px auto 0;font-size:16px}
  html[data-theme=blue] .bt-ctas{justify-content:center;margin-top:24px}
  .bt-btn{height:48px;font-size:15px;padding:0 22px}
  html[data-theme=blue] .bt-strip{padding:0 20px}
}
@media (max-width:900px){
  .bt-strip-in{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-30px}
  .bt-f+.bt-f{border-left:0}
  .bt-f:nth-child(2n){border-left:1px solid rgba(120,160,230,.16)}
  .bt-f:nth-child(n+3){border-top:1px solid rgba(120,160,230,.16)}
  .bt-f{padding:16px 18px;gap:12px}
  .bt-f svg{width:30px;height:30px}
  .bt-f b{font-size:14.5px}.bt-f span{font-size:12.5px}
}
@media (max-width:540px){
  .bt-strip-in{grid-template-columns:1fr}
  .bt-f:nth-child(2n){border-left:0}
  .bt-f+.bt-f{border-top:1px solid rgba(120,160,230,.16)}
}

/* small screens, both themes: keep the nav on one line now that it carries the theme switch */
.top-nav .btn-primary,.top-nav .btn-cta{white-space:nowrap}
@media (max-width:540px){
  .top-nav .logo-sep,.top-nav .logo-plat{display:none}
  .top-nav{padding-left:16px!important;padding-right:16px!important}
  .top-nav .btn-primary,.top-nav .btn-cta{padding:7px 14px}
}