/* glass.css v2: the theme shows through every panel of the whole super app (Nima 2026-11-14).
   Every panel, card, text box and button is 70-95% opaque, tinted with a little of the theme's accent color, so the background colors of the chosen theme mix with what is on screen. Knobs: */
:root{--glass-base:88%;--glass-tint:6%;--glass-blur:10px;--glass-edge:26%;
  --glass:calc(var(--glass-base) - var(--glass-d));--glass-hi:calc(94% - var(--glass-d) / 2);--glass-btn:calc(92% - var(--glass-d) / 2);--glass-lo:calc(80% - var(--glass-d))}
/* MOTION: when Motion is on, the panels breathe (they become up to 6% more see-through and come back to the set value), and the glow behind them slowly changes strength and color. Off when the Motion button is off or the device asks for less motion. */
@property --glass-d{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --glow-d{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --mix-d{syntax:"<percentage>";inherits:true;initial-value:0%}
@keyframes glass-breathe{0%,100%{--glass-d:0%;--glow-d:0%;--mix-d:0%}50%{--glass-d:6%;--glow-d:9%;--mix-d:45%}}
@media (prefers-reduced-motion:no-preference){html:not([data-motion=off]){animation:glass-breathe 14s steps(56) infinite}}
/* ambient background: two soft glows in the theme's own accent colors, so there is something to see through the panels */
body{background:
  radial-gradient(900px 620px at 8% -8%,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 20%,transparent),transparent 62%),
  radial-gradient(820px 580px at 104% 2%,color-mix(in srgb,var(--acc2,var(--b,#0ea5e9)) 16%,transparent),transparent 58%),
  var(--bg)!important;background-attachment:fixed!important;background-repeat:no-repeat!important}
/* 1. large panels and cards (language apps, Explore, Image AI Art, AI Video Lab, and the AI learning pages) */
.unit:not(.on):not(.cur),.scard:not(.on):not(.cur),.acbox:not(.on):not(.cur),.acsidebox:not(.on):not(.cur),.acterm:not(.on):not(.cur),.accourse:not(.on):not(.cur),.acrow:not(.on):not(.cur),.pcard:not(.on):not(.cur),.pchoice:not(.on):not(.cur),.goal:not(.on):not(.cur),.pathc:not(.on):not(.cur),.eitem:not(.on):not(.cur),.epart:not(.on):not(.cur),.etopic:not(.on):not(.cur),.xsec:not(.on):not(.cur),.kcat:not(.on):not(.cur),.kw2:not(.on):not(.cur),.kcard.up:not(.on):not(.cur),.wcat:not(.on):not(.cur),.wcard:not(.on):not(.cur),.wdet:not(.on):not(.cur),.vmap:not(.on):not(.cur),.qcard:not(.on):not(.cur),.gcard:not(.on):not(.cur),.mcard:not(.on):not(.cur),.mcard .mc:not(.on):not(.cur),.tool:not(.on):not(.cur),.skill:not(.on):not(.cur),.dc:not(.on):not(.cur),.vc:not(.on):not(.cur),.resume:not(.on):not(.cur),.ilogrow:not(.on):not(.cur),.cardph:not(.on):not(.cur),.arinfo:not(.on):not(.cur),.acstage:not(.on):not(.cur),.acscene:not(.on):not(.cur),.lvlb:not(.on):not(.cur),.tb:not(.on):not(.cur),.pcell:not(.on):not(.cur),.vpin:not(.on):not(.cur),.acth:not(.on):not(.cur),.card:not(.on):not(.cur),.course:not(.on):not(.cur),.stat:not(.on):not(.cur),.mod:not(.on):not(.cur),aside:not(.on):not(.cur),.les:not(.on):not(.cur),.item:not(.on):not(.cur),.board:not(.on):not(.cur),.steps li:not(.on):not(.cur),.st:not(.on):not(.cur),.xp:not(.on):not(.cur),.opt:not(.on):not(.cur),.tk:not(.on):not(.cur),.node:not(.boss):not(.on):not(.cur),.mods button:not(.on):not(.cur),.lg button:not(.on):not(.cur),.vc button:not(.on):not(.cur),section.card:not(.on):not(.cur),.top:not(.on):not(.cur),header:not(.on):not(.cur){
  background-color:color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,transparent)) var(--glass-tint),var(--panel,var(--card,#fff))) var(--glass),transparent)!important;
  border-color:color-mix(in srgb,var(--acc,var(--b,#8aa)) var(--glass-edge),var(--line,var(--bd0,#d8e1f3)));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.15);backdrop-filter:blur(var(--glass-blur)) saturate(1.15)}
/* 2. text boxes: more opaque so the words stay easy to read */
.iachbar:not(.on):not(.cur),.tabs:not(.on):not(.cur),.vcard:not(.on):not(.cur),.ctl:not(.on):not(.cur),.menu:not(.on):not(.cur),.capbar:not(.on):not(.cur),.log:not(.on):not(.cur),.note:not(.on):not(.cur),.vbub:not(.on):not(.cur),.say:not(.on):not(.cur),.sbx:not(.on):not(.cur),.chip:not(.on):not(.cur),.achip:not(.on):not(.cur),.ptag:not(.on):not(.cur),.fix:not(.on):not(.cur),.vwho:not(.on):not(.cur),.kopt:not(.on):not(.cur),.wopt:not(.on):not(.cur),#uilang:not(.on):not(.cur),.vl select:not(.on):not(.cur),.eresult:not(.on):not(.cur),.dt:not(.on):not(.cur),.wd.y:not(.on):not(.cur),.acbadge:not(.on):not(.cur),input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not(.on):not(.cur),textarea:not(.on):not(.cur),select:not(.on):not(.cur){
  background-color:color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,transparent)) 4%,var(--panel,var(--card,#fff))) var(--glass-hi),transparent)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 3. answer buttons and plain buttons (the main action button .go stays solid on purpose) */
button:not(.go):not(.primary):not(.sel):not(.hl):not(.good):not(.bad):not(.btn.p):not(.on):not(.active):not(.cur):not([aria-selected=true]):not([aria-pressed=true]){background-color:color-mix(in srgb,var(--panel,var(--card,#fff)) var(--glass-btn),transparent)}
#stats,.zm,.avc{background-color:color-mix(in srgb,var(--panel,var(--card,#fff)) var(--glass-btn),transparent)!important}
/* 4. sheets and dialogs: a veil of the theme color (70%) that still lets the page show through */
.sheet{background:color-mix(in srgb,var(--bg,#14233a) 70%,transparent)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 5. banners that sit on top of pictures */
.hero,.startmascot{background-color:color-mix(in srgb,var(--panel,var(--card,#fff)) var(--glass-lo),transparent)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.unit,.scard,.card,.mod,aside{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- v3: professional finish (Nima 2026-11-14) ---- */
/* a soft sheen on large panels: light from the top, like real glass */
.unit,.scard,.acbox,.acsidebox,.accourse,.pcard,.pchoice,.card,.course,.stat,.mod,.item,.board,.wcard,.kcard.up,.gcard,.mcard{background-image:linear-gradient(180deg,color-mix(in srgb,#fff 9%,transparent),transparent 46%)}
/* clickable cards lift a little (only with a mouse, never when the person asked for less motion) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pcard,.pchoice,.acrow,.accourse,.course,.card,.mod,.kcard.up,.gcard,.mcard,.wcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .pcard:hover,.pchoice:hover,.acrow:hover,.accourse:hover,.course:hover,.mod:hover,.kcard.up:hover,.gcard:hover,.mcard:hover,.wcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 55%,transparent)}
}
/* keyboard focus: a clear ring in the theme's accent color */
:focus-visible{outline:2px solid color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 75%,transparent);outline-offset:2px;border-radius:10px}
::selection{background:color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 32%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 45%,transparent) transparent}
/* what sits ON pictures and videos: 72-88% so the picture shows through, the words stay readable */
.accap{background:color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 12%,#0b1226) 88%,transparent)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rlphi button{background:color-mix(in srgb,#000 78%,transparent)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vlmedia.hov:not(.playing)::after,.vlmedia.vp:not(.playing)::after{background:color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 14%,#0f172a) 72%,transparent)!important}
.vlck{background:color-mix(in srgb,#0f172a 75%,transparent)!important}

/* ---- v4/v6: Explore cards. The picture stays 100% clear: the name, stars and heart bar sits UNDER the picture (never on it), as glass tinted with the theme color ---- */
.okcard figcaption{background-color:color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 7%,var(--panel,var(--card,#fff))) 86%,transparent)!important;border-top:2px solid color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 38%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
/* a stronger ambient glow, so the theme color is easy to see behind the glass */
body{background:
  radial-gradient(1000px 700px at 6% -10%,color-mix(in srgb,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) calc(100% - var(--mix-d)),var(--acc2,var(--b,#0ea5e9))) calc(28% + var(--glow-d)),transparent),transparent 62%),
  radial-gradient(900px 640px at 104% 0%,color-mix(in srgb,color-mix(in srgb,var(--acc2,var(--b,#0ea5e9)) calc(100% - var(--mix-d)),var(--acc,var(--b,#4f46e5))) calc(22% + var(--glow-d)),transparent),transparent 58%),
  radial-gradient(1100px 700px at 50% 112%,color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 16%,transparent),transparent 60%),
  var(--bg)!important;background-attachment:fixed!important;background-repeat:no-repeat!important}

/* ---- v5: readability polish (Nima 2026-11-14) ---- */
/* counts and names on the glass bar use the full text color, so they reach the 4.5:1 contrast of web accessibility rules in every theme */
.okcard figcaption,.okcard figcaption b,.okheart,.okstars{color:var(--t,var(--ink,#17223d))}
.okheart,.okstars{font-weight:700}

/* ---- v7: text on FILLED active items always has enough contrast. glass.js chooses white or dark for the theme: --on-g for gradient fills (--g), --on-b for solid --b fills. Tinted chips (.chip.on) keep the app's own tint and dark accent text. ---- */
.node.cur,.chips button.on,.lvlb.on,.goal.on .gc,.mini.on,.aclang .mini.on,.acmodes .mini.on,.acrates .mini.on,.actasks li.cur .tk,.vlcats .mini.on,.vlfilter .mini.on,.vlf.on{color:var(--on-g,#fff)!important}
.bmode .mini.on,.okseg button.on{color:var(--on-b,#fff)!important}
/* tinted active chips (Explore filters): the accent text is mixed toward the normal text color so it stays readable on the tint */
.okkinds button.on{color:color-mix(in srgb,var(--b,#4f46e5) 55%,var(--t,#17223d))!important}

/* ---- v8: when a theme's fill is too light for white text and too dark for dark text, the filled active item is shaded just enough (glass.js sets data-dark-g / data-dark-b and the amount) ---- */
html[data-dark-g] :is(.node.cur,.chips button.on,.lvlb.on,.goal.on .gc,.mini.on,.aclang .mini.on,.acmodes .mini.on,.acrates .mini.on,.actasks li.cur .tk,.vlcats .mini.on,.vlfilter .mini.on,.vlf.on){box-shadow:inset 0 0 0 999px rgba(0,0,0,var(--dark-g,0))!important}
html[data-dark-b] :is(.bmode .mini.on,.okseg button.on){box-shadow:inset 0 0 0 999px rgba(0,0,0,var(--dark-b,0))!important}
/* all tinted active chips */
.chip.on{color:color-mix(in srgb,var(--b,#4f46e5) 40%,var(--t,#17223d))!important}

/* ---- v9: the last text colors the contrast check found (Nima 2026-11-14) ---- */
.okheart.on{color:#9d174d!important}
.score.good b,.slot.on{color:color-mix(in srgb,var(--gd,var(--b,#4f46e5)) 45%,var(--t,#17223d))!important}
.lvlb.on small{color:inherit!important;opacity:.92}

/* ---- v10: highlighted words (karaoke highlight) have a pale yellow fill, so their text is always dark ---- */
.vw.on{color:#0b1226!important}

/* ---- treasure chests (Nima 2026-11-14) ---- */
.dash{grid-template-columns:repeat(5,1fr)}
@media (max-width:420px){.dash{gap:6px}.dash .dc{padding:8px 2px}.dash .big2{font-size:16px}}
.dc.chestb.ready{border-color:color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){html:not([data-motion=off]) .dc.chestb.ready .big2{animation:chestwiggle 2.4s ease-in-out infinite}
  html:not([data-motion=off]) .chesttop{animation:chestwiggle 1.2s ease-in-out 3}
  html:not([data-motion=off]) .chestwin{animation:chestpop .5s cubic-bezier(.2,1.4,.4,1) both}}
@keyframes chestwiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
@keyframes chestpop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.chestbox{text-align:center;padding:4px 4px 8px}.chesttop{font-size:64px;line-height:1.1}
.chestwin{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 6px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 12%,transparent);border:2px solid color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 35%,transparent)}
.chestwin .chestem{font-size:38px}.chestwin b{font-size:20px}

/* new-version banner */
#newver{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--t,#17223d);background:color-mix(in srgb,var(--panel,var(--card,#fff)) 90%,transparent);border:1px solid color-mix(in srgb,var(--acc,var(--b,#4f46e5)) 40%,transparent);box-shadow:0 10px 30px color-mix(in srgb,#000 22%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#newver button{border:0;border-radius:999px;padding:7px 14px;font:inherit;cursor:pointer}
#newver .nvgo{background:var(--b,#4f46e5);color:var(--on-b,#fff)}
#newver .nvx{background:transparent;color:inherit;padding:6px 9px}