/* =========================================================
   7gpt — стили сайта
   Разметка: template.php (общие блоки), index.php, folder.php, error.php.
   Основа стиля — логотип и страница-заглушка: тёмный знак #15153A,
   лаймовый курсор #C6F432, бумажный фон #F0F0F5, Onest и JetBrains Mono.
   Лайм — только заливка с тёмным текстом или текст на тёмном фоне:
   на светлом фоне как цвет текста он нечитаем.
   ========================================================= */

/* Шрифты — с этого сервера (design/), без обращения к Google: кириллица и латиница */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("onest-v11-cyrillic_latin-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("onest-v11-cyrillic_latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("onest-v11-cyrillic_latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("onest-v11-cyrillic_latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("jetbrains-mono-v24-cyrillic_latin-regular.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("jetbrains-mono-v24-cyrillic_latin-500.woff2") format("woff2");
}

:root {
    --ink: #15153A;                   /* знак логотипа: текст, тёмные панели, кнопки */
    --ink-hover: #27275F;
    --ink-2: rgba(21, 21, 58, .66);   /* второстепенный текст (контраст ≥ 5:1 на фоне) */
    --ink-3: rgba(21, 21, 58, .42);   /* только подсказки в поле и украшения */
    --line: rgba(21, 21, 58, .12);
    --line-2: rgba(21, 21, 58, .22);

    --lime: #C6F432;                  /* курсор логотипа: «готово», главное действие */
    --lime-hover: #B6EA17;
    --lime-edge: #A9D420;

    --paper: #F0F0F5;
    --surface: #FFFFFF;
    --sk: #E7E7EF;

    --err: #B42318;
    --err-bg: #FEF3F2;
    --err-line: #F6C7C1;

    --r-xl: 24px;
    --r-l: 18px;
    --r-m: 12px;

    --ten: 0 0 0 1px rgba(21, 21, 58, .06), 0 1px 2px rgba(21, 21, 58, .05);
    --ten-l: 0 0 0 1px rgba(21, 21, 58, .06), 0 24px 48px -28px rgba(21, 21, 58, .42);

    --tochki: radial-gradient(circle, rgba(21, 21, 58, .15) 1px, transparent 1.5px) 7px 7px / 14px 14px;

    --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
    --ease: cubic-bezier(.2, .8, .2, 1);

    --shir: 1180px;                   /* ширина страницы */
    --pole: clamp(16px, 4vw, 40px);   /* боковые поля */

    --i-skachat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.5'/%3E%3Cpath d='M6.5 10l5.5 5.5 5.5-5.5'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E");
}


/* ---------- основа ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

::selection { background: rgba(198, 244, 50, .6); color: var(--ink); }

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

h1,
h2 {
    margin: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.2rem, 1.1rem + 3vw, 3.9rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.032em;
}

h2 {
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.lead {
    margin: clamp(14px, 2vw, 22px) 0 0;
    max-width: 44ch;
    font-size: clamp(1.02rem, .96rem + .24vw, 1.2rem);
    line-height: 1.55;
    color: var(--ink-2);
}

@keyframes migat { 50% { opacity: 0; } }

/* курсор из логотипа: в ТЗ, терминале и на кнопке ожидания */
.kursor {
    display: inline-block;
    width: .55em;
    height: 1.1em;
    margin-left: .12em;
    border-radius: .1em;
    background: var(--lime);
    vertical-align: -.2em;
    animation: migat 1.1s step-end infinite;
}


/* ---------- каркас: шапка, содержимое, подвал ---------- */

.vsya {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
    max-width: var(--shir);
    margin: 0 auto;
    padding: 0 var(--pole);
}

.shapka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(18px, 3vw, 32px) 0;
}

.logo {
    display: block;
    border-radius: 8px;
    color: var(--ink);
}

.logo svg {
    display: block;
    height: clamp(30px, 1.4rem + 1vw, 38px);
    width: auto;
    aspect-ratio: 322.5 / 100;
}

.logo-kursor { animation: migat 1.1s step-end .6s 4; }

.shapka-novyi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink);
    font: 500 .9375rem/1 var(--sans);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.shapka-novyi::before {
    content: "+";
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1;
}

.shapka-novyi:hover {
    background: var(--surface);
    border-color: var(--ink);
}

