:root{
  --bg:#0a0f1f; --card:#101631; --muted:#0c1126;
  --primary:#7c3aed; --accent:#38bdf8; --text:#e6e9f2; --ok:#22c55e; --warn:#fde047; --err:#f87171;
}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,rgba(124,58,237,.25),transparent),radial-gradient(1000px 600px at 90% 0,rgba(56,189,248,.15),transparent),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;min-height:100vh}
a{color:var(--accent);text-decoration:none}.app-shell{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:linear-gradient(180deg,var(--muted),transparent)}
.brand{font-weight:800;font-size:18px;letter-spacing:.5px}.brand span{color:var(--accent)}
.nav{display:flex;align-items:center}.nav a{margin:0 8px;padding:8px 12px;border-radius:12px}
.mobile-menu-toggle{display:none;flex-direction:column;width:24px;height:18px;background:none;border:none;cursor:pointer;padding:0}
.mobile-menu-toggle span{display:block;width:100%;height:2px;background:var(--text);margin:2px 0;border-radius:1px;transition:transform 0.3s ease,opacity 0.3s ease}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}
@media (max-width:768px){
  .nav{position:fixed;top:60px;left:-100%;width:100%;height:calc(100vh - 60px);background:linear-gradient(180deg,var(--muted),transparent);flex-direction:column;align-items:flex-start;padding:20px;backdrop-filter:blur(8px);transition:left 0.3s ease;z-index:1000}
  .nav.nav-open{left:0}
  .nav a{margin:8px 0;width:100%;text-align:left}
  .mobile-menu-toggle{display:flex}
}
.content{flex:1;max-width:980px;margin:0 auto;padding:20px}
.footer{padding:20px;text-align:center;opacity:.8}.card{background:linear-gradient(145deg,rgba(16,22,49,.9),rgba(16,22,49,.6));border:1px solid rgba(124,58,237,.25);backdrop-filter:blur(8px);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:18px;margin:16px 0}
.h{font-size:22px;font-weight:700;margin-bottom:8px}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:780px){.grid-2{grid-template-columns:1fr}}.input,select{width:100%;background:#0f1531;border:1px solid rgba(56,189,248,.25);color:var(--text);padding:12px;border-radius:12px;outline:none}
label{font-size:12px;opacity:.9;margin-bottom:6px;display:block}.btn{display:inline-block;border-radius:14px;padding:12px 16px;border:1px solid transparent}
.btn-primary{background:var(--primary);color:#fff}.btn-accent{background:var(--accent);color:#051018}.btn-ghost{border-color:rgba(56,189,248,.35);color:var(--text);background:transparent}
.kpi{display:flex;align-items:center;justify-content:space-between}.kpi .val{font-size:28px;font-weight:800}
.status{padding:6px 10px;border-radius:10px;font-size:12px;display:inline-block}.s-success{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35)}
.s-pending{background:rgba(253,224,71,.15);border:1px solid rgba(253,224,71,.35)}.s-failed{background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.35)}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}.table th,.table td{padding:12px 10px;text-align:left}
.table tr{background:#0f1531;border:1px solid rgba(124,58,237,.25)}.table tr td:first-child,.table tr th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.table tr td:last-child,.table tr th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.note{opacity:.85;font-size:13px}