/* =====================================================================
   BookC Working — login e verificação em duas etapas (v2.1)
   Mesmo visual do sistema (estilo macOS/iOS). Tokens próprios porque estas
   telas não carregam o css/working-ui.css; os valores são os mesmos.
   ===================================================================== */
:root {
    --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --a-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --a-bg: #f5f5f7; --a-card: #ffffff; --a-fill: rgba(118, 118, 128, .12);
    --a-text: #1d1d1f; --a-text-2: #3a3a3c; --a-muted: #6e6e73; --a-subtle: #8e8e93;
    --a-border: rgba(0, 0, 0, .14); --a-sep: rgba(60, 60, 67, .12);
    --a-pri: #006adc; --a-pri-fill: #006adc; --a-pri-hover: #0058b8; --a-pri-soft: rgba(0, 106, 220, .11);
    --a-focus: 0 0 0 4px rgba(0, 106, 220, .28);
    --a-danger: #d70015; --a-danger-soft: rgba(255, 59, 48, .12);
    --a-warn: #b25000; --a-warn-soft: rgba(255, 149, 0, .15);
    --a-ok: #1f7a35; --a-ok-soft: rgba(52, 199, 89, .14);
    --a-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 12px 40px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .05);
    --a-ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}
html[data-theme='dark'] {
    --a-bg: #1c1c1e; --a-card: #2c2c2e; --a-fill: rgba(118, 118, 128, .24);
    --a-text: #f5f5f7; --a-text-2: #d1d1d6; --a-muted: #a1a1a6; --a-subtle: #98989d;
    --a-border: rgba(255, 255, 255, .16); --a-sep: rgba(84, 84, 88, .55);
    --a-pri: #5eabff; --a-pri-fill: #0a6fd8; --a-pri-hover: #2b8cf0; --a-pri-soft: rgba(10, 132, 255, .2);
    --a-focus: 0 0 0 4px rgba(10, 132, 255, .45);
    --a-danger: #ff6961; --a-danger-soft: rgba(255, 69, 58, .18);
    --a-warn: #ff9f0a; --a-warn-soft: rgba(255, 159, 10, .18);
    --a-ok: #30d158; --a-ok-soft: rgba(48, 209, 88, .18);
    --a-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
    min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 24px 16px; background: var(--a-bg) !important; color: var(--a-text);
    font-family: var(--a-font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
    overflow-x: hidden; position: static !important;
}
body::before, body::after, .particles { display: none !important; content: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--a-pri); outline-offset: 2px; border-radius: 6px; }

/* ---------- Cartão ---------- */
.login-container { width: 100%; max-width: 380px; padding: 0; position: relative; }
.login-card, .card {
    width: 100%; background: var(--a-card) !important; border: 0 !important; border-radius: 18px !important;
    box-shadow: var(--a-shadow) !important; padding: 36px 32px 28px; backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: aEntra .35s var(--a-ease) both; overflow: visible;
}
.card { max-width: 420px; padding: 0; }
@keyframes aEntra { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

/* ---------- Marca ---------- */
.login-brand { text-align: center; margin-bottom: 26px; }
.login-logo, .shield {
    width: 60px; height: 60px; border-radius: 14px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--a-pri-fill) !important; color: #fff; box-shadow: 0 6px 18px rgba(0, 106, 220, .25); font-size: 1.5rem;
}
.login-logo i, .shield i { color: #fff; font-size: 1.5rem; }
.login-title, .card-head h1 { font-family: var(--a-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--a-text); margin-bottom: 4px; }
.login-subtitle, .card-head p { font-size: 13px; color: var(--a-muted) !important; opacity: 1 !important; }
.card-head { background: transparent !important; color: var(--a-text) !important; text-align: center; padding: 32px 32px 4px !important; }
.card-body { padding: 18px 32px 28px !important; }

/* ---------- Campos ---------- */
.login-field { margin-bottom: 14px; }
.login-label { display: block; font-size: 13px; font-weight: 500; color: var(--a-text-2); text-transform: none; letter-spacing: 0; margin: 0 0 6px 2px; }
.login-input-wrap {
    display: flex; align-items: center; min-height: 44px; border-radius: 10px;
    background: var(--a-fill); border: 1px solid transparent; transition: border-color .18s var(--a-ease), box-shadow .18s var(--a-ease), background-color .18s;
}
.login-input-wrap:focus-within { background: var(--a-card); border-color: var(--a-pri); box-shadow: var(--a-focus); }
.login-input-icon { padding: 0 0 0 14px; color: var(--a-subtle); font-size: .85rem; }
.login-input-wrap input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--a-text); outline: none; }
.login-input-wrap input::placeholder { color: var(--a-subtle); }
.login-input-wrap input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--a-card) inset !important; -webkit-text-fill-color: var(--a-text) !important; }
.login-eye { border: 0; background: transparent; color: var(--a-muted); cursor: pointer; width: 44px; height: 44px; border-radius: 10px; font-size: .9rem; }
.login-eye:hover { color: var(--a-pri); }

