*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF Compact Display","SF Compact Text","Helvetica Neue","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

:root{
  --bg:#f6f8ff;
  --ink:#101828;
  --body-bg:
    linear-gradient(135deg,rgba(10,132,255,.18),transparent 30%),
    linear-gradient(225deg,rgba(255,45,85,.13),transparent 34%),
    linear-gradient(180deg,#fbfcff 0%,#eef4ff 48%,#f8f7ff 100%);
  --grid-lines:linear-gradient(rgba(10,132,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,45,85,.04) 1px,transparent 1px);
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.9);
  --line:rgba(16,24,40,.12);
  --line-soft:rgba(255,255,255,.58);
  --glass-highlight:rgba(255,255,255,.74);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(255,255,255,.22);
  --text:#101828;
  --muted:#667085;
  --blue:#0a84ff;
  --cyan:#32ade6;
  --green:#34c759;
  --pink:#ff2d55;
  --purple:#af52de;
  --rose:#ff3b30;
  --nav-bg:rgba(255,255,255,.64);
  --card-shadow:0 24px 80px rgba(15,23,42,.12);
  --nav-shadow:0 18px 60px rgba(15,23,42,.12);
  --field-bg:rgba(255,255,255,.82);
  --soft-panel:rgba(255,255,255,.58);
  --muted-text:#475467;
  --pre-bg:rgba(255,255,255,.68);
  --modal-bg:rgba(238,244,255,.68);
}

body.night{
  --bg:#0b1020;
  --ink:#f8fafc;
  --body-bg:
    linear-gradient(135deg,rgba(10,132,255,.24),transparent 32%),
    linear-gradient(225deg,rgba(175,82,222,.18),transparent 36%),
    linear-gradient(180deg,#080c18 0%,#111827 52%,#15102a 100%);
  --grid-lines:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);
  --surface:rgba(15,23,42,.72);
  --surface-strong:rgba(15,23,42,.9);
  --line:rgba(226,232,240,.14);
  --line-soft:rgba(255,255,255,.12);
  --glass-highlight:rgba(255,255,255,.18);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.06);
  --text:#f8fafc;
  --muted:#94a3b8;
  --nav-bg:rgba(15,23,42,.68);
  --card-shadow:0 24px 80px rgba(0,0,0,.28);
  --nav-shadow:0 18px 60px rgba(0,0,0,.3);
  --field-bg:rgba(15,23,42,.78);
  --soft-panel:rgba(30,41,59,.62);
  --muted-text:#cbd5e1;
  --pre-bg:rgba(15,23,42,.72);
  --modal-bg:rgba(2,6,23,.72);
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;
  color:var(--text);
  background:var(--body-bg);
  font-feature-settings:"kern" 1;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:var(--grid-lines);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 75%);
}

nav{
  width:min(1180px,calc(100% - 32px));
  margin:16px auto 0;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:16px;
  z-index:99;
  isolation:isolate;
  border:1px solid var(--glass-highlight);
  border-radius:28px;
  background:var(--nav-bg);
  backdrop-filter:blur(38px) saturate(190%);
  -webkit-backdrop-filter:blur(38px) saturate(190%);
  box-shadow:var(--nav-shadow),var(--glass-inset);
}

nav:before,.card:after,.modal-card:before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 38%);
  opacity:.72;
}

nav>*,
.card>*,
.modal-card>*{
  position:relative;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--ink);
}

.logo img{
  width:34px;
  height:34px;
  border-radius:14px;
  padding:6px;
  background:linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
  box-shadow:0 12px 28px rgba(10,132,255,.22);
}

.menu{display:flex;gap:6px;align-items:center}
.menu a{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:10px 13px;
  border-radius:999px;
}
.menu a:hover,.menu a.active{background:rgba(10,132,255,.1);color:var(--blue)}

.mobile-btn{
  display:none;
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  border-radius:50%;
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
}

body.modal-open{
  overflow:hidden;
}

.scroll-edge{
  position:fixed;
  left:0;
  right:0;
  height:28px;
  z-index:90;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}

.scroll-edge-top{
  top:0;
  background:linear-gradient(to bottom,rgba(246,248,255,.42),rgba(246,248,255,0));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.scroll-edge-bottom{
  bottom:0;
  background:linear-gradient(to top,rgba(246,248,255,.42),rgba(246,248,255,0));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

body.night .scroll-edge-top{
  background:linear-gradient(to bottom,rgba(11,16,32,.42),rgba(11,16,32,0));
}

body.night .scroll-edge-bottom{
  background:linear-gradient(to top,rgba(11,16,32,.42),rgba(11,16,32,0));
}

.scroll-edge.visible{
  opacity:1;
}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}

.mobile-btn span{
  display:block;
  width:20px;
  height:2px;
  margin:4px auto;
  border-radius:999px;
  background:var(--ink);
  transition:transform .24s ease,opacity .18s ease;
}

.mobile-btn.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.mobile-btn.active span:nth-child(2){
  opacity:0;
}

.mobile-btn.active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
.nav-auth{display:flex;gap:8px;align-items:center}

.theme-toggle{
  width:46px;
  height:46px;
  padding:0;
  margin-top:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.theme-toggle img{
  width:22px;
  height:22px;
}

.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.logout-btn img{
  width:19px;
  height:19px;
}

.mobile-actions{display:none;align-items:center;gap:8px}
.mobile-menu-left{display:none}

section{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:56px 0}
.page{display:none}
.page.active{display:block}
.page.hero.active{display:grid}
.policy-page .title{margin-bottom:18px}
.policy-shell{padding:28px}
.policy-intro{color:var(--muted-text);line-height:1.7;margin-bottom:22px}
.policy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
.policy-block{
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  background:var(--pre-bg);
}
.policy-block h3,.policy-section h3{margin-bottom:8px}
.policy-block p,.policy-section p,.policy-section li{color:var(--muted-text);line-height:1.7}
.policy-section{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px;
}
.policy-section ul{padding-left:20px}

.hero{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:28px;
  align-items:stretch;
  min-height:calc(100vh - 118px);
  padding-top:44px;
}

.home-marquee,
.home-section-heading,
.home-stat-grid,
.home-content-grid,
.sponsor-strip{
  grid-column:1 / -1;
}

.home-marquee{
  overflow:hidden;
  border:1px solid var(--glass-highlight);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--card-shadow),var(--glass-inset);
}

.home-marquee-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  animation:homeMarquee 28s linear infinite;
}

.home-marquee span{
  padding:10px 14px;
  border-radius:999px;
  color:var(--ink);
  font-size:13px;
  font-weight:900;
  background:var(--soft-panel);
  border:1px solid var(--line);
  white-space:nowrap;
}

.home-section-heading{
  max-width:780px;
  margin-top:12px;
}

.home-section-heading span,
.home-card-kicker{
  display:inline-block;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.home-section-heading h2{
  color:var(--ink);
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
  margin-bottom:12px;
}

.home-section-heading p{
  max-width:720px;
}

.home-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.home-stat-card{
  display:grid;
  gap:8px;
}

.home-stat-card b{
  color:var(--ink);
  font-size:30px;
}

.home-stat-card span{
  color:var(--muted-text);
  line-height:1.55;
}

.home-content-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.home-process-grid,
.home-cta-card,
.home-faq-grid{
  grid-column:1 / -1;
}

.home-process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.compact-heading{
  max-width:none;
  margin-top:0;
}

.home-process-grid .compact-heading{
  grid-column:1 / -1;
}

.process-card{
  display:grid;
  gap:10px;
}

.process-card b{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple));
}

