/* assets/style.css
   WSOP-inspired palette: deep navy/indigo + neon green CTA + glow glass surfaces.
   Background is CSS-only (nebula + stars). No images required.
*/

/* =========================
   Theme Tokens
   ========================= */
:root{
  /* Background */
  --bg0:#050818;
  --bg1:#070b22;
  --bg2:#0a1233;

  /* Text */
  --text:#eef3ff;
  --muted:rgba(238,243,255,.70);
  --softText:rgba(238,243,255,.86);
  --faintText:rgba(238,243,255,.60);

  /* Accents */
  --primary:#39ff6a;
  --primary2:#21d85a;
  --blue:#4ea1ff;
  --violet:#8b5cff;
  --danger:#ff4d6d;
  --warn:#ffcd66;

  /* UI */
  --radius:18px;
  --max:1120px;

  /* Borders + surfaces */
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.10);
  --glass:rgba(0,0,0,.18);
  --glass2:rgba(255,255,255,.06);
  --surface:rgba(255,255,255,.04);
  --surfaceHover:rgba(255,255,255,.06);
  --surfaceStrong:rgba(255,255,255,.08);

  /* Shadows */
  --shadow:0 22px 70px rgba(0,0,0,.55);
  --shadowSoft:0 12px 35px rgba(0,0,0,.38);

  /* Focus ring */
  --ring:0 0 0 3px rgba(57,255,106,.12);

  /* Background effects */
  --nebulaA:rgba(78,161,255,.35);
  --nebulaB:rgba(139,92,255,.28);
  --nebulaC:rgba(57,255,106,.10);
  --nebulaD:rgba(33,216,90,.08);
  --nebulaE:rgba(78,161,255,.12);
  --nebulaF:rgba(139,92,255,.10);

  --star1:rgba(255,255,255,.60);
  --star2:rgba(255,255,255,.35);
  --star3:rgba(57,255,106,.25);

  --topnavBg:rgba(4,6,18,.55);
  --footerBg:rgba(2,4,12,.55);
  --bannerBg:rgba(12,18,44,.70);
  --inputBg:rgba(0,0,0,.22);
  --modalBg:rgba(8,12,28,.92);
}

/* =========================
   DARK MODE
   Deep neon blue, more cyber, more distinct
   ========================= */
body[data-appearance="dark"]{
  --bg0:#020617;
  --bg1:#030a1f;
  --bg2:#061437;

  --text:#f4f8ff;
  --muted:rgba(240,246,255,.72);
  --softText:rgba(243,247,255,.90);
  --faintText:rgba(240,246,255,.60);

  --primary:#00ff9c;
  --primary2:#00d47f;
  --blue:#3ea6ff;
  --violet:#6d7bff;
  --danger:#ff5577;
  --warn:#ffd166;

  --border:rgba(120,170,255,.18);
  --border2:rgba(120,170,255,.12);
  --glass:rgba(3,10,30,.62);
  --glass2:rgba(255,255,255,.05);
  --surface:rgba(255,255,255,.035);
  --surfaceHover:rgba(255,255,255,.065);
  --surfaceStrong:rgba(255,255,255,.09);

  --shadow:0 25px 80px rgba(0,0,0,.72);
  --shadowSoft:0 12px 40px rgba(0,0,0,.50);
  --ring:0 0 0 3px rgba(0,255,156,.18);

  --nebulaA:rgba(50,130,255,.32);
  --nebulaB:rgba(70,80,255,.22);
  --nebulaC:rgba(0,255,156,.08);
  --nebulaD:rgba(0,212,127,.06);
  --nebulaE:rgba(62,166,255,.10);
  --nebulaF:rgba(109,123,255,.08);

  --topnavBg:rgba(3,9,26,.76);
  --footerBg:rgba(2,8,20,.72);
  --bannerBg:rgba(5,15,40,.78);
  --inputBg:rgba(1,8,24,.55);
  --modalBg:rgba(4,10,24,.94);
}

/* =========================
   LIGHT MODE
   Clean esports dashboard blue/green
   ========================= */
body[data-appearance="light"]{
  --bg0:#dbe8ff;
  --bg1:#edf4ff;
  --bg2:#bfd6ff;

  --text:#12233f;
  --muted:rgba(18,35,63,.72);
  --softText:rgba(18,35,63,.90);
  --faintText:rgba(18,35,63,.58);

  --primary:#19d97c;
  --primary2:#12ba69;
  --blue:#3b82f6;
  --violet:#6677ff;
  --danger:#e45470;
  --warn:#d9981a;

  --border:rgba(18,35,63,.12);
  --border2:rgba(18,35,63,.08);
  --glass:rgba(223,235,255,.72);
  --glass2:rgba(255,255,255,.28);
  --surface:rgba(235,243,255,.78);
  --surfaceHover:rgba(245,249,255,.92);
  --surfaceStrong:rgba(140,175,235,.16);

  --shadow:0 18px 46px rgba(44,84,154,.16);
  --shadowSoft:0 10px 26px rgba(44,84,154,.12);
  --ring:0 0 0 3px rgba(25,217,124,.18);

  --nebulaA:rgba(74,144,255,.18);
  --nebulaB:rgba(115,118,255,.12);
  --nebulaC:rgba(25,217,124,.05);
  --nebulaD:rgba(59,130,246,.05);
  --nebulaE:rgba(74,144,255,.08);
  --nebulaF:rgba(102,119,255,.05);

  --star1:rgba(255,255,255,.20);
  --star2:rgba(59,130,246,.06);
  --star3:rgba(25,217,124,.05);

  --topnavBg:rgba(231,240,255,.78);
  --footerBg:rgba(227,237,255,.72);
  --bannerBg:rgba(213,231,255,.72);
  --inputBg:rgba(244,248,255,.82);
  --modalBg:rgba(236,244,255,.96);
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max); margin:0 auto; padding:0 18px; }

