:root {
  --bg:#F1F2F6; --surf:#FFFFFF; --surf2:#E7E9F0; --ink:#15171C; --ink2:#5C6270; --ink3:#9CA1AD; --line:rgba(21,23,28,.08); --press:rgba(21,23,28,.05);
  --lapis:#2F55D4; --ochre:#C4860F; --mal:#17936A; --cin:#D2402E; --violet:#7650C4; --teal:#12879E; --rose:#C23A78;
  --hero:#2F55D4; --heroInk:#FFFFFF; --bar:rgba(255,255,255,.86); --shadow:0 10px 30px rgba(23,30,60,.10);
  --ease:cubic-bezier(.22,.8,.24,1); --spring:cubic-bezier(.34,1.3,.5,1);
  --fb:"Manrope",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:"Unbounded","Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D0F14; --surf:#171A22; --surf2:#232733; --ink:#F1F3F8; --ink2:#A3A9B7; --ink3:#666D7C; --line:rgba(255,255,255,.08); --press:rgba(255,255,255,.06);
    --lapis:#7392FF; --ochre:#E8B04A; --mal:#3CC98F; --cin:#FF6B5B; --violet:#A98AF2; --teal:#43BFD6; --rose:#FF7EB3;
    --hero:#2945AE; --heroInk:#FFFFFF; --bar:rgba(28,31,40,.86); --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0D0F14; --surf:#171A22; --surf2:#232733; --ink:#F1F3F8; --ink2:#A3A9B7; --ink3:#666D7C; --line:rgba(255,255,255,.08); --press:rgba(255,255,255,.06);
  --lapis:#7392FF; --ochre:#E8B04A; --mal:#3CC98F; --cin:#FF6B5B; --violet:#A98AF2; --teal:#43BFD6; --rose:#FF7EB3;
  --hero:#2945AE; --heroInk:#FFFFFF; --bar:rgba(28,31,40,.86); --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
}
html { height:100%; background:var(--bg); scroll-padding-top:env(safe-area-inset-top,0px); }
* { box-sizing:border-box; }
body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--fb); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, [tabindex]:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid color-mix(in srgb,var(--lapis) 50%,transparent); outline-offset:2px; }
#app { max-width:640px; margin:0 auto; padding:0 18px calc(120px + env(safe-area-inset-bottom,0px)); }
.ic { width:22px; height:22px; flex:none; display:block; }
.ic.filled { fill:currentColor; }

