/* =====================================================================
   Тема PSK «Вторая зарплата» поверх стартера (макет: бумага + презентация эфира).
   Подключается после app.css. Чтобы откатить тему — убрать <link> в base.html.
   ===================================================================== */
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/JetBrainsMono-cyrillic-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/JetBrainsMono-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/JetBrainsMono-cyrillic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/JetBrainsMono-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --psk-paper: #ECE7DE; --psk-paper-2: #E3DDD2; --psk-card: #FFFFFF; --psk-side: #F6F3ED;
  --psk-ink: #141314; --psk-ink-2: #3B393A; --psk-mute: #6F6A69; --psk-line: #D9D2C6;
  --psk-red: #FF3B30; --psk-red-deep: #E0261C; --psk-red-soft: #FFEAE8; --psk-ok: #1C7A4A;
  --psk-night: #141314; --psk-night-2: #1E1C1D; --psk-on-night: #F6F3ED; --psk-night-mute: #A39D9B;
  --psk-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --psk-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --psk-shadow: 0 10px 30px -14px rgba(20,19,20,.28);
  --font-body: 'Inter';
}
body { background: var(--psk-paper); color: var(--psk-ink); font-family: var(--psk-sans); }

/* ---------- общие кирпичи ---------- */
.psk-ey { font: 700 11px/1.3 var(--psk-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--psk-mute); }
.psk-ey--red { color: var(--psk-red); }
.psk-h1, .psk-h2, .psk-auth__h, .psk-auth__h2 { font-family: var(--psk-sans); font-weight: 900; letter-spacing: -.035em; line-height: 1.04; margin: 0; text-wrap: balance; }
.psk-h1 i, .psk-h2 i, .psk-auth__h i, .psk-brand i { font-style: normal; color: var(--psk-red); }
.psk-pg { height: 6px; background: var(--psk-paper-2); border-radius: 999px; overflow: hidden; }
.psk-pg > s { display: block; height: 100%; background: var(--psk-red); text-decoration: none; }
.psk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--psk-red); color: #fff !important;
  font: 800 15px/1 var(--psk-sans); padding: 15px 22px; border-radius: 999px; text-decoration: none !important;
  box-shadow: 0 10px 24px -10px rgba(255,59,48,.7); transition: background-color .15s ease, transform .15s ease; }
.psk-btn:hover { background: var(--psk-red-deep); }
.psk-btn:active { transform: translateY(1px); }
.psk-btn--ghost { background: transparent; color: var(--psk-ink) !important; border: 1.5px solid var(--psk-ink); box-shadow: none; }
.psk-btn--ghost:hover { background: rgba(20,19,20,.05); }
:focus-visible { outline: 2px solid var(--psk-red); outline-offset: 2px; }

/* кнопки стартера в цвета PSK */
.btn-primary { background: var(--psk-red); border-radius: 999px; font-weight: 800; }
.btn-primary:hover { background: var(--psk-red-deep); }

/* ---------- ВХОД / письмо / подтверждение / анкета ---------- */
.psk-auth { min-height: 100vh; min-height: 100dvh; background: var(--psk-paper); display: grid; grid-template-columns: 1fr;
  align-items: center; gap: 28px; padding: 40px 20px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 860px) { .psk-auth { grid-template-columns: 1.15fr .85fr; gap: 56px; padding: 56px 40px; } }