/* Background: nebula + stars */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 10%, var(--nebulaA), transparent 48%),
    radial-gradient(circle at 80% 18%, var(--nebulaB), transparent 52%),
    radial-gradient(circle at 55% 85%, var(--nebulaC), transparent 55%),
    radial-gradient(1100px 700px at 50% -10%, var(--nebulaD), transparent 60%),
    radial-gradient(1200px 800px at 10% 60%, var(--nebulaE), transparent 62%),
    radial-gradient(1000px 900px at 90% 70%, var(--nebulaF), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg0));
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(var(--star1) 1px, transparent 1.2px),
    radial-gradient(var(--star2) 1px, transparent 1.2px),
    radial-gradient(var(--star3) 1px, transparent 1.3px);
  background-size:140px 140px, 220px 220px, 320px 320px;
  background-position:0 0, 80px 60px, 140px 100px;
  filter:blur(.2px);
}

/* =========================
   Reusable UI Utilities
   ========================= */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--glass);
  box-shadow:var(--shadow);
}

.card-soft{
  border:1px solid var(--border2);
  border-radius:var(--radius);
  background:var(--surface);
}

.glass-top{
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--surface);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
  font-size:12px;
  font-weight:900;
  color:var(--softText);
}

.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.d1{ background:rgba(255,77,109,.92); }
.dot.d2{ background:rgba(255,205,102,.92); }
.dot.d3{ background:rgba(57,255,106,.92); }

/* =========================
   Top Nav
   ========================= */
.topnav{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(10px);
  background:var(--topnavBg);
  border-bottom:1px solid var(--border);
}

.topnav__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:.2px;
  color:var(--text);
  text-decoration:none;
}

.logo__mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(57,255,106,.55), rgba(57,255,106,.12) 55%, rgba(255,255,255,.06) 70%),
    rgba(255,255,255,.06);
  border:1px solid rgba(57,255,106,.28);
  box-shadow:0 16px 50px rgba(57,255,106,.10), var(--shadowSoft);
}
.logo__mark.sm{ width:32px; height:32px; border-radius:12px; }
.logo__text{ font-size:15px; }

.navlinks{
  display:flex;
  gap:8px;
  align-items:center;
}
.navlinks a{
  padding:8px 10px;
  border-radius:12px;
  color:var(--softText);
  border:1px solid transparent;
}
.navlinks a:hover{
  color:var(--text);
  background:var(--surfaceHover);
  border-color:var(--border);
  text-decoration:none;
}

.navactions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================
   Buttons
   ========================= */
.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  text-decoration:none;
}
.btn-lg{ padding:12px 14px; border-radius:16px; }

.btn-primary{
  color:#04110a;
  border-color:rgba(57,255,106,.50);
  background:linear-gradient(180deg, rgba(57,255,106,.95), rgba(33,216,90,.85));
  box-shadow:0 18px 55px rgba(57,255,106,.18), 0 10px 30px rgba(0,0,0,.35);
}
.btn-primary:hover{
  box-shadow:0 20px 60px rgba(57,255,106,.22), 0 12px 35px rgba(0,0,0,.42);
}

.btn-ghost{
  background:var(--surface);
  border-color:var(--border);
}

/* =========================
   Banners
   ========================= */
.banner{
  margin:14px auto 0;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--bannerBg);
  max-width:var(--max);
  box-shadow:var(--shadow);
}
.banner--bad{ border-color:rgba(255,77,109,.40); box-shadow:0 18px 60px rgba(255,77,109,.10); }
.banner--good{ border-color:rgba(57,255,106,.30); box-shadow:0 18px 60px rgba(57,255,106,.10); }

/* =========================
   Hero
   ========================= */
.hero{
  padding:34px 0 10px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background:color-mix(in srgb, var(--blue) 12%, transparent);
  color:var(--softText);
  font-size:12px;
  font-weight:900;
}

.hero h1{
  margin:14px 0 10px;
  font-size:46px;
  letter-spacing:-0.7px;
  line-height:1.05;
  text-shadow:0 18px 60px rgba(0,0,0,.55);
}
@media (max-width: 520px){
  .hero h1{ font-size:36px; }
}

.lead{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
}

.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.hero__notes{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.note{
  font-size:12px;
  color:var(--softText);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
}

.hero__panel{
  border-radius:calc(var(--radius) + 6px);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 45%),
    radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surfaceStrong) 85%, transparent), color-mix(in srgb, var(--surface) 85%, transparent));
  box-shadow:var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
}

.hero__panel::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:300px;
  height:300px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);
  transform:rotate(10deg);
}

/* =========================
   Sections
   ========================= */
.section{ padding:28px 0; }

.section__head{
  margin-bottom:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.section__head h2{
  margin:0;
  font-size:22px;
  letter-spacing:-0.2px;
  text-shadow:0 14px 45px rgba(0,0,0,.45);
}

.section__head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  max-width:520px;
  line-height:1.45;
}

.grid4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 980px){ .grid4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px){ .grid4{ grid-template-columns:1fr; } }

.fcard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surfaceStrong) 80%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
  box-shadow:var(--shadow);
  padding:14px;
}

.ficon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid var(--border2);
  background:var(--surface);
  margin-bottom:10px;
}

.fcard h3{ margin:0 0 6px; font-size:14px; font-weight:900; }
.fcard p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 980px){ .steps{ grid-template-columns:1fr; } }

.step{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%),
    var(--surface);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  gap:12px;
}

.step__num{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight:950;
  color:var(--text);
}

.step__body h3{ margin:0 0 6px; font-size:14px; font-weight:900; }
.step__body p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }

/* =========================
   FAQ
   ========================= */
