:root{
  --bg:#020617;
  --panel:#0f172a;
  --panel2:#111827;
  --line:#1f2937;
  --text:#f8fafc;
  --muted:#94a3b8;
  --green:#22c55e;
  --green2:#16a34a;
  --blue:#2563eb;
  --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#020617,#0b1120 40%,#0f172a);color:var(--text);min-height:100%}
a{color:#bfdbfe;text-decoration:none}
body{min-height:100vh}
.wrap{max-width:960px;margin:0 auto;padding:24px}
.wrap-sm{max-width:460px;margin:0 auto;padding:24px}
.card{background:rgba(15,23,42,.88);backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.16);border-radius:20px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.24)}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.inp, textarea, select{
  width:100%;background:#020617;color:var(--text);border:1px solid #334155;border-radius:14px;
  padding:14px 14px;font-size:16px;outline:none
}
.inp:focus, textarea:focus, select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
textarea{min-height:140px;resize:vertical}
.btn,.btn2,.btnDanger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:0;border-radius:14px;padding:13px 16px;font-weight:700;font-size:15px;cursor:pointer
}
.btn{background:linear-gradient(180deg,var(--green),var(--green2));color:#052e16}
.btn2{background:#172554;color:#dbeafe;border:1px solid #1d4ed8}
.btnDanger{background:#7f1d1d;color:#fee2e2;border:1px solid #dc2626}
.out{white-space:pre-wrap;background:#020617;border:1px solid #334155;border-radius:14px;padding:14px;min-height:52px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.center{text-align:center}
.kpi{font-size:28px;font-weight:800}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a,.nav button{width:auto}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#0b3b1e;color:#bbf7d0;border:1px solid #14532d;font-size:12px;font-weight:700}
.badge.gray{background:#111827;color:#cbd5e1;border-color:#374151}
.hero{padding:20px 0 10px}
hr{border:none;border-top:1px solid rgba(148,163,184,.14);margin:16px 0}
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .wrap,.wrap-sm{padding:18px}
}

.conversation{
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}

.msg{
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  max-width: 80%;
}

.msg.user{
  background:#007aff;
  color:white;
  margin-left:auto;
}

.msg.bot{
  background:#f1f1f1;
  color:#222;
  margin-right:auto;
}