.process-card h3{
  color:var(--ink);
  font-size:21px;
}

.process-card p{
  color:var(--muted-text);
  line-height:1.6;
}

.triple-grid{
  grid-template-columns:repeat(3,1fr);
}

.home-info-card h3,
.sponsor-strip h3{
  color:var(--ink);
  font-size:24px;
  margin-bottom:14px;
}

.home-info-card ul{
  display:grid;
  gap:12px;
  padding-left:20px;
}

.home-info-card li{
  color:var(--muted-text);
  line-height:1.65;
}

.sponsor-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.sponsor-strip h3{
  margin-bottom:0;
  max-width:520px;
}

.sponsor-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.sponsor-list span{
  padding:11px 14px;
  border-radius:999px;
  color:var(--text);
  font-weight:800;
  background:var(--soft-panel);
  border:1px solid var(--line);
}

.home-cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:
    linear-gradient(135deg,rgba(10,132,255,.14),transparent 42%),
    linear-gradient(225deg,rgba(175,82,222,.12),transparent 38%),
    var(--surface);
}

.home-cta-card h3{
  color:var(--ink);
  font-size:28px;
  margin-bottom:8px;
}

.home-cta-card p{
  color:var(--muted-text);
}

.home-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.home-cta-actions button{
  width:auto;
  margin-top:0;
}

.home-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.home-faq-grid .compact-heading{
  grid-column:1 / -1;
}

.faq-card h3{
  color:var(--ink);
  font-size:21px;
  margin-bottom:8px;
}

.faq-card p{
  color:var(--muted-text);
  line-height:1.65;
}

@keyframes homeMarquee{
  to{transform:translateX(-50%)}
}

.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.eyebrow{
  width:max-content;
  max-width:100%;
  color:#075fc2;
  background:rgba(10,132,255,.12);
  border:1px solid rgba(10,132,255,.18);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:900;
  margin-bottom:18px;
}

.hero h1{
  max-width:780px;
  font-size:clamp(42px,6vw,76px);
  line-height:.94;
  letter-spacing:0;
  margin-bottom:22px;
  color:var(--ink);
}

.hero p{
  max-width:640px;
  color:var(--muted-text);
  font-size:17px;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.studio-card{
  position:relative;
  overflow:hidden;
  align-self:center;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.studio-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(10,132,255,.14),transparent 34%),
    linear-gradient(225deg,rgba(255,45,85,.12),transparent 34%);
  pointer-events:none;
}

.studio-card>*{position:relative}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}

.panel-kicker{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.status-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#147a35;
  font-size:13px;
  font-weight:800;
}

.status-dot:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--glass-highlight);
  border-radius:32px;
  padding:24px;
  box-shadow:var(--card-shadow),var(--glass-inset);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
}

input,textarea{
  width:100%;
  padding:16px 17px;
  margin-bottom:12px;
  outline:none;
  border-radius:20px;
  background:var(--field-bg);
  color:var(--ink);
  font-size:15px;
  border:1px solid var(--line);
}
input:focus,textarea:focus{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 5px rgba(10,132,255,.12)}
textarea{min-height:170px;resize:vertical}

button{
  width:100%;
  padding:14px 17px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:white;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  margin-top:8px;
  box-shadow:0 14px 30px rgba(10,132,255,.2);
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease;
}
button:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 38px rgba(10,132,255,.24)}
button:disabled{opacity:.62;cursor:not-allowed;transform:none}

.nav-auth button,.auth-actions button,.hero-actions button{
  width:auto;
  margin-top:0;
  padding:11px 16px;
}

.secondary{
  background:var(--soft-panel);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.danger{background:linear-gradient(135deg,var(--rose),var(--pink));color:white}
.hidden{display:none}

.metric-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0 12px;
}

.quota-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.metric{
  background:var(--soft-panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  box-shadow:0 10px 24px rgba(15,23,42,.06),var(--glass-inset);
}
.metric span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:8px}
.metric b{font-size:22px;color:var(--ink)}

.metric.inactive{
  border-color:rgba(248,113,113,.28);
  background:rgba(254,226,226,.72);
}

.metric.inactive span,
.metric.inactive b{
  color:#b91c1c;
}

body.night .metric.inactive{
  background:rgba(127,29,29,.24);
  border-color:rgba(248,113,113,.34);
}

body.night .metric.inactive span,
body.night .metric.inactive b{
  color:#fca5a5;
}

.usage-metric{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
}

.usage-metric b{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:var(--ink);
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
  margin-top:0;
}

.usage-metric b i{
  font-style:normal;
  font-size:11px;
  line-height:1;
  color:var(--muted);
  font-weight:800;
}

.usage-metric b span{
  display:inline-block;
  line-height:1;
}

.usage-metric small{
  width:max-content;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(10,132,255,.1);
  margin-top:8px;
  margin-bottom:10px;
}

.usage-track{
  margin-top:4px;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(16,24,40,.12);
  border:1px solid var(--line);
}

.usage-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  transition:width .3s ease,background .3s ease;
}

.usage-metric.warning .usage-fill{
  background:linear-gradient(135deg,#ff9500,#ffcc00);
}

body:not(.night) .studio-card .metric{
  background:rgba(255,255,255,.76);
  border-color:rgba(16,24,40,.1);
}

body:not(.night) .studio-card .usage-metric{
  background:rgba(255,255,255,.86);
}

.usage-metric.danger .usage-fill{
  background:linear-gradient(135deg,var(--rose),var(--pink));
}

.usage-message{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin-top:10px;
}

.usage-metric.warning .usage-message{color:#b45309}
.usage-metric.danger .usage-message{color:#b91c1c}

.auth-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--modal-bg);
  backdrop-filter:blur(24px) saturate(175%);
  padding:20px;
  z-index:999;
}
.modal.hidden{display:none}
.modal-card{
  width:100%;
  max-width:440px;
  background:
    radial-gradient(circle at top right,rgba(10,132,255,.1),transparent 28%),
    radial-gradient(circle at bottom left,rgba(175,82,222,.08),transparent 30%),
    var(--surface-strong);
  border:1px solid var(--glass-highlight);
  border-radius:34px;
  padding:28px;
  box-shadow:0 34px 110px rgba(15,23,42,.2),var(--glass-inset);
  backdrop-filter:blur(38px) saturate(190%);
  -webkit-backdrop-filter:blur(38px) saturate(190%);
  animation:modalPop .22s ease;
}
@keyframes modalPop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.modal-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}
.modal-title{font-size:30px;line-height:1.1;margin-bottom:8px}
.modal-subtitle{color:var(--muted);line-height:1.5;font-size:14px}
.close-btn{
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  background:rgba(16,24,40,.07);
  color:var(--ink);
  font-size:24px;
  line-height:1;
  flex:0 0 auto;
  margin-top:0;
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  background:rgba(16,24,40,.05);
  border:1px solid var(--line);
  border-radius:22px;
  padding:6px;
  margin-bottom:18px;
}
.auth-tabs button{margin-top:0;border-radius:999px;background:transparent;color:var(--muted);box-shadow:none}
.auth-tabs button.active{
  background:var(--surface-strong);
  color:var(--blue);
  box-shadow:0 10px 24px rgba(15,23,42,.12),var(--glass-inset);
}
.auth-message{
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.2);
  border-radius:18px;
  padding:14px 15px;
  margin-bottom:14px;
  color:var(--muted-text);
  font-size:14px;
}
.auth-message.error{
  color:#ef4444;
  background:rgba(254,226,226,.82);
  border-color:rgba(248,113,113,.5);
}
.auth-message.success{color:#059669;border-color:rgba(16,185,129,.28)}
.verify-panel{
  margin-bottom:16px;
  padding:18px;
  border:1px solid rgba(16,185,129,.22);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(16,185,129,.1),rgba(10,132,255,.05)),
    rgba(255,255,255,.42);
  box-shadow:var(--glass-inset);
}
.verify-panel h3{font-size:19px;margin-bottom:6px}
.verify-panel p{color:var(--muted-text);font-size:14px;line-height:1.6}
.verify-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.verify-actions a,
.verify-actions button{
  flex:0 1 auto;
  min-width:138px;
  text-align:center;
  text-decoration:none;
  border-radius:999px;
  padding:9px 14px;
  font-size:14px;
}
.verify-actions a{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  font-weight:900;
  box-shadow:0 14px 30px rgba(10,132,255,.18);
}

