/* Minimal base styles until the customer space design (phase 6). */
:root {
    --c-bg: #f5f7fa;
    --c-surface: #ffffff;
    --c-text: #1f2933;
    --c-muted: #616e7c;
    --c-border: #d9e2ec;
    --c-primary: #1d4ed8;
    --c-admin: #7c2d12;
    --c-danger: #b91c1c;
    --c-success: #15803d;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.5;
}

a { color: var(--c-primary); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--c-primary);
    color: #fff;
}
.topbar-admin { background: var(--c-admin); }
.topbar a { color: #fff; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar .muted { color: rgba(255, 255, 255, .8); }
.brand { font-weight: 700; text-decoration: none; }

.container { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.card.narrow { max-width: 440px; margin: 0 auto; }
.card h1 { margin-top: 0; font-size: 1.4rem; }

label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
label.checkbox { font-weight: normal; display: flex; gap: .5rem; align-items: center; }

input[type="email"], input[type="password"], input[type="text"] {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font: inherit;
}

button, .button {
    display: inline-block;
    margin-top: 1rem;
    padding: .6rem 1.2rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
button.danger { background: var(--c-danger); }

.muted { color: var(--c-muted); }
.help-text, .form-help { color: var(--c-muted); font-size: .9rem; }

.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-success { background: #dcfce7; color: var(--c-success); }
.flash-error { background: #fee2e2; color: var(--c-danger); }
.flash-info { background: #e0e7ff; color: #3730a3; }

form ul { color: var(--c-danger); padding-left: 1.2rem; }
.backup-codes { columns: 2; list-style: none; padding: 0; }
.backup-codes li { color: var(--c-text); padding: .25rem 0; }
.backup-codes code, .secret { font-size: 1.05rem; letter-spacing: .05em; }
.qr img { border: 1px solid var(--c-border); border-radius: var(--radius); }