/* v4.1 — mobile-first + animações */
:root{
  --bg:#070b15; --bg2:#0b1225; --glass:rgba(255,255,255,.06);
  --muted:#a1a1aa; --txt:#f8fafc; --brand:#8b5cf6; --brand2:#6366f1;
  --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt); background: radial-gradient(1200px 500px at 110% -10%, #1e293b 0%, #0b1020 45%, #050915 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background: rgba(8, 12, 24, .6); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06); }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--brand),var(--brand2));box-shadow:0 0 20px var(--brand2)}
.container{max-width:1060px;margin:0 auto;padding:16px}
.grid{display:grid;gap:12px}
.grid.cards{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))}
.card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transform: translateY(10px) scale(.98); opacity:0; animation: fadeUp .5s ease forwards; }
.card:hover{ transform: translateY(-2px) scale(1); transition:.2s ease; }
.kpi{font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi b{font-size:22px;color:#fff; font-variant-numeric: tabular-nums}
.tabs{display:flex;gap:8px;margin:12px 0; position:sticky; top:58px; z-index:40}
.tab{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);cursor:pointer}
.tab.active{background:linear-gradient(180deg, rgba(139,92,246,.25), rgba(99,102,241,.25)); border-color: rgba(139,92,246,.6)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:14px}
.table-actions a,.table-actions form{display:inline-block}
.table-wrap{width:100%;overflow-x:auto;border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);cursor:pointer;background:var(--bg2);color:#fff;text-decoration:none; position:relative; overflow:hidden; transition: transform .08s ease}
.btn:active{ transform: scale(.98) }
.btn.primary{background:linear-gradient(180deg,#6d28d9,#5b21b6);border:none}
.btn.small{padding:6px 10px;font-size:13px}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.25)}
.btn.icon{padding:6px 10px;font-size:12px}
.btn.wa{background:linear-gradient(180deg,#16a34a,#15803d);border:none}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.35)}
.input, select, textarea{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b1225;color:#e5e7eb}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
code.inline {background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.badge.green{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.35)}
.badge.red{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
.badge.warn{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.35); animation: pulse 1.5s ease infinite}
.footer{margin-top:26px;color:var(--muted);font-size:12px;text-align:center;opacity:.75}
@keyframes fadeUp{ to{opacity:1; transform: translateY(0) scale(1)} }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.5) } 50%{ box-shadow:0 0 0 6px rgba(245,158,11,.08) } }
@keyframes ripple{ to{ transform:scale(4); opacity:0 } }
/* Responsive */
@media (max-width: 900px){ .grid.cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 680px){
  .container{padding:12px}
  .grid.cards{grid-template-columns: 1fr}
  .nav{padding:10px 12px}
  .kpi b{font-size:20px}
  .btn.small{padding:6px 8px;font-size:12px}
  .table thead{display:none}
  .table tbody{display:grid; gap:10px}
  .table tr{ display:grid; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; background:rgba(255,255,255,.03);
    box-shadow:0 10px 28px rgba(0,0,0,.25); animation: fadeUp .35s ease forwards; }
  .table td{display:flex; align-items:center; justify-content:space-between; border:0; padding:6px 4px}
  .table td::before{ content: attr(data-label); font-weight:600; color:var(--muted); padding-right:10px; }
  .table .table-actions{justify-content:flex-end}
  .table .btn.small.wa{width:100%; justify-content:center}
}
.toast{ position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.35);
  color:#a7f3d0; padding:10px 14px; border-radius:12px; z-index:60; backdrop-filter: blur(6px); }
.confetti{position:fixed; left:0; top:0; width:100%; height:0; overflow:visible; pointer-events:none; z-index:70}
.confetti i{ position:absolute; width:8px; height:14px; opacity:.9;
  animation: confettiFall linear forwards; transform: translateY(-20px) rotate(0deg); }
@keyframes confettiFall{ to { transform: translateY(110vh) rotate(720deg); opacity: 1;} }