.verify-actions button{
  width:auto;
}
.banned-card{max-width:420px}
.banned-modal{z-index:1001}
.banned-note{
  margin:18px 0;
  padding:14px;
  border:1px solid rgba(248,113,113,.45);
  border-radius:18px;
  color:#fecaca;
  background:rgba(127,29,29,.22);
}
.maintenance-modal{
  background:
    radial-gradient(circle at 50% 18%,rgba(10,132,255,.18),transparent 30%),
    radial-gradient(circle at 72% 72%,rgba(175,82,222,.14),transparent 28%),
    var(--modal-bg);
}
.maintenance-card{
  max-width:470px;
  overflow:hidden;
  isolation:isolate;
  padding:24px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,248,255,.84));
  border-color:rgba(255,255,255,.84);
  box-shadow:
    0 32px 90px rgba(10,132,255,.16),
    0 18px 50px rgba(15,23,42,.18),
    var(--glass-inset);
}
body.night .maintenance-card{
  background:
    linear-gradient(145deg,rgba(18,27,49,.96),rgba(8,14,30,.9));
  border-color:rgba(255,255,255,.16);
}
.maintenance-card:after{
  content:"";
  position:absolute;
  inset:auto -20% -45% auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(50,173,230,.28),transparent 70%);
  filter:blur(2px);
  pointer-events:none;
  z-index:-1;
}
.maintenance-orb{
  position:absolute !important;
  top:-74px;
  right:-56px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 28%),
    linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
  opacity:.9;
  filter:blur(2px);
  box-shadow:0 24px 80px rgba(10,132,255,.28);
}
.maintenance-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.maintenance-icon{
  position:relative;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(10,132,255,.16),rgba(175,82,222,.18));
  border:1px solid rgba(10,132,255,.2);
  box-shadow:0 14px 30px rgba(10,132,255,.12),var(--glass-inset);
}
.maintenance-icon:before,
.maintenance-icon:after,
.maintenance-icon span{
  content:"";
  position:absolute;
  border-radius:999px;
}
.maintenance-icon:before{
  width:26px;
  height:26px;
  border:2px solid var(--blue);
  border-top-color:transparent;
  animation:maintenanceSpin 1.7s linear infinite;
}
.maintenance-icon:after{
  width:8px;
  height:8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 0 20px rgba(10,132,255,.48);
}
.maintenance-chip{
  width:max-content;
  padding:8px 11px;
  border-radius:999px;
  color:var(--blue);
  background:rgba(10,132,255,.1);
  border:1px solid rgba(10,132,255,.16);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
}
.maintenance-card .modal-top{
  margin-bottom:16px;
}
.maintenance-card .modal-title{
  font-size:32px;
  letter-spacing:-.03em;
}
.maintenance-card .modal-subtitle{
  max-width:330px;
  font-size:15px;
}
.maintenance-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(10,132,255,.16);
  border-radius:22px;
  color:var(--text);
  background:
    linear-gradient(135deg,rgba(10,132,255,.08),rgba(175,82,222,.08)),
    rgba(255,255,255,.42);
  box-shadow:var(--glass-inset);
}
body.night .maintenance-note{
  background:
    linear-gradient(135deg,rgba(10,132,255,.14),rgba(175,82,222,.12)),
    rgba(15,23,42,.5);
}
.maintenance-note b{
  display:block;
  margin-bottom:4px;
  font-size:15px;
}
.maintenance-note p{
  color:var(--muted-text);
  line-height:1.55;
  font-size:14px;
}
.maintenance-admin-info{
  margin-top:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(175,82,222,.18);
  background:
    linear-gradient(135deg,rgba(175,82,222,.09),rgba(10,132,255,.08)),
    rgba(255,255,255,.46);
  box-shadow:var(--glass-inset);
}
body.night .maintenance-admin-info{
  border-color:rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(175,82,222,.14),rgba(10,132,255,.12)),
    rgba(15,23,42,.48);
}
.maintenance-admin-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.maintenance-admin-head b{
  font-size:15px;
}
.maintenance-admin-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  box-shadow:0 0 18px rgba(175,82,222,.42);
}
.maintenance-admin-info p{
  color:var(--text);
  line-height:1.6;
  font-size:14px;
  padding-left:21px;
}
.maintenance-admin-info.empty p{
  color:var(--muted);
}
.maintenance-countdown{
  margin-top:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(52,199,89,.18);
  background:
    linear-gradient(135deg,rgba(52,199,89,.1),rgba(10,132,255,.08)),
    rgba(255,255,255,.46);
  box-shadow:var(--glass-inset);
}
body.night .maintenance-countdown{
  border-color:rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(52,199,89,.13),rgba(10,132,255,.12)),
    rgba(15,23,42,.48);
}
.maintenance-countdown-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  box-shadow:0 0 18px rgba(52,199,89,.42);
}
.maintenance-countdown strong{
  display:block;
  margin-left:21px;
  color:var(--ink);
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.maintenance-countdown p{
  margin-top:6px;
  margin-left:21px;
  color:var(--muted-text);
  line-height:1.5;
  font-size:14px;
}
.maintenance-countdown.empty strong{
  color:var(--muted);
}
.maintenance-game-btn{
  margin-top:16px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  box-shadow:0 16px 34px rgba(175,82,222,.22);
}
.game-modal{z-index:1002}
.game-card{
  max-width:860px;
  padding:24px;
}
.game-top{
  margin-bottom:14px;
}
.game-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.game-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.game-score{
  padding:10px 14px;
  border-radius:999px;
  background:var(--soft-panel);
  border:1px solid var(--line);
  font-weight:900;
}
.game-score b{
  color:var(--blue);
}
.game-audio-btn{
  width:auto;
  margin-top:0;
  padding:10px 14px;
  background:var(--soft-panel);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
}
.game-modal.fullscreen-active .game-card{
  width:min(960px,calc(100vw - 24px));
  max-width:none;
}
.game-modal.fullscreen-active .runner-stage{
  height:min(68vh,560px);
}
.runner-stage{
  position:relative;
  height:360px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--glass-highlight);
  background:
    linear-gradient(180deg,rgba(10,132,255,.16),rgba(175,82,222,.1)),
    var(--pre-bg);
  box-shadow:var(--glass-inset);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.runner-stage *,
.game-card{
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.runner-stage.day{
  background:
    linear-gradient(180deg,rgba(125,211,252,.44),rgba(254,240,138,.16)),
    var(--pre-bg);
}
.runner-stage.night{
  background:
    linear-gradient(180deg,rgba(15,23,42,.92),rgba(30,41,59,.72)),
    var(--pre-bg);
}
.runner-stage.foggy{
  background:
    linear-gradient(180deg,rgba(203,213,225,.36),rgba(148,163,184,.2)),
    var(--pre-bg);
}
.runner-stage.sandstorm{
  background:
    linear-gradient(180deg,rgba(251,191,36,.22),rgba(180,83,9,.18)),
    var(--pre-bg);
}
.runner-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.8),transparent 12%),
    radial-gradient(circle at 72% 18%,rgba(255,255,255,.6),transparent 10%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 56%);
}
.runner-stars{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 12% 18%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 24% 30%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 62% 16%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 78% 28%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 88% 12%,#fff 0 2px,transparent 3px);
}
.runner-stage.night .runner-stars{opacity:1}
.runner-cloud{
  position:absolute;
  width:72px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  opacity:.8;
}
.runner-cloud:before,
.runner-cloud:after{
  content:"";
  position:absolute;
  bottom:0;
  border-radius:50%;
  background:inherit;
}
.runner-cloud:before{
  left:12px;
  width:28px;
  height:28px;
}
.runner-cloud:after{
  right:12px;
  width:36px;
  height:36px;
}
.cloud-one{
  top:38px;
  left:18%;
  animation:cloudDrift 8s linear infinite;
}
.cloud-two{
  top:72px;
  right:12%;
  transform:scale(.82);
  animation:cloudDrift 11s linear infinite reverse;
}
.runner-stage.night .runner-cloud{
  opacity:.22;
}
.runner-fog,
.runner-sand{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.runner-fog{
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent),
    linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  background-size:220px 100%,280px 100%;
  animation:fogMove 5s linear infinite;
}
.runner-stage.foggy .runner-fog{opacity:1}
.runner-sand{
  background:
    linear-gradient(110deg,transparent 0 35%,rgba(251,191,36,.26) 42%,transparent 49%),
    linear-gradient(110deg,transparent 0 52%,rgba(255,255,255,.18) 58%,transparent 64%);
  background-size:180px 100%,240px 100%;
  animation:sandMove .9s linear infinite;
}
.runner-stage.sandstorm .runner-sand{opacity:1}
.runner-ground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:54px;
  background:
    linear-gradient(90deg,rgba(10,132,255,.24) 50%,transparent 50%);
  background-size:28px 100%;
  border-top:1px solid rgba(10,132,255,.22);
  animation:groundMove .45s linear infinite;
}
.runner-player{
  position:absolute;
  left:42px;
  bottom:54px;
  width:78px;
  height:62px;
}
.horse-body{
  position:absolute;
  left:16px;
  bottom:8px;
  width:48px;
  height:28px;
  border-radius:22px 24px 18px 18px;
  background:linear-gradient(135deg,#a16207,#78350f);
  box-shadow:0 14px 24px rgba(120,53,15,.18);
}
.horse-body:before{
  content:"";
  position:absolute;
  right:-10px;
  top:1px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:inherit;
}
.horse-head{
  position:absolute;
  right:2px;
  bottom:25px;
  width:26px;
  height:24px;
  border-radius:16px 16px 14px 14px;
  background:linear-gradient(135deg,#b45309,#78350f);
}
.horse-head:before{
  content:"";
  position:absolute;
  right:1px;
  top:-8px;
  width:9px;
  height:13px;
  border-radius:999px 999px 0 0;
  background:#78350f;
  transform:rotate(18deg);
}
.horse-head:after{
  content:"";
  position:absolute;
  right:5px;
  top:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
}
.rider-body{
  position:absolute;
  left:32px;
  bottom:31px;
  width:18px;
  height:24px;
  border-radius:10px 10px 8px 8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
}
.rider-head{
  position:absolute;
  left:31px;
  bottom:51px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#f2c6a0;
}
.rider-head:before{
  content:"";
  position:absolute;
  top:-3px;
  left:1px;
  width:18px;
  height:8px;
  border-radius:999px 999px 5px 5px;
  background:#111827;
}
.horse-leg{
  position:absolute;
  bottom:-2px;
  width:10px;
  height:20px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(180deg,#92400e,#78350f);
}
.leg-one{left:24px}
.leg-two{left:48px}
.runner-player:not(.jumping) .leg-one{
  animation:runnerLeg .28s ease-in-out infinite alternate;
}
.runner-player:not(.jumping) .leg-two{
  animation:runnerLeg .28s ease-in-out infinite alternate-reverse;
}
.runner-obstacle{
  position:absolute;
  right:-34px;
  bottom:54px;
  width:34px;
  height:48px;
  box-shadow:0 14px 26px rgba(15,23,42,.16);
}
.runner-obstacle.cactus{
  border-radius:16px 16px 10px 10px;
  background:linear-gradient(180deg,#34d399,#15803d);
}
.runner-obstacle.cactus:before,
.runner-obstacle.cactus span{
  content:"";
  position:absolute;
  bottom:8px;
  width:10px;
  height:25px;
  border-radius:999px;
  background:inherit;
}
.runner-obstacle.cactus:before{
  left:-7px;
  transform:rotate(-28deg);
}
.runner-obstacle.cactus span{
  right:-7px;
  transform:rotate(28deg);
}
.runner-obstacle.crate{
  height:36px;
  bottom:54px;
  border-radius:8px;
  background:
    linear-gradient(45deg,transparent 46%,rgba(255,255,255,.35) 47%,rgba(255,255,255,.35) 53%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,rgba(255,255,255,.35) 47%,rgba(255,255,255,.35) 53%,transparent 54%),
    linear-gradient(135deg,#a16207,#78350f);
  border:2px solid rgba(69,26,3,.35);
}
.runner-obstacle.crate:before,
.runner-obstacle.crate span{
  display:none;
}
.runner-player.jumping{
  animation:runnerJump .72s cubic-bezier(.2,.75,.28,1);
}
@keyframes runnerJump{
  0%,100%{transform:translateY(0)}
  42%,58%{transform:translateY(-118px)}
}
.game-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:8px;
  text-align:center;
  background:linear-gradient(180deg,rgba(2,6,23,.16),rgba(2,6,23,.72));
}
.game-overlay.hidden{
  display:none;
}
.game-overlay b{
  font-size:28px;
  color:#fff;
}
.game-overlay span{
  color:#e2e8f0;
}
.game-overlay button{
  width:auto;
  margin:8px auto 0;
}
.game-intro{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-content:center;
  gap:10px;
  padding:24px;
  text-align:center;
  background:linear-gradient(180deg,rgba(2,6,23,.18),rgba(2,6,23,.74));
}
.game-intro.hidden{display:none}
.game-intro span{
  color:#dbeafe;
  font-size:15px;
}
.game-intro b{
  max-width:360px;
  color:#fff;
  font-size:24px;
  line-height:1.25;
}
.game-intro button{
  width:auto;
  margin:8px auto 0;
}
.runner-jump-btn{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:3;
  width:auto;
  min-width:96px;
  margin:0;
  padding:12px 16px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
}
.game-overlay:not(.hidden) ~ .runner-jump-btn,
.game-intro:not(.hidden) ~ .runner-jump-btn{
  display:none;
}
@keyframes groundMove{
  to{background-position:-28px 0}
}
@keyframes runnerLeg{
  to{transform:translateY(4px)}
}
@keyframes cloudDrift{
  0%{transform:translateX(0)}
  50%{transform:translateX(16px)}
  100%{transform:translateX(0)}
}
@keyframes fogMove{
  to{background-position:-220px 0,-280px 0}
}
@keyframes sandMove{
  to{background-position:-180px 0,-240px 0}
}
.maintenance-pulse{
  flex:0 0 auto;
  width:11px;
  height:11px;
  margin-top:5px;
  border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 0 0 rgba(10,132,255,.34);
  animation:maintenancePulse 1.8s ease-out infinite;
}
@keyframes maintenanceSpin{
  to{transform:rotate(360deg)}
}
@keyframes maintenancePulse{
  0%{box-shadow:0 0 0 0 rgba(10,132,255,.34)}
  70%{box-shadow:0 0 0 13px rgba(10,132,255,0)}
  100%{box-shadow:0 0 0 0 rgba(10,132,255,0)}
}
.auth-footer{text-align:center;color:var(--muted);font-size:14px;margin-top:16px}
.auth-footer span{color:var(--blue);font-weight:900;cursor:pointer}

#authModal input{
  background:rgba(255,255,255,.72);
  border-color:rgba(16,24,40,.1);
}

#authModal #authSubmitBtn{
  margin-top:14px;
  min-height:60px;
  font-size:16px;
}

body.night #authModal input{
  background:rgba(15,23,42,.72);
  border-color:rgba(255,255,255,.12);
}

body.night .verify-panel{
  background:
    linear-gradient(135deg,rgba(16,185,129,.14),rgba(10,132,255,.08)),
    rgba(15,23,42,.48);
}

.api-box,pre{
  background:var(--pre-bg);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  margin-top:12px;
  color:var(--text);
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:var(--glass-inset);
}

.chat-shell{
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:620px;
  padding:0;
  overflow:hidden;
}

.chat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
  border-bottom:1px solid var(--line-soft);
  background:var(--soft-panel);
}

