/* ==========================================================================
   StudioMerch.ART — дизайн-система «ризограф».

   Сервис делает принты на футболки, поэтому и язык сайта взят из печатного
   цеха: плотные плашки спот-красок, наложение с умножением, растровая точка,
   твёрдые тени без размытия — как у наклейки или нашивки. Заголовок сдвинут
   цветной «непопаданием в приводку», это честный след трафаретной печати.

   Тема одна — светлая. Ризограф печатает по бумаге; инверсия в тёмное
   превратила бы всё это в обычный неон на чёрном.
   ========================================================================== */

:root {
  /* --- бумага и краска --- */
  --paper:     #fff6ec;   /* тёплая бумага */
  --paper-2:   #ffefe0;   /* второй тон подложки */
  --sheet:     #fffaf4;   /* поле карточки */
  --ink:       #17161c;   /* чёрная краска */
  --ink-soft:  #4a4753;   /* вторичный текст */
  --ink-faint: #7d7a88;   /* подписи, единицы */
  --rule:      #17161c;   /* обводка: у трафарета она всегда чёрная */
  --rule-soft: #d9d2c8;

  /* --- спот-краски. Их три, как в настоящем ризографе. --- */
  --pink:   #ff3d7f;
  --blue:   #2b44ff;
  --yellow: #ffc400;

  /* --- смысловые цвета: состояния, а не украшение --- */
  --red:   #e01b3d;
  --ochre: #b26a00;
  --green: #00875a;

  --dot: #17161c1a;       /* растровая точка */

  /* --- шрифты --- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", "Roboto Mono",
          Menlo, Consolas, "Liberation Mono", monospace;

  /* --- шаг отступов: всё кратно четырём, ничего «на глаз» --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* Поля страницы растут вместе с экраном: на телефоне 18, на мониторе 48. */
  --gutter: clamp(18px, 4vw, 48px);
  /* Внутреннее поле вложенных блоков — отдельно: на узком экране оно обязано
     быть меньше внешнего, иначе два поля подряд съедают четверть ширины. */
  --pad-box: clamp(16px, 2.4vw, 32px);

  --r-sm: 3px; --r: 6px; --r-lg: 10px; --r-xl: 16px;

  /* Тень твёрдая, без размытия: так ложится вырубленная наклейка. */
  --lift: 5px 5px 0 var(--ink);
  --lift-sm: 3px 3px 0 var(--ink);

  --maxw: 1140px;
  --rail: 248px;
  --rail-narrow: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Растр: та самая точка, из которой собирается любая печать. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }

/* --- каркас -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section    { padding-block: clamp(56px, 8vw, 104px); }
.section-sm { padding-block: clamp(32px, 4vw, 56px); }

/* --- типографика --------------------------------------------------------- */
h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
/* Потолок кегля подобран под ширину колонки героя: при 3.6rem строка
   «в принт на футболке» не влезала и заголовок рвался на четыре строки. */
h1 { font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.95rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.35rem); }
h3 { font-size: 1.1rem; letter-spacing: -.025em; }
p  { margin: 0; }
a  { color: var(--blue); text-underline-offset: 3px; }

/* Сдвиг краски: заголовок героя печатается «мимо приводки». Один приём на
   странице — если так набрать всё, рябит в глазах. */
.misprint { text-shadow: .06em .06em 0 var(--pink); }
.misprint-blue { text-shadow: .06em .06em 0 var(--blue); }

.lede { color: var(--ink-soft); font-size: clamp(1rem, .95rem + .3vw, 1.14rem); max-width: 62ch; }
.page-title { margin-bottom: var(--s2); }

/* Надпечатка: маленькая плашка спот-краской, слегка повёрнутая. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 800 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); rotate: -1.2deg;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }

.grad-text { color: var(--pink); }

/* --- левая панель -------------------------------------------------------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 60;
  background: var(--sheet); border-right: 2px solid var(--ink);
  display: flex; flex-direction: column; padding: var(--s5) var(--s4);
  transition: width .2s ease;
}
.shell {
  margin-left: var(--rail); min-height: 100vh; position: relative; z-index: 1;
  display: flex; flex-direction: column; transition: margin-left .2s ease;
  /* Блоки меряют себя по этой колонке, а не по окну: иначе они не знают,
     что панель уже отняла 248 px, и колонки выходят тесными. */
  container-type: inline-size;
}
.shell > main { flex: 1; }

