:root{
  --bg:#0b1220; --panel:#111a2e; --panel2:#0e1628; --line:rgba(148,163,184,.14);
  --text:#e2e8f0; --muted:#94a3b8; --accent:#34d399; --accent2:#8b5cf6; --danger:#fb7185; --warn:#fbbf24; --info:#38bdf8;
  --radius:14px; --shadow:0 10px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  background:
    radial-gradient(1000px 500px at 90% -10%, rgba(52,211,153,.12), transparent 50%),
    radial-gradient(800px 400px at 0% 110%, rgba(139,92,246,.12), transparent 50%),
    var(--bg);
  color:var(--text); min-height:100vh; line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.narrow{max-width:560px}
.card{
  background:linear-gradient(160deg, rgba(17,26,46,.95), rgba(14,22,40,.92));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow);
}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
h1,h2,h3{margin:0 0 10px; line-height:1.3}
.muted{color:var(--muted); font-size:13px}
.small{font-size:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;padding:10px 16px;font-weight:700;
  cursor:pointer;font-size:14px;transition:.15s;font-family:inherit;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,#059669,#34d399);color:#042f1e}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{background:rgba(148,163,184,.12);color:var(--text);border-color:var(--line)}
.btn-secondary:hover{background:rgba(148,163,184,.2)}
.btn-danger{background:linear-gradient(135deg,#e11d48,#fb7185);color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{
  width:100%;background:#0a1324;border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--text);font-size:14px;outline:none;font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px;font-weight:700}
.nav{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(11,18,32,.8);border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:900;font-size:18px;color:#fff;display:flex;align-items:center;gap:8px}
.brand span{background:linear-gradient(135deg,#34d399,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .spacer{flex:1}
.nav a{color:var(--muted);font-size:13px;font-weight:700}
.nav a:hover{color:#fff;text-decoration:none}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:800;border:1px solid var(--line)}
.badge-green{background:rgba(52,211,153,.12);color:#6ee7b7;border-color:rgba(52,211,153,.35)}
.badge-red{background:rgba(251,113,133,.12);color:#fda4af;border-color:rgba(251,113,133,.35)}
.badge-amber{background:rgba(251,191,36,.12);color:#fcd34d;border-color:rgba(251,191,36,.35)}
.badge-blue{background:rgba(56,189,248,.12);color:#7dd3fc;border-color:rgba(56,189,248,.35)}
.badge-purple{background:rgba(139,92,246,.12);color:#c4b5fd;border-color:rgba(139,92,246,.35)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:11px}
tr:hover td{background:rgba(148,163,184,.04)}
.alert{border-radius:12px;padding:12px 14px;font-size:13px;margin:10px 0;border:1px solid var(--line)}
.alert-error{background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.35);color:#fecdd3}
.alert-success{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);color:#a7f3d0}
.alert-info{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.35);color:#bae6fd}
.alert:empty{display:none}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .v{font-size:22px;font-weight:900;margin-top:4px}
.stat .l{font-size:11px;color:var(--muted)}
.hero{padding:70px 16px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,44px);margin-bottom:12px}
.hero p{color:var(--muted);max-width:640px;margin:0 auto 24px}
.price{font-size:28px;font-weight:900;margin:10px 0}
.footer{padding:28px 16px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--line);margin-top:40px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(148,163,184,.06);cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}
.tab.active{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.4);color:#6ee7b7}
.hidden{display:none !important}
.chat-box{height:320px;overflow:auto;background:#0a1324;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13px;white-space:pre-wrap}
.msg.user{align-self:flex-start;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3)}
.msg.assistant,.msg.agent{align-self:flex-end;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3)}
.msg.system{align-self:center;background:rgba(148,163,184,.1);font-size:11px;color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}
.loading{opacity:.6;pointer-events:none}
.progress{height:8px;background:#0a1324;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#34d399,#8b5cf6);border-radius:99px}
.kbd{background:#0a1324;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:11px}
.layout{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
@media (max-width:800px){.layout{grid-template-columns:1fr}}
.side{position:sticky;top:70px}
.side button{
  width:100%;text-align:right;background:transparent;border:1px solid transparent;color:var(--muted);
  padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;margin-bottom:4px;font-family:inherit;
}
.side button:hover{background:rgba(148,163,184,.08);color:#fff}
.side button.active{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35);color:#6ee7b7}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}