* { 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:400px; box-shadow:0 4px 24px rgba(14,27,46,.08); overflow:hidden;
}
.card-accent { height:4px; background: linear-gradient(90deg, #15803d, #4ade80); }
.card-body { padding:36px 36px 32px; }

/* ─── HEADER ─── */
.card-header { text-align:center; margin-bottom:32px; }
.logo-wrap {
    width:52px; height:52px; border-radius:12px; background:#15803d;
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
    box-shadow:0 4px 12px rgba(21,128,61,.25);
}
.logo-wrap svg { width:24px; height:24px; }
.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; }

/* ─── MENSAGENS 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;
}
.success-box {
    background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #15803d;
    padding: 12px; border-radius: 9px; font-size: 13px; font-weight: 600;
    text-align: center; margin-bottom: 20px;
}

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

.eye-btn {
    position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; 
    border:none; cursor:pointer; color:#94a3b8; padding:4px; display:flex; align-items:center;
}
.eye-btn:hover { color:#475569; }

.pwd-strength { margin-top:8px; }
.pwd-bar-track { height:3px; background:#e2e8f0; border-radius:2px; overflow:hidden; margin-bottom:5px; }
.pwd-bar-fill { height:100%; border-radius:2px; width:0%; transition: width .3s, background .3s; }
.pwd-hint { font-size:11px; color:#94a3b8; }

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

/* ─── BOTÕES ─── */
.btn-submit {
    width:100%; padding:14px; background:#15803d; 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:14px;
    box-shadow:0 3px 10px rgba(21,128,61,.25); display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover { background:#166534; box-shadow:0 4px 14px rgba(21,128,61,.35); transform:translateY(-1px); }
.btn-submit:active { transform:scale(.99); }

.card-footer { text-align:center; }
.link-back {
    font-size:12px; font-weight:600; color:#64748b; text-decoration:none; 
    cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.link-back:hover { color:#0f172a; }
.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:#166534; }
body.dark .error-box { background: rgba(185,28,28,0.1); border-color: #7f1d1d; color: #fca5a5; }
body.dark .success-box { background: rgba(21,128,61,0.1); border-color: #14532d; color: #86efac; }
body.dark .form-group label { color:#999; }
body.dark .input-wrap input { background:#3a3a3a; border-color:#444; color:#d1d1d1; }
body.dark .input-wrap input:focus { border-color:#4ade80; background:#444; box-shadow:0 0 0 3px rgba(74,222,128,.08); }
body.dark .input-wrap input::placeholder { color:#777; }
body.dark .eye-btn { color:#888; }
body.dark .eye-btn:hover { color:#aaa; }
body.dark .pwd-bar-track { background:#3a3a3a; }
body.dark .pwd-hint { color:#888; }
body.dark .divider { background:#3a3a3a; }
body.dark .btn-submit { background:#166534; box-shadow:0 3px 10px rgba(22,101,52,.2); }
body.dark .btn-submit:hover { background:#14532d; }
body.dark .link-back { color:#999; }
body.dark .link-back:hover { color:#d1d1d1; }
body.dark .page-footer { color:#999; }
/* ── RESPONSIVO ── */
@media(max-width:480px) {
  body { padding:16px 12px; }
  .card-body { padding:24px 20px 20px; }
  .card-title { font-size:17px; }
}