/*
 * Хам VPN — оформление сайта.
 *
 * Тема выбирается автоматически по настройке устройства (prefers-color-scheme):
 * тёмная по умолчанию, светлая — если у человека светлая тема системы.
 * Все цвета заданы переменными, поэтому разметка одна на обе темы.
 *
 * Принципы, которых стоит держаться при правках:
 *   1. Цвет несёт смысл: бирюзовый — действие, зелёный — работает, красный —
 *      остановлено или ошибка, жёлтый — требует внимания. Не использовать их
 *      как украшение.
 *   2. Кнопка должна быть видна кнопкой: заливка или рамка, вес шрифта 600,
 *      высота не меньше 44px (палец на телефоне).
 *   3. На странице один главный шаг — .btn (заливка). Равноценная
 *      альтернатива — .btn.alt (рамка акцентом). Второстепенное —
 *      .btn.secondary. Опасное — .btn.danger.
 */

:root {
    color-scheme: dark light;

    /* Поверхности */
    --bg: #0d1117;
    --bg-elev: #161d26;        /* карточки */
    --bg-sunken: #0a0e14;      /* поля ввода, реквизиты, тарифы */
    --border: #232c38;
    --border-strong: #35414f;

    /* Текст */
    --text: #e8eef5;
    --text-dim: #9fadbd;

    /* Акцент — действие */
    --accent: #23c493;         /* ссылки, рамки, подписи */
    --accent-fill: #2ee0a6;    /* заливка главной кнопки */
    --accent-fill-hover: #4fecba;
    --accent-ink: #04251b;     /* текст на заливке */
    --accent-soft: rgba(46, 224, 166, 0.14);

    /* Статусы */
    --green: #3fd67f;
    --green-soft: rgba(63, 214, 127, 0.15);
    --red: #ff6b6f;
    --red-soft: rgba(255, 107, 111, 0.15);
    --amber: #ffc84a;
    --amber-soft: rgba(255, 200, 74, 0.15);

    --radius: 12px;
    --radius-sm: 9px;
    --shadow: none;
    --shadow-btn: 0 1px 0 rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f8fa;
        --bg-elev: #ffffff;
        --bg-sunken: #eef3f7;
        --border: #dbe3ea;
        --border-strong: #c3cfda;

        --text: #16212d;
        --text-dim: #5a6a7a;

        --accent: #0a7f5f;
        --accent-fill: #0a8f6a;
        --accent-fill-hover: #087a5a;
        --accent-ink: #ffffff;
        --accent-soft: rgba(10, 143, 106, 0.10);

        --green: #0f8a48;
        --green-soft: rgba(15, 138, 72, 0.12);
        --red: #c0392f;
        --red-soft: rgba(192, 57, 47, 0.12);
        --amber: #9a6b06;
        --amber-soft: rgba(154, 107, 6, 0.14);

        --shadow: 0 1px 2px rgba(16, 33, 48, 0.06), 0 2px 8px rgba(16, 33, 48, 0.04);
        --shadow-btn: 0 1px 2px rgba(16, 33, 48, 0.12);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Видимый фокус с клавиатуры — иначе сайтом нельзя пользоваться без мыши. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Шапка ---- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}

.logo {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: -0.01em;
}
.logo:hover { text-decoration: none; color: var(--accent); }

.site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.site-header nav a {
    color: var(--text-dim);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}
.site-header nav a:hover {
    color: var(--text);
    background: var(--bg-sunken);
    text-decoration: none;
}

.btn-nav {
    background: var(--accent-fill);
    color: var(--accent-ink) !important;
    font-weight: 600;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm);
}
.btn-nav:hover { background: var(--accent-fill-hover); color: var(--accent-ink) !important; text-decoration: none; }

/* ---- Каркас ---- */

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}

h1 { font-size: 1.9rem; margin-bottom: 8px; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; margin-top: 32px; letter-spacing: -0.01em; }
p.lead { color: var(--text-dim); font-size: 1.05rem; }

.card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

/* ---- Формы ---- */

.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 0.9rem; }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    padding: 11px 12px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Кнопки ---- */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: var(--accent-fill);
    color: var(--accent-ink);
    border: 1px solid transparent;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
