:root{
  --bg:#070b16; --bg2:#0b1120;
  --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#eaf0fb; --muted:#8c99b3; --muted-2:#5f6b85;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --r1:#10b981; --r2:#34d399; --r3:#a3e635; --r4:#fbbf24;
  --v1:#22d3ee; --v2:#38bdf8; --v3:#818cf8; --v4:#f59e0b;
  --good:#34d399; --warn:#fbbf24; --bad:#f87171;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(16,185,129,.10), transparent 55%),
    radial-gradient(1000px 500px at 90% 0%, rgba(56,189,248,.10), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:22px 22px 80px}
a{color:var(--v2);text-decoration:none}

.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:26px;background:rgba(9,13,24,.72);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.3px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--r1),var(--v1));
  display:grid;place-items:center;box-shadow:0 0 22px rgba(34,211,238,.45)}
.brand .dot svg{width:17px;height:17px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.6px}
.spacer{flex:1}
.control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.select,.btn,.input{font:inherit;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:12px;padding:10px 14px;transition:.2s}
.btn,.select{cursor:pointer}
.select:hover,.btn:hover{border-color:var(--border-strong);background:rgba(255,255,255,.09)}
.select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c99b3' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.input:focus{outline:none;border-color:var(--v2)}
.btn-primary{background:linear-gradient(135deg,var(--r1),var(--v1));border:none;color:#04121a;font-weight:700;
  box-shadow:0 10px 26px -8px rgba(34,211,238,.6)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-primary.loading{pointer-events:none;opacity:.7}
.btn-danger{color:var(--bad);border-color:rgba(248,113,113,.3)}
.btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.pill-date{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:600}
.pill-date svg{width:15px;height:15px;color:var(--r2)}
.card{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;transition:.2s}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 16px 40px -18px rgba(0,0,0,.7)}
.card h3{margin:0;padding:13px 16px;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);color:var(--muted)}
.card .body{padding:16px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--bg2);border:1px solid var(--border-strong);color:var(--text);padding:12px 20px;border-radius:12px;
  box-shadow:var(--shadow);z-index:90;transition:.25s;font-size:13.5px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(248,113,113,.5)}
.muted{color:var(--muted)}