/* Aster shared page theme -----------------------------------------------------
 * The single styling language for every standalone page: /landing, /admin, and
 * (by construction) /login + /signup, which already use these exact values in
 * their inline styles. Tokens mirror :root[data-theme="dark"] in styles.css so
 * the marketing pages and the chat shell read as one product.
 */
:root{
  --bg:#000000;
  --surface:#121212;
  --surface2:#1a1a1c;
  --panel:#0b0b0c;
  --border:#222222;
  --border2:#333333;
  --border3:#555555;
  --text:#ffffff;
  --text2:#ededed;
  --muted:#888888;
  --dim:#666666;
  --primary:#ededed;
  --primary-hover:#ffffff;
  --accent:#8ab4f8;
  --danger:#f28b82;
  --ok:#81c995;
  --radius:12px;
  --radius-sm:6px;
  --radius-pill:9999px;
  --serif:Georgia,'Times New Roman',serif;
  --nav-h:64px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(237,237,237,.18)}
*{scrollbar-width:thin; scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
img{max-width:100%}

/* ============ nav ============ */
.pnav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:10px; padding:0 22px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.pnav .brand{
  display:flex; align-items:center; gap:9px; color:var(--text);
  font-weight:600; font-size:15px; letter-spacing:-.01em; text-decoration:none;
}
.pnav .brand svg{width:19px;height:19px;color:var(--text)}
.pnav .plinks{display:flex; align-items:center; gap:2px; margin-left:10px}
.pnav .plink{
  font-size:13.5px; color:var(--muted); padding:7px 11px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.pnav .plink:hover{color:var(--text); background:var(--surface)}
.pnav .spacer{flex:1}
@media (max-width:720px){ .pnav .plinks{display:none} }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:500 14px/1 'Inter',system-ui,sans-serif; padding:11px 18px;
  border-radius:var(--radius-sm); border:1px solid var(--border2);
  background:transparent; color:var(--text); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{border-color:var(--border3); color:var(--text)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--primary); color:#000; border-color:transparent; font-weight:500}
.btn.primary:hover{background:var(--primary-hover)}
.btn.ghost{border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--text); background:var(--surface)}
.btn.lg{height:56px; padding:0 32px; font-size:16px; border-radius:var(--radius-sm)}
.btn.sm{padding:8px 13px; font-size:13px}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn.danger{color:var(--danger); border-color:#3a2626}
.btn.danger:hover{border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}

/* ============ layout ============ */
.section{position:relative; padding:96px 22px}
.wrap{max-width:1120px; margin:0 auto; width:100%}
.wrap-narrow{max-width:760px}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin:0 0 14px;
}
.h2{
  font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:-.025em;
  line-height:1.15; margin:0 0 14px; color:var(--text);
}
.lede{color:var(--muted); font-size:clamp(15px,1.6vw,17px); margin:0; line-height:1.65; max-width:56ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.divider{height:1px;background:var(--border);border:0;margin:0}

/* ============ panels / cards ============ */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:22px}
.panel-head{font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid-2,.grid-3{grid-template-columns:1fr} }

.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; overflow:hidden;
}
.card .cico{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--text2); background:#000;
}
.card .cico i{font-size:19px}
.card h3{font-size:16px;font-weight:600;margin:0 0 7px;letter-spacing:-.012em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* ============ forms (admin) ============ */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:.78rem; color:var(--muted); font-weight:500}
.field input,.field select,.field textarea{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border2); background:#000; color:var(--text);
  font-size:.875rem; outline:none; font-family:inherit;
  transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--border3)}