.podval {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 22px 0 28px;
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--ink-2);
}


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

.knopka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ink);
    border-radius: var(--r-m);
    background: var(--ink);
    color: #fff;
    font: 600 1rem/1 var(--sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease);
}

.knopka:hover {
    background: var(--ink-hover);
    border-color: var(--ink-hover);
    color: #fff;
}

.knopka:active { transform: translateY(1px); }

.knopka-vtor {
    background: transparent;
    border-color: var(--line-2);
    color: var(--ink);
}

.knopka-vtor:hover {
    background: var(--surface);
    border-color: var(--ink);
    color: var(--ink);
}

.knopka-glavn {
    background: var(--lime);
    border-color: var(--lime-edge);
    color: var(--ink);
}

.knopka-glavn:hover {
    background: var(--lime-hover);
    border-color: #93BD12;
    color: var(--ink);
}

/* после отправки формы: ждём ответа сервера */
.knopka[aria-busy="true"] { pointer-events: none; }

.knopka[aria-busy="true"] .knopka-tekst::after {
    content: "";
    display: inline-block;
    width: .45em;
    height: .95em;
    margin-left: .4em;
    border-radius: .08em;
    background: var(--lime);
    vertical-align: -.1em;
    animation: migat 1.1s step-end infinite;
}

.knopki {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ---------- форма ТЗ ---------- */

.forma {
    margin: 0;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten-l);
}

.forma-vopros {
    display: block;
    margin: 0 0 14px;
    font-size: clamp(1.15rem, 1.02rem + .45vw, 1.4rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.012em;
}

textarea {
    display: block;
    width: 100%;
    min-height: 168px;
    margin: 0;
    padding: 14px 16px;
    resize: vertical;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font: 400 1rem/1.6 var(--sans);
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}

textarea::placeholder { color: var(--ink-3); }

textarea:hover { border-color: rgba(21, 21, 58, .34); }

textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(198, 244, 50, .55);
}

.forma.zhdu textarea { opacity: .6; }

/* примеры работают только с JavaScript */
.primery {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.js .primery { display: flex; }

.primery-zag {
    margin-right: 2px;
    font-size: .875rem;
    color: var(--ink-2);
}

.primer {
    padding: 8px 13px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: 500 .875rem/1 var(--sans);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.primer:hover {
    background: var(--surface);
    border-color: var(--ink);
}

.forma-niz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 20px;
}

.forma-podskazka {
    flex: 1 1 220px;
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--ink-2);
}


/* ---------- главная ---------- */

/* узкий экран: заголовок → форма → шаги (обёртка .levo «растворяется»);
   широкий экран: заголовок и шаги слева, форма справа */
.glavnaya-setka {
    display: grid;
    grid-template-areas: "intro" "instrument" "shagi";
    gap: clamp(24px, 5vw, 40px);
    align-content: start;
    padding: clamp(4px, 2vh, 32px) 0 clamp(48px, 7vw, 88px);
}

.levo { display: contents; }
.intro { grid-area: intro; }
.instrument { grid-area: instrument; }

.shagi {
    grid-area: shagi;
    display: grid;
    gap: 14px;
    max-width: 40ch;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: shag;
}

.shagi li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 14px;
    counter-increment: shag;
}

.shagi li::before {
    content: counter(shag);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    font: 600 .875rem/1 var(--mono);
}

/* последний шаг — результат: цвет курсора */
.shagi li:last-child::before {
    background: var(--lime);
    color: var(--ink);
}

.shagi b {
    padding-top: 1px;
    font-weight: 600;
    line-height: 1.35;
}

.shagi span {
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--ink-2);
}

.vitrina { padding: 0 0 clamp(48px, 7vw, 88px); }

.razdel-zag {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
}

.razdel-zag p {
    max-width: 52ch;
    margin: 0;
    font-size: .9375rem;
    color: var(--ink-2);
}


/* ---------- карточки проектов ---------- */

.kartochki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.kartochka {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: var(--ten);
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.kartochka:hover {
    transform: translateY(-3px);
    box-shadow: var(--ten-l);
}

.kartochka-vid {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--line);
    background: var(--paper) var(--tochki);
}

.kartochka-vid img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(21, 21, 58, .18));
}

