/* Shared theme tokens and small utilities for Hoop Manager */
:root{
  --bg-100: #07122b;
  --bg-200: #0a1833;
  --accent: #1ecfff;
  --accent-2: #3ad0ff;
  --muted: #bfefff;
  --card-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --radius: 12px;
  --font-sans: 'Montserrat', Arial, sans-serif;
}

/* Global helpers */
.full-bleed-bg{
  background: linear-gradient(180deg,var(--bg-100) 0%, var(--bg-200) 100%);
  min-height:100vh;
  color:var(--muted);
  font-family:var(--font-sans);
}

/* Login page specific */
.login-page{ display:flex; align-items:center; justify-content:center; padding:40px 16px; background: linear-gradient(135deg, rgba(10,24,51,0.85), rgba(6,16,36,0.9)); }
.login-container{ width:100%; max-width:960px; display:flex; gap:28px; align-items:center; justify-content:center; }
.login-card{ width:100%; max-width:520px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; padding:28px; box-shadow:0 10px 40px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03); }
.login-card__brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.login-card__brand img{ width:56px; height:56px; object-fit:contain; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.45); }
.login-card__brand p{ margin:0; font-weight:800; color:#e7fbff; letter-spacing:0.2px; }

.login-card__form{ display:flex; flex-direction:column; gap:14px; }
.form-group{ display:flex; flex-direction:column; }
.form-control{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:12px 14px; border-radius:10px; color:var(--muted); outline:none; font-size:1rem; }
.form-control:focus{ border-color:var(--accent); box-shadow:0 6px 24px rgba(30,207,255,0.06); }
.has-toggle{ position:relative; }
.password-toggle{ position:absolute; right:8px; top:8px; background:transparent; border:0; color:#bfefff; padding:8px; border-radius:8px; cursor:pointer; }

.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:12px 18px; border-radius:10px; cursor:pointer; font-weight:800; }
.btn-primary{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#07122b; border:0; box-shadow:0 10px 30px rgba(30,207,255,0.12); }
.btn-primary:hover{ transform:translateY(-3px); }
.btn.secondary{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); }

.flash-message{ margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(255,0,0,0.06); color:#ffdede; }

.login-card__footer{ margin-top:14px; font-size:0.9rem; color:#cfeafe; }

/* Responsive */
@media (max-width:720px){ .login-card{ padding:20px; max-width:420px; } .login-container{ padding:8px; } }

/* Small utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Spinner */
.spinner{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.12); border-top-color:var(--accent); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }