:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --text: #1f2328;
    --muted: #59636e;
    --accent: #1f6feb;
    --error: #cf222e;
    --border: #d0d7de;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;
        --card: #161b22;
        --text: #e6edf3;
        --muted: #9198a1;
        --accent: #4493f8;
        --error: #f85149;
        --border: #30363d;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 16px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
}

h1 { margin: 0 0 4px; font-size: 24px; }
.client { margin: 0 0 20px; color: var(--muted); }

form { display: grid; gap: 8px; margin-top: 16px; }
label { font-size: 14px; color: var(--muted); }

input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    margin-bottom: 8px;
}

button {
    margin-top: 8px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.error { color: var(--error); margin: 0; }

a.button {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

.alt { margin: 16px 0 0; text-align: center; }
.alt a, .check-phones a { color: var(--accent); }
.check-phones { list-style: none; padding: 0; margin: 8px 0 12px; font-size: 20px; }
.check-phones li { margin: 4px 0; }

/* Выбор способа входа и библиотеки (спека: Ui/Pages/Authentication/LoginPage.cs, AbisLoginPage.cs). */
.choices { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}
.choice:hover { border-color: var(--accent); }
.choice img, .library img { width: 24px; height: 24px; object-fit: contain; }
.library { display: flex; align-items: center; gap: 8px; }
.divider { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Отладочный токен на главной (спека: Ui/Pages/Authentication/HomePage.cs). */
.debug-token { display: grid; gap: 4px; margin: 0 0 8px; }
.debug-token textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: 12px/1.4 ui-monospace, Consolas, monospace;
    word-break: break-all;
    resize: vertical;
}