/* у старых проектов нет картинки: пустое окно */
.kartochka-pusto {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: linear-gradient(var(--surface) 0 17%, var(--sk) 17% calc(17% + 1px), var(--surface) 0);
    box-shadow: 0 0 0 1px var(--line), 0 8px 14px rgba(21, 21, 58, .12);
    transform: translate(-50%, -50%);
}

.kartochka-tekst {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 8px;
    padding: 12px 14px 14px;
}

.kartochka-imya {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.kartochka-nomer {
    font: 500 .75rem/1.3 var(--mono);
    color: var(--ink-2);
    white-space: nowrap;
}

.kartochka-opis {
    display: -webkit-box;
    grid-column: 1 / -1;
    margin-top: 4px;
    overflow: hidden;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ink-2);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ---------- уточнение ТЗ ---------- */

.utochnenie-setka {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    align-content: start;
    padding: clamp(4px, 2vh, 24px) 0 clamp(48px, 7vw, 88px);
}

.utochnenie-osn h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }

.utochnenie-osn .forma { margin-top: clamp(20px, 3vw, 32px); }


/* ---------- ТЗ в тёмной панели ---------- */

.tz {
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: var(--r-xl);
    background: var(--ink);
    color: #fff;
}

.tz-zag {
    margin: 0 0 12px;
    font: 500 .8125rem/1.3 var(--sans);
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
}

.tz-tekst {
    font: 400 clamp(.84rem, .8rem + .2vw, .94rem)/1.65 var(--mono);
    color: rgba(255, 255, 255, .92);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tz :focus-visible,
.hod :focus-visible { outline-color: var(--lime); }


/* ---------- метка состояния ---------- */

.metka {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px 6px 9px;
    border-radius: 999px;
    font: 600 .8125rem/1 var(--sans);
    white-space: nowrap;
}

.metka::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
}

.metka-gotovo { background: var(--lime); color: var(--ink); }

.metka-idet { background: var(--ink); color: #fff; }

.metka-idet::before {
    background: var(--lime);
    animation: migat 1.1s step-end infinite;
}

.metka-oshibka {
    background: var(--err-bg);
    color: var(--err);
    box-shadow: inset 0 0 0 1px var(--err-line);
}


/* ---------- страница проекта ---------- */

.proekt-setka {
    display: grid;
    gap: clamp(28px, 4vw, 44px);
    align-items: start;
    padding: clamp(4px, 1.5vh, 16px) 0 clamp(48px, 7vw, 88px);
}

.proekt-osn {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.proekt-zag {
    display: grid;
    gap: 14px;
    margin-bottom: 4px;
}

.proekt-nomer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    font: 500 .875rem/1 var(--mono);
    color: var(--ink-2);
}

.proekt-zag h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }

.rezultat {
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten-l);
}

.skrin {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin: 0;
    padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) clamp(16px, 2.5vw, 22px);
    border-bottom: 1px solid var(--line);
    background: var(--paper) var(--tochki);
}

/* картинка — вектор: окно увеличивается до 520 px без потери чёткости,
   высокие окна вписываются в 420 px без искажения пропорций */
.skrin img {
    display: block;
    width: min(100%, 520px);
    height: auto;
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(21, 21, 58, .24)) drop-shadow(0 0 1px rgba(21, 21, 58, .35));
}

.skrin figcaption {
    font-size: .8125rem;
    color: var(--ink-2);
    text-align: center;
}

.skachat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: clamp(18px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
}

.knopka-skachat {
    min-height: 52px;
    padding: 0 24px;
    font-size: 1.0625rem;
}

.knopka-skachat::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--i-skachat) center / contain no-repeat;
    mask: var(--i-skachat) center / contain no-repeat;
}

/* исходный код — ссылка третьей строкой под данными exe */
.skachat-kod {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    margin-top: 4px;
    font-weight: 500;
    color: var(--ink);
}

.skachat-kod::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--i-skachat) center / contain no-repeat;
    mask: var(--i-skachat) center / contain no-repeat;
}

.skachat-info {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: .875rem;
    color: var(--ink-2);
}

.skachat-imya {
    font: 500 .875rem/1.4 var(--mono);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.peredelat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten);
}

.peredelat h2 { font-size: 1.125rem; }