/* ---------- Botões ---------- */
.login-btn, .btn {
    width: 100%; min-height: 44px; padding: 11px 16px; border: 0 !important; border-radius: 12px !important; cursor: pointer;
    background: var(--a-pri-fill) !important; color: #fff !important; font: inherit; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none !important;
    transition: background-color .18s var(--a-ease), transform .12s var(--a-ease), opacity .18s;
}
.login-btn { margin-top: 8px; }
.login-btn:hover, .btn:hover, .btn-primary:hover { background: var(--a-pri-hover) !important; transform: none !important; box-shadow: none !important; }
.login-btn:active, .btn:active { transform: scale(.985) !important; }
.login-btn:disabled, .btn:disabled { opacity: .55; cursor: default; }
.btn-outline, .btn.btn-outline { background: var(--a-fill) !important; color: var(--a-text) !important; margin-top: 8px; }
.btn-outline:hover, .btn.btn-outline:hover { background: rgba(118, 118, 128, .2) !important; color: var(--a-text) !important; }
.login-btn .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: aGira .6s linear infinite; }
.login-btn.loading .spinner { display: block; }
.login-btn.loading .btn-text { display: none; }
@keyframes aGira { to { transform: rotate(360deg); } }

/* ---------- Mensagens ---------- */
.login-error, .erro {
    display: none; margin-top: 14px; padding: 9px 12px; border-radius: 10px; border: 0 !important;
    background: var(--a-danger-soft) !important; color: var(--a-danger) !important; font-size: 13px; font-weight: 500; text-align: center;
}
.login-error.show, .erro { display: block; }
.erro { margin: 0 0 16px; }
.login-footer { text-align: center; margin-top: 22px; font-size: 12px; color: var(--a-subtle); }
.warn { display: flex; gap: 8px; align-items: flex-start; background: var(--a-warn-soft) !important; border: 0 !important; color: var(--a-warn) !important; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 12px 0; }
.warn i { color: inherit !important; margin-top: 2px; }
.logout-link { display: inline-block; margin-top: 16px; color: var(--a-pri) !important; font-size: 13px; text-decoration: none; }
.logout-link:hover { text-decoration: underline; }
.user-name { font-weight: 600; color: var(--a-text) !important; }

/* ---------- 2FA ---------- */
.step { display: none; }
.step.active { display: block; animation: aEntra .25s var(--a-ease) both; }
.step h2 { font-family: var(--a-display); font-size: 16px; font-weight: 600; color: var(--a-text) !important; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.step h2 .num { width: 24px; height: 24px; border-radius: 50%; background: var(--a-pri-soft) !important; color: var(--a-pri) !important; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.step p, .card-body p { font-size: 14px; color: var(--a-muted) !important; line-height: 1.5; margin-bottom: 14px; }
.apps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.apps a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--a-fill) !important; color: var(--a-text) !important; font-size: 13px; font-weight: 500; text-decoration: none; }
.apps a:hover { background: rgba(118, 118, 128, .2) !important; }
.qr-area { text-align: center; margin: 16px 0; }
.qr-area img, .qr-area canvas, .qr-area svg { border-radius: 12px; border: 1px solid var(--a-sep) !important; background: #fff; padding: 8px; }
.secret-box {
    background: var(--a-fill) !important; border: 0 !important; border-radius: 10px; padding: 10px 12px; margin: 12px 0; cursor: pointer;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 2px; text-align: center; color: var(--a-text) !important; word-break: break-all;
}
.secret-box:hover { background: rgba(118, 118, 128, .2) !important; }
.code-input { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.code-input input {
    width: 46px; height: 54px; text-align: center; font: inherit; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
    border: 1px solid transparent !important; border-radius: 12px; background: var(--a-fill); color: var(--a-text) !important; outline: none;
    transition: border-color .18s var(--a-ease), box-shadow .18s var(--a-ease), background-color .18s;
}
.code-input input:focus { background: var(--a-card); border-color: var(--a-pri) !important; box-shadow: var(--a-focus); }
.success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--a-ok-soft) !important; color: var(--a-ok) !important; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 2rem; }
#codeError { color: var(--a-danger) !important; }

@media (max-width: 480px) {
    body { padding: 16px 12px; justify-content: flex-start; padding-top: max(40px, 8vh); }
    .login-card { padding: 28px 20px 22px; border-radius: 16px !important; }
    .card-head { padding: 26px 20px 4px !important; }
    .card-body { padding: 14px 20px 22px !important; }
    .code-input { gap: 6px; }
    .code-input input { width: 42px; height: 50px; font-size: 20px; }
}
@media (max-width: 360px) { .code-input input { width: 38px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }