:root {
    color-scheme: dark;

    --ink-0:  #0a0a09;
    --ink-1:  #121110;
    --ink-2:  #191816;
    --line:   #2a2723;
    --line-soft: #1e1c1a;
    --text:   #efece5;
    --text-2: #a49d92;
    --text-3: #6d675e;
    --accent: #f5c518;
    --accent-ink: #171200;

    /* Same status colors the dashboard itself uses — one product, one palette. */
    --st-ok:  #0ca30c;
    --st-bad: #d03b3b;

    --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: var(--sans);
    background: var(--ink-0);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- the card ---------- */

.card-wrap { width: 100%; max-width: 400px; }
.frame { position: relative; }

.card {
    width: 100%;
    padding: 30px 28px;
    background: rgba(18, 17, 16, .78);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.login-mark {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 4px;
    object-fit: contain;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
    text-align: center;
}
.eyebrow b { color: var(--accent); font-weight: 500; }

h1 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
p.subtitle { margin: 0 0 22px; font-size: 13px; line-height: 1.5; color: var(--text-2); }

label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 7px;
}

.input-row { position: relative; }
.input-row svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
}
input {
    width: 100%;
    padding: 11px 12px 11px 34px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 7px;
    font-size: 13px;
    font-family: var(--mono);
    letter-spacing: .04em;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--text-3); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 197, 24, .16); }
input:focus + svg { color: var(--accent); }

button {
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--sans);
    cursor: pointer;
    transition: background .15s, transform .1s;
}
button:hover:not(:disabled) { background: #ffd430; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: default; }

.status-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-3);
    min-height: 14px;
}
.status-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--text-3);
}
.status-line.verifying .status-dot { background: var(--accent); box-shadow: 0 0 6px rgba(245,197,24,.7); animation: dot-pulse 1s ease-in-out infinite; }
.status-line.verifying #status-text { color: var(--text-2); }
.status-line.ok .status-dot { background: var(--st-ok); box-shadow: 0 0 6px rgba(12,163,12,.6); }
.status-line.ok #status-text { color: var(--st-ok); }
.status-line.error .status-dot { background: var(--st-bad); }
.status-line.error #status-text { color: #ef7676; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

footer {
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    opacity: .7;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 420px) {
    .card { padding: 24px 20px; }
    h1 { font-size: 19px; }
}

/* ---------- multi-step auth additions ---------- */

.field + .field { margin-top: 14px; }

.panel[hidden] { display: none; }

.alt-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 12px;
}
.alt-links.center { justify-content: center; }

.link-btn {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
.link-btn:hover:not(:disabled) { background: none; color: var(--accent); text-decoration-color: currentColor; }
a.link-btn { display: inline-block; }

input.code-input { letter-spacing: .4em; font-size: 15px; }