/* «Переделка программы № N» под заголовком проекта и над заголовком переделки */
.proekt-osnova,
.utochnenie-osnova {
    margin: 0;
    font-size: .9375rem;
    color: var(--ink-2);
}

.utochnenie-osnova { margin-bottom: 10px; }

.proekt-osnova a,
.utochnenie-osnova a { color: var(--ink); }

.forma-preduprezhdenie {
    margin: 10px 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ink-2);
}

.forma-oshibka {
    margin: clamp(16px, 2.4vw, 24px) 0 0;
    padding: 12px 16px;
    border-radius: var(--r-m);
    background: var(--err-bg);
    box-shadow: inset 0 0 0 1px var(--err-line);
    color: var(--err);
}

.peredelat p {
    margin: 4px 0 0;
    color: var(--ink-2);
}

.opisanie,
.blok {
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten);
}


/* ---------- текст с разделами и списками (описание, ошибки) ---------- */

.tekst > :first-child { margin-top: 0; }
.tekst > :last-child { margin-bottom: 0; }

.tekst h2 {
    margin: 26px 0 10px;
    font-size: 1.125rem;
    letter-spacing: -.01em;
}

.tekst p {
    max-width: 70ch;
    margin: 0 0 10px;
}

.tekst ol,
.tekst ul {
    display: grid;
    gap: 10px;
    max-width: 70ch;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.tekst ol { counter-reset: punkt; }

.tekst ol > li {
    position: relative;
    min-height: 28px;
    padding: 2px 0 0 40px;
    counter-increment: punkt;
}

.tekst ol > li::before {
    content: counter(punkt);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font: 600 .8125rem/1 var(--mono);
}

.tekst ul > li {
    position: relative;
    padding-left: 22px;
}

.tekst ul > li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--lime);
    box-shadow: inset 0 0 0 1px var(--lime-edge);
}


/* ---------- ход работы: этапы и терминал ---------- */

.hod {
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: var(--r-xl);
    background: var(--ink);
    color: #fff;
}

.hod-etapy {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 clamp(.8125rem, .78rem + .15vw, .9rem)/2.1 var(--mono);
}

.hod-etapy li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    color: rgba(255, 255, 255, .42);
}

.hod-etapy li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .22);
}

.hod-etapy li.gotov { color: rgba(255, 255, 255, .7); }
.hod-etapy li.gotov::before { background: var(--lime); }

.hod-etapy li.seichas { color: #fff; }

.hod-etapy li.seichas::before {
    background: var(--lime);
    animation: migat 1.1s step-end infinite;
}

.hod-znach { color: var(--lime); }
.hod-etapy li.gotov .hod-znach { color: rgba(198, 244, 50, .72); }

.hod-podpis {
    margin: 16px 0 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .9375rem;
    color: rgba(255, 255, 255, .72);
}

.terminal {
    height: clamp(220px, 38vh, 420px);
    overflow: auto;
    font: 400 .8125rem/1.7 var(--mono);
    color: rgba(255, 255, 255, .8);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}


/* ---------- сообщение об ошибке сборки ---------- */

.soobshenie {
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten);
}

.soobshenie-oshibka { box-shadow: inset 0 0 0 1px var(--err-line), var(--ten); }

.soobshenie h2 {
    margin-bottom: 8px;
    font-size: 1.25rem;
    color: var(--err);
}

.soobshenie p {
    margin: 0 0 14px;
    color: var(--ink-2);
}

.soobshenie p:last-child { margin-bottom: 0; }

.soobshenie-log {
    max-height: 280px;
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    border-radius: var(--r-m);
    background: var(--ink);
    color: rgba(255, 255, 255, .85);
    font: 400 .8125rem/1.6 var(--mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ---------- блок «похожие» справа ---------- */

.pohojie-zag {
    margin: 0 0 14px;
    font: 600 .8125rem/1.3 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}


/* ---------- страница ошибки ---------- */

.oshibka-setka {
    display: grid;
    align-content: start;
    padding: clamp(4px, 3vh, 40px) 0 clamp(48px, 7vw, 88px);
}

.oshibka-kartochka {
    max-width: 760px;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ten-l);
}

.oshibka-kod {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 .875rem/1 var(--mono);
    color: var(--err);
}

.oshibka-kod::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--err);
}

