:root{
  --ring:#26314a; --text:#e7eefc; --muted:#9fb1cf;
}
html,body{height:100%}
body{
  margin:0; color:var(--text); font:15px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  min-height:100vh;
  /* Signature gradient that reaches the bottom */
  background:
    radial-gradient(1200px 600px at 15% 10%, #2a2b7e40 0%, transparent 60%),
    radial-gradient(1400px 800px at 85% 15%, #ff7a0040 0%, transparent 60%),
    radial-gradient(1000px 800px at 50% 90%, #f472b640 0%, transparent 65%),
    linear-gradient(180deg, #0b1020 0%, #0a0f1c 100%);
  background-attachment: fixed;
}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.top{display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px}
.logo .s{position:relative;width:18px;height:18px}
.logo .s span{
  position:absolute; left:0; right:0; height:7px; border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6,#f59e0b);
  box-shadow:0 0 12px #f59e0b33 inset;
}
.logo .s .top{top:1px; transform:rotate(-25deg) translateX(1px)}
.logo .s .bot{bottom:1px; transform:rotate(25deg) translateX(1px)}
.nav{display:flex;gap:16px;margin-left:8px}
.nav a{color:#cfe0ff;text-decoration:none}
.nav a.active{color:#ffffff}
.pill{border:1px solid var(--ring);background:transparent;color:#cfe0ff;padding:6px 10px;border-radius:999px;font-size:13px;text-decoration:none}
.select{
  appearance:none;border:1px solid var(--ring);background:transparent;color:#cfe0ff;
  padding:6px 28px 6px 10px;border-radius:999px;font-size:13px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23cfe0ff" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;background-position:right 8px center
}
.spacer{flex:1}
.panel{margin-top:16px;background:rgba(18,24,38,.7);border:1px solid var(--ring);border-radius:16px;padding:14px; box-shadow:0 6px 40px rgba(0,0,0,.35)}
.hint{display:inline-block; background:#111a2c; border:1px solid #202b43; color:#cfe0ff; padding:6px 10px; border-radius:12px; font-size:13px}
.chat{height:56vh; margin-top:12px; border-radius:12px; border:1px solid #202b43; background:rgba(10,16,28,.55)}
.composer{display:flex; align-items:center; gap:8px; padding:12px 10px}
.input{flex:1; color:var(--text); background:transparent; border:1px solid #21304a; border-radius:999px; height:42px; padding:0 16px; outline:none}
.iconbtn{width:34px;height:34px;border:1px solid #21304a;border-radius:12px;background:#0f1726;color:#9fb1cf;display:flex;align-items:center;justify-content:center;cursor:pointer}
.footwrap{margin:36px 0 10px;color:#a7b5cf;font-size:13px}
.foot{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}
.foot h5{margin:0 0 10px;font-size:12px;color:#9fb1cf}
.foot a{display:block;color:#c9d7f1;margin:4px 0;text-decoration:none}
.disclaimer{font-size:12px;opacity:.8;margin-top:10px}
.muted{color:var(--muted)}