/* ═══════════════ SwiftScore · Digital Dark Theme ═══════════════ */
:root{
  --ss-bg:#06121a; --ss-bg2:#0a1a24; --ss-card:#0e2330;
  --ss-border:#173446; --ss-border2:#1f4b63;
  --ss-text:#d6ecf5; --ss-muted:#7fa3b8; --ss-dim:#5e8196;
  --ss-cyan:#22d3ee; --ss-cyan2:#67e8f9; --ss-green:#34d399;
  --ss-red:#f87171; --ss-amber:#fbbf24; --ss-violet:#a78bfa;
  --ss-sidebar:250px;
}
*{box-sizing:border-box}
body.ss-body{
  min-height:100vh;margin:0;color:var(--ss-text);
  font-family:'Inter',system-ui,sans-serif;font-size:.9rem;
  background:
    radial-gradient(1100px 560px at 6% -10%,rgba(34,211,238,.10),transparent 60%),
    radial-gradient(900px 520px at 110% 6%,rgba(167,139,250,.10),transparent 60%),
    var(--ss-bg);
  background-attachment:fixed;
}
.font-digital{font-family:var(--ff-head);letter-spacing:.06em}
.font-mono-d{font-family:var(--ff-mono)}
.text-muted-ss{color:var(--ss-muted)!important}
.text-dim-ss{color:var(--ss-dim)!important}
a{color:var(--ss-cyan2)} a:hover{color:#fff}

/* ── Brand ── */
.ss-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ss-brand-mark{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#22d3ee,#6366f1);color:#06121a;font-family:var(--ff-head);font-weight:800;
  box-shadow:0 0 18px rgba(34,211,238,.45)}
.ss-brand-name{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.02rem;letter-spacing:.1em;
  background:linear-gradient(90deg,#22d3ee,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ss-brand-sub{display:block;font-size:.58rem;letter-spacing:.22em;color:var(--ss-dim);text-transform:uppercase}

/* ── Sidebar ── */
.ss-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--ss-sidebar);z-index:1040;
  display:flex;flex-direction:column;padding:18px 14px;overflow-y:auto;
  background:linear-gradient(180deg,#0b1f2b,#07151e);border-right:1px solid var(--ss-border);transition:transform .25s}
.ss-nav-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ss-dim);margin:18px 10px 8px}
.ss-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:3px;border-radius:10px;
  color:#9cc3d6;text-decoration:none;font-weight:500;border:1px solid transparent;transition:all .15s}
.ss-nav a i{font-size:1rem;width:18px;text-align:center}
.ss-nav a:hover{background:#0f2a3a;color:#fff}
.ss-nav a.active{color:#fff;border-color:rgba(34,211,238,.35);
  background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(99,102,241,.10));box-shadow:inset 3px 0 0 var(--ss-cyan)}
.ss-nav a.disabled{opacity:.5;pointer-events:none}
.ss-soon{margin-left:auto;font-size:.55rem;padding:2px 6px;border-radius:5px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(251,191,36,.14);color:var(--ss-amber)}
.ss-sidebar-foot{margin-top:auto;padding:12px;border-radius:12px;background:#06121a;border:1px solid var(--ss-border);font-size:.72rem;color:var(--ss-muted)}
.ss-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1035}

/* ── Main / Topbar ── */
.ss-main{margin-left:var(--ss-sidebar);min-height:100vh;display:flex;flex-direction:column}
.ss-topbar{position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:14px;padding:12px 24px;
  background:rgba(6,18,26,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--ss-border)}
.ss-topbar h1{margin:0;font-family:var(--ff-head);font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:#e6f7ff}
.ss-burger{display:none;width:36px;height:36px;border-radius:8px;background:#0a1a24;border:1px solid var(--ss-border2);color:#fff}
.ss-clock{font-family:var(--ff-mono);color:var(--ss-cyan2);font-size:.8rem;padding:4px 10px;border-radius:8px;background:#06121a;border:1px solid var(--ss-border)}
.ss-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.ss-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem;
  background:linear-gradient(135deg,#0891b2,#7c3aed);box-shadow:0 0 12px rgba(124,58,237,.35)}
.ss-user-name{font-weight:600;color:#e6f7ff;line-height:1.1}
.ss-role{display:inline-block;font-size:.58rem;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ss-role.super_admin{background:rgba(167,139,250,.16);color:#c4b5fd}
.ss-role.org_admin{background:rgba(34,211,238,.14);color:var(--ss-cyan2)}
.ss-role.scorer{background:rgba(52,211,153,.14);color:#6ee7b7}
.ss-content{padding:24px;flex:1}
.ss-footer{padding:14px 24px;border-top:1px solid var(--ss-border);font-size:.72rem;color:var(--ss-dim)}

/* ── Live dot ── */
.ss-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ss-red);animation:ssPulse 1.6s infinite}
@keyframes ssPulse{0%{box-shadow:0 0 0 0 rgba(248,113,113,.7)}70%{box-shadow:0 0 0 8px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}

/* ── Cards / KPI ── */
.ss-card{background:linear-gradient(160deg,var(--ss-card),var(--ss-bg2));border:1px solid var(--ss-border);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ss-card-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--ss-border);
  font-family:var(--ff-head);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#e6f7ff}
.ss-card-head i{color:var(--ss-cyan)}
.ss-card-body{padding:20px}
.ss-kpi{--c:var(--ss-cyan);position:relative;overflow:hidden;padding:18px 20px;height:100%;transition:transform .2s,box-shadow .2s}
.ss-kpi:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--c),0 12px 28px rgba(0,0,0,.45)}
.ss-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);box-shadow:0 0 14px var(--c)}
.ss-kpi-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ss-muted);font-weight:600}
.ss-kpi-value{font-family:var(--ff-head);font-size:1.9rem;font-weight:800;color:var(--c);margin-top:6px;line-height:1;filter:drop-shadow(0 0 6px var(--c))}
.ss-kpi-sub{font-size:.7rem;color:var(--ss-dim);margin-top:6px}
.ss-kpi-icon{position:absolute;right:16px;top:14px;font-size:1.7rem;color:var(--c);opacity:.3}

/* ── Hero banner ── */
.ss-hero{position:relative;overflow:hidden;padding:22px 24px;border-radius:16px;border:1px solid var(--ss-border);
  background:linear-gradient(110deg,#0c2e2e,#0b1f33 55%,#1e1b4b)}
.ss-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:2px dashed rgba(34,211,238,.18)}
.ss-hero h2{margin:0 0 6px;font-family:var(--ff-head);font-size:1.2rem;letter-spacing:.06em;color:#fff}
.ss-hero p{margin:0;color:var(--ss-muted)}

/* ── Tables / Chips ── */
.ss-table{width:100%;border-collapse:collapse}
.ss-table th{padding:10px 14px;text-align:left;white-space:nowrap;font-family:var(--ff-head);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ss-cyan2);background:#0c2e2e;border-bottom:1px solid var(--ss-border2)}
.ss-table td{padding:11px 14px;border-bottom:1px solid #12303f;color:#cfe6f1;vertical-align:middle}
.ss-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.ss-table tbody tr:hover{background:#0f2a3a}
.ss-empty{text-align:center;padding:28px;color:var(--ss-dim);font-style:italic}
.ss-chip{display:inline-block;padding:2px 9px;border-radius:6px;font-size:.66rem;font-weight:600;letter-spacing:.04em}
.ss-chip.green{background:rgba(52,211,153,.14);color:#6ee7b7}
.ss-chip.red{background:rgba(248,113,113,.14);color:#fca5a5}
.ss-chip.cyan{background:rgba(34,211,238,.14);color:var(--ss-cyan2)}
.ss-chip.violet{background:rgba(167,139,250,.14);color:#c4b5fd}
.ss-chip.amber{background:rgba(251,191,36,.14);color:#fcd34d}

/* ── Forms / Buttons / Alerts ── */
.ss-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ss-muted);font-weight:600;margin-bottom:6px}
.ss-input{background:#06121a!important;border:1px solid var(--ss-border2)!important;color:var(--ss-text)!important;border-radius:10px!important;padding:.65rem .9rem!important}
.ss-input:focus{border-color:var(--ss-cyan)!important;box-shadow:0 0 0 3px rgba(34,211,238,.18)!important}
.ss-input::placeholder{color:#4f7185}
.ss-input-group{position:relative}
.ss-input-group .ss-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ss-muted)}
.ss-input-group .ss-eye:hover{color:var(--ss-cyan2)}
.btn-ss{background:linear-gradient(90deg,#0891b2,#4f46e5);border:none;color:#fff;font-weight:600;border-radius:10px;padding:.68rem 1.2rem;
  box-shadow:0 0 18px rgba(34,211,238,.28);transition:transform .15s,box-shadow .15s}
.btn-ss:hover,.btn-ss:focus{color:#fff;transform:translateY(-1px);box-shadow:0 0 26px rgba(34,211,238,.45)}
.btn-ss-ghost{background:#0a1a24;border:1px solid var(--ss-border2);color:#9cc3d6;border-radius:10px}
.btn-ss-ghost:hover{background:#10293a;color:#fff;border-color:var(--ss-cyan)}
.ss-alert{border-radius:10px;padding:10px 14px;font-size:.82rem;border:1px solid}
.ss-alert.error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.4);color:#fca5a5}
.ss-alert.success{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.4);color:#6ee7b7}
.form-check-input{background-color:#06121a;border-color:var(--ss-border2)}
.form-check-input:checked{background-color:var(--ss-cyan);border-color:var(--ss-cyan)}

/* ── Checklist ── */
.ss-step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #173446}
.ss-step:last-child{border-bottom:none}
.ss-step-no{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  background:rgba(34,211,238,.12);color:var(--ss-cyan2);border:1px solid rgba(34,211,238,.3)}
.ss-step.done .ss-step-no{background:rgba(52,211,153,.16);color:#6ee7b7;border-color:rgba(52,211,153,.4)}

/* ── Login ── */
.ss-auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.ss-auth-art{position:relative;overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid var(--ss-border);background:linear-gradient(150deg,#0c2e2e 0%,#0b1f33 50%,#1e1b4b 100%)}
.ss-auth-art::before{content:"";position:absolute;left:50%;top:52%;width:120px;height:440px;transform:translate(-50%,-50%) rotate(-18deg);border-radius:6px;
  background:linear-gradient(180deg,rgba(251,191,36,.04),rgba(251,191,36,.12),rgba(251,191,36,.04));border:1px solid rgba(251,191,36,.18)}
.ss-auth-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(34,211,238,.12) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%)}
.ss-auth-art>*{position:relative;z-index:1}
.ss-scoreboard{max-width:430px;padding:18px 20px;border-radius:16px;background:rgba(6,18,26,.78);border:1px solid var(--ss-border2);
  backdrop-filter:blur(6px);box-shadow:0 0 40px rgba(34,211,238,.12)}
.ss-sb-top{display:flex;justify-content:space-between;align-items:center;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-muted)}
.ss-sb-score{font-family:var(--ff-head);font-size:2.6rem;font-weight:800;color:#fff;line-height:1.1;margin:10px 0 2px;text-shadow:0 0 18px rgba(34,211,238,.45)}
.ss-sb-overs{font-family:var(--ff-mono);color:var(--ss-cyan2);font-size:.9rem}
.ss-balls{display:flex;gap:6px;margin-top:14px}
.ss-ball{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-head);font-size:.7rem;font-weight:700;
  background:#0a1a24;border:1px solid var(--ss-border2);color:#cfe6f1}
.ss-ball.four{background:rgba(34,211,238,.18);border-color:var(--ss-cyan);color:#fff}
.ss-ball.six{background:rgba(167,139,250,.22);border-color:var(--ss-violet);color:#fff}
.ss-ball.w{background:rgba(248,113,113,.22);border-color:var(--ss-red);color:#fff}
.ss-ball.dot{color:var(--ss-dim)}
.ss-auth-copy h2{font-family:var(--ff-head);font-size:1.55rem;letter-spacing:.04em;color:#fff;margin-bottom:10px}
.ss-auth-copy p{color:var(--ss-muted);max-width:440px;margin:0}
.ss-auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.ss-login-card{width:100%;max-width:410px;padding:34px 30px}
.ss-demo{margin-top:18px;padding:10px 12px;border-radius:10px;background:#06121a;border:1px dashed var(--ss-border2);font-size:.72rem;color:var(--ss-muted)}

/* ── Error page ── */
.ss-error{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.ss-error-code{font-family:var(--ff-head);font-size:5rem;font-weight:800;line-height:1;
  background:linear-gradient(90deg,#f87171,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(248,113,113,.35))}

/* ── Responsive ── */
@media(max-width:991px){
  .ss-auth{grid-template-columns:1fr}
  .ss-auth-art{display:none}
  .ss-sidebar{transform:translateX(-100%)}
  .ss-sidebar.show{transform:none}
  .ss-backdrop.show{display:block}
  .ss-main{margin-left:0}
  .ss-burger{display:inline-grid;place-items:center}
  .ss-content{padding:16px}
}