.oshibka-kartochka h1 {
    margin: 14px 0 18px;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
}

.oshibka-kartochka .tekst { color: var(--ink-2); }

/* статьи закона — нейтральные маркеры, не лаймовые */
.oshibka-kartochka .tekst ul > li::before {
    background: var(--line-2);
    box-shadow: none;
}

.oshibka-kartochka .knopki { margin-top: 26px; }


/* ---------- широкий экран ---------- */

@media (min-width: 1000px) {
    .glavnaya-setka {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas: "levo instrument";
        align-items: center;
        column-gap: clamp(40px, 5vw, 72px);
    }

    .levo {
        display: block;
        grid-area: levo;
    }

    .shagi { margin-top: clamp(28px, 3.5vw, 40px); }

    .utochnenie-setka {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }

    .utochnenie-tz {
        position: sticky;
        top: 24px;
    }

    .utochnenie-tz .tz {
        max-height: calc(100vh - 48px);
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .22) transparent;
    }

    .proekt-setka { grid-template-columns: minmax(0, 1fr) 300px; }

    .pohojie .kartochki { grid-template-columns: 1fr; }
}


/* ---------- телефон ---------- */

@media (max-width: 640px) {
    .shapka { padding: 16px 0 12px; }

    .shapka-novyi {
        min-height: 36px;
        padding: 0 12px 0 10px;
        font-size: .875rem;
    }

    .forma-niz .knopka,
    .skachat .knopka,
    .peredelat .knopka { width: 100%; }

    .kartochki {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kartochka-tekst { padding: 10px 10px 12px; }

    .kartochka-vid img {
        inset: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

    .podval { flex-direction: column; }
}


/* ---------- углы-«сквиркл», как у знака логотипа (где поддерживается) ---------- */

@supports (corner-shape: squircle) {
    .forma,
    .tz,
    .rezultat,
    .opisanie,
    .peredelat,
    .blok,
    .hod,
    .soobshenie,
    .oshibka-kartochka { border-radius: 40px; corner-shape: squircle; }

    .kartochka { border-radius: 28px; corner-shape: squircle; }

    .knopka { border-radius: 18px; corner-shape: squircle; }
}


/* ---------- меньше движения, если так настроено в системе ---------- */

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

/* ---------- заявка программисту (zayavka.php) и блок на странице проекта ---------- */

/* кнопка «Не то, что я просил»: рядом со скачиванием, справа */
.skachat .knopka-svyaz { margin-left: auto; }

.zayavka-vvod {
    max-width: 640px;
    margin: 12px 0 0;
    color: var(--ink-2);
    line-height: 1.5;
}

.zayavka .forma { margin-top: clamp(20px, 3vw, 32px); max-width: 640px; }

.zayavka-oshibka { margin: 0 0 18px; }

.zv-pole {
    display: block;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.zv-podpis {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-weight: 600;
    font-size: .9375rem;
}

.zv-pole input[type=tel],
.zv-pole input[type=text] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font: 400 1rem/1.4 var(--sans);
    transition: border-color .15s, box-shadow .15s;
}

.zv-pole input:hover { border-color: rgba(21, 21, 58, .34); }

.zv-pole input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(198, 244, 50, .55);
}

.zv-pole textarea { min-height: 140px; }

.zv-sposoby { display: flex; flex-wrap: wrap; gap: 8px; }

.zv-sposoby legend { width: 100%; }

.zv-sposob input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.zv-sposob span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    font: 500 .9375rem/1 var(--sans);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.zv-sposob span:hover { background: var(--surface); border-color: var(--ink); }

.zv-sposob input:checked + span {
    background: var(--lime);
    border-color: var(--lime-edge);
}

.zv-sposob input:focus-visible + span { box-shadow: 0 0 0 4px rgba(198, 244, 50, .55); }

.zv-soglasie {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--ink-2);
}

.zv-soglasie input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }

.zv-soglasie a { color: var(--ink); }

.zv-lovushka {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zayavka-gotovo p { margin: 0 0 18px; line-height: 1.55; }

.politika .opisanie { margin-top: clamp(20px, 3vw, 32px); max-width: 760px; }

.podval a { color: var(--ink-2); }
.podval a:hover { color: var(--ink); }