/* Game shell, Brain Gym hub and My Progress. Builds on the theme's tokens and .gstage, .gscr, .keypad, .howto components. */

/* ---------- shell ---------- */
.tsg{grid-template-rows:auto 1fr;touch-action:manipulation}
.tsg:has(>.tsg-bar[hidden]){grid-template-rows:1fr}
.tsg .gscr{min-width:0}
.tsg-start,.tsg-result{outline:0}
.tsg .gbtn{width:56px;height:56px}
.tsg .gbtn:focus-visible,.tsg button:focus-visible{outline:3px solid var(--ts-gold-400);outline-offset:2px}
.tsg .gbtn[aria-pressed="true"]{background:rgba(245,183,0,.25)}
.tsg .chip{min-height:48px;padding-inline:16px;cursor:pointer}
.tsg .chip[aria-pressed="true"]{background:var(--ts-gold-400);color:var(--ts-ink)}
.tsg .bigplay{min-width:240px}
.tsg-startbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;width:100%}
.tsg-sora,.tsg .tsg-sora svg{display:block;width:110px;height:110px}
.tsg-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.tsg-bar[hidden]{display:none}
.tsg-stats{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,24px);font:700 1rem/1.1 var(--f-body);color:#fff}
.tsg-stats span{display:inline-flex;align-items:center;gap:6px}
.tsg-stats .ico{color:var(--ts-gold-400)}
.tsg-lvl{font-size:.85rem;color:var(--on-dark-muted)}
.tsg-tools{display:flex;gap:6px;justify-content:center;flex:1 1 auto}
.tsg-pause-ic{display:block;width:14px;height:18px;border-inline:5px solid currentColor}
.tsg-play{padding:var(--space-3);align-content:stretch}
.tsg-stage{display:grid;width:100%;min-height:0}
.tsg-center{display:grid;justify-items:center;align-content:center;gap:var(--space-3);width:100%}
.tsg-center[hidden]{display:none}
.tsg-q{color:#fff;font-weight:700}
.tsg-count{align-content:center;min-height:320px}
.tsg-cd{font:800 clamp(6rem,30vw,10rem)/1 var(--font-num-en);color:var(--ts-gold-400);animation:pop .5s var(--ease-bead)}
.tsg-keypad button{min-height:56px}
.tsg .gfb{display:flex;align-items:center;justify-content:center;gap:6px;min-height:1.6em}
.tsg .gfb.ok{color:#6FD38A}
.tsg .gfb.no{color:#FF9EA1}
.tsg-paused{position:absolute;inset:0;z-index:5;display:grid;align-content:center;justify-items:center;gap:var(--space-4);padding:var(--space-5);background:rgba(10,18,48,.97);text-align:center}
.tsg-paused[hidden]{display:none}
.tsg-paused h2{color:#fff}
.tsg-more{width:min(100%,460px);text-align:center;color:var(--on-dark-muted)}
.tsg-more summary{min-height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;color:#fff}
.tsg-settings{display:grid;gap:var(--space-3);padding-block:var(--space-3)}
.tsg-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;color:#fff}
.tsg-earn{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tsg-earn .chip{cursor:default;min-height:36px}
.tsg-result .rnums{flex-wrap:wrap}
.tsg .rstars .ico:not(.on){opacity:.5}
.tsg-result .tsg-sora,.tsg-result .tsg-sora svg{width:96px;height:96px}
.tsg-full{position:fixed;inset:0;z-index:190;border-radius:0;min-height:100svh;height:100svh;overflow:auto;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
.tsg:fullscreen{overflow:auto}
body.tsg-lock{overflow:hidden}
@media (max-height:520px) and (orientation:landscape){
  .tsg-center{grid-template-columns:1fr 1fr;align-items:center}
  .tsg-center>.fa-progress,.tsg-center>.flash,.tsg-center>.sm-track{grid-column:1/-1}
  .tsg-keypad button{min-height:48px}
  .tsg-sora,.tsg .tsg-sora svg{width:72px;height:72px}
}

/* speed math */
.sm-track{position:relative;width:min(100%,460px);height:44px;margin-block-end:var(--space-2);border-radius:var(--radius-pill);background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 14px,transparent 14px 28px),rgba(255,255,255,.06)}
.sm-runner{position:absolute;top:-14px;inset-inline-start:0;margin-inline-start:-16px;transition:inset-inline-start var(--dur-medium) var(--ease-standard)}
.sm-runner .tsg-sora,.sm-runner .tsg-sora svg{width:60px;height:60px}
[dir="rtl"] .sm-runner svg{transform:scaleX(-1)}
.sm-flag{position:absolute;inset-inline-end:8px;top:8px;width:28px;height:28px;background:conic-gradient(#fff 25%,#141826 0 50%,#fff 0 75%,#141826 0) 0 0/14px 14px;border-radius:4px}
.sm-q{font:800 clamp(2.4rem,10vw,3.6rem)/1.1 var(--font-num-en);color:#fff}
@media (prefers-reduced-motion:reduce){.sm-runner{transition:none}}

/* ---------- player chip, avatars, dialog ---------- */
.tsg-chip{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:4px 16px 4px 6px;border:0;border-radius:var(--radius-pill);background:#fff;color:#1B2A5E;box-shadow:var(--shadow-md);cursor:pointer;text-align:start}
[dir="rtl"] .tsg-chip{padding:4px 6px 4px 16px}
.tsg-chip-t{display:grid;gap:2px}
.tsg-chip-t b{font:800 .95rem/1.1 var(--f-head)}
.tsg-chip-t small{display:flex;align-items:center;gap:4px;font:600 .75rem/1 var(--f-body);color:#5B6275}
.tsg-chip .ico{color:#D7141A}
.tsg-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--ts-cream);flex:none}
.tsg-av .tsg-sora,.tsg-av .tsg-sora svg{width:42px;height:42px}
.tsg-av-celebrating{background:#FFF0B8}.tsg-av-flying{background:#DCEBFF}.tsg-av-pointing{background:#DDF3E3}.tsg-av-thinking{background:#FDE1E2}.tsg-av-sleeping{background:#E6E3F7}
.tsg-dialog{width:min(92vw,420px);border:0;border-radius:var(--radius-xl);padding:var(--space-5);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
.tsg-dialog::backdrop{background:rgba(10,18,48,.6)}
.tsg-dialog h2{font-size:var(--fs-h4);margin-block-end:var(--space-3)}
.tsg-dialog label{display:block;font-weight:700;margin-block-end:6px}
.tsg-input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font:inherit}
.tsg-av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-block:var(--space-4)}
.tsg-av-pick{display:grid;place-items:center;min-height:72px;border:3px solid transparent;border-radius:var(--radius-lg);background:var(--surface-sunken);cursor:pointer}
.tsg-av-pick[aria-pressed="true"]{border-color:var(--ts-red-500)}
.tsg-av-pick .tsg-av{width:60px;height:60px}
.tsg-av-pick .tsg-sora,.tsg-av-pick .tsg-sora svg{width:56px;height:56px}
.tsg-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- hub ---------- */
.gy-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:calc(var(--header-h) + 24px) var(--space-7);background:radial-gradient(55% 60% at 90% 10%,color-mix(in srgb,var(--ts-gold-400) 28%,transparent),transparent),radial-gradient(45% 50% at 5% 95%,color-mix(in srgb,var(--ts-green-600) 16%,transparent),transparent),var(--bg-warm)}
.gy-hero h1{font-size:var(--fs-display)}
.gy-hero .art{position:relative;display:grid;place-items:center}
.gy-hero .art .sora{width:clamp(160px,30vw,280px);height:auto;animation:hover 5s ease-in-out infinite}
.gy-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gy-streak{display:flex;align-items:center;gap:6px;font-weight:700}
.gy-tabs{display:flex;gap:8px;overflow-x:auto;padding-block:4px;scrollbar-width:thin}
.gy-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:56px;padding-inline:16px 18px;border:2px solid transparent;border-radius:var(--radius-pill);background:var(--c-tint,var(--ts-navy-50));color:var(--heading);font:700 .92rem/1.1 var(--f-head);cursor:pointer}
.gy-tab svg{width:34px;height:34px;flex:none}
.gy-tab[aria-selected="true"]{border-color:var(--c,var(--heading));box-shadow:var(--shadow-md)}
.gy-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gy-prog-link{font-weight:700}
.gy-prog-link[hidden]{display:none}
.game .tags{display:flex;gap:6px;flex-wrap:wrap}
.game .best{display:flex;gap:2px;min-height:18px;color:var(--line)}
.game .best .ico.on{color:var(--ts-gold-400)}
.game[hidden]{display:none}
.daily .ill svg{width:100%;height:auto}

/* ---------- my progress ---------- */
.tsp{display:grid;gap:var(--space-6)}
.tsp-card{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;background:var(--bg-warm)}
.tsp-card>.tsg-av{width:96px;height:96px}
.tsp-card .tsg-sora,.tsp-card .tsg-sora svg{width:88px;height:88px}
.tsp-card>.stack{flex:1 1 220px}
.tsp-bar{height:14px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.tsp-bar i{display:block;height:100%;background:var(--ts-gold-400)}
.tsp-sec{display:grid;gap:var(--space-3)}
.tsp-sec h2{font-size:var(--fs-h4)}
.tsp-sec>.btn{justify-self:start}
.tsp-streak .num{font-size:1.6rem;color:var(--ts-red-500)}
.tsp-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:460px}
.tsp-day{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--surface-sunken);color:var(--text-muted);font:700 .85rem/1 var(--f-body)}
.tsp-day .ico{position:absolute;inset-block-start:3px;inset-inline-end:3px;width:12px;height:12px}
.tsp-day.on{background:var(--ts-green-50);color:var(--heading)}
.tsp-day.daily{background:var(--ts-gold-50);color:var(--heading)}
.tsp-day.today{outline:2px solid var(--ts-red-500)}
.tsp-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tsp-table{overflow-x:auto}
.tsp-table table{width:100%;border-collapse:collapse;min-width:480px}
.tsp-table th,.tsp-table td{padding:10px;border-bottom:1px solid var(--line);text-align:start}
.tsp-stars .ico{color:var(--line)}
.tsp-stars .ico.on{color:var(--ts-gold-400)}

/* ---------- menus ---------- */
.tsg-menu{display:grid;gap:var(--space-3);width:min(100%,640px);justify-items:center}
.tsg-menu h3{color:#fff;font-size:1.05rem}
.tsg-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;width:100%}
.tsg-mode{display:grid;justify-items:center;align-content:center;gap:6px;min-height:72px;padding:10px;border:2px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);background:rgba(255,255,255,.07);color:#fff;font:700 .95rem/1.25 var(--f-head);cursor:pointer}
.tsg-mode:hover{background:rgba(255,255,255,.14)}
.tsg-mode small{font:600 .75rem/1.2 var(--f-body);color:var(--on-dark-muted)}
.tsg-mode[disabled]{opacity:.5;cursor:default}

/* ---------- soroban ---------- */
.sbk{display:grid;gap:var(--space-3);justify-items:center;align-content:start;width:100%}
.sbk .lab-sb .sb-value{color:#fff}
.sbk.no-value .sb-value{visibility:hidden;height:0;min-height:0;overflow:hidden}
.sbk-hide{display:none}
.sb-vals{display:flex;direction:ltr;gap:calc(var(--bw) * .22);padding-inline:calc(var(--bw) * .32)}
.sb-vals b{width:var(--bw);text-align:center;font:700 1rem/1.2 var(--font-num-en);color:var(--ts-gold-400)}
.sbk-q{font:800 clamp(1.8rem,1.2rem + 3vw,3rem)/1.15 var(--font-num-en);color:#fff}
.sbk-tape{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;direction:ltr;min-height:44px}
.sbk-tape b{min-width:48px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:800 1.3rem/1.2 var(--font-num-en);text-align:center}
.sbk-tape b:last-child{background:var(--ts-gold-400);color:var(--ts-ink)}
.sbk-rule{padding:8px 14px;border-radius:12px;background:rgba(245,183,0,.15);color:#fff;font-weight:700}
.sbk-rule[hidden]{display:none}
.sbk-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sbk-mental{font:800 clamp(4rem,20vw,7rem)/1 var(--font-num-en);color:#fff;min-height:1.1em;direction:ltr}

/* ---------- times table ---------- */
.tt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:100%}
.tt-card{display:grid;gap:6px;justify-items:center;min-height:96px;padding:10px;border:0;border-radius:var(--radius-lg);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.tt-card b{font:800 1.5rem/1 var(--font-num-en)}
.tt-card small{font:600 .75rem/1.2 var(--f-body);color:var(--on-dark-muted)}
.tt-dots{display:flex;gap:3px;direction:ltr}
.tt-dots i{width:9px;height:6px;background:rgba(255,255,255,.2);clip-path:polygon(0 50%,20% 0,80% 0,100% 50%,80% 100%,20% 100%)}
.tt-dots i.on{background:var(--ts-gold-400)}
.tt-q{font:800 clamp(2.4rem,10vw,3.6rem)/1.1 var(--font-num-en);color:#fff}
.tt-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,340px)}
.tt-choices button{min-height:64px;border:0;border-radius:var(--radius-md);background:rgba(255,255,255,.1);color:#fff;font:800 1.5rem/1 var(--font-num-en);cursor:pointer}
.tt-choices button.ok{background:var(--ts-green-700)}
.tt-choices button.no{background:#8E1A1E}
.tt-array{display:grid;grid-template-columns:repeat(var(--n),12px);gap:4px;direction:ltr}
.tt-array i{width:12px;height:12px;border-radius:50%;background:var(--ts-gold-400)}
.tt-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px;width:100%;max-width:640px;direction:ltr}
.tt-grid button,.tt-grid span{display:grid;place-items:center;aspect-ratio:1;min-width:0;border:0;border-radius:4px;background:rgba(255,255,255,.08);color:#fff;font:700 clamp(.6rem,2.4vw,.95rem)/1 var(--font-num-en);padding:0}
.tt-grid span{background:none;color:var(--ts-gold-400)}
.tt-grid button.pair{background:var(--ts-gold-400);color:var(--ts-ink);outline:2px solid #fff}
.tt-grid button.line{background:rgba(255,255,255,.2)}
.tt-print{display:none}
@media print{
  body.tsg-printing>*:not(.tt-print){display:none!important}
  body.tsg-printing .tt-print{display:block;color:#000}
  .tt-print table{border-collapse:collapse;width:100%}
  .tt-print td,.tt-print th{border:1px solid #666;padding:6px;text-align:center;font-size:14px}
}

/* ---------- memory ---------- */
.mm-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.mm-pack{display:grid;justify-items:center;gap:4px;padding:8px;min-height:112px;border:0;border-radius:var(--radius-lg);background:var(--pc);color:#1B2A5E;font:800 .85rem/1.2 var(--f-head);cursor:pointer}
.mm-pack img,.mm-pack .mm-face{width:52px;height:52px}
.mm-pack small{font:700 .72rem/1 var(--f-body)}
.mm-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.mm-lv{display:grid;justify-items:center;gap:4px;min-height:72px;border:0;border-radius:var(--radius-md);background:rgba(255,255,255,.1);color:#fff;font:800 1.1rem/1 var(--font-num-en);cursor:pointer}
.mm-lv[disabled]{opacity:.45;cursor:default}
.mm-lv small{display:flex;gap:1px;color:rgba(255,255,255,.3)}
.mm-lv small .on{color:var(--ts-gold-400)}
.mm-lv small .ico{width:12px;height:12px}
.mm-board{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:4px;width:100%;max-width:calc(var(--c) * 104px);margin-inline:auto;perspective:800px}
.mm-card{position:relative;aspect-ratio:1;min-height:0;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .35s var(--ease-standard)}
.mm-card.up{transform:rotateY(180deg)}
.mm-card>span{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mm-back{background:linear-gradient(145deg,#D7141A,#8E1014);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);color:#fff}
.mm-back .ico{width:42%;height:42%}
.mm-front{background:#fff;transform:rotateY(180deg);box-shadow:inset 0 0 0 3px #D5D9E2}
.mm-face{display:block;width:84%;height:84%}
.mm-face svg{display:block;width:100%;height:100%}
.mm-card.done .mm-front{box-shadow:inset 0 0 0 4px #1E8B3A}
.mm-card.done .mm-front::after{content:"✓";position:absolute;inset-block-start:2px;inset-inline-end:5px;font:800 .9rem/1 sans-serif;color:#1E8B3A}
.mm-hintc .mm-back{box-shadow:inset 0 0 0 4px var(--ts-gold-400)}
.mm-txt{font:800 clamp(1.1rem,6vw,2.6rem)/1 var(--font-num-en);color:#1B2A5E}
.mm-note{color:#fff;font-weight:700;min-height:1.5em;text-align:center}
.mm-grid{display:grid;grid-template-columns:repeat(var(--c),minmax(56px,84px));gap:6px;justify-content:center}
.mm-cell{aspect-ratio:1;min-height:56px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:var(--ts-ink);cursor:pointer;display:grid;place-items:center}
.mm-cell.lit{background:var(--ts-gold-400)}
.mm-cell.ok{background:var(--ts-green-700);color:#fff}
.mm-cell.no{background:#8E1A1E;color:#fff}
.mm-seq{font:800 clamp(4rem,20vw,7rem)/1 var(--font-num-en);color:var(--ts-gold-400);min-height:1.1em}
.mm-pal{display:grid;justify-items:center;gap:var(--space-3);color:#fff;text-align:center}
.mm-pal .mm-face{width:120px;height:120px;background:#fff;border-radius:20px;padding:10px}
.mm-pal-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;width:min(100%,420px)}
.mm-pal-opts button{min-height:72px;padding:6px;border:0;border-radius:14px;background:#fff;cursor:pointer}
@media (prefers-reduced-motion:reduce){.mm-card{transition:none}}

/* ---------- sudoku and math cages ---------- */
.sd-wrap{display:grid;gap:var(--space-2);justify-items:center;align-content:start;width:100%}
.sd-board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,560px,calc(100svh - 300px));min-width:min(100%,300px);border:3px solid #1B2A5E;border-radius:8px;overflow:hidden;background:#fff}
.sd-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;border-inline-end:1px solid #C9CFDD;border-block-end:1px solid #C9CFDD;background:#fff;color:#1B74C9;font:700 clamp(1rem,5vw,1.6rem)/1 var(--font-num-en);cursor:pointer}
.sd-cell.br{border-inline-end:2.5px solid #1B2A5E}
.sd-cell.bb{border-block-end:2.5px solid #1B2A5E}
.sd-cell.given{color:#1B2A5E}
.sd-cell.zone{background:#EEF1F8}
.sd-cell.same{background:#FFE9A8}
.sd-cell.sel{background:#FFD76A;box-shadow:inset 0 0 0 2px #1B2A5E}
.sd-cell.mark{background:#CFE9FA}
.sd-cell.target{background:#BDEBC9;box-shadow:inset 0 0 0 3px #1E8B3A}
.sd-cell.drop{background:#FDD9DA;box-shadow:inset 0 0 0 2px #D7141A}
.sd-cell.wrong{color:#D7141A;text-decoration:underline wavy}
.sd-notes{display:grid;grid-template-columns:repeat(var(--m),1fr);width:100%;height:100%;font:600 clamp(.45rem,1.7vw,.7rem)/1 var(--font-num-en);color:#5B6275}
.sd-notes i{display:grid;place-items:center;font-style:normal}
.sd-night .sd-board,.sd-night .sd-cell{background:#0F1A3D}
.sd-night .sd-cell{color:#8FC7FF;border-color:#2E3B70}
.sd-night .sd-cell.given{color:#FFF8F0}
.sd-night .sd-cell.br,.sd-night .sd-cell.bb{border-color:#8A93AE}
.sd-night .sd-cell.zone{background:#1B2A5E}
.sd-night .sd-cell.same{background:#5A4A12}
.sd-night .sd-cell.sel{background:#7A6318;box-shadow:inset 0 0 0 2px #FFF8F0}
.sd-night .sd-cell.mark{background:#1D4A6E}
.sd-night .sd-cell.target{background:#11532A}
.sd-night .sd-cell.drop{background:#5C1E22}
.sd-night .sd-cell.wrong{color:#FF9EA1}
.sd-night .sd-notes{color:#B4BCD3}
.sd-tools{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sd-tool{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding-inline:12px;border:0;border-radius:var(--radius-md);background:rgba(255,255,255,.1);color:#fff;font:700 .85rem/1 var(--f-body);cursor:pointer}
.sd-tool[aria-pressed="true"]{background:var(--ts-gold-400);color:var(--ts-ink)}
.sd-pad{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;width:min(100%,560px)}
.sd-pad[hidden]{display:none}
.sd-pad button{display:grid;place-items:center;min-height:56px;padding:2px 0;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.sd-pad button:disabled{opacity:.3;cursor:default}
.sd-pad b{font:800 1.35rem/1 var(--font-num-en)}
.sd-pad small{font:600 .65rem/1 var(--font-num-en);color:var(--on-dark-muted)}
.sd-hint{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:min(100%,560px);padding:8px 12px;border-radius:12px;background:rgba(245,183,0,.15);color:#fff;font-weight:600;text-align:center}
.sd-hint[hidden]{display:none}
.sd-txt{color:#fff;max-width:52ch;text-align:center}
.tsg-table{width:100%;overflow-x:auto;color:#fff}
.tsg-table table{width:100%;border-collapse:collapse;font-size:.85rem}
.tsg-table th,.tsg-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,.15);text-align:center}

.kk-board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,560px,calc(100svh - 300px));min-width:min(100%,300px);background:#fff;border:3px solid #1B2A5E;border-radius:8px;overflow:hidden}
.kk-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:.5px solid #D5D9E2;background:#fff;color:#1B74C9;font:700 clamp(1rem,5vw,1.7rem)/1 var(--font-num-en);cursor:pointer}
.kk-cell.et{border-top:2.5px solid #1B2A5E}.kk-cell.er{border-right:2.5px solid #1B2A5E}.kk-cell.eb{border-bottom:2.5px solid #1B2A5E}.kk-cell.el{border-left:2.5px solid #1B2A5E}
.kk-cell.zone{background:#EEF1F8}.kk-cell.same{background:#FFE9A8}.kk-cell.sel{background:#FFD76A}
.kk-cell.wrong{color:#D7141A;background:#FDD9DA}
.kk-lab{position:absolute;top:2px;left:3px;font:800 clamp(.55rem,2vw,.85rem)/1 var(--font-num-en);color:#1B2A5E}
.kk-notes{font:600 clamp(.45rem,1.6vw,.68rem)/1.1 var(--font-num-en);color:#5B6275;padding-top:12px}
.kk-kids .kk-cell b{animation:pop .3s var(--ease-bead)}
.kk-group{width:100%;display:grid;gap:6px}
.kk-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.kk-tb{position:relative;display:grid;justify-items:center;gap:2px;min-height:72px;padding:6px;border:0;border-radius:10px;background:#fff;color:#1B2A5E;cursor:pointer;font:700 .7rem/1 var(--font-num-en)}
.kk-tb.done{background:#BDEBC9}
.kk-thumb,.kk-thumb svg{display:block;width:48px;height:48px}
.kk-best{color:#fff;text-align:start;font-weight:600}

/* ---------- vedic ---------- */
.vd-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;width:100%}
.vd-today{display:grid;justify-items:center;gap:8px;width:100%;padding:var(--space-3);border-radius:var(--radius-lg);background:rgba(245,183,0,.15);color:#fff}
.vd-today small{display:flex;align-items:center;gap:4px;color:var(--on-dark-muted)}
.vd-steps{display:grid;gap:6px;margin:0;padding-inline-start:1.4em;color:#fff;font-weight:600;text-align:start;max-width:52ch}
.vd-steps[hidden]{display:none}
.vd-steps li{animation:pop .35s var(--ease-bead)}
.vd-lesson p{color:var(--on-dark-muted)}

/* ---------- rubik's cube ---------- */
.cb-paint{display:grid;gap:var(--space-3);justify-items:center;align-content:start;width:100%}
.cb-view{width:min(100%,420px);display:grid;justify-items:center;gap:8px}
.cb-3d{width:100%;display:grid;justify-items:center}
.cb-3d canvas{display:block;max-width:100%;cursor:grab}
.cb-view.has-3d .cb-net{display:none}
.cb-net{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;width:100%}
.cb-net i{display:grid;place-items:center;aspect-ratio:1;border-radius:3px;font:700 clamp(.5rem,2vw,.8rem)/1 sans-serif;font-style:normal}
.cb-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cb-tab{display:grid;place-items:center;width:48px;height:48px;border:2px solid rgba(255,255,255,.3);border-radius:10px;font:700 1.1rem/1 sans-serif;cursor:pointer}
.cb-tab[aria-pressed="true"]{outline:3px solid var(--ts-gold-400);outline-offset:2px}
.cb-face{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,264px)}
.cb-st{display:grid;place-items:center;aspect-ratio:1;min-height:72px;border:2px solid rgba(255,255,255,.35);border-radius:12px;font:700 1.5rem/1 sans-serif;color:#fff;cursor:pointer}
.cb-st[disabled]{cursor:default;box-shadow:inset 0 0 0 3px rgba(20,24,38,.45)}
.cb-pal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:min(100%,360px)}
.cb-pen{display:grid;place-items:center;min-height:56px;border:3px solid transparent;border-radius:12px;font:700 1.2rem/1 sans-serif;cursor:pointer}
.cb-pen[aria-pressed="true"]{border-color:#fff;outline:3px solid var(--ts-gold-400)}
.cb-counts{color:#fff;font-weight:700}
.cb-move{font:800 clamp(2.2rem,9vw,3.4rem)/1 var(--font-num-en);color:var(--ts-gold-400)}
.cb-speed{color:#fff}
.cb-moves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:min(100%,420px)}
.cb-moves button{min-height:56px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font:800 1.05rem/1 var(--font-num-en);cursor:pointer}
.cb-cam{position:relative;width:min(100%,360px);aspect-ratio:1;overflow:hidden;border-radius:var(--radius-lg);background:#000}
.cb-cam video{width:100%;height:100%;object-fit:cover}
.cb-cam-grid{position:absolute;inset:10%;display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #fff;pointer-events:none}
.cb-cam-grid i{border:1.5px solid rgba(255,255,255,.8)}
.cb-private{color:var(--on-dark-muted);font-size:.85rem;text-align:center}
.cb-scr{color:#fff;font:700 1rem/1.5 var(--font-num-en);text-align:center;max-width:44ch}
.cb-clock{width:min(100%,420px);min-height:170px;border:0;border-radius:var(--radius-xl);background:rgba(255,255,255,.1);color:#fff;font:800 clamp(3rem,16vw,5rem)/1 var(--font-num-en);cursor:pointer}
.cb-clock.wait{background:rgba(245,183,0,.3)}
.cb-clock.go{background:rgba(30,139,58,.45)}
.cb-hist{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:0;padding:0;list-style:none;color:var(--on-dark-muted);font:600 .9rem/1.2 var(--font-num-en)}

/* ---------- little coder ---------- */
.cd-unit{display:grid;gap:8px;width:100%;padding:var(--space-3);border-radius:var(--radius-lg);background:rgba(255,255,255,.05)}
.cd-unit.locked{opacity:.55}
.cd-wrap{display:grid;gap:var(--space-2);justify-items:center;align-content:start;width:100%}
.cd-grid{position:relative;display:grid;grid-template-columns:repeat(var(--c),1fr);width:min(100%,calc(var(--c) * 72px));aspect-ratio:var(--c)/var(--r);border-radius:12px;overflow:hidden;background:#fff}
.cd-grid.shake{animation:shake .4s}
.cd-cell{display:grid;place-items:center;background:#FFF8F0;box-shadow:inset 0 0 0 .5px #D5D9E2;font-style:normal;font-size:clamp(1rem,5vw,1.8rem)}
.cd-cell.wall{background:repeating-linear-gradient(45deg,#1B2A5E 0 6px,#2E428A 6px 12px)}
.cd-cell.goal{background:#BDEBC9}
.cd-cell.obst{background:#FFE9A8}
.cd-hero{position:absolute;display:grid;place-items:center;transition:left .35s var(--ease-standard),top .35s var(--ease-standard);pointer-events:none}
.cd-hero .tsg-sora,.cd-hero .tsg-sora svg{width:100%;height:100%;max-width:64px;max-height:64px}
.cd-dir{position:absolute;inset-block-start:0;inset-inline-end:0;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#D7141A;color:#fff;font:700 .7rem/1 sans-serif;transition:transform .2s}
.cd-editor{display:grid;gap:8px;width:100%}
.cd-palette{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cd-block{display:grid;gap:4px;min-height:56px;min-width:56px;padding:6px 10px;border:0;border-radius:12px;background:#2F7ED8;color:#fff;font:700 .9rem/1.1 var(--f-body);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
button.cd-block{display:inline-flex;align-items:center;gap:6px}
.cd-rep,.cd-until{background:#B8862E}
.cd-ifP,.cd-ifO{background:#8E5BD1}
.cd-call{background:#1E8B3A}
.cd-j{background:#E0603E}
.cd-block.running{outline:4px solid var(--ts-gold-400);outline-offset:1px}
.cd-block:focus-visible{outline:3px solid #fff}
.cd-head{display:flex;align-items:center;gap:6px;min-height:44px}
.cd-ic{font-size:1.4rem;line-height:1}
.cd-x,.cd-count{display:grid;place-items:center;min-width:40px;min-height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.2);color:#fff;font:800 .95rem/1 var(--font-num-en);cursor:pointer}
.cd-x{margin-inline-start:auto}
.cd-slots{display:grid;gap:8px}
.cd-slot{display:grid;gap:4px;min-height:60px;padding:6px;border:2px dashed rgba(255,255,255,.28);border-radius:12px}
.cd-slot.active{border-color:var(--ts-gold-400)}
.cd-slot-l{color:var(--on-dark-muted);font-weight:700}
.cd-block .cd-slot-l{color:#fff}
.cd-empty{align-self:center;justify-self:center;color:var(--on-dark-muted);font-size:.85rem}
.cd-ghost{position:fixed;top:0;left:0;z-index:300;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#2F7ED8;color:#fff;font-size:1.4rem;pointer-events:none}
.cd-code{width:100%;margin:0;padding:10px;border-radius:12px;background:#0A1230;color:#BFE4F7;font:500 .8rem/1.5 ui-monospace,Menlo,Consolas,monospace;overflow:auto;text-align:left}
.cd-code[hidden]{display:none}
.cd-card{display:flex;align-items:center;gap:6px;justify-content:center;padding:var(--space-3);border-radius:var(--radius-lg);background:rgba(255,255,255,.08);color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.cd-hero{transition:none}}

.cd-ic{display:inline-grid;place-items:center;width:28px;height:28px}
.cd-ic svg{display:block;width:100%;height:100%}
.cd-cell svg{width:64%;height:64%;color:#1B2A5E}
.cd-cell.goal svg{color:#1E8B3A}
.cd-cell.obst svg{color:#8A5F36}

/* operation-type chips (Top Soroban, Speed Math) and guided × / ÷ zones on the abacus */
.op-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.op-chips .chip{min-height:48px;min-width:64px;font-weight:800}
.op-chips .chip small{font-weight:700;color:var(--ts-gold-600,#B8860B)}
.sbk-guided .sb-rod.z-a{background:rgba(10,127,194,.16)}
.sbk-guided .sb-rod.z-q{background:rgba(30,139,58,.16)}
.sbk-guided .sb-rod.z-p{background:rgba(245,183,0,.16)}
.sbk-zones{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font:700 .85rem/1.3 var(--f-body)}
.sbk-zones .z{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.sbk-zones .z::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--line)}
.sbk-zones .z-a::before{background:#0A7FC2}.sbk-zones .z-q::before{background:#1E8B3A}.sbk-zones .z-p::before{background:#F5B700}
.sbk-guided .sbk-rule{text-align:center}

/* Top Vida rules library */
.vr{--pc:#3D0A5C;display:grid;gap:var(--space-5);padding:var(--space-5) 0}
.vr-hero{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;padding:var(--space-5);border-radius:var(--radius-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 10%,#fff),#fff);border:2px solid color-mix(in srgb,var(--pc) 20%,transparent)}
.vr-hero h2{color:var(--pc);margin:0}.vr-hero .eyebrow{color:var(--pc)}.vr-hero p{margin:0;max-width:60ch}
.vr-logo{width:clamp(110px,16vw,180px);aspect-ratio:1}
.vr-tools{display:grid;gap:12px}
.vr-chips{display:flex;flex-wrap:wrap;gap:8px}
.vr-chips .chip{min-height:48px}
.vr-chips .chip[aria-pressed="true"]{background:var(--pc);border-color:var(--pc);color:#fff}
.vr-chips small{opacity:.75}
.vr-search input{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font:inherit}
.vr-search input:focus{outline:none;border-color:var(--pc)}
.vr-count{margin:0;font-size:.9rem}
.vr-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vr-card{border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 0 rgba(15,26,61,.04);overflow:hidden}
.vr-card[hidden]{display:none}
.vr-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;border:0;background:none;text-align:start;font:inherit;color:var(--text);cursor:pointer}
.vr-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.vr-n{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--pc);color:#fff;font:800 1rem/1 var(--font-num-en,inherit)}
.vr-t{flex:1;display:grid;gap:2px;font:700 .95rem/1.4 var(--f-head);color:var(--heading)}
.vr-t small{font:600 .75rem/1.2 var(--f-body);color:var(--text-muted)}
.vr-lock{flex:none;color:color-mix(in srgb,var(--pc) 70%,#888)}
.vr-open,.vr-lock.vr-unlocked{flex:none;color:var(--ts-green-600,#1E8B3A)}
.vr-card:not(.is-open) .vr-btn:hover{background:color-mix(in srgb,var(--pc) 5%,#fff)}
.vr-card.is-open{border-color:color-mix(in srgb,var(--ts-green-600,#1E8B3A) 35%,transparent)}
.vr-body{padding:0 16px 14px 66px;font-size:.95rem}
[dir="rtl"] .vr-body{padding:0 66px 14px 16px}
.vr-empty{text-align:center;color:var(--text-muted)}
.vr-modal{width:min(92vw,460px);padding:var(--space-6) var(--space-5) var(--space-5);border:0;border-radius:24px;text-align:center;box-shadow:0 30px 80px rgba(15,26,61,.35)}
.vr-modal::backdrop{background:rgba(15,26,61,.55)}
.vr-modal[open]{display:grid;gap:12px;justify-items:center}
.vr-x{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;font-size:1.6rem;line-height:1}
.vr-modal-logo{width:96px;height:96px}
.vr-modal h2{font-size:1.25rem;color:var(--pc,#3D0A5C);margin:0}
.vr-modal-rule{margin:0;font:700 .85rem/1.4 var(--f-body);color:var(--text-muted)}
.vr-modal-ctas{display:grid;gap:10px;width:100%}
.vr-code{display:grid;gap:8px;width:100%;padding-top:12px;border-top:1px solid var(--line);text-align:start}
.vr-code label{font-weight:700;font-size:.9rem}
.vr-code-row{display:flex;gap:8px}
.vr-code-row input{flex:1;min-height:48px;padding:0 12px;border-radius:12px;border:2px solid var(--line);font:inherit}
.vr-code-msg{margin:0;font-size:.85rem;min-height:1.2em}

/* curriculum trainings (Top Academic program) */
.cq-menu{display:grid;gap:14px;justify-items:center}
.cq-pick{display:grid;gap:6px;justify-items:center;width:100%}
.cq{display:grid;gap:14px;justify-items:center;width:min(100%,680px);margin-inline:auto;padding:8px 4px 16px;text-align:center}
.cq-unit{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--ts-green-50,#E8F5EC);color:var(--ts-green-700,#176B2D);font:700 .8rem/1.3 var(--f-body)}
.cq-text{margin:0;font:800 clamp(1.15rem,1rem + 1vw,1.6rem)/1.5 var(--f-head);color:var(--heading)}
.cq-visual{width:100%;display:grid;place-items:center}
.cq-svg{width:min(100%,340px)}
.cq-visual .cq-svg{width:min(100%,420px)}
.cq-svg svg{display:block;width:100%;height:auto}
.cq-answer{display:grid;gap:12px;justify-items:center;width:100%}
.cq-inrow{display:flex;gap:10px;align-items:center;justify-content:center}
.cq-u{font:800 1.1rem/1 var(--f-head);color:var(--text-muted)}
.cq-choices{display:grid;gap:10px;width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.cq-choices.cq-vis{grid-template-columns:repeat(2,minmax(0,1fr))}
.cq-choice{min-height:60px;padding:12px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font:800 1.15rem/1.3 var(--f-head);color:var(--heading);cursor:pointer;transition:transform var(--dur-micro),border-color var(--dur-micro)}
.cq-choice:hover{border-color:var(--ts-navy-300,#9AA6CF)}
.cq-choice:active{transform:scale(.97)}
.cq-choice:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cq-choice.ok{border-color:var(--ts-green-600,#1E8B3A);background:var(--ts-green-50,#E8F5EC)}
.cq-choice.no{border-color:var(--ts-red-500,#D7141A);background:var(--ts-red-50,#FDECEC)}
.cq-choice .cq-svg{width:100%;max-width:180px;margin-inline:auto}
.cq-frac{display:inline-grid;vertical-align:middle;text-align:center;line-height:1.05;margin:0 .15em;font-family:var(--font-num-en,inherit)}
.cq-frac b{border-bottom:2px solid currentColor;padding:0 .2em}
.cq-frac i{font-style:normal;font-weight:800}
.cq-explain{margin:6px 0 0;font-weight:600;color:var(--text)}
.cq .gfb{display:grid;gap:8px;justify-items:center}
.cq-setclock{display:grid;gap:8px;justify-items:center;width:100%}
.cq-face{width:min(86vw,300px);touch-action:none;cursor:grab}
.cq-read{margin:0;font:800 1.6rem/1 var(--font-num-en,inherit);color:var(--heading)}
.cq-clockbtns{display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.cq-clockbtns .btn{min-width:64px;min-height:48px}
.cq-break{display:grid;gap:8px;width:min(100%,460px);text-align:start}
.cq-break h3{margin:0;font-size:1rem}
.cq-break ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cq-break li{display:grid;grid-template-columns:1fr 90px auto;gap:10px;align-items:center;font-size:.9rem}
.cq-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.cq-bar i{display:block;height:100%;background:var(--ts-green-600,#1E8B3A)}

/* curriculum trainings sit on the dark training stage in both colour modes: light text, white answer cards,
   and every drawing on its own white panel so navy lines stay visible */
.cq,.cq .cq-text,.cq .cq-explain,.cq-break,.cq-break h3{color:var(--on-dark,#FFF8F0)}
.cq-unit{background:rgba(255,255,255,.12);color:#BFF0CF}
.cq-u,.cq-read{color:#fff}
.cq-visual .cq-svg,.cq-setclock .cq-face{background:#fff;border-radius:18px;padding:10px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.cq-choice{background:#fff;color:#1B2A5E;border-color:transparent;box-shadow:0 6px 16px -10px rgba(0,0,0,.6)}
.cq-choice:hover{border-color:#F5B700}
.cq-choice.ok{background:#E8F5EC;border-color:#1E8B3A;color:#145A28}
.cq-choice.no{background:#FDECEC;border-color:#D7141A;color:#8E0E12}
.cq-bar{background:rgba(255,255,255,.18)}
.cq-bar i{background:#4CC46C}
.cq-break .muted{color:rgba(255,248,240,.75)}
.cq .gans{color:#fff}
/* Top Soroban zone legend sits on the dark stage too */
.sbk-zones .z{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--on-dark,#FFF8F0)}
.op-chips .chip small{color:#FFD24D}

/* the bottom bar stays visible while training: full-screen play leaves room for it and sits underneath */
body.playing .tabbar{z-index:200}
@media (max-width:1099px){.tsg-full{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}
.tsg-startbar{flex-wrap:wrap}
.tsg-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font:800 .85rem/1 var(--f-head);text-decoration:none}
.tsg-back:hover,.tsg-back:focus-visible{background:rgba(255,255,255,.2)}
.gbtn-back .ico{width:22px;height:22px}

/* curriculum sections on the start screen (Top Soroban, Flash Anzan, Speed Math): 6 named sections, then their levels */
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:640px;margin-inline:auto}
@media (min-width:600px){.sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sec-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:start;min-height:60px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);color:var(--on-dark,#FFF8F0);cursor:pointer;font:inherit}
.sec-chip[aria-pressed="true"]{background:#F5B700;border-color:#F5B700;color:#1B2A5E}
.sec-chip:focus-visible{outline:3px solid #FFD24D;outline-offset:2px}
.sec-n{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);font:800 .9rem/1 var(--f-head)}
.sec-chip[aria-pressed="true"] .sec-n{background:#1B2A5E;color:#fff}
.sec-t{font:800 .92rem/1.2 var(--f-head)}
.sec-s{font:700 .75rem/1.2 var(--f-body);opacity:.85}
.sec-levels{justify-content:center;flex-wrap:wrap;gap:8px}
.sec-levels .chip{min-height:44px;white-space:normal;text-align:center}
.sec-levels .chip small{font-weight:700;color:#B8860B}
.sec-levels .chip[aria-pressed="true"] small{color:inherit}

/* Top Vida student rules: one group per topic, and the Free / Students tags */
.vr-groups{display:grid;gap:var(--space-5,20px)}
.vr-group[hidden]{display:none}
.vr-group-h{margin:0 0 8px;font:800 1.1rem/1.3 var(--f-head);color:var(--pc,#3D0A5C);display:flex;align-items:center;gap:8px}
.vr-group-h small{font:700 .8rem/1 var(--f-body);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--pc,#3D0A5C) 12%,#fff)}
.vr-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font:800 .75rem/1.4 var(--f-head);vertical-align:middle}
.vr-tag-lock{background:#F1E8F7;color:#3D0A5C;border:1px solid #C9A9DE}
.vr-tag-free{background:#E8F5EC;color:#145A28;border:1px solid #9BD3AC}