.field textarea{resize:vertical; min-height:70px}
.field.full{grid-column:1/-1}
.checks{display:flex; gap:20px; flex-wrap:wrap; margin:4px 0 16px}
.checkrow{display:flex; align-items:center; gap:8px; font-size:.85rem; color:#ccc; cursor:pointer}
.checkrow input{accent-color:var(--primary); width:15px; height:15px; cursor:pointer}
.formrow{display:flex; align-items:center; gap:10px}
.formmsg{font-size:.8rem; min-height:1em}
.formmsg.err{color:var(--danger)}
.formmsg.ok{color:var(--ok)}
.hint{font-size:.75rem; color:var(--dim)}

/* ============ preset rows (admin) ============ */
.preset{
  display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--border);
  border-radius:8px; margin-bottom:10px; background:#000;
}
.preset.active{border-color:var(--text2)}
.preset .info{flex:1; min-width:0}
.preset .pname{font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:8px}
.preset .pmeta{font-size:.8rem; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.preset .actions{display:flex; gap:8px; flex-shrink:0}
.badge{font-size:.65rem; font-weight:600; letter-spacing:.05em; color:#000; background:var(--text2); padding:2px 8px; border-radius:var(--radius-pill)}

/* ============ toast ============ */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--text); padding:10px 16px; border-radius:8px;
  font:500 14px/1.4 'Inter',system-ui,sans-serif; border:1px solid var(--border2);
  opacity:0; transition:opacity .2s; z-index:1000; pointer-events:none;
}
#toast.show{opacity:1}
#toast[hidden]{display:none}

/* ============ footer ============ */
.pfoot{border-top:1px solid var(--border); padding:40px 22px; margin-top:0}
.pfoot .fin{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pfoot .fbrand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:600;font-size:14px}
.pfoot .fbrand svg{width:17px;height:17px}
.pfoot .fspacer{flex:1}
.pfoot .flinks{display:flex;gap:4px;flex-wrap:wrap}
.pfoot .flink{font-size:13px;color:var(--dim);padding:6px 10px;border-radius:7px}
.pfoot .flink:hover{color:var(--text);background:var(--surface)}
.pfoot .fnote{width:100%;font-size:12.5px;color:var(--dim);margin-top:14px}

/* =========================================================================
 * React Bits port classes (reactbits.dev, MIT). Vanilla-DOM equivalents of
 * SplitText / BlurText / ShinyText / GradientText / AnimatedContent /
 * SpotlightCard / CountUp / ClickSpark / DotField / Aurora.
 * ========================================================================= */

/* SplitText: word wrappers keep normal line wrapping, chars animate inside */
.rb-word{display:inline-block; white-space:nowrap}
.rb-ch{
  display:inline-block; opacity:0; transform:translateY(38px) rotate(3deg);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:transform,opacity;
}
.rb-ch.rb-in{opacity:1; transform:none}

/* BlurText: per-word blur-in */
.rb-bw{
  display:inline-block; opacity:0; filter:blur(10px); transform:translateY(-26px);
  transition:opacity .7s ease, filter .7s ease, transform .7s var(--ease-out);
  will-change:transform,filter,opacity;
}
.rb-bw.rb-in{opacity:1; filter:blur(0); transform:none}

/* AnimatedContent / ScrollReveal */
.rb-reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:transform,opacity;
}
.rb-reveal.rb-in{opacity:1; transform:none}

/* ShinyText */
.rb-shiny{
  display:inline-block;
  background-size:200% auto; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rb-shine var(--rb-shine-dur,5.5s) linear infinite;
}
@keyframes rb-shine{
  0%{background-position:150% center}
  100%{background-position:-50% center}
}

/* GradientText */
.rb-gradient{
  display:inline-block;
  background-size:300% 100%; background-repeat:repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rb-grad var(--rb-grad-dur,9s) linear infinite alternate;
}
@keyframes rb-grad{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* SpotlightCard */
.rb-spot{
  position:relative; overflow:hidden;
  --mouse-x:50%; --mouse-y:50%; --spotlight-color:rgba(255,255,255,.07);
}
.rb-spot::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity:0; transition:opacity .45s ease;
}
.rb-spot:hover::before,.rb-spot:focus-within::before{opacity:1}

/* effect canvases */
.rb-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.rb-dotfield{position:relative; width:100%; height:100%; overflow:hidden}
.rb-aurora{position:absolute; inset:0; overflow:hidden}
#rbSparks{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:900;
}

/* CountUp: reserve width so the rising number doesn't reflow the row */
.rb-count{display:inline-block; font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .rb-ch,.rb-bw,.rb-reveal{opacity:1; transform:none; filter:none; transition:none}
  .rb-shiny,.rb-gradient{animation:none}
  html{scroll-behavior:auto}
}