/* =====================================================================
   Страницы портала и классов: обложки, карточки тем, банк, проверочная,
   результаты, доска.
   ===================================================================== */
.t-yellow{--bg:#FFD23F;--fg:#151821;--acc:#E8263F}
.t-green{--bg:#12B886;--fg:#0D1A15;--acc:#FFF8EC}
.t-blue{--bg:#2F5BFF;--fg:#FFFFFF;--acc:#FFD23F}
.t-purple{--bg:#7B4AE2;--fg:#FFFFFF;--acc:#FFD23F}
.t-dark{--bg:#151821;--fg:#FFF8EC;--acc:#FFD23F}
.t-paper{--bg:#FFF8EC;--fg:#151821;--acc:#2F5BFF}

/* фоновые элементы темы: SVG-маска, цвет и прозрачность задаёт тема */
.deco{position:absolute;pointer-events:none;background:var(--fg);opacity:.13;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.d-1{--m:url(../img/deco_shapes.svg);right:-4vw;top:-2vh;width:min(54vw,760px);height:110%}
.d-2{--m:url(../img/deco_pattern.svg);right:-3vw;top:0;width:min(56vw,780px);height:100%}
.d-3{--m:url(../img/deco_cubes.svg);right:-2vw;top:4%;width:min(50vw,700px);height:96%}
.d-4{--m:url(../img/deco_maze.svg);right:-2vw;top:0;width:min(54vw,760px);height:100%}

/* ---------- обложка класса ---------- */
.ghero{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);border:3px solid var(--line);border-radius:24px;box-shadow:8px 8px 0 var(--line);margin-bottom:10px}
.ghero .in{position:relative;padding:clamp(22px,4vw,48px);display:flex;flex-direction:column;gap:16px;max-width:980px}
.ghero .eyebrow{color:inherit;opacity:.85}
.ghero .tag{background:var(--fg);color:var(--bg)}
.ghero h1{font-size:clamp(52px,9vw,124px)}
.ghero h1 .hand{color:var(--acc);font-size:.62em;margin-top:.1em}
.ghero .hand.u::after{filter:var(--ulf,none)}
.t-blue .hand.u::after,.t-purple .hand.u::after,.t-dark .hand.u::after{filter:invert(1)}
.gnum{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:22px;background:var(--fg);color:var(--bg);margin-right:.08em;line-height:1}
.btns.big .btn{min-height:62px;font-size:20px;padding:12px 22px}
.gstat{font-size:17px}
.bar{display:inline-block;width:100%;max-width:420px;height:14px;border:3px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;vertical-align:middle;margin-top:6px}
.bar i{display:block;height:100%;background:var(--green)}
.ghero .bar{display:block}

/* ---------- карта тем ---------- */
.dirmap{display:flex;flex-direction:column;gap:26px;margin-top:12px}
.dirh{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:700;font-variation-settings:"wdth" 80;text-transform:uppercase;font-size:22px;margin-bottom:10px}
.dirh b{width:36px;height:36px;border-radius:10px;background:var(--dc);color:#fff;display:grid;place-items:center;border:3px solid var(--line);font-size:18px}
.tcard{background:#fff;border:3px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--line);padding:14px;display:flex;flex-direction:column;gap:8px;border-top:10px solid var(--dc)}
.tcard h3{font-size:24px}
.tc-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.tc-dir{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--dc);color:#fff;padding:2px 8px;border-radius:6px}
.tc-kind{font-size:14px}
.tcard .btns{margin-top:auto}
.st{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;border:2px solid var(--line)}
.st-new{background:#fff}.st-work{background:#FFF3BF}.st-done{background:#B2F2D6}

/* ---------- учимся ---------- */
.back{display:inline-block;margin-bottom:10px;font-weight:700;text-decoration:none;color:var(--mute)}
.learnhead{display:flex;flex-direction:column;gap:14px}
.learnhead .tag{color:#fff}
.idea{position:relative;border-left:14px solid var(--dc);padding:20px 24px}
.ideat{font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.25;max-width:960px}
.tipn{position:absolute;right:18px;bottom:-22px;background:var(--paper);padding:0 8px;color:var(--red);font-size:30px}
.steps3{margin-top:16px}
.step{position:relative;padding-top:26px;font-size:19px}
.step .sn{position:absolute;top:-18px;left:14px;width:40px;height:40px;border-radius:50%;background:var(--dc);color:#fff;border:3px solid var(--line);display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:22px}
.progdots{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.progdots i{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:#fff}
.progdots i.cur{background:var(--yellow)}.progdots i.ok{background:var(--green);color:#fff}.progdots i.no{background:var(--red);color:#fff}.progdots i.ans{background:var(--ink);color:#fff}
.trhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.trhead h2{font-size:clamp(28px,4vw,48px)}
.done{text-align:center;padding:30px}
.done .btns{justify-content:center;margin-top:16px}
.stars{font-size:72px;letter-spacing:8px;color:#E6DFCF;-webkit-text-stroke:3px var(--line)}
.stars .on{color:var(--yellow)}

/* ---------- банк ---------- */
.filters{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{padding:7px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:700;font-size:14px;min-height:40px}
.chips button.on{background:var(--ink);color:#fff}
.banklist{display:flex;flex-direction:column;gap:14px}
.bankrow{background:#fff;border:3px solid var(--line);border-radius:14px;padding:12px}
.bh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bh b{font-size:19px}
.bl{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.bll{min-width:130px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.bll .lvl{margin:0}
.bnum{font-family:var(--f-mono);font-weight:700;font-size:15px;padding:6px 8px;border:2px solid var(--line);border-radius:8px;text-decoration:none;background:var(--paper);min-width:52px;text-align:center}
.bnum:hover{background:var(--yellow)}
.bnav{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bno{font-size:28px}

/* ---------- проверочная ---------- */
.testcfg{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-top:16px}
.sel{font:inherit;font-size:17px;padding:10px 12px;border:3px solid var(--line);border-radius:12px;background:#fff;max-width:100%}
.timer{font-size:34px;min-width:80px}
.timer.warn{color:var(--red);animation:pulse 1s infinite}
.bigscore{font-size:1.3em;color:var(--blue)}
.treview{margin-top:18px}
.trv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;text-align:left;font-size:16px;border-left:12px solid var(--green)}
.trv.no{border-left-color:var(--red)}
.trv span{margin-left:auto;font-size:24px;font-weight:700}
.trv small{width:100%;color:var(--mute)}

/* ---------- результаты ---------- */
.namein{font:inherit;font-size:20px;padding:8px 12px;border:3px solid var(--line);border-radius:12px;min-width:240px;background:#fff}
.kpi{font-family:var(--f-disp);font-weight:700;font-size:56px;line-height:1}
.kpi small{font-size:.45em;color:var(--mute)}
.mist{display:flex;gap:8px;align-items:center;flex-wrap:wrap;text-decoration:none;border-left:10px solid var(--red)}
.mist small{width:100%}
.mastery{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:minmax(150px,1.4fr) auto minmax(80px,1fr) 60px;gap:10px;align-items:center}
.mrow .bar{margin:0;max-width:none}
.ttab{width:100%;border-collapse:collapse;font-size:16px}
.ttab th,.ttab td{text-align:left;padding:6px 8px;border-bottom:2px solid #E6DFCF}

/* ---------- доска ---------- */
.boardbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;position:sticky;top:64px;z-index:10;background:var(--paper)}
.timerbox,.teams{display:flex;gap:6px;align-items:center}
.boardmode .task{font-size:120%}
.boardmode .qtext{font-size:clamp(24px,2.6vw,34px)}
.boardmode .page{max-width:1500px}

/* ---------- ПОРТАЛ ---------- */
.phero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:3px solid #000}
.phero .in{position:relative;max-width:1320px;margin:0 auto;padding:clamp(30px,6vw,80px) 16px clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:18px}
.phero h1 .hand{color:var(--yellow);font-size:.7em}
.phero .eyebrow{color:#AEB4C6}
.phero .tag{background:var(--yellow);color:var(--ink)}
.phero .lead{color:#E9E4D8}
.phero .deco{background:#fff;opacity:.09}
.phero .hand.u::after{filter:invert(1)}
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:-50px;position:relative;z-index:2}
.gcard{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);border:3px solid var(--line);border-radius:22px;box-shadow:8px 8px 0 var(--line);padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-height:250px;transition:transform .15s}
.gcard:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--line)}
.gcard .num{font-family:var(--f-disp);font-weight:700;font-size:110px;line-height:.85}
.gcard .cl{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;font-size:26px;font-variation-settings:"wdth" 75}
.gcard .hand{font-size:28px;color:var(--acc)}
.gcard .go{margin-top:auto;font-weight:700;font-size:15px;opacity:.85}
.gcard .deco{width:80%;height:80%;right:-15%;top:-10%;opacity:.16}
.how{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.how h3{font-size:26px;margin:4px 0 6px}
.how p{font-size:16px}
.how .card{border-top:10px solid var(--c)}
.how .ic{font-size:34px}
.dirlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.dirlist .di{display:flex;gap:10px;align-items:flex-start;background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px 12px}
.dirlist .di b{flex:none;width:34px;height:34px;border-radius:10px;background:var(--dc);color:#fff;display:grid;place-items:center;border:3px solid var(--line)}
.dirlist .di small{display:block;color:var(--mute);font-size:14px}
.gradeline{display:flex;gap:3px;margin-top:4px}
.gradeline i{width:22px;height:8px;border-radius:4px;background:#E6DFCF}
.gradeline i.on{background:var(--dc)}
.teacher{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:stretch}
.note{border-left:12px solid var(--orange)}
.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.srcs a{text-decoration:none}

@media (max-width:900px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher{grid-template-columns:1fr}}
@media (max-width:640px){.gcards{grid-template-columns:1fr 1fr;gap:12px}.gcard{min-height:190px;padding:14px}.gcard .num{font-size:76px}.mrow{grid-template-columns:1fr auto;}.mrow .bar,.mrow .mute{display:none}.boardbar{top:0;position:static}}

/* ---------- платный доступ: замки, аккаунт, тарифы ---------- */
.acclink{color:var(--paper);text-decoration:none;font-weight:700;font-size:14px;padding:6px 10px;border:2px solid #2A2F3E;border-radius:9px;white-space:nowrap}
.acclink:hover{border-color:var(--g)}
.tcard.locked{background:#F3EEE2;border-top-color:#B6AE9B}
.tcard.locked h3{color:#7A7466}
.freenote{background:rgba(255,255,255,.85);color:var(--ink);border:3px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:600;font-size:16px;max-width:760px}
.freenote a{font-weight:700}
.lockbox{text-align:center;max-width:760px;margin:30px auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px}
.bnum.lockn{width:auto;color:var(--mute);background:#F3EEE2}
.lockchip{padding:7px 12px;border:2px dashed #B6AE9B;border-radius:999px;font-weight:700;font-size:14px;color:#8A8474;text-decoration:none}
.acc{display:flex;flex-direction:column;gap:18px;margin-top:16px}
.accst.on{border-left:12px solid var(--green)}
.warnbox{background:#FFF3BF;border-left:12px solid var(--orange)}
.devs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.dev{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:2px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--paper)}
.dev.me{background:#D3F9E8}
.dev .rm{margin-left:auto}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:10px 0 16px}
.plan .prow{display:flex;justify-content:space-between;border-bottom:2px dashed #E6DFCF;padding:8px 0;font-size:19px}
.plan .prow b{font-family:var(--f-disp);font-size:24px}
.paybox ol{margin:8px 0 8px 22px;display:flex;flex-direction:column;gap:6px}
.loginbox form{display:flex;flex-direction:column;gap:10px}
.loginbox label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:15px}
.loginbox .namein{min-width:0;width:100%}
.loginbox .agree{flex-direction:row;align-items:flex-start;gap:8px;font-weight:500}
.loginbox .agree input{width:22px;height:22px;flex:none}
.admintab{width:100%;border-collapse:collapse;font-size:14px}
.admintab th,.admintab td{border-bottom:1px solid #E6DFCF;padding:6px;text-align:left;vertical-align:top}
.admintab td .btns{gap:4px}
.admintab .btn.sm{min-height:34px;padding:3px 8px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:640px){.plans{grid-template-columns:1fr}.acclink{order:5}}
.reqbox h3{margin-bottom:8px}
.reqpending{background:#FFF3BF;border:3px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px}
.reqpending ol{margin:8px 0 0 22px;display:flex;flex-direction:column;gap:6px}
.reqsum{font-family:var(--f-disp);font-weight:700;font-size:44px;line-height:1}
.reqform{display:flex;flex-direction:column;gap:12px}
.reqform label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:15px}
.reqform .namein{min-width:0;width:100%}
.planpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.planpick .pp{flex-direction:row!important;align-items:flex-start;gap:8px!important;border:2px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;font-weight:500!important;cursor:pointer}
.planpick .pp:has(input:checked){background:#FFF3BF;outline:3px solid var(--ink)}
.promoinfo .good{color:#0B7A55;font-weight:600}.promoinfo .bad{color:var(--red);font-weight:600}
@media (max-width:640px){.planpick{grid-template-columns:1fr}}