/* ═══════════════════════════════════════════════════════
   base.css — reset, typography, login screen, responsive
   ═══════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Heebo',sans-serif;background:#F3F4F6;color:#1F2937;font-size:18px}

/* ── Login ─────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;background:linear-gradient(135deg,#EFF6FF 0%,#F3F4F6 100%);
  display:flex;align-items:center;justify-content:center;z-index:9999
}
.login-card{
  background:#fff;padding:48px 40px;border-radius:20px;
  box-shadow:0 8px 40px rgba(37,99,235,.12);
  width:380px;max-width:92vw;text-align:center
}
.login-logo{font-size:52px;margin-bottom:12px}
.login-card h1{font-size:26px;font-weight:800;color:#2563EB;margin-bottom:6px}
.login-card p{color:#9CA3AF;font-size:17px;margin-bottom:28px}
.login-input{
  width:100%;padding:13px 16px;border:2px solid #E5E7EB;border-radius:10px;
  font-size:18px;font-family:'Heebo',sans-serif;text-align:center;letter-spacing:6px;
  outline:none;transition:border-color .2s
}
.login-input:focus{border-color:#2563EB}
.login-btn{
  margin-top:14px;width:100%;background:#2563EB;color:#fff;
  border:none;padding:13px;border-radius:10px;font-size:15px;
  font-family:'Heebo',sans-serif;font-weight:700;cursor:pointer;transition:background .15s
}
.login-btn:hover{background:#1D4ED8}
.login-error{color:#EF4444;margin-top:12px;font-size:16px;min-height:20px}
.forgot-link{color:#9CA3AF;font-size:16px;margin-top:10px;cursor:pointer;text-decoration:underline;display:block}
.forgot-link:hover{color:#2563EB}
.reset-panel{display:none;margin-top:16px;text-align:right;background:#F9FAFB;border-radius:12px;padding:16px}
.reset-panel label{font-size:16px;font-weight:600;color:#374151;display:block;margin-bottom:6px}
.reset-panel input{
  width:100%;padding:10px 14px;border:2px solid #E5E7EB;border-radius:9px;
  font-size:17px;font-family:'Heebo',sans-serif;outline:none;margin-bottom:10px;letter-spacing:0;text-align:right
}
.reset-panel input:focus{border-color:#2563EB}
.reset-panel-btn{
  width:100%;padding:10px;background:#2563EB;color:#fff;border:none;border-radius:9px;
  font-size:17px;font-family:'Heebo',sans-serif;font-weight:700;cursor:pointer
}

/* ── Loading & empty ─────────────────────────────── */
.loading{display:flex;align-items:center;justify-content:center;padding:60px;gap:14px;color:#9CA3AF;font-size:18px}
.spinner{width:30px;height:30px;border:3px solid #E5E7EB;border-top-color:#2563EB;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:48px 24px;color:#9CA3AF}
.empty-state .empty-icon{font-size:40px;margin-bottom:12px}
.empty-state p{font-size:18px}

/* ── Responsive ─────────────────────────────────── */
@media(max-width:820px){
  .sidebar{display:none}
  .main-content{margin-right:0;padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .profile-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
}
@media(max-width:500px){.stats-grid{grid-template-columns:1fr}}