:root{
  --ink:#0F2E2C; --muted:#4D5A57; --ground:#FAF8F3; --card:#FFFFFF; --line:#E4E0D5; --soft:#EEEAE0;
  --accent:#19771B; --accent-soft:#E3F2E3; --mark:#FFB547; --ok:#19771B; --bad:#B3361C; --bad-soft:#FBE9E5;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Onest,system-ui,sans-serif;color:var(--ink);background:var(--ground);line-height:1.55;font-size:17px}
h1,h2,h3,.display{font-family:Rubik,sans-serif;line-height:1.2;margin:0}
a{color:var(--accent)}
button{font-family:inherit;font-size:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mark{background:var(--mark);padding:0 6px;border-radius:6px}
kbd{font-family:Onest,sans-serif;font-size:.85em;font-weight:600;background:var(--card);border:1px solid #C9C3B3;border-bottom-width:3px;border-radius:6px;padding:1px 7px;white-space:nowrap}

/* header */
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:Rubik,sans-serif;font-weight:700;font-size:20px}
.crumbs{flex:1 1 auto;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.xp-pill{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;font-size:15px;background:var(--card)}

/* lesson head */
.lesson-head{background-color:var(--ground);background-image:radial-gradient(#D9D3C3 1.2px,transparent 1.2px);background-size:22px 22px;border-bottom:1px solid var(--line)}
.lesson-head .wrap{padding-top:36px;padding-bottom:28px;display:flex;flex-direction:column;gap:18px}
.tag{align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.lesson-head h1{font-size:clamp(28px,4vw,44px);font-weight:700;max-width:900px}
.steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.step{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 8px;border:2px solid var(--ink);border-radius:14px;background:var(--card);cursor:pointer;font-weight:600}
.step .n{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--soft);font-family:Rubik,sans-serif}
.step[aria-selected="true"]{background:var(--ink);color:#fff}
.step[aria-selected="true"] .n{background:var(--mark);color:var(--ink)}
.step.done .n{background:var(--accent);color:#fff}

main .wrap{padding-top:36px;padding-bottom:72px}
.panel[hidden]{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.stack{display:flex;flex-direction:column;gap:22px}
.card h2{font-size:24px;font-weight:600;margin-bottom:12px}
.card p{margin:0 0 12px}
.card p:last-child{margin-bottom:0}
.two{display:flex;flex-wrap:wrap;gap:22px}
.two>*{flex:1 1 360px;min-width:0}
ol.howto{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
ol.howto li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
ol.howto li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--mark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.tip{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);border:1px solid #BFDDBF}
.tip svg{flex:none;margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-decoration:none}
.btn.dark{background:var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink);border:2px solid var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* paint window schematic */
.pw{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card);font-size:13px}
.pw .bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--card);border-bottom:1px solid var(--line)}
.pw .menu{display:flex;gap:2px;padding:0 10px;background:var(--card);border-bottom:1px solid var(--line)}
.pw .menu span{padding:6px 10px}
.pw .menu .file{background:#2B6CB0;color:#fff}
.pw .ribbon{display:flex;gap:6px;padding:8px 10px;background:#F5F6F7;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pw .grp{border:1px solid #D9DCE0;border-radius:6px;padding:6px 8px 4px;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px}
.pw .grp small{color:var(--muted);font-size:11px}
.pw .work{background:#C9D3DF;padding:14px;height:150px}
.pw .canvas{background:#fff;width:70%;height:100%;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pw .status{display:flex;gap:18px;padding:5px 10px;background:#F0F0F0;border-top:1px solid var(--line);color:#333}
.pin{position:relative}
.badge{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;background:var(--mark);color:var(--ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);z-index:2}
.legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.legend li{display:flex;gap:12px;align-items:flex-start}
.legend b.k{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mark);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px}

/* mini paint */
.paint{border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card)}
.tools{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:#F5F6F7;border-bottom:1px solid var(--line)}
.tgrp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px 4px;border:1px solid #D9DCE0;border-radius:8px;background:var(--card)}
.tgrp .row{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.tgrp small{font-size:11px;color:var(--muted)}
.tbtn{min-width:44px;height:44px;border-radius:8px;border:1px solid transparent;background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 8px;gap:6px;font-size:13px;font-weight:600}
.tbtn:hover{background:#EEF2F6}
.tbtn[aria-pressed="true"]{background:#DCE8F7;border-color:#2B6CB0}
.tbtn:disabled{opacity:.35;cursor:not-allowed}
.sizes .tbtn span{display:block;width:26px;background:var(--ink);border-radius:4px}
.swatches{display:grid;grid-template-columns:repeat(6,22px);gap:4px}
.sw{width:22px;height:22px;border:1px solid #9AA6A2;border-radius:3px;cursor:pointer;padding:0}
.cslot{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);border:1px solid transparent;border-radius:8px;padding:4px;background:var(--card);cursor:pointer;min-width:52px}
.cslot[aria-pressed="true"]{border-color:#2B6CB0;background:#DCE8F7}
.cslot i{display:block;width:30px;height:30px;border:1px solid #6E7774;border-radius:4px}
.stage{background:#C9D3DF;padding:14px;overflow:auto}
#cv{display:block;width:100%;max-width:800px;aspect-ratio:16/9;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:crosshair;touch-action:none}
.statusbar{display:flex;flex-wrap:wrap;gap:18px;padding:6px 12px;background:#F0F0F0;border-top:1px solid var(--line);font-size:13px;color:#333}
.toggles{display:flex;flex-wrap:wrap;gap:14px;padding:10px 12px;border-top:1px solid var(--line);font-size:14px}
.toggles label{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.toggles input{width:20px;height:20px;accent-color:var(--accent)}
.tasks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tasks li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tasks li .chk{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tasks li.ok{border-color:#BFDDBF;background:var(--accent-soft)}
.tasks li.ok .chk{background:var(--accent);border-color:var(--accent)}
.tasks .xp{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.tasks li.ok .xp{color:var(--accent)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:90vw}
.toast.show{opacity:1}

/* quiz */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.qbar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;margin-bottom:22px}
.qbar i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}
.qtext{font-family:Rubik,sans-serif;font-size:22px;font-weight:600;margin-bottom:18px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;min-height:54px;padding:10px 16px;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-size:17px}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt .l{flex:none;width:30px;height:30px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700}
.opt.right{border-color:var(--ok);background:var(--accent-soft)}
.opt.right .l{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .l{background:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.explain{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--ground);border:1px solid var(--line)}
.qfoot{display:flex;justify-content:flex-end;margin-top:18px}
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0}
.big{font-family:Rubik,sans-serif;font-size:56px;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(15,46,44,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal[hidden]{display:none}
.modal .box{background:var(--card);border-radius:16px;padding:22px;max-width:860px;width:100%;display:flex;flex-direction:column;gap:14px}
.modal img{width:100%;border:1px solid var(--line);border-radius:8px}
footer{background:var(--ink);color:#CFDCD8;font-size:14px}
footer .wrap{padding-top:28px;padding-bottom:28px}
@media (max-width:600px){.card{padding:20px}.lesson-head .wrap{padding-top:24px}}

.brushes{position:relative}
.bsel{height:44px;border-radius:8px;border:1px solid #D9DCE0;background:var(--card);padding:0 8px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);max-width:170px}
.tbtn.tool{flex-direction:column;gap:2px;height:52px;font-size:11px}
.lessons{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.lesson{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
a.lesson:hover{border-color:var(--ink)}
.lesson .num{flex:none;width:48px;height:48px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:Rubik,sans-serif;font-weight:700;font-size:18px}
.lesson.done .num{background:var(--accent);color:#fff}
.lesson .ttl{flex:1 1 280px;min-width:0;font-weight:600}
.lesson .ttl small{display:block;font-weight:400;color:var(--muted);font-size:14px}
.lesson .st{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.lesson.locked{background:transparent;border-style:dashed}
.lesson.exam .num{background:var(--mark)}
.chip{min-width:72px;text-align:center;padding:12px 16px;border:1px solid var(--ink);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;background:var(--card)}
a.chip.on{background:var(--ink);color:#fff}
.lrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
a.lrow:hover{border-color:var(--ink)}
.lrow .num{flex:none;width:38px;height:38px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:Rubik,sans-serif;font-weight:700;font-size:15px}
.lrow.ready .num{background:var(--accent);color:#fff}
.lrow.exam .num{background:var(--mark)}
.lrow .ttl{flex:1 1 auto;min-width:0;font-weight:500}
.lrow .st{flex:none;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.lrow .st.ok{color:var(--accent)}
.qblock{display:flex;flex-direction:column;gap:14px}
.qblock.current{padding:20px;border:2px solid var(--ink);border-radius:18px;background:var(--card)}
.qblock.current .lrow{background:var(--ground)}
.qhead2{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.qhead2 h2{font-size:26px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qhead2 a{font-weight:600;text-decoration:none}
.now{font-family:Onest,sans-serif;font-size:13px;font-weight:600;background:var(--mark);color:var(--ink);padding:4px 10px;border-radius:999px}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:24px}
.soon-card{display:flex;flex-direction:column;gap:12px;max-width:760px}
.soon-card h2{margin:0}
.soon-card p{margin:0}
@media (max-width:600px){.lrow{flex-wrap:wrap}.lrow .ttl{flex-basis:calc(100% - 60px)}}
/* mashq vidjetlari */
.pbox{display:flex;flex-direction:column;gap:14px}
.phead h3{font-family:Rubik,sans-serif;font-size:20px;font-weight:600;margin:0 0 4px}
.phead p{margin:0;color:var(--muted);font-size:15px}
.sheet{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card)}
.sbar{display:flex;align-items:center;gap:8px;padding:8px;background:#F5F6F7;border-bottom:1px solid var(--line)}
.namebox{min-width:64px;padding:6px 8px;border:1px solid #C9CDD2;border-radius:4px;background:var(--card);font-weight:600;font-size:14px}
.fx{font-style:italic;color:var(--muted);font-weight:600}
.fbar{flex:1;min-width:0;height:34px;border:1px solid #C9CDD2;border-radius:4px;padding:0 8px;font:inherit;font-size:14px}
.sgrid{overflow:auto}
.sgrid table{border-collapse:collapse;font-size:14px}
.sgrid th{background:#F0F2F4;color:#4D5A57;font-weight:600;border:1px solid #D9DCE0;padding:4px 6px;min-width:28px}
.sgrid td{border:1px solid #D9DCE0;padding:0}
.sgrid td input{width:96px;height:30px;border:0;padding:0 6px;font:inherit;font-size:14px;background:transparent;color:var(--ink)}
.sgrid td input.num{text-align:right}
.sgrid td.on{outline:2px solid #19771B;outline-offset:-2px}
.sgrid td input:focus{outline:none}
.hlab{display:flex;flex-wrap:wrap;gap:12px}
.hcol{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
.hlab-l{font-size:13px;font-weight:600;color:var(--muted)}
.hlab textarea{min-height:320px;font-family:ui-monospace,Consolas,monospace;font-size:14px;line-height:1.5;padding:12px;border:2px solid var(--ink);border-radius:12px;background:#0F2E2C;color:#E9F5EE;resize:vertical}
.hlab iframe{min-height:320px;flex:1;border:2px solid var(--ink);border-radius:12px;background:#fff;width:100%}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:20px}
.chipi{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);font:inherit;font-size:15px;cursor:pointer;color:var(--ink);text-align:left}
.chipi.on{border-color:var(--ink);background:var(--mark)}
.chipi.ok{min-height:32px;padding:4px 10px;border-color:#BFDDBF;background:var(--accent-soft);font-size:13px;cursor:default}
.buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.bucket{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:110px;padding:14px;border:2px dashed #9AA6A2;border-radius:14px;background:var(--ground);font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.bucket:hover{border-color:var(--ink)}
.bucket .in{display:flex;flex-wrap:wrap;gap:6px}
.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cls-msg{margin:0;font-weight:600;color:var(--muted)}
.olist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.oitem{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card)}
.oitem.good{border-color:#19771B;background:var(--accent-soft)}
.oitem.bad{border-color:var(--bad);background:var(--bad-soft)}
.oitem .on{flex:none;width:30px;height:30px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700}
.oitem .ot{flex:1;min-width:0}
.oarr{display:flex;gap:4px}
.oarr button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:14px;color:var(--ink)}
.oarr button:disabled{opacity:.3;cursor:default}
.pform{display:flex;flex-direction:column;gap:14px}
.pfield{display:flex;flex-direction:column;gap:6px}
.pfield label{font-weight:600}
.pfield input,.pfield select,.pfield textarea{font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);min-height:46px}
.pfield input:focus,.pfield select:focus,.pfield textarea:focus{border-color:var(--ink);outline:none}
.pfield small{color:var(--muted)}
.pcard{border:2px solid var(--ink);border-radius:14px;padding:18px;background:var(--ground)}
.pcard h4{margin:0 0 10px;font-family:Rubik,sans-serif;font-size:18px}
.pcard dl{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px}
.pcard dt{font-weight:600}.pcard dd{margin:0}
.diagram{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.diagram .db{padding:10px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font-weight:600;font-size:15px}
.diagram .da{font-weight:700;color:var(--muted)}
table.tt{width:100%;min-width:480px;border-collapse:collapse;font-size:16px}
table.tt th{background:var(--ground);text-align:left;padding:10px 14px}
table.tt td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
pre.code{background:#0F2E2C;color:#E9F5EE;padding:14px;border-radius:12px;overflow:auto;font-size:14px;line-height:1.5}

/* toshbaqa grafika */
.tlab{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,440px);gap:18px;align-items:start}
.tlab .tcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.tlab textarea{font:16px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:12px;border:2px solid var(--line,#D4D7DA);border-radius:12px;resize:vertical;text-transform:uppercase}
.tlab canvas{width:100%;max-width:440px;aspect-ratio:1;border:2px solid var(--ink,#0F2E2C);border-radius:12px;background:#fff}
.tlab .tbtns{display:flex;gap:10px;flex-wrap:wrap}
.tlab .tref{font-size:14px;color:var(--muted,#5B6B67);line-height:1.8}
.tlab .tref code{white-space:nowrap;background:#EEF2EF;padding:1px 6px;border-radius:6px}
@media (max-width:760px){.tlab{grid-template-columns:1fr}}

/* ---------- sarlavha asboblari, footer, muallif ---------- */
.hdr-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.ibtn{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);text-decoration:none;flex:none}
.ibtn:hover{border-color:var(--ink)}
.ibtn svg{width:20px;height:20px}
.install-btn{display:none;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-weight:600;font-size:15px;cursor:pointer}
.install-btn.show{display:inline-flex}
.install-btn svg{width:18px;height:18px}
.install-btn .s{display:none}
@media (max-width:560px){.install-btn .l{display:none}.install-btn .s{display:inline}.install-btn{padding:0 12px}.hdr-tools{order:2}}
.iqf{background:#0F2E2C;color:#CFDCD8;font-size:15px}
.iqf .wrap{padding-top:40px;padding-bottom:28px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.iqf h4{font-family:Rubik,sans-serif;color:#fff;font-size:16px;margin:0 0 12px}
.iqf a{color:#CFDCD8;text-decoration:none}
.iqf a:hover{color:#fff;text-decoration:underline}
.iqf .brand{display:flex;align-items:center;gap:10px;font-family:Rubik,sans-serif;font-weight:700;color:#fff;font-size:20px;margin-bottom:10px}
.iqf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.iqf .soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.iqf .soc a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:14px}
.iqf .soc a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.iqf .soc svg{width:18px;height:18px}
.iqf .bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:14px}
.iqf .bottom b{color:#fff}
@media (max-width:820px){.iqf .wrap{grid-template-columns:1fr}}
.author{display:flex;gap:28px;align-items:center;flex-wrap:wrap;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:32px}
.author .ava{width:96px;height:96px;border-radius:50%;background:var(--mark);display:flex;align-items:center;justify-content:center;font-family:Rubik,sans-serif;font-weight:700;font-size:34px;color:#0F2E2C;flex:none;border:3px solid var(--ink)}
.author .info{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.author .info h3{font-size:26px}
.author .meta{color:var(--muted)}
.author .soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.author .soc a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:2px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:var(--card)}
.author .soc a:hover{border-color:var(--ink)}
.author .soc svg{width:20px;height:20px}
.ios-tip{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:min(440px,92vw);background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:50;font-size:15px}
.ios-tip button{float:right;border:0;background:none;font-size:20px;cursor:pointer;color:var(--ink)}

/* ---------- tungi rejim ---------- */
[data-theme="dark"]{color-scheme:dark;--ink:#E6EEEB;--muted:#A3B3AE;--ground:#0D1614;--card:#16211E;--line:#2A3833;--soft:#22302B;--accent:#2E8F31;--accent-soft:#1B3A20;--bad:#E07055;--bad-soft:#3A1E18}
[data-theme="dark"] .mark{color:#0F2E2C}
[data-theme="dark"] .btn.dark,[data-theme="dark"] .step[aria-selected="true"],[data-theme="dark"] a.chip.on,[data-theme="dark"] .toast{color:#0D1614}
[data-theme="dark"] .lesson-head{background-image:radial-gradient(#26332F 1.2px,transparent 1.2px)}
[data-theme="dark"] footer:not(.iqf){background:#081210}
[data-theme="dark"] .iqf{background:#081210}
[data-theme="dark"] a{color:#6FCF72}
[data-theme="dark"] .iqf a,[data-theme="dark"] .author .soc a,[data-theme="dark"] .logo,[data-theme="dark"] .btn,[data-theme="dark"] .crumbs a,[data-theme="dark"] a.chip,[data-theme="dark"] .ibtn{color:inherit}
[data-theme="dark"] .btn{color:#fff}
[data-theme="dark"] .btn.dark,[data-theme="dark"] a.btn.dark{color:#0D1614}
[data-theme="dark"] .btn.ghost{color:var(--ink)}
[data-theme="dark"] .logo{color:var(--ink)}
[data-theme="dark"] img,[data-theme="dark"] .paint canvas{filter:none}
.author .map{flex:1 1 100%;display:flex;flex-direction:column;gap:10px}
.author .map iframe{width:100%;height:300px;border:2px solid var(--line);border-radius:16px;background:var(--soft)}
.author .maplinks{display:flex;gap:18px;flex-wrap:wrap;font-weight:600;font-size:15px}
@media (min-width:900px){.author .map{flex:1 1 380px}.author .map iframe{height:260px}}
@media (max-width:560px){
  .top .wrap{gap:10px;row-gap:6px}
  .crumbs{order:3;flex-basis:100%;font-size:13px}
  .xp-pill{order:2;margin-left:auto;padding:5px 10px;font-size:14px}
  .xp-pill ~ .hdr-tools{margin-left:0}
  .top .wrap:has(.xp-pill) .logo{font-size:0;gap:0}
}