.brand {
  display: flex; align-items: center; gap: var(--s3); text-decoration: none;
  color: var(--ink); font-weight: 900; letter-spacing: -.04em; font-size: 1.05rem;
}
.rail .brand { display: block; margin: var(--s2) 0 var(--s6); }
/* Знак занимает всю ширину панели. Размер задан долей, а не пикселями,
   поэтому при сворачивании панели до 76 px он уменьшается сам — отдельного
   правила для свёрнутого вида не нужно. Пропорция взята из файла (viewBox
   подрезан по рисунку), так что полей вокруг знака не остаётся. */
/* Без рамки и подложки: у знака своя обводка, и вторая вокруг неё лишь
   повторяла форму. Отступы держит сам блок — знак центрирован и отделён
   от навигации, поля внутри ему не нужны. */
.brand-mark {
  width: 85%; aspect-ratio: 52 / 55; margin-inline: auto;
  display: grid; place-items: center;
}
.brand-mark img, .brand-mark svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.rail-links { display: flex; flex-direction: column; gap: var(--s1); }
.rail-links a {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  color: var(--ink-soft); text-decoration: none; font-size: .94rem; font-weight: 700;
  padding: 9px var(--s3); border-radius: var(--r-sm);
  border: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.rail-links a svg { width: 18px; height: 18px; flex: none; }
.rail-links a:hover { color: var(--ink); background: var(--paper-2); }
.rail-links a.on { color: var(--ink); background: var(--yellow); border-color: var(--ink); }

/* Переключатель языков. Прижат к низу вместе с подвалом панели, а не к
   навигации: язык меняют редко, а промахнуться по нему вместо раздела
   было бы обидно. */
.rail-langs { margin-top: auto; padding-top: var(--s4); }

.langpick { position: relative; }
.langpick summary {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s3); border-radius: var(--r-sm);
  border: 2px solid var(--rule-soft); background: transparent; color: var(--ink-soft);
  font: 700 .8rem var(--sans); cursor: pointer;
  list-style: none; -webkit-user-select: none; user-select: none;
  transition: color .15s, border-color .15s, background .15s;
}
.langpick summary::-webkit-details-marker { display: none; }
.langpick summary:hover,
.langpick[open] summary { color: var(--ink); border-color: var(--ink); background: var(--paper-2); }
.langpick summary > svg:first-child { width: 17px; height: 17px; flex: none; }
/* Длинное имя не должно распирать панель: «Українська» шире, чем место под
   неё, и без обрезки уезжала бы стрелка. */
.langpick-now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langpick-code { display: none; font: 800 .74rem var(--mono); letter-spacing: .04em; }
.langpick-arrow { width: 15px; height: 15px; flex: none; transition: rotate .18s ease; }
.langpick[open] .langpick-arrow { rotate: 180deg; }

/* Список раскрывается вверх: переключатель стоит у нижнего края панели, и
   вниз ему просто некуда. */
.langpick-menu {
  position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 0;
  min-width: 100%; margin: 0; padding: var(--s1); list-style: none;
  background: var(--sheet); border: 2px solid var(--ink);
  border-radius: var(--r); box-shadow: var(--lift);
}
.langpick-menu a {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 7px var(--s3); border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font: 700 .84rem var(--sans);
}
.langpick-menu b {
  font: 800 .68rem var(--mono); letter-spacing: .04em; color: var(--ink-faint);
}
.langpick-menu a:hover { background: var(--paper-2); color: var(--ink); }
.langpick-menu a.on { background: var(--yellow); color: var(--ink); }
.langpick-menu a.on b { color: var(--ink); }

.rail-foot { padding-top: var(--s3); border-top: 2px solid var(--ink); }
/* Пока вход не настроен, слот пуст — и от него оставалась одна голая черта
   под переключателем языков, отделявшая пустоту от пустоты. */
.rail-foot:empty { display: none; }
.rail .usermenu-pop { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }

.rail-toggle {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s2); padding: 8px var(--s3); border-radius: var(--r-sm);
  background: transparent; border: 2px solid var(--rule-soft); color: var(--ink-faint);
  font: 700 .8rem var(--sans); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.rail-toggle:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-2); }
.rail-toggle svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }

.rail-auth { display: flex; align-items: center; gap: var(--s2); width: 100%; justify-content: center; }
.rail-auth svg { flex: none; }