.chat-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.chat-icon{
  width:44px;
  height:44px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 14px 30px rgba(10,132,255,.18);
}

.chat-icon img{
  width:25px;
  height:25px;
}

.chat-title h3{
  color:var(--ink);
  font-size:20px;
  margin-bottom:4px;
}

.chat-title p{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.chat-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#147a35;
  font-size:13px;
  font-weight:900;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(52,199,89,.12);
  border:1px solid rgba(52,199,89,.2);
}

.chat-status:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 16px var(--green);
}

.chat-messages{
  min-height:360px;
  max-height:520px;
  overflow:auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:
    linear-gradient(135deg,rgba(10,132,255,.08),transparent 38%),
    linear-gradient(225deg,rgba(255,45,85,.07),transparent 36%);
}

.chat-bubble{
  width:fit-content;
  max-width:min(78%,720px);
  padding:14px 16px;
  border-radius:22px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}

.chat-bubble.ai{
  align-self:flex-start;
  color:var(--text);
  background:var(--pre-bg);
  border:1px solid var(--glass-highlight);
  border-bottom-left-radius:8px;
  box-shadow:0 14px 30px rgba(15,23,42,.08),var(--glass-inset);
}

.chat-model-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 24px 0;
}

.chat-model-bar label{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.chat-model-bar select{
  min-width:170px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:11px 14px;
  background:var(--soft-panel);
  color:var(--ink);
  font:inherit;
  font-weight:700;
  outline:none;
}

.chat-model-bar select:focus{
  border-color:rgba(10,132,255,.45);
  box-shadow:0 0 0 4px rgba(10,132,255,.12);
}

.masked-email-line{
  color:var(--muted-text);
}

.api-key-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.api-key-title{
  margin-top:14px;
  font-size:18px;
}

.api-key-row .api-box{
  margin-top:10px;
}

.api-box.masked{
  letter-spacing:.16em;
}

.api-key-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
}

