:root{
  --bg0:#0b0d10; --bg1:#0f1720;
  --card:#10151b; --elev:#0d1217;
  --text:#e7eef7; --muted:#a3b0c2;
  --accent:#5b8dff; --accent-2:#8aa9ff;
  --ring:rgba(91,141,255,.35);
  --border:#1f2937; --border-2:#2a3647;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}
:root.light{
  --bg0:#f6f8fb; --bg1:#eef2f7;
  --card:#ffffff; --elev:#f8fafc;
  --text:#10131a; --muted:#5a6779;
  --accent:#3b82f6; --accent-2:#60a5fa;
  --ring:rgba(59,130,246,.35);
  --border:#e5eaf1; --border-2:#d9e0ea;
  --shadow:0 10px 30px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg0) 60%);
  overflow-x:hidden;
}
/* Animated background blobs */
.bgfx{position:fixed;inset:-20% -10%; pointer-events:none; z-index:-1; filter:blur(60px); opacity:.4}
.bgfx .blob{position:absolute; width:55vmax; height:55vmax; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(91,141,255,.9), transparent 60%);
  animation:blob1 18s ease-in-out infinite alternate}
.bgfx .blob.b2{left:60%; top:20%; background:radial-gradient(circle at 70% 40%, rgba(26,188,156,.9), transparent 60%); animation:blob2 20s ease-in-out infinite alternate}
.bgfx .blob.b3{left:20%; top:60%; background:radial-gradient(circle at 30% 70%, rgba(255,99,132,.8), transparent 60%); animation:blob3 22s ease-in-out infinite alternate}
@keyframes blob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-30px) scale(1.1)}}
@keyframes blob2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,30px) scale(1.05)}}
@keyframes blob3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,40px) scale(1.08)}}

/* Cards & pills */
.card-custom{background:linear-gradient(180deg,var(--card),var(--elev));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.section-title{margin:6px 0 12px;font-size:18px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pill{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--border-2);
  background:linear-gradient(180deg,var(--elev),var(--card));cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,opacity .2s,border-color .12s;position:relative}
.pill .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.pill .t{font-weight:700}.pill small{display:block;color:var(--muted)}
.pill:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.pill.active{outline:2px solid var(--ring);box-shadow:0 0 0 4px var(--ring)}
.pill.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}
.badge-net{position:absolute;top:8px;right:8px;font-size:11px;padding:3px 7px;border-radius:999px;border:1px solid var(--border-2);color:var(--muted);background:var(--elev)}

footer{border-top:1px solid var(--border);color:var(--muted)}
.badgebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badgebar .logo{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:6px 8px;background:var(--card)}
.badgebar svg{width:120px;height:28px}

.toast-custom{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:all .2s ease;z-index:1045}
.toast-custom.show{opacity:1;transform:translateY(0)}

.form-control, .form-select {background:var(--elev); color:var(--text); border-color:var(--border)}
.form-control:focus, .form-select:focus{border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(91,141,255,.25)}