:root{--gold:#ffb900;--ink:#27251f;--muted:#8e8979;--paper:#fffaf0;--purple:#8a5cf5}*{box-sizing:border-box}body{margin:0;background:#fff7e5;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:78px}.app-shell{max-width:760px;margin:auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(255,250,240,.92);backdrop-filter:blur(12px);border-bottom:1px solid #eee3cb}.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}.brand{font-weight:900;color:var(--ink);text-decoration:none;font-size:1.25rem}.page{padding:18px}.hero{background:linear-gradient(135deg,#ffc83d,#ff9d42);color:#352400;border-radius:28px;padding:28px;box-shadow:0 18px 45px #d9ae4c44}.hero h1{font-size:clamp(2rem,8vw,3.4rem);margin:.2rem 0}.course-feed{display:grid;gap:24px;margin-top:24px}.lesson-card{overflow:hidden;background:white;border-radius:28px;box-shadow:0 10px 30px #7a684525;border:1px solid #f0e8d7}.lesson-head{padding:18px;display:flex;gap:14px;align-items:center}.lesson-head img{width:58px;height:58px;border-radius:50%;object-fit:cover}.lesson-meta h2{font-size:1.15rem;margin:0 0 4px}.tag{background:#eee5ff;color:#8051ed;padding:3px 10px;border-radius:9px;font-weight:800}.students{color:var(--muted);margin-top:7px}.lesson-hero{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f3e9d3}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff1d0}.lesson-body{padding:18px}.lesson-body h3{margin:0 0 8px}.lesson-body p{color:#827c70}.card-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eee;padding:15px 18px}.btn-gold{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--gold);color:#332400;padding:13px 22px;font-weight:900;text-decoration:none}.bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;background:white;border-top:1px solid #eee;display:flex;justify-content:center}.bottom-nav-inner{width:min(760px,100%);display:grid;grid-template-columns:repeat(5,1fr)}.bottom-nav a{text-decoration:none;color:#918b7b;text-align:center;padding:12px 4px;font-size:1.35rem}.bottom-nav a.active{color:var(--gold)}.panel{background:#fff;border-radius:22px;padding:20px;box-shadow:0 8px 25px #7a68451a;margin-bottom:18px}.exercise{background:#fff;border-radius:24px;padding:20px;margin:16px 0;box-shadow:0 8px 25px #7a68451a}.options{display:grid;gap:12px}.option{display:flex;align-items:center;gap:12px;border:2px solid #ece6d9;border-radius:18px;padding:12px;cursor:pointer}.option:has(input:checked){border-color:var(--gold);background:#fff8d9}.option img{width:90px;height:90px;object-fit:contain}.flashcard{height:180px;perspective:900px}.flashcard-inner{position:relative;width:100%;height:100%;transition:.5s;transform-style:preserve-3d}.flashcard.is-flipped .flashcard-inner{transform:rotateY(180deg)}.flash-front,.flash-back{position:absolute;inset:0;display:grid;place-items:center;border-radius:22px;background:#fff;backface-visibility:hidden;font-size:1.5rem;font-weight:900}.flash-back{transform:rotateY(180deg);background:#fff0b7}.admin-grid{display:grid;grid-template-columns:220px 1fr;gap:20px}.form-control,.form-select{width:100%;padding:11px;border:1px solid #ddd3c0;border-radius:12px}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:10px;border-bottom:1px solid #eee;text-align:left}@media(max-width:700px){.admin-grid{grid-template-columns:1fr}.page{padding:14px}.lesson-card{border-radius:24px}}
.question-image{display:block;width:min(360px,100%);aspect-ratio:1/1;object-fit:contain;margin:12px auto 18px;border-radius:24px;background:#fff7df;border:2px solid #f1e5c9}.exercise .options:has(.option img){grid-template-columns:repeat(2,minmax(0,1fr))}.exercise .option:has(img){display:grid;justify-items:center;text-align:center;padding:10px}.exercise .option img{width:100%;height:auto;aspect-ratio:1/1;border-radius:16px}.exercise .option input{width:22px;height:22px}.panel .option img{width:72px;height:72px}.speak-icon{margin-left:auto}.option-editor{padding:12px;margin:10px 0;border:1px solid #eadfc9;border-radius:14px;background:#fffaf0}.option-editor .form-control{margin-top:8px}@media(min-width:620px){.exercise .options:has(.option img){grid-template-columns:repeat(3,minmax(0,1fr))}}
.language-switcher{margin-top:18px}.language-switcher h2{margin-top:0}.language-form{display:grid;grid-template-columns:1fr auto 1fr auto;gap:12px;align-items:end}.language-form label{font-weight:800;font-size:.85rem}.language-form select{margin-top:7px;background:#fff}.swap-language{width:44px;height:44px;border-radius:50%;border:0;background:#eee5ff;color:#7348df;font-size:1.35rem;font-weight:900}.quiz-count{display:inline-flex;padding:5px 10px;border-radius:999px;background:#eaf9ee;color:#23853a;font-weight:800}@media(max-width:650px){.language-form{grid-template-columns:1fr auto 1fr}.language-form .btn-gold{grid-column:1/-1;justify-content:center}.language-switcher{padding:16px}}

/* V5 visual system — inspired by the supplied layout, implemented with original assets. */
:root{--cream:#fff8e9;--purple2:#754ce8;--green:#45cf00}body{background:var(--cream)}.app-shell{max-width:980px}.welcome-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;background:#fff;border-radius:30px;padding:36px;margin-bottom:18px;box-shadow:0 12px 40px #775c3320}.welcome-hero h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.08;margin:10px 0}.welcome-hero h1 em{color:#8858f0;font-style:normal}.welcome-hero h1 strong{color:#2b83ef}.welcome-hero h1 b{color:#f5a400}.welcome-hero img{width:100%;border-radius:28px}.eyebrow{font-weight:900;color:#8055ea}.btn-purple,.btn-green{display:inline-flex;justify-content:center;border:0;border-radius:999px;padding:14px 24px;color:#fff;text-decoration:none;font-weight:900}.btn-purple{background:linear-gradient(135deg,#8d60f4,#6736d7)}.btn-green{background:linear-gradient(#54df08,#38bd00);box-shadow:0 7px 0 #249900}.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 4px 16px}.section-title h2{font-size:clamp(1.7rem,4vw,2.5rem);margin:0}.section-title a{color:#8659ec;font-weight:800;text-decoration:none}.learning-path{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,#efffec,#fff);border:4px solid #caefc0;border-radius:34px;padding:22px;box-shadow:0 12px 28px #74bd5520}.learning-path>img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:26px}.learning-path h2{font-size:clamp(1.6rem,4vw,2.5rem);margin:8px 0}.learning-path p{font-size:1.15rem;color:#817a6b}.path-badge{background:#45cf00;color:#fff;padding:8px 14px;border-radius:999px;font-weight:900}.lesson-total{color:#35a80b;font-size:1.25rem;font-weight:900;margin:14px 0 20px}.course-feed{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-card{align-self:start}.lesson-card .lesson-hero{aspect-ratio:16/10}.lesson-top{background:#fff;border-radius:28px;padding:20px;margin-bottom:12px}.lesson-topbar{display:flex;justify-content:space-between;font-size:1.25rem}.lesson-topbar a{text-decoration:none;color:inherit}.progress-track{height:8px;background:#e7e3ed;border-radius:999px;margin:14px 0;overflow:hidden}.progress-track i{display:block;height:100%;background:#8057e9;border-radius:999px}.lesson-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;border-radius:20px;padding:10px;margin-bottom:18px;text-align:center;font-weight:700;color:#7d776b}.lesson-tabs .active{color:#7950e9;border-bottom:3px solid #7950e9;padding-bottom:8px}.quiz-progress{display:flex;justify-content:space-between;margin-bottom:12px}.exercise{max-width:650px;margin:18px auto}.exercise>h2{font-size:1.5rem}.exercise .option{transition:.2s}.exercise .option:hover{transform:translateY(-2px);border-color:#9ae0a4}.exercise .option:has(input:checked){border-color:#25c552;background:#dff9e5}.exerciseForm .btn-gold{background:#754ce8;color:white}@media(max-width:760px){.welcome-hero{grid-template-columns:1fr;padding:22px}.welcome-hero img{order:-1}.learning-path{grid-template-columns:120px 1fr;gap:14px;padding:15px}.learning-path h2{font-size:1.3rem}.learning-path p{display:none}.course-feed{grid-template-columns:1fr}.lesson-tabs{font-size:.73rem}.language-form{grid-template-columns:1fr auto 1fr}.language-form .btn-purple{grid-column:1/-1}.section-title{margin-top:24px}}
/* V6 learning journey screens */
.study-header h1,.ranking-title{font-size:2.25rem;margin:8px 0 18px}.study-tabs,.ranking-tabs{display:flex;gap:10px;margin-bottom:16px}.study-tabs a,.ranking-tabs a{padding:13px 28px;border-radius:999px;background:#f0ede6;color:#8a8375;text-decoration:none;font-size:1.1rem}.study-tabs a.active{background:#8554ee;color:#fff}.ranking-tabs a.active{background:#ffb900;color:#fff}.study-search{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.study-search input,.study-search button{height:58px;border:2px solid #c9c4ba;background:white;border-radius:999px;padding:0 22px;font-size:1.05rem}.study-search input{border:0;padding:0}.study-search button{min-width:140px}.path-list{display:grid;gap:18px;margin-top:24px}.path-row{display:grid;grid-template-columns:190px 1fr auto;gap:22px;align-items:center;background:#fff;border-radius:28px;padding:20px;text-decoration:none;color:inherit;box-shadow:0 8px 24px #6b5b3920}.path-cover{position:relative}.path-cover img{width:190px;height:190px;object-fit:cover;border-radius:28px}.path-cover span{position:absolute;right:-10px;bottom:-8px;background:#fff;border:10px solid #f5d77c;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-weight:900}.path-copy h2{font-size:1.55rem;margin:0 0 8px}.path-copy p,.path-copy div{color:#8f887a}.heart{border:0;background:#fff;border-radius:50%;font-size:2rem}.roadmap-head,.review-head{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:start}.roadmap-head>a,.review-head>a{font-size:2rem;text-decoration:none;color:inherit;background:#fff;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;box-shadow:0 8px 18px #6d5b3722}.roadmap-head h1,.review-head h1{margin:0}.ring-small{border:8px solid #ffbd14;border-left-color:#eee5cf;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-weight:900}.roadmap-stage{margin:28px 0}.stage-banner{position:relative;background:#f951a8;color:#fff;border-radius:28px;padding:24px 30px;box-shadow:0 12px 22px #ed3e8a35}.stage-banner h2{margin:7px 0 0}.stage-banner span{position:absolute;right:28px;top:35px}.roadmap-nodes{display:flex;flex-direction:column;align-items:center;gap:40px;padding:70px 0}.road-node{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;text-align:center;position:relative}.road-node:nth-child(even){transform:translateX(110px)}.road-node:nth-child(odd){transform:translateX(-80px)}.node-circle{width:112px;height:112px;border-radius:50%;background:#24aee8;color:#fff;display:grid;place-items:center;font-size:2.4rem;border-bottom:10px solid #087dae;box-shadow:0 10px 20px #147ba333}.road-node.done .node-circle{background:#f54aa3;border-bottom-color:#d70973}.road-node.current .node-circle{outline:12px solid #dedbd2}.road-node b{position:absolute;top:-42px;background:#fff;padding:8px 14px;border-radius:14px;color:#117597}.vocab-carousel{display:flex;gap:18px;overflow:auto;padding:8px 3px 18px;scroll-snap-type:x mandatory}.vocab-card{min-width:290px;background:#fff;border-radius:28px;padding:20px;position:relative;scroll-snap-align:start;box-shadow:0 8px 22px #6b5c3b20}.vocab-card>button{position:absolute;right:16px;border:0;background:#fff;font-size:1.8rem}.vocab-card img{width:100%;height:190px;object-fit:contain}.vocab-card h3{font-size:1.6rem;margin:12px 0 4px}.vocab-card em,.sentence-list em{color:#9c9486}.vocab-card p{font-size:1.2rem}.vocab-card div{display:flex;gap:12px}.vocab-card div button,.vocab-card div span{border:0;background:#f2efe7;border-radius:999px;padding:13px 18px}.review-actions{display:grid;gap:12px;position:sticky;bottom:78px;z-index:15;margin:18px}.btn-review,.btn-test{padding:22px;border-radius:22px;text-align:center;text-decoration:none;font-size:1.25rem;font-weight:900}.btn-review{background:#ffc53d;color:#302a20}.btn-test{background:#8554ee;color:#fff}.sentence-list{display:grid;gap:16px}.sentence-list article{display:grid;grid-template-columns:75px 48px 1fr auto;align-items:center;gap:14px;background:#f5efff;border-radius:22px;padding:16px}.sentence-list img{width:75px;height:75px;object-fit:contain}.sentence-list button{border:0;background:#f5f0e8;border-radius:50%;width:48px;height:48px}.sentence-list strong{font-size:1.25rem}.speak-screen{background:#fff;border-radius:30px;max-width:650px;margin:auto;padding:26px;min-height:700px;text-align:left;box-shadow:0 10px 28px #6b5b3920}.speak-progress{display:flex;justify-content:space-between}.speak-progress span{border:9px solid #f2e4b8;border-top-color:#ffb900;border-radius:50%;width:64px;height:64px;display:grid;place-items:center}.speak-progress a{font-size:2rem;text-decoration:none;color:inherit}.speak-screen>img{display:block;width:280px;height:280px;object-fit:contain;margin:auto}.speak-tools{display:flex;justify-content:center;gap:14px}.speak-tools button,.speak-tools span{border:0;background:#f2efe7;border-radius:999px;padding:14px 18px}.mic-button{display:block;margin:28px auto 12px;width:128px;height:128px;border:0;border-radius:50%;background:#8554ee;color:#fff;font-size:3rem}.speak-next{display:block;margin:28px auto 0;max-width:650px;background:#ffc53d;color:#302a20;border-radius:20px;padding:22px;text-align:center;text-decoration:none;font-size:1.3rem;font-weight:900}.ranking-list{background:#fff;border-radius:28px;padding:14px 22px;box-shadow:0 8px 22px #6b5b3920}.ranking-list article{display:grid;grid-template-columns:50px 54px 1fr auto;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #eee}.ranking-list article.me{background:#f0e8ff;margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:16px}.rank{font-weight:900;font-size:1.2rem}.rank-1,.rank-2,.rank-3{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff}.rank-1{background:#ffb900}.rank-2{background:#b7c2d2}.rank-3{background:#c5844a}.avatar{width:48px;height:48px;border-radius:50%;background:#efe7ff;color:#8554ee;display:grid;place-items:center;font-weight:900}.lesson-tabs a{text-decoration:none;color:inherit}.lesson-quick-actions{display:grid;gap:12px;margin-bottom:18px}.lesson-quick-actions a{padding:16px;border-radius:18px;text-align:center;text-decoration:none;font-weight:900}.lesson-quick-actions a:first-child{background:#ffc53d;color:#332400}.lesson-quick-actions a:last-child{background:#8554ee;color:#fff}@media(max-width:620px){.path-row{grid-template-columns:120px 1fr auto;padding:14px;gap:14px}.path-cover img{width:120px;height:120px}.path-copy h2{font-size:1.15rem}.path-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.study-search{grid-template-columns:auto 1fr}.study-search button{grid-column:1/-1}.road-node:nth-child(even){transform:translateX(70px)}.road-node:nth-child(odd){transform:translateX(-55px)}.vocab-card{min-width:270px}.review-head,.roadmap-head{grid-template-columns:auto 1fr auto}.review-head>span:last-child,.roadmap-head>span:last-child{display:none}.sentence-list article{grid-template-columns:58px 42px 1fr auto}.sentence-list img{width:58px;height:58px}}
/* V7 language-specific learning zones */
.language-zone-grid{display:grid;gap:22px}.language-zone-card{display:grid;grid-template-columns:42% 1fr;overflow:hidden;border-radius:30px;background:#fff;text-decoration:none;color:inherit;box-shadow:0 12px 32px #735f3920;border:3px solid transparent}.language-zone-card img{width:100%;height:100%;object-fit:cover}.language-zone-card>div{padding:30px}.language-zone-card h2{font-size:2rem;margin:5px 0}.language-zone-card strong{font-size:1.1rem}.language-zone-card p{color:#81796a;line-height:1.6}.zone-flag{font-size:2rem}.zone-start{display:inline-flex;padding:13px 22px;border-radius:999px;background:#28251f;color:#fff;font-weight:900}.zone-ja{border-color:#ffd0da}.zone-vi{border-color:#ffe0aa}.zone-en{border-color:#ded3ff}.zone-hero{display:grid;grid-template-columns:auto 1fr 260px;align-items:center;gap:20px;background:#fff;border-radius:30px;padding:24px;border-bottom:8px solid var(--zone-accent);box-shadow:0 12px 30px #735f3920}.zone-hero>a{display:grid;place-items:center;width:54px;height:54px;background:#f5f1e9;border-radius:50%;text-decoration:none;color:inherit;font-size:1.8rem}.zone-hero h1{margin:5px 0;font-size:2.5rem}.zone-hero img{width:260px;border-radius:24px}.zone-section-list{display:grid;gap:20px;margin-top:24px}.zone-section{display:grid;grid-template-columns:115px 1fr 150px;gap:20px;align-items:center;background:#fff;border-radius:28px;padding:22px;text-decoration:none;color:inherit;box-shadow:0 10px 26px #735f3920}.zone-section-icon{width:105px;height:105px;border-radius:28px;background:color-mix(in srgb,var(--zone-accent) 15%,white);color:var(--zone-accent);display:grid;place-items:center;font-size:2.7rem;font-weight:900}.zone-section-copy small{color:var(--zone-accent);font-weight:900}.zone-section-copy h2{margin:4px 0}.zone-section-copy p{color:#837b6d}.mini-items{display:flex;flex-wrap:wrap;gap:6px}.mini-items span{background:#f5f1e9;padding:6px 10px;border-radius:999px;font-size:.85rem}.zone-progress{text-align:right}.zone-progress b{font-size:1.25rem;color:var(--zone-accent)}.zone-progress i{display:block;height:8px;background:#eee8dc;border-radius:999px;margin:10px 0;overflow:hidden}.zone-progress em{display:block;height:100%;background:var(--zone-accent)}.zone-progress strong{color:var(--zone-accent)}.alphabet-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}.alphabet-head>a:first-child{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;text-decoration:none;color:inherit;font-size:1.7rem}.alphabet-head h1{margin:0}.alphabet-head p{color:#81796c}.quiz-pill{background:#8054e8;color:#fff;text-decoration:none;padding:12px 20px;border-radius:999px;font-weight:900}.alphabet-group{margin-top:28px}.alphabet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.alphabet-card{border:0;background:#fff;border-radius:22px;padding:18px 8px;box-shadow:0 8px 20px #735f3918;cursor:pointer}.alphabet-card strong{display:block;font-size:2.25rem}.alphabet-card span{display:block;color:#756e62;margin:6px 0}.alphabet-card small{color:#8054e8}.sticky-quiz-button{position:sticky;bottom:82px;display:block;margin:28px auto 8px;max-width:650px;padding:20px;background:#ffc43d;color:#30291f;text-align:center;text-decoration:none;border-radius:22px;font-size:1.2rem;font-weight:900}.quiz-app{max-width:650px;margin:auto;background:#fff;border-radius:30px;padding:24px;min-height:690px;box-shadow:0 10px 30px #735f3920}.quiz-app-top{display:flex;justify-content:space-between;align-items:center}.quiz-app-top span{width:64px;height:64px;border:8px solid #f4df9c;border-top-color:#ffb900;border-radius:50%;display:grid;place-items:center;font-weight:900}.quiz-app-top a{font-size:2.2rem;text-decoration:none;color:inherit}.quiz-meter{height:8px;background:#eee7da;border-radius:999px;overflow:hidden;margin:16px 0}.quiz-meter i{display:block;height:100%;background:#8054e8;transition:.3s}.quiz-symbol{font-size:7rem;text-align:center;padding:30px 0 10px;font-weight:900}.quiz-options{display:grid;gap:12px}.quiz-options button{display:flex;align-items:center;gap:14px;border:2px solid #eae3d7;background:#fff;border-radius:18px;padding:15px;font-size:1.1rem;text-align:left}.quiz-options button span{width:34px;height:34px;border-radius:50%;background:#f2eee6;display:grid;place-items:center}.quiz-options button.selected{border-color:#8054e8;background:#f2edff}.quiz-options button.correct{border-color:#27c45c;background:#dff8e6}.quiz-options button.wrong{border-color:#ef5555;background:#ffe5e5}.quiz-check{width:100%;margin-top:20px;border:0;border-radius:18px;padding:18px;background:#8054e8;color:#fff;font-weight:900;font-size:1.15rem}.ok{display:block;color:#1ba84d;padding:14px}.bad{display:block;color:#d94343;padding:14px}.quiz-result{text-align:center;font-size:4rem;padding:80px 0}.quiz-result h1{font-size:2rem}.quiz-result p{font-size:1.2rem}.quiz-result a{font-size:1rem;background:#ffc43d;color:#30291f;padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:900}@media(max-width:700px){.language-zone-card{grid-template-columns:1fr}.language-zone-card img{aspect-ratio:16/8}.language-zone-card>div{padding:20px}.zone-hero{grid-template-columns:auto 1fr}.zone-hero img{grid-column:1/-1;width:100%}.zone-section{grid-template-columns:78px 1fr}.zone-section-icon{width:72px;height:72px;font-size:1.9rem}.zone-progress{grid-column:1/-1;text-align:left}.alphabet-grid{grid-template-columns:repeat(3,1fr)}.alphabet-card strong{font-size:1.8rem}}

.exercise-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.exercise-meta span,.practice-card div span{background:#f0e9ff;color:#754ce8;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:900}.meta-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:#faf7ff;border-radius:16px;padding:14px;margin:12px 0}.meta-editor textarea{grid-column:1/-1}.practice-filter{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}.practice-filter select,.practice-filter input{border:1px solid #ddd3c0;border-radius:14px;padding:12px}.practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.practice-card{background:#fff;color:inherit;text-decoration:none;border-radius:24px;padding:20px;box-shadow:0 8px 24px #725f3b1b;border-bottom:6px solid #8054e8}.practice-card div{display:flex;flex-wrap:wrap;gap:6px}.practice-card h2{margin:14px 0 6px}.practice-card p{color:#80796c}.practice-card strong{color:#754ce8}@media(max-width:650px){.practice-filter{grid-template-columns:1fr}.practice-grid{grid-template-columns:1fr}.meta-editor{grid-template-columns:1fr}}
/* V9 real UI */
.v9-hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:26px;background:#fff;border-radius:32px;padding:36px;box-shadow:0 14px 40px #66512c1c}.v9-hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;margin:12px 0}.v9-hero p{color:#80796c;font-size:1.05rem}.v9-hero img{width:100%;border-radius:28px}.v9-stat{margin-top:20px;background:#f6f1ff;padding:12px 18px;border-radius:16px;display:inline-flex;gap:8px}.v9-language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 32px}.v9-language-card{background:#fff;color:inherit;text-decoration:none;border-radius:26px;overflow:hidden;box-shadow:0 10px 26px #66512c1c;border:1px solid #eee5d4}.v9-language-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.v9-language-card>div{padding:18px}.v9-language-card h2{margin:0;font-size:1.5rem}.v9-language-card p{margin:2px 0 12px;color:#7d7568}.v9-language-card strong{font-size:.9rem}.v9-language-card i{display:block;height:7px;background:#eee8dd;border-radius:999px;margin:16px 0;overflow:hidden}.v9-language-card i span{display:block;height:100%;border-radius:999px}.v9-language-card button{border:0;color:#fff;width:100%;border-radius:12px;padding:11px;font-weight:900}.v9-language-card.pink i span,.v9-language-card.pink button{background:#f64791}.v9-language-card.orange i span,.v9-language-card.orange button{background:#ff9d19}.v9-language-card.blue i span,.v9-language-card.blue button{background:#376ce2}.v9-popular-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;overflow:auto;padding:4px 2px 18px}.v9-mini-card{min-width:150px;background:#fff;border-radius:20px;padding:10px;text-decoration:none;color:inherit;box-shadow:0 7px 20px #66512c18}.v9-mini-art{height:105px;border-radius:16px;display:grid;place-items:center;font-size:3rem}.art-1{background:#dff1ff}.art-2{background:#ffe4ec}.art-3{background:#fff0c9}.art-4{background:#e8e0ff}.art-5{background:#ffe5cf}.v9-mini-card h3{margin:10px 0 5px;font-size:1rem}.v9-mini-card p,.v9-mini-card span{font-size:.8rem;color:#81796d}.v9-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.v9-actions a{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:#fff;padding:20px;border-radius:22px;text-decoration:none;color:inherit;font-size:1.7rem;box-shadow:0 8px 22px #66512c16}.v9-actions b{font-size:1rem}.v9-actions span{grid-column:2;font-size:.82rem;color:#81796d}@media(max-width:700px){.v9-hero{grid-template-columns:1fr;padding:22px}.v9-hero-copy{order:2}.v9-language-grid{grid-template-columns:1fr}.v9-language-card{display:grid;grid-template-columns:42% 1fr}.v9-language-card img{height:100%;aspect-ratio:auto}.v9-popular-row{grid-template-columns:repeat(5,165px)}.v9-actions{grid-template-columns:1fr}}
.v9-quiz-shell{max-width:720px;margin:auto;background:#fff;border-radius:30px;min-height:760px;box-shadow:0 15px 45px #5f4d2d20;overflow:hidden}.v9-quiz-shell>header{display:grid;grid-template-columns:48px 1fr auto;align-items:center;padding:18px 24px}.v9-quiz-shell>header a{font-size:2rem;text-decoration:none;color:inherit}.v9-quiz-shell>header b{text-align:center}.v9-q-progress{height:7px;background:#eee8f8;margin:0 24px}.v9-q-progress i{display:block;height:100%;background:#7550dd;transition:.3s}.v9-quiz-shell main{padding:24px 34px 110px;text-align:center}.v9-counter{text-align:left;color:#7550dd;font-weight:900}.v9-instruction{color:#776f63}.v9-quiz-shell h1{font-size:1.45rem}.v9-question-image{display:block;max-width:280px;max-height:250px;margin:18px auto;object-fit:contain}.v9-audio{border:0;border-radius:50%;width:64px;height:64px;background:#8054e8;color:#fff;font-size:1.5rem}.v9-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}.v9-option{border:2px solid #e8e1d6;background:#fff;border-radius:18px;padding:14px;min-height:85px;font-size:1rem;display:grid;place-items:center;gap:8px}.v9-option img{width:100%;height:115px;object-fit:contain}.v9-option span{display:flex;gap:10px;align-items:center}.v9-option em{font-style:normal;width:30px;height:30px;border-radius:50%;background:#f0ece4;display:grid;place-items:center}.v9-option.selected{border-color:#8054e8;background:#f4f0ff}.v9-option.correct{border-color:#25b45b;background:#e1f8e8}.v9-option.wrong{border-color:#e85b5b;background:#ffe8e8}.v9-feedback{text-align:left;border-radius:16px;padding:16px;margin-top:18px}.v9-feedback.good{background:#e4f8ea;color:#16783b}.v9-feedback.bad{background:#fff0e6;color:#a34b23}.v9-quiz-shell>footer{position:sticky;bottom:0;background:#fff;padding:18px 28px;border-top:1px solid #eee}.v9-quiz-shell>footer button{width:100%;border:0;border-radius:16px;padding:17px;background:#7e52e8;color:#fff;font-weight:900;font-size:1.05rem}.v9-finish{padding:100px 0;font-size:4rem}.v9-finish h1{font-size:2rem}.v9-finish p{font-size:1.1rem}.v9-finish a{font-size:1rem;background:#ffc438;color:#33291d;padding:14px 20px;border-radius:999px;text-decoration:none;font-weight:900}@media(max-width:600px){.v9-quiz-shell{border-radius:0;min-height:calc(100vh - 75px)}.v9-options{grid-template-columns:1fr}.v9-quiz-shell main{padding:20px 20px 110px}}

/* V10 image-first additions */
.v10-feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.v10-feature-strip>div{background:#fff;border-radius:20px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;font-size:1.5rem;box-shadow:0 7px 20px #66512c14}.v10-feature-strip b{font-size:.95rem}.v10-feature-strip span{grid-column:2;color:#81796d;font-size:.76rem}.v10-answer-input{width:100%;border:3px solid #e5ddf1;border-radius:18px;padding:18px;font-size:1.2rem;text-align:center;margin:20px 0;outline:none}.v10-answer-input:focus{border-color:#8054e8}.v10-order-result{min-height:74px;border:2px dashed #bba9e9;background:#f8f5ff;border-radius:18px;padding:20px;margin:18px 0;font-size:1.15rem;font-weight:800}.v10-token-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.v10-token-bank button{border:2px solid #e5ded3;background:#fff;border-radius:14px;padding:12px 16px;font-weight:800}.v10-token-bank button:disabled{opacity:.28}.v10-reset-order{border:0;background:transparent;color:#7550dd;font-weight:800;margin-top:14px}.practice-card{position:relative;overflow:hidden}.practice-card:before{content:'🖼️';position:absolute;right:15px;top:50px;font-size:2.4rem;opacity:.16}@media(max-width:700px){.v10-feature-strip{grid-template-columns:repeat(2,1fr)}}

/* V10.2 — UI rebuilt to match the approved visual direction */
:root{--ui-purple:#7549eb;--ui-ink:#191919;--ui-muted:#77716b;--ui-bg:#fbfaf8;--ui-card:#fff}
body{background:var(--ui-bg);font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif;color:var(--ui-ink)}
.app-shell{max-width:1440px;margin:auto}.page{padding:26px 34px 100px}.topbar{background:rgba(255,255,255,.94);border-bottom:1px solid #eee;box-shadow:0 2px 12px #00000008}.topbar-inner{max-width:1380px;margin:auto;padding:16px 28px;gap:28px}.brand{display:flex;align-items:center;gap:6px;font-size:1.35rem}.brand b{background:linear-gradient(90deg,#8b4bf3,#ff8f27);-webkit-background-clip:text;color:transparent}.desktop-nav{display:flex;gap:27px;flex:1;justify-content:center}.desktop-nav a{color:#1d1d1d;text-decoration:none;font-size:.94rem;font-weight:700}.user-tools{display:flex;align-items:center;gap:10px;white-space:nowrap}.xp-pill,.upgrade-pill,.avatar-pill,.login-pill{text-decoration:none;color:#222;font-weight:800;font-size:.88rem}.xp-pill{padding:8px 12px}.upgrade-pill{background:linear-gradient(135deg,#8a61f4,#6a3ee0);color:white;padding:9px 15px;border-radius:999px}.avatar-pill{padding:8px 10px;border-radius:999px;background:#f8f4ff}
.mock-hero{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;min-height:330px;padding:28px 42px 8px;background:linear-gradient(120deg,#fff 20%,#fff7fb 100%);border-radius:28px;overflow:hidden;position:relative}.mock-copy{z-index:2}.hello-line{font-weight:700;color:#4b4541}.mock-copy h1{font-size:clamp(2.35rem,4.4vw,4.6rem);line-height:1.06;margin:16px 0 12px;letter-spacing:-.045em}.mock-copy>p:last-child{color:#77716b;font-size:1.05rem}.mock-hero-art{height:310px;position:relative;display:grid;place-items:center}.mock-hero-art img{width:100%;height:100%;object-fit:contain}.bubble{position:absolute;padding:11px 18px;border-radius:999px;background:#fff;box-shadow:0 8px 25px #0002;font-weight:900}.bubble.jp{top:26px;left:14%;font-size:1.15rem}.bubble.en{top:82px;right:9%;background:#2d8ec9;color:white}.bubble.vi{bottom:72px;right:4%;background:#f3a623;color:white}
.language-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 36px}.showcase-card{background:#fff;border:1px solid #e6e3df;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 8px 25px #00000010;transition:.25s}.showcase-card:hover{transform:translateY(-5px);box-shadow:0 15px 36px #00000016}.showcase-card>img{display:block;width:100%;height:210px;object-fit:cover}.showcase-body{padding:18px}.showcase-body h2{font-size:1.55rem;margin:0}.showcase-body p{margin:3px 0 18px;color:#65605a}.showcase-body strong{font-size:.92rem}.card-stats{display:flex;justify-content:space-between;margin:18px 0 8px;font-size:.84rem;font-weight:700}.showcase-body i{display:block;height:7px;border-radius:999px;background:#ece9e6;overflow:hidden}.showcase-body i b{display:block;height:100%;border-radius:999px}.showcase-body button{margin-top:15px;width:100%;border:0;padding:12px;border-radius:7px;color:white;font-weight:900}.japanese i b,.japanese button{background:#f3438b}.vietnamese i b,.vietnamese button{background:#ff9d1c}.english i b,.english button{background:#356ee8}.mock-section-title h2{font-size:1.55rem}.popular-cards{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:15px;overflow-x:auto;padding-bottom:12px}.popular-card{background:#fff;border:1px solid #e7e3df;border-radius:13px;overflow:hidden;text-decoration:none;color:inherit;min-width:170px;box-shadow:0 6px 20px #0000000b}.popular-card img{width:100%;height:135px;object-fit:cover}.popular-card>div{padding:12px}.popular-card h3{font-size:.98rem;margin:0 0 6px}.popular-card p{color:#7b4ee9;font-size:.78rem;margin:0 0 5px}.popular-card span{font-size:.76rem;color:#77716b}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.quick-grid a{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:center;background:#fff;border:1px solid #e7e3df;border-radius:18px;padding:20px;text-decoration:none;color:inherit}.quick-grid span{font-size:2rem;grid-row:1/3}.quick-grid b{font-size:1rem}.quick-grid small{color:#77716b}.bottom-nav{display:none}
@media(max-width:1000px){.desktop-nav{display:none}.page{padding:20px}.mock-hero{grid-template-columns:1fr 1fr}.popular-cards{grid-template-columns:repeat(5,210px)}}
@media(max-width:720px){body{padding-bottom:76px}.app-shell{max-width:100%}.page{padding:14px 14px 90px}.topbar-inner{padding:12px 14px}.user-tools .xp-pill,.user-tools .upgrade-pill{display:none}.avatar-pill{font-size:0}.avatar-pill:first-letter{font-size:1.2rem}.mock-hero{grid-template-columns:1fr;padding:22px 18px 6px;min-height:auto}.mock-copy h1{font-size:2.35rem}.mock-hero-art{height:240px}.mock-copy{order:2}.mock-hero-art{order:1}.bubble.jp{top:8px}.bubble.en{top:42px}.bubble.vi{bottom:38px}.language-showcase{grid-template-columns:1fr;gap:14px}.showcase-card{display:grid;grid-template-columns:42% 58%;min-height:190px}.showcase-card>img{height:100%;min-height:190px}.showcase-body{padding:14px}.showcase-body h2{font-size:1.3rem}.showcase-body p{margin-bottom:10px}.card-stats{margin-top:12px}.popular-cards{grid-template-columns:repeat(5,180px)}.popular-card img{height:115px}.quick-grid{grid-template-columns:1fr}.bottom-nav{display:flex}.bottom-nav-inner{width:100%}}

/* V10.2 FIXED — actual dashboard source matching the approved mockup */
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}.dashboard-main{min-width:0}.dashboard-sidebar{display:grid;gap:16px;position:sticky;top:86px}.hero-dashboard{min-height:250px;border:1px solid #f0e9f0;border-radius:22px;background:linear-gradient(115deg,#fff 0%,#fff8fc 56%,#f8f5ff 100%);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;padding:25px 30px 0;overflow:hidden;position:relative}.hero-dashboard:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 28%,#f6ddff55 0 5px,transparent 6px),radial-gradient(circle at 58% 22%,#ffe4b855 0 4px,transparent 5px);pointer-events:none}.hero-copy{z-index:2}.hero-greeting{font-weight:800;margin:0 0 12px}.hero-copy h1{font-size:clamp(2.1rem,3.8vw,3.5rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 12px}.hero-sub{color:#6f6964}.hero-visual{position:relative;height:250px;display:flex;align-items:flex-end;justify-content:center;z-index:1}.hero-visual img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}.speech{position:absolute;border-radius:999px;padding:9px 17px;font-weight:900;box-shadow:0 9px 25px #0001;background:#fff}.speech-jp{top:12px;left:12%;color:#5e3dd5;border:1px solid #bfaef9}.speech-en{top:58px;right:8%;background:#2e74e9;color:#fff}.speech-vi{bottom:50px;right:2%;background:#ff9f1f;color:#fff}.language-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:14px 0 24px}.language-card{background:#fff;border:1px solid #e8e3df;border-radius:15px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 8px 20px #0000000c;transition:.2s}.language-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px #00000014}.language-art{height:145px;background:#faf6ff}.language-art img{width:100%;height:100%;object-fit:cover}.language-body{padding:14px}.language-body h2{margin:0;font-size:1.35rem}.language-body p{margin:2px 0 13px;color:#6d6863}.language-body strong{font-size:.86rem}.language-meta{display:flex;justify-content:space-between;font-weight:800;font-size:.77rem;margin:12px 0 6px}.progress{height:6px;background:#eee9e6;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;border-radius:99px}.progress.pink i{background:#ff3f88}.progress.orange i{background:#ff9f14}.progress.blue i{background:#356ce5}.language-cta{display:block;text-align:center;color:#fff;border-radius:6px;padding:10px;font-weight:900;margin-top:12px}.lang-ja .language-cta{background:#ff3f88}.lang-vi .language-cta{background:#ff9f14}.lang-en .language-cta{background:#356ce5}.dashboard-heading,.sidebar-title{display:flex;align-items:center;justify-content:space-between}.dashboard-heading h2{font-size:1.4rem;margin:0 0 12px}.dashboard-heading a,.sidebar-title a{color:#7145e6;text-decoration:none;font-weight:800;font-size:.82rem}.popular-strip{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:12px;overflow-x:auto;padding-bottom:10px}.popular-tile{min-width:140px;background:#fff;border:1px solid #e7e3df;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit}.popular-tile img{width:100%;height:95px;object-fit:cover}.popular-tile div{padding:9px}.popular-tile h3{font-size:.79rem;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popular-tile p{font-size:.68rem;color:#6e49e5;margin:0 0 4px}.popular-tile small{font-size:.67rem;color:#777;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.learning-panels{display:grid;grid-template-columns:1.35fr 1fr .95fr;gap:13px;margin-top:15px}.learn-panel{background:#fff;border:1px solid #e8e4e1;border-radius:15px;padding:14px;min-height:330px;box-shadow:0 7px 20px #00000008}.learn-panel>header{display:flex;justify-content:center;gap:12px;position:relative}.learn-panel>header span{position:absolute;left:0}.learn-panel nav{display:grid;grid-template-columns:repeat(4,1fr);font-size:.66rem;color:#777;text-align:center;margin:12px 0 8px;border-bottom:1px solid #eee}.learn-panel nav span{padding:8px 2px}.learn-panel nav .active{color:#7547e8;border-bottom:2px solid #7547e8}.hiragana-content{display:grid;grid-template-columns:44% 56%;gap:12px;align-items:center}.big-kana{font-family:"Yu Mincho","Noto Serif JP",serif;color:#ff3e85;font-size:9rem;line-height:1;text-align:center;position:relative}.stroke{position:absolute;font:700 .55rem system-ui;background:#ff3e85;color:#fff;width:17px;height:17px;border-radius:50%;display:grid;place-items:center}.s1{left:27%;top:24%}.s2{right:20%;top:45%}.s3{left:40%;bottom:10%}.kana-info h3{font-size:1.3rem;margin:0}.kana-info h3 small{font-weight:500}.round-audio{border:0;background:#7447e7;color:#fff;border-radius:50%;width:31px;height:31px}.kana-info p,.kana-info li{font-size:.74rem;color:#58534f}.kana-info ol{padding-left:20px}.vocab-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.vocab-mini-grid div{border:1px solid #e9e5e1;border-radius:9px;padding:8px;display:grid;grid-template-columns:1fr auto}.vocab-mini-grid b{font-size:.78rem}.vocab-mini-grid span{font-size:1.6rem}.vocab-mini-grid small{grid-column:1/-1;color:#777;font-size:.62rem}.tone-panel nav{grid-template-columns:repeat(3,1fr)}.tone-panel>p{font-size:.76rem}.tone-word{border:1px solid #ddd6e8;border-radius:10px;padding:12px;text-align:center;font-size:1.4rem;font-weight:900}.tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.tone-grid button{background:#fff;border:1px solid #e7dede;border-radius:9px;padding:10px;font-weight:900}.tone-grid button small{display:block;font-size:.55rem;font-weight:500}.tone-grid .correct{border-color:#19ae52;background:#ecfff1;position:relative}.tone-grid .correct:after{content:"✓";position:absolute;right:5px;top:4px;background:#18a84f;color:#fff;border-radius:50%;width:17px;height:17px}.success-note{background:#eaf9ee;color:#16763b;border-radius:8px;padding:9px;font-size:.68rem;margin:9px 0}.purple-button{display:block;text-align:center;background:#7447e7;color:#fff;border-radius:8px;padding:10px;text-decoration:none;font-weight:900;font-size:.8rem}.speaking-panel{text-align:center}.speaking-panel>p{text-align:left;font-size:.73rem}.speaking-panel h2{margin:8px 0 0}.speaking-panel>small{color:#777}.speaking-kid{font-size:6rem;position:relative;margin:14px auto 0}.speaking-kid span{position:absolute;right:7%;top:8%;font-size:.68rem;background:#fff;border:1px solid #86adff;color:#1764dd;border-radius:50%;padding:9px}.mic-hint{text-align:center!important;color:#777}.mic-button{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:linear-gradient(145deg,#865df2,#6338d8);color:white;text-decoration:none;font-size:1.8rem;margin:0 auto 10px;box-shadow:0 9px 18px #7046dc44}.sidebar-card{background:#fff;border:1px solid #e8e4e1;border-radius:15px;padding:14px;box-shadow:0 7px 20px #00000008}.sidebar-card h2{font-size:1rem;margin:0 0 12px}.search-box{border:1px solid #ddd9d5;border-radius:9px;padding:10px;color:#888;font-size:.76rem}.filter-row{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.filter-row span{border:1px solid #dedbd7;border-radius:999px;padding:5px 8px;font-size:.58rem}.result-count{font-size:.67rem}.library-item{display:grid;grid-template-columns:37px 1fr auto;gap:9px;align-items:center;border-top:1px solid #eee;padding:9px 0;text-decoration:none;color:inherit}.library-icon{width:37px;height:37px;border-radius:8px;display:grid;place-items:center;font-weight:900}.library-icon.red{background:#ffe5e5;color:#e33}.library-icon.gray{background:#eee}.library-icon.orange{background:#fff0d3;color:#e78b00}.library-icon.blue{background:#e7efff;color:#2868df}.library-text b{display:block;font-size:.72rem}.library-text small{font-size:.52rem;color:#777}.library-percent{font-size:.63rem;color:#18853b;font-weight:900}.sidebar-link{display:block;text-align:center;color:#7145e6;text-decoration:none;font-weight:800;font-size:.68rem;margin-top:9px}.speaking-row{display:grid;grid-template-columns:32px 1fr auto 31px;gap:8px;align-items:center;text-decoration:none;color:inherit;padding:8px 0;border-top:1px solid #eee}.speaking-row b{display:block;font-size:.67rem}.speaking-row small{font-size:.55rem;color:#777}.speaking-row em{font-style:normal;color:#149344;font-size:.62rem;font-weight:900}.speaking-row i{background:#7447e7;color:#fff;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.7rem}.ranking-tabs-mini{display:grid;grid-template-columns:repeat(3,1fr);background:#fafafa;border:1px solid #eee;border-radius:999px;text-align:center;font-size:.61rem}.ranking-tabs-mini span{padding:6px}.ranking-tabs-mini .active{background:#7548e7;color:#fff;border-radius:999px}.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;text-align:center;margin:13px 0}.podium div{display:grid;justify-items:center;font-size:.55rem}.podium div>span{font-size:2rem}.podium b{font-size:.61rem}.podium small{font-size:.5rem}.podium em{font-style:normal;width:100%;padding:9px;background:#bbb;color:#fff;font-size:1rem;font-weight:900;margin-top:7px}.podium .winner em{background:#ffb01b;padding-top:20px}.podium div:last-child em{background:#f08c6a}.rank-list{list-style:none;padding:0;margin:0;border-top:1px solid #eee}.rank-list li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eee;font-size:.58rem}.rank-list b{font-weight:500}.app-shell>.page{max-width:1536px;margin:auto}
@media(max-width:1180px){.dashboard-layout{grid-template-columns:1fr}.dashboard-sidebar{position:static;grid-template-columns:repeat(3,1fr)}.library-card{grid-column:1/-1}.learning-panels{grid-template-columns:1fr 1fr}.speaking-panel{grid-column:1/-1}}
@media(max-width:760px){.hero-dashboard{grid-template-columns:1fr;padding:20px 18px 0}.hero-copy h1{font-size:2.15rem}.hero-visual{height:220px}.hero-copy{order:2}.hero-visual{order:1}.language-grid{grid-template-columns:1fr}.language-card{display:grid;grid-template-columns:42% 58%}.language-art{height:100%;min-height:180px}.popular-strip{grid-template-columns:repeat(5,180px)}.learning-panels{grid-template-columns:1fr}.dashboard-sidebar{grid-template-columns:1fr}.library-card{grid-column:auto}.hiragana-content{grid-template-columns:1fr 1fr}.big-kana{font-size:7rem}}


/* ===== V10.2 Premium interactive dashboard ===== */
.premium-dashboard{--premium-purple:#7347e8;--premium-pink:#ff3983;--premium-blue:#356bea}
.premium-clickable,.interactive-card,.premium-library-item,.speaking-row{cursor:pointer}
.premium-clickable:focus-visible,.interactive-card:focus-visible,.premium-library-item:focus-visible,.speaking-row:focus-visible,.tone-grid button:focus-visible,.premium-ranking-tabs button:focus-visible{outline:3px solid #9f82ff;outline-offset:3px}
.premium-hero{min-height:280px}
.hero-start-button{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#835af0,#6137d9);color:#fff;text-decoration:none;font-weight:900;border-radius:999px;padding:12px 20px;box-shadow:0 10px 25px #7046dc35;margin-top:8px}
.hero-start-button:hover{transform:translateY(-2px)}
.hero-visual{text-decoration:none;color:inherit}
.language-cta b{float:right}
.tile-image-wrap{display:block;position:relative}
.tile-image-wrap i{position:absolute;right:8px;top:8px;background:#fff;color:#7447e7;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-style:normal;box-shadow:0 5px 14px #0002;opacity:0;transform:translateY(3px);transition:.2s}
.popular-tile:hover .tile-image-wrap i{opacity:1;transform:none}
.popular-tile{transition:.2s}
.popular-tile:hover{transform:translateY(-4px);box-shadow:0 13px 28px #0001}
.learn-panel{position:relative;transition:.2s}
.learn-panel:hover{transform:translateY(-3px);box-shadow:0 14px 30px #00000012;border-color:#d8cdfd}
.learn-panel>header a{position:absolute;right:0;text-decoration:none;color:#7447e7;font-weight:900}
.panel-tabs a{padding:8px 2px;text-decoration:none;color:#777}
.panel-tabs a.active{color:#7547e8;border-bottom:2px solid #7547e8}
.vocab-mini-grid button{appearance:none;background:#fff;border:1px solid #e9e5e1;border-radius:9px;padding:8px;display:grid;grid-template-columns:1fr auto;text-align:left;cursor:pointer;color:inherit}
.vocab-mini-grid button:hover{background:#faf7ff;border-color:#cabafd}
.vocab-mini-grid button b{font-size:.78rem}.vocab-mini-grid button span{font-size:1.6rem}.vocab-mini-grid button small{grid-column:1/-1;color:#777;font-size:.62rem}
.panel-open-button{display:block;margin-top:11px;padding:9px;text-align:center;border-radius:9px;background:#f5f0ff;color:#6940dc;text-decoration:none;font-size:.75rem;font-weight:900}
.panel-open-button:hover{background:#eaddff}
.tone-grid button{cursor:pointer;transition:.15s}
.tone-grid button:hover{border-color:#9d82f8;transform:translateY(-1px)}
.tone-grid button.selected{border-color:#7447e7;background:#f3eeff}
.tone-grid button.wrong{border-color:#e45858;background:#fff0f0}
.tone-grid button.correct{border-color:#19ae52;background:#ecfff1}
.tone-feedback.bad{background:#fff0f0;color:#b42323}
.mic-button{border:0;cursor:pointer}
.mic-button.is-listening{animation:premiumPulse 1s infinite;background:linear-gradient(145deg,#ff527f,#d82a5b)}
@keyframes premiumPulse{50%{transform:scale(1.1);box-shadow:0 0 0 18px #ff4c7b15}}
.speech-result{min-height:48px}
.premium-search{display:flex;align-items:center;gap:8px}
.premium-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:#333}
.premium-filters button{border:1px solid #dedbd7;border-radius:999px;padding:5px 9px;font-size:.58rem;background:#fff;cursor:pointer}
.premium-filters button.active{background:#7447e7;color:#fff;border-color:#7447e7}
.premium-library-item[hidden]{display:none}
.premium-ranking-tabs button{border:0;background:transparent;padding:6px;border-radius:999px;font-size:.61rem;cursor:pointer}
.premium-ranking-tabs button.active{background:#7548e7;color:#fff}
.podium div:nth-child(1){order:2}.podium div:nth-child(2){order:1}.podium div:nth-child(3){order:3}
.podium .winner{order:2!important}
.premium-dashboard a,.premium-dashboard button{transition:transform .16s,box-shadow .16s,background-color .16s}
.premium-dashboard a:active,.premium-dashboard button:active{transform:scale(.98)}
@media(min-width:1181px){
  .premium-hero{grid-template-columns:.82fr 1.18fr}
  .premium-hero .hero-visual{height:280px}
  .premium-hero .hero-visual img{transform:scale(1.13);transform-origin:center bottom}
}
@media(max-width:760px){
  .hero-start-button{width:100%;justify-content:center}
  .premium-hero .hero-visual img{transform:scale(1.05)}
  .learning-panels .learn-panel{min-height:auto}
}


/* ===== V10.3 complete pages and custom assets ===== */
.premium-page{max-width:1180px;margin:28px auto 80px;padding:0 20px}
.lesson-topbar{display:grid;grid-template-columns:160px 1fr 160px;align-items:center;gap:18px;background:#fff;border:1px solid #ece8e2;border-radius:22px;padding:18px 22px;box-shadow:0 10px 28px #0000000b}
.lesson-topbar>a{text-decoration:none;color:#6d43dd;font-weight:800}
.lesson-topbar>a:last-child{text-align:right}
.lesson-topbar h1{margin:0;font-size:1.7rem}.lesson-topbar p{margin:5px 0 0;color:#777}
.lesson-tabs{display:flex;justify-content:center;gap:10px;margin:18px 0 24px}
.lesson-tabs a{text-decoration:none;color:#777;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid #e8e2dd}
.lesson-tabs a.active{background:#7447e7;color:#fff;border-color:#7447e7}
.kana-grid-page{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.kana-card-page{background:#fff;border:1px solid #ece7e1;border-radius:22px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 10px 26px #0000000a;cursor:pointer}
.kana-card-page b{font-size:3rem}.kana-card-page span{font-weight:800;color:#7347e8}.kana-card-page small{color:#777}
.writing-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.stroke-demo,.stroke-steps{background:#fff;border:1px solid #ece7e1;border-radius:24px;padding:26px;box-shadow:0 12px 28px #0000000b}
.stroke-demo{text-align:center}.stroke-kana{position:relative;font-size:15rem;line-height:1;color:#ff3f85;font-family:"Noto Sans JP",sans-serif}.stroke-kana span,.stroke-kana i,.stroke-kana em{position:absolute;font-size:1rem;background:#7447e7;color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-style:normal}.stroke-kana span{left:28%;top:12%}.stroke-kana i{left:55%;top:37%}.stroke-kana em{left:58%;bottom:12%}
.stroke-steps>button{border:0;background:#f2edff;color:#6338d4;border-radius:999px;padding:10px 15px;cursor:pointer}
.stroke-steps ol{line-height:2}
.practice-box{margin-top:18px}.practice-box canvas{width:100%;background:repeating-linear-gradient(0deg,#fff,#fff 29px,#f2eefa 30px);border:1px solid #ded6ef;border-radius:16px;touch-action:none}
.practice-box>div{display:flex;gap:10px;margin-top:10px}.practice-box button{border:0;border-radius:10px;padding:10px 18px;cursor:pointer}.practice-box button:last-child{background:#7447e7;color:#fff}
.vocabulary-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vocab-card-page{background:#fff;border:1px solid #ece7e1;border-radius:20px;padding:16px;display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:14px;box-shadow:0 10px 25px #0000000a}
.vocab-art{height:78px;border-radius:16px;background:linear-gradient(135deg,#fff4fb,#eee8ff);display:grid;place-items:center;font-size:2.4rem}
.vocab-card-page h3{margin:0 0 6px;font-size:1.2rem}.vocab-card-page p{margin:0;color:#777}.vocab-card-page button{border:0;border-radius:50%;width:42px;height:42px;background:#f1ecff;cursor:pointer}
.inline-quiz,.speaking-room-card{background:#fff;border:1px solid #ece7e1;border-radius:24px;padding:28px;box-shadow:0 12px 28px #0000000b;text-align:center}
.quiz-options-large{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:620px;margin:24px auto}.quiz-options-large button{font-size:4rem;padding:28px;border-radius:18px;border:1px solid #ddd6eb;background:#fff;cursor:pointer}
.quiz-options-large button.correct{border-color:#1aae55;background:#edfff3}.quiz-options-large button.wrong{border-color:#dc4c4c;background:#fff0f0}
.inline-feedback{margin:18px auto;padding:14px;border-radius:14px;background:#f6f3ff;max-width:620px}
.speaking-room-page{max-width:900px}.speaking-room-card{padding:42px}.speaking-avatar-large{font-size:8rem}.speaking-room-card h2{font-size:2.2rem}.translation{color:#777}
.waveform{height:70px;margin:18px 0;background:repeating-linear-gradient(90deg,transparent 0 6px,#d8ccfb 7px 10px,transparent 11px 16px);mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}
.mic-button.huge{width:100px;height:100px;font-size:2.5rem}.speaking-actions{display:flex;justify-content:center;gap:14px;margin-top:18px}.speaking-actions button,.speaking-actions a{border:0;border-radius:999px;padding:12px 18px;background:#f2edff;color:#6137d9;text-decoration:none;font-weight:800;cursor:pointer}
@media(max-width:850px){.lesson-topbar{grid-template-columns:1fr}.lesson-topbar>a:last-child{text-align:left}.kana-grid-page{grid-template-columns:repeat(3,1fr)}.writing-layout{grid-template-columns:1fr}.vocabulary-page-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kana-grid-page{grid-template-columns:repeat(2,1fr)}.vocabulary-page-grid{grid-template-columns:1fr}.lesson-tabs{overflow:auto;justify-content:flex-start}.stroke-kana{font-size:10rem}}


/* V10.4 full UI */
.auth-page{max-width:1100px;margin:42px auto 90px;padding:0 22px;display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid #ece7e1;border-radius:30px;overflow:hidden;box-shadow:0 20px 55px #3d286517}
.auth-visual{padding:42px;background:linear-gradient(145deg,#fff5fa,#eee9ff);display:flex;flex-direction:column;justify-content:center}.auth-visual img{width:100%;max-height:360px;object-fit:contain}.auth-visual h1{font-size:2.2rem;margin:18px 0 6px}.auth-visual p{color:#6f6878}
.auth-register-visual{background:linear-gradient(145deg,#eef6ff,#fff7df)}
.auth-card{padding:52px;display:flex;flex-direction:column;justify-content:center}.auth-logo{text-decoration:none;color:#6b43d7;font-size:1.25rem}.auth-card h2{font-size:2rem;margin:25px 0 5px}.auth-card>p{color:#777}
.auth-form{display:grid;gap:17px;margin-top:20px}.auth-form label{font-weight:800;color:#3c3447}.auth-form input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:14px 16px;border:1px solid #ddd6e7;border-radius:13px;font:inherit;outline:0}.auth-form input:focus{border-color:#835de8;box-shadow:0 0 0 4px #8056e71c}.auth-form button{border:0;border-radius:13px;padding:15px;background:linear-gradient(135deg,#8356ed,#6639da);color:#fff;font-weight:900;font-size:1rem;cursor:pointer}.auth-alert{padding:12px;border-radius:10px;background:#fff0f0;color:#b22}.auth-switch{text-align:center}.auth-switch a{color:#7144dd;font-weight:900}
.content-learning-page,.speaking-course-page{max-width:1180px;margin:28px auto 90px;padding:0 22px}.content-hero{display:grid;grid-template-columns:1fr 430px;align-items:center;border:1px solid #ece7e1;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 13px 34px #0000000d}.content-hero>div{padding:38px}.content-hero a{text-decoration:none;color:#7042dc;font-weight:900}.content-hero h1{font-size:2.4rem;margin:18px 0 8px}.content-hero p{color:#706a75}.content-hero img{width:100%;height:260px;object-fit:cover}
.content-switch,.content-tabs{display:flex;gap:10px;justify-content:center;margin:18px 0}.content-switch a,.content-tabs a{text-decoration:none;padding:11px 18px;border-radius:999px;background:#fff;border:1px solid #e4ddd7;color:#716b74;font-weight:800}.content-switch a.active,.content-tabs a.active{background:#7347e7;color:#fff;border-color:#7347e7}
.full-character-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:13px}.full-character-grid>a{position:relative;text-decoration:none;color:#29242d;background:#fff;border:1px solid #e9e3dd;border-radius:17px;padding:17px 8px;text-align:center;box-shadow:0 8px 22px #00000008}.full-character-grid b{display:block;font-size:2.35rem}.full-character-grid span{color:#7347e7;font-weight:800}.full-character-grid button{position:absolute;right:5px;top:5px;border:0;background:#f4efff;border-radius:50%;width:28px;height:28px;cursor:pointer}
.writing-full-layout{display:grid;grid-template-columns:220px 1fr;gap:18px}.character-selector{background:#fff;border:1px solid #e8e2dd;border-radius:20px;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:680px;overflow:auto}.character-selector a{text-decoration:none;color:#333;background:#faf8f5;border-radius:9px;padding:8px;text-align:center;font-size:1.2rem}.character-selector a.active{background:#7347e7;color:#fff}
.writing-workspace{background:#fff;border:1px solid #e8e2dd;border-radius:22px;padding:25px}.selected-char{font-size:12rem;color:#ff3d80;text-align:center;line-height:1}.writing-workspace h2{text-align:center}.writing-workspace h2 button{border:0;background:#eee7ff;border-radius:50%;padding:8px}.writing-workspace canvas{width:100%;border:1px solid #ded5eb;border-radius:14px;background:repeating-linear-gradient(0deg,#fff,#fff 39px,#eee9f6 40px);touch-action:none}.canvas-actions{display:flex;gap:10px;margin-top:10px}.canvas-actions button{border:0;padding:11px 18px;border-radius:10px;cursor:pointer}.canvas-actions button:last-child{background:#7347e7;color:#fff}
.topic-vocab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.topic-vocab-grid article{background:#fff;border:1px solid #e9e3dd;border-radius:19px;padding:18px;text-align:center;box-shadow:0 8px 20px #00000009}.topic-vocab-grid article>div{font-size:4rem}.topic-vocab-grid h3{font-size:1.25rem;margin:10px 0 3px}.topic-vocab-grid p{color:#777}.topic-vocab-grid button{border:0;border-radius:999px;padding:8px 13px;background:#eee8ff;color:#6338d4;cursor:pointer}
.question-deck{max-width:780px;margin:0 auto;background:#fff;border:1px solid #e8e2dd;border-radius:24px;padding:30px;box-shadow:0 12px 30px #0000000b;text-align:center}.deck-progress{height:9px;background:#eee9f5;border-radius:99px;overflow:hidden}.deck-progress i{display:block;height:100%;width:0;background:#7347e7}.deck-count{color:#777}.deck-question{font-size:1.6rem}.deck-options{display:grid;grid-template-columns:1fr 1fr;gap:13px}.deck-options button{font-size:1.5rem;padding:20px;border-radius:14px;border:1px solid #ddd6e7;background:#fff;cursor:pointer}.deck-options button.correct{background:#eafff0;border-color:#18a850}.deck-options button.wrong{background:#fff0f0;border-color:#d94848}.deck-feedback{min-height:55px;margin:15px 0;padding:13px;border-radius:12px;background:#f5f1ff}.deck-next{border:0;border-radius:12px;padding:14px 30px;background:#7347e7;color:#fff;font-weight:900;cursor:pointer}
.tone-learning{background:#fff;border:1px solid #e8e2dd;border-radius:22px;padding:28px}.tone-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tone-cards button{border:1px solid #e2dbe8;background:#fff;border-radius:16px;padding:20px;cursor:pointer}.tone-cards b{display:block;font-size:2.3rem}.tone-cards span{display:block;color:#777}
.course-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.course-topic-grid a{text-decoration:none;color:#332c3c;background:#fff;border:1px solid #e8e2dd;border-radius:20px;padding:22px;text-align:center}.course-topic-grid span{font-size:4rem}.course-topic-grid p{color:#777}
.speaking-course-page>header{text-align:center;background:#fff;border:1px solid #e8e2dd;border-radius:22px;padding:24px}.speaking-course-page header a{text-decoration:none;color:#7042dc}.speaking-layout-full{display:grid;grid-template-columns:360px 1fr;gap:18px;margin-top:18px}.prompt-list{display:grid;gap:9px}.prompt-list button{display:grid;grid-template-columns:50px 1fr;text-align:left;border:1px solid #e5ded9;background:#fff;border-radius:14px;padding:12px;cursor:pointer}.prompt-list button.active{border-color:#7347e7;background:#f4f0ff}.prompt-list span{font-size:2rem;grid-row:1/3}.prompt-list small{color:#777}.speaking-stage{background:#fff;border:1px solid #e5ded9;border-radius:22px;padding:35px;text-align:center}.speaking-stage-avatar{font-size:7rem}.speaking-stage h2{font-size:2.3rem}.speaking-controls{display:flex;justify-content:center;gap:18px;align-items:center}.speaking-controls button{border:0;border-radius:999px;padding:13px 18px;cursor:pointer}.speaking-controls .big-mic{width:95px;height:95px;background:#7347e7;color:#fff;font-size:2.4rem}.speech-score{margin-top:18px;padding:15px;border-radius:12px;background:#effcf3;color:#17753e}
@media(max-width:900px){.auth-page,.content-hero,.speaking-layout-full{grid-template-columns:1fr}.auth-visual{display:none}.full-character-grid{grid-template-columns:repeat(5,1fr)}.writing-full-layout{grid-template-columns:1fr}.character-selector{grid-template-columns:repeat(8,1fr);max-height:none}.topic-vocab-grid,.course-topic-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.auth-card{padding:28px}.full-character-grid{grid-template-columns:repeat(3,1fr)}.character-selector{grid-template-columns:repeat(6,1fr)}.topic-vocab-grid,.course-topic-grid,.tone-cards,.deck-options{grid-template-columns:1fr}.content-hero img{height:190px}.selected-char{font-size:8rem}}


/* ===== TriLingo V11 Phase 1 ===== */
.v11-topbar{background:#fff;border-bottom:1px solid #eee8e2}.v11-brand img{display:block;height:46px;width:auto;max-width:210px;object-fit:contain}
.v11-dashboard{max-width:1320px;margin:28px auto 90px;padding:0 22px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}
.v11-main,.v11-side{min-width:0}
.v11-hero{display:grid;grid-template-columns:.82fr 1.18fr;background:linear-gradient(135deg,#fff8fb,#efeaff);border:1px solid #ece6e0;border-radius:30px;overflow:hidden;min-height:320px;box-shadow:0 18px 45px #3b25580f}
.v11-hero-copy{padding:46px;display:flex;flex-direction:column;justify-content:center}.v11-hero-copy p{margin:0 0 12px;color:#6e6678;font-weight:800}.v11-hero-copy h1{font-size:2.65rem;line-height:1.12;margin:0 0 12px;color:#342c40}.v11-hero-copy span{color:#756e7c}.v11-hero-copy a{align-self:flex-start;margin-top:24px;padding:13px 21px;border-radius:999px;background:linear-gradient(135deg,#8759ef,#6537d8);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 12px 24px #7044dc35}
.v11-hero-art{overflow:hidden}.v11-hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.v11-language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.v11-language-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #ece6e0;border-radius:22px;overflow:hidden;box-shadow:0 12px 28px #0000000b;transition:.2s}.v11-language-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px #00000014}.v11-language-card>img{width:100%;height:165px;object-fit:cover}.v11-language-card>div{padding:17px}.v11-language-card h2{margin:0;font-size:1.45rem}.v11-language-card p{margin:2px 0 10px;color:#777}.v11-language-card strong{display:block}.v11-language-card small{display:flex;justify-content:space-between;margin:9px 0;color:#777}.v11-language-card i{display:block;height:7px;border-radius:99px;background:#eee9f2;overflow:hidden}.v11-language-card i b{display:block;height:100%;background:linear-gradient(90deg,#ff4f89,#7447e7)}.v11-language-card em{display:block;margin-top:12px;color:#6d43da;font-style:normal;font-weight:900}
.v11-title{display:flex;align-items:center;justify-content:space-between;margin:27px 0 13px}.v11-title h2{margin:0;font-size:1.2rem}.v11-title a{color:#7043dc;text-decoration:none;font-weight:800}
.v11-popular{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.v11-popular a{background:#fff;border:1px solid #ece6e0;border-radius:17px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 8px 20px #00000008}.v11-popular img{width:100%;height:120px;object-fit:cover}.v11-popular h3{font-size:.9rem;margin:10px 12px 4px}.v11-popular p{margin:0 12px 13px;color:#777;font-size:.75rem}
.v11-side{display:grid;gap:18px;align-content:start}.v11-side-card{background:#fff;border:1px solid #ece6e0;border-radius:22px;padding:18px;box-shadow:0 12px 28px #0000000a}.v11-side-card .v11-title{margin:0 0 8px}.v11-exercise-row,.v11-speaking-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:11px;text-decoration:none;color:inherit;padding:12px 0;border-bottom:1px solid #eee8e2}.v11-exercise-row>span,.v11-speaking-row>span{width:42px;height:42px;border-radius:12px;background:#f1ecff;display:grid;place-items:center;font-weight:900}.v11-exercise-row b,.v11-speaking-row b{display:block;font-size:.86rem}.v11-exercise-row small,.v11-speaking-row small{color:#777;font-size:.72rem}.v11-exercise-row em,.v11-speaking-row em{font-style:normal;color:#7043dc;font-size:.72rem;font-weight:800}
.v11-auth{max-width:1120px;margin:42px auto 90px;padding:0 22px;display:grid;grid-template-columns:1.08fr .92fr;background:#fff;border:1px solid #ece6e0;border-radius:30px;overflow:hidden;box-shadow:0 22px 60px #3b255817}.v11-auth-art{background:linear-gradient(145deg,#fff4fa,#eee9ff);min-height:610px}.v11-auth-art img{width:100%;height:100%;object-fit:cover}.v11-auth-register img{object-position:center}.v11-auth-panel{padding:52px;display:flex;flex-direction:column;justify-content:center}.v11-auth-logo{width:220px;height:auto}.v11-auth-panel h1{font-size:2rem;margin:25px 0 5px}.v11-auth-panel>p{color:#777}.v11-auth-form{display:grid;gap:17px;margin-top:20px}.v11-auth-form label{font-weight:800}.v11-auth-form input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:14px 16px;border:1px solid #ddd6e7;border-radius:13px;font:inherit;outline:0}.v11-auth-form input:focus{border-color:#825be9;box-shadow:0 0 0 4px #8056e71c}.v11-auth-form button{border:0;border-radius:13px;padding:15px;background:linear-gradient(135deg,#8357ed,#6539d8);color:#fff;font-weight:900;font-size:1rem;cursor:pointer}.v11-auth-panel a{color:#7043dc;font-weight:900}.v11-auth-alert{padding:12px;border-radius:10px;background:#fff0f0;color:#b22}
@media(max-width:1080px){.v11-dashboard{grid-template-columns:1fr}.v11-side{grid-template-columns:1fr 1fr}.v11-popular{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.v11-hero,.v11-auth{grid-template-columns:1fr}.v11-hero-art{height:300px}.v11-language-grid{grid-template-columns:1fr 1fr}.v11-auth-art{display:none}.v11-side{grid-template-columns:1fr}}
@media(max-width:560px){.v11-dashboard{padding:0 14px}.v11-hero-copy{padding:30px}.v11-hero-copy h1{font-size:2rem}.v11-language-grid,.v11-popular{grid-template-columns:1fr}.v11-auth-panel{padding:28px}.v11-brand img{height:38px;max-width:165px}}


/* ===== PWA Mobile UI Fix 11.02 ===== */
.v11-mobile-nav{display:none}
.v11-mobile-nav .bottom-nav-inner{max-width:560px;margin:0 auto}
.v11-mobile-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:#8b8790;font-size:1rem;font-weight:700;padding:8px 2px 7px;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent}
.v11-mobile-nav .nav-icon{display:grid;place-items:center;width:34px;height:28px;font-size:1.35rem;line-height:1;border-radius:11px;transition:.18s ease}
.v11-mobile-nav small{font-size:.62rem;line-height:1.1;white-space:nowrap}
.v11-mobile-nav a.active{color:#7549e8}
.v11-mobile-nav a.active .nav-icon{background:#eee8ff;color:#7549e8;transform:translateY(-1px)}
.v11-mobile-nav a.active:before{content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 4px 4px;background:#7549e8}

@media(max-width:720px){
  html{font-size:15px;-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom));overflow-x:hidden;background:#fbfaf8}
  .app-shell{width:100%;max-width:none;overflow:hidden}
  .page{padding:12px 12px calc(88px + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(16px)}
  .topbar-inner{min-height:66px;padding:9px 14px;gap:10px}
  .v11-brand img{height:35px;max-width:154px}
  .desktop-nav{display:none}
  .user-tools{gap:7px;margin-left:auto}
  .login-pill,.upgrade-pill,.avatar-pill,.settings-pill{font-size:.78rem;padding:8px 10px;white-space:nowrap}
  .user-tools .upgrade-pill{display:none}
  .bottom-nav.v11-mobile-nav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;background:rgba(255,255,255,.97);border-top:1px solid #e9e5ec;box-shadow:0 -8px 28px #34204e14;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(18px)}
  .v11-mobile-nav .bottom-nav-inner{height:64px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 4px}

  /* Dashboard is compact on phone instead of desktop-sized cards. */
  .v11-dashboard{display:block;width:100%;margin:12px auto 0;padding:0}
  .v11-side{display:none}
  .v11-hero{display:block;min-height:0;border-radius:20px}
  .v11-hero-art{height:auto;aspect-ratio:16/10}
  .v11-hero-art img{display:block;width:100%;height:100%;object-fit:cover}
  .v11-hero-copy{padding:22px 20px}
  .v11-hero-copy h1{font-size:1.75rem;line-height:1.15}
  .v11-hero-copy p{font-size:.86rem;margin-bottom:8px}
  .v11-hero-copy span{font-size:.83rem}
  .v11-hero-copy a{margin-top:16px;padding:11px 16px;font-size:.86rem}
  .v11-language-grid{display:grid;grid-template-columns:1fr;gap:13px;margin-top:14px}
  .v11-language-card{display:grid;grid-template-columns:38% 62%;min-height:172px;border-radius:18px}
  .v11-language-card>img{height:100%;min-height:172px;object-fit:cover}
  .v11-language-card>div{padding:15px 14px}
  .v11-language-card h2{font-size:1.22rem}
  .v11-language-card p{font-size:.8rem;margin:2px 0 7px}
  .v11-language-card strong{font-size:.82rem}
  .v11-language-card small{font-size:.7rem;margin:8px 0 6px}
  .v11-language-card em{font-size:.82rem;margin-top:9px}
  .v11-title{margin:20px 2px 10px}
  .v11-title h2{font-size:1.08rem}
  .v11-popular{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1px 8px}
  .v11-popular a{flex:0 0 158px;scroll-snap-align:start;border-radius:15px}
  .v11-popular img{height:100px}
  .v11-popular h3{font-size:.8rem}

  /* Language selection page: remove giant cards and clipping. */
  .study-header{padding:7px 2px 2px;overflow:visible}
  .study-header .eyebrow{font-size:.68rem;letter-spacing:.08em}
  .study-header h1{font-size:1.85rem;line-height:1.14;margin:8px 0 9px;overflow-wrap:anywhere}
  .study-header p{font-size:.92rem;line-height:1.45;margin:0 0 15px}
  .language-zone-grid{gap:14px}
  .language-zone-card{display:grid;grid-template-columns:38% 62%;min-height:188px;border-width:2px;border-radius:21px;overflow:hidden}
  .language-zone-card img{width:100%;height:100%;min-height:188px;aspect-ratio:auto;object-fit:cover;object-position:center}
  .language-zone-card>div{min-width:0;padding:16px 14px;display:flex;flex-direction:column;justify-content:center}
  .zone-flag{font-size:1.15rem}
  .language-zone-card h2{font-size:1.35rem;line-height:1.1;margin:3px 0 5px}
  .language-zone-card strong{font-size:.79rem;line-height:1.3}
  .language-zone-card p{font-size:.75rem;line-height:1.4;margin:7px 0 11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .zone-start{align-self:flex-start;padding:9px 13px;font-size:.76rem}

  /* Shared content pages stay inside viewport. */
  .content-learning-page,.speaking-course-page,.v11-auth{width:100%;margin:12px auto 0;padding:0}
  .content-hero{border-radius:20px;display:block}
  .content-hero>div{padding:20px}
  .content-hero h1{font-size:1.75rem;margin:12px 0 6px}
  .content-hero img{height:190px}
  .content-switch,.content-tabs{justify-content:flex-start;overflow-x:auto;padding-bottom:4px}
  .content-switch a,.content-tabs a{white-space:nowrap;padding:9px 13px;font-size:.76rem}
  .full-character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .full-character-grid>a{padding:13px 5px;border-radius:14px}
  .full-character-grid b{font-size:1.8rem}

  /* Prevent accidental horizontal scrolling from any legacy element. */
  img,video,canvas{max-width:100%}
  .language-zone-card,.v11-language-card,.v11-hero,.content-hero{max-width:100%}
}

@media(max-width:390px){
  .v11-mobile-nav small{font-size:.57rem}
  .v11-mobile-nav .nav-icon{font-size:1.22rem}
  .v11-language-card,.language-zone-card{grid-template-columns:36% 64%}
  .language-zone-card h2{font-size:1.22rem}
  .language-zone-card p{font-size:.7rem}
}

/* ===== PWA Content + Navigation Fix 11.03 ===== */
.visual-learning-grid,.lesson-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 32px}.visual-learning-card,.lesson-image-card{display:grid;grid-template-columns:42% 58%;background:#fff;border:1px solid #e6e1e9;border-radius:21px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 10px 28px #3c274c0c}.visual-learning-card img,.lesson-image-card img{width:100%;height:100%;min-height:210px;object-fit:cover}.visual-learning-card>div,.lesson-image-card>div{padding:19px;min-width:0}.visual-learning-card span,.lesson-image-card small{display:inline-block;background:#f0e9ff;color:#7043dc;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:900}.visual-learning-card h2,.lesson-image-card h2{margin:10px 0 4px;font-size:1.25rem}.visual-learning-card strong,.lesson-image-card b{display:block}.visual-learning-card p,.lesson-image-card p{color:#736c76;line-height:1.45}.visual-learning-card em,.lesson-image-card span{color:#7043dc;font-style:normal;font-weight:900}.lesson-detail-hero{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:center;background:#fff;border:1px solid #e5e0e8;border-radius:24px;padding:20px;position:relative}.lesson-detail-hero>a{position:absolute;top:16px;left:16px;background:#fff;color:#7043dc;padding:8px 11px;border-radius:999px;text-decoration:none;font-weight:900}.lesson-detail-hero img{width:100%;height:245px;object-fit:contain;border-radius:17px;background:#faf7ff}.lesson-detail-hero h1{font-size:2rem;margin:8px 0}.kanji-study-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}.kanji-study-grid article{background:#fff;border:1px solid #e7e1ea;border-radius:17px;padding:16px;text-align:center}.kanji-study-grid b{display:block;font-size:3.2rem;color:#d83f70}.kanji-study-grid span{display:block;color:#777}.kanji-study-grid button,.kanji-study-grid a{display:block;width:100%;box-sizing:border-box;margin-top:9px;border:0;border-radius:9px;padding:8px;background:#f1ecff;color:#6840d6;text-decoration:none}.big-study-action{display:block;max-width:480px;margin:18px auto;padding:14px;text-align:center;background:#7447e7;color:#fff;text-decoration:none;border-radius:999px;font-weight:900}.grammar-example-panel{max-width:820px;margin:18px auto;background:#fff;border:1px solid #e6e1e9;border-radius:22px;padding:22px}.grammar-example-panel article{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #eee8ef}.grammar-example-panel article b{font-size:1.25rem}.grammar-example-panel button{border:0;border-radius:999px;padding:9px 12px;background:#f1ecff}.grammar-mini-quiz{background:#faf7ff;border-radius:16px;padding:17px;margin-top:16px}.grammar-mini-quiz a{color:#7043dc;font-weight:900}.practice-card-visual{display:grid;grid-template-columns:160px 1fr;padding:0!important;border-bottom:0!important}.practice-card-visual>img{width:100%;height:100%;min-height:190px;object-fit:contain;background:#faf7ff}.practice-card-visual>section{padding:18px;border-bottom:6px solid #8054e8}.v11-mobile-nav .nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.bottom-nav.v11-mobile-nav{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 10px calc(8px + env(safe-area-inset-bottom))!important}.v11-mobile-nav .bottom-nav-inner{height:67px!important;background:rgba(255,255,255,.96);border:1px solid #e4dfea;border-radius:22px;box-shadow:0 10px 35px #27143626;padding:4px 5px!important}.v11-mobile-nav a{border-radius:17px}.v11-mobile-nav a.active{background:linear-gradient(135deg,#f1ebff,#ece6ff)}.v11-mobile-nav a.active:before{display:none}.v11-mobile-nav a.active .nav-icon{background:#7447e7!important;color:#fff!important;border-radius:12px}.v11-mobile-nav small{font-weight:800!important}
@media(max-width:720px){body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.visual-learning-grid,.lesson-image-grid{grid-template-columns:1fr;gap:13px}.visual-learning-card,.lesson-image-card{grid-template-columns:36% 64%;min-height:165px}.visual-learning-card img,.lesson-image-card img{min-height:165px;height:100%;object-fit:contain;background:#faf7ff;padding:5px;box-sizing:border-box}.visual-learning-card>div,.lesson-image-card>div{padding:14px 12px}.visual-learning-card h2,.lesson-image-card h2{font-size:1.06rem}.visual-learning-card p,.lesson-image-card p{font-size:.74rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.lesson-detail-hero{grid-template-columns:1fr;padding:14px}.lesson-detail-hero img{height:auto;max-height:260px;object-fit:contain;margin-top:38px}.lesson-detail-hero h1{font-size:1.55rem}.kanji-study-grid{grid-template-columns:repeat(2,1fr)}.practice-card-visual{grid-template-columns:36% 64%}.practice-card-visual>img{min-height:165px;object-fit:contain;padding:4px;box-sizing:border-box}.practice-card-visual>section{padding:13px}.language-zone-card img,.v11-language-card>img,.showcase-card>img,.popular-card img,.content-hero img{object-fit:contain!important;background:#faf7ff}.language-zone-card img{padding:5px;box-sizing:border-box}.bottom-nav.v11-mobile-nav{left:0!important;right:0!important}.v11-mobile-nav small{font-size:.58rem!important}.v11-mobile-nav .nav-icon{width:34px!important;height:31px!important}}
@media(max-width:390px){.visual-learning-card,.lesson-image-card,.practice-card-visual{grid-template-columns:34% 66%}.v11-mobile-nav .bottom-nav-inner{border-radius:19px}.v11-mobile-nav small{font-size:.54rem!important}}


/* ===== Visual Lesson Pack 11.04 (additive to stable 11.03) ===== */
.vl-entry{max-width:1180px;margin:16px auto;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#fff8df,#fff);border:1px solid #f2e7c5;border-radius:18px;padding:16px 18px}.vl-entry>div{display:flex;align-items:center;gap:13px}.vl-entry>div>span{font-size:2.7rem}.vl-entry h2{margin:0;font-size:1.08rem}.vl-entry p{margin:4px 0 0;color:#777}.vl-entry>a{white-space:nowrap;text-decoration:none;background:#ffbd28;color:#332500;border-radius:11px;padding:10px 14px;font-weight:900}
.vl-library,.vl-player{max-width:1180px;margin:28px auto 90px;padding:0 22px}.vl-library-head{display:flex;align-items:end;justify-content:space-between;gap:22px;background:linear-gradient(135deg,#fff8e0,#f6f1ff);border:1px solid #eee3cf;border-radius:24px;padding:26px}.vl-library-head a{color:#7043dc;text-decoration:none;font-weight:900}.vl-library-head p{color:#8b6c1f;font-weight:900}.vl-library-head h1{margin:7px 0;font-size:2rem}.vl-library-head span{color:#777}.vl-library-head nav{display:flex;gap:8px}.vl-library-head nav a{padding:9px 13px;border-radius:999px;background:#fff;color:#736d78}.vl-library-head nav a.active{background:#7447e7;color:#fff}
.vl-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:20px}.vl-lesson-card{display:block;background:#fff;border:1px solid #ece5dd;border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 10px 26px #3b2b1809;transition:.18s}.vl-lesson-card:hover{transform:translateY(-3px);box-shadow:0 15px 34px #3b2b1815}.vl-lesson-card>img{width:100%;height:190px;object-fit:contain;background:#fff9e9}.vl-card-body{padding:16px}.vl-card-meta{display:flex;justify-content:space-between;align-items:center}.vl-card-meta span{background:#f0eaff;color:#7043dc;border-radius:999px;padding:5px 9px;font-weight:900;font-size:.75rem}.vl-card-meta small{color:#888}.vl-card-body h2{margin:10px 0 4px;font-size:1.2rem}.vl-card-body p{margin:0;color:#777}.vl-card-thumbs{display:flex;align-items:center;margin:13px 0}.vl-card-thumbs img{width:42px;height:42px;object-fit:contain;border:2px solid #fff;border-radius:50%;background:#faf7ef;margin-right:-7px}.vl-card-thumbs b{margin-left:12px;color:#a07916}.vl-card-body strong{display:block;color:#6d42dc;margin-top:12px}
.vl-player-head{display:grid;grid-template-columns:170px 1fr 180px;align-items:center;gap:15px;background:#fff;border:1px solid #ebe4df;border-radius:20px;padding:17px 20px}.vl-player-head>a{color:#7043dc;text-decoration:none;font-weight:900}.vl-player-head span{display:inline-block;background:#eee7ff;color:#7043dc;border-radius:999px;padding:4px 8px;font-weight:900;font-size:.72rem}.vl-player-head h1{margin:5px 0 2px}.vl-player-head p{margin:0;color:#777}.vl-head-progress b{display:block;text-align:right}.vl-head-progress i{display:block;height:7px;border-radius:99px;background:#eee9f1;overflow:hidden}.vl-head-progress em{display:block;height:100%;background:linear-gradient(90deg,#ffbd28,#7447e7)}
.vl-player-tabs{display:flex;gap:8px;justify-content:center;margin:16px 0}.vl-player-tabs button{border:0;border-radius:999px;padding:10px 16px;background:#f0ecf4;color:#777;font-weight:900}.vl-player-tabs button.active{background:#7447e7;color:#fff}.vl-tab{display:none}.vl-tab.active{display:block}.vl-cover{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #ebe4df}.vl-cover>img{width:100%;height:340px;object-fit:contain;background:#fff8e5}.vl-cover>div{display:flex;flex-direction:column;justify-content:center;padding:30px}.vl-cover small{align-self:flex-start;background:#eee7ff;color:#7043dc;padding:5px 9px;border-radius:999px}.vl-cover h2{font-size:2rem;margin:12px 0 6px}.vl-cover p{color:#777}
.vl-vocab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}.vl-vocab-grid article{display:grid;grid-template-columns:150px 1fr;background:#fff;border:1px solid #ebe4df;border-radius:18px;overflow:hidden}.vl-vocab-grid img{width:100%;height:150px;object-fit:contain;background:#fff9e9}.vl-vocab-grid article>div{padding:18px}.vl-vocab-grid h3{font-size:1.45rem;margin:0 0 5px}.vl-vocab-grid p{color:#777}.vl-vocab-grid button,.vl-sentence-list button{border:0;border-radius:999px;background:#f0eaff;color:#7043dc;padding:8px 11px}.vl-next-tab{display:block;margin:18px auto;border:0;border-radius:12px;background:#7447e7;color:#fff;padding:12px 18px;font-weight:900}
.vl-sentence-list{display:grid;gap:12px}.vl-sentence-list article{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;gap:12px;background:#fff;border:1px solid #ebe4df;border-radius:17px;padding:15px}.vl-sentence-list article>span{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#fff3c7;color:#8f6812;font-weight:900}.vl-sentence-list h2{margin:0;font-size:1.25rem}.vl-sentence-list p{margin:4px 0 0;color:#777}.vl-speaking-card{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:center;margin-top:17px;background:linear-gradient(135deg,#eef8ff,#fff);border:1px solid #dceaf2;border-radius:20px;padding:18px}.vl-speaking-visual img{width:100%;height:200px;object-fit:contain}.vl-speaking-card h2{margin:0}.vl-speaking-card button{border:0;border-radius:11px;padding:10px 13px;margin-right:7px;background:#e7f4ff;color:#1671a3;font-weight:900}.vl-speaking-card #vlStartSpeech{background:#7447e7;color:#fff}.vl-speaking-card #vlSpeechFeedback{margin-top:11px;color:#555}
.vl-exercise-shell{max-width:760px;margin:auto;background:#fff;border:1px solid #ebe4df;border-radius:22px;padding:25px;text-align:center}.vl-exercise-top{display:flex;justify-content:space-between}.vl-exercise-progress{height:8px;background:#eee9f1;border-radius:99px;overflow:hidden;margin:14px 0}.vl-exercise-progress i{display:block;height:100%;background:linear-gradient(90deg,#ffbd28,#7447e7)}#vlQuestionMedia img{width:min(340px,100%);height:230px;object-fit:contain;background:#fff8e5;border-radius:16px}.vl-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.vl-answer-grid button{border:1px solid #ddd5e1;border-radius:13px;background:#fff;padding:14px;font-size:1rem}.vl-answer-grid button.correct{background:#edfff3;border-color:#17a952}.vl-answer-grid button.wrong{background:#fff0f0;border-color:#d44848}.vl-order-pool,.vl-order-answer{display:flex;flex-wrap:wrap;gap:8px;min-height:55px;padding:10px;border:1px dashed #d7cedf;border-radius:12px;margin:9px 0}.vl-order-pool button,.vl-order-answer button{border:0;border-radius:10px;background:#f0eaff;color:#7043dc;padding:9px 12px}.vl-speaking-exercise button{width:90px;height:90px;border:0;border-radius:50%;background:#7447e7;color:#fff;font-size:2rem}.vl-speaking-exercise p{font-size:1.35rem}.vl-exercise-shell>#vlExerciseFeedback{margin:14px 0;padding:12px;background:#f5f1ff;border-radius:11px}.vl-exercise-shell>#vlExerciseNext{border:0;border-radius:11px;background:#7447e7;color:#fff;padding:12px 18px;font-weight:900}

/* Slight desktop polish only; no structural changes to stable UI. */
@media(min-width:1000px){.v11-dashboard,.content-learning-page{filter:none}.v11-language-card,.premium-library-item,.practice-card{transition:transform .18s,box-shadow .18s}.v11-language-card:hover,.premium-library-item:hover,.practice-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px #37254d12}}

@media(max-width:900px){.vl-library-grid{grid-template-columns:1fr 1fr}.vl-cover{grid-template-columns:1fr}.vl-cover>img{height:290px}.vl-vocab-grid{grid-template-columns:1fr}.vl-speaking-card{grid-template-columns:200px 1fr}}
@media(max-width:620px){.vl-entry{flex-direction:column;align-items:flex-start}.vl-library,.vl-player{padding:0 13px;margin-top:12px}.vl-library-head{display:block;padding:19px}.vl-library-head h1{font-size:1.6rem}.vl-library-head nav{margin-top:13px;overflow:auto}.vl-library-grid{grid-template-columns:1fr;gap:14px}.vl-lesson-card>img{height:auto;aspect-ratio:16/9;object-fit:contain}.vl-player-head{grid-template-columns:1fr;text-align:center}.vl-head-progress b{text-align:center}.vl-player-tabs{justify-content:flex-start;overflow:auto}.vl-player-tabs button{white-space:nowrap;font-size:.76rem;padding:9px 12px}.vl-cover>img{height:auto;aspect-ratio:16/10}.vl-cover>div{padding:19px}.vl-cover h2{font-size:1.55rem}.vl-vocab-grid article{grid-template-columns:42% 58%}.vl-vocab-grid img{height:145px}.vl-vocab-grid article>div{padding:13px}.vl-vocab-grid h3{font-size:1.15rem}.vl-sentence-list article{grid-template-columns:40px 1fr 42px}.vl-sentence-list h2{font-size:1.05rem}.vl-speaking-card{grid-template-columns:1fr;text-align:center}.vl-speaking-visual img{height:170px}.vl-answer-grid{grid-template-columns:1fr}.vl-exercise-shell{padding:18px}}


/* ===== Quality Part 1: English premium vocabulary dashboard ===== */
.v11-quality-vocab{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.v11-quality-vocab::-webkit-scrollbar{display:none}
.v11-quality-vocab>a{
  flex:0 0 150px;
  scroll-snap-align:start;
  overflow:hidden;
  border:1px solid #ece5de;
  border-radius:16px;
  background:#fff;
  color:#262126;
  text-decoration:none;
  box-shadow:0 8px 22px #3b29100d;
}
.v11-quality-vocab img{
  display:block;
  width:100%;
  height:125px;
  object-fit:cover;
  background:#fff7dd;
}
.v11-quality-vocab strong,
.v11-quality-vocab span{
  display:block;
  padding-left:12px;
  padding-right:12px;
}
.v11-quality-vocab strong{
  margin-top:10px;
  font-size:1rem;
}
.v11-quality-vocab span{
  padding-top:3px;
  padding-bottom:12px;
  color:#77706d;
  font-size:.84rem;
}
@media(max-width:620px){
  .v11-quality-vocab>a{flex-basis:138px}
  .v11-quality-vocab img{height:116px}
}

/* ===== PWA & MOBILE NAVIGATION FIX ===== */
@media (max-width: 1024px), (display-mode: standalone) {
  body {
    padding-bottom: 90px !important;
  }
  .bottom-nav, .v11-mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.09) !important;
    z-index: 999999 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .bottom-nav-inner {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
  }
  .bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    text-decoration: none !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 2px !important;
    transition: all 0.25s !important;
    border-radius: 16px !important;
  }
  .bottom-nav a.active {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.08) !important;
  }
  .bottom-nav a.active .nav-icon svg {
    fill: #7c3aed !important;
    transform: scale(1.1) !important;
  }
  .bottom-nav .nav-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: #64748b !important;
    margin-bottom: 3px !important;
    display: block !important;
    transition: transform 0.2s !important;
  }
}

/* ===== AAA PREMIUM DESIGN SYSTEM UPGRADE ===== */
:root {
  --primary-purple: #7c3aed;
  --primary-purple-hover: #6d28d9;
  --accent-gold: #f59e0b;
  --accent-pink: #ec4899;
  --accent-blue: #2563eb;
  --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --card-shadow-hover: 0 20px 40px -12px rgba(124, 58, 237, 0.22);
}

body {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Header */
.topbar, .v11-topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.topbar-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 12px 24px !important;
}

.desktop-nav a {
  position: relative !important;
  font-weight: 700 !important;
  color: #475569 !important;
  transition: color 0.2s ease !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
}

.desktop-nav a:hover {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

/* Floating Pills */
.upgrade-pill {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  color: #fff !important;
  padding: 9px 20px !important;
  border-radius: 30px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.upgrade-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4) !important;
}

.xp-pill {
  background: #fffbeeb0 !important;
  border: 1px solid #fef3c7 !important;
  color: #d97706 !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  font-weight: 800 !important;
}

/* Language Cards Upgrade */
.v11-language-card, .showcase-card, .language-card {
  border-radius: 24px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.v11-language-card:hover, .showcase-card:hover, .language-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* Card Buttons */
.v11-language-card em, .v11-language-card button, .showcase-body button {
  border-radius: 14px !important;
  font-weight: 800 !important;
  padding: 12px !important;
  transition: filter 0.2s !important;
}

.v11-language-card em:hover, .v11-language-card button:hover {
  filter: brightness(1.1) !important;
}

/* Micro-animations */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
}

.mic-button, .v9-audio {
  animation: pulseGlow 2.5s infinite !important;
}