:root{
    /* Цвета */
    --brand:#b91c1c; --brand-foreground:#ffffff;
    --surface:#ffffff; --surface-2:#f8fafc; /* вторичная поверхность */
    --text:#111827; --muted:#6b7280;
    --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
    --ring:#2563eb;

    /* Поля форм (light) */
    --field:#ffffff; --on-field:#111827; --field-border:#d1d5db; --field-placeholder:#9ca3af;

    /* Радиусы/тени */
    --radius:0.75rem; /* 12px */
    --shadow:0 6px 24px rgba(0,0,0,.08);

    /* Типографика (системный стек) */
    --font-system:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
}
html[data-theme="dark"]{
    --surface:#0b0f19; --surface-2:#111827;
    --text:#f3f4f6; --muted:#9ca3af;
    /* Поля форм (dark) */
    --field:#111827; --on-field:#f3f4f6; --field-border:#374151; --field-placeholder:#9ca3af;
    --shadow:0 8px 28px rgba(0,0,0,.35);
}

/* Базовая типографика/ссылки/коды */
body{font:16px/1.6 var(--font-system); color:var(--text); background:var(--surface);}
h1{font-size:1.875rem; line-height:1.2; font-weight:800; letter-spacing:-0.01em;}
h2{font-size:1.5rem; line-height:1.25; font-weight:700;}
h3{font-size:1.25rem; line-height:1.3; font-weight:700;}
p,li{max-width:72ch;}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}
a:where(:not(.btn)){color:var(--brand); text-decoration:underline;}
blockquote{border-inline-start:4px solid var(--brand); padding:0.5rem 1rem; margin:1rem 0; color:var(--text);}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.15),transparent);opacity:.3}

/* Поля форм по токенам (доступный контраст) */
:where(input,textarea,select){
    background:var(--field); color:var(--on-field); border:1px solid var(--field-border);
    border-radius:var(--radius); padding:0.625rem 0.75rem; caret-color:var(--on-field);
}
:where(input,textarea,select)::placeholder{color:var(--field-placeholder); opacity:1}
input:focus-visible,textarea:focus-visible,select:focus-visible{
    outline:0; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ring);
    border-color:transparent;
}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger)}
/* WebKit autofill */
input:-webkit-autofill{ -webkit-text-fill-color:var(--on-field); transition:background-color 9999s ease-in-out 0s; }

/* Фокус-кольца по умолчанию (для любых интерактивов) */
:where(a,button,[role="button"],[tabindex]:not([tabindex="-1"])):focus{outline:0}
:where(a,button,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{
    box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ring); border-radius:calc(var(--radius) - 2px);
}

/* Motion-safe/Reduce */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}

