:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.08);
  --primary: #2563eb;
  --primary2: #06b6d4;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}
[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border: rgba(148,163,184,.18);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
}
html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(37,99,235,.10), transparent 60%),
              radial-gradient(900px 500px at 85% 15%, rgba(6,182,212,.10), transparent 60%),
              var(--bg);
  color: var(--text);
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.badge{
  border: 1px solid var(--border);
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  color: var(--muted);
  background: rgba(148,163,184,.08);
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  border-radius:.85rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: white;
  border: none;
}
.input{
  width:100%;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:.85rem;
  padding:.65rem .85rem;
  outline:none;
}
.input:focus{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.table{
  width:100%;
  border-collapse: collapse;
}
.table th,.table td{
  text-align:left;
  padding:.8rem .75rem;
  border-bottom:1px solid var(--border);
  vertical-align: top;
}
.table th{ color: var(--muted); font-weight:600; font-size:.8rem; text-transform: uppercase; letter-spacing:.06em; }
.kpi{
  background: linear-gradient(180deg, rgba(37,99,235,.08), transparent 65%), var(--card);
}
.sidebar-link{
  display:flex; align-items:center; gap:.65rem;
  padding:.65rem .8rem;
  border-radius: .9rem;
  color: var(--muted);
}
.sidebar-link:hover{ background: rgba(148,163,184,.10); color: var(--text); }
.sidebar-link.active{
  background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(6,182,212,.14));
  color: var(--text);
  border: 1px solid rgba(37,99,235,.25);
}
.toast{
  position: fixed; right: 18px; bottom: 18px;
  background: var(--card); border:1px solid var(--border);
  box-shadow: var(--shadow);
  padding: .9rem 1rem; border-radius: 1rem;
  max-width: 360px; z-index: 50;
}
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(148,163,184,.12);
  border-radius: .75rem;
}
.skeleton::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%);} }