/* Зачётка — тёмная лаймовая тема поверх дизайн-системы Organic (styles.css).
   Токены перенесены из <style> прототипов без изменений. */

:root {
  color-scheme: dark;
  /* Палитра «Полночь»: почти чёрный с синим отливом и чистый синий акцент */
  --color-bg: #060a14;
  --color-surface: #0e1628;
  --color-text: #e8eefc;
  --color-accent: #5b95ff;
  --color-accent-2: #56c2e6;
  --color-divider: color-mix(in srgb, #e8eefc 14%, transparent);
  --color-accent-100: #eaf2ff; --color-accent-200: #cfe0ff; --color-accent-300: #a9c8ff;
  --color-accent-400: #7fadff; --color-accent-500: #5b95ff; --color-accent-600: #3b78f0;
  --color-accent-700: #2a5cc9; --color-accent-800: #1d4291; --color-accent-900: #13295a;
  --color-accent-2-100: #e6f7fd; --color-accent-2-200: #c3ecf9; --color-accent-2-300: #93dcf2;
  --color-accent-2-400: #6fcfec; --color-accent-2-500: #56c2e6; --color-accent-2-600: #2ea3cc;
  --color-accent-2-700: #1f7ea3; --color-accent-2-800: #175a75; --color-accent-2-900: #0e3647;
  --color-neutral-100: #e8eefc; --color-neutral-200: #cfd8ea; --color-neutral-300: #aab6cf;
  --color-neutral-400: #8391ad; --color-neutral-500: #647391; --color-neutral-600: #4a5874;
  --color-neutral-700: #33415c; --color-neutral-800: #0e1628; --color-neutral-900: #03050b;
  --color-danger: #f0907e;
  --color-danger-text: #ffd9d1;
  --color-danger-bg: #2a1119;
  --shadow-sm: 0 1px 3px rgba(0,2,8,.6);
  --shadow-md: 0 6px 18px rgba(0,2,8,.65);
  --shadow-lg: 0 18px 46px rgba(0,2,8,.75);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  /* поля страницы; в альбомной ориентации iPhone — ещё и отступ от выреза экрана */
  --page-pad: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* приподнятая панель и выделенная карточка — синие оттенки */
  --color-panel: #0c1830;
  --color-raised: #14244a;
  --font-heading: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Figtree", "ZK Text Cyrillic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page-admin { --color-divider: color-mix(in srgb, #e8eefc 12%, transparent); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
p, li, label, summary, td, th, .card-body, .card-meta, .btn, .tag, .input, select, textarea { font-weight: 500; }
.btn, .tag, .nav a { font-weight: 600; }
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }
::selection { background: var(--color-accent-400); color: #060a14; }
button { font: inherit; color: inherit; }
body.has-modal { overflow: hidden; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* — движение — */
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes revealx { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(6deg); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(14px) scale(1.06); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shine { from { transform: translateX(-140%) rotate(18deg); } to { transform: translateX(240%) rotate(18deg); } }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes growbar { from { transform: scaleY(0.04); } to { transform: none; } }
@keyframes drawline { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

[data-reveal] { animation: rise 1s var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
@supports not (animation-timeline: view()) { [data-reveal] { animation: none; } }

/* — кнопки и поля: дополнения к Organic — */
.btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out); }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--color-bg); }
.btn-xl { padding: 18px 32px; font-size: 17px; }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-danger-bg)); }
.btn-icon { width: 40px; height: 40px; padding: 0; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn-busy::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
  color: var(--color-bg);
}

select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aab6cf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
select.input option { background: var(--color-surface); color: var(--color-text); }
.input::placeholder { color: var(--color-neutral-500); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent); }
.input-lg { min-height: 48px; font-size: 16px; }
.input-area, textarea.input { min-height: 110px; border-radius: 22px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
input[type="date"].input { cursor: pointer; }
input[type="range"] { accent-color: var(--color-accent); }
.field-hint { color: var(--color-neutral-500); font-weight: 500; }
.field-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-set > legend { display: block; font-size: 14px; margin-bottom: 5px; padding: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.field-status { min-height: 0; font-size: 14px; margin-top: 6px; }
.field-status:empty { display: none; }
.is-ok { color: var(--color-accent-300); }
.is-bad { color: var(--color-danger); }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; border-radius: 18px; min-height: 240px; white-space: pre; }

/* — звёзды оценки (нужны и на сайте, и в админке) — */
.stars { display: inline-flex; gap: 3px; color: var(--color-accent); --star-size: 19px; vertical-align: -3px; }
.stars-sm { --star-size: 15px; gap: 2px; }
.star { position: relative; display: inline-block; width: var(--star-size); height: var(--star-size); flex: none; }
.star svg { position: absolute; top: 0; left: 0; width: var(--star-size); height: var(--star-size); display: block; }
.star-fill { position: absolute; inset: 0; overflow: hidden; }

/* — уведомления — */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px;
  max-width: min(420px, calc(100vw - 40px)); pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer; background: var(--color-neutral-800); color: var(--color-neutral-100);
  border: 1px solid var(--color-divider); border-radius: 20px; padding: 13px 18px; font-size: 15px; line-height: 1.4;
  box-shadow: var(--shadow-lg); animation: toastin .28s var(--ease-out) both; transition: opacity .2s ease, transform .2s ease;
}
.toast-ok { background: var(--color-accent-2-800); color: var(--color-accent-2-100); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.toast-error { background: var(--color-danger-bg); color: #ffd9d3; border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* — модальные окна — */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadein .2s ease both; overscroll-behavior: contain;
}
.modal-backdrop.is-leaving { opacity: 0; transition: opacity .15s ease; }
.modal {
  background: var(--color-surface); border-radius: 40px; padding: clamp(22px, 3vw, 34px);
  width: min(600px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  box-shadow: var(--shadow-lg); display: grid; gap: 18px; animation: pop .3s var(--ease-out) both; outline: none;
}
.modal-wide { width: min(980px, 100%); }
.modal-small { width: min(460px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-heading { min-width: 0; }
.modal-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-400); }
.modal-title { font-size: clamp(24px, 3vw, 30px); margin: 6px 0 0; overflow-wrap: anywhere; }
.modal-close { padding: 11px 18px; font-size: 14px; flex: none; }
.modal-body { display: grid; gap: 16px; min-width: 0; }
.modal-text { margin: 0; font-size: 16px; color: var(--color-neutral-300); line-height: 1.55; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.modal-actions .spacer { margin-right: auto; }
.modal-actions .btn { padding: 13px 22px; font-size: 15px; }

@media (max-width: 560px) {
  .modal-backdrop { padding: 10px; align-items: flex-end; }
  .modal { border-radius: 30px; max-height: calc(100dvh - 20px); }
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1 1 auto; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { animation: none !important; }
}

/* — телефоны и планшеты — */
/* нажатие срабатывает сразу, без задержки на «двойной тап для увеличения» */
a, button, summary, label, input, select, textarea, [data-act], [data-card-act], [role="button"] { touch-action: manipulation; }
/* iPhone присылает нажатие только элементам, которые выглядят нажимаемыми */
[data-act], [data-card-act], [role="button"] { cursor: pointer; }
button, [role="button"] { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 18%, transparent); }
@media (max-width: 860px) {
  /* шрифт полей не меньше 16px — иначе iPhone увеличивает страницу при вводе, и кнопки уезжают */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.code-input), select, textarea { font-size: 16px; }
}
.toasts { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }

/* ───────────── логотип: веер из трёх карточек, которые по очереди листаются ─────────────
   Общий для сайта и админки. Размер задаёт --logo (значок квадратный, всё внутри в em).
   Каждые 4 с верхняя карточка плавно (1,2 с) уходит назад по дуге, остальные сдвигаются вперёд; через 12 с всё повторяется.
   При «уменьшить движение» веер стоит: синяя карточка сверху. */
.brand-mark.brand-fan { position: relative; display: block; flex: none; width: 1em; height: 1em; font-size: var(--logo, 46px); }
.brand-fan .lf {
  position: absolute; left: .1875em; top: .3em; width: .625em; height: .406em; border-radius: .1em;
  display: grid; place-items: center; font-style: normal; transform-origin: 50% 50%; will-change: transform;
}
.brand-sm .brand-fan { --logo: 38px; }
.side-brand .brand-fan { --logo: 40px; }
.brand-fan .lf b { font: 600 .3em/1 "Oswald", "Arial Narrow", sans-serif; }
.brand-fan .lf-1 { background: linear-gradient(145deg, #6a95ff, #2f5df0 55%, #1a3cc4); color: #fff; box-shadow: 0 .045em 0 #0f2373; z-index: 3; translate: .078em .0625em; rotate: 8deg; }
.brand-fan .lf-2 { background: linear-gradient(150deg, #24315c, #0d1426); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); z-index: 2; translate: -.016em -.0625em; rotate: -6deg; }
.brand-fan .lf-3 { background: linear-gradient(145deg, #e3eaff, #8aabff); color: #0b1430; z-index: 1; translate: -.094em 0; rotate: -18deg; }
/* сдвиг и поворот — отдельные анимации: карточка уходит в сторону и возвращается назад колоды по дуге,
   а поворачивается всё это время плавно в одну сторону — без рывка и остановки посередине */
@keyframes zkLogoMove {
  0%, 23.33% { translate: .078em .0625em; z-index: 3; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  28.33% { translate: .25em -.09em; z-index: 3; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  28.4% { z-index: 1; }
  33.33%, 56.66% { translate: -.094em 0; z-index: 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  66.66%, 90% { translate: -.016em -.0625em; z-index: 2; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { translate: .078em .0625em; z-index: 3; }
}
@keyframes zkLogoTurn {
  0%, 23.33% { rotate: 8deg; }
  33.33%, 56.66% { rotate: -18deg; }
  66.66%, 90% { rotate: -6deg; }
  100% { rotate: 8deg; }
}
/* буква видна только на верхней карточке — у нижних она выглядывала бы из-за края */
.brand-fan .lf-2 b, .brand-fan .lf-3 b { opacity: 0; }
@keyframes zkLogoLetter { 0%, 23.33% { opacity: 1; } 27%, 91% { opacity: 0; } 98%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .brand-fan .lf { animation: zkLogoMove 12s cubic-bezier(.45, 0, .25, 1) infinite, zkLogoTurn 12s cubic-bezier(.45, 0, .55, 1) infinite; }
  .brand-fan .lf b { animation: zkLogoLetter 12s ease-in-out infinite; }
  .brand-fan .lf-2 { animation-delay: -8s, -8s; }
  .brand-fan .lf-3 { animation-delay: -4s, -4s; }
  .brand-fan .lf-2 b { animation-delay: -8s; }
  .brand-fan .lf-3 b { animation-delay: -4s; }
}