.api-key-actions button{
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--blue);
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
}

.api-key-actions img{
  width:21px;
  height:21px;
}

.student-verify-card{
  margin-top:14px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(10,132,255,.16);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(10,132,255,.1),rgba(175,82,222,.08));
}

.student-verify-card span{
  display:block;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.student-verify-card b{
  display:block;
  margin:5px 0;
  color:var(--ink);
}

.student-verify-card p,
.student-note{
  color:var(--muted-text);
  font-size:13px;
  line-height:1.5;
}

.student-verify-card button{
  width:auto;
  margin:0;
  flex:0 0 auto;
}

.student-note{
  margin:-2px 0 12px;
}

.student-result-actions{
  display:flex;
  justify-content:flex-end;
}

.student-result-actions button{
  width:auto;
  min-width:140px;
}

.program-popup{
  position:fixed;
  inset:0;
  z-index:1250;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,6,23,.58);
}

.program-popup.hidden{
  display:none;
}

.program-popup-card{
  position:relative;
  width:min(430px,100%);
  animation:modalPop .22s ease;
}

.program-popup-close{
  position:absolute;
  top:-12px;
  right:-12px;
  z-index:1;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  font-size:24px;
}

.program-popup-image-btn{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:28px;
  background:transparent;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.program-popup-image-btn img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:900px){
  .program-popup-card{
    width:min(360px,100%);
  }
}

.chat-bubble.ai.has-image{
  width:fit-content;
  max-width:min(360px,92%);
}


.chat-bubble.user{
  align-self:flex-end;
  color:white;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-bottom-right-radius:8px;
}

.chat-bubble.user.has-image{
  width:fit-content;
  max-width:min(360px,92%);
}

.chat-bubble img.chat-uploaded-image{
  display:block;
  max-width:min(260px,100%);
  margin-bottom:10px;
  border-radius:16px;
}

.chat-bubble img.chat-generated-image{
  display:block;
  max-width:min(320px,100%);
  border-radius:18px;
}

.chat-generated-image-wrap{
  display:grid;
  gap:10px;
  margin-bottom:10px;
}

.download-image-btn{
  width:max-content;
  padding:9px 14px;
  border-radius:999px;
  color:var(--blue);
  background:rgba(10,132,255,.1);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}


.chat-bubble.error{
  color:#991b1b;
  background:rgba(254,226,226,.82);
  border:1px solid rgba(248,113,113,.42);
}

.chat-bubble.ai{
  white-space:normal;
}

.chat-composer button{
  position:relative;
}

.send-spinner{
  display:none;
  width:22px;
  height:22px;
  border:3px solid rgba(255,255,255,.38);
  border-top-color:#fff;
  border-radius:50%;
  animation:sendSpin .7s linear infinite;
}

.chat-composer button.loading .send-icon{display:none}
.chat-composer button.loading .send-spinner{display:block}
.chat-composer button:disabled{cursor:wait;opacity:.92}

@keyframes sendSpin{
  to{transform:rotate(360deg)}
}

.chat-bubble.typing{
  display:flex;
  align-items:center;
  gap:10px;
}

.typing-dots{
  display:flex;
  align-items:center;
  gap:4px;
}

.typing-dots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--blue);
  animation:typingPulse 1s infinite ease-in-out;
}

.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}

@keyframes typingPulse{
  0%,80%,100%{opacity:.35;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-4px)}
}

.chat-text{
  white-space:pre-wrap;
  word-break:break-word;
}

.inline-code{
  padding:2px 6px;
  border-radius:7px;
  background:rgba(10,132,255,.12);
  color:var(--blue);
  font-family:"SF Mono","Menlo","Monaco","Consolas","Liberation Mono",monospace;
  font-size:.92em;
}

.code-block{
  min-width:min(100%,520px);
  margin:12px 0;
  overflow:hidden;
  border:1px solid var(--glass-highlight);
  border-radius:18px;
  background:rgba(2,6,23,.88);
  box-shadow:var(--glass-inset);
}