/* --- свёрнутая панель ---------------------------------------------------- */
@media (min-width: 901px) {
  html.rail-tight { --rail: var(--rail-narrow); }

  html.rail-tight .brand span:not(.brand-mark),
  html.rail-tight .rail-links a > span,
  html.rail-tight .rail-toggle > span,
  html.rail-tight .rail-auth > span { display: none; }

  html.rail-tight .rail .brand { justify-content: center; }
  html.rail-tight .rail-links a,
  html.rail-tight .rail-toggle,
  html.rail-tight .rail-auth { justify-content: center; padding-inline: 0; }
  html.rail-tight .rail-toggle svg { transform: rotate(180deg); }

  html.rail-tight .rail-links a::after,
  html.rail-tight .rail-toggle::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap;
    background: var(--ink); color: var(--paper);
    font: 700 .78rem var(--sans);
    opacity: 0; pointer-events: none; transition: opacity .14s;
  }
  html.rail-tight .rail-links a:hover::after,
  html.rail-tight .rail-toggle:hover::after,
  html.rail-tight .rail-links a:focus-visible::after,
  html.rail-tight .rail-toggle:focus-visible::after { opacity: 1; }

  /* В свёрнутой панели от переключателя остаётся код языка: глобус один, без
     подписи, не отвечает на вопрос «какой сейчас», а две буквы отвечают. */
  html.rail-tight .langpick summary > svg:first-child,
  html.rail-tight .langpick-now,
  html.rail-tight .langpick-arrow { display: none; }
  html.rail-tight .langpick-code { display: block; }
  html.rail-tight .langpick summary { justify-content: center; padding-inline: 0; }
  html.rail-tight .langpick-menu { left: calc(100% + 10px); bottom: 0; }
}