.faq{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 4px);
  background:var(--glass);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.faq__q{
  width:100%;
  text-align:left;
  padding:14px;
  border:0;
  border-bottom:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}

.faq__q:hover{ background:var(--surfaceHover); }

.faq__a{
  display:none;
  padding:0 14px 14px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.faq__q.is-open + .faq__a{ display:block; }

.chev{ color:var(--muted); }

/* =========================
   Footer
   ========================= */
.sitefooter{
  margin-top:18px;
  border-top:1px solid var(--border);
  background:var(--footerBg);
}
.sitefooter__inner{
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footbrand{ font-weight:950; }
.footmuted{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}
.sep{
  color:var(--faintText);
  margin:0 8px;
}

/* =========================
   Modal
   ========================= */
.modal{ position:fixed; inset:0; display:none; z-index:100; }
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
}

.modal__panel{
  position:relative;
  max-width:780px;
  margin:6vh auto 0;
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 25% 10%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 55%),
    radial-gradient(circle at 80% 25%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%),
    var(--modalBg);
  box-shadow:var(--shadow);
  padding:14px;
}
@media (max-width: 820px){
  .modal__panel{ margin:4vh 14px 0; }
}

.modal__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:8px 6px 10px;
}

.modal__brand{ display:flex; align-items:center; gap:10px; font-weight:950; }

.modal__sub{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
  line-height:1.35;
}

.iconx{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}
.iconx:hover{ filter:brightness(1.10); }

.tabs{
  display:flex;
  gap:10px;
  padding:6px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
}

.tab{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:950;
}

.tab.is-active{
  color:var(--text);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  border-color:color-mix(in srgb, var(--primary) 22%, transparent);
}

.tabpane{ display:none; padding:12px 6px 4px; }
.tabpane.is-active{ display:block; }

label{
  display:block;
  margin:10px 0 6px;
  color:var(--muted);
  font-size:12px;
}

input,
select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--inputBg);
  color:var(--text);
  outline:none;
}

input:focus,
select:focus{
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:var(--ring);
}

.formrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 820px){
  .twocol{ grid-template-columns:1fr; }
}

.tiny{ font-size:12px; }

.pill-inline{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  margin-left:6px;
}

/* Password meter */
.pw-meter{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--inputBg);
  overflow:hidden;
}
.pw-meter > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 78%, white 0%);
  transition:width .18s ease;
}

.pw-req{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:6px;
}
.pw-req li{
  font-size:12px;
  color:var(--muted);
  padding-left:18px;
  position:relative;
}
.pw-req li::before{
  content:"✕";
  position:absolute;
  left:0;
  top:0;
  opacity:.9;
}
.pw-req li.ok{ color:rgba(57,255,106,.95); }
.pw-req li.ok::before{ content:"✓"; }
.pw-req li.bad{ color:rgba(255,77,109,.92); }

.hint{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

/* =========================
   Landing (Modes + Preview)
   ========================= */
.modes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .modes{ grid-template-columns:1fr; }
}

.modecard{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  padding:16px;
  box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%),
    var(--glass);
}

.modecard--casual{
  background:
    radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%),
    var(--glass);
}

.modecard--ranked{
  background:
    radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 55%),
    var(--glass);
}

.modecard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.modecard__badge{
  font-weight:950;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
}

.modecard__icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid var(--border2);
  background:var(--surface);
}

.modecard h3{ margin:0 0 6px; font-size:16px; font-weight:950; }
.modecard p{ margin:0 0 12px; color:var(--muted); line-height:1.45; font-size:13px; }
.modecard__note{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

/* Preview grid */
.preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .preview{ grid-template-columns:1fr; }
}

.preview__panel{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  padding:16px;
  box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%),
    var(--glass);
}

.preview__title{ font-weight:950; margin-bottom:10px; }

.preview__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border2);
  color:var(--softText);
}
.preview__row:last-child{ border-bottom:none; }

.preview__bar{
  margin-top:14px;
  height:12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--blue) 18%, transparent));
}

/* =========================
   Hero Analytics Panel
   ========================= */
.statpanel{ position:relative; z-index:1; }

.statpanel__top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--surface);
}

.statpanel__title{
  margin-left:8px;
  color:var(--muted);
  font-size:12px;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.statpanel__pill{
  font-size:11px;
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background:color-mix(in srgb, var(--blue) 12%, transparent);
  color:var(--softText);
}

.statgrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.stat{
  border-radius:16px;
  border:1px solid var(--border2);
  background:var(--surface);
  padding:12px;
}

.stat__label{
  color:var(--muted);
  font-size:12px;
}

.stat__value{
  margin-top:6px;
  font-size:18px;
  font-weight:950;
  letter-spacing:.2px;
  color:var(--text);
}

.stat__delta{
  margin-top:6px;
  font-size:11px;
  color:var(--faintText);
}
.stat__delta.up,
.stat__delta.good{ color:rgba(57,255,106,.90); }

.spark{
  margin-top:12px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:var(--surface);
  padding:12px;
}

.spark__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:10px;
}

.spark__title{
  font-weight:950;
  font-size:12px;
  color:var(--softText);
}

.spark__hint{
  font-size:11px;
  color:var(--faintText);
}

.spark__bars{
  height:54px;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
  align-items:end;
}

.spark__bars span{
  height:var(--h);
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, white 0%), color-mix(in srgb, var(--blue) 35%, transparent));
  box-shadow:0 12px 30px color-mix(in srgb, var(--primary) 10%, transparent);
  border:1px solid var(--border2);
}

