:root {
    --brand: #0f9d58;
    --brand-dark: #0b7d45;
    --brand-soft: #e8f6ee;
    --ink: #131a26;
    --ink-soft: #4a5462;
    --ink-muted: #737d8c;
    --content-width: 1080px;
    --line: #e6e9ee;
    --surface: #ffffff;
    --field: #f4f6f9;
    --field-hover: #eef1f6;
    --canvas: #eef1f5;
    --danger: #d7373f;
    --radius: 16px;
    --shadow: 0 2px 10px rgb(19 26 38 / 5%), 0 14px 40px rgb(19 26 38 / 7%);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Липкая шапка не должна накрывать заголовок секции при переходе по якорю. */
    scroll-padding-top: 72px;
    /* scroll-behavior: smooth здесь не ставим — с ним программная прокрутка
       к якорям срывается; плавность запрашивается из js/anchors.js. */
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

button {
    font: inherit;
    cursor: pointer;
}

a {
    color: var(--brand-dark);
    text-underline-offset: 3px;
}

input, select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* FocusOnNavigate ставит фокус на заголовок — рамка вокруг него не нужна. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Заставка, пока подгружается WebAssembly */
.loading-progress {
    display: block;
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 24dvh auto 0;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e5ec;
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8) 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: relative;
    top: -3.7rem;
    text-align: center;
    font-weight: 600;
    color: var(--ink-muted);
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Загрузка");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 12px 16px;
    background: #fff3cd;
    color: #664d03;
    box-shadow: 0 -1px 8px rgb(0 0 0 / 20%);
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}