:root{
  --bg:#0a0f1e;
  --bg-2:#0f162b;
  --card:#121a2f;
  --card-2:#0e1730;
  --muted:#a0acc2;
  --text:#eaf1fb;
  --accent:#5b8cff; /* blue */
  --accent-2:#22c55e; /* green */
  --accent-3:#f59e0b; /* amber */
  --accent-4:#ec4899; /* pink */
  --danger:#ef4444;
  --border:#243255;
  --shadow: 0 10px 30px rgba(17, 24, 39, .35);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(92,121,255,.18), transparent 60%),
    radial-gradient(1000px 500px at -10% 100%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

a{color:var(--accent);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:28px}
.header{display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{
  width:96px;height:96px;border-radius:16px;
  background:#0b1529;
  background-image:url('./logo.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 6px 16px rgba(96,165,250,.35);
  border:1px solid var(--border)
}
.brand h1{margin:0;font-size:22px;letter-spacing:.4px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--card);
  border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px 18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1.5fr 1fr .8fr}}

.input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0b1326;color:var(--text);outline:none;transition:.2s border-color,.2s box-shadow,.2s transform
}
.input::placeholder{color:#9fb0cf}
.input:focus{border-color:#6ea8ff;box-shadow:0 0 0 3px rgba(94,148,255,.25)}

.row{display:flex;gap:10px;align-items:center}

.btn{
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0d1628;color:var(--text);cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg, var(--accent), #6ea8ff);border-color:transparent;color:white}
.btn.success{background:linear-gradient(135deg, var(--accent-2), #34d399);border-color:transparent;color:white}
.btn.danger{background:linear-gradient(135deg, var(--danger), #fb7185);border-color:transparent;color:white}
.btn:disabled{opacity:.6;cursor:not-allowed}

.label{font-size:12px;color:var(--muted);margin-bottom:6px}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:10px 12px;text-align:start}
.table thead th{color:var(--muted);font-weight:600}

.row-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , #0b1529;
  border:1px solid var(--border);border-radius:14px;padding:12px}

.kv{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#0d1d38;border:1px solid var(--border);font-size:12px;
  box-shadow:0 4px 12px rgba(37,99,235,.25)}

.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:9px 12px;border-radius:12px;border:1px solid var(--border);cursor:pointer;background:#0c1530;transition:.2s}
.tab:hover{border-color:#33528a}
.tab.active{background:linear-gradient(135deg,#1f2d55,#0f1e3e);border-color:#2c3f6e;box-shadow:inset 0 0 0 1px rgba(99,102,241,.25)}

.section-title{margin:6px 0 10px 0;color:#d6dcff;font-weight:700;letter-spacing:.3px}
.footer{margin-top:16px;color:var(--muted);font-size:12px;text-align:center;padding:12px 0}

.chat{display:flex;flex-direction:column;height:520px}
.chat .messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-inline:4px}
.msg{max-width:70%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#0c1938,#0b1529);
  box-shadow:0 6px 14px rgba(2,6,23,.35)}
.msg.me{align-self:flex-end;background:linear-gradient(180deg,#1c3a6b,#15345f)}
.msg .meta{font-size:11px;color:var(--muted)}

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

.toast{position:fixed;bottom:20px;inset-inline-end:20px;background:linear-gradient(135deg,#0f1f3a,#0b1630);
  border:1px solid #2a3e6e;color:var(--text);padding:12px 14px;border-radius:12px;opacity:0;transform:translateY(10px);transition:.25s;
  box-shadow:0 10px 24px rgba(15,23,42,.45)}
.toast.show{opacity:1;transform:translateY(0)}

.alert{padding:12px 14px;border:1px solid #334155;background:#0b1529;border-radius:12px;color:#e2e8f0;font-size:14px}
.small{font-size:12px;color:var(--muted)}