/* Токены и компоненты — те же, что у vpnsharing: вход и сервис за ним должны
   выглядеть одним сайтом. Взято ровно столько, сколько нужно на четыре
   страницы, без переключателя темы: тут нечего настраивать, тут вводят пароль. */

:root {
    color-scheme: light;

    --bg:            #f6f6f4;
    --surface:       #ffffff;
    --surface-2:     #faf9f7;
    --surface-sunk:  #f2f1ed;

    --text:          #17171a;
    --text-soft:     #55555f;
    --text-faint:    #8a8a95;

    --line:          #e3e1dc;
    --line-strong:   #cfccc5;

    --accent:        #14655a;
    --accent-soft:   #e3f0ed;
    --accent-text:   #0d4a41;
    --accent-on:     #ffffff;

    --ok:            #1c7a54;
    --ok-soft:       #e4f3ec;
    --bad:           #a32c28;
    --bad-soft:      #fbe9e7;

    --glow:          transparent;

    --radius:        14px;
    --radius-sm:     10px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #0d0e11; --surface: #16181d; --surface-2: #1b1e24; --surface-sunk: #111318;
        --text: #eceef2; --text-soft: #a3a8b4; --text-faint: #6d7280;
        --line: #262a32; --line-strong: #363b45;
        --accent: #3ddbc0; --accent-soft: #12312e; --accent-text: #7ff0da; --accent-on: #06201c;
        --ok: #4ade9e; --ok-soft: #10281f;
        --bad: #ff7d72; --bad-soft: #2e1614;
        --glow: rgba(61, 219, 192, .16);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Та же едва различимая сетка на фоне, что у соседей. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 0%, transparent 75%);
    opacity: .5;
}
body > * { position: relative; z-index: 1; }

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.125rem; }
p  { margin: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

code, .mono { font-family: var(--mono); font-size: .875em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

.shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }
.narrower { max-width: 420px; margin-left: auto; margin-right: auto; }

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

.stack { display: flex; flex-direction: column; gap: 14px; }
.row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .06s, box-shadow .15s;
}
.btn:hover { background: var(--surface-sunk); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn--primary:hover {
    background: color-mix(in srgb, var(--accent) 86%, var(--text));
    border-color: color-mix(in srgb, var(--accent) 86%, var(--text));
    box-shadow: 0 0 0 4px var(--glow);
}
.btn--block { width: 100%; }
.btn--sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .85rem; font-weight: 500; }

.input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.input--code {
    font-family: var(--mono);
    font-size: 1.25rem;
    letter-spacing: .3em;
    text-align: center;
}

.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }

.note {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .875rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.note__icon { flex-shrink: 0; margin-top: 1px; opacity: .85; }
.note--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: color-mix(in srgb, var(--bad) 78%, var(--text)); }
.note--ok  { background: var(--ok-soft);  border-color: color-mix(in srgb, var(--ok) 25%, transparent);  color: color-mix(in srgb, var(--ok) 78%, var(--text)); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .72rem;
    color: var(--text-soft);
    white-space: nowrap;
}
.badge--accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-text); }
.badge--bad    { background: var(--bad-soft);    border-color: color-mix(in srgb, var(--bad) 30%, transparent);    color: color-mix(in srgb, var(--bad) 78%, var(--text)); }

.table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow-x: auto;
}
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
    text-align: left;
    font-weight: 500;
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-service { text-align: center; }
.table td.col-service { text-align: center; }
.table th.col-service { text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--text-soft); white-space: nowrap; }

.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.small { font-size: .82rem; }
.tiny  { font-size: .75rem; }
.center{ text-align: center; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

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