/* Sticky footer only for hub pages */
body.hub{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body.hub main.container{
  flex:1 0 auto;
}

body.hub .sitefooter{
  margin-top:auto;
}

/* =========================
   Admin Login
   ========================= */
.admin-login-hero{
  min-height:calc(100vh - 110px);
  align-items:center;
}

.admin-login-card{
  padding:18px;
  max-width:520px;
  margin-left:auto;
}

.admin-login-card__head{
  margin-bottom:10px;
}

.admin-login-card h2{
  margin:12px 0 6px;
  font-size:24px;
  letter-spacing:-0.3px;
}

.admin-login-sub{
  margin-bottom:8px;
  font-size:13px;
}

/* =========================
   Admin Hub
   ========================= */
body.adminhub .container,
body.adminhub .topnav__inner{
  max-width:1520px;
  width:calc(100% - 36px);
}

body.adminhub .sitefooter__inner{
  width:calc(100% - 36px);
  max-width:1520px;
  margin-left:auto;
  margin-right:auto;
}

.admin-shell{
  display:grid;
  grid-template-columns:260px minmax(620px, 1fr) 360px;
  gap:14px;
  align-items:start;
  padding:18px 0 24px;
}

@media (max-width: 1280px){
  .admin-shell{
    grid-template-columns:240px 1fr;
  }
  .admin-right{
    grid-column:1 / -1;
  }
}

@media (max-width: 920px){
  .admin-shell{
    grid-template-columns:1fr;
  }
}

/* Left rail */
.admin-side{
  padding:16px;
  position:sticky;
  top:82px;
}

.admin-side__head h2{
  margin:12px 0 6px;
  font-size:22px;
  letter-spacing:-.3px;
}

.admin-side__head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.admin-menu{
  margin-top:16px;
  display:grid;
  gap:8px;
}

.admin-menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--softText);
  background:var(--surface);
  text-decoration:none;
  font-weight:800;
}

.admin-menu__item:hover{
  text-decoration:none;
  color:var(--text);
  background:var(--surfaceHover);
  border-color:var(--border);
}

.admin-menu__item.is-active{
  color:var(--text);
  border-color:color-mix(in srgb, var(--primary) 24%, transparent);
  background:color-mix(in srgb, var(--primary) 10%, transparent);
}

.admin-menu__icon{
  width:22px;
  text-align:center;
  opacity:.95;
}

.admin-side__foot{
  margin-top:16px;
}

.side-mini{
  padding:12px;
}

.side-mini__label{
  font-size:11px;
  color:var(--faintText);
  text-transform:uppercase;
  letter-spacing:.6px;
}

.side-mini__value{
  margin-top:6px;
  font-size:18px;
  font-weight:950;
}

.side-mini__meta{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* Main */
.admin-main{
  display:grid;
  gap:14px;
}

.admin-hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
  padding:16px;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 40%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--surfaceStrong) 80%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
}

@media (max-width: 1100px){
  .admin-hero{
    grid-template-columns:1fr;
  }
}

.admin-hero__copy h1{
  margin:14px 0 10px;
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.6px;
  text-shadow:0 18px 60px rgba(0,0,0,.45);
}

.admin-hero__panel{
  min-width:0;
}

.admin-blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width: 980px){
  .admin-blocks{
    grid-template-columns:1fr;
  }
}

/* Panels */
.admin-panel{
  padding:14px;
}

.admin-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.admin-panel__head h2{
  margin:0;
  font-size:16px;
  letter-spacing:-.2px;
}

/* Queue */
.queue-list,
.note-list,
.activity-list,
.attention-list,
.quick-actions{
  display:grid;
  gap:10px;
}

.queue-item,
.note-row,
.attention-item{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
}

.queue-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.queue-item__title{
  font-weight:900;
  margin-bottom:4px;
}

.queue-item__meta{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.note-row__title{
  font-weight:900;
  margin-bottom:5px;
}

.note-row__meta{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

/* Right rail */
.admin-right{
  display:grid;
  gap:14px;
}

.activity-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px solid var(--border2);
}

.activity-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.activity-item__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:var(--surface);
}

.activity-item__title{
  font-weight:900;
  margin-bottom:4px;
}

.activity-item__meta{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.attention-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.attention-item span{
  color:var(--softText);
}

.attention-item strong{
  font-size:16px;
}

.quick-actions .btn{
  width:100%;
  justify-content:center;
}

#pwReq .ok { color: rgba(57,255,106,.95); }
#pwReq .bad { color: rgba(255,77,109,.95); }

/* =====================================================
   LIGHT MODE POLISH TOKENS
===================================================== */
body[data-appearance="light"]{
  --bg0:#d9e8ff;
  --bg1:#edf5ff;
  --bg2:#c8dcff;

  --text:#142742;
  --muted:rgba(20,39,66,.70);
  --softText:rgba(20,39,66,.88);
  --faintText:rgba(20,39,66,.56);

  --primary:#1ecf7a;
  --primary2:#12b86a;
  --blue:#4b8dff;
  --violet:#7c86ff;
  --danger:#df5a74;
  --warn:#d89a28;

  --border:rgba(43,76,128,.14);
  --border2:rgba(43,76,128,.09);

  --glass:rgba(227,238,255,.78);
  --glass2:rgba(255,255,255,.42);

  --surface:rgba(241,247,255,.82);
  --surfaceHover:rgba(248,251,255,.96);
  --surfaceStrong:rgba(192,214,248,.34);

  --shadow:0 20px 50px rgba(64,102,168,.16);
  --shadowSoft:0 12px 28px rgba(64,102,168,.11);
  --ring:0 0 0 3px rgba(75,141,255,.16);

  --nebulaA:rgba(86,146,255,.18);
  --nebulaB:rgba(124,134,255,.10);
  --nebulaC:rgba(30,207,122,.05);
  --nebulaD:rgba(75,141,255,.07);
  --nebulaE:rgba(86,146,255,.09);
  --nebulaF:rgba(124,134,255,.05);

  --star1:rgba(255,255,255,.18);
  --star2:rgba(75,141,255,.06);
  --star3:rgba(30,207,122,.04);

  --topnavBg:rgba(235,243,255,.78);
  --footerBg:rgba(230,240,255,.72);
  --bannerBg:rgba(219,232,255,.78);
  --inputBg:rgba(248,251,255,.92);
  --modalBg:rgba(239,246,255,.97);

  /* new convenience tokens */
  --panelLite:linear-gradient(180deg, rgba(255,255,255,.70), rgba(233,243,255,.82));
  --panelLiteStrong:linear-gradient(180deg, rgba(255,255,255,.88), rgba(227,239,255,.96));
  --iconLite:linear-gradient(180deg, rgba(255,255,255,.92), rgba(220,234,255,.92));
}

/* =====================================================
   DIRECT MESSAGE POPUP / MESSENGER CHATBOX
===================================================== */

.chat-pop[hidden]{
  display:none !important;
}

.chat-pop{
  position:fixed;
  right:24px;
  bottom:24px;
  width:380px;
  max-width:calc(100vw - 28px);
  height:560px;
  max-height:calc(100vh - 96px);
  z-index:9999;

  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:22px;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 40%),
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 36%),
    var(--modalBg);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  color:var(--text);
}