@media (max-width: 900px) {
  .rail {
    inset: auto 0 0 0; width: 100%; flex-direction: row; align-items: center;
    gap: var(--s2); padding: var(--s2) var(--s3);
    border-right: none; border-top: 2px solid var(--ink);
  }
  .rail .brand { display: none; }
  .rail-links { flex-direction: row; flex: 1; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
  .rail-links::-webkit-scrollbar { display: none; }
  .rail-links a { flex-direction: column; gap: 3px; font-size: .68rem; padding: 5px var(--s2); }
  .rail-foot { margin: 0; padding: 0; border: none; }
  .rail-toggle { display: none; }
  .rail { padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }

  /* Раньше языки занимали в нижней панели отдельную строку: пять кодов рядом
     с пятью разделами на экране 375 px не помещались. Список свернулся до
     двух букв и встал в тот же ряд — строка вернулась контенту. */
  .rail-langs { margin: 0; padding: 0; flex: none; }
  .langpick summary { padding: 6px var(--s2); gap: var(--s1); border-radius: var(--r-sm); }
  .langpick summary > svg:first-child,
  .langpick-now { display: none; }
  .langpick-code { display: block; }
  /* Прижат к правому краю: панель кончается здесь, и меню, открытое влево,
     останется на экране целиком. */
  .langpick-menu { bottom: calc(100% + 10px); left: auto; right: 0; }

  /* Зазор с учётом жеста «домой». Панель снова в одну строку, поэтому
     прежних 132 px больше не нужно. */
  .shell { margin-left: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* --- кнопки -------------------------------------------------------------- */
/* Нажатие уводит кнопку в собственную тень — как будто её вдавили. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px var(--s5); border-radius: var(--r-sm);
  border: 2px solid var(--ink); background: var(--sheet); color: var(--ink);
  font: 800 .93rem var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--lift-sm);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--lift-sm); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { background: #ff2470; }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-ghost:active { transform: none; box-shadow: none; }
.btn-sm { padding: 6px var(--s3); font-size: .82rem; border-width: 2px; }
.btn-lg { padding: 14px var(--s6); font-size: 1.02rem; box-shadow: var(--lift); }
.btn-lg:active { transform: translate(5px, 5px); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-block { width: 100%; }

/* --- карточки ------------------------------------------------------------ */
.card {
  background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--r);
  padding: var(--pad-box); position: relative;
}
.card-hover { transition: transform .16s, box-shadow .16s; }
.card-hover:hover { transform: translate(-3px, -3px); box-shadow: var(--lift); }

/* Цветная полоса сверху — как краска, положенная первым проходом. */
.card-accent::before {
  content: ''; position: absolute; inset: -2px -2px auto -2px; height: 10px;
  background: var(--accent, var(--pink));
  border: 2px solid var(--ink); border-radius: var(--r) var(--r) 0 0;
}
.card-accent { padding-top: calc(var(--pad-box) + var(--s2)); }

.grid { display: grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); }
.bento > * { grid-column: span 2; }
.bento .w3 { grid-column: span 3; }
.bento .w4 { grid-column: span 4; }
.bento .w6 { grid-column: span 6; }
@container (max-width: 900px) { .bento > * { grid-column: span 3; } .bento .w4, .bento .w6 { grid-column: span 6; } }
@container (max-width: 560px) { .bento > * { grid-column: span 6 !important; } }

/* --- плитка модели ------------------------------------------------------- */
.tile {
  background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s;
}
.tile:hover { transform: translate(-3px, -3px); box-shadow: var(--lift); }
.tile-art {
  aspect-ratio: 1; display: grid; place-items: center; padding: var(--s4); position: relative;
  background: var(--tile-bg, var(--paper-2));
  border-bottom: 2px solid var(--ink);
}
.tile-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Силуэт приходит белым на прозрачном — красим маской в любой цвет. */
.silho {
  width: 100%; height: 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  background: var(--silho-color, var(--ink));
}
.tile-body { padding: var(--s3) var(--s3) var(--s2); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.tile-title { font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.tile-meta { color: var(--ink-faint); font: .74rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.tile-actions { display: flex; gap: var(--s2); padding: 0 var(--s3) var(--s3); flex-wrap: wrap; }

/* --- метки и числа ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: 800 .68rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px var(--s2); border-radius: var(--r-sm);
  border: 2px solid var(--ink); background: var(--sheet); color: var(--ink);
}
.chip-accent { background: var(--accent, var(--pink)); color: #fff; }

.stat { background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-sm); padding: var(--s3); }
.stat b {
  display: block; font: 800 1.2rem var(--mono); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { color: var(--ink-faint); font-size: .74rem; }

.msg {
  border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-size: .89rem;
  border: 2px solid var(--ink); border-left-width: 8px; margin-top: var(--s2);
  background: var(--sheet);
}
.msg.info  { border-left-color: var(--blue);  }
.msg.warn  { border-left-color: var(--yellow); }
.msg.error { border-left-color: var(--red);   }
.msg.ok    { border-left-color: var(--green); }

/* --- поля ---------------------------------------------------------------- */
label { display: block; font-size: .85rem; font-weight: 800; color: var(--ink); }
label small { display: block; font-weight: 400; color: var(--ink-faint); font-size: .76rem; margin-top: var(--s1); }
input[type=text], input[type=number], select, textarea {
  width: 100%; margin-top: var(--s1); padding: 9px var(--s3);
  font: .92rem var(--sans); background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
}
input[type=number] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
input[type=range] { accent-color: var(--pink); width: 100%; margin-top: var(--s2); }
/* Размеры стола стоят в строку, поэтому им нельзя во всю ширину. */
.plate-num { width: 5.5em; margin-top: 0; }
select { cursor: pointer; }
.checks { display: grid; gap: var(--s2); }
.checks label { font-weight: 400; font-size: .89rem; color: var(--ink-soft); cursor: pointer; display: flex; gap: var(--s2); align-items: flex-start; }
.checks input { margin: 3px 0 0; accent-color: var(--pink); flex: none; }

/* --- утилиты ------------------------------------------------------------- */
.divider { height: 2px; background: var(--ink); opacity: .12; margin-block: var(--s6); border: none; }
.divider.tight { margin-block: var(--s4); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tabular { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.center { text-align: center; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hidden { display: none !important; }
.note-sm { font-size: .8rem; }
.img-out { max-width: 100%; border: 2px solid var(--ink); border-radius: var(--r-sm); display: block; }
.span-all { grid-column: 1 / -1; }
.mt-1 { margin-top: var(--s2); }
.mt-2 { margin-top: var(--s3); }
.mt-3 { margin-top: var(--s5); }
.mt-4 { margin-top: var(--s6); }

.spinner {
  width: 15px; height: 15px; border: 3px solid var(--rule-soft);
  border-top-color: var(--pink); border-radius: 50%; display: inline-block;
  vertical-align: -3px; margin-right: var(--s2); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  text-align: center; padding: var(--s8) var(--s5); color: var(--ink-soft);
  border: 2px dashed var(--ink); border-radius: var(--r); background: var(--sheet);
}
.empty svg { width: 46px; height: 46px; opacity: .3; margin-bottom: var(--s3); }
.empty p { margin-bottom: var(--s4); }

/* --- профиль ------------------------------------------------------------- */
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--blue);
  border: 2px solid var(--ink);
  display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff; flex: none;
}
.usermenu { position: relative; }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--lift); padding: var(--s1); z-index: 70;
}
.usermenu-pop a, .usermenu-pop button {
  display: block; width: 100%; text-align: left; padding: 8px var(--s3); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font: 600 .89rem var(--sans); background: none; border: none;
  cursor: pointer;
}
.usermenu-pop a:hover, .usermenu-pop button:hover { background: var(--yellow); }

/* --- подвал -------------------------------------------------------------- */
.footer { margin-top: var(--s8); border-top: 2px solid var(--ink); background: var(--paper-2); }
.footer .wrap { padding-block: var(--s6); }
.stamp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden;
  background: var(--sheet); box-shadow: var(--lift);
}
.stamp > div { padding: var(--s3) var(--s4); border-right: 2px solid var(--ink); }
.stamp > div:last-child { border-right: none; }
.stamp dt {
  font: 800 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--s1);
}
.stamp dd { margin: 0; font: 800 .92rem var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .stamp > div { border-right: none; border-bottom: 2px solid var(--ink); }
  .stamp > div:last-child { border-bottom: none; }
}

/* Ссылки подвала. Кроме навигации это единственное место, откуда виден
   владелец и документы, — значит, оно должно быть на каждой странице и
   выглядеть одинаково. Разметку собирает сервер, здесь только вид. */
.foot-grid {
  display: grid; gap: var(--s5) var(--s6);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  margin-top: var(--s6);
}
.foot-mark { display: block; width: 34px; height: auto; margin-bottom: var(--s3); }
.foot-name { font: 800 1rem var(--sans); letter-spacing: -.02em; margin: 0 0 var(--s2); }
.foot-note { color: var(--ink-soft); font-size: .84rem; line-height: 1.55; margin: 0; max-width: 34ch; }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.foot-col h2 {
  font: 800 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--s1);
}
.foot-col a, .foot-line {
  font-size: .85rem; line-height: 1.4; color: var(--ink-soft); text-decoration: none;
}
.foot-col a { border-bottom: 1px solid transparent; }
.foot-col a:hover { color: var(--ink); border-bottom-color: var(--pink); }