.code-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  color:#cbd5e1;
  background:rgba(15,23,42,.92);
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:12px;
  font-weight:900;
}

.copy-code-btn{
  width:auto;
  padding:7px 10px;
  margin-top:0;
  border-radius:999px;
  color:#e0f2fe;
  background:rgba(10,132,255,.18);
  box-shadow:none;
  font-size:12px;
}

.code-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.run-code-btn{
  width:auto;
  padding:7px 10px;
  margin-top:0;
  border-radius:999px;
  color:#dcfce7;
  background:rgba(52,199,89,.22);
  box-shadow:none;
  font-size:12px;
}

.code-block pre{
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#e5e7eb;
  box-shadow:none;
}

.code-block code{
  font-family:"SF Mono","Menlo","Monaco","Consolas","Liberation Mono",monospace;
  font-size:13px;
  line-height:1.65;
}

.html-preview-card{
  width:100%;
  max-width:980px;
  height:min(760px,calc(100vh - 44px));
  display:grid;
  grid-template-rows:auto 1fr;
}

.html-preview-frame{
  width:100%;
  height:100%;
  border:1px solid var(--line);
  border-radius:22px;
  background:white;
}

.speak-btn{
  width:auto;
  min-width:96px;
  padding:9px 12px;
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--blue);
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
  font-size:13px;
}

.speak-btn img{
  width:17px;
  height:17px;
}

.chat-composer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  padding:18px;
  border-top:1px solid var(--line-soft);
  background:var(--soft-panel);
}

#chatImageInput{display:none}

.chat-image-preview{
  padding:0 18px 14px;
  background:var(--soft-panel);
}

.chat-image-preview-wrap{
  position:relative;
  width:max-content;
}

.chat-image-preview img{
  display:block;
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line-soft);
}

.chat-image-preview button{
  position:absolute;
  top:-8px;
  right:-8px;
  width:24px;
  height:24px;
  padding:0;
  margin:0;
  border-radius:50%;
  background:#ef4444;
}

.chat-composer .upload-chat-btn{
  background:#334155;
}

.chat-composer textarea{
  min-height:54px;
  max-height:150px;
  margin-bottom:0;
  border-radius:24px;
}

.chat-composer button{
  width:54px;
  height:54px;
  padding:0;
  margin-top:0;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.chat-composer button img{
  width:23px;
  height:23px;
}

.chat-hint{
  padding:0 24px 18px;
  color:var(--muted);
  font-size:13px;
  background:var(--soft-panel);
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature h3{color:var(--ink);margin-bottom:10px}
.feature p,.doc p{color:var(--muted-text);line-height:1.65}
.title{font-size:34px;margin-bottom:22px;letter-spacing:0}
.doc h3{margin-top:25px;margin-bottom:10px;color:var(--blue)}

.feature-intro{
  margin-bottom:18px;
}

.feature-intro h3{
  max-width:760px;
  color:var(--ink);
  font-size:28px;
  line-height:1.2;
  margin-bottom:10px;
}

.feature-intro p{
  max-width:760px;
  color:var(--muted-text);
  line-height:1.7;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.feature-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}

.feature-highlight{
  display:grid;
  gap:10px;
}

.feature-highlight span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
}

.feature-highlight h3{
  color:var(--ink);
  font-size:22px;
}

.feature-highlight p{
  color:var(--muted-text);
  line-height:1.65;
}

.docs-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:20px;
  align-items:start;
}

.docs-nav{
  display:grid;
  gap:8px;
  padding:14px;
  position:sticky;
  top:96px;
  border-radius:28px;
  background:var(--surface);
  border:1px solid var(--glass-highlight);
  box-shadow:var(--glass-inset);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.docs-nav-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 8px 12px;
}

.docs-nav-head span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.docs-nav-head b{
  font-size:18px;
  color:var(--ink);
}

.docs-nav button{
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:10px 12px;
  text-align:left;
  border-radius:22px;
  color:var(--text);
  background:transparent;
  box-shadow:none;
}

.docs-nav button span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.docs-nav button b{
  font-size:15px;
  font-weight:700;
}

.docs-nav button small{
  color:var(--muted);
  font-size:12px;
}

.docs-nav-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  border-radius:14px;
  background:var(--surface-strong);
  color:var(--blue);
  font-weight:700;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.docs-nav button.active{
  background:rgba(10,132,255,.12);
  color:var(--ink);
}

.docs-nav button.active .docs-nav-icon{
  color:white;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
}

.docs-content{
  border-radius:30px;
  background:var(--surface);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.docs-intro-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  margin-bottom:16px;
}

.docs-intro-block,
.docs-guide-card{
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  background:var(--pre-bg);
}

body.night .docs-nav button.active{
  background:rgba(10,132,255,.2);
}

body.night .docs-nav-icon{
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

body.night .lang-tabs button{
  background:rgba(255,255,255,.06);
}

body.night .lang-tabs button.active{
  background:linear-gradient(135deg,var(--blue),var(--purple));
}

body.night .journey-progress{
  background:rgba(255,255,255,.08);
}

.docs-intro-block span{
  display:inline-block;
  margin-bottom:8px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.docs-intro-block h3{
  margin:0 0 8px;
}

.docs-intro-block p,
.docs-intro-block li,
.docs-guide-card p{
  color:var(--muted-text);
  line-height:1.65;
}

.docs-intro-block ol{
  padding-left:20px;
}

.docs-guide-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}

.docs-guide-card h4{
  margin:0 0 8px;
}

.docs-content h3{margin-top:0}
.docs-content h4{margin-top:20px;margin-bottom:10px;color:var(--ink)}
.docs-content p{margin-bottom:18px}
.doc-panel{display:none}
.doc-panel.active{display:block}

.lang-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 12px;
}

.lang-tabs button{
  width:auto;
  min-height:auto;
  margin:0;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  color:var(--text);
  box-shadow:none;
}

.lang-tabs button.active{
  color:white;
  background:linear-gradient(135deg,var(--ink),#334155);
}

.lang-code{display:none}
.lang-code.active{display:block}

.about-layout{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  gap:18px;
  align-items:stretch;
}

.about-profile{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.creator-avatar{
  width:120px;
  height:120px;
  border-radius:28px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
  box-shadow:0 18px 42px rgba(10,132,255,.22);
}

.creator-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-profile h3,.about-detail h3{
  color:var(--ink);
  font-size:28px;
  margin:8px 0 12px;
}

.about-profile .creator-name{
  font-size:34px;
  line-height:1.1;
  margin:0 0 10px;
}

.creator-role{
  color:var(--muted);
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
}

.about-profile .creator-brand{
  color:var(--ink);
  font-size:20px;
  font-weight:800;
}

.about-profile p,.about-detail p{
  color:var(--muted-text);
  line-height:1.75;
}

.developer-journey{
  margin-top:28px;
}

.journey-timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-top:18px;
}

.journey-item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

.journey-item:before{
  content:"";
  position:absolute;
  inset:auto -30% -42% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(10,132,255,.16),transparent 70%);
  pointer-events:none;
}

.journey-item b{
  width:max-content;
  padding:8px 11px;
  border-radius:999px;
  color:var(--blue);
  background:rgba(10,132,255,.12);
  border:1px solid rgba(10,132,255,.18);
  font-size:13px;
}

.journey-item h3{
  color:var(--ink);
  font-size:20px;
  line-height:1.25;
}

.journey-item p{
  color:var(--muted-text);
  line-height:1.65;
}

.journey-progress{
  margin-top:auto;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(16,24,40,.12);
  border:1px solid var(--line);
}

