* { margin:0; padding:0; box-sizing:border-box; transition: background-color .2s, border-color .2s, color .2s; }

body {
    font-family:'Sora',sans-serif;
    background:#eef1f7;
    min-height:100vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px 16px;
    -webkit-font-smoothing:antialiased;
}

/* ─── THEME TOGGLE ─── */
.theme-toggle {
    position:fixed; top:16px; right:16px;
    width:36px; height:36px; border-radius:8px;
    background:#ffffff; border:1px solid #e2e8f0;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; z-index:100;
    box-shadow:0 1px 4px rgba(14,27,46,.08);
}
.theme-toggle:hover { background:#f1f5f9; }

/* ─── CARD PRINCIPAL ─── */
.card {
    background:#ffffff; border:1.5px solid #e2e8f0; border-radius:16px;
    width:100%; max-width:420px; box-shadow:0 4px 24px rgba(14,27,46,.08);
    overflow:hidden;
}
.card-accent { height:4px; background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.card-body { padding:36px 36px 32px; }

/* ─── HEADER ─── */
.card-header { text-align:center; margin-bottom:25px; }
.logo-wrap {
    width:52px; height:52px; border-radius:12px; background:#1e40af;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; box-shadow:0 4px 12px rgba(30,64,175,.25);
}
.logo-wrap svg { width:26px; height:26px; }
.card-title { font-size:20px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#0f172a; margin-bottom:4px; }
.card-sub { font-size:10.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#94a3b8; }

/* ─── MENSAGEM DE ERRO FLASK ─── */
.error-box {
    background: #fef2f2; border: 1.5px solid #fecaca; color: #b91c1c;
    padding: 12px; border-radius: 9px; font-size: 13px; font-weight: 600;
    text-align: center; margin-bottom: 20px;
}

/* ─── FORM FIELDS ─── */
.form-group { margin-bottom:18px; }
.form-group label {
    display:block; font-size:11px; font-weight:700; color:#64748b; 
    letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;
}
.form-group input {
    width:100%; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:9px;
    padding:11px 14px; font-family:'Sora',sans-serif; font-size:14px;
    font-weight:500; color:#0f172a; outline:none;
}
.form-group input:focus { border-color:#93c5fd; background:#fff; box-shadow:0 0 0 3px rgba(147,197,253,.15); }
.form-group input::placeholder { color:#cbd5e1; font-weight:400; }

.sec-label { font-size:11px; font-weight:700; color:#64748b; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; margin-top:22px; }

/* ─── OPTION GRID (Botões Turma/Equipamento) ─── */
.opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cols3 { grid-template-columns:1fr 1fr; }
.opt-full { grid-column:1/-1; }
.opt-btn {
    background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:9px;
    padding:10px 14px; font-family:'Sora',sans-serif; font-size:13px;
    font-weight:600; color:#475569; cursor:pointer; text-align:center; user-select:none;
}
.opt-btn:hover { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }

/* Cores Dinâmicas Turma/Equipamento */
.opt-btn.sel-verde   { background:#16a34a; border-color:#16a34a; color:#ffffff; font-weight:700; }
.opt-btn.sel-azul    { background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; font-weight:700; }
.opt-btn.sel-branco  { background:#475569; border-color:#475569; color:#ffffff; font-weight:700; }
.opt-btn.sel-amarelo { background:#ca8a04; border-color:#ca8a04; color:#ffffff; font-weight:700; }
.opt-btn.sel-default { background:#475569; border-color:#475569; color:#ffffff; font-weight:700; }
.opt-btn.sel-equip   { background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; font-weight:700; }

.divider { height:1px; background:#e2e8f0; margin:24px 0; }

/* ─── BOTÕES AÇÕES ─── */
.btn-enter {
    width:100%; padding:14px; background:#1d4ed8; border:none; border-radius:9px;
    font-family:'Sora',sans-serif; font-size:14px; font-weight:700; letter-spacing:.5px; 
    text-transform:uppercase; color:#fff; cursor:pointer; margin-bottom:10px; box-shadow:0 3px 10px rgba(29,78,216,.25);
}
.btn-enter:hover { background:#1e40af; box-shadow:0 4px 14px rgba(29,78,216,.35); transform:translateY(-1px); }
.btn-enter:active { transform:scale(.99); }

.btn-create {
    width:100%; padding:12px; background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:9px;
    font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:#475569; 
    cursor:pointer; display:block; text-align:center; text-decoration:none;
}
.btn-create:hover { background:#e2e8f0; color:#0f172a; }

/* ─── FOOTER ─── */
.card-footer { text-align:center; margin-top:18px; }
.link-forgot { font-size:12px; font-weight:600; color:#1d4ed8; text-decoration:none; cursor:pointer; }
.link-forgot:hover { text-decoration:underline; }
.page-footer { margin-top:24px; text-align:center; font-size:11px; color:#94a3b8; }

/* ══ DARK MODE ══ */
body.dark { background:#212121; }
body.dark .theme-toggle { background:#2f2f2f; border-color:#3a3a3a; color:#8e8ea0; }
body.dark .theme-toggle:hover { background:#3a3a3a; }
body.dark .card { background:#2f2f2f; border-color:#3a3a3a; box-shadow:0 4px 24px rgba(0,0,0,.25); }
body.dark .card-title { color:#ececec; }
body.dark .card-sub { color:#888; }
body.dark .logo-wrap { background:#3a5fd6; }
body.dark .error-box { background: rgba(185,28,28,0.1); border-color: #7f1d1d; color: #fca5a5; }
body.dark .form-group label { color:#999; }
body.dark .form-group input { background:#3a3a3a; border-color:#444; color:#d1d1d1; }
body.dark .form-group input:focus { border-color:#4a90d9; background:#444; box-shadow:0 0 0 3px rgba(74,144,217,.1); }
body.dark .form-group input::placeholder { color:#777; }
body.dark .sec-label { color:#999; }
body.dark .opt-btn { background:#3a3a3a; border-color:#444; color:#bbb; }
body.dark .opt-btn:hover { background:#444; border-color:#555; color:#d1d1d1; }
body.dark .opt-btn.sel-verde   { background:#16a34a; border-color:#16a34a; color:#ffffff; font-weight:700; }
body.dark .opt-btn.sel-azul    { background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; font-weight:700; }
body.dark .opt-btn.sel-branco  { background:#475569; border-color:#475569; color:#ffffff; font-weight:700; }
body.dark .opt-btn.sel-amarelo { background:#ca8a04; border-color:#ca8a04; color:#ffffff; font-weight:700; }
body.dark .opt-btn.sel-default { background:#475569; border-color:#475569; color:#ffffff; font-weight:700; }
body.dark .opt-btn.sel-equip   { background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; font-weight:700; }
body.dark .divider { background:#3a3a3a; }
body.dark .btn-enter { background:#3a5fd6; box-shadow:0 3px 10px rgba(58,95,214,.2); }
body.dark .btn-enter:hover { background:#4a6fe6; }
body.dark .btn-create { background:#3a3a3a; border-color:#444; color:#bbb; }
body.dark .btn-create:hover { background:#444; color:#d1d1d1; }
body.dark .link-forgot { color:#4a90d9; }
body.dark .page-footer { color:#999; }
/* ── RESPONSIVO ADICIONAL ── */
@media(max-width:480px) {
  body { padding:16px 12px; }
  .card-body { padding:24px 20px 20px; }
  .opt-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .opt-btn { font-size:12px; padding:8px 10px; }
  .card-title { font-size:17px; }
}
@media(max-width:360px) {
  .cols3 { grid-template-columns:1fr 1fr; }
}