/* ===== v33 · the course and the learning pages built around the pictures ===== */
.lesart svg,.lbanner svg,.secart svg,.gbanner svg,.giart svg,.picart svg,.priart svg,.flart svg,.fliart svg{width:100%;height:100%;display:block}

/* ---------- the course: lessons as picture cards ---------- */
.ls.lsart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media(min-width:700px){.ls.lsart{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.ls.lsart{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lsart .les{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:18px;background:#fff;
 box-shadow:0 0 0 1px #e6ebf3,0 6px 18px rgba(31,58,95,.08);transition:transform .2s,box-shadow .2s;text-align:left}
.lsart .les:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 0 0 1px #d6def0,0 12px 26px rgba(31,58,95,.14)}
.lsart .les .lesart{display:block;aspect-ratio:4/3;width:100%;overflow:hidden;border-bottom:3px solid #2a2230}
.lsart .les .grow{padding:10px 12px 12px}
.lsart .les .grow b{display:block;font-size:.88rem;line-height:1.25}
.lsart .les .dots{margin-top:6px}
.lsart .les .st{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:1}
.lsart .les .st svg{width:15px;height:15px}
.lsart .les.done{background:#f1fbf6}
.lsart .les.done .st{background:#14a874;color:#fff}
.lsart .les:disabled{opacity:1}
.lsart .les:disabled .lesart{filter:grayscale(.85) brightness(1.05);opacity:.7}
.lsart .les:disabled .grow{opacity:.6}
.lsart .les em{position:absolute;top:8px;right:8px;margin:0}
@media(max-width:420px){.ls.lsart{gap:10px}.lsart .les .grow{padding:8px 10px 10px}.lsart .les .grow b{font-size:.8rem}}

/* ---------- the lesson page ---------- */
.lbanner{display:block;margin:-16px -16px 14px;aspect-ratio:16/9;max-height:340px;overflow:hidden;border-radius:20px 20px 0 0;border-bottom:3px solid #2a2230}
.hd.hdart h2{margin-top:0}
.secart{display:block;float:right;width:132px;aspect-ratio:4/3;margin:2px 0 8px 12px;border-radius:14px;overflow:hidden;border:3px solid #2a2230}
.secart.wide{float:none;width:100%;aspect-ratio:16/8;max-height:260px;margin:4px 0 12px}
@media(max-width:600px){.secart{width:104px}}

/* ---------- grammar ---------- */
.gbanner{display:block;aspect-ratio:16/7;max-height:260px;border-radius:20px;overflow:hidden;border:3px solid #2a2230;margin:4px 0 14px}

/* ---------- the games: a picture on every card ---------- */
.gc .gi.giart{width:100%;height:auto;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:none!important;box-shadow:none;margin-bottom:10px;border:3px solid #2a2230;padding:0}
.gc .gi.giart svg{width:100%;height:100%}
.gdash .pic.picart{width:76px;height:76px;border-radius:18px;overflow:hidden;border:3px solid #2a2230;padding:0;background:none}

/* ---------- practice ---------- */
.prc .pri.priart{width:64px;height:64px;border-radius:16px;overflow:hidden;border:3px solid #2a2230;padding:0;background:none;flex:none}

/* ---------- the feed ---------- */
.flart{display:block;aspect-ratio:16/8;max-height:240px;border-radius:16px;overflow:hidden;border:3px solid #2a2230;margin:10px 0}
.fli.fliart{width:46px;height:46px;border-radius:14px;overflow:hidden;padding:0;border:2.5px solid #2a2230;background:none}

/* ---------- every achievement card is square, each kind in its own colours ---------- */
.wtline{position:relative;max-width:88%;font-size:.95rem;font-weight:600;line-height:1.35;opacity:.95}
.wtsq.ev-c-top{background:radial-gradient(120% 80% at 50% 0%,#3fd1b0 0%,#169c8f 50%,#0d5d66 100%)}
.wtsq.ev-c-lesson{background:radial-gradient(120% 80% at 50% 0%,#6cb4ff 0%,#2a63e8 55%,#1a3a96 100%)}
.wtsq.ev-c-level{background:radial-gradient(120% 80% at 50% 0%,#8f8cff 0%,#4b47d6 55%,#28258a 100%)}
.wtsq.ev-c-quiz{background:radial-gradient(120% 80% at 50% 0%,#5fe3a8 0%,#13a672 55%,#0b6a49 100%)}
.wtsq.ev-c-practice{background:radial-gradient(120% 80% at 50% 0%,#ffb36b 0%,#ff7a3d 55%,#b8461c 100%)}
.wtsq.ev-c-badge{background:radial-gradient(120% 80% at 50% 0%,#ff9cc2 0%,#ff4f8b 55%,#a8245a 100%)}
.wtsq.ev-c-ach{background:radial-gradient(120% 80% at 50% 0%,#ffd45c 0%,#f0a020 55%,#a8650a 100%)}
.wtsq.ev-c-game{background:radial-gradient(120% 80% at 50% 0%,#c39bff 0%,#8a4be6 55%,#4f2196 100%)}
.wtsq.ev-c-streak{background:radial-gradient(120% 80% at 50% 0%,#ff9a6b 0%,#f0533b 55%,#9c2418 100%)}
.wtsq.ev-c-cert{background:radial-gradient(120% 80% at 50% 0%,#5e7bd6 0%,#26387a 60%,#121c44 100%)}
.wtsq.ev-c-cert .wtav,.wtsq.ev-c-world .wtav{background:linear-gradient(135deg,#ffe08a,#ffb020)}

/* ---------- small, clean buttons under a post ---------- */
.post .pa .pab,.shrow .pab{display:inline-flex;align-items:center;gap:5px;border:0;background:none;box-shadow:none;padding:6px 8px;border-radius:10px;font-size:.78rem;font-weight:700;color:#5b6680;cursor:pointer}
.post .pa .pab:hover,.shrow .pab:hover{background:#f1f4fa;color:var(--brand1)}
.post .pa .pab svg,.shrow .pab svg{width:16px;height:16px}
.post .pa .pab.on{color:#14a874}
.shrow{margin-top:4px}

/* ---------- a post a friend shared ---------- */
.shby{display:flex;align-items:center;gap:6px;margin:-4px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:.78rem;color:#6b7790}
.shby svg{width:15px;height:15px}.shby b{color:#1f2a44;cursor:pointer}
.pfshr{display:flex;align-items:center;gap:6px;margin:14px 4px 6px;font-size:.8rem;color:#6b7790}
.pfshr svg{width:15px;height:15px}.pfshr b{color:#1f2a44}.pfshr .pfun{margin-left:auto}

/* ---------- the library ---------- */
.libup{display:flex;flex-direction:column;gap:8px}
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding:4px 2px 20px}
@media(min-width:600px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.shelf{grid-template-columns:repeat(5,minmax(0,1fr))}}
.bk{display:flex;flex-direction:column;gap:5px;border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.bkc{display:block;aspect-ratio:2/3;border-radius:6px 12px 12px 6px;overflow:hidden;background:#e9edf4;box-shadow:inset 6px 0 0 rgba(0,0,0,.08),0 10px 22px rgba(31,58,95,.18),0 2px 4px rgba(31,58,95,.12);transition:transform .2s}
.bk:hover .bkc{transform:translateY(-4px)}
.bkc img{width:100%;height:100%;object-fit:cover;display:block}
.bkph{display:grid;place-items:center;height:100%;padding:14px;text-align:center;color:#fff;background:linear-gradient(160deg,var(--brand1),var(--brand2));font-size:.95rem}
.bkt{font-size:.86rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bkbar{display:block;height:4px;border-radius:4px;background:#e6ebf3;overflow:hidden}.bkbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc1),var(--acc2))}
.bkp{font-size:.7rem;color:#8a94a8}
#bkr{position:fixed;inset:0;z-index:90;background:#f4f1ea;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s ease}
#bkr.in{transform:none}
.bkh{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
.bkh b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.bkv{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:8px;touch-action:pan-y pinch-zoom}
.bkv canvas{background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.15);border-radius:4px;margin:auto}
.bkload{margin:auto;color:#6b7790}
.bkf{display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.bkf input[type=range]{flex:1;accent-color:var(--brand1)}
/* the big picture replaces the older animated cube on the lesson page */
.card:has(> .lbanner) > .scene3d{display:none}
/* every button under a post is small and clean */
.post .pa .btn.ghost{display:inline-flex;align-items:center;gap:5px;border:0;background:none;box-shadow:none;padding:6px 8px;border-radius:10px;font-size:.78rem;font-weight:700;color:#5b6680}
.post .pa .btn.ghost:hover{background:#f1f4fa;color:var(--brand1)}
.post .pa .btn.ghost svg,.post .pa .btn.ghost .ei{width:16px;height:16px}
.gc .gi.giart{aspect-ratio:16/8}