.journey-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--blue),var(--cyan),var(--purple));
  box-shadow:0 0 18px rgba(10,132,255,.28);
}

.journey-item small{
  color:var(--muted);
  font-weight:800;
}

.developer-achievements{
  margin-top:28px;
}

.achievement-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:18px;
}

.achievement-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;
}

.achievement-image{
  min-height:150px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(10,132,255,.14),transparent 45%),
    linear-gradient(225deg,rgba(175,82,222,.12),transparent 42%),
    var(--pre-bg);
  border:1px solid var(--line);
}

.achievement-image img{
  width:72px;
  height:72px;
}

.achievement-content{
  display:grid;
  gap:8px;
}

.achievement-content span{
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  background:rgba(10,132,255,.12);
  border:1px solid rgba(10,132,255,.18);
}

.achievement-content h3{
  color:var(--ink);
  font-size:21px;
  line-height:1.25;
}

.achievement-content p{
  color:var(--muted-text);
  line-height:1.65;
}

.social-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}

.social-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:14px 16px;
  text-decoration:none;
  color:var(--ink);
  font-weight:900;
  background:var(--soft-panel);
  border:1px solid var(--glass-highlight);
  border-radius:20px;
  box-shadow:var(--glass-inset);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.social-link:hover{
  transform:translateY(-2px);
  border-color:rgba(10,132,255,.24);
  box-shadow:0 16px 34px rgba(15,23,42,.1);
}

.social-link img{
  width:24px;
  height:24px;
  flex:0 0 auto;
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}

.plan-card.featured{
  border-color:rgba(10,132,255,.34);
  box-shadow:0 28px 90px rgba(10,132,255,.18),var(--glass-inset);
}

.plan-card.featured:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(10,132,255,.13),transparent 38%),linear-gradient(225deg,rgba(175,82,222,.11),transparent 34%);
  pointer-events:none;
}

.plan-card>*{position:relative}

.plan-badge{
  width:max-content;
  max-width:100%;
  padding:8px 11px;
  border-radius:999px;
  color:#075fc2;
  background:rgba(10,132,255,.12);
  border:1px solid rgba(10,132,255,.18);
  font-size:12px;
  font-weight:900;
}

.plan-badge.current{
  color:#147a35;
  background:rgba(52,199,89,.12);
  border-color:rgba(52,199,89,.22);
}

.plan-card h3{
  color:var(--ink);
  font-size:28px;
}

.plan-price{
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.plan-price b{
  color:var(--ink);
  font-size:38px;
  line-height:1;
}

.plan-price span{
  color:var(--muted);
  font-weight:800;
  padding-bottom:5px;
}

.plan-card p{
  color:var(--muted-text);
  line-height:1.65;
}

.plan-list{
  display:grid;
  gap:10px;
  margin:4px 0;
}

.plan-list div{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--text);
  line-height:1.45;
  font-weight:700;
}

.plan-list img{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin-top:2px;
}

.plan-card button{
  margin-top:auto;
}

.payment-summary{
  display:grid;
  gap:10px;
  padding:14px;
  margin-bottom:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--soft-panel);
  box-shadow:var(--glass-inset);
}

.payment-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--muted-text);
  font-size:14px;
  font-weight:800;
}

.payment-row b{
  color:var(--ink);
  text-align:right;
}

.payment-qr{
  display:grid;
  place-items:center;
  min-height:250px;
  padding:18px;
  border:1px solid var(--glass-highlight);
  border-radius:24px;
  background:var(--pre-bg);
  box-shadow:var(--glass-inset);
}

.payment-qr canvas{
  width:220px;
  height:220px;
  max-width:100%;
}

.payment-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  margin-top:14px;
}

.rating-stars{
  display:flex;
  gap:8px;
  margin:12px 0 16px;
}

.rating-star{
  width:48px;
  height:48px;
  padding:0;
  margin-top:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
}

.rating-star img{
  width:26px;
  height:26px;
  opacity:.45;
  transition:opacity .18s ease,transform .18s ease;
}

.rating-star.active img,
.rating-star:hover img{
  opacity:1;
  transform:scale(1.08);
}

.review-actions{
  display:flex;
  gap:10px;
}

.review-actions button{
  margin-top:0;
}

footer{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto 20px;
  padding:18px 22px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  border:1px solid var(--glass-highlight);
  border-radius:28px;
  background:var(--surface);
  box-shadow:var(--glass-inset);
}
.footer-brand{
  display:grid;
  gap:4px;
}
.footer-brand span{
  color:var(--text);
  font-weight:800;
}
.footer-brand small{
  color:var(--muted);
  font-size:12px;
}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{
  color:var(--blue);
  font-weight:800;
  text-decoration:none;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(10,132,255,.08);
  border:1px solid rgba(10,132,255,.12);
}
.footer-links a:hover{
  background:rgba(10,132,255,.14);
}

.cs-widget{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}

.cs-wave{
  position:absolute;
  right:4px;
  bottom:4px;
  width:62px;
  height:62px;
  border-radius:50%;
  background:rgba(10,132,255,.24);
  animation:csWave 2s ease-out infinite;
  pointer-events:none;
}

.cs-launcher{
  position:relative;
  width:64px;
  height:64px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 18px 40px rgba(10,132,255,.3);
}

.cs-launcher img{
  width:27px;
  height:27px;
}

.cs-launcher span{
  position:absolute;
  right:-2px;
  bottom:-2px;
  min-width:24px;
  height:24px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  background:var(--pink);
  border:2px solid var(--surface-strong);
}

.cs-chat{
  width:min(360px,calc(100vw - 28px));
  overflow:hidden;
  border:1px solid var(--glass-highlight);
  border-radius:28px;
  background:var(--surface-strong);
  box-shadow:0 28px 80px rgba(15,23,42,.2),var(--glass-inset);
  backdrop-filter:blur(28px) saturate(180%);
}

.cs-chat-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px;
  background:linear-gradient(135deg,rgba(10,132,255,.16),rgba(175,82,222,.12));
  border-bottom:1px solid var(--line);
}

.cs-chat-head b{
  display:block;
  color:var(--ink);
  font-size:18px;
}

.cs-chat-head span{
  color:var(--muted);
  font-size:13px;
}

.cs-chat-head button{
  width:34px;
  height:34px;
  padding:0;
  margin:0;
  border-radius:50%;
  color:var(--ink);
  background:var(--soft-panel);
  box-shadow:none;
  font-size:22px;
}

.cs-chat-body{
  max-height:260px;
  overflow:auto;
  display:grid;
  gap:10px;
  padding:16px;
}

.cs-message{
  width:fit-content;
  max-width:88%;
  padding:12px 14px;
  border-radius:18px;
  line-height:1.55;
  font-size:14px;
}

.cs-message.bot{
  color:var(--text);
  background:var(--pre-bg);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
}

.cs-message.user{
  justify-self:end;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-bottom-right-radius:6px;
}

.cs-message.typing{
  display:flex;
  align-items:center;
  gap:8px;
}

.cs-typing-dots{
  display:flex;
  align-items:center;
  gap:4px;
}

.cs-typing-dots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--blue);
  animation:csTypingPulse 1s infinite ease-in-out;
}

.cs-typing-dots i:nth-child(2){animation-delay:.15s}
.cs-typing-dots i:nth-child(3){animation-delay:.3s}

.cs-quick-list{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:0 16px 14px;
}

.cs-quick-list button{
  width:auto;
  min-width:max-content;
  margin:0;
  padding:10px 12px;
  color:var(--text);
  background:var(--soft-panel);
  border:1px solid var(--line);
  box-shadow:none;
  font-size:12px;
}