.chat-pop.is-min{
  height:auto;
  grid-template-rows:auto;
}

.chat-pop.is-min .chat-pop__body,
.chat-pop.is-min .chat-pop__form{
  display:none;
}

.chat-pop__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-bottom:1px solid var(--border2);
  background:color-mix(in srgb, var(--surfaceStrong) 70%, transparent);
}

.chat-pop__person{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.chat-pop__avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:linear-gradient(135deg, var(--surfaceStrong), var(--surface));
}

.chat-pop__avatarimg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.chat-pop__avatarfallback{
  font-weight:950;
  font-size:16px;
  color:var(--text);
}

.chat-pop__identity{
  min-width:0;
  display:grid;
  gap:2px;
}

.chat-pop__name{
  font-size:14px;
  font-weight:950;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-pop__meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-pop__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.chat-pop__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-weight:950;
  display:grid;
  place-items:center;
}

.chat-pop__icon:hover{
  background:var(--surfaceHover);
}

.chat-pop__body{
  min-height:0;
  overflow-y:auto;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(0,0,0,.08);
}

.chat-pop__empty{
  margin:auto;
  max-width:260px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  padding:18px;
  border-radius:18px;
  border:1px dashed var(--border);
  background:var(--surface);
}

.chat-msg{
  display:flex;
  justify-content:flex-start;
}

.chat-msg.mine{
  justify-content:flex-end;
}

.chat-msg__bubble{
  max-width:78%;
  padding:10px 12px;
  border-radius:16px 16px 16px 6px;
  border:1px solid var(--border2);
  background:var(--surfaceStrong);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.chat-msg.mine .chat-msg__bubble{
  border-radius:16px 16px 6px 16px;
  color:#04110a;
  border-color:color-mix(in srgb, var(--primary) 55%, transparent);
  background:linear-gradient(180deg, var(--primary), var(--primary2));
}

.chat-msg__text{
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:break-word;
}

.chat-msg__time{
  margin-top:5px;
  font-size:10px;
  line-height:1;
  opacity:.72;
  text-align:right;
}

.chat-pop__form{
  padding:12px;
  border-top:1px solid var(--border2);
  background:color-mix(in srgb, var(--surfaceStrong) 64%, transparent);
}

.chat-pop__composer{
  display:grid;
  grid-template-columns:1fr 42px;
  gap:8px;
  align-items:end;
}

.chat-pop__input{
  width:100%;
  min-height:42px;
  max-height:110px;
  resize:none;
  overflow-y:auto;
  padding:12px 13px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--inputBg);
  color:var(--text);
  outline:none;
  font:inherit;
  line-height:1.35;
}

.chat-pop__input:focus{
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:var(--ring);
}

.chat-pop__send{
  width:42px;
  height:42px;
  border-radius:15px;
  border:1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  background:linear-gradient(180deg, var(--primary), var(--primary2));
  color:#04110a;
  cursor:pointer;
  font-weight:950;
  display:grid;
  place-items:center;
}

.chat-pop__send:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

@media (max-width: 620px){
  .chat-pop{
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;
    height:70vh;
    max-width:none;
  }
}

/* =====================================================
   RESPONSIVE STANDARDIZATION PASS - GLOBAL
   Keeps desktop/laptop consistent, compresses mobile.
===================================================== */

:root{
  --app-max-width:1520px;
  --app-page-gutter:18px;
  --app-page-gutter-mobile:12px;

  --app-gap:14px;
  --app-gap-sm:10px;

  --app-card-pad:16px;
  --app-card-pad-mobile:12px;

  --app-radius-lg:24px;
  --app-radius-md:18px;

  --bp-wide:1520px;
  --bp-laptop:1280px;
  --bp-tablet:1024px;
  --bp-mobile:860px;
  --bp-phone:640px;
  --bp-tight:480px;
}

/* Universal sizing safety */
html{
  width:100%;
  overflow-x:hidden;
}

