/* shared styles for flow (scrolling) pages: course / lesson / test */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0B1220;--tx:#E6ECF5;--dim:#7686a3;--acc:#8AD4EA;--line:rgba(230,236,245,.14);--a:#7FA8FF}
html{background:var(--t-bg0)}
body{min-height:100vh;color:var(--tx);font-family:var(--fb);background:radial-gradient(1100px 700px at 50% 0%,var(--t-bg1) 0%,var(--bg) 60%,var(--t-bg0) 100%) fixed}
a{color:inherit;text-decoration:none;cursor:pointer}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ic{display:block;flex:none}
.top{position:sticky;top:0;height:64px;display:flex;align-items:center;padding:0 40px;gap:8px;font:500 12.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);z-index:50;background:rgba(var(--t-pnr),.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--t-ink),.06)}
.top .home{width:38px;height:38px;display:grid;place-items:center;color:var(--tx);margin-right:24px}
.top nav{display:flex;gap:30px}.top nav a{display:flex;align-items:center;gap:8px;transition:color .2s;position:relative}
.top nav a:hover,.top nav a.on{color:var(--tx)}.top nav .ic{opacity:.7}
.rt{margin-left:auto;display:flex;align-items:center;gap:18px}
.ib{position:relative;color:var(--tx)}.ib b{position:absolute;top:-7px;right:-10px;min-width:16px;height:16px;border-radius:calc(8px*var(--t-rk,1));background:var(--acc);color:var(--onacc);font:600 10px var(--fm);display:grid;place-items:center;padding:0 4px}
.pts{display:flex;align-items:center;gap:7px;color:var(--tx);letter-spacing:.06em;font-size:14px}
.av{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--t-ink),.25);display:grid;place-items:center;color:var(--tx)}
.bnav{display:none}
.ov2{font:500 11px var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);display:flex;gap:14px}.ov2 span{color:var(--dim)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--tx);border:1px solid var(--line);padding:6px 10px;border-radius:calc(14px*var(--t-rk,1));display:flex;align-items:center;gap:6px}
.btns{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px 0 18px;border-radius:calc(24px*var(--t-rk,1));font:600 13px var(--fm);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:.2s}
.b2{background:var(--acc);color:var(--onacc);box-shadow:0 0 24px rgba(var(--t-accr),.35)}.b2:hover{box-shadow:0 0 36px rgba(var(--t-accr),.6)}
.b1{border:1px solid rgba(var(--t-ink),.35);color:var(--tx)}.b1:hover{border-color:var(--tx)}
.crumb{display:flex;align-items:center;gap:10px;font:500 11px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.crumb a:hover{color:var(--tx)}.crumb b{color:var(--tx);font-weight:500}
.pbar{height:4px;border-radius:2px;background:rgba(var(--t-ink),.1);overflow:hidden}.pbar i{display:block;height:100%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
@media (max-width:640px){
 .top{height:54px;padding:0 18px}.top nav{display:none}.top .home{margin-right:auto}.rt{gap:16px}.pts{font-size:13px}.av{width:30px;height:30px}
 .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:66px;align-items:center;justify-content:space-around;padding:0 6px;border-top:1px solid var(--line);font:500 9px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:rgba(var(--t-bgr),.95);z-index:60}
 .bnav a{display:flex;flex-direction:column;align-items:center;gap:5px}.bnav .ic{color:var(--tx)}
 body{padding-bottom:80px}
}

/* fluid layout safety: grid/flex children may shrink below their content width (no sideways scroll) */
.wrap>*,.sec>*{min-width:0}
@media (max-width:1100px){.wrap>*>*{min-width:0}p{overflow-wrap:break-word}}
@media (max-width:640px){
 html,body{overflow-x:hidden}
 .tabs,.seg{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}.tabs::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}.tabs>a,.seg>a{flex:none}
 .btns,.bal,.pn,.tx .row,.stats{flex-wrap:wrap}.btns{gap:10px}
 .pn{gap:12px}.pn .btn{white-space:normal;height:auto;min-height:44px;padding-top:8px;padding-bottom:8px}
 .stats>*{flex:1 1 33%;min-width:0}
 .lvl{left:16px!important;right:16px;flex-wrap:wrap;gap:12px!important}
 .sim>*{min-width:0}
 .feat .art{overflow:hidden}
}