.psk-auth__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.psk-auth__h { font-size: clamp(48px, 9vw, 92px); color: var(--psk-ink); }
.psk-auth__h2 { font-size: 30px; color: var(--psk-ink); }
.psk-auth__card { margin-top: 8px; background: var(--psk-card); border-radius: 20px; padding: 22px; box-shadow: var(--psk-shadow);
  max-width: 460px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.psk-auth__sub { margin: 0; color: var(--psk-ink-2); font-size: 15.5px; line-height: 1.5; }
.psk-auth__sub b { color: var(--psk-ink); }
.psk-auth__form { display: flex; flex-direction: column; gap: 10px; }
.psk-auth__note { margin: 0; font-size: 13px; color: var(--psk-mute); }
.psk-auth .field-dark { background: #fff; color: var(--psk-ink); border: 1.5px solid var(--psk-ink); border-radius: 12px; height: 52px; font-size: 16px; }
.psk-auth .field-dark::placeholder { color: #A39D9B; }
.psk-auth .field-dark:focus { border-color: var(--psk-red); box-shadow: 0 0 0 4px var(--psk-red-soft); }
.psk-auth .btn-primary { height: 52px; font-size: 16px; box-shadow: 0 10px 24px -10px rgba(255,59,48,.7); }
.psk-auth .file-btn { border: 1.5px solid var(--psk-ink); color: var(--psk-ink); border-radius: 999px; justify-content: center; }
.psk-auth .file-btn:hover { background: rgba(20,19,20,.05); }
.psk-auth .link-dark { color: var(--psk-mute); text-decoration: underline; text-underline-offset: 3px; }
.psk-auth .link-dark:hover { color: var(--psk-ink); }
.psk-auth [data-avatar-scope] > span:first-child { border-color: var(--psk-line); background: var(--psk-side); color: var(--psk-mute); }
.psk-auth .text-center { text-align: left; }
.psk-auth__ph { margin: 0; justify-self: center; width: 100%; max-width: 340px; background: #fff; padding: 12px 12px 16px;
  box-shadow: 0 24px 44px -20px rgba(20,19,20,.5); transform: rotate(2deg); }
.psk-auth__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.psk-auth__ph figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
.psk-auth__ph b { font-weight: 900; letter-spacing: -.02em; font-size: 17px; }
.psk-auth__ph span { font: 500 11px var(--psk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--psk-mute); }
@media (max-width: 859px) { .psk-auth__ph { order: -1; max-width: 170px; transform: rotate(-2deg); padding: 8px 8px 10px; }
  .psk-auth__ph figcaption { display: none; } .psk-auth { align-content: start; } }

/* ---------- МЕНЮ (сайдбар) ---------- */
#app:not(.is-admin) .sidebar { background: var(--psk-side); color: var(--psk-ink); border-right: 1px solid var(--psk-line); }
#app:not(.is-admin) .sidebar .icon-btn { color: rgba(20,19,20,.55); }
#app:not(.is-admin) .sidebar .icon-btn:hover { background: rgba(20,19,20,.07); color: var(--psk-ink); }
#app:not(.is-admin) .sidebar .border-white\/10 { border-color: var(--psk-line); }
#app:not(.is-admin) .sidebar .avatar-chip { background: var(--psk-ink); color: #fff; }
.psk-side-head { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 16px; padding-bottom: 4px; }
.psk-side-head > .absolute { position: static; transform: none; align-self: flex-end; margin-top: -4px; }
.psk-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.psk-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--psk-red); }
.psk-brand__t { display: flex; flex-direction: column; min-width: 0; }
.psk-brand__t b { font-weight: 900; letter-spacing: -.035em; font-size: 20px; line-height: 1; }
.psk-brand__t small { font: 500 10.5px var(--psk-mono); color: var(--psk-mute); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.is-admin .psk-brand__t small, #app.is-admin .psk-side-prog .psk-ey { color: rgba(255,255,255,.75); }
.psk-side-prog { display: flex; flex-direction: column; gap: 6px; padding: 6px 16px 4px; }
.psk-side-link { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; background: rgba(20,19,20,.04); }
.psk-side-link::after { content: "→"; color: var(--psk-red); }
.psk-side-link.on { background: var(--psk-card); box-shadow: var(--psk-shadow); }
#app.is-admin .psk-side-prog { display: none; }

/* дерево: модули с номерами, пройденные с галочкой */
#app:not(.is-admin) .tree-nav { counter-reset: psk-mod; }
#app:not(.is-admin) .sidebar .tree-row { min-height: 34px; border-radius: 10px; font-weight: 600; color: var(--psk-ink-2); }
@media (hover:hover) { #app:not(.is-admin) .sidebar .tree-row:hover { background: rgba(20,19,20,.05); } }
#app:not(.is-admin) .sidebar .tree-row.is-current { background: var(--psk-card); color: var(--psk-ink); box-shadow: var(--psk-shadow); }
#app:not(.is-admin) .space-children > ul > li { counter-increment: psk-mod; }
#app:not(.is-admin) .space-children > ul > li > .tree-row .tree-link::before {
  content: counter(psk-mod, decimal-leading-zero); font: 700 12px var(--psk-mono); color: var(--psk-mute); flex: none; width: 22px; }
#app:not(.is-admin) .space-children > ul > li > .tree-row.is-current .tree-link::before { color: var(--psk-red); }
#app:not(.is-admin) .tree-children { border-color: var(--psk-line); }
#app:not(.is-admin) .tree-children .tree-row { font-weight: 500; font-size: 13.5px; }
.tree-row.is-done .tree-title { color: var(--psk-mute); }
.tree-row.is-done .tree-link::after { content: "✓"; margin-left: auto; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--psk-ok); color: #fff; font-size: 10px; font-weight: 900; display: inline-grid; place-items: center; }
#app:not(.is-admin) .space-head { opacity: 1; color: var(--psk-mute); }
#app:not(.is-admin) .row-actions { background: var(--psk-ink); }

/* ---------- ОБЛАСТЬ УРОКА ---------- */
.lesson-main, .lesson-main.bg-cream { background: var(--psk-paper); }
@media (min-width: 1024px) { #app:not(.is-admin) .lesson-main { box-shadow: inset 3px 0 0 var(--psk-red); } }
.mobile-topbar { background: rgba(236,231,222,.86); }
.tb-ghost { border-color: var(--psk-line); }
.show-sb-btn { color: var(--psk-ink); }
.lesson-prose { color: var(--psk-ink); font-family: var(--psk-sans); }
.psk-lesson-ey { display: block; margin-bottom: 10px; }
.lesson-prose h1 { font-weight: 900; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(30px, 4vw, 44px); text-wrap: balance; }
.lesson-prose h2 { font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.lesson-prose h3 { font-weight: 800; letter-spacing: -.02em; }
.lesson-prose a:not([class]) { color: var(--psk-red); text-underline-offset: 3px; }
.lesson-prose hr { border-color: var(--psk-line); }
.video-embed { border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(255,59,48,.6); }
/* каллауты → белые карточки; info с красной точкой, как плашки презентации */
.callout-info, .callout-task, .callout-success, .callout-error { border-radius: 16px; border: 0; background: var(--psk-card); box-shadow: var(--psk-shadow); padding: 16px 18px; }
.callout-info { position: relative; padding-left: 38px; }
.callout-info::before { content: ""; position: absolute; left: 18px; top: 1.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--psk-red); }
.callout-success { box-shadow: inset 4px 0 0 var(--psk-ok), var(--psk-shadow); }
.callout-error { box-shadow: inset 4px 0 0 var(--psk-red), var(--psk-shadow); }
.callout-title { font-weight: 900; letter-spacing: -.03em; }
.file-card { border-radius: 16px; background: var(--psk-card); box-shadow: var(--psk-shadow); border: 0; }
.lesson-prose .btn-primary, .lesson-prose a.btn-primary { border-radius: 999px; }
.task-list-item-checkbox:checked { background: var(--psk-red); border-color: var(--psk-red); }
/* оценка урока */
.lesson-prose .rate-block { border: 0; border-radius: 20px; background: var(--psk-card); box-shadow: var(--psk-shadow); }
.lesson-prose .rate-title { font-weight: 900; letter-spacing: -.03em; font-size: 22px; }
.lesson-prose .rate-btn { border-radius: 50%; border-color: var(--psk-line); font-weight: 800; }
.lesson-prose .rate-btn.active { background: var(--psk-red); border-color: var(--psk-red); }
.lesson-prose .rate-submit { border-radius: 999px; background: var(--psk-red); font-weight: 800; }
.lesson-prose .rate-text { border-radius: 12px; }
.lesson-prose .rate-done-i { color: var(--psk-ok); }
.rate-next { color: var(--psk-red); }
/* низ урока */
.psk-lnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 36px; }
.toc a.active, .toc-list a.active { color: var(--psk-red); }

/* ---------- ПРОГРАММА ---------- */
.psk-program .lesson-scroll { padding-top: 0; }
.psk-wrap { max-width: 1040px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 1024px) { .psk-wrap { padding: 36px 44px; } }
@media (max-width: 1023px) { .psk-program .psk-wrap { padding-top: 70px; } }
.psk-hero { position: relative; overflow: hidden; background: var(--psk-night); color: var(--psk-on-night); border-radius: 22px;
  padding: 22px; display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: end; }
.psk-hero::before { content: ""; position: absolute; inset: auto -10% -70% 25%; height: 130%;
  background: radial-gradient(closest-side, rgba(255,59,48,.38), transparent); pointer-events: none; }
.psk-hero > * { position: relative; min-width: 0; }
.psk-hero__x { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; grid-column: 1 / 2; }
.psk-hero .psk-h1 { font-size: clamp(30px, 5vw, 50px); color: var(--psk-on-night); }
.psk-now { width: 100%; max-width: 540px; background: var(--psk-night-2); border: 1px solid #2F2C2D; border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.psk-now .psk-ey { color: var(--psk-night-mute); }
.psk-now b { font-size: 15px; line-height: 1.35; }
.psk-now .psk-pg { background: #2F2C2D; }
.psk-hero__ph { width: 96px; height: 120px; object-fit: cover; object-position: 50% 25%; border-radius: 14px; align-self: start; }
@media (min-width: 760px) { .psk-hero { grid-template-columns: 1fr 220px; padding: 30px; }
  .psk-hero__ph { width: 220px; height: 270px; align-self: center; } }
@media (max-width: 759px) { .psk-hero .psk-btn { width: 100%; } .psk-hero__x { grid-column: 1 / -1; grid-row: 2; }
  .psk-hero__ph { grid-column: 2; grid-row: 1; justify-self: end; } }
.psk-sh { display: flex; flex-direction: column; gap: 6px; }
.psk-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.psk-mods { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .psk-mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .psk-mods { grid-template-columns: repeat(3, 1fr); } }
.psk-mod { background: var(--psk-card); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--psk-shadow); text-decoration: none; color: var(--psk-ink); min-width: 0; transition: transform .15s ease; }
@media (hover:hover) { .psk-mod:hover { transform: translateY(-2px); } }
.psk-mod__n { font: 900 46px/1 var(--psk-sans); letter-spacing: -.045em; color: var(--psk-line); }
.psk-mod.is-on { outline: 2px solid var(--psk-red); }
.psk-mod.is-on .psk-mod__n, .psk-mod.is-done .psk-mod__n { color: var(--psk-red); }
.psk-mod__t { font-size: 17px; line-height: 1.25; }
.psk-mod__m { font: 500 12px var(--psk-mono); color: var(--psk-mute); }
.psk-gap { height: 40px; }

/* ---------- ТЕЛЕФОН: вкладки снизу, меню шторкой снизу ---------- */
.psk-tabs { display: none; }
@media (max-width: 1023px) {
  .psk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--psk-line); padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .psk-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 10.5px var(--psk-sans); color: var(--psk-mute);
    text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
  .psk-tab i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid currentColor; display: block; }
  .psk-tab.on { color: var(--psk-red); }
  .psk-tab.on i { background: var(--psk-red-soft); }
  .psk-tab--go { color: var(--psk-ink); }
  .psk-tab--go i { border-radius: 50%; background: var(--psk-red); border-color: var(--psk-red); box-shadow: 0 6px 14px -4px rgba(255,59,48,.7); }
  .lesson-scroll { padding-bottom: 96px; }
  .psk-lnav .psk-btn { flex: 1 1 140px; }
  /* меню модулей = шторка снизу */
  #app:not(.is-admin) .sidebar { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 84vh; height: 84dvh;
    border-radius: 22px 22px 0 0; border-right: 0; transform: translateY(105%); z-index: 40; }
  #app.mobile-nav-open:not(.is-admin) .sidebar { transform: translateY(0); }
  #app:not(.is-admin) .sidebar::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: var(--psk-line);
    align-self: center; margin-top: 8px; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .psk-btn, .psk-mod, .sidebar { transition: none !important; } .auth-in { animation: none; } }