.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 2px solid var(--ink);
  font: 700 .72rem var(--mono); color: var(--ink-faint);
}

/* Четыре колонки на телефоне превращаются в четыре колонки шириной в слово.
   Две — минимум, при котором ссылки остаются ссылками, а не переносами. */
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* --- призыв -------------------------------------------------------------- */
/* Раньше жил в landing.css, но понадобился и в инструкции: полоса с призывом
   к делу — общий блок, а не часть главной. */
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.cta-band {
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  text-align: center; background: var(--blue); color: #fff;
  position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band .lede { margin: var(--s3) auto 0; color: #ffffffd9; }
.cta-band .hero-cta { justify-content: center; margin-top: var(--s5); }
.cta-band .btn-ghost { border-color: #fff; color: #fff; }
.cta-band .btn-ghost:hover { background: #ffffff1f; }

/* Подпись только для экранного диктора. Нужна там, где смысл несёт рисунок:
   у ссылки с одним логотипом внутри иначе нет имени вообще. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- зона загрузки ------------------------------------------------------- */
.drop {
  border: 3px dashed var(--ink); border-radius: var(--r); padding: var(--s8) var(--s5);
  text-align: center; cursor: pointer; color: var(--ink-soft); background: var(--sheet);
  transition: background .16s, transform .16s;
}
.drop:hover, .drop:focus-visible { background: var(--paper-2); outline: none; }
.drop.drag { background: var(--yellow); border-style: solid; transform: scale(1.01); }
.drop.has { border-style: solid; background: var(--sheet); }
.drop-title { color: var(--ink); font-weight: 800; font-size: 1.05rem; margin: var(--s3) 0 var(--s1); }

/* ==========================================================================
   Примерка на футболку
   ========================================================================== */
.tryon-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
@container (max-width: 940px) { .tryon-grid { grid-template-columns: 1fr; } }

/* Клетка на сцене нужна не для красоты: на однотонном светлом фоне белая
   футболка сливалась — разница была в шесть единиц яркости. */
/* overflow: clip, а не hidden. hidden обрезает картинку, но при этом делает
   сцену прокручиваемой: стоило принту заехать за край, браузер начинал
   подкручивать контейнер, чтобы его догнать, и вид уезжал прямо под рукой.
   clip обрезает так же, но прокрутки не создаёт вовсе. */
.stage {
  position: relative; border-radius: var(--r); overflow: clip;
  overscroll-behavior: contain;
  background:
    linear-gradient(#17161c0d 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, #17161c0d 1px, transparent 1px) 0 0 / 16px 16px,
    var(--paper-2);
  border: 2px solid var(--ink);
  /* Совпадает с viewBox футболки (400x440), поэтому единицы SVG переводятся
     в пиксели сцены одним множителем — без поправок на поля. */
  aspect-ratio: 400 / 440; touch-action: none;
}
.shirt { position: absolute; inset: 0; width: 100%; height: 100%; }
.art { position: absolute; left: 0; top: 0; transform-origin: center center; cursor: grab; touch-action: none; will-change: transform; }
.art:active { cursor: grabbing; }
.art .silho { pointer-events: none; }
.art-frame { position: absolute; inset: -6px; border: 2px solid var(--blue); opacity: 0; transition: opacity .16s; pointer-events: none; }
.art.sel .art-frame { opacity: 1; }
.handle {
  position: absolute; width: 14px; height: 14px; border-radius: var(--r-sm);
  background: var(--blue); border: 2px solid var(--ink); pointer-events: auto;
}
.handle.scale  { right: -8px; bottom: -8px; cursor: nwse-resize; }
.handle.rotate { right: -8px; top: -8px; cursor: grab; background: var(--pink); }

.swatches { display: flex; gap: var(--s2); flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: var(--r-sm); border: 2px solid var(--ink);
  cursor: pointer; padding: 0; transition: transform .14s, box-shadow .14s;
}
.swatch:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-sm); }
.swatch.on { transform: translate(-2px, -2px); box-shadow: var(--lift-sm); }

.seg { display: flex; border: 2px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; }
.seg button {
  flex: 1; padding: 7px var(--s2); border: none; border-right: 2px solid var(--ink);
  background: var(--sheet); color: var(--ink-soft);
  font: 800 .8rem var(--sans); cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--paper-2); color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Окно с просьбой о поддержке
   ========================================================================== */
.modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: #17161cb8;
  display: grid; place-items: center; padding: var(--s4);
  overflow-y: auto;
}
.modal {
  position: relative; width: min(440px, 100%);
  background: var(--sheet); border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--lift); padding: var(--pad-box);
}
.modal-x {
  position: absolute; top: var(--s2); right: var(--s2);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 2px solid transparent; border-radius: var(--r-sm);
  color: var(--ink-soft); cursor: pointer;
}
.modal-x:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.modal .btn-block + .btn-block { margin-top: var(--s2); }

.donate-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--s2); }
.donate-sum {
  padding: var(--s3) var(--s2); border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--sheet); color: var(--ink);
  font: 800 .95rem var(--mono); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .14s, transform .12s, box-shadow .12s;
}
.donate-sum:hover { background: var(--paper-2); }
.donate-sum.on { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: var(--lift-sm); }
.donate-custom { margin-top: var(--s2); }

