/*
 * Стили страницы документации капчи.
 *
 * Цвета — из docs/design-colors.md (тёмная тема) и меняются только там:
 * файл отражает документ, а не наоборот (CLAUDE.md §11). Своя короткая
 * таблица вместо общей: странице нужно шесть элементов, и тянуть ради них
 * дизайн-систему целиком незачем.
 */

:root {
    color-scheme: dark;

    --bg: #171426;
    --surface: #1E1A30;
    --code-bg: #12101F;
    --text: #F5F2FF;
    --text-secondary: #B7B2C9;
    --border: #2E2848;
    --primary: #7B6CFF;
    --warn: #FFB020;

    --radius: 14px;
    --gap: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.brand { font-weight: 700; letter-spacing: 0.5px; }
.brand span { color: var(--primary); }

.wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px 56px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

h1 { margin: 0 0 12px; font-size: 26px; }
h2 { margin: 0 0 12px; font-size: 18px; }

pre {
    margin: 0 0 12px;
    padding: 14px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
}

code { font-family: "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 14px; }

.rows { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rows > div { display: flex; justify-content: space-between; gap: 12px; }
.rows dt { color: var(--text-secondary); }
.rows dd { margin: 0; text-align: right; }

.note {
    border-left: 3px solid var(--primary);
    background: var(--code-bg);
    padding: 10px 14px;
    border-radius: 0 10px 10px 0;
}

.note.warn { border-left-color: var(--warn); }

.demo { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.demo img { border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.demo-controls { display: flex; align-items: center; gap: 12px; }

.btn {
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.btn:disabled { opacity: 0.6; cursor: default; }

.link { color: var(--primary); text-decoration: none; }
.muted { color: var(--text-secondary); }
.small { font-size: 13px; }

.foot {
    padding: 24px 16px 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}