.cs-input-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
}

.cs-input-row input{
  min-width:0;
  margin:0;
  padding:13px 14px;
  border-radius:18px;
}

.cs-input-row button{
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.cs-input-row button img{
  width:20px;
  height:20px;
}

@keyframes csWave{
  0%{transform:scale(.8);opacity:.8}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

@keyframes csTypingPulse{
  0%,80%,100%{opacity:.35;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-4px)}
}

.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:1300;
  transform:translate(-50%,18px);
  min-width:min(280px,calc(100vw - 32px));
  padding:14px 18px;
  text-align:center;
  color:#fff;
  font-weight:900;
  border-radius:999px;
  background:linear-gradient(135deg,var(--ink),#334155);
  box-shadow:0 18px 42px rgba(15,23,42,.24);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

body.night .toast{
  background:linear-gradient(135deg,var(--blue),var(--purple));
}

@media(max-width:900px){
  nav{top:10px;width:calc(100% - 20px);margin-top:10px;position:sticky;justify-content:center;min-height:70px}
  .logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-size:15px;
    max-width:calc(100% - 190px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .logo img{display:none}
  section{width:calc(100% - 24px);padding:38px 0}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:24px;gap:20px}
  .hero-copy{text-align:left;align-items:flex-start}
  .hero h1{font-size:36px;line-height:1}
  .hero p{font-size:15px;line-height:1.7}
  .hero-actions{justify-content:flex-start}
  .studio-card{min-height:auto}
  .card{padding:18px;border-radius:24px}
  .home-marquee-track{animation-duration:22s}
  .home-section-heading{text-align:left;margin-left:0;margin-right:0}
  .home-section-heading h2{font-size:28px}
  .home-stat-grid{grid-template-columns:repeat(2,1fr)}
  .home-content-grid,
  .triple-grid,
  .home-faq-grid,
  .docs-intro-grid,
  .docs-guide-grid{grid-template-columns:1fr}
  .home-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .home-process-grid .compact-heading{
    grid-column:1 / -1;
  }
  .process-card{
    min-height:0;
    gap:8px;
  }
  .process-card b{
    width:38px;
    height:38px;
    border-radius:14px;
  }
  .process-card h3{
    font-size:18px;
  }
  .process-card p{
    font-size:14px;
    line-height:1.5;
  }
  .home-info-card h3,
  .sponsor-strip h3{
    font-size:21px;
  }
  .home-info-card ul{
    gap:8px;
    padding-left:18px;
  }
  .home-info-card li{
    font-size:14px;
    line-height:1.55;
  }
  .faq-card h3{
    font-size:19px;
  }
  .faq-card p{
    font-size:14px;
    line-height:1.55;
  }
  .home-stat-card b{font-size:24px}
  .sponsor-strip{
    align-items:flex-start;
    flex-direction:column;
  }
  .sponsor-list{
    justify-content:flex-start;
  }
  .home-cta-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .home-cta-card h3{font-size:24px}
  .home-cta-actions{
    width:100%;
  }
  .home-cta-actions button{
    width:100%;
  }
  .grid{grid-template-columns:1fr}
  .feature-grid,
  .feature-highlight-grid{
    grid-template-columns:1fr;
  }
  .feature-intro h3{
    font-size:24px;
  }
  .about-layout{grid-template-columns:1fr}
  .journey-timeline{grid-template-columns:1fr}
  .achievement-grid{grid-template-columns:1fr}
  .social-list{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .chat-shell{min-height:560px}
  .chat-top{align-items:flex-start;flex-direction:column}
  .chat-messages{max-height:460px;padding:18px}
  .chat-bubble{max-width:92%}
  .docs-nav{
    position:static;
  }
  .docs-content{
    padding:18px;
  }
  .docs-nav button{
    min-height:58px;
  }
  .game-modal{
    padding:12px;
  }
  .game-card{
    width:100%;
    max-width:none;
    padding:18px;
    border-radius:28px;
  }
  .game-top{
    margin-bottom:12px;
  }
  .game-top .modal-title{
    font-size:26px;
  }
  .game-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .game-toolbar-actions{
    width:100%;
  }
  .game-toolbar-actions .game-audio-btn{
    flex:1;
  }
  .runner-stage{
    height:min(54vh,420px);
  }
  .runner-player{
    left:28px;
  }
  .runner-jump-btn{
    right:14px;
    bottom:14px;
  }
  .metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quota-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .api-key-row{grid-template-columns:minmax(0,1fr) auto}
  .api-key-actions{
    margin-top:10px;
  }
  .student-verify-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .policy-grid{grid-template-columns:1fr}
  footer{
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:18px;
  }
  .footer-links{
    width:100%;
  }
  .footer-links a{
    flex:1;
    text-align:center;
  }
  .cs-widget{
    right:14px;
    bottom:14px;
  }
  .cs-launcher{
    width:58px;
    height:58px;
  }
  .cs-wave{
    width:56px;
    height:56px;
  }
  .cs-chat{
    width:min(340px,calc(100vw - 20px));
  }
  .toast{
    bottom:18px;
  }
  .menu{
    display:flex;
    position:absolute;
    top:74px;
    right:0;
    left:0;
    padding:12px;
    border-radius:24px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    border:1px solid rgba(255,255,255,.62);
    background:
      radial-gradient(circle at top left,rgba(255,255,255,.55),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08)),
      var(--surface);
    backdrop-filter:blur(34px) saturate(190%);
    -webkit-backdrop-filter:blur(34px) saturate(190%);
    box-shadow:
      0 28px 70px rgba(15,23,42,.24),
      inset 0 1px 0 rgba(255,255,255,.8),
      inset 0 -1px 0 rgba(255,255,255,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px) scale(.98);
    transform-origin:top center;
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .menu a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:13px 15px;
    border-radius:16px;
    color:var(--text);
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.24);
    border:1px solid rgba(255,255,255,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  }
  .menu a:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,.26),transparent 36%);
    pointer-events:none;
  }
  .menu a:hover,
  .menu a.active{
    color:var(--blue);
    background:rgba(10,132,255,.16);
    border-color:rgba(10,132,255,.28);
  }
  body.night .menu{
    border-color:rgba(255,255,255,.18);
    background:
      radial-gradient(circle at top left,rgba(255,255,255,.12),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
      rgba(15,23,42,.78);
  }
  body.night .menu a{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  .mobile-menu-left{
    display:block;
    position:absolute;
    left:16px;
  }
  .mobile-actions{
    display:flex;
    position:absolute;
    right:12px;
    align-items:center;
    gap:6px;
    z-index:3;
  }
  .mobile-btn{display:block}
  .nav-auth{display:none}
  #navUser:not(.hidden){display:none}
  .mobile-logout{
    width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
    margin-top:0;
  }
  .mobile-logout span{display:none}
}

@media(min-width:700px) and (max-width:900px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(330px,.88fr);
    align-items:center;
    column-gap:18px;
  }

  .hero-copy{
    text-align:left;
    align-items:flex-start;
  }

  .hero h1{
    font-size:31px;
    line-height:1.02;
    margin-bottom:16px;
  }

  .hero p{
    font-size:14px;
    line-height:1.65;
  }

  .hero-actions{
    justify-content:flex-start;
    margin-top:20px;
  }

  .eyebrow{
    margin-bottom:14px;
  }

  .studio-card{
    align-self:center;
  }
}
  .docs-layout{grid-template-columns:1fr}