/* анимации */
.a-fade { animation:fadeUp .42s var(--ease) both; }
.a-push { animation:pushIn .44s var(--ease) both; }
.a-pop  { animation:popIn .44s var(--ease) both; }
.a-q    { animation:qIn .36s var(--ease) both; }
.a-qb   { animation:qBack .36s var(--ease) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes pushIn { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:none; } }
@keyframes popIn  { from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:none; } }
@keyframes qIn    { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes qBack  { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes pop { 0% { transform:scale(1); } 45% { transform:scale(1.025); } 100% { transform:scale(1); } }
@keyframes shake { 0%,100% { transform:none; } 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(2px); } }
@keyframes starPop { 0% { transform:scale(1) rotate(0); } 50% { transform:scale(1.25) rotate(-12deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* типографика */
.ph { padding:22px 2px 6px; }
.ph.flex { display:flex; align-items:flex-start; gap:12px; }
.ph.flex > div { flex:1; min-width:0; }
.h1 { font-family:var(--fd); font-size:28px; font-weight:600; line-height:1.15; letter-spacing:-.01em; margin:0; }
.sub { color:var(--ink2); font-size:15px; margin:6px 0 0; }
.h2 { font-family:var(--fd); font-size:17px; font-weight:600; margin:30px 2px 12px; }
.lead { color:var(--ink2); font-size:15px; line-height:1.5; margin:4px 2px 16px; }
.foot { color:var(--ink2); font-size:13px; line-height:1.5; margin:10px 4px 0; }

/* верхняя панель в сессиях и подэкранах */
.topbar { position:sticky; top:env(safe-area-inset-top,0px); z-index:10; display:flex; align-items:center; gap:10px; margin:0 -18px; padding:10px 18px; background:var(--bar); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); }
.tb-side { flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.tb-side.r { justify-content:flex-end; }
.tb-title { flex:none; max-width:52%; font-weight:700; font-size:15px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.pillbtn { display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 14px 0 10px; border:0; border-radius:999px; background:var(--surf); color:var(--ink); font-weight:600; font-size:15px; transition:transform .2s var(--ease), background .2s; }
.pillbtn .ic { width:20px; height:20px; stroke-width:2.4; }
.circ { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--surf); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease), opacity .2s; }
.circ .ic { width:21px; height:21px; stroke-width:2.4; }
.circ.av { position:relative; overflow:hidden; isolation:isolate; font-family:var(--fd); font-weight:600; font-size:18px; background:color-mix(in srgb,var(--lapis) 16%,var(--surf)); color:var(--lapis); }
.circ.av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:50%; }
.ph.flex > .ph-btns { display:flex; gap:8px; flex:none; margin-left:auto; }
.pf { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 0 10px; }
.pf .circ.av { width:92px; height:92px; font-size:38px; }
.pf b { font-family:var(--fd); font-size:24px; font-weight:600; margin-top:14px; }
.pf span { color:var(--ink2); font-size:15px; margin-top:4px; }
.sync { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--ink2); font-size:14px; margin:14px 0 4px; }
.sync .ic { width:17px; height:17px; }
.sync.ok { color:var(--mal); } .sync.bad { color:var(--cin); }
a.btn { text-decoration:none; }
.pillbtn:active, .circ:active:not(:disabled) { transform:scale(.92); }
.circ:disabled { opacity:.35; cursor:default; }
.tb-prog { position:absolute; left:18px; right:18px; bottom:0; height:4px; border-radius:4px; background:var(--surf2); overflow:hidden; }
.tb-prog i { display:block; height:100%; width:0; border-radius:4px; background:var(--lapis); transition:width .6s var(--ease); }

/* главная: герой */
.hero { position:relative; overflow:hidden; background:var(--hero); color:var(--heroInk); border-radius:30px; padding:22px 20px 18px; margin-top:12px; box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%; border:28px solid rgba(255,255,255,.07); pointer-events:none; }
.hero-k { font-size:14px; font-weight:600; opacity:.8; }
.hero-n { display:flex; align-items:baseline; gap:10px; margin:4px 0 14px; }
.hero-n b { font-family:var(--fd); font-size:54px; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero-n span { font-size:18px; font-weight:600; opacity:.75; }
.hbar { height:10px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; }
.hbar i { display:block; height:100%; width:0; border-radius:999px; background:#fff; transition:width 1s var(--ease); }
.hero-s { font-size:14px; opacity:.85; margin:12px 0 16px; }
.hero-a { display:flex; gap:10px; }
.hero-a .btn { margin:0; }
.btn.light { background:#fff; color:#1D3799; flex:1; }
.btn.onhero { flex:none; width:54px; padding:0; background:rgba(255,255,255,.16); color:#fff; }

.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.stat { background:var(--surf); border-radius:20px; padding:14px 12px; }
.stat b { display:block; font-family:var(--fd); font-size:22px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:12.5px; color:var(--ink2); margin-top:4px; line-height:1.3; }
.cin { color:var(--cin); }

/* плитки и строки */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:128px; padding:16px; border:0; border-radius:24px; background:var(--surf); text-align:left; transition:transform .25s var(--ease), background .2s; }
.tile:active:not(:disabled) { transform:scale(.96); }
.tile:disabled { opacity:.45; cursor:default; }
.tile b { display:block; font-size:16px; font-weight:700; line-height:1.25; }
.tile span.s { display:block; font-size:13px; color:var(--ink2); margin-top:2px; line-height:1.35; }
.bub { flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); font-weight:800; font-size:16px; }
.bub .ic { width:22px; height:22px; }
.row { display:flex; align-items:center; gap:14px; width:100%; min-height:66px; margin:0 0 10px; padding:12px 14px; border:0; border-radius:20px; background:var(--surf); text-align:left; transition:transform .22s var(--ease), background .2s; }
.row:active:not(:disabled):not(.static) { transform:scale(.98); }
.row.static { cursor:default; }
.row:disabled { opacity:.45; cursor:default; }
.rl { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rt { font-size:16px; font-weight:600; line-height:1.3; }
.rs { font-size:13.5px; color:var(--ink2); line-height:1.35; }
.rv { flex:none; font-size:15px; font-weight:600; color:var(--ink2); font-variant-numeric:tabular-nums; }
.chev { flex:none; color:var(--ink3); }
.chev .ic { width:18px; height:18px; stroke-width:2.4; }
.row.danger { justify-content:center; color:var(--cin); font-weight:700; min-height:56px; }
.rowwrap { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.rowwrap .row { margin:0; flex:1; }
.pill { flex:none; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surf2); color:var(--ink2); font-variant-numeric:tabular-nums; }
.pill.g { background:color-mix(in srgb,var(--mal) 15%,transparent); color:var(--mal); }
.pill.r { background:color-mix(in srgb,var(--cin) 13%,transparent); color:var(--cin); }
.panel { background:var(--surf); border-radius:24px; padding:16px 16px 6px; }
.tp { margin-bottom:14px; }
.tp-h { display:flex; justify-content:space-between; gap:10px; font-size:14.5px; font-weight:600; }
.tp-h b { color:var(--ink2); font-weight:600; font-variant-numeric:tabular-nums; }
.tbar { height:8px; border-radius:999px; background:var(--surf2); overflow:hidden; margin-top:7px; }
.tbar i { display:block; height:100%; width:0; border-radius:999px; transition:width .9s var(--ease); }

/* кнопки */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; margin:10px 0; padding:12px 22px; border:0; border-radius:999px; font-size:16.5px; font-weight:700; transition:transform .22s var(--ease), opacity .2s, background .25s, color .25s; }
.btn:active:not(:disabled) { transform:scale(.96); }
.btn:disabled { opacity:.4; cursor:default; }
.btn .ic { width:20px; height:20px; stroke-width:2.3; }
.btn.primary { background:var(--lapis); color:#fff; }
.btn.primary.g { background:var(--mal); }
.btn.primary.r { background:var(--cin); }
.btn.soft { background:color-mix(in srgb,var(--lapis) 12%,transparent); color:var(--lapis); }
.btn.soft.o { background:color-mix(in srgb,var(--ochre) 15%,transparent); color:var(--ochre); }
.btn.soft.v { background:color-mix(in srgb,var(--violet) 14%,transparent); color:var(--violet); }
.btn.soft.r { background:color-mix(in srgb,var(--cin) 12%,transparent); color:var(--cin); }
.btn.soft.n { background:var(--surf); color:var(--ink); }
.btn-row { display:flex; gap:10px; }
.btn-row .btn { flex:1; }
.chipbtn { display:inline-flex; align-items:center; gap:6px; margin:14px 0 0; padding:8px 14px; border:0; border-radius:999px; background:color-mix(in srgb,var(--ochre) 14%,transparent); color:var(--ochre); font-weight:700; font-size:14px; transition:transform .2s var(--ease), opacity .3s; }
.chipbtn .ic { width:17px; height:17px; }
.chipbtn:active:not(:disabled) { transform:scale(.94); }
.chipbtn:disabled { opacity:.55; cursor:default; }
.linkbtn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 0; color:var(--lapis); font-weight:700; font-size:15px; }
.linkbtn .ic { width:18px; height:18px; }

/* вопрос */
.qtag { display:inline-flex; align-items:center; gap:6px; margin:18px 0 10px; padding:5px 12px 5px 9px; border-radius:999px; font-size:13px; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 12%,transparent); }
.qtag .ic { width:16px; height:16px; }
.qtext { font-family:var(--fd); font-size:21px; font-weight:600; line-height:1.3; margin:0 0 18px; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; max-height:260px; padding:12px 16px 12px 12px; border:2px solid transparent; border-radius:20px; background:var(--surf); color:var(--ink); text-align:left; font-weight:600;
  transition:transform .22s var(--ease), background .3s, border-color .3s, opacity .35s, max-height .4s var(--ease), min-height .4s var(--ease), padding .4s var(--ease), margin .4s var(--ease); }
.opt:active:not(:disabled) { transform:scale(.98); }
.opt:disabled { cursor:default; }
.onum { flex:none; width:32px; height:32px; border-radius:50%; background:var(--surf2); color:var(--ink2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; transition:background .3s, color .3s; }
.ot { flex:1; line-height:1.35; }
.om { flex:none; display:flex; }
.om .ic { width:22px; height:22px; stroke-width:2.8; }
.opt.right { background:color-mix(in srgb,var(--mal) 12%,var(--surf)); border-color:var(--mal); animation:pop .45s var(--ease); }
.opt.right .onum { background:var(--mal); color:#fff; } .opt.right .om { color:var(--mal); }
.opt.wrong { background:color-mix(in srgb,var(--cin) 11%,var(--surf)); border-color:var(--cin); animation:shake .42s; }
.opt.wrong .onum { background:var(--cin); color:#fff; } .opt.wrong .om { color:var(--cin); }
.opt.dim { opacity:.45; }
.opt.still { animation:none !important; }
.opt.gone { opacity:0; transform:scale(.94); max-height:0; min-height:0; padding-top:0; padding-bottom:0; margin-top:-10px; border-width:0; pointer-events:none; }
.opt.picked { background:color-mix(in srgb,var(--lapis) 10%,var(--surf)); border-color:var(--lapis); }
.opt.picked .onum { background:var(--lapis); color:#fff; }
.qfoot { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:10px; margin:18px -18px 0; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--bg) 70%, transparent); }
.qfoot .btn { margin:0; flex:1; }
.key { display:none; text-align:center; font-size:12px; color:var(--ink3); margin-top:6px; }
@media (hover:hover) and (pointer:fine) { .key { display:block; } }

/* обратная связь */
.fb { margin:16px 0 0; padding:16px 18px; border-radius:24px; background:var(--surf); animation:rise .45s var(--ease) both; }
.fb.still { animation:none; }
.fb-h { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fb-h b { font-size:18px; font-weight:800; }
.fb-ic { flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.fb-ic .ic { width:18px; height:18px; stroke-width:3; }
.fb.ok .fb-ic { background:var(--mal); } .fb.ok .fb-h b { color:var(--mal); }
.fb.bad .fb-ic { background:var(--cin); } .fb.bad .fb-h b { color:var(--cin); }
.fb.neutral .fb-ic { background:var(--ochre); } .fb.neutral .fb-h b { color:var(--ochre); }
.fb .ans { font-size:15.5px; margin:4px 0; }
.fb p { margin:6px 0 0; color:var(--ink2); font-size:15px; line-height:1.5; }
.fb .linkbtn { margin-top:8px; }
.corder { margin:6px 0 0; padding-left:22px; }
.corder li { margin:5px 0; line-height:1.4; }
.corder li b { color:var(--ink2); margin-left:6px; font-variant-numeric:tabular-nums; }

/* результаты */
.res { display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 0 6px; }
.res h2 { font-family:var(--fd); font-size:20px; font-weight:600; line-height:1.3; margin:18px 8px 4px; }
.ring { position:relative; flex:none; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.ring .rbg { fill:none; stroke:var(--surf2); stroke-width:9; }
.ring .rfg { fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1.2s var(--ease); }
.rin { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rin b { font-family:var(--fd); font-size:var(--fs,24px); font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; }
.rin span { font-size:12.5px; color:var(--ink2); margin-top:3px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0 2px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--surf); color:var(--ink2); }
.chip .ic { width:15px; height:15px; }
.mcard { position:relative; background:var(--surf); border-radius:22px; padding:16px 18px; margin:0 0 10px; }
.mcard .q { font-weight:700; margin-bottom:8px; line-height:1.35; padding-right:40px; }
.mcard .star { position:absolute; top:8px; right:8px; }
.mline { display:flex; gap:8px; align-items:flex-start; font-size:15px; margin:6px 0; line-height:1.4; font-weight:600; }
.mline .ic { width:18px; height:18px; stroke-width:2.8; margin-top:2px; }
.mline.bad { color:var(--cin); } .mline.good { color:var(--mal); }
.mcard .why { color:var(--ink2); font-size:14px; margin-top:6px; line-height:1.5; }
.cnt { position:absolute; top:14px; right:14px; font-size:12px; font-weight:800; color:var(--cin); background:color-mix(in srgb,var(--cin) 12%,transparent); padding:3px 9px; border-radius:999px; }
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:44px 20px; color:var(--ink2); }
.empty .bub { width:64px; height:64px; }
.empty .bub .ic { width:30px; height:30px; }
.empty b { color:var(--ink); font-size:18px; }

/* поля */
.field { display:block; width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--surf); border:2px solid transparent; border-radius:22px; padding:14px 16px; outline:none; transition:border-color .25s; }
.field:focus { border-color:color-mix(in srgb,var(--lapis) 55%,transparent); }
textarea.field { min-height:170px; resize:vertical; line-height:1.5; }
textarea.field.code { min-height:100px; font-size:13px; }
.field::placeholder, .search input::placeholder { color:var(--ink3); }
.search { position:relative; margin:14px 0 16px; }
.search .ic { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink3); pointer-events:none; }
.search input { width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--surf); border:2px solid transparent; border-radius:999px; padding:13px 16px 13px 44px; outline:none; transition:border-color .25s; }
.search input:focus { border-color:color-mix(in srgb,var(--lapis) 55%,transparent); }
.card { background:var(--surf); border-radius:22px; padding:16px 18px; margin:12px 0; }
.cap { font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:6px; }
.userans { white-space:pre-wrap; font-size:15px; line-height:1.5; }

/* чек-лист */
.chk { display:flex; align-items:flex-start; gap:12px; margin:0 0 8px; padding:14px 16px; border-radius:20px; background:var(--surf); cursor:pointer; transition:background .3s, transform .2s var(--ease); }
.chk:active { transform:scale(.985); }
.chk input { position:absolute; opacity:0; pointer-events:none; }
.box { flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink3); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .25s, border-color .25s; }
.box .ic { width:15px; height:15px; stroke-width:3.4; opacity:0; transform:scale(.3); transition:opacity .2s, transform .35s var(--spring); }
.chk.on { background:color-mix(in srgb,var(--mal) 10%,var(--surf)); }
.chk.on .box { background:var(--mal); border-color:var(--mal); }
.chk.on .box .ic, .chk.miss .box .ic { opacity:1; transform:none; }
.chk.miss { cursor:default; background:color-mix(in srgb,var(--cin) 8%,var(--surf)); }
.chk.miss .box { background:var(--cin); border-color:var(--cin); }
.tx { flex:1; font-size:15.5px; line-height:1.4; }
.tx b { font-weight:700; }
.tx small { display:block; color:var(--ink2); font-size:14px; margin-top:2px; }

/* подсказки и ИИ */
.hintbox, .aibox { border-radius:22px; padding:14px 18px; margin:12px 0; animation:rise .38s var(--ease) both; }
.hintbox { background:color-mix(in srgb,var(--ochre) 13%,var(--surf)); }
.aibox { background:color-mix(in srgb,var(--violet) 11%,var(--surf)); }
.aibox.err { background:color-mix(in srgb,var(--cin) 9%,var(--surf)); }
.hh { display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:4px; }
.hintbox .hh { color:var(--ochre); } .aibox .hh { color:var(--violet); } .aibox.err .hh { color:var(--cin); }
.hh .ic { width:19px; height:19px; }
.hl { display:flex; gap:9px; margin:5px 0; }
.hl::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; margin-top:9px; }
.aibox p { margin:4px 0 0; line-height:1.5; font-size:15px; }
.note { font-size:13px; color:var(--ink2); margin-top:8px; }
.spin { width:18px; height:18px; border-radius:50%; border:2.5px solid color-mix(in srgb,currentColor 25%,transparent); border-top-color:currentColor; animation:spin .8s linear infinite; flex:none; }

/* теория */
.era { display:flex; align-items:center; gap:12px; margin:30px 2px 12px; }
.era .bub { width:38px; height:38px; font-family:var(--fd); font-size:15px; }
.era b { display:block; font-family:var(--fd); font-size:17px; font-weight:600; line-height:1.25; }
.era span { display:block; font-size:13.5px; color:var(--ink2); }
.tlc { background:var(--surf); border-radius:26px; padding:18px 16px 8px; }
.tl { display:flex; gap:12px; }
.tld { flex:none; width:72px; text-align:right; font-weight:800; font-size:13.5px; color:var(--c); padding-top:1px; line-height:1.3; font-variant-numeric:tabular-nums; }
.tlb { flex:1; border-left:2px solid var(--surf2); padding:0 0 18px 16px; position:relative; }
.tlb::before { content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px var(--surf); }
.tl:last-of-type .tlb { border-color:transparent; }
.tlb b { display:block; font-size:15.5px; margin-bottom:3px; line-height:1.35; }
.tlb .d { font-size:15px; line-height:1.5; color:var(--ink); }
.tlb .so { display:flex; gap:6px; align-items:flex-start; font-size:14px; color:var(--c); margin-top:6px; font-weight:700; line-height:1.4; }
.tlb .so .ic { width:15px; height:15px; margin-top:3px; stroke-width:2.6; }
.chain { margin:4px 0 8px; padding:14px; border-radius:20px; background:color-mix(in srgb,var(--c) 10%,transparent); }
.chain .cap { color:var(--c); }
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; font-weight:600; line-height:1.3; }
.flow .fs { background:var(--surf); border-radius:12px; padding:6px 10px; }
.flow .fa { color:var(--c); display:flex; }
.flow .fa .ic { width:14px; height:14px; stroke-width:2.8; }
.lcard .hh { color:var(--c); font-size:16px; margin-bottom:12px; }
.lcard .flow .fs { background:color-mix(in srgb,var(--c) 10%,var(--surf)); }
.scheme ol { margin:10px 0 0; padding-left:22px; }
.scheme li { margin:7px 0; line-height:1.45; }
.scheme li span { color:var(--ink2); }
.gloss { background:var(--surf); border-radius:24px; padding:4px 6px; }
.grow { display:flex; align-items:flex-start; gap:6px; padding:10px 4px 10px 12px; }
.grow + .grow { border-top:1px solid var(--line); }
.grow .gt { flex:1; font-size:15.5px; line-height:1.5; padding-top:6px; }
.kind { display:inline-block; font-size:12px; font-weight:700; color:var(--ink2); background:var(--surf2); border-radius:999px; padding:1px 8px; margin-right:6px; vertical-align:1px; }

/* избранное */
.star { flex:none; display:flex; background:none; border:0; color:var(--ink3); padding:8px; border-radius:50%; transition:color .25s; }
.star .ic { width:24px; height:24px; stroke-width:1.9; }
.star.on { color:var(--ochre); }
.star.pop .ic { animation:starPop .45s var(--ease); }

/* карточки */
.flip-wrap { perspective:1400px; margin:20px 0 12px; }
.flip { position:relative; height:320px; transform-style:preserve-3d; transition:transform .7s var(--ease); cursor:pointer; outline:none; }
.flip.flipped { transform:rotateY(180deg); }
.flip:focus-visible .face { box-shadow:0 0 0 3px color-mix(in srgb,var(--lapis) 55%,transparent); }
.face { position:absolute; inset:0; border-radius:30px; background:var(--surf); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 24px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.face.back { transform:rotateY(180deg); background:color-mix(in srgb,var(--lapis) 7%,var(--surf)); }
.face .kind { margin:0 0 16px; }
.fw { font-family:var(--fd); font-size:28px; font-weight:600; line-height:1.2; }
.fw.sm { font-size:17px; color:var(--ink2); }
.bt { font-size:19px; line-height:1.5; margin-top:14px; font-weight:600; }
.tap { display:flex; align-items:center; gap:6px; color:var(--ink3); font-size:14px; font-weight:600; margin-top:26px; }
.tap .ic { width:16px; height:16px; }
.acts { display:flex; gap:10px; transition:opacity .35s, transform .4s var(--ease); }
.acts.hidden { opacity:0; transform:translateY(12px); pointer-events:none; }
.acts .btn { flex:1; }

/* плавающий таббар */
#tabwrap { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; padding:0 16px calc(12px + env(safe-area-inset-bottom,0px)); pointer-events:none; transition:transform .45s var(--ease), opacity .3s; }
#tabwrap.hide { transform:translateY(140%); opacity:0; }
.tabs { position:relative; display:grid; grid-template-columns:repeat(4,1fr); width:100%; max-width:420px; padding:6px; border-radius:999px; background:var(--bar); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); box-shadow:var(--shadow); pointer-events:auto; }
.tabind { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px) / 4); border-radius:999px; background:color-mix(in srgb,var(--lapis) 13%,transparent); transition:transform .5s var(--spring); }
.tabs button { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0 6px; background:none; border:0; border-radius:999px; color:var(--ink3); font-size:11px; font-weight:700; transition:color .3s; }
.tabs button .ic { width:23px; height:23px; stroke-width:2; }
.tabs button.on { color:var(--lapis); }

/* нижний лист */
#sheet { position:fixed; inset:0; z-index:50; visibility:hidden; transition:visibility 0s .45s; }
#sheet.open { visibility:visible; transition:none; }
#sheet .scrim { position:absolute; inset:0; background:rgba(8,10,20,.42); opacity:0; transition:opacity .35s; }
#sheet.open .scrim { opacity:1; }
#sheet .spanel { position:absolute; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; max-height:calc(100% - 44px - env(safe-area-inset-top,0px)); background:var(--bg); border-radius:30px 30px 0 0; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .5s var(--ease); padding-bottom:env(safe-area-inset-bottom,0px); }
#sheet.open .spanel { transform:none; }
.grab { flex:none; width:40px; height:5px; border-radius:3px; background:var(--ink3); opacity:.6; margin:9px auto 0; }
.sheet-head { flex:none; display:flex; align-items:center; gap:8px; padding:10px 14px 8px 20px; }
.sheet-head b { flex:1; font-family:var(--fd); font-size:17px; font-weight:600; }
.sheet-scroll { overflow:auto; padding:0 18px 26px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
}

/* переключатель предметов */
.subj { position:relative; display:grid; grid-template-columns:repeat(var(--n),1fr); margin:16px 0 2px; padding:4px; border-radius:999px; background:var(--surf2); }
.subj-ind { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n)); border-radius:999px; background:var(--surf); box-shadow:0 2px 10px rgba(20,25,50,.10); transition:transform .45s var(--spring); }
.subj button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 10px; border:0; border-radius:999px; background:none; color:var(--ink2); font-weight:700; font-size:15px; transition:color .3s; }
.subj button .ic { width:19px; height:19px; flex:none; }
.subj button.on { color:var(--ink); }
.subj button span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root[data-subj="graphics"] { --hero:#0E7486; }
@media (prefers-color-scheme: dark) { :root[data-subj="graphics"]:not([data-theme="light"]) { --hero:#0F5F6E; } }
:root[data-subj="graphics"][data-theme="dark"] { --hero:#0F5F6E; }
.btn.light { color:var(--hero); }

/* чертежи */
.qfig { background:var(--surf); border-radius:22px; padding:14px 16px; margin:-4px 0 16px; color:var(--ink); }
.qfig.sm { background:none; padding:4px 0; margin:2px 0 6px; }
.gfig { display:block; width:100%; height:auto; max-width:330px; margin:0 auto; overflow:visible; }
.gfig.line { max-width:380px; }
.gfig .th { fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.gfig .md { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.gfig .xt { fill:none; stroke:currentColor; stroke-width:4.2; }
.gfig .tn { fill:none; stroke:currentColor; stroke-width:1.1; }
.gfig .ax { fill:none; stroke:var(--ink3); stroke-width:1; stroke-dasharray:14 3 2 3; }
.gfig .ac { fill:none; stroke:var(--lapis); stroke-width:1.2; stroke-dasharray:4 3; }
.gfig .ac2 { fill:none; stroke:var(--lapis); stroke-width:1.3; }
.gfig .hl { stroke:var(--cin); }
.gfig .pt { fill:var(--cin); } .gfig .pt2 { fill:var(--lapis); }
.gfig .fillc { fill:currentColor; stroke:none; }
.gfig text { font:600 11px var(--fb); fill:var(--ink2); }
.gfig text.cap { font-size:10.5px; font-weight:500; }
.gfig text.ac { fill:var(--lapis); }
.gfig text.mid { text-anchor:middle; }
.gfig text.num { text-anchor:middle; fill:var(--ink); font-size:12px; }
.card .gfig { margin:8px auto 6px; }
.lsample .ls-h { font-weight:700; margin-bottom:8px; }
.lsample { padding:14px 18px 12px; }

/* кнопки под обратной связью */
.fbl { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:8px; }
.fb .fbl .linkbtn { margin-top:0; }

/* чертежи: дополнительные классы */
.qfig .cap { margin-bottom:6px; }
.gfig.tall { max-width:300px; }
.gfig.wide { max-width:380px; }
.gfig .dm { fill:none; stroke:var(--ink2); stroke-width:.8; }
.gfig .pt3 { fill:var(--ochre); }
.gfig text.lbl { font-size:10.5px; font-weight:600; fill:var(--ink2); }
.gfig text.lbl.end { text-anchor:end; }
.gfig text.lbl.ac { fill:var(--lapis); }
.scheme .hh .pill { font-weight:700; }

/* билеты на главной */
.tkcard { display:flex; flex-direction:column; gap:10px; width:100%; padding:18px 18px 16px; border:0; border-radius:26px; text-align:left; color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb,var(--hero) 92%,#000), var(--hero)); box-shadow:var(--shadow); transition:transform .22s var(--ease); }
.tkcard:active { transform:scale(.98); }
.tk-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.tk-h b { font-family:var(--fd); font-size:19px; font-weight:600; }
.tk-h span { font-size:14px; font-weight:700; opacity:.85; white-space:nowrap; }
.tk-bar { display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; }
.tk-bar i { display:block; height:100%; width:0; border-radius:999px; background:#fff; transition:width 1s var(--ease); }
.tk-s { font-size:13.5px; opacity:.88; line-height:1.4; }
.tkparts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tkparts .chipbtn { margin:0; background:var(--surf); color:var(--ink); }
.tkparts .chipbtn .ic { color:var(--lapis); }

/* древо Рюриковичей */
.tlegend { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; font-weight:700; color:var(--ink2); margin:4px 2px 8px; }
.tlegend span { display:inline-flex; align-items:center; gap:5px; }
.tlegend i { width:10px; height:10px; border-radius:3px; background:var(--c); }
.tlegend .hl i { background:none; box-shadow:0 0 0 2px var(--ochre); }
.tfoot { color:var(--ink3); font-size:12.5px; line-height:1.4; margin:0 2px 12px; }
.tree { position:relative; }
.tgen { position:relative; }
.tmain { display:flex; align-items:flex-start; gap:10px; }
.tno { flex:none; width:26px; height:26px; margin-top:8px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--ink2); background:var(--surf2); }
.tnd { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; padding:10px 14px 10px 13px; border-radius:18px; background:var(--surf); border-left:4px solid var(--c); transition:box-shadow .3s, background .3s; }
.tnd b { font-size:15.5px; line-height:1.25; }
.tnd .ty { font-size:13px; font-weight:700; color:var(--c); font-variant-numeric:tabular-nums; }
.tnd .tnote { font-size:13px; color:var(--ink2); line-height:1.35; }
.tnd.sm { padding:7px 12px 7px 11px; border-radius:14px; }
.tnd.sm b { font-size:14px; }
.tnd.hit { background:color-mix(in srgb,var(--ochre) 13%,var(--surf)); box-shadow:0 0 0 2px var(--ochre); }
.tside { margin:6px 0 0 36px; padding-left:12px; border-left:2px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.tcap { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); }
.tsub { display:flex; flex-direction:column; gap:6px; margin-left:14px; }
.tsub .tarrow { color:var(--ink3); font-size:13px; margin-bottom:-4px; }
.tlink { margin:4px 0 4px 36px; padding:2px 0 2px 12px; border-left:2px solid var(--ink3); font-size:12px; font-weight:700; color:var(--ink3); }
.tmos { margin-top:16px; background:var(--surf); border-radius:20px; padding:12px 16px; }
.tmos summary { cursor:pointer; font-weight:700; color:var(--lapis); }
.tmlist { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:14px; color:var(--ink2); }
.tmlist b { color:var(--ink); }

/* фрагмент источника */
.src { margin:0 0 16px; padding:14px 16px 12px 18px; border-radius:20px; background:var(--surf); border-left:4px solid var(--teal); }
.src p { margin:0; font-size:15.5px; line-height:1.55; font-style:italic; color:var(--ink); }
.src cite { display:block; margin-top:8px; font-size:12.5px; font-style:normal; font-weight:700; color:var(--teal); }
.src.sm { margin:0 0 10px; padding:10px 12px 8px 14px; background:var(--surf2); }
.src.sm p { font-size:13.5px; }

/* всплывающее сообщение */
.toast { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:60; transform:translateX(-50%); padding:10px 16px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:700; box-shadow:var(--shadow); animation:rise .3s var(--ease) both; transition:opacity .35s; white-space:nowrap; }
.toast.out { opacity:0; }

/* навигация по вопросам */
.tb-title { max-width:60%; }
.tbnav { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:0; border-radius:999px; background:var(--surf); color:var(--ink); font:inherit; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; transition:transform .2s var(--ease); }
.tbnav:active { transform:scale(.95); }
.tbnav .ic { width:16px; height:16px; color:var(--lapis); }
.tbclock { color:var(--ink2); font-weight:600; padding-left:6px; border-left:1px solid var(--line); }
.qnav { display:flex; gap:6px; overflow-x:auto; margin:0 -18px; padding:12px 18px 2px; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image:linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.qnav::-webkit-scrollbar { display:none; }
.qn { position:relative; flex:none; width:34px; height:34px; border:0; border-radius:50%; background:var(--surf); color:var(--ink3); font:inherit; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; transition:transform .2s var(--ease), background .25s, color .25s, box-shadow .25s; }
.qn:active { transform:scale(.9); }
.qn.ok { background:color-mix(in srgb,var(--mal) 18%,var(--surf)); color:var(--mal); }
.qn.bad { background:color-mix(in srgb,var(--cin) 16%,var(--surf)); color:var(--cin); }
.qn.hint { background:color-mix(in srgb,var(--ochre) 18%,var(--surf)); color:var(--ochre); }
.qn.cur { box-shadow:0 0 0 2px var(--lapis); color:var(--lapis); }
.qn.re::after { content:""; position:absolute; top:1px; right:1px; width:8px; height:8px; border-radius:50%; background:var(--ochre); box-shadow:0 0 0 2px var(--bg); }
.qgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px; margin:6px 0 14px; }
.qgrid .qn { width:100%; height:44px; border-radius:14px; font-size:14px; }
.navsum { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; color:var(--ink2); margin:2px 2px 10px; }
.navsum b { color:var(--ink); font-variant-numeric:tabular-nums; } .navsum .g b { color:var(--mal); } .navsum .r b { color:var(--cin); }
.navleg { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink2); margin:0 2px 8px; }
.navleg span { display:inline-flex; align-items:center; gap:6px; }
.navleg i { width:12px; height:12px; border-radius:50%; background:var(--surf); box-shadow:inset 0 0 0 1px var(--line); }
.navleg i.ok { background:var(--mal); } .navleg i.bad { background:var(--cin); } .navleg i.hint { background:var(--ochre); } .navleg i.re { width:8px; height:8px; background:var(--ochre); }
/* кнопка «начать» в карточке пробного РК */
.tk-go { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin-top:2px; padding:10px 18px; border-radius:999px; background:#fff; color:var(--hero); font-weight:800; font-size:15px; }
.tk-go .ic { width:16px; height:16px; }
.qn.sk { outline:2px dashed var(--ink3); outline-offset:-4px; color:var(--ink2); }
.qn.sk.cur { outline-color:var(--lapis); }
.navleg i.sk { outline:1.5px dashed var(--ink3); outline-offset:-1px; box-shadow:none; }

.seg2 { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 14px; border-radius:999px; background:var(--surf2); }
.seg2 button { min-height:40px; border:0; border-radius:999px; background:none; color:var(--ink2); font:inherit; font-size:14px; font-weight:700; transition:background .25s, color .25s; }
.seg2 button.on { background:var(--surf); color:var(--ink); box-shadow:0 2px 8px rgba(20,25,50,.10); }

/* развёрнутые задания в ленте — квадратные */
.qn.op { border-radius:10px; }
.qgrid .qn.op { border-radius:14px; }
.navleg i.op { border-radius:3px; }
.btn-row .btn { margin:10px 0; }
button.row[data-rev] { cursor:pointer; }

/* плашка темы и подсказка в одну строку */
.qtags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 10px; }
.qtags .qtag { margin:0; }
.qtags .chipbtn { margin:0; padding:5px 12px 5px 10px; font-size:13px; }
.qtags .chipbtn .ic { width:15px; height:15px; }

/* нижняя панель: 5 вкладок */
.tabs { grid-template-columns:repeat(5,1fr); }
.tabind { width:calc((100% - 12px) / 5); }
.tabs button span { font-size:10.5px; }

/* строка «Спросить ИИ» на главной */
.askbar { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin:10px 0 0; padding:0 16px; border:0; border-radius:999px; background:var(--surf); color:var(--ink3); font:inherit; font-size:15px; text-align:left; transition:transform .2s var(--ease); }
.askbar:active { transform:scale(.98); }
.askbar span { flex:1; }
.askbar .ic { width:19px; height:19px; }
.askbar .ic:last-child { color:var(--violet); }

/* экран «Спросить» */
.askfeed { padding-bottom:170px; }
.asktips { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.tipbtn { display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; border:0; border-radius:18px; background:var(--surf); color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-align:left; transition:transform .2s var(--ease); }
.tipbtn:active { transform:scale(.98); }
.tipbtn .ic { width:17px; height:17px; color:var(--violet); flex:none; }
.aentry { margin-top:18px; animation:rise .35s var(--ease) both; }
.qbub { margin-left:auto; max-width:85%; width:fit-content; padding:11px 15px; border-radius:20px 20px 6px 20px; background:var(--lapis); color:#fff; font-size:15.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.qatt { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.qatt img { width:64px; height:64px; object-fit:cover; border-radius:12px; }
.fchip { display:inline-flex; align-items:center; gap:5px; max-width:180px; padding:5px 10px; border-radius:10px; background:rgba(255,255,255,.18); font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fchip .ic { width:15px; height:15px; flex:none; }
.acard { margin-top:10px; padding:14px 16px; border-radius:6px 22px 22px 22px; background:var(--surf); }
.asrc { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; font-size:12.5px; font-weight:800; color:var(--c); background:color-mix(in srgb,var(--c) 13%,transparent); }
.asrc .ic { width:14px; height:14px; }
.abody { margin-top:8px; font-size:15.5px; line-height:1.55; }
.abody p { margin:0 0 6px; } .abody ul { margin:4px 0 6px; padding-left:20px; } .abody li { margin:3px 0; }
.asteps { margin-top:10px; padding:12px 14px; border-radius:16px; background:color-mix(in srgb,var(--mal) 9%,var(--surf)); }
.asteps .cap { color:var(--mal); } .asteps ol { margin:4px 0 0; padding-left:20px; } .asteps li { margin:5px 0; line-height:1.45; }
.acard .qfig { margin:10px 0 0; padding:10px; background:var(--bg); }
.alinks { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.alinks a { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:var(--surf2); color:var(--lapis); font-size:13.5px; font-weight:600; text-decoration:none; overflow:hidden; }
.alinks a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .alinks .ic { width:15px; height:15px; flex:none; }
.aacts { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; }
.acard.loading { display:flex; align-items:center; gap:12px; color:var(--ink2); font-size:14.5px; font-weight:600; }
.adots { display:flex; gap:5px; } .adots i { width:8px; height:8px; border-radius:50%; background:var(--violet); animation:adot 1s infinite ease-in-out; } .adots i:nth-child(2) { animation-delay:.15s; } .adots i:nth-child(3) { animation-delay:.3s; }
@keyframes adot { 0%,80%,100% { opacity:.25; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
.acard.err .ahead { display:flex; align-items:center; gap:8px; color:var(--cin); font-weight:700; margin-bottom:8px; } .acard.err .ahead .ic { width:18px; height:18px; }
.acard.err .chipbtn { margin:0; }
.composer { position:fixed; left:0; right:0; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:20; max-width:640px; margin:0 auto; padding:0 16px; }
.cbox { display:flex; align-items:flex-end; gap:8px; padding:6px; border-radius:26px; background:var(--bar); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); box-shadow:var(--shadow); border:1px solid var(--line); }
.cbox textarea { flex:1; min-height:40px; max-height:150px; resize:none; border:0; outline:none; background:none; color:var(--ink); font:inherit; font-size:16px; line-height:1.4; padding:9px 4px; }
.cbox textarea::placeholder { color:var(--ink3); }
.cbtn { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--surf2); color:var(--ink2); display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease), opacity .2s, background .2s; }
.cbtn .ic { width:20px; height:20px; }
.cbtn:active:not(:disabled) { transform:scale(.9); }
.cbtn.send { background:var(--lapis); color:#fff; } .cbtn.send .ic { stroke-width:2.6; }
.cbtn:disabled { opacity:.35; }
.catt { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.catt:empty { display:none; }
.attc { position:relative; }
.attc img { width:58px; height:58px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); display:block; }
.attc .fchip { background:var(--surf); color:var(--ink); height:40px; box-shadow:var(--shadow); }
.attc button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border:0; border-radius:50%; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; padding:0; }
.attc button .ic { width:12px; height:12px; stroke-width:3; }

/* поле вопроса ИИ — многострочное, как поле развёрнутого ответа */
.cbox { border-radius:24px; }
.cbox textarea { min-height:64px; max-height:220px; padding:10px 6px; }
.askfeed { padding-bottom:210px; }

/* поле ввода ближе к нижней панели */
.composer { bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
.askfeed { padding-bottom:190px; }
/* диалоги */
.askhead .sub { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.asklead { margin-top:8px; }
.circ .cbadge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--lapis); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.circ { position:relative; }
.tipbtn.rec small { margin-left:auto; flex:none; color:var(--ink3); font-size:12.5px; font-weight:600; }
.tipbtn.rec .ic { color:var(--lapis); }
.asktips .linkbtn { margin:2px 4px 0; }
.chatlist { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.chatrow { display:flex; align-items:stretch; gap:6px; }
.chatopen { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:0; border-radius:18px; background:var(--surf); color:var(--ink); text-align:left; font:inherit; transition:transform .2s var(--ease); }
.chatopen:active { transform:scale(.98); }
.chatrow.on .chatopen { box-shadow:inset 0 0 0 2px var(--lapis); }
.chatopen .ct { font-weight:700; font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatopen .cs { font-size:13px; color:var(--ink2); }
.chatdel { flex:none; min-width:48px; border:0; border-radius:18px; background:var(--surf); color:var(--ink3); display:flex; align-items:center; justify-content:center; font:inherit; font-weight:700; font-size:13px; transition:background .2s, color .2s; }
.chatdel .ic { width:19px; height:19px; }
.chatrow.confirm .chatdel { background:var(--cin); color:#fff; padding:0 12px; }

/* поле ввода ИИ: закреплено поверх ленты; при открытой клавиатуре — над ней, а нижняя панель прячется */
.composer { z-index:40; bottom:calc(72px + env(safe-area-inset-bottom,0px)); transition:bottom .28s var(--ease); }
.composer::before { content:""; position:absolute; left:0; right:0; top:-28px; bottom:-10px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--bg) 0%,transparent), var(--bg) 34px); }
body.kb #tabwrap { transform:translateY(140%); opacity:0; pointer-events:none; }
body.kb .composer { bottom:calc(var(--kb,0px) + 8px); }
body.kb .askfeed { padding-bottom:120px; }

.composer { bottom:calc(78px + env(safe-area-inset-bottom,0px)); }
/* кнопка мини-чата в верхней панели */
.topbar .aibtn { width:40px; height:40px; color:var(--violet); background:color-mix(in srgb,var(--violet) 13%,var(--surf)); }
.topbar .aibtn .ic { width:19px; height:19px; }
/* мини-окно ИИ */
#aimini { position:fixed; inset:0; z-index:45; pointer-events:none; }
#aimini.open { pointer-events:auto; }
.mscrim { position:absolute; inset:0; background:rgba(8,10,20,.38); opacity:0; transition:opacity .3s; }
#aimini.open .mscrim { opacity:1; }
.mpanel { position:absolute; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; height:min(72vh, 640px); display:flex; flex-direction:column;
  background:var(--bg); border-radius:28px 28px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.25); transform:translateY(105%); transition:transform .38s var(--ease), bottom .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0px); }
#aimini.open .mpanel { transform:none; }
body.kb .mpanel { bottom:var(--kb,0px); height:min(calc(100vh - var(--kb,0px) - 40px), 640px); border-radius:28px; padding-bottom:0; }
.mhead { flex:none; display:flex; align-items:center; gap:8px; padding:8px 12px 8px 18px; }
.mt { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.mt > .ic { flex:none; width:22px; height:22px; color:var(--violet); }
.mt b { display:block; font-family:var(--fd); font-size:16px; font-weight:600; }
.mt small { display:block; color:var(--ink2); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt > span { min-width:0; }
.mbtns { display:flex; gap:6px; flex:none; }
.mbtns .circ { width:38px; height:38px; } .mbtns .circ .ic { width:18px; height:18px; }
.mscroll { flex:1; overflow:auto; padding:0 14px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.askfeed.mini { padding-bottom:12px; }
.askfeed.mini .aentry:first-child { margin-top:6px; }
.mtask { flex:none; padding:6px 14px 0; }
.mtask .chipbtn { margin:0; background:color-mix(in srgb,var(--lapis) 12%,var(--surf)); color:var(--lapis); }
.mcomp { flex:none; padding:8px 12px 10px; }
.mcomp .cbox { box-shadow:none; background:var(--surf); }
.mcomp .cbox textarea { min-height:48px; max-height:150px; }

/* поле ввода — ровно над нижней панелью (её высоту меряет сайт) */
#askdock.composer { bottom:calc(var(--tabtop, 84px) + 8px); }
body.kb #askdock.composer { bottom:calc(var(--kb,0px) + 8px); }

/* ссылка из тренажёра обратно в учебный хаб */
.tohub { display:inline-flex; align-items:center; gap:4px; margin:16px 0 -8px; padding:6px 12px 6px 8px; border-radius:999px; background:var(--surf); color:var(--ink2); font-size:13.5px; font-weight:700; text-decoration:none; }
.tohub .ic { width:16px; height:16px; stroke-width:2.6; }
.tohub:active { transform:scale(.96); }