/* правки после живой проверки 14.10 */
.psk-auth .field-dark:focus-visible { outline: none; }
#app:not(.is-admin) .tree-link > span.shrink-0 { display: none; }   /* эмодзи 📄/🗂 в меню не нужны: модули с номерами */
.psk-mod .psk-pg { margin-top: auto; }
.lesson-prose h1 { letter-spacing: -.025em; }
/* мобильная шапка «Программы»: аватар, название, кольцо прогресса */
.psk-mtop { justify-content: space-between; padding: 8px 16px; }
.psk-ava--s { width: 32px; height: 32px; border-width: 1.5px; box-shadow: 0 0 0 1.5px var(--psk-red); }
.psk-mtop .psk-brand__t b { font-size: 17px; }
.psk-ring { --p: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--psk-red) calc(var(--p) * 1%), var(--psk-line) 0); }
.psk-ring > span { width: 30px; height: 30px; border-radius: 50%; background: var(--psk-paper); display: grid; place-items: center; font: 800 10px var(--psk-sans); }
@media (max-width: 759px) {
  .psk-hero { grid-template-columns: 1fr; padding: 18px; }
  .psk-hero__ph { position: absolute; top: 18px; right: 18px; width: 78px; height: 96px; max-width: none; grid-column: auto; grid-row: auto; }
  .psk-hero__x { grid-column: 1; grid-row: 1; }
  .psk-hero__x > .psk-ey, .psk-hero__x > .psk-h1 { padding-right: 92px; }
  .psk-hero .psk-h1 { font-size: 30px; }
}