@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modal-in .16s ease-out both; }
}
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } }

/* На узком экране вложенные поля обязаны быть меньше внешних: иначе
   20 px поля страницы плюс 24 px поля карточки съедают четверть ширины. */
@media (max-width: 560px) {
  .btn { padding-inline: var(--s4); }
  .btn-lg { padding: 12px var(--s5); }
  .drop { padding: var(--s6) var(--s4); }
  .empty { padding: var(--s7) var(--s4); }
}

/* --- эмодзи как исходник -------------------------------------------------- */
/* Стоит под зоной загрузки, а не вместо неё: рисунок остаётся главным путём,
   а знак — быстрым способом для тех, кто не рисует. */
.emoji-pick {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 2px dashed var(--rule-soft);
}
.emoji-row { display: flex; gap: var(--s2); }
.emoji-row input {
  flex: 1; min-width: 0; font-size: 1.3rem; line-height: 1.2; text-align: center;
  padding: 6px var(--s3); border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--sheet); color: var(--ink);
}
.emoji-quick { display: flex; flex-wrap: wrap; gap: var(--s1); }
.emoji-chip {
  font-size: 1.25rem; line-height: 1; padding: 5px 7px; cursor: pointer;
  background: var(--sheet); border: 2px solid var(--rule-soft); border-radius: var(--r-sm);
}
.emoji-chip:hover { border-color: var(--ink); background: var(--paper-2); }