@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/jost-cyrillic-300-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jost-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/jost-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jost-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jost-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #07070a;
  --text: #f5f5f7;
  --muted: rgba(255,255,255,.62);
  --faint: rgba(255,255,255,.38);
  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.11);
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --radius: 18px;
  --danger: #ffb4b4;
  --ok: #d8ffe0;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
  font-size: 16px; line-height: 1.5; font-weight: 300;
  background-image:
    radial-gradient(60vw 45vw at 12% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50vw 40vw at 100% 20%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(45vw 40vw at 30% 110%, rgba(255,255,255,.08), transparent 60%);
  background-attachment: fixed;
}
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: .85rem; }

.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 24px; background: rgba(10,10,14,.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.logo img { height: 34px; display: block; filter: invert(1); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a { text-decoration: none; padding: 7px 12px; border-radius: 10px; color: var(--muted); font-weight: 300; }
.nav a:hover { color: var(--text); background: var(--glass); }
.nav a[aria-current="page"] { color: var(--text); background: var(--glass-strong); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: #fff; color: #000; font-size: .75rem; font-weight: 700; text-align: center; }
.userbox { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .88rem; }
.userbox form { margin: 0; }

main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.glass + .glass, .stack > * + * { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 860px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .topbar { padding: 10px 16px; } main { padding: 20px 16px 60px; } }

.stat { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700;
  padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--text); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: #fff; color: #000; border-color: #fff; }
.btn.primary:hover { background: #e9e9ee; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(255,180,180,.5); color: var(--danger); }
.btn.small { padding: 5px 11px; font-size: .85rem; border-radius: 10px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1px solid var(--line-strong); background: var(--glass); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.pill-draft { color: var(--muted); }
.pill-review { color: #fff; border-color: #fff; } .pill-review::before { background: currentColor; }
.pill-revision { color: #fff; border-style: dashed; } .pill-revision::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pill-accepted { color: #fff; background: var(--glass-strong); } .pill-accepted::before { background: currentColor; }
.pill-shipped { color: #fff; background: rgba(255,255,255,.2); } .pill-shipped::before { background: currentColor; }
.pill-published { color: #000; background: #fff; border-color: #fff; } .pill-published::before { background: #000; border-color:#000; }
.pill-signed { color: #000; background: #fff; border-color: #fff; } .pill-signed::before { background: #000; border-color:#000; }
.pill-sent { color: #fff; } .pill-generated { color: var(--muted); } .pill-terminated { color: var(--faint); text-decoration: line-through; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--faint); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
tbody tr.link:hover { background: var(--glass); }

label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--text);
  background: rgba(0,0,0,.35); font: inherit;
}
textarea { resize: vertical; }
select option { background: #111; }
input[type=file] { width: 100%; padding: 9px; border: 1px dashed var(--line-strong); border-radius: 12px; background: rgba(0,0,0,.25); color: var(--muted); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: #fff; vertical-align: -3px; margin-right: 8px; }
.field { margin-bottom: 14px; } .field.check label { display: flex; align-items: center; font-weight: 300; margin: 0; }
.help { color: var(--faint); font-size: .8rem; margin-top: 4px; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--danger); font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.form-grid .wide { grid-column: 1 / -1; }

.messages { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.messages li { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--glass-strong); }
.messages li.error { border-color: rgba(255,180,180,.6); color: var(--danger); }
.messages li.success { border-color: rgba(216,255,224,.5); }
.messages li.warning { border-style: dashed; }

.auth { max-width: 440px; margin: 9vh auto 0; }
.auth .logo img { height: 64px; margin: 0 auto 24px; }
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
.kv dt { color: var(--faint); } .kv dd { margin: 0; word-break: break-word; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 8px; } }

.track { padding: 0; overflow: hidden; margin-top: 14px; }
.track > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.track > summary::-webkit-details-marker { display: none; }
.track > .body { padding: 6px 18px 18px; border-top: 1px solid var(--line); }
.checks { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 14px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border: 0; }
.checklist button { background: none; border: 1px solid var(--line-strong); border-radius: 6px; width: 22px; height: 22px; color: #fff; cursor: pointer; flex: none; margin-top: 2px; }
.checklist .done { color: var(--faint); text-decoration: line-through; }
.comment { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.comment.internal { border-style: dashed; }
.comment + .comment { margin-top: 10px; }
.cover { width: 100%; max-width: 280px; border-radius: 16px; border: 1px solid var(--line-strong); display: block; aspect-ratio: 1; object-fit: cover; background: #111; }
.month h2 { margin-top: 28px; text-transform: capitalize; }
.empty { text-align: center; color: var(--faint); padding: 28px 10px; }
.tag { font-size: .72rem; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 6px; margin-right: 4px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .topbar { background: rgba(24,24,28,.92); }
}

/* ---------- Фаза 2 ---------- */
.logo { position: relative; display: inline-block; }
.beta { position: absolute; right: -4px; bottom: -6px; transform: translateX(100%); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: lowercase; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); background: var(--glass); }
.topbar .logo { margin-right: 30px; }
.iconlink { position: relative; text-decoration: none; padding: 7px 10px; border-radius: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.iconlink:hover { color: var(--text); background: var(--glass); }
.iconlink .badge { margin-left: 2px; }
.footer { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; color: var(--faint); font-size: .85rem; display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { color: var(--muted); }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { text-decoration: none; padding: 7px 14px; border-radius: 10px; color: var(--muted); border: 1px solid transparent; }
.tabs a[aria-current="page"] { color: var(--text); background: var(--glass-strong); border-color: var(--line); }

.radio-list ul, ul.radios { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.radio-list li label { display: flex; align-items: center; font-weight: 300; margin: 0; cursor: pointer; }
.radio-list input[type=radio] { accent-color: #fff; width: 18px; height: 18px; margin-right: 8px; }
.field.check label { align-items: flex-start; gap: 0; }
.field.check input[type=checkbox] { flex: none; margin-top: 3px; }
.consent-text { max-height: 190px; overflow: auto; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.3); font-size: .85rem; color: var(--muted); margin-bottom: 10px; }

/* пошаговая форма */
.stepper-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.stepper-nav button { font: inherit; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.stepper-nav button .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: .78rem; }
.stepper-nav button[aria-current="step"] { color: #000; background: #fff; border-color: #fff; }
.stepper-nav button[aria-current="step"] .n { border-color: #000; }
.stepper-nav button.has-error { border-color: rgba(255,180,180,.7); color: var(--danger); }
[data-stepper] > .step { display: none; }
[data-stepper] > .step.active { display: block; }
.no-js [data-stepper] > .step, .plain [data-stepper] > .step { display: block; }
.plain [data-stepper] > .step + .step { margin-top: 18px; }
.step > h2 { margin-bottom: .3em; }
.step-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
[hidden] { display: none !important; }
.autosave { font-size: .85rem; color: var(--faint); min-width: 130px; text-align: right; }
.autosave.saving { color: var(--muted); } .autosave.err { color: var(--danger); }
.hint { padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: .88rem; margin: 6px 0 16px; }
.hint b { color: var(--text); }
.row-card { padding: 14px 16px; margin-top: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.person-row { display: grid; grid-template-columns: 2fr 2fr 2.4fr 1fr auto; gap: 0 12px; align-items: end; }
@media (max-width: 860px) { .person-row { grid-template-columns: 1fr 1fr; } }
.fielderr { color: var(--danger); font-size: .82rem; margin-top: 4px; min-height: 0; }
input.invalid, textarea.invalid, select.invalid { border-color: rgba(255,180,180,.8); }
.cover-box { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
@media (max-width: 700px) { .cover-box { grid-template-columns: 1fr; } }
.progress { height: 6px; border-radius: 99px; background: var(--glass-strong); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; width: 0; background: #fff; transition: width .15s; }
.upload-state { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.upload-state.err { color: var(--danger); } .upload-state.ok { color: var(--ok); }
.checklist-problems li { margin: 4px 0; }
.ok-box { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(216,255,224,.5); color: var(--ok); }

/* уведомления, новости */
.notif { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.notif + .notif { margin-top: 8px; }
.notif.unread { border-color: var(--line-strong); background: var(--glass-strong); }
.notif a { text-decoration: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; margin-right: 8px; }
.post + .post { margin-top: 18px; }
.prose { white-space: normal; }
.urgent { color: #fff; }
.upload-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.upload-form input[type=file] { flex: 1; min-width: 200px; width: auto; }
.pill-review::before { background: currentColor; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #111; display: block; }
.inline-form { display: inline; margin: 0; }
.sortlink { text-decoration: none; }
.messages { position: fixed; top: 72px; right: 20px; z-index: 60; max-width: min(420px, calc(100vw - 40px)); margin: 0; }
.messages li { position: relative; padding-right: 38px; background: rgba(20,20,26,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .35s; word-break: break-word; }
.messages li.fade { opacity: 0; }
.msg-close { position: absolute; right: 8px; top: 6px; border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; }


/* ---------- Правки 3 ---------- */
/* ровные карточки в сетке */
.grid { align-items: stretch; }
.grid > .glass, .grid > .glass + .glass { margin-top: 0; }
.grid > .glass { display: flex; flex-direction: column; }
.grid > .glass > :last-child { margin-bottom: 0; }

/* то, что менять нельзя */
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] { color: var(--faint); background: rgba(255,255,255,.03); border-style: dashed; cursor: not-allowed; -webkit-text-fill-color: var(--faint); opacity: 1; }
.locked label { color: var(--faint); }
.locked-note { color: var(--faint); font-size: .82rem; }

/* строки деталей трека */
.track-facts { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.track-facts li { color: var(--muted); } .track-facts b { color: var(--text); font-weight: 700; }

/* анимации */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
main > * { animation: rise .4s ease both; }
main.no-anim > *, main.no-anim .row-card, main.no-anim .messages li, main.no-anim .badge { animation: none; }
main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; }
main > *:nth-child(4) { animation-delay: .12s; } main > *:nth-child(n+5) { animation-delay: .16s; }
.glass { transition: border-color .25s, transform .25s, box-shadow .25s; }
a.glass:hover, .glass.hoverable:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.nav a, .tabs a, .iconlink, .stepper-nav button, .notif, tbody tr.link { transition: background .2s, color .2s, border-color .2s; }
[data-stepper] > .step.active { animation: fade .3s ease both; }
.messages li { animation: pop .3s ease both; }
.badge { animation: fade .3s ease both; }
.progress > i { transition: width .25s ease; }
.progress[data-anim] > i { transition: width .9s cubic-bezier(.22,.8,.3,1); }
.track > .body { animation: fade .25s ease both; }
.row-card { animation: rise .3s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* всплывающее окно уведомлений */
.bell { position: relative; }
.bell > button { background: none; border: 0; cursor: pointer; font: inherit; }
.popover { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; z-index: 50;
  padding: 8px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(18,18,24,.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 18px 50px rgba(0,0,0,.6); animation: pop .2s ease both; }
.popover-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; font-weight: 700; }
.pop-item { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: .9rem; transition: background .2s; }
.pop-item:hover { background: var(--glass); color: var(--text); }
.pop-item.unread { color: var(--text); background: var(--glass-strong); }
.pop-item small { display: block; color: var(--faint); margin-top: 2px; }
.pop-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-right: 6px; }
.popover .empty { padding: 20px 10px; }

/* меню на телефоне */
.menu-btn { display: none; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; color: var(--text); width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar .logo { margin-right: 24px; }
  .menu-btn { display: inline-flex; margin-left: auto; order: 3; }
  .userbox { order: 2; margin-left: auto; }
  .userbox .who { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 10px 16px 14px;
    background: rgba(10,10,14,.97); border-bottom: 1px solid var(--line); animation: pop .2s ease both; max-height: calc(100vh - 60px); overflow: auto; }
  .nav.open { display: flex; }
  .nav a { padding: 11px 12px; }
  .popover { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* в разработке */
.wip { text-align: center; padding: 60px 20px; }
.wip .pill { margin-bottom: 14px; }
.nav a.soon { color: var(--faint); }

/* страницы ошибок */
.errpage { max-width: 520px; margin: 12vh auto 0; text-align: center; }
.errpage .code { font-size: 5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.errpage .btn { margin-top: 8px; }

.stages li { align-items: center; }
.stage-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--muted); }
.stages li.is-done .stage-n { background: #fff; color: #000; border-color: #fff; }
.stages .tick { width: 22px; text-align: center; flex: none; }
.stages form { margin: 0; }
.stages .done { text-decoration: none; color: var(--faint); }
.kv.locked dd, .kv.locked dt { color: var(--faint); }

/* навигация в одну строку, неактивные разделы */
.topbar { gap: 14px; }
.nav { flex-wrap: nowrap; gap: 2px; }
.nav a, .nav .soon { white-space: nowrap; padding: 7px 10px; font-size: .95rem; }
.nav .soon { color: var(--faint); cursor: not-allowed; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.nav .soon small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border: 1px dashed var(--line-strong); border-radius: 99px; }
.topbar .logo { margin-right: 26px; }
@media (max-width: 1180px) and (min-width: 861px) { .nav a, .nav .soon { padding: 7px 7px; font-size: .9rem; } .userbox .who { display: none; } }
@media (max-width: 860px) { .nav { flex-wrap: nowrap; } .nav .soon { padding: 11px 12px; } }
@media (max-width: 1400px) and (min-width: 861px) { .userbox .who { display: none; } }
@media (max-width: 860px) { .nav { background: #0b0b10; } }

/* плеер */
.player { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.25); max-width: 520px; }
.p-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #000; cursor: pointer; font-size: .85rem; line-height: 1; display: grid; place-items: center; transition: transform .15s; }
.p-btn:hover { transform: scale(1.06); }
.p-seek { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; border-radius: 99px; outline-offset: 6px; cursor: pointer;
  background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255,255,255,.2) var(--p, 0%)); }
.p-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.p-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.p-time { flex: none; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.player.playing { border-color: var(--line-strong); }

/* база знаний: фото как в посте */
.kb-photo { margin: 16px 0 0; }
.kb-photo img { display: block; width: 100%; max-width: 680px; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.kb-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.kb-thumb { display: grid; gap: 6px; width: 120px; font-size: .8rem; color: var(--muted); }
.kb-thumb img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }