/* Субботин — поверх ui.css и patterns.css. Цвета только переменными.
   Блок THEME (в самом конце файла, чтобы форма характера перекрывала базовые правила) подставляет
   new_course_app.py из scripts/themes.py; контраст проверяется там же. */
body{padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}
#page{max-width:760px;margin:0 auto}
.login{max-width:420px;margin:14vh auto 0;padding:0 16px}
.login input{width:100%;font-size:16px;margin:6px 0 12px}
.err{color:var(--red);margin:0 0 10px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:10px 0 14px}
.top h1{margin:8px 0 2px}
.top p{margin:0}

nav.tabs svg{display:block;width:24px;height:24px;margin:0 auto 3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.tabs [data-tab=home] svg{fill:currentColor;stroke:none}
nav.tabs button{min-height:52px}
body.ui-view-open nav.tabs,body.ui-sheet-open nav.tabs{visibility:hidden}

/* Полоска прогресса */
.bar{height:6px;border-radius:3px;background:var(--ctl);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:rgb(var(--a1))}

/* Карточка «Продолжить» */
.go{background:var(--card);border-radius:22px;padding:18px 16px 16px;margin-bottom:14px;box-shadow:0 1px 0 var(--line)}
.go .where{font-size:13px;font-weight:600;color:var(--tint);margin-bottom:4px}
.go h2{font-size:21px;margin:0 0 6px}
.go .meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--sub);font-size:13px;margin-bottom:12px}
.go .bar{margin-bottom:14px}
.go .btn.big{display:flex;align-items:center;justify-content:center;gap:10px}
.go .btn svg{width:20px;height:20px;fill:currentColor}

/* Сводка: две крупные цифры */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.stats.one{grid-template-columns:1fr}
.stat{background:var(--list);border-radius:22px;padding:14px}
.stat b{display:block;font:700 28px/1.1 var(--hfont);color:var(--tint);letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--sub)}
.stat .bar{margin-top:10px}

.sec-title{font:650 13px var(--font);color:var(--sub);text-transform:uppercase;letter-spacing:.06em;margin:20px 4px 8px}
.tile{margin-bottom:8px}
.tile .bar{margin-top:10px}
.tile.cur{box-shadow:inset 0 0 0 2px rgb(var(--a1))}
.tile.all .tile-title{color:var(--tint)}
.tile.locked{background:var(--list);box-shadow:inset 0 0 0 1px var(--line)}
.tile.locked .tile-title{color:var(--sub)}
.lock{display:inline-flex;align-items:center;gap:4px}
.lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part-intro{color:var(--sub);font-size:14px;margin:-2px 4px 10px}

/* Шаги главы */
.steps{background:var(--list);border-radius:22px;padding:6px;margin:0 16px calc(16px + env(safe-area-inset-bottom))}
.step{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;border:0;background:none;color:var(--ink);text-align:left;
  padding:10px;border-radius:12px;font:inherit}
.step:active{background:var(--cardhi)}
.step.cur{background:var(--card)}
.step[data-locked]{color:var(--sub)}
.step .chk{flex-shrink:0}
.step .chk.part{border-color:rgb(var(--a1))}
.step .t{flex:1;min-width:0}
.step .t div{font-weight:500;line-height:1.3}
.step .t small{color:var(--sub);font-size:12.5px}
.step .now{font-size:12px;font-weight:700;color:var(--tint)}
.v-sub{padding:0 16px 12px;max-width:760px;margin:0 auto;color:var(--sub);font-size:14px}
.v-pad{padding:0 16px;max-width:760px;margin:0 auto}

/* Шаг: видео, текст, задание */
.player{background:#000;margin:0 0 12px;position:sticky;top:calc(57px + env(safe-area-inset-top));z-index:1}
.player video{display:block;width:100%;max-height:38vh;background:#000}
.watch{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
#watch{flex:1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub)}
.watch .bar{flex:1}
.rate{min-width:56px;min-height:44px;border:0;border-radius:12px;background:var(--ctl);color:var(--ink);font:650 14px var(--font);font-variant-numeric:tabular-nums}
.lesson-title{font:700 21px/1.25 var(--font);margin:4px 0 6px}
.seg{display:flex;gap:4px;background:var(--ctl);border-radius:12px;padding:3px;margin:12px 0}
.seg button{flex:1;min-height:44px;border:0;border-radius:10px;background:none;color:var(--sub);font:600 14px var(--font)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--line)}
.prose{font-size:16px;line-height:1.55;padding-bottom:12px;max-width:70ch}
.prose h3{font:700 17px var(--font);margin:20px 0 6px}
.prose p{margin:0 0 10px}
.prose ul{margin:0 0 10px;padding-left:20px}
.prose li{margin-bottom:4px}
.prose .ts{display:inline-block;color:var(--tint);background:rgb(var(--a1) / .12);border-radius:6px;padding:0 5px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer}
.prose.transcript p{margin-bottom:12px}
.empty{color:var(--sub);padding:12px 4px}
.note{width:100%;min-height:180px;font-size:16px;border-radius:12px}
.mat{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:14px;margin-bottom:8px;color:var(--ink)}
.dock{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);max-width:760px;margin:0 auto;
  background:linear-gradient(transparent,var(--bg) 22%)}
.dock .btn{min-height:52px}
.dock .btn.ghost{flex:0 0 auto;padding:0 16px}
.dock .btn.main{flex:1}
.dock .btn[disabled]{opacity:1;background:var(--ctl);color:var(--sub)}
.done-mark{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:650;font-size:14px}

/* Проверка: вопросы с вариантами; верно/неверно показано значком и текстом, не только цветом */
.quiz-meta{font-size:13.5px;margin:4px 0 14px}
fieldset.q{border:0;margin:0 0 18px;padding:0;min-width:0}
fieldset.q legend{font:650 16.5px/1.4 var(--font);padding:0;margin-bottom:10px;overflow-wrap:anywhere}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:0 0 8px;padding:10px 14px;text-align:left;
  border:2px solid transparent;border-radius:12px;background:var(--card);color:var(--ink);font:500 15.5px/1.4 var(--font)}
.opt:active{background:var(--cardhi)}
.opt.on{border-color:rgb(var(--a1));background:rgb(var(--a1) / .1)}
.opt.right{border-color:var(--green);background:rgb(var(--a1) / .08)}
.opt.wrong{border-color:var(--red)}
.opt .mk{flex:none;display:inline-flex}
.opt .mk svg{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.opt.right .mk svg{stroke:var(--green)}
.opt.wrong .mk svg{stroke:var(--red)}
.why{margin:2px 2px 0;font-size:14px;line-height:1.5;color:var(--sub)}
.why b{color:var(--ink)}
.why.bad b{color:var(--red)}
.why.ok b{color:var(--tint)}
.quiz-result{border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:15px;background:var(--list)}
.quiz-result b{font:700 20px var(--hfont)}
.quiz-result.pass{box-shadow:inset 0 0 0 2px var(--green)}
.quiz-result.fail{box-shadow:inset 0 0 0 2px var(--red)}

.search{width:100%;font-size:16px;margin-bottom:12px}
.hit mark{background:rgb(var(--a1) / .22);color:inherit;border-radius:3px}

/* Окно: «Готово» прилипает к низу, крестик без рамки после открытия, заголовок в одну строку */
#ui-view{padding-bottom:0}
#ui-view .v-pad>.tile:last-child{margin-bottom:calc(16px + env(safe-area-inset-bottom))}
#ui-view .v-x:focus{outline:none}
#ui-view .v-crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* THEME:BEGIN */
:root{--a1:15 118 110;--a2:87 159 154;--a3:62 119 120;--tint:rgb(14 113 106);
  --bg:#eef4f4;--hdr:238 244 244;--ink:#112221;--sub:rgba(17,34,33,.68);
  --list:#f7fafa;--card:#fff;--cardhi:#d8e7e6;
  --ctl:rgba(17,34,33,.06);--line:rgba(17,34,33,.1);--navbg:rgba(248,251,250,.88);--sheetbg:#fafcfc;
  --green:#2a7d4f;--red:#b3303d}
h1,.lesson-title,.go h2,.stat b{font-family:var(--font);letter-spacing:0}
h1{font-weight:650;font-size:26px}
.go,.stat,.steps,.list,.tile,.mat,.opt,.quiz-result{border-radius:8px}
.go,.stat,.tile,.mat{box-shadow:none;border:1px solid var(--line)}
.btn,.btn.big,input,textarea,.seg,.seg button,.rate,.step{border-radius:6px}
.bar,.bar>i{border-radius:2px}
nav.tabs{border-radius:12px}
nav.tabs button{border-radius:8px}
.sec-title{letter-spacing:.09em}
/* THEME:END */
/* Повтор ошибок и жалоба на вопрос */
.tile.again{box-shadow:inset 3px 0 0 rgb(var(--a1))}
.again-note{margin:6px 0 0;font-size:13.5px;color:var(--sub)}
.q-where{display:block;font:500 12.5px/1.3 var(--font);color:var(--sub);margin-bottom:4px}
.rep{display:inline-block;margin:6px 0 0;padding:6px 2px;min-height:32px;border:0;background:none;font:500 13px var(--font);color:var(--sub);cursor:pointer}
.rep:disabled{opacity:.7;cursor:default}
.rep-q{font-size:14px;margin:4px 0 10px}
.rep-note{min-height:110px;margin-bottom:10px}