button:hover, .btn:hover {
    background: var(--accent-fill-hover);
    color: var(--accent-ink);
    text-decoration: none;
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Равноценная альтернатива главному действию: рамка акцентом. */
button.alt, .btn.alt {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
button.alt:hover, .btn.alt:hover { background: var(--accent-soft); border-color: var(--accent-fill); color: var(--accent); }

/* Второстепенное действие: видно, что кнопка, но не тянет взгляд. */
button.secondary, .btn.secondary {
    background: var(--bg-sunken);
    border-color: var(--border-strong);
    color: var(--text);
    font-weight: 500;
}
button.secondary:hover, .btn.secondary:hover { background: var(--bg-elev); border-color: var(--accent); color: var(--text); }

/* Опасное действие. */
button.danger, .btn.danger {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
    font-weight: 600;
}
button.danger:hover, .btn.danger:hover { background: var(--red); color: #fff; }

/* Мелкая кнопка рядом с текстом — «скопировать» и подобные. */
.copy-btn {
    min-height: 34px;
    padding: 5px 12px !important;
    font-size: 0.85rem !important;
    margin-left: 8px;
}

.btn-block, button.block { width: 100%; }

/* ---- Сообщения ---- */

.flash-list { margin-bottom: 20px; }
.flash {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.flash-error { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.flash-success { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.flash-info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---- Статусы и строки ---- */

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.status-active { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.status-disabled { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.config-row:last-child { border-bottom: none; }

.balance { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---- Тарифы ---- */

/* Подпись шага: человек должен понимать, что от него сейчас требуется. */
.step-label {
    margin: 20px 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dim);
}

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 8px 0 4px;
}

/*
 * Тариф — это переключатель, а не карточка с текстом. Поэтому кружок крупный
 * (22px вместо системных ~13px), выкрашен акцентом, и вся карточка целиком
 * реагирует на выбор: рамка, фон и подпись «Выбрано». Мелкий кружок читался
 * как украшение, и шаг проскакивали.
 */
.plan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Сбрасываем общий стиль label — тариф это не подпись к полю. */
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 0;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 12px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.plan-card:hover { border-color: var(--border-strong); background: var(--bg-elev); }

.plan-card input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0 0 6px;
    accent-color: var(--accent-fill);
    cursor: pointer;
    flex: none;
}
.plan-card .plan-months { font-weight: 700; font-size: 1.05rem; }
.plan-card .plan-price { font-size: 1rem; }
.plan-card .discount { color: var(--green); font-size: 0.85rem; font-weight: 600; }

/* Выбранный тариф — видно с одного взгляда, за что платишь. */
.plan-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.plan-card:has(input:checked)::after {
    content: "Выбрано";
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}
/* Фокус с клавиатуры подсвечивает всю карточку, а не только кружок. */
.plan-card:focus-within { border-color: var(--accent); }

/* ---- Реквизиты ---- */

.requisites {
    background: var(--bg-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin: 12px 0;
    line-height: 2;
}

/* ---- Подвал ---- */

.site-footer {
    text-align: center;
    padding: 24px;
    color: var(--text-dim);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--accent); }

@media (max-width: 560px) {
    .site-header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
    .site-header nav a { padding: 6px 8px; font-size: 0.9rem; }
    .container { padding: 20px 14px 60px; }
    h1 { font-size: 1.6rem; }
    /* На телефоне кнопки во всю ширину — по ним проще попасть. */
    .card > form > button,
    .card > form > .btn { width: 100%; }
    .copy-btn { width: auto !important; }
}

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

/* ---- Админ-панель ---- */

.container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.stat-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.stat-card .num { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-card .label { color: var(--text-dim); font-size: 0.85rem; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-nav a {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
}
.admin-nav a:hover { border-color: var(--accent); text-decoration: none; }
.admin-nav a.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.admin-table th, table.admin-table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.admin-table th { color: var(--text-dim); font-weight: 600; }
table.admin-table tr:hover td { background: var(--bg-sunken); }
/* В таблицах кнопки компактнее, иначе строка раздувается. */
table.admin-table button, table.admin-table .btn {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 0.85rem;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.badge-active { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.badge-banned, .badge-disabled { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.badge-suspended { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }

.inline-form { display: inline; }
.search-form { display: flex; gap: 8px; margin-bottom: 16px; max-width: 400px; }
.small-input { width: auto !important; padding: 9px 10px !important; }

/* Подтверждение действия прямо на странице (скрипт в base.html) */
.confirm-box {
    display: block;
    flex-basis: 100%;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-elev);
    white-space: normal;
    text-align: left;
}
.confirm-text { white-space: pre-line; margin-bottom: 8px; font-size: 0.9rem; }
.confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm-actions button { padding: 4px 12px; font-size: 0.85rem; }