.fanta-app{ display:block; }
.fanta-app-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  margin:14px 0;
}

.fanta-front-card{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.fanta-front-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  padding:16px 16px;
  background: radial-gradient(1200px 300px at 10% 0%, rgba(14,165,233,.35), transparent 55%),
              radial-gradient(900px 300px at 80% 0%, rgba(168,85,247,.35), transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fanta-front-title{ font-size:16px; font-weight:800; letter-spacing:.2px; }
.fanta-front-sub{ font-size:12px; opacity:.85; margin-top:4px; }
.fanta-front-pill{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
}
.fanta-front-body{ padding:14px 16px; }
.fanta-front-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
@media (max-width: 700px){ .fanta-front-kpis{ grid-template-columns: repeat(2, 1fr);} }
.fanta-front-kpi{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
}
.fanta-front-kpi-l{ font-size:12px; opacity:.85; }
.fanta-front-kpi-v{ font-size:22px; font-weight:900; margin-top:2px; }
.fanta-front-kpi-v span{ font-size:12px; opacity:.8; font-weight:600; }

.fanta-front-actions{ margin-top:12px; display:flex; justify-content:flex-end; }
.fanta-front-btn{
  display:inline-block;
  text-decoration:none !important;
  color:#0b1220 !important;
  background: linear-gradient(135deg, #38bdf8, #a78bfa);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
  box-shadow: 0 10px 24px rgba(56,189,248,.18);
}

.fanta-front-timer{
  font-size:28px; font-weight:1000; letter-spacing:.6px;
  margin:6px 0 10px;
}
.fanta-front-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:12px; opacity:.9;
}

.fanta-table-wrap{ overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.10); }
.fanta-front-table{
  width:100%; border-collapse:collapse; min-width: 560px;
}
.fanta-front-table th, .fanta-front-table td{
  padding:12px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08);
}
.fanta-front-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.fanta-front-table td{ font-size:14px; }
.fanta-chip{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.fanta-chip.ok{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.25); }
.fanta-chip.off{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.25); }

.fanta-anchor{ scroll-margin-top: 90px; margin:14px 0; }