/* Скелетоны и спиннер */
.skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size:200% 100%; animation:skl 1.2s linear infinite}
@keyframes skl{to{background-position:-200% 0}}
.spinner{inline-size:1rem; block-size:1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* Небольшие вспомогательные классы */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:80rem; margin-inline:auto; padding-inline:1rem}
.shadow-brand{box-shadow:var(--shadow)}
.card{background:var(--surface); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius)}
.btn{display:inline-flex; align-items:center; gap:.5rem; border-radius:var(--radius); padding:.5rem .875rem; font-weight:600; border:1px solid transparent}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn[aria-busy="true"] .spinner{display:inline-block}
.btn-primary{background:var(--brand); color:var(--brand-foreground)}
.btn-primary:hover{filter:brightness(0.95)}
.btn-secondary{background:var(--surface-2); border-color:#d1d5db; color:var(--text)}
.btn-outline{background:transparent; border-color:var(--brand); color:var(--brand)}
.btn-ghost{background:transparent; color:var(--text)}
.btn-link{background:transparent; padding:0; border:0; color:var(--brand); text-decoration:underline}
.badge{display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; border-radius:999px; padding:.25rem .5rem; border:1px solid transparent}
.badge-muted{background:var(--surface-2); color:var(--text); border-color:rgba(0,0,0,.05)}
.badge-success{background:var(--success); color:#fff}
.badge-warning{background:var(--warning); color:#111827}
.badge-danger{background:var(--danger); color:#fff}
.link-icon{display:inline-flex; gap:.375rem; align-items:center; text-decoration:underline}
.kbd{border:1px solid rgba(0,0,0,.15); border-bottom-width:2px; border-radius:6px; padding:0 .375rem; font:600 .8125rem/1.6 ui-monospace,monospace}

/* Таблица */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:.625rem .75rem}
thead th{position:sticky; top:0; background:var(--surface); border-bottom:1px solid rgba(0,0,0,.1); text-align:left}
tbody tr:nth-child(odd){background:color-mix(in oklab, var(--surface) 85%, var(--text) 5%)}
th.sortable{cursor:pointer; user-select:none}
th.sortable:after{content:"↕"; margin-inline-start:.375rem; opacity:.5}

/* Диалог/модал */
[data-dialog-backdrop]{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none}
[data-dialog-backdrop][data-open="true"]{display:block}
[data-dialog]{position:fixed; inset:0; display:grid; place-items:center; padding:1rem}
[data-dialog] .panel{max-width:36rem; width:100%; background:var(--surface); border:1px solid rgba(0,0,0,.1); border-radius:var(--radius); box-shadow:var(--shadow)}

/* Тост */
#toast-root{position:fixed; inset-inline-end:1rem; inset-block-end:1rem; display:flex; flex-direction:column; gap:.5rem; z-index:50}
.toast{min-width:16rem; max-width:28rem; background:var(--surface); border:1px solid rgba(0,0,0,.1); border-radius:var(--radius); padding:.75rem .875rem; box-shadow:var(--shadow)}
.toast[data-status="success"]{border-color:color-mix(in oklab, var(--success) 60%, black 10%)}
.toast[data-status="warning"]{border-color:color-mix(in oklab, var(--warning) 60%, black 10%)}
.toast[data-status="danger"]{border-color:color-mix(in oklab, var(--danger) 60%, black 10%)}

/* Тултип */
.tooltip{position:absolute; z-index:40; background:var(--surface); color:var(--text); border:1px solid rgba(0,0,0,.1); border-radius:8px; padding:.375rem .5rem; box-shadow:var(--shadow); font-size:.875rem; max-width:20rem}

/* Командная палитра */
#cmdk{position:fixed; inset:0; display:none; place-items:start center; padding:4vh 1rem; background:rgba(0,0,0,.5); z-index:50}
#cmdk[aria-hidden="false"]{display:grid}
#cmdk .sheet{width:min(48rem, 96vw); background:var(--surface); border:1px solid rgba(0,0,0,.1); border-radius:1rem; box-shadow:var(--shadow); padding:0.5rem; overflow:hidden}
#cmdk input{width:100%; font-size:1.125rem; padding:.75rem 1rem; border:0; outline:0; background:transparent}
#cmdk .results{max-height:50vh; overflow:auto}
#cmdk .item{padding:.5rem 1rem; border-radius:.5rem; cursor:pointer}
#cmdk .item[aria-selected="true"]{background:color-mix(in oklab, var(--brand) 14%, var(--surface)); color:var(--text)}
/* Доп. утилиты для этой страницы */
.bg-hero {background: radial-gradient(1000px 450px at 10% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent),
radial-gradient(800px 400px at 100% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent);}
.glass {background: color-mix(in oklab, var(--surface) 80%, transparent); backdrop-filter: blur(8px);}
.section {scroll-margin-top: 76px;}
.nav-link[data-active="true"] {color: var(--brand); font-weight: 700;}
.card-hover {transition: transform .2s, box-shadow .2s, translate .2s;}
@media (prefers-reduced-motion:no-preference){
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--brand) 60%, transparent); }
}
.icon-circle { inline-size: 40px; block-size: 40px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); }
.pill { border-radius: 999px; border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent); padding: 2px 8px; font-size: 12px; color: var(--text-muted); }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 20px; height: 2px; background: color-mix(in oklab, var(--brand) 25%, transparent); }
.timeline li { position: relative; padding-top: 26px; }
.timeline li .step-dot { position: absolute; top: -2px; left: 0; transform: translateY(0); inline-size: 40px; block-size: 40px; border-radius: 999px; background: var(--surface); border: 2px solid var(--brand); display:grid; place-items:center; font-weight:700; }
.timeline li .step-box { margin-top: 8px; }