/* умом — user-facing design system. Values mirror "Umom Final Screens.dc.html" (1280×800 frames).
   Breakpoints (mobile-first): 600 tablet · 960 desktop-s · 1280 desktop (pixel-exact) · 1600 desktop-l. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/unbounded-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/unbounded-700-latin.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:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.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:Neucha;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/neucha-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Neucha;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/neucha-latin.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}

/* ---------- Tokens ---------- */
:root{
  --bg-page:#EAE3D5;--surface:#F7F3EA;--card:#FCFAF4;
  --ink:#1A1714;--muted:#6E675C;--faint:#9A9285;--line-strong:#B5AC9C;
  --line:#E4DCCC;--chip:#EFE8DA;
  --pink:#FF4DA6;--pink-hover:#FB2E90;--pink-ink:#C21C74;--pink-soft:#FFE1F0;--pink-soft-2:#FFC7E3;
  --heat-1:#FFD23F;--heat-2:#FFC400;--heat-3:#FFB21F;--heat-4:#FF8A36;--heat-5:#FF6A3D;
  --hint:#FFC400;--hint-note:#FFE36B;--hint-soft:#FFF1B8;
  --ok:#087A44;--ok-soft:#E6F4EC;--ok-soft-2:#C9EBD7;
  --bad:#C42717;--bad-soft:#FAEAE7;--bad-soft-2:#F5D3CD;
  /* Taken as-is from the mockup markup */
  --heat-3b:#FF9F2E;--heat-4b:#FF8A3D;--stripe:#F4EEE2;--ok-bg:#DFF3E7;--bad-bg:#FCE4E1;--dim:#F4EFE4;
  --font:Onest,-apple-system,'Segoe UI',sans-serif;
  --display:Unbounded,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --hand:'Comic Sans MS',Neucha,cursive;
  --shadow-cta:0 6px 20px rgba(255,77,166,0.22);
  --shadow-card:0 8px 24px rgba(26,23,20,0.08);
  --shadow-lift:0 12px 32px rgba(26,23,20,0.10);
  --stripes:repeating-linear-gradient(135deg,#EFE8DA 0 10px,#F4EEE2 10px 20px);
  --stripes-8:repeating-linear-gradient(135deg,#EFE8DA 0 8px,#F4EEE2 8px 16px);
  --gutter:20px;--nav-h:112px;--qbar-h:96px;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:960px){:root{--gutter:40px;--nav-h:72px;--qbar-h:80px}}
@media (min-width:1280px){:root{--gutter:56px}}

/* ---------- Keyframes (copied verbatim from the mockup) ---------- */
@keyframes umNote{0%{opacity:0;transform:translateY(-60px) rotate(-16deg) scale(.7)}55%{opacity:1;transform:translateY(6px) rotate(7deg) scale(1.03)}75%{transform:translateY(-2px) rotate(2deg)}100%{opacity:1;transform:rotate(4deg)}}
@keyframes umTileIn{0%{opacity:0;transform:translateY(10px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes umQ{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes umMemeUp{0%{opacity:0;transform:translateY(120%) rotate(12deg)}60%{opacity:1;transform:translateY(-4%) rotate(-4deg)}100%{opacity:1;transform:rotate(-3deg)}}
@keyframes umFoil{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes umMark{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes umDrawer{from{transform:translateX(100%)}to{transform:none}}
@keyframes umPull{0%{transform:translateY(0)}35%{transform:translateY(46px)}60%{transform:translateY(-8px)}80%{transform:translateY(4px)}100%{transform:none}}
@keyframes umSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes umGlow{from{opacity:0}to{opacity:1}}
@keyframes umHintIn{0%{opacity:0;transform:translateY(-14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes umNudge{0%,100%{transform:none}50%{transform:translate(-4px,-4px)}}
@keyframes umShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes umFill{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes umPop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes umDot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes umPass{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}
@keyframes umScan{0%{top:0}100%{top:calc(100% - 6px)}}
@keyframes umMis{0%,100%{box-shadow:6px 6px 0 #FFC400}33%{box-shadow:-5px 4px 0 #FF4DA6}66%{box-shadow:4px -5px 0 #FF6A3D}}
@keyframes umWob{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1deg) scale(.985)}}
@keyframes umGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes umReel{from{transform:translateY(0)}to{transform:translateY(-2800px)}}
@keyframes umPiece{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6)}18%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes umType{0%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes umFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes umPaper{0%{opacity:0;transform:translate(-50%,-260px) rotate(-18deg) scale(.9)}45%{opacity:1;transform:translate(-50%,0) rotate(4deg) scale(1)}60%{transform:translate(-50%,-14px) rotate(-2deg)}75%{transform:translate(-50%,0) rotate(0)}100%{opacity:0;transform:translate(260px,-40px) rotate(12deg) scale(.4)}}
@keyframes umRipple{0%{opacity:.6;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes umRowIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes umMarkIn{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:none}}
@keyframes umDrop{0%{opacity:0;transform:translateY(-40px) rotate(-6deg) scale(.9)}100%{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--pink-ink);text-decoration:none}
a:hover{color:var(--pink-hover)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}
@media (min-width:1600px){.app{max-width:1440px;margin:0 auto}}
.screen{flex:1;display:flex;flex-direction:column;min-width:0}
/* Desktop screens with inner scroll zones fill the viewport like the 800px frame. */
@media (min-width:960px){
  .screen--fit{height:calc(100dvh - var(--nav-h));min-height:0;flex:none}
  .scroll-y{overflow-y:auto;min-height:0}
}

/* ---------- Type helpers ---------- */
.display{font-family:var(--display);font-weight:700;letter-spacing:-0.02em}
.mono{font-family:var(--mono);font-weight:500}
.hand{font-family:var(--hand);font-weight:700}
.caps{font-size:12px;font-weight:700;letter-spacing:0.08em}
.caps-13{font-size:13px;font-weight:700;letter-spacing:0.08em}
.muted{color:var(--muted)}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-0.02em;margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;height:56px;padding:0 32px;border:0;border-radius:9999px;background:var(--pink);color:var(--ink);font-family:var(--font);font-size:18px;font-weight:700;line-height:1.1;box-shadow:var(--shadow-cta);cursor:pointer;text-align:center;transition:background 120ms}
.btn:hover,.btn:active{background:var(--pink-hover);color:var(--ink)}
a.btn:hover{color:var(--ink)}
.btn--x40{padding:0 40px}
.btn--x28{padding:0 28px}
.btn--soft{background:var(--pink-soft);color:var(--pink-ink);font-size:16px;padding:0 24px;box-shadow:none}
.btn--soft:hover,.btn--soft:active{background:var(--pink-soft-2);color:var(--pink-ink)}
.btn--dark{background:var(--ink);color:var(--surface);font-size:17px;box-shadow:none}
.btn--dark:hover,.btn--dark:active{background:#000;color:var(--surface)}
.btn--ghost{background:transparent;box-shadow:none;color:var(--muted);font-size:17px;padding:0 24px}
.btn--ghost:hover,.btn--ghost:active{background:transparent;color:var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:default}
.btn-wide{display:flex;align-items:center;justify-content:space-between;width:100%;height:64px;padding:0 28px;border:0;border-radius:24px;background:var(--pink);color:var(--ink);font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-0.01em;box-shadow:0 10px 28px rgba(255,77,166,0.28);cursor:pointer;transition:background 120ms}
.btn-wide:hover,.btn-wide:active{background:var(--pink-hover);color:var(--ink)}
.btn-wide__icon{font-size:24px;font-weight:700}
.pill-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 16px;border:0;border-radius:9999px;background:var(--chip);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.pill-btn span{font-size:15px}
.pill-btn:hover,.pill-btn:active{background:var(--line)}
.back{font-size:15px;font-weight:700;color:var(--muted)}
.back:hover{color:var(--ink)}
.link-pink{font-size:14px;font-weight:700;color:var(--pink-ink);background:none;border:0;padding:0;cursor:pointer}
.link-pink:hover{color:var(--pink-hover)}
@media (max-width:959px){.btn,.btn-wide,.pill-btn{min-height:44px}}

/* ---------- Navbar (Umom Nav) ---------- */
.nav{display:flex;flex-direction:column;flex-shrink:0;padding:0 var(--gutter)}
.nav__main{display:contents}
.logo{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo span{color:var(--pink-ink)}
.nav__tabs{display:flex;gap:6px;font-size:15px;font-weight:700}
.nav__tab{padding:8px 14px;border-radius:9999px;color:var(--muted);white-space:nowrap}
.nav__tab:hover{color:var(--ink)}
.nav__tab.is-active{background:var(--pink-soft);color:var(--pink-ink)}
.nav__logout{margin:0}
/* < 960: logo + logout on one row, tabs scroll on a second row (56px each). */
@media (max-width:959px){
  .nav{display:grid;grid-template-columns:1fr auto;grid-template-rows:56px 56px;align-items:center}
  .nav__main{display:contents}
  .logo{grid-column:1;grid-row:1}
  .nav__logout{grid-column:2;grid-row:1}
  .nav__tabs{grid-column:1 / -1;grid-row:2;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);align-items:center;height:56px}
  .nav__tabs::-webkit-scrollbar{display:none}
  .nav__tab{min-height:44px;display:flex;align-items:center}
}
@media (min-width:960px){
  .nav{flex-direction:row;height:72px;justify-content:space-between;align-items:center}
  .nav__main{display:flex;gap:40px;align-items:center}
}

/* ---------- Flash messages (TODO(design): not in mockups; 16b pill pattern) ---------- */
.flash{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px var(--gutter) 0}
.flash__item{margin:0;padding:10px 16px;border-radius:9999px;background:var(--chip);color:var(--muted);font-size:14px;font-weight:700;line-height:1.35;animation:umFadeIn 260ms ease-out both}
.flash__item.is-error{background:var(--bad-soft);color:var(--bad)}
.flash__item.is-ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- Shared bits ---------- */
.heat{display:flex;gap:3px}
.heat>span{flex:1;height:10px;border-radius:9999px;background:var(--line)}
.stripes{background:var(--stripes)}
.meme-ph{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);background:var(--stripes);border-radius:10px}
.meme-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dots{display:inline-flex;gap:4px;align-items:center}
.dots>span{width:6px;height:6px;border-radius:9999px;background:var(--pink-ink);animation:umDot 1s ease-in-out infinite}
.dots>span:nth-child(2){animation-delay:.2s}
.dots>span:nth-child(3){animation-delay:.4s}
.fade-in{animation:umFadeIn 260ms ease-out both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}

/* ---------- 1d · Landing ---------- */
.app--landing{position:relative;overflow:hidden;overflow:clip}
.land{position:relative;flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.land__deco{position:absolute;inset:0;pointer-events:none;display:none}
/* Same frame as every other meme in the app — see .conspect-meme__frame. */
.land__deco-meme{position:absolute;padding:10px;background:var(--card);border-radius:16px;box-shadow:5px 5px 0 var(--accent);transform:rotate(var(--tilt))}
.land__deco-meme>img{display:block;width:100%;height:auto;border-radius:10px}
/* The memes carry captions, so they are never dimmed and they live in the empty
   bands — above the headline, and below the hero where nothing else sits. Each
   band has its own clearance, hence the per-meme widths. */
.land__deco-meme--1{--accent:#FF4DA6;--tilt:-4deg;width:var(--deco-w);top:12px;left:50%}
.land__deco-meme--2{--accent:#FFC400;--tilt:5deg;width:calc(var(--deco-w) * 1.12);left:33%;bottom:20px}
.land__deco-meme--3{--accent:#FF6A3D;--tilt:-6deg;width:calc(var(--deco-w) * 0.82);right:48px;bottom:18px}
.land__deco-star{position:absolute;font-family:var(--display);font-weight:700;color:var(--pink-soft-2)}
.land__deco-star--1{left:36%;top:150px;font-size:28px;transform:rotate(12deg)}
.land__deco-star--2{right:34%;bottom:120px;font-size:22px;transform:rotate(-8deg)}
.land__top{position:relative;padding:32px var(--land-gutter,var(--gutter))}
.land__logo{font-size:22px}
.land__grid{position:relative;flex:1;padding:0 var(--land-gutter,var(--gutter)) 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.land__hero{display:flex;flex-direction:column;gap:36px;min-width:0}
.land__title{margin:0;display:flex;flex-direction:column;gap:6px;font-weight:700}
.land__title-main{font-family:Unbounded,'Arial Black',sans-serif;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-0.03em}
.land__title-hand{font-family:var(--hand);font-size:clamp(36px,4.375vw,56px);line-height:1.05;letter-spacing:-0.01em}
.land__title-hand>span{color:var(--pink-ink)}
.land__steps{display:flex;flex-direction:column;gap:12px;max-width:640px}
.land__step{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;border-radius:20px;background:var(--card);box-shadow:0 6px 18px rgba(26,23,20,0.06)}
.land__step-title{font-size:19px;font-weight:700;line-height:1.25}
.land__step-text{font-size:15px;line-height:1.4;color:var(--ink)}
.land__login{margin:0;display:flex}
.land__cta{height:60px;padding:0 30px;gap:12px;width:100%}
.land__g{width:26px;height:26px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.land__play{display:flex;flex-direction:column;gap:12px;min-width:0}
.land__try{font-family:var(--hand);font-size:22px;color:var(--muted);transform:rotate(-2deg);align-self:flex-start}
@media (min-width:600px){
  .land__steps{flex-direction:row}
  .land__cta{width:auto}
  .land__login{align-self:flex-start}
}
/* Below this there is no free band wide or tall enough to show a readable meme. */
@media (min-width:960px) and (min-height:720px){
  .land__deco{display:block}
}
@media (min-width:960px){
  .land__grid{grid-template-columns:minmax(0,1fr) 420px;gap:64px}
}
@media (min-width:1280px){.app--landing{--land-gutter:64px}}
/* The memes scale with the free vertical space, not the window width. */
.app--landing{--deco-w:176px}
@media (min-height:860px){.app--landing{--deco-w:236px}}
@media (min-height:1000px){.app--landing{--deco-w:268px}}

/* Mini-game */
.game{background:var(--card);border-radius:24px;padding:22px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:14px;transform:rotate(1deg)}
.game__head{display:flex;justify-content:space-between;align-items:center}
.game__label{color:var(--pink-ink)}
.game__segs{display:flex;gap:4px;width:84px}
.game__segs>span{flex:1;height:6px;border-radius:9999px;background:var(--line)}
.game__segs>span.is-ok{background:var(--ok)}
.game__segs>span.is-bad{background:var(--bad)}
.game__body{display:flex;flex-direction:column;gap:12px}
.game__q{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-0.01em}
.game__opts{display:flex;flex-direction:column;gap:6px}
.game__opt{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:11px 14px;border:0;border-radius:14px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:400;text-align:left;cursor:pointer;transition:background 200ms,color 200ms}
.game__opt>span:first-child{display:flex;gap:12px}
.game__opt .mono{font-size:13px;opacity:.7}
.game__opt.is-ok{background:var(--ok);color:var(--card);font-weight:700}
.game__opt.is-bad{background:var(--bad);color:var(--card);font-weight:700}
.game__opt.is-dim{color:var(--muted)}
.game__ok{display:flex;flex-direction:column;gap:10px;width:100%;max-width:351px;min-height:381px}
.game__ok-label{font-size:14px;font-weight:700;color:var(--ok)}
.game__meme{width:calc(100% - 6px);flex-shrink:0;background:var(--card);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;animation:umDrop 380ms var(--spring) both}
.game__meme .meme-ph{height:330px;font-size:12px;background:var(--stripes-8)}
.game__meme img{display:block;width:100%;height:auto;border-radius:10px}
.game__bad{font-size:13px;line-height:1.5;color:var(--bad)}
.game__done{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.game__score{font-family:var(--mono);font-weight:500;font-size:32px}
.game__done-title{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1}
.game__done-text{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- 2b · Мои курсы ---------- */
.dash{padding:32px var(--gutter) 0;gap:28px}
.dash__head{display:flex;flex-direction:column;gap:6px}
.dash__sub{margin:0;font-size:17px;color:var(--muted)}
.dash__scroll{flex:1;margin:0 -16px;padding:0 16px 40px}
.dash__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.course-new,.course-card{height:230px;border-radius:24px}
/* "Создать курс" creates the course, so the tile is a submit button, not a link. */
.course-new-form{margin:0;display:flex}
.course-new{width:100%;padding:0;border:0;appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;background:var(--pink-soft);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;color:var(--pink-ink)}
.course-new:hover{color:var(--pink-ink)}
.course-new__plus{width:64px;height:64px;border-radius:50%;background:var(--pink);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:30px;font-weight:700;box-shadow:var(--shadow-cta);transition:background 120ms}
.course-new:hover .course-new__plus{background:var(--pink-hover)}
.course-new__title{font-size:20px;font-weight:700}
.course-new__text{font-size:14px}
.course-card{background:var(--card);box-shadow:var(--shadow-card);padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);min-width:0}
.course-card:hover{color:var(--ink)}
.course-card__top{display:flex;justify-content:space-between}
.course-card__status.is-pink{color:var(--pink-ink)}
.course-card__status.is-muted{color:var(--muted)}
.course-card__status.is-ok{color:var(--ok)}
.course-card__pct{font-size:13px;color:var(--muted)}
.course-card__title{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-0.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.course-card__title.is-long{font-size:22px}
.course-card__bottom{display:flex;flex-direction:column;gap:10px}
.course-card__meta{font-size:13px;color:var(--muted)}
.course-card__meta .mono{color:var(--ink)}
.course-card__cta{font-size:14px;font-weight:700;color:var(--pink-ink)}
@media (min-width:600px){.dash__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.dash{padding-top:40px}.dash__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 2b0 · empty */
.dash--empty{padding:28px var(--gutter) 48px}
.empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px}
.empty__hero{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.empty__fan{position:relative;width:200px;height:124px}
.empty__fan span{position:absolute;top:0;width:96px;height:120px;border-radius:16px;background:var(--card);box-shadow:0 8px 20px rgba(26,23,20,0.1);z-index:1}
.empty__fan span:nth-child(1){left:20px;transform:rotate(-10deg)}
.empty__fan span:nth-child(2){left:84px;transform:rotate(9deg)}
.empty__fan span:nth-child(3){left:52px;top:-4px;background:var(--pink-soft);box-shadow:0 10px 24px rgba(255,77,166,0.2);z-index:2;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:40px;font-weight:700;color:var(--pink-ink)}
.empty__text{display:flex;flex-direction:column;gap:8px;align-items:center}
.empty__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.35vw,30px);letter-spacing:-0.02em}
.empty__cta-form{margin:0;align-self:stretch;display:flex;justify-content:center}
.empty__cta{border:0;appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 30px 16px 16px;border-radius:9999px;background:var(--pink);color:var(--ink);box-shadow:0 8px 22px rgba(255,77,166,0.28);transition:background 120ms}
.empty__cta:hover,.empty__cta:active{background:var(--pink-hover);color:var(--ink)}
.empty__cta span:first-child{width:36px;height:36px;border-radius:50%;background:var(--card);color:var(--pink-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:20px;font-weight:700}
.empty__cta span:last-child{font-size:18px;font-weight:700}
.examples{width:100%;max-width:880px;display:flex;flex-direction:column;gap:14px}
.examples__row{display:flex;flex-direction:column;gap:16px}
.example{flex:1;border-radius:20px;background:var(--card);box-shadow:0 6px 18px rgba(26,23,20,0.07);padding:20px 22px;display:flex;flex-direction:column;gap:14px;color:var(--ink);transition:box-shadow 120ms}
.example:hover,.example:active{box-shadow:0 10px 26px rgba(26,23,20,0.12);color:var(--ink)}
.example__title{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-0.02em}
.example__go{margin-top:auto;font-size:14px;font-weight:700;color:var(--pink-ink)}
@media (max-width:599px){.empty__fan{transform:scale(.8)}.empty__cta{width:100%;justify-content:center}}
@media (min-width:960px){.dash--empty{padding-top:36px}.examples__row{flex-direction:row}}

/* ---------- Forms (3a, 15a) ---------- */
.backbar{height:72px;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.backbar__spacer{width:90px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__label{font-size:14px;font-weight:700}
.field__input{width:100%;padding:16px 18px;border:0;border-radius:10px;background:var(--card);font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);outline:none;transition:box-shadow 120ms}
.field__input:focus,.field__input:focus-visible{box-shadow:inset 0 -2px 0 var(--pink);outline:none}
.field__input::placeholder{color:var(--faint)}
.field__input--lg{font-size:18px;line-height:1.4}
.field__textarea{height:120px;resize:none}
.field__error{font-size:13px;font-weight:700;color:var(--bad)}
.errorlist{margin:0;padding:0;list-style:none;font-size:14px;font-weight:700;color:var(--bad)}

/* ---------- 4b · Загрузка ---------- */
.upload{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding:24px var(--gutter) 0}
.upload__left{display:flex;flex-direction:column;gap:24px;min-width:0}
.upload__head{display:flex;flex-direction:column;gap:6px}
.upload__crumb{margin:0;font-family:var(--font);font-size:14px;font-weight:400;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
/* The course is named here: the field stands in for the h1 of the screen. */
.course-title{width:100%;padding:2px 0 8px;border:0;border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink);font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.22;letter-spacing:-0.02em;text-overflow:ellipsis;outline:none;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow 120ms}
.course-title::placeholder{color:var(--faint);opacity:1}
/* An empty field has to read as a field, not as a greyed-out heading. */
.course-title:placeholder-shown{box-shadow:inset 0 -2px 0 var(--line)}
.course-title:hover{box-shadow:inset 0 -2px 0 var(--line)}
.course-title:focus,.course-title:focus-visible{box-shadow:inset 0 -2px 0 var(--pink)}
.course-title:user-invalid{box-shadow:inset 0 -2px 0 var(--bad)}
.course-title[readonly]{box-shadow:none;cursor:default}
.dropzone{position:relative;overflow:hidden;min-height:240px;margin:0;border-radius:32px;background:var(--pink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 20px;color:var(--pink-ink);text-align:center;transition:background 200ms,box-shadow 200ms}
.dropzone.is-over{background:var(--pink-soft-2);box-shadow:inset 0 0 0 3px var(--pink)}
.dropzone__fx{position:absolute;inset:0;pointer-events:none}
.dropzone__ripple{position:absolute;left:50%;top:50%;width:260px;height:260px;border-radius:50%;background:var(--pink);animation:umRipple 900ms ease-out both}
.dropzone__paper{position:absolute;left:50%;top:30%;width:120px;height:150px;margin-top:-20px;border-radius:14px;background:var(--card);box-shadow:5px 5px 0 #FFC400;animation:umPaper 1.3s cubic-bezier(.34,1.3,.64,1) both;display:flex;flex-direction:column;gap:8px;padding:14px}
.dropzone__paper span{height:8px;border-radius:9999px;background:var(--chip)}
.dropzone__paper span:nth-child(1){width:80%}.dropzone__paper span:nth-child(2){width:60%}.dropzone__paper span:nth-child(3){width:70%}
.dropzone__paper em{margin-top:auto;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone__title{position:relative;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.1vw,27px);letter-spacing:-0.02em}
.dropzone__or,.dropzone__hint{position:relative}
.dropzone__or{font-size:16px}
.dropzone__hint{font-size:13px;display:flex;flex-direction:column;gap:4px}
.dropzone__limit{font-size:12px;opacity:0.72}
.dropzone__pick{position:relative;height:52px;padding:0 28px;border-radius:9999px;background:var(--pink);color:var(--ink);display:flex;align-items:center;font-size:16px;font-weight:700;box-shadow:var(--shadow-cta);cursor:pointer;transition:background 120ms}
.dropzone__pick:hover,.dropzone__pick:active{background:var(--pink-hover)}
.dropzone__pick:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.dropzone__pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone__pick-touch{display:none}
@media (hover:none) and (pointer:coarse){
  .dropzone__pick-desktop,.dropzone__title,.dropzone__or{display:none}
  .dropzone__pick-touch{display:inline}
}
.upload__right{display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0}
.upload__count{display:flex;justify-content:space-between}
.upload__count .mono{font-size:12px;letter-spacing:0.08em;color:var(--muted)}
.upload__list{display:flex;flex-direction:column;gap:2px;flex:1}
.file-row{padding:14px 0;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 -1px 0 var(--line)}
.file-row.is-new{animation:umRowIn 320ms var(--spring) both}
.file-row__main{display:flex;align-items:center;gap:10px}
.file-row__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.file-row__name{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row__meta{font-size:13px;color:var(--muted)}
.file-row.is-error .file-row__meta{color:var(--bad)}
.file-row__mark{color:var(--muted);font-weight:700;font-size:13px;flex-shrink:0}
/* The finished state has to read across the room: a filled badge, not a hairline tick. */
.file-row__mark.is-done,.file-row__mark.is-bad{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:16px;line-height:1;color:var(--card)}
.file-row__mark.is-done{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.file-row__mark.is-bad{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.file-row.is-new .file-row__mark.is-done{animation:umMarkIn 360ms var(--spring) both}
.file-row__del{margin:0;flex-shrink:0;display:flex}
.file-row__x{appearance:none;-webkit-appearance:none;width:28px;height:28px;padding:0;margin:0;border:0;border-radius:50%;background:var(--chip);color:var(--muted);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 120ms,color 120ms}
.file-row__x:hover,.file-row__x:focus-visible{background:var(--bad-soft);color:var(--bad)}
.file-row__x:active{background:var(--bad-soft-2);color:var(--bad)}
.file-row__x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.file-row__x[disabled]{opacity:.5;cursor:default}
.file-row.is-leaving{opacity:.4;pointer-events:none}
@media (hover:none) and (pointer:coarse){.file-row__x{width:40px;height:40px;font-size:15px}}
.file-row__bar{height:6px;border-radius:9999px;background:var(--chip);overflow:hidden}
.file-row__bar span{display:block;height:100%;border-radius:9999px;background:var(--pink);transform-origin:left;transform:scaleX(0);transition:transform 160ms linear}
.file-row__bar span.is-reading{transform:none;animation:umGrow 2.2s cubic-bezier(.4,0,.2,1) both}
.upload__actions{margin-top:auto;padding:16px 0 24px;display:flex;flex-direction:column;gap:10px;position:sticky;bottom:0;background:linear-gradient(rgba(247,243,234,0),var(--surface) 30%)}
.upload__actions form{margin:0}
.upload__cta{width:100%}
.upload__progress{display:flex;flex-direction:column;gap:12px}
.upload__progress [data-poll-retry]{align-self:flex-start}
.upload__stage{font-size:14px;color:var(--muted);line-height:1.5}
.upload__error{margin:0;font-size:14px;font-weight:700;line-height:1.5;color:var(--bad)}
.heat-fill{display:flex;gap:4px}
.heat-fill>span{flex:1;height:10px;border-radius:9999px;transform-origin:left;animation:umFill 3s var(--spring) infinite}
.heat-fill>span:nth-child(1){background:#FFD23F;animation-delay:0s}
.heat-fill>span:nth-child(2){background:#FFB21F;animation-delay:.35s}
.heat-fill>span:nth-child(3){background:#FF8A36;animation-delay:.7s}
.heat-fill>span:nth-child(4){background:#FF6A3D;animation-delay:1.05s}
.heat-fill>span:nth-child(5){background:#FF4DA6;animation-delay:1.4s}
.heat-fill>span:nth-child(6){background:#FB2E90;animation-delay:1.75s}
@media (min-width:960px){
  .upload{grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:40px;padding-top:32px}
  /* Keep .upload__head exactly one crumb line tall, or the columns stop lining up. */
  .upload__crumb{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
  /* 64px is the feedback FAB (48px tall, 16px up); the CTA must not slide under it. */
  .dropzone{flex:1;margin-bottom:72px}
  /* "ЗАГРУЖЕНО" starts where the dropzone starts: crumb + gap + field + grid gap. */
  .upload__right{padding-top:calc(19.6px + 6px + 2px + clamp(28px,4vw,40px) * 1.22 + 8px + 24px)}
  .upload__actions{position:static;background:none;padding:0;margin-bottom:72px}
}
@media (min-width:1280px){.upload{grid-template-columns:minmax(0,1fr) 360px;gap:40px}}

/* ---------- 5c · Структура курса ---------- */
.structure{width:100%;max-width:800px;margin:0 auto;padding:20px var(--gutter) 0;gap:20px}
.structure__head{display:flex;flex-direction:column;gap:16px}
.structure__title-row{display:flex;flex-direction:column;gap:16px}
.structure__title-col{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.structure__back{font-size:14px;color:var(--muted)}
.structure__back:hover{color:var(--ink)}
.structure__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:-0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.structure__metrics{display:flex;gap:28px;flex-shrink:0}
.metric{display:flex;flex-direction:column;gap:2px}
.metric__value{font-size:22px}
.metric__value.is-pink{color:var(--pink-ink)}
.metric__label{font-size:12px;color:var(--muted)}
.structure__progress{display:flex;gap:14px;align-items:center}
.structure__segs{display:flex;gap:3px;flex:1}
.structure__segs span{flex:1;height:10px;border-radius:3px}
.structure__pct{font-size:13px;color:var(--muted)}
.structure__list{display:flex;flex-direction:column;gap:10px;padding:6px 16px 32px;margin:0 -16px;flex:1}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:9999px;background:var(--chip);color:var(--ink);font-size:13px}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.topic{background:var(--card);border-radius:20px;flex-shrink:0}
.topic__head{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;min-height:44px}
.topic__head::-webkit-details-marker{display:none}
.topic__name{display:flex;gap:14px;align-items:center;min-width:0}
.topic__badge{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:13px}
.topic__title{font-size:18px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic__meta{display:flex;gap:14px;align-items:center;flex-shrink:0;font-size:13px;color:var(--muted)}
.topic__chevron{font-size:16px;color:var(--muted)}
.topic__count{display:none;font-size:13px;color:var(--muted);flex-shrink:0}
.topic.is-complete .topic__badge{background:var(--ok-bg);color:var(--ok);font-weight:700;font-size:14px}
.topic.is-complete .topic__title{white-space:normal}
.topic.is-future .topic__head{color:var(--muted)}
.topic.is-current .topic__badge,.topic[open] .topic__badge{background:var(--ink);color:var(--surface)}
.topic.is-complete[open] .topic__badge{background:var(--ok-bg);color:var(--ok)}
.topic[open]{border-radius:24px;padding:22px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:6px}
.topic[open] .topic__head{padding:0 0 6px;color:var(--ink)}
.topic[open] .topic__meta{display:none}
.topic[open] .topic__count{display:block}
.topic:not([open]) .topic__micros{display:none}
.topic__micros{display:flex;flex-direction:column}
.micro{color:var(--ink)}
.micro:hover{color:var(--ink)}
.micro.is-done{display:flex;flex-direction:column;gap:8px;padding:10px 0}
.micro__row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px}
.micro__bar{height:4px;border-radius:9999px;background:var(--chip)}
.micro__bar span{display:block;height:100%;border-radius:9999px;background:var(--ok)}
.micro.is-next{padding:14px 16px;margin:4px -8px;border-radius:16px;background:var(--pink-soft);display:flex;justify-content:space-between;align-items:center;gap:12px}
.micro__next{display:flex;flex-direction:column;gap:2px;color:var(--pink-ink);min-width:0}
.micro__next-title{font-size:17px;font-weight:700}
.micro__start{height:44px;padding:0 22px;border-radius:9999px;background:var(--pink);display:flex;align-items:center;font-size:15px;font-weight:700;box-shadow:var(--shadow-cta);flex-shrink:0;transition:background 120ms}
.micro.is-next:hover .micro__start{background:var(--pink-hover)}
.micro.is-idle{padding:10px 0;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:16px}
.micro.is-idle:last-child{padding:6px 0 0}
.micro.is-idle:hover{color:var(--ink)}
.micro__state{font-size:13px;flex-shrink:0}
@media (min-width:960px){
  .structure{padding:20px 0 0}
  .structure__title-row{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px}
  .metric{align-items:flex-end}
}
@media (max-width:599px){.topic__head{padding:14px 16px}.topic[open]{padding:18px}.micro.is-next{flex-direction:column;align-items:flex-start}.micro__start{width:100%;justify-content:center}}

/* ---------- 6c · Микротема → генерация ---------- */
.micro-start__col{width:100%;max-width:680px;margin:0 auto;padding:48px var(--gutter) 48px;display:flex;flex-direction:column;gap:40px}
.micro-start__head{display:flex;flex-direction:column;gap:12px}
.micro-start__crumb{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.micro-start__crumb:hover{color:var(--ink)}
.micro-start__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(34px,4.375vw,56px);line-height:1.05;letter-spacing:-0.03em;overflow-wrap:anywhere}
.micro-start form{margin:0}
@media (min-width:960px){.micro-start__col{padding:120px 0 48px}}

/* 6c generation + 16a errors share the two-column layout */
.gen{display:grid;grid-template-columns:minmax(0,1fr)}
.gen__side{padding:24px var(--gutter);display:flex;flex-direction:column;gap:16px;background:var(--card)}
.gen__micro{display:flex;flex-direction:column;gap:8px}
.gen__eyebrow{color:var(--pink-ink)}
.gen__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:-0.02em;overflow-wrap:anywhere}
.gen__steps{display:flex;flex-direction:column;gap:14px}
.gen__steps>div[data-gen-steps]{display:contents}
.gen__step{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--ink)}
.gen__step.is-current{font-weight:700}
.gen__step.is-waiting{color:var(--muted)}
.gen__step.is-faint{color:var(--faint)}
.gen__mark{display:flex;align-items:center;font-weight:700}
.gen__mark.is-ok{color:var(--ok)}
.gen__mark.is-bad{color:var(--bad)}
.gen__mark.is-pink{color:var(--pink-ink)}
.gen__main{padding:40px var(--gutter) 48px;display:flex;flex-direction:column;gap:24px;min-width:0}
.gen__run,.gen__retry{display:flex;flex-direction:column;gap:28px}
.gen__hand{font-family:var(--hand);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.0}
.gen__hand.is-bad{color:var(--bad)}
.shimmer{display:flex;flex-direction:column;gap:12px}
.shimmer span{height:14px;border-radius:9999px;background:linear-gradient(90deg,#EFE8DA 0%,#FFE1F0 50%,#EFE8DA 100%);background-size:200% 100%;animation:umShim 1.6s linear infinite}
.shimmer span:nth-child(1){width:92%}
.shimmer span:nth-child(2){width:78%;animation-delay:.15s}
.shimmer span:nth-child(3){width:86%;animation-delay:.3s}
.shimmer span:nth-child(4){width:54%;animation-delay:.45s}
.gen__wait{display:flex;gap:24px;align-items:center}
.gen__pop{width:120px;height:104px;flex-shrink:0;border-radius:16px;background:var(--stripes-8);box-shadow:4px 4px 0 #FFC400;animation:umPop 1.8s ease-in-out infinite}
.gen__wait-text{font-size:15px;line-height:1.6;color:var(--muted);max-width:320px}
.gen__error{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.gen__badge{display:flex;align-items:center;gap:14px;color:var(--bad)}
.gen__x{width:44px;height:44px;border-radius:50%;background:var(--bad);color:var(--card);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
.gen__text{margin:0;font-size:18px;line-height:1.6;max-width:520px;text-wrap:pretty}
.gen__note{font-size:14px;color:var(--muted)}
.gen__retry .gen__note{font-size:15px}
.gen__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:8px}
.gen__actions form{margin:0}
.gen__grow{height:10px;border-radius:9999px;background:var(--line);overflow:hidden;max-width:560px}
.gen__grow span{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#FFC400,#FF6A3D 55%,#FB2E90);transform-origin:left;animation:umGrow 2.2s linear both}
@media (max-width:959px){.gen__actions{flex-direction:column;align-items:stretch;width:100%}.gen__actions .btn{width:100%}}
@media (min-width:960px){
  .gen{grid-template-columns:380px minmax(0,1fr);min-height:calc(100dvh - var(--nav-h))}
  .gen__side{padding:48px var(--gutter);gap:24px}
  .gen__micro{padding-top:24px}
  .gen__steps{padding-top:16px}
  .gen__main{padding:120px 64px 48px}
  .gen__main:has(.gen__error){padding-top:112px}
}
@media (min-width:1280px){.gen{grid-template-columns:420px minmax(0,1fr)}.gen__main{padding-left:80px;padding-right:80px}}

/* ---------- 7c · Конспект ---------- */
.conspect{position:relative}
.conspect__scroll{flex:1;position:relative}
.conspect__bar{position:sticky;top:0;z-index:2;background:var(--surface);padding:16px var(--gutter) 14px;display:flex;flex-direction:column;gap:12px}
.conspect__bar-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.conspect__back{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conspect__where{font-size:13px;color:var(--muted);text-align:center}
.conspect__spacer{width:120px;flex-shrink:0}
.conspect__progress{height:3px;border-radius:9999px;background:var(--line)}
.conspect__progress span{display:block;width:0;height:100%;border-radius:9999px;background:var(--ink);transition:width 120ms linear}
.conspect__article{width:100%;max-width:680px;margin:0 auto;padding:32px var(--gutter) 0;display:flex;flex-direction:column;gap:18px;position:relative}
.conspect__head{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.conspect__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.44vw,44px);line-height:1.08;letter-spacing:-0.03em;overflow-wrap:anywhere}
.conspect__meta{font-size:14px;color:var(--muted)}
.conspect__body{display:flex;flex-direction:column;gap:18px}
.conspect__body>*{margin:0}
.conspect__body p{font-size:18px;line-height:1.7;text-wrap:pretty}
.conspect__body h1,.conspect__body h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.03vw,26px);line-height:1.2;letter-spacing:-0.02em;margin:24px 0 0}
.conspect__body h3,.conspect__body h4{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin:12px 0 0}
.conspect__body ul,.conspect__body ol{padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:18px;line-height:1.6}
.conspect__body ol{padding-left:24px}
.conspect__body li>p{font-size:inherit;line-height:inherit;margin:0}
.conspect__body strong{font-weight:700}
.conspect__body mark{background:var(--pink-soft);color:var(--pink-ink);padding:0 4px;border-radius:4px;font-weight:700}
.conspect__body code{font-family:var(--mono);font-weight:500;font-size:15px;padding:2px 6px;border-radius:6px;background:var(--chip)}
.conspect__body pre{overflow-x:auto;padding:14px 16px;border-radius:16px;background:var(--chip)}
.conspect__body pre code{padding:0;background:none}
.conspect__body blockquote{margin:4px 0;padding:14px 20px;border-radius:16px;background:var(--pink-soft);color:var(--pink-ink);font-size:18px;font-weight:700;line-height:1.5}
.conspect__body blockquote p{font-size:inherit;line-height:inherit;margin:0}
.conspect__body table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;display:block;overflow-x:auto}
@media (min-width:600px){.conspect__body table{display:table}}
.conspect__body thead tr{text-align:left;color:var(--muted);font-size:13px}
.conspect__body th{padding:8px 12px;font-weight:700;text-align:left}
.conspect__body td{padding:10px 12px}
.conspect__body th:first-child,.conspect__body td:first-child{padding-left:0}
.conspect__body th:last-child,.conspect__body td:last-child{padding-right:0}
.conspect__body tbody tr{box-shadow:inset 0 1px 0 var(--line)}
.conspect__body img{max-width:100%}
.conspect__body .katex-display{overflow-x:auto;overflow-y:hidden}
.conspect-meme{margin:12px 0;display:flex;flex-direction:column;gap:10px;align-items:center}
.conspect-meme__frame{width:100%;max-width:520px;background:var(--card);border-radius:16px;padding:10px;box-shadow:5px 5px 0 var(--accent);transform:rotate(var(--tilt))}
.conspect-meme__frame img{display:block;width:100%;height:auto;border-radius:10px}
.conspect-meme figcaption{font-size:14px;color:var(--muted);text-align:center}
.conspect__sources{margin-top:28px;padding-top:14px;box-shadow:inset 0 1px 0 var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);line-height:1.5}
.source-ref{position:relative}
.source-ref__num{font-size:11px;color:var(--ink);background:var(--chip);border-radius:4px;padding:0 3px}
.source-ref__tip{position:absolute;left:0;bottom:calc(100% + 8px);padding:8px 12px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:13px;line-height:1.3;white-space:nowrap;max-width:calc(100vw - 2 * var(--gutter));overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 20px rgba(26,23,20,0.18);z-index:3;opacity:0;pointer-events:none;transition:opacity 120ms}
.source-ref:hover .source-ref__tip,.source-ref__num:focus-visible+.source-ref__tip{opacity:1}
.conspect__tail{height:120px;flex-shrink:0}
.conspect__cta{position:sticky;bottom:0;z-index:4;padding:44px var(--gutter) 24px;margin-top:-120px;background:linear-gradient(rgba(247,243,234,0),var(--surface) 42%);display:flex;justify-content:center;pointer-events:none}
.conspect__cta form{pointer-events:auto;width:100%;max-width:680px;margin:0}
@media (max-width:959px){.conspect__spacer,.conspect__where{display:none}}
@media (min-width:960px){
  .conspect__scroll{overflow-y:auto}
  .conspect__bar{padding:20px var(--gutter) 14px}
  .conspect__article{padding:32px 0 0}
  .conspect__cta{position:absolute;left:0;right:0;bottom:0;margin-top:0}
}

/* ---------- 1c · Umom Summary Drawer (конспект в карточке) ---------- */
.conspect-drawer-host{display:contents}
.conspect-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:39;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;border:0;border-radius:18px 0 0 18px;background:var(--ink);color:var(--surface);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;box-shadow:-6px 0 20px rgba(26,23,20,0.14);transition:padding-right 160ms}
.conspect-tab:hover{padding-right:20px}
.conspect-tab__icon{font-size:17px;line-height:1}
.conspect-tab__label{writing-mode:vertical-rl;letter-spacing:0.04em}
.conspect-drawer{position:fixed;right:0;top:0;bottom:0;z-index:45;width:520px;max-width:100%;background:var(--card);box-shadow:-16px 0 48px rgba(26,23,20,0.16);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform 240ms ease,visibility 240ms}
.conspect-drawer__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.conspect-drawer__bar{background:var(--card);padding:18px 32px 14px}
.conspect-drawer__bar .conspect__where{flex:1}
.conspect-drawer__close{width:36px;height:36px;flex-shrink:0;border:0;border-radius:50%;background:var(--chip);color:var(--ink);font-family:var(--font);font-size:19px;line-height:1;cursor:pointer}
.conspect-drawer__close:hover{background:var(--line)}
.conspect-drawer__article{max-width:none;padding:8px 32px 24px}
.conspect-drawer__article .conspect__title{font-size:clamp(26px,3vw,34px)}
.conspect-drawer__article .conspect__body p,.conspect-drawer__article .conspect__body ul,.conspect-drawer__article .conspect__body ol{font-size:17px}
.conspect-drawer__foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 32px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line)}
.conspect-drawer__saved{font-size:13px;color:var(--muted)}
.conspect-drawer__return{height:44px;padding:0 20px;font-size:15px}
.study__stage{flex:1;min-width:0;display:flex;flex-direction:column}
/* Открытая шторка не перекрывает карточку: контент ужимается и центрируется в остатке. */
@media (min-width:960px){.study.is-drawer-open .study__stage{padding-left:var(--gutter);padding-right:calc(520px + var(--gutter));transition:padding 240ms ease}}
.study.is-drawer-open .conspect-tab{display:none}
.study.is-drawer-open .conspect-drawer{transform:none;visibility:visible}
/* Мем-модалка забирает экран себе — язычок не мешает. */
body:has(.meme-modal:not([hidden])) .conspect-tab{display:none}
@media (max-width:959px){
  .conspect-drawer{width:100%;border-radius:0}
  .conspect-drawer__bar,.conspect-drawer__article,.conspect-drawer__foot{padding-left:var(--gutter);padding-right:var(--gutter)}
  .conspect-tab{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:var(--gutter);width:56px;height:56px;padding:0;gap:0;border-radius:50%;justify-content:center;box-shadow:0 10px 24px rgba(26,23,20,0.22)}
  .conspect-tab:hover{padding-right:0}
  .conspect-tab__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .conspect-tab__icon{font-size:22px}
}
@media (max-width:599px){.conspect-drawer__saved{font-size:12px}.conspect-drawer__return{padding:0 16px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.conspect-drawer{transition:none}.study.is-drawer-open .study__stage{transition:none}}

/* ---------- Umom Quiz Bar ---------- */
.study{position:relative}
.qbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "segs segs" "count memes";align-items:center;gap:8px 16px;padding:12px var(--gutter);flex-shrink:0}
.qbar__info{display:contents}
.qbar__title{grid-area:title;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.qbar__count{grid-area:count;font-size:15px}
.qbar__segs{grid-area:segs;display:flex;gap:4px;min-width:0}
.qbar__segs span{flex:1;min-width:0;height:8px;border-radius:9999px}
.qbar__memes{grid-area:memes;justify-self:end;padding:8px 14px;border-radius:9999px;background:var(--pink-soft);color:var(--pink-ink);white-space:nowrap;flex-shrink:0;font-size:14px}
@media (min-width:600px){
  .qbar{display:flex;height:var(--qbar-h);padding:0 var(--gutter);gap:24px}
  .qbar__info{display:flex;flex-direction:column;gap:2px;min-width:140px;max-width:220px}
  .qbar__segs{flex:1}
}
@media (min-width:960px){.qbar__info{min-width:170px}}

/* Shared question bits */
.q-block{display:flex;flex-direction:column;gap:12px}
.q-title{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,32px);line-height:1.2;letter-spacing:-0.02em;text-wrap:pretty;overflow-wrap:anywhere}
.study-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.study-row__left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.keys{font-size:13px;color:var(--muted)}
.keys .mono{color:var(--ink)}
@media (hover:none) and (pointer:coarse){.keys{display:none}}
@media (max-width:599px){.study-row{flex-direction:column;align-items:stretch}.study-row .btn{width:100%}.study-row__left .hint-btn{width:100%}}

/* ---------- 9a · Вставь слово / 16b ---------- */
.gap-screen{width:100%;max-width:800px;margin:0 auto;padding:32px var(--gutter) 40px;display:flex;flex-direction:column;gap:28px}
.gap-screen__top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gap-screen:has(.hint-status){gap:24px}
.gap-screen__form{display:flex;flex-direction:column;gap:28px;margin:0}
.gap-screen:has(.hint-status) .gap-screen__form{gap:24px}
.gap-card{position:relative;background:var(--card);border-radius:24px;padding:28px;box-shadow:var(--shadow-lift);font-family:var(--display);font-weight:700;font-size:clamp(21px,2.35vw,30px);line-height:1.6;letter-spacing:-0.02em;overflow-wrap:anywhere}
.gap-card .learning-content{display:inline}
.gap-card__input{width:240px;max-width:100%;padding:4px 14px;margin:0 4px;border:none;outline:none;border-radius:10px;background:var(--pink-soft);color:var(--pink-ink);font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.02em;box-shadow:inset 0 -3px 0 var(--pink)}
.gap-card__input::placeholder{color:var(--pink-ink);opacity:.45}
.note{position:relative;margin-top:14px;width:100%;max-width:420px;padding:18px 16px 16px;background:var(--hint-note);border-radius:4px 4px 18px 4px;box-shadow:0 14px 30px rgba(26,23,20,0.18);font-family:var(--font);letter-spacing:0;display:flex;flex-direction:column;gap:12px;animation:umNote 700ms var(--spring) both;z-index:3}
.note__tape{position:absolute;top:-10px;left:50%;margin-left:-36px;width:72px;height:20px;background:rgba(255,255,255,0.55);transform:rotate(-3deg)}
.note__text{font-family:Neucha,'Comic Sans MS',cursive;font-size:22px;font-weight:400;line-height:1.2}
@media (min-width:600px){.gap-card{padding:48px}}
@media (min-width:960px){.gap-screen{padding:56px 0 40px}.gap-screen:has(.hint-status){padding-top:40px}}
@media (min-width:1280px){
  .gap-card .note{position:absolute;left:calc(100% + 14px);top:8px;width:210px;margin:0}
}
.hint-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 8px;border:0;border-radius:9999px;background:var(--hint-soft);color:var(--ink);cursor:pointer;box-shadow:0 4px 14px rgba(255,196,0,0.25);transition:transform 200ms;font-family:var(--font)}
.hint-btn:hover,.hint-btn:active{transform:translateY(-2px)}
.hint-btn__q{width:36px;height:36px;border-radius:50%;background:var(--hint);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;font-weight:700;animation:umQ 1.6s ease-in-out infinite;flex-shrink:0}
.hint-btn__label{font-size:15px;font-weight:700;line-height:1.15}
.hint-btn.is-used,.hint-btn.is-off{background:var(--chip);color:var(--muted);box-shadow:none;cursor:default;transform:none}
.hint-btn.is-used .hint-btn__q{background:var(--line);font-family:var(--font);font-size:16px;animation:none}
.hint-btn.is-off{color:var(--faint)}
.hint-btn.is-off .hint-btn__q{background:var(--line);animation:none}
.hint-status{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border-radius:9999px;background:var(--chip);color:var(--muted);font-size:14px;font-weight:700;white-space:nowrap}
.hint-status:has(form){padding-right:6px}
.hint-status.is-error{background:var(--bad-soft);color:var(--bad)}
.hint-status.is-ok{background:var(--ok-soft);color:var(--ok)}
.hint-status form{margin:0}
.hint-status__retry{height:30px;padding:0 14px;border:0;border-radius:9999px;background:var(--bad);color:var(--card);font-size:14px;font-weight:700;cursor:pointer}
@media (max-width:599px){.hint-status{white-space:normal;padding:8px 14px}}

/* ---------- 12c · Выбор из 4 ---------- */
.choice-screen{flex:1;display:flex;flex-direction:column;min-height:0}
.choice-screen__quiz,.wrong-screen{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:24px var(--gutter) 24px;position:relative}
.choice-screen__body,.wrong-screen__body{width:100%;display:flex;flex-direction:column;gap:28px}
.choice-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0}
.choice{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:22px 26px;border:0;border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 4px 14px rgba(26,23,20,0.05);font-family:var(--font);font-size:clamp(18px,1.72vw,22px);font-weight:400;text-align:left;cursor:pointer;transition:background 200ms,color 200ms,transform 300ms,opacity 400ms,filter 400ms}
.choice__main{display:flex;gap:18px;align-items:center;min-width:0}
.choice__letter{width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--chip);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px}
.choice__text{overflow-wrap:anywhere}
.choice__mark{font-size:15px;font-weight:700;flex-shrink:0}
.choice.is-right{background:var(--ok);color:var(--card);font-weight:700;box-shadow:0 8px 24px rgba(8,122,68,0.25);transform:scale(1.02);cursor:default}
.choice.is-right .choice__letter{background:var(--card);color:var(--ok)}
.choice.is-picked{background:var(--bad);color:var(--card);font-weight:700;cursor:default}
.choice.is-picked .choice__letter{background:var(--card);color:var(--bad)}
.choice.is-dim{background:var(--dim);color:var(--muted);box-shadow:none;cursor:default}
.choice.is-cut{opacity:.35;filter:grayscale(1);pointer-events:none;transform:scale(.96) rotate(var(--cut-tilt,-1.5deg))}
.choice.is-cut .choice__text{text-decoration:line-through;text-decoration-thickness:3px}
.study-hints{display:flex;flex-direction:column;gap:16px}
.note--inline{position:static;align-self:flex-start;width:auto;max-width:100%;margin:0;flex-direction:row;gap:12px;padding:14px 20px;border-radius:4px 4px 16px 4px;box-shadow:0 10px 24px rgba(26,23,20,0.14);transform-origin:left center}
.note--inline .note__text{font-size:21px;line-height:1.25}
.choice-right{font-size:16px;font-weight:700;color:var(--ok)}
.choice-screen__meme{flex:1;display:flex;flex-direction:column;min-height:0;animation:umFadeIn 260ms ease-out both}
@media (min-width:600px){.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
  .choice-screen__quiz,.wrong-screen{align-items:center;flex-direction:row;padding:0 176px 40px 64px}
}
@media (min-width:1280px){.choice-screen__quiz,.wrong-screen{padding:0 200px 40px 96px}}

/* ---------- Пропуск карточки ---------- */
.qbar__segs span.is-skip{box-shadow:inset 0 0 0 2px var(--line-strong)}
.skip-flag{align-self:flex-start;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 18px;border-radius:16px;background:var(--line);color:var(--muted);font-size:14px;font-weight:700;line-height:1.3}
.skip-flag__tag{color:var(--ink)}
.card-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0}
.card-nav__btn{min-height:44px;padding:0 18px;border:0;border-radius:9999px;background:var(--chip);color:var(--muted);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:background 120ms,color 120ms}
.card-nav__btn:hover{background:var(--line);color:var(--ink)}
.card-nav__btn--skip{margin-left:auto}
@media (max-width:599px){.card-nav__btn{flex:1 1 100%}}
.pending-screen{width:100%;max-width:640px;margin:0 auto;padding:56px var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pending-screen__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-0.02em}
.pending-screen__text{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.pending-screen__dots{display:flex;flex-wrap:wrap;gap:8px}
.pending-screen__dots span{min-width:36px;height:36px;padding:0 8px;border-radius:10px;background:var(--line);box-shadow:inset 0 0 0 2px var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:14px}
@media (max-width:599px){.pending-screen .btn{width:100%}}

/* ---------- 11b · Неверно ---------- */
.answers2{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.ans{border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ans--bad{background:var(--bad-bg);color:var(--bad)}
.ans--ok{background:var(--ok-bg);color:var(--ok)}
.ans__word{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.125vw,40px);line-height:1.1;hyphens:auto;overflow-wrap:anywhere}
.ans--bad .ans__word{text-decoration:line-through}
.why{background:var(--card);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card)}
.why__title{font-size:20px;font-weight:700}
.why__text{font-size:19px;line-height:1.6;text-wrap:pretty}
.why__foot{display:flex;justify-content:space-between;align-items:center;padding-top:4px}
.why--compact{padding:24px 32px;gap:8px;animation:umRowIn 320ms ease-out both}
.why--compact .why__text{font-size:18px}
@media (min-width:600px){.answers2{grid-template-columns:repeat(2,minmax(0,1fr))}.ans{padding:32px}.why{padding:28px 32px}.why--compact{padding:24px 32px}}

/* Round "следующая" (10b, 11b, 12c); a full-width sticky bar below 960px */
.next-round{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ink);cursor:pointer;transition:opacity 300ms}
.next-round:hover{color:var(--ink)}
.next-round__btn{width:88px;height:88px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;box-shadow:0 10px 28px rgba(255,77,166,0.3);transition:background 120ms}
.next-round:hover .next-round__btn,.next-round:active .next-round__btn{background:var(--pink-hover)}
.next-round__label{font-size:14px;font-weight:700}
.next-round__key{padding:3px 8px;border-radius:6px;background:var(--chip);font-size:12px;color:var(--muted)}
.next-round.is-waiting{opacity:.3}
@media (max-width:959px){
  .next-round{position:sticky;bottom:12px;z-index:5;margin:24px 0 0;height:56px;border-radius:9999px;background:var(--pink);box-shadow:var(--shadow-cta)}
  .next-round:active{background:var(--pink-hover)}
  .next-round__btn,.next-round__key{display:none}
  .next-round__label{font-size:18px}
}
@media (min-width:960px){
  .next-round{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);flex-direction:column}
  .next-round__arrow{display:none}
}

/* ---------- 10b · Верно + мем ---------- */
.right-screen{flex:1;display:flex;flex-direction:column;min-height:0}
.reward{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px var(--gutter) 8px;position:relative}
.reward__head{display:flex;flex-direction:column;align-items:center;gap:10px}
.ok-pill{display:flex;align-items:center;gap:14px;padding:12px 24px 12px 12px;border-radius:9999px;background:var(--ok);color:var(--card);box-shadow:0 8px 24px rgba(8,122,68,0.25)}
.ok-pill__icon{width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.ok-pill__text{font-size:22px;font-weight:700;letter-spacing:-0.01em}
.reward__hand{font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.5vw,32px)}
.reward__gen{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.reward__reel{width:100%;display:flex;justify-content:center}
.reward__status{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;align-items:center;padding-top:8px;text-align:center}
.reward--choice .reward__status{gap:8px}
.reward__status-main{font-size:18px;font-weight:700}
.reward__status-sub{font-size:14px;color:var(--muted)}
.reward__done{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.reward--choice .reward__done{gap:16px}
.reward__frame{width:100%;max-width:500px;background:var(--card);border-radius:16px;padding:14px;box-shadow:6px 6px 0 #FF6A3D;transform:rotate(-1.5deg);animation:umDrop 420ms var(--spring) both}
.reward--choice .reward__frame{max-width:460px;box-shadow:6px 6px 0 #FFC400}
.reward__img{border-radius:10px;overflow:hidden;display:flex}
.reward__img:empty{height:290px;background:var(--stripes)}
.reward--choice .reward__img:empty{height:350px}
.reward__img img{display:block;width:100%;height:auto}
.reward__caption{width:100%;max-width:520px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding-top:8px}
.reward--choice .reward__caption{padding-top:0}
.reward__joke{font-size:18px;font-weight:700;line-height:1.4}
.reward__why{font-size:15px;line-height:1.55;color:#000000;text-wrap:pretty}
.reward--choice .reward__why{color:var(--ink)}
.reward__fallback{width:100%;max-width:520px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.reward__fallback form{margin:0}
.reward__fallback-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rate{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}
.rate__row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.rate__btn{--tilt:-2deg;--shade:#1A1714;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 26px 0 20px;border:2.5px solid var(--ink);border-radius:9999px;font-size:18px;font-weight:800;letter-spacing:.01em;color:var(--ink);cursor:pointer;font-family:var(--font);box-shadow:4px 4px 0 var(--shade);transform:rotate(var(--tilt));transition:transform 160ms var(--spring),box-shadow 160ms var(--spring),background 120ms;animation:umRateIn 520ms var(--spring) backwards;-webkit-tap-highlight-color:transparent}
.rate__btn.is-up{background:#FFC400}
.rate__btn.is-down{--tilt:2deg;background:var(--pink-soft-2);animation-delay:90ms}
.rate__btn:hover{transform:rotate(0) translate(-2px,-3px) scale(1.04);box-shadow:7px 7px 0 var(--shade)}
.rate__btn:active,.rate__btn[aria-pressed="true"]{transform:rotate(0) translate(4px,4px);box-shadow:0 0 0 var(--shade)}
.rate__btn.is-up[aria-pressed="true"]{background:#FFB000}
.rate__btn.is-down[aria-pressed="true"]{background:var(--pink)}
.rate__btn:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.rate__emoji{font-size:28px;line-height:1;display:inline-block;transform-origin:50% 70%}
.rate__btn:hover .rate__emoji{animation:umRateWiggle 600ms ease-in-out infinite}
.rate__btn[aria-pressed="true"] .rate__emoji{animation:umRatePop 420ms var(--spring) both}
@keyframes umRateIn{0%{opacity:0;transform:translateY(18px) rotate(calc(var(--tilt) * -4)) scale(.7)}100%{opacity:1;transform:rotate(var(--tilt))}}
@keyframes umRateWiggle{0%,100%{transform:rotate(0) scale(1.1)}25%{transform:rotate(-16deg) scale(1.2)}75%{transform:rotate(16deg) scale(1.2)}}
@keyframes umRatePop{0%{transform:scale(1)}45%{transform:scale(1.7) rotate(-12deg)}100%{transform:scale(1.25)}}
@media (max-width:420px){.rate__row{gap:12px}.rate__btn{height:52px;padding:0 20px 0 16px;font-size:16px}.rate__emoji{font-size:24px}}
.rate__note{font-size:13px;color:var(--muted);text-align:center}
@media (min-width:960px){.reward{transform:scale(.9);transform-origin:center;padding:0 0 8px}}
@media (max-width:959px){.reward .next-round{align-self:stretch}}

/* Template reel ("барабан шаблонов") */
.reel{width:100%;max-width:500px;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow-lift);transform:rotate(-1deg)}
.reel__window{position:relative;height:400px;border-radius:10px;overflow:hidden;background:var(--chip)}
@keyframes umReelSpin{from{transform:translateY(0)}to{transform:translateY(var(--reel-end,-9200px))}}
.reel__strip{position:absolute;left:0;right:0;top:0;animation:umReelSpin var(--reel-dur,26s) cubic-bezier(0,.62,.12,1) both}
.reel__item{height:400px;display:flex;align-items:center;justify-content:center;background:var(--stripes);padding:18px}
.reel__item img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;box-shadow:var(--shadow-card)}
.reel__item--prize{box-shadow:inset 0 -6px 0 var(--pink)}
.reel__item span{padding:8px 14px;border-radius:9999px;background:var(--card);font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.reel__fade{position:absolute;left:0;right:0;height:70px}
.reel__fade--top{top:0;background:linear-gradient(#FCFAF4,rgba(252,250,244,0))}
.reel__fade--bottom{bottom:0;background:linear-gradient(rgba(252,250,244,0),#FCFAF4)}
.reel__marker{position:absolute;left:-2px;top:50%;margin-top:-10px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:14px solid var(--pink)}
@media (max-width:599px){.reel__window{height:300px}.reel__item{height:400px}}

/* ---------- 13b · Итоги ---------- */
.result{display:grid;grid-template-columns:minmax(0,1fr)}
.result__main{padding:28px var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:44px;min-width:0}
.result__top{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.ring{width:220px;height:220px;border-radius:50%;background:conic-gradient(#087A44 0 var(--pct),#FCE4E1 var(--pct) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring__inner{width:172px;height:172px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:48px}
.result__info{display:flex;flex-direction:column;gap:12px;min-width:0}
.result__crumb{font-size:14px;color:var(--muted)}
.result__title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:-0.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.result__dots{display:grid;grid-template-columns:repeat(5,26px);gap:3px;padding-top:4px}
.result__dots span{width:26px;height:26px;border-radius:7px;color:var(--card);display:flex;align-items:center;justify-content:center;font-size:12px}
.result__dots .is-ok{background:var(--ok)}
.result__dots .is-bad{background:var(--bad)}
.result__memes{display:flex;flex-direction:column;gap:14px}
.result__memes-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.result__earned{font-size:18px;font-weight:700}
.result__earned span{color:var(--pink-ink)}
.result__grid{display:grid;grid-template-columns:repeat(5,56px);gap:12px}
.result__meme{width:56px;height:56px;border-radius:10px;background:repeating-linear-gradient(135deg,#EFE8DA 0 5px,#F4EEE2 5px 10px);box-shadow:3px 3px 0 var(--accent);transform:rotate(var(--tilt));overflow:hidden}
.result__meme img{display:block;width:100%;height:100%;object-fit:cover}
.result__meme.is-empty{background:none;box-shadow:none;transform:none;border:2px dashed var(--line)}
.result__actions{display:flex;flex-wrap:wrap;gap:12px}
.result__weak{background:var(--card);padding:32px var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:6px}
.result__weak-title{color:var(--bad)}
.weak{padding:20px 0;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 -1px 0 var(--line)}
.weak__meta{font-size:12px;color:var(--muted)}
.weak__q{font-size:17px;font-weight:700;line-height:1.4;text-wrap:pretty;overflow-wrap:anywhere}
.weak__answers{display:flex;flex-direction:column;gap:6px;font-size:15px}
.weak__bad,.weak__ok{display:flex;gap:10px;align-items:center;min-width:0;overflow-wrap:anywhere}
.weak__bad{color:var(--muted)}
.weak__value{text-decoration:line-through;text-decoration-color:var(--bad)}
.weak__ok{color:var(--ok);font-weight:700}
.weak__icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.weak__bad .weak__icon{background:var(--bad-bg);color:var(--bad)}
.weak__ok .weak__icon{background:var(--ok-bg)}
.result__repeat{margin-top:24px;width:100%}
@media (max-width:599px){.result__actions .btn{width:100%}}
@media (min-width:600px){
  .result__top{flex-direction:row;align-items:center;gap:40px}
  .result__dots{grid-template-columns:repeat(10,26px)}
  .result__grid{grid-template-columns:repeat(10,56px)}
}
@media (max-width:959px) and (min-width:600px){.result__grid{grid-template-columns:repeat(8,56px)}}
@media (min-width:960px){
  .result{grid-template-columns:minmax(0,1fr) 400px;min-height:calc(100dvh - var(--nav-h))}
  .result--clean{grid-template-columns:minmax(0,1fr)}
  .result__main{padding:28px 48px 28px 56px}
  .result__weak{padding:32px 40px}
}
@media (min-width:1280px){.result{grid-template-columns:minmax(0,1fr) 460px}.result__main{padding:28px 56px 28px 72px}}
@media (max-width:1279px) and (min-width:960px){.result__grid{grid-template-columns:repeat(5,56px)}}

/* ---------- 14a · Мемотека ---------- */
.lib{padding:24px var(--gutter) 0;gap:22px;position:relative}
.lib__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px}
.lib__courses{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
.lib__courses::-webkit-scrollbar{display:none}
.lib__courses-title{display:none}
.lib__course{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 14px;border-radius:12px;color:var(--ink);white-space:nowrap;flex-shrink:0;transition:background 120ms}
.lib__course:hover{background:var(--chip);color:var(--ink)}
.lib__course-name{font-size:14px;font-weight:700;line-height:1.35;text-wrap:pretty;min-width:0}
.lib__course-n{font-size:13px;color:var(--muted);padding-top:1px}
.lib__course.is-active,.lib__course.is-active:hover{background:var(--pink-soft);color:var(--pink-ink)}
.lib__course.is-active .lib__course-n{color:var(--pink-ink)}
.lib__scroll{margin:0 -12px;padding:4px 12px 32px}
.lib__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
.lib-meme{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer;font-family:var(--font)}
.lib-meme__img{display:block;aspect-ratio:1;border-radius:14px;background:var(--stripes-8);box-shadow:4px 4px 0 var(--accent);transition:transform 120ms;overflow:hidden}
.lib-meme:hover .lib-meme__img,.lib-meme:focus-visible .lib-meme__img{transform:translateY(-3px) rotate(-1deg)}
.lib-meme__img img{display:block;width:100%;height:100%;object-fit:cover}
.lib-meme__title{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-meme__micro{font-size:12px;color:var(--muted)}
@media (min-width:600px){.lib__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){
  .lib{padding-top:28px}
  .lib__body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px}
  .lib__courses{flex-direction:column;gap:2px;overflow-x:visible;overflow-y:auto;margin:0;padding:0 0 32px}
  .lib__courses-title{display:block;padding:0 14px 8px}
  .lib__course{align-items:flex-start;white-space:normal;min-height:0}
  .lib__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Modal */
.meme-modal{position:fixed;inset:0;z-index:50;background:rgba(26,23,20,0.55);display:flex;align-items:center;justify-content:center;gap:24px;padding:24px;animation:umFadeIn 200ms ease-out both}
.meme-modal__arrow{width:56px;height:56px;border-radius:50%;border:0;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;cursor:pointer;flex-shrink:0;color:var(--ink)}
.meme-modal__panel{width:900px;max-width:100%;max-height:100%;overflow:auto;background:var(--surface);border-radius:32px;padding:28px;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:32px;box-shadow:0 24px 60px rgba(26,23,20,0.3);position:relative}
.meme-modal__img{border-radius:16px;box-shadow:6px 6px 0 var(--accent,#FF4DA6);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--muted);align-self:start}
.meme-modal__img:not(:has(img)){aspect-ratio:1;background:var(--stripes-8)}
.meme-modal__img img{display:block;width:100%;height:auto}
.meme-modal__info{display:flex;flex-direction:column;gap:18px;padding-top:8px;min-width:0}
.meme-modal__top{display:flex;justify-content:space-between;align-items:center}
.meme-modal__date{font-size:12px;color:var(--muted)}
.meme-modal__close{width:40px;height:40px;border-radius:50%;border:0;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:var(--ink)}
.meme-modal__title{font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-0.01em}
.meme-modal__card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--card)}
.meme-modal__q{font-size:15px;line-height:1.5}
.meme-modal__a{font-size:14px;color:var(--ok);font-weight:700}
.meme-modal__where{font-size:13px;color:var(--muted)}
.meme-modal__actions{margin-top:auto;display:flex;gap:10px}
.meme-modal__share{flex:1;height:52px;font-size:16px}
.meme-modal__download{height:52px;padding:0 20px}
.meme-modal__micro{font-size:13px;font-weight:700;color:var(--pink-ink)}
@media (max-width:959px){
  .meme-modal{gap:0;padding:16px}
  .meme-modal__panel{grid-template-columns:minmax(0,1fr);gap:20px}
  .meme-modal__arrow{position:absolute;top:calc(50% - 28px);z-index:2}
  .meme-modal__arrow.is-prev{left:24px}.meme-modal__arrow.is-next{right:24px}
}
@media (max-width:599px){
  .meme-modal{padding:0}
  .meme-modal__panel{border-radius:0;height:100%;padding:16px}
  .meme-modal__arrow{top:calc(16px + (100vw - 32px) / 2 - 28px)}
  .meme-modal__arrow.is-prev{left:24px}.meme-modal__arrow.is-next{right:24px}
  .meme-modal__close{position:absolute;top:24px;right:24px;z-index:3}
}

/* ---------- 15a · Персонализация ---------- */
.profile__scroll{flex:1;position:relative;margin:0;display:flex;flex-direction:column}
.profile__col{width:100%;max-width:640px;margin:0 auto;padding:32px var(--gutter) 0;display:flex;flex-direction:column;gap:24px}
.profile__head{display:flex;flex-direction:column;gap:12px}
.profile__lead{margin:0;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.profile__textarea{height:84px;resize:none;padding:14px 18px;font-size:16px;line-height:1.6}
.interests{border:0;padding:0;margin:0;gap:10px}
.interests__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.interests__head legend{float:left;padding:0}
.interests__count{flex:none;font-size:13px;color:var(--muted)}
.interests__chips{display:flex;flex-wrap:wrap;gap:8px}
.interest{position:relative;cursor:pointer}
.interest input{position:absolute;opacity:0;width:1px;height:1px}
.interest span{display:flex;align-items:center;height:36px;padding:0 14px;border-radius:9999px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px;font-weight:700;transition:background 120ms}
.interest input:checked+span{background:var(--pink-soft);color:var(--pink-ink);box-shadow:inset 0 0 0 1.5px var(--pink)}
.interest input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
.interest input:disabled+span{opacity:.4;cursor:default}
.interest:has(input:disabled){cursor:default}
.irony{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-radius:10px;background:var(--card);cursor:pointer;position:relative}
.irony__text{display:flex;flex-direction:column;gap:2px}
.irony__title{font-size:15px;font-weight:700}
.irony__sub{font-size:13px;color:var(--muted)}
.irony__input{position:absolute;opacity:0;width:1px;height:1px}
.irony__switch{flex:none;width:52px;height:30px;border-radius:9999px;background:var(--line);position:relative;transition:background 160ms}
.irony__switch span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(26,23,20,0.25);transition:left 160ms}
.irony__input:checked+.irony__switch{background:var(--pink)}
.irony__input:checked+.irony__switch span{left:25px}
.irony__input:focus-visible+.irony__switch{outline:3px solid var(--pink);outline-offset:3px}
.profile__save{position:sticky;bottom:0;margin-top:8px;padding:32px var(--gutter) 24px;background:linear-gradient(rgba(247,243,234,0),var(--surface) 40%);display:flex;gap:20px;align-items:center;justify-content:center}
.profile__saved{font-size:15px;font-weight:700;color:var(--ok);animation:umFadeIn 260ms ease-out both}
@media (max-width:599px){.profile__save{flex-direction:column}.profile__save .btn{width:100%}.interest span{height:44px}}
@media (min-width:960px){.profile__col{padding:40px 0 0}}

/* ---------- Feedback FAB (TODO(design): not in mockups; reuses the pink CTA) ---------- */
.feedback-fab{position:fixed;right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;height:48px;padding:0 22px;font-size:15px;box-shadow:0 8px 24px rgba(255,77,166,0.32)}
/* The meme modal owns the screen while it is open. */
body:has(.meme-modal:not([hidden])) .feedback-fab{display:none}
.course-modes{margin:16px 0;max-width:100%}.course-modes fieldset{border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.course-modes legend{margin-bottom:8px}.course-modes .btn{min-height:44px;padding:10px 16px;font-size:14px}.course-modes .is-selected{background:var(--ink,#182e24);color:var(--paper,#fff)}.course-modes p,.course-modes__count,.topic__hidden{font-size:13px;line-height:1.5;color:var(--muted,#637464);margin:8px 0}.topic__hidden{padding:8px 16px}
/* Below 960px screens dock their main CTA at the bottom, so the FAB floats above that band. */
@media (max-width:959px){.feedback-fab{height:44px;padding:0 18px;font-size:14px;bottom:calc(104px + env(safe-area-inset-bottom))}}

.staging-banner{padding:8px 16px;text-align:center;background:#ffe1a2;color:#352400;font-size:13px;line-height:1.4;flex:none}
.staging-login{max-width:440px;margin:64px auto;padding:24px;display:grid;gap:20px}.staging-login form{display:grid;gap:16px}.staging-login input{width:100%}