body{
  min-width:0;
  overflow-x:hidden;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

/* Make all main app shells agree on width */
.container,
.topnav__inner,
.sitefooter__inner,
body.hub .container,
body.hub .topnav__inner,
body.hub .sitefooter__inner,
body.adminhub .container,
body.adminhub .topnav__inner,
body.adminhub .sitefooter__inner{
  width:min(var(--app-max-width), calc(100% - 36px));
  max-width:var(--app-max-width);
  margin-left:auto;
  margin-right:auto;
}

/* Prevent grid/flex children from forcing horizontal overflow */
.container > *,
.card,
.card-soft,
.admin-shell,
.hub-grid,
.userpage-grid,
.shoppage-grid,
.play-mode-layout,
.game-room-shell{
  min-width:0;
}

/* Shared card compression */
.card,
.card-soft{
  max-width:100%;
}

/* Top navigation consistency */
.topnav{
  width:100%;
}

.topnav__inner{
  min-height:68px;
}

.logo,
.brand,
.topnav-profile{
  min-width:0;
}

.logo__text,
.brand__name,
.topnav-profile__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Buttons should wrap instead of breaking layout */
.btn,
.ui-btn,
.mini-btn,
.icon-btn,
.md-ico{
  flex-shrink:0;
}

.navactions,
.navlinks,
.md-icons,
.actions{
  min-width:0;
}

/* Forms should never overflow their panels */
input,
select,
textarea,
button{
  max-width:100%;
}

.formrow,
.cta,
.hero-actions,
.shop-banner-card__actions,
.store-banner__actions,
.profile-action-row{
  min-width:0;
}

/* Large desktop: keep everything centered and capped */
@media (min-width:1521px){
  .container,
  .topnav__inner,
  .sitefooter__inner,
  body.hub .container,
  body.hub .topnav__inner,
  body.hub .sitefooter__inner,
  body.adminhub .container,
  body.adminhub .topnav__inner,
  body.adminhub .sitefooter__inner{
    width:min(var(--app-max-width), calc(100% - 48px));
  }
}

/* Normal laptops */
@media (max-width:1280px){
  :root{
    --app-page-gutter:16px;
    --app-gap:12px;
    --app-card-pad:14px;
  }

  .container,
  .topnav__inner,
  .sitefooter__inner,
  body.hub .container,
  body.hub .topnav__inner,
  body.hub .sitefooter__inner,
  body.adminhub .container,
  body.adminhub .topnav__inner,
  body.adminhub .sitefooter__inner{
    width:calc(100% - 28px);
  }

  .hero h1{
    font-size:clamp(34px, 4vw, 46px);
  }
}

/* Tablet / small laptop */
@media (max-width:1024px){
  .topnav__inner{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .navlinks{
    order:3;
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
  }

  .navlinks a{
    white-space:nowrap;
  }

  .navactions,
  .md-icons,
  .actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .hero{
    grid-template-columns:1fr;
  }
}

/* Mobile app-like compression */
@media (max-width:860px){
  :root{
    --app-page-gutter:12px;
    --app-gap:10px;
    --app-card-pad:12px;
    --app-radius-lg:20px;
    --app-radius-md:16px;
  }

  .container,
  .topnav__inner,
  .sitefooter__inner,
  body.hub .container,
  body.hub .topnav__inner,
  body.hub .sitefooter__inner,
  body.adminhub .container,
  body.adminhub .topnav__inner,
  body.adminhub .sitefooter__inner{
    width:calc(100% - 20px);
    padding-left:0;
    padding-right:0;
  }

  .topnav__inner{
    min-height:0;
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
  }

  .logo__mark,
  .brand__logo{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .logo__text,
  .brand__name{
    max-width:160px;
  }

  .btn{
    padding:9px 11px;
    border-radius:13px;
    font-size:13px;
  }

  .btn-lg{
    padding:10px 12px;
    border-radius:14px;
  }

  .section{
    padding:18px 0;
  }

  .section__head{
    align-items:flex-start;
  }

  .section__head h2{
    font-size:20px;
  }

  .modal__panel{
    width:calc(100% - 20px);
    margin:12px auto 0;
    max-height:calc(100vh - 24px);
    overflow:auto;
  }

  .tabs{
    overflow-x:auto;
  }

  .tab{
    min-width:max-content;
  }

  .sitefooter__inner{
    flex-direction:column;
  }
}

/* Small phones */
@media (max-width:640px){
  .topnav__inner{
    display:grid;
    grid-template-columns:1fr auto;
  }

  .navlinks{
    grid-column:1 / -1;
  }

  .navactions,
  .md-icons,
  .actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

  .hero h1{
    font-size:32px;
  }

  .lead{
    font-size:14px;
  }

  .grid4,
  .steps,
  .preview,
  .modes,
  .twocol,
  .statgrid{
    grid-template-columns:1fr;
  }

  .card,
  .card-soft,
  .fcard,
  .step,
  .modecard,
  .preview__panel{
    border-radius:18px;
  }
}

/* Very tight phones */
@media (max-width:480px){
  .container,
  .topnav__inner,
  .sitefooter__inner,
  body.hub .container,
  body.hub .topnav__inner,
  body.hub .sitefooter__inner,
  body.adminhub .container,
  body.adminhub .topnav__inner,
  body.adminhub .sitefooter__inner{
    width:calc(100% - 16px);
  }

  .logo__text,
  .brand__name{
    max-width:130px;
  }

  .btn,
  .btn-lg{
    width:auto;
    min-width:0;
  }

  .cta .btn,
  .hero-actions .btn,
  .formrow .btn{
    flex:1 1 140px;
  }
}

/* =====================================================
   LOGIA BRAND MARKS
===================================================== */

.logo__mark.logo__mark--image{
  display:block;
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:contain;
  padding:4px;
  background:
    radial-gradient(circle at 50% 20%, rgba(245,196,81,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.logia-login-logo{
  display:block;
  width:min(340px, 100%);
  height:auto;
  object-fit:contain;
  margin:0 0 18px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.32));
}

body[data-appearance="light"] .logo__mark.logo__mark--image{
  background:
    radial-gradient(circle at 50% 20%, rgba(245,196,81,.22), transparent 42%),
    rgba(255,255,255,.78);
  border-color:rgba(18,35,63,.14);
}

@media (max-width: 860px){
  .logia-login-logo{
    width:min(260px, 100%);
    margin-bottom:14px;
  }
}

.landing-hero-logo{
  display:block;
  width:min(360px, 100%);
  height:auto;
  object-fit:contain;
  margin:0 0 18px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.32));
}

@media (max-width: 860px){
  .landing-hero-logo{
    width:min(260px, 100%);
    margin-bottom:14px;
  }
}

/* =====================================================
   LANDING HERO LOGO REPLACEMENT
   Replaces the old right-side rectangle preview panel.
===================================================== */

.hero__logo-panel{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border-radius:calc(var(--radius) + 10px);
}

.landing-hero-logo{
  display:block;
  width:min(460px, 100%);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 22px 46px rgba(0,0,0,.38))
    drop-shadow(0 0 34px rgba(245,196,81,.10));
}

.landing-hero-logo--panel{
  width:min(500px, 100%);
  transform:translateY(-4px);
}

@media (max-width:980px){
  .hero__logo-panel{
    min-height:auto;
    padding:10px 10px 0;
    order:-1;
  }

  .landing-hero-logo--panel{
    width:min(320px, 82vw);
  }
}

@media (max-width:520px){
  .landing-hero-logo--panel{
    width:min(250px, 82vw);
  }
}

/* =====================================================
   LANDING FINAL LAYOUT
   No top bar. Left text centered. Logo on right.
===================================================== */

body:not(.hub) main.container{
  min-height:calc(100vh - 92px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

body:not(.hub) .hero{
  min-height:clamp(560px, 72vh, 760px);
  align-items:center;
  padding:28px 0 22px;
  grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
}

body:not(.hub) .hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:780px;
  transform:translateY(-10px);
}

body:not(.hub) .hero h1{
  max-width:760px;
  font-size:clamp(44px, 4vw, 68px);
}

body:not(.hub) .lead{
  max-width:760px;
  font-size:clamp(15px, 1.1vw, 18px);
}

body:not(.hub) .hero__logo-panel{
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

body:not(.hub) .landing-hero-logo--panel{
  width:min(560px, 100%);
  max-height:620px;
  object-fit:contain;
  margin:0;
  transform:translateY(10px);
  filter:
    drop-shadow(0 26px 54px rgba(0,0,0,.42))
    drop-shadow(0 0 38px rgba(245,196,81,.12));
}

/* Since there is no top nav now, hide the pointless footer back-to-top link */
body:not(.hub) .footright a[href="#top"],
body:not(.hub) .footright .sep{
  display:none;
}

/* Mobile / tablet */
@media (max-width:980px){
  body:not(.hub) main.container{
    min-height:auto;
    display:block;
  }

  body:not(.hub) .hero{
    min-height:auto;
    grid-template-columns:1fr;
    padding:24px 0 10px;
  }

  body:not(.hub) .hero__copy{
    transform:none;
    order:2;
  }

  body:not(.hub) .hero__logo-panel{
    order:1;
    min-height:auto;
    padding:6px 0 10px;
  }

  body:not(.hub) .landing-hero-logo--panel{
    width:min(320px, 82vw);
    transform:none;
  }

  body:not(.hub) .hero h1{
    font-size:clamp(34px, 8vw, 46px);
  }
}

@media (max-width:520px){
  body:not(.hub) .landing-hero-logo--panel{
    width:min(250px, 82vw);
  }

  body:not(.hub) .hero{
    padding-top:16px;
  }
}

/* =====================================================
   DEPLOYMENT RESPONSIVE PATCH - GLOBAL BASE
   Append at bottom of assets/style.css
===================================================== */

html{
  -webkit-text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  max-width:100%;
}

.container,
.topnav__inner,
.sitefooter__inner,
.app-shell,
.app-topbar__inner,
.app-footer__inner{
  min-width:0;
}

.card,
.card-soft,
.glass-top,
.hero__panel,
.modal__panel,
.banner{
  min-width:0;
}

.btn{
  min-width:0;
  white-space:normal;
  line-height:1.15;
}

.section{
  min-width:0;
}

.section__head{
  min-width:0;
}

.section__head > *{
  min-width:0;
}

.topnav{
  width:100%;
}

.topnav__inner{
  width:min(var(--max), calc(100% - 28px));
  padding-left:0;
  padding-right:0;
}

.navactions,
.navlinks{
  min-width:0;
  flex-wrap:wrap;
}

.logo{
  min-width:0;
}

.logo__text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hero{
  min-width:0;
}

.hero > *{
  min-width:0;
}

.hero h1{
  font-size:clamp(32px, 4vw, 46px);
}

.grid4,
.steps,
.preview,
.modes,
.twocol,
.statgrid{
  min-width:0;
}

.grid4 > *,
.steps > *,
.preview > *,
.modes > *,
.twocol > *,
.statgrid > *{
  min-width:0;
}

.chat-pop{
  width:min(380px, calc(100vw - 24px));
  right:12px;
  bottom:12px;
}

@media (max-width:980px){
  .container{
    width:calc(100% - 24px);
    padding-left:0;
    padding-right:0;
  }

  .topnav__inner{
    width:calc(100% - 24px);
    align-items:flex-start;
    flex-direction:column;
  }

  .navlinks,
  .navactions{
    width:100%;
    justify-content:flex-start;
  }

  .hero{
    padding-top:22px;
    gap:14px;
  }

  .section{
    padding:20px 0;
  }

  .modal__panel{
    width:calc(100vw - 24px);
    max-height:calc(100vh - 28px);
    margin:14px auto 0;
    overflow:auto;
  }
}

@media (max-width:640px){
  .container,
  .topnav__inner,
  .sitefooter__inner{
    width:calc(100% - 18px);
  }

  .topnav__inner{
    padding-top:10px;
    padding-bottom:10px;
    gap:10px;
  }

  .logo__mark{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .hero h1{
    font-size:30px;
  }

  .lead{
    font-size:14px;
  }

  .btn{
    padding:9px 11px;
    border-radius:12px;
    font-size:13px;
  }

  .formrow .btn,
  .cta .btn{
    flex:1 1 150px;
  }

  .sitefooter__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .chat-pop{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    height:min(540px, calc(100vh - 24px));
    max-height:calc(100vh - 24px);
  }
}

/* =====================================================
   BATCH 1 PATCH - AUTH MODAL UX
   Keeps invalid login visible and adds password toggles.
===================================================== */

.auth-inline-error{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,77,109,.35);
  background:rgba(255,77,109,.10);
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}

.password-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}

.password-wrap input{
  min-width:0;
}

.password-toggle{
  min-height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

.password-toggle:hover{
  background:var(--surfaceHover);
}

@media (max-width:520px){
  .password-wrap{
    grid-template-columns:1fr;
  }

  .password-toggle{
    width:100%;
  }
}

/* =====================================================
   LOGIA FINAL RESPONSIVE FOUNDATION PATCH
   Paste at bottom of assets/style.css
===================================================== */

/* Universal overflow / sizing safety */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  min-width:0;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  max-width:100%;
  font:inherit;
}

input,
select,
textarea{
  min-height:44px;
}

textarea{
  resize:vertical;
  line-height:1.5;
}

/* Make long emails/usernames/IDs stop breaking cards */
p,
span,
strong,
small,
label,
div,
h1,
h2,
h3,
h4,
h5,
h6,
td,
th{
  overflow-wrap:break-word;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

/* Safer page containers */
.container,
.topnav__inner,
.sitefooter__inner,
.app-shell,
.app-topbar__inner,
.app-footer__inner{
  min-width:0;
}

.container{
  width:min(var(--max), calc(100% - 28px));
  padding-left:0;
  padding-right:0;
}

.topnav__inner,
.sitefooter__inner{
  width:min(var(--max), calc(100% - 28px));
  padding-left:0;
  padding-right:0;
}

/* Card/content safety */
.card,
.card-soft,
.glass-top,
.hero__panel,
.modal__panel,
.banner,
.fcard,
.step,
.modecard,
.preview__panel,
.stat,
.spark,
.admin-login-card{
  min-width:0;
}

/* Buttons should wrap instead of overflowing */
.btn,
.ui-btn,
.icon-btn,
.mini-btn,
.tab,
.pill,
.chip{
  min-width:0;
  max-width:100%;
}

.btn{
  white-space:normal;
  line-height:1.15;
  text-align:center;
}

.btn-lg{
  min-height:44px;
}

/* Better form rhythm everywhere */
form{
  min-width:0;
}

.formrow{
  gap:12px;
  align-items:center;
}

.formrow .btn{
  min-height:44px;
}

.form-grid,
.twocol,
.statgrid,
.grid4,
.steps,
.preview,
.modes{
  min-width:0;
}

.form-grid > *,
.twocol > *,
.statgrid > *,
.grid4 > *,
.steps > *,
.preview > *,
.modes > *{
  min-width:0;
}

/* Fix label/input crowding globally */
label + input,
label + select,
label + textarea{
  margin-top:2px;
}

input + .btn,
select + .btn,
textarea + .btn{
  margin-top:10px;
}

/* Topnav should compress cleanly */
.topnav{
  width:100%;
}

.logo,
.navlinks,
.navactions{
  min-width:0;
}

.navlinks,
.navactions{
  flex-wrap:wrap;
}

.logo__text{
  min-width:0;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Hero compression */
.hero{
  min-width:0;
}

.hero > *{
  min-width:0;
}

.hero h1{
  font-size:clamp(32px, 4vw, 46px);
}

.lead{
  font-size:clamp(14px, 1.4vw, 15px);
}

/* Modal/mobile safety */
.modal__panel{
  width:min(780px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
}

/* Tables should not blow up the page */
table{
  max-width:100%;
}

.table-scroll,
.micro-table-wrap{
  max-width:100%;
  overflow-x:auto;
}

/* Chat popup safety */
.chat-pop{
  width:min(380px, calc(100vw - 24px));
  right:12px;
  bottom:12px;
}

/* Laptop */
@media (max-width:1200px){
  .container,
  .topnav__inner,
  .sitefooter__inner{
    width:calc(100% - 24px);
  }

  .hero{
    gap:14px;
  }

  .hero h1{
    font-size:clamp(31px, 4vw, 42px);
  }
}

/* Tablet */
@media (max-width:980px){
  .container,
  .topnav__inner,
  .sitefooter__inner{
    width:calc(100% - 22px);
  }

  .topnav__inner{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .navlinks,
  .navactions{
    width:100%;
    justify-content:flex-start;
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:22px;
  }

  .section{
    padding:22px 0;
  }

  .section__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .modal__panel{
    margin:14px auto 0;
  }
}

/* Phone */
@media (max-width:640px){
  .container,
  .topnav__inner,
  .sitefooter__inner{
    width:calc(100% - 16px);
  }

  .topnav__inner{
    padding-top:10px;
    padding-bottom:10px;
  }

  .logo__mark{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .logo__text{
    max-width:calc(100vw - 110px);
  }

  .hero h1{
    font-size:30px;
  }

  .lead{
    font-size:14px;
  }

  .btn{
    min-height:42px;
    padding:9px 11px;
    border-radius:12px;
    font-size:13px;
  }

  .cta,
  .formrow{
    width:100%;
  }

  .cta .btn,
  .formrow .btn{
    flex:1 1 150px;
  }

  .sitefooter__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .footmuted--links{
    align-items:flex-start;
  }

  .modal__panel{
    width:calc(100vw - 16px);
    margin:8px auto 0;
    padding:10px;
    border-radius:20px;
  }

  .tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
  }

  .tab{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .chat-pop{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    max-height:calc(100vh - 18px);
  }
}