:root{
  --bg:#0f172a;         /* slate-900 */
  --panel:#111827;      /* gray-900 */
  --muted:#94a3b8;      /* slate-400 */
  --text:#e5e7eb;       /* gray-200 */
  --accent:#2563eb;     /* blue-600 */
  --accent-2:#7c3aed;   /* violet-600 */
  --ok:#22c55e;         /* green-500 */
  --warn:#f59e0b;       /* amber-500 */
  --danger:#ef4444;     /* red-500 */
  --card:#0b1222;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent 35%), 
             radial-gradient(1200px 600px at 110% 10%, rgba(37,99,235,.25), transparent 35%), 
             var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
}

a{color:inherit;text-decoration:none}
a.btn{background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:.6rem 1rem; border-radius:12px; font-weight:700; color:white; box-shadow: var(--shadow);}
a.btn:hover{filter:brightness(1.05)}

.container{max-width:1100px;margin:0 auto;padding:24px}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:10px 14px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.brand{display:flex;gap:10px; align-items:center; font-weight:800; letter-spacing:.2px}
.brand img{width:36px;height:36px}
.links{display:flex; gap:10px; flex-wrap:wrap}
.links a{padding:.5rem .8rem; border-radius:10px; font-weight:600; opacity:.85}
.links a[aria-current="page"]{background:rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.35); opacity:1}

.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns: repeat(3,1fr)}
.grid.cols-2{grid-template-columns: repeat(2,1fr)}
@media (max-width: 980px){ .grid.cols-3{grid-template-columns: 1fr} .grid.cols-2{grid-template-columns:1fr}}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}

.card h2{margin:.2rem 0 .6rem 0}
.card .muted{color:var(--muted); font-size:.95rem}
.card .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* tables */
.table{width:100%; border-collapse: collapse}
.table th, .table td{padding:.6rem .7rem; text-align:left}
.table thead th{font-size:.9rem; color:#cbd5e1; border-bottom:1px solid rgba(255,255,255,.08)}
.table tbody tr{border-bottom:1px dashed rgba(255,255,255,.06)}
.badge{display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.1); padding:.2rem .5rem; border-radius:999px; font-size:.8rem; opacity:.9}
.badge.ok{background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.4)}
.badge.warn{background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.4)}
.badge.danger{background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.4)}
.progress{height:10px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden}
.progress > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent), var(--accent-2))}

/* forms */
input, textarea, select{
  background:#0b1222; color:var(--text); border:1px solid rgba(255,255,255,.15);
  padding:.55rem .7rem; border-radius:10px; width:100%;
}
button{
  background: linear-gradient(135deg,var(--accent), var(--accent-2)); border:none; color:white;
  padding:.65rem 1rem; border-radius:12px; font-weight:800; letter-spacing:.3px; cursor:pointer; box-shadow: var(--shadow);
}
button.secondary{ background: none; color: var(--text); border:1px solid rgba(255,255,255,.2) }
button.ghost{ background: none; color: var(--muted); border: none }
button.small{ padding:.45rem .7rem; border-radius:10px; font-weight:700; }
button:disabled{opacity:.6; cursor:not-allowed}

/* toast */
.toast{position:fixed; right:18px; bottom:18px; background:#111827; border:1px solid rgba(255,255,255,.1); padding:.8rem 1rem; border-radius:12px; display:none}
.toast.show{display:block}

/* confetti canvas */
#confetti{position:fixed; inset:0; pointer-events:none}
footer{margin:28px 0; color:var(--muted); font-size:.9rem; text-align:center; opacity:.9}