@font-face{font-family:Nunito;src:local("Nunito");font-display:swap}
:root{--ink:#17233b;--muted:#7d879a;--line:#e8ebf2;--canvas:#f6f7fb;--paper:#fff;--coral:#fb7448;--coral-dark:#e95f35;--orange-soft:#fff0e8;--mint:#35b88f;--mint-soft:#e8f9f3;--blue:#548be8;--blue-soft:#eaf1ff;--purple:#7a64d8;--yellow:#ffbf3e;--shadow:0 18px 50px rgba(39,51,83,.08);--shadow-hover:0 22px 54px rgba(39,51,83,.15);--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:Nunito,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{border:0;font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(84,139,232,.38);outline-offset:3px}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;padding:28px 20px 24px;background:rgba(255,255,255,.96);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;background:transparent;text-align:left;padding:0 10px;margin-bottom:34px}
.brand-mark{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#ff956d,#f7663f);box-shadow:0 9px 24px rgba(251,116,72,.28);display:grid;place-items:center;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand strong,.brand small{display:block;line-height:1.05}.brand strong{font-size:19px}.brand small{font-size:14px;color:var(--coral);font-weight:900;margin-top:4px;letter-spacing:.5px}
.side-nav{display:grid;gap:8px}
.nav-item{position:relative;height:52px;padding:0 14px;background:transparent;color:#748096;border-radius:16px;display:flex;align-items:center;gap:14px;font-weight:800;text-align:left;transition:.2s}
.nav-item:hover{background:#f8f9fc;color:var(--ink)}
.nav-item.active{background:var(--orange-soft);color:var(--coral-dark)}
.nav-icon{width:26px;text-align:center;font-size:22px;line-height:1}.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);margin-left:auto}
.side-card{margin-top:auto;padding:20px 17px;background:linear-gradient(145deg,#2e3854,#1c263f);border-radius:22px;color:#fff;position:relative;overflow:hidden}
.side-card:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.07);right:-22px;top:-24px}
.side-card-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--yellow);color:#fff;margin-bottom:15px;box-shadow:0 6px 16px rgba(255,191,62,.24)}
.side-card strong,.side-card small{display:block}.side-card strong{font-size:14px}.side-card small{color:#bfc6d6;font-size:11px;margin-top:5px}
.mini-progress{height:6px;border-radius:10px;background:rgba(255,255,255,.13);margin-top:15px;overflow:hidden}.mini-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),#ffe089)}
.parent-link{display:flex;align-items:center;gap:12px;background:transparent;color:var(--muted);font-weight:800;padding:18px 14px 0;font-size:13px}
.main{margin-left:248px;min-height:100vh;padding:0 42px 64px;max-width:1600px}
.topbar{height:102px;display:flex;align-items:center;justify-content:space-between}
.top-greeting small,.top-greeting strong{display:block}.top-greeting small{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:1.3px}.top-greeting strong{font-size:20px;margin-top:5px}
.top-actions{display:flex;align-items:center;gap:10px}.action-pill{height:42px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:0 14px;display:flex;align-items:center;gap:7px}.action-pill small{color:var(--muted);font-size:11px}.action-pill b{font-size:14px}.fire{color:var(--coral);text-shadow:0 3px 8px rgba(251,116,72,.5)}.coin{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:#fff;font-size:12px}.avatar-button{position:relative;padding:0;margin-left:4px;width:45px;height:45px;border-radius:15px;background:#ffe4d8;overflow:visible}.avatar-button img{width:100%;height:100%;object-fit:cover;border-radius:15px}.avatar-button span{position:absolute;width:11px;height:11px;border-radius:50%;right:-2px;bottom:-2px;background:#36c992;border:3px solid #fff}
.page{display:none;animation:fadeUp .35s ease}.page.active{display:block}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-card{min-height:370px;border-radius:30px;background:linear-gradient(125deg,#26334f 0%,#1b243c 58%,#27385a 100%);overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;position:relative;box-shadow:0 26px 55px rgba(22,32,57,.18)}
.hero-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 10% 10%,rgba(255,255,255,.08) 0 2px,transparent 3px);background-size:28px 28px;mask-image:linear-gradient(90deg,#000,transparent 70%);opacity:.7}
.hero-copy{position:relative;z-index:2;padding:54px 20px 50px 56px;color:#fff}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.5px;color:#f8c8b8;display:flex;align-items:center;gap:8px}.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(251,116,72,.14)}
.hero-copy h1{font-size:clamp(33px,3.4vw,52px);line-height:1.12;letter-spacing:-1.6px;margin:18px 0 14px}.hero-copy h1 em{font-style:normal;color:#ff9b78}.hero-copy>p{color:#cdd4e2;max-width:570px;line-height:1.7;font-size:15px;margin:0}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:28px}
.btn{min-height:46px;border-radius:14px;padding:0 20px;font-weight:900;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:14px}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#ff8055,#f86439);color:#fff;box-shadow:0 11px 26px rgba(251,116,72,.28)}.btn-primary:hover{box-shadow:0 15px 30px rgba(251,116,72,.38)}.btn-secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn.full{width:100%}
.today-goal{display:flex;align-items:center;gap:10px}.today-goal>b{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;border:5px solid var(--mint);background:#fff;color:var(--ink);font-size:12px}.today-goal strong,.today-goal small{display:block}.today-goal strong{font-size:12px}.today-goal small{color:#9aa4b7;font-size:10px;margin-top:2px}
.hero-visual{position:relative;min-height:370px}.hero-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:linear-gradient(145deg,#ffb085,#ff7951);right:8%;top:11%;box-shadow:0 0 0 30px rgba(255,255,255,.03)}.hero-visual>img{position:absolute;z-index:2;bottom:-75px;right:2%;height:460px;max-width:100%;object-fit:contain;filter:drop-shadow(0 22px 23px rgba(0,0,0,.28))}.float-badge{position:absolute;z-index:4;background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(12,20,38,.22)}.badge-xp{left:3%;top:30%;padding:10px 14px;border-radius:13px;font-size:12px;font-weight:900;transform:rotate(-5deg)}.badge-star{right:8%;top:13%;width:43px;height:43px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--yellow);font-size:20px;transform:rotate(8deg)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:36px 2px 17px}.section-kicker{font-size:10px;letter-spacing:1.45px;color:var(--coral);font-weight:950}.section-heading h2,.panel-head h2,.closet-top h2{margin:6px 0 0;font-size:22px;letter-spacing:-.3px}.text-link{background:transparent;color:var(--muted);font-size:12px;font-weight:900}.text-link span{color:var(--coral);margin-left:6px}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.subject-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;cursor:pointer;box-shadow:0 8px 30px rgba(33,46,79,.035);transition:.25s}.subject-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.subject-art{height:170px;position:relative;overflow:hidden}.subject-art:after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(transparent,rgba(255,255,255,.38))}.math-card .subject-art{background:linear-gradient(145deg,#ffe2d7,#fff3eb)}.viet-card .subject-art{background:linear-gradient(145deg,#d9f4e9,#effcf8)}.english-card .subject-art{background:linear-gradient(145deg,#dce9ff,#f1f5ff)}.subject-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.09);mix-blend-mode:multiply}.subject-copy{padding:19px 20px 18px}.subject-label{font-size:9px;font-weight:950;letter-spacing:1.2px;color:var(--coral)}.viet-card .subject-label{color:#279d7b}.english-card .subject-label{color:#477fd9}.subject-copy h3{font-size:20px;margin:5px 0 4px}.subject-copy p{font-size:12px;color:var(--muted);margin:0}.subject-footer{display:flex;align-items:center;gap:9px;margin-top:16px}.progress-line{height:6px;background:#eff1f5;border-radius:10px;overflow:hidden;flex:1}.progress-line i{display:block;height:100%;border-radius:inherit;background:var(--coral)}.viet-card .progress-line i{background:var(--mint)}.english-card .progress-line i{background:var(--blue)}.subject-footer>b{font-size:11px}.subject-footer button{width:31px;height:31px;border-radius:10px;background:#f4f6fa;color:var(--muted);font-weight:900}
.dashboard-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:18px;margin-top:24px}.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 8px 30px rgba(33,46,79,.035)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.level-chip,.owned-count,.update-note{background:#f4f5f8;color:var(--muted);border-radius:11px;padding:7px 11px;font-size:10px;font-weight:900}.lesson-row{width:100%;background:#fff;display:grid;grid-template-columns:48px 1fr 48px 24px;align-items:center;gap:13px;padding:13px 4px;border-top:1px solid #f0f1f5;text-align:left}.lesson-row:hover .row-arrow{background:var(--coral);color:#fff}.lesson-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;font-weight:950}.orange{background:var(--orange-soft);color:var(--coral)}.mint{background:var(--mint-soft);color:var(--mint)}.lesson-info b,.lesson-info small{display:block}.lesson-info b{font-size:13px}.lesson-info small{color:var(--muted);font-size:10px;margin-top:5px}.ring{--p:40;width:39px;height:39px;border-radius:50%;background:conic-gradient(var(--coral) calc(var(--p)*1%),#edf0f5 0);display:grid;place-items:center;position:relative}.ring:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}.ring i{font-style:normal;font-size:8px;font-weight:900;z-index:1}.row-arrow{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#f5f6f9;color:var(--muted);font-size:11px;transition:.2s}
.ad-slot{position:relative;margin-top:22px;min-height:92px;border:1px dashed #d8dde7;border-radius:20px;background:rgba(255,255,255,.72);display:grid;place-items:center;overflow:hidden}.ad-label{position:absolute;left:12px;top:9px;color:#a7afbd;font-size:7px;font-weight:900;letter-spacing:1px}.ad-preview{display:flex;align-items:center;gap:12px;color:#9da6b5}.ad-preview>span{width:37px;height:30px;border:1px solid #d8dde7;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:950}.ad-preview p{margin:0}.ad-preview b,.ad-preview small{display:block}.ad-preview b{font-size:10px}.ad-preview small{font-size:8px;margin-top:3px}.ad-slot ins{width:100%;min-height:90px}
.reveal{opacity:0;transform:translateY(18px)}.reveal.revealed{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.more-button{background:transparent;color:var(--muted);letter-spacing:2px}.week-chart{height:116px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;border-bottom:1px solid var(--line);padding:4px 0 0}.week-chart div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}.week-chart i{width:8px;border-radius:10px;background:#e8ebf2;min-height:8px}.week-chart i.today{background:linear-gradient(var(--coral),#ffb092);box-shadow:0 4px 10px rgba(251,116,72,.25)}.week-chart span{font-size:8px;color:var(--muted);padding-bottom:7px}.achievement-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:17px}.achievement-stats>div{display:flex;align-items:center;gap:9px}.stat-icon{width:33px;height:33px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:11px}.purple{background:var(--purple)}.yellow{background:var(--yellow)}.achievement-stats p{margin:0}.achievement-stats b,.achievement-stats small{display:block}.achievement-stats b{font-size:11px}.achievement-stats small{font-size:8px;color:var(--muted);margin-top:3px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:12px 0 26px}.page-heading h1{font-size:34px;margin:7px 0 5px;letter-spacing:-.8px}.page-heading p{margin:0;color:var(--muted);font-size:13px}.streak-box,.wallet{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:11px 16px;box-shadow:0 6px 20px rgba(33,46,79,.04)}.streak-box>span,.wallet>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--orange-soft);color:var(--coral)}.streak-box b,.streak-box small,.wallet b,.wallet small{display:block}.streak-box b,.wallet b{font-size:13px}.streak-box small,.wallet small{font-size:9px;color:var(--muted);margin-top:2px}.wallet i{font-style:normal}
.learning-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.path-card{min-height:650px;background:linear-gradient(160deg,#f0f6ff,#fff 50%,#fff2eb);border:1px solid var(--line);border-radius:28px;overflow:hidden;padding:29px}.path-header{text-align:center}.path-badge{display:inline-block;border-radius:9px;background:var(--blue);color:#fff;padding:7px 11px;font-size:9px;font-weight:950;letter-spacing:1px}.path-header h2{margin:12px 0 4px}.path-header p{margin:0;color:var(--muted);font-size:11px}.learning-path{height:490px;position:relative;margin-top:20px}.learning-path:before{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:8px;border-radius:10px;background:linear-gradient(#6a9aef 0 48%,#dde4ef 48%);transform:translateX(-50%)}.path-node{position:absolute;left:50%;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;transform:translateX(-50%);background:#fff;border:8px solid #e1e7f1;box-shadow:0 8px 20px rgba(48,69,111,.14);font-weight:950;color:#a2adbd}.path-node:nth-child(even){margin-left:82px}.path-node:nth-child(odd){margin-left:-82px}.path-node.done{background:var(--blue);border-color:#b8d0ff;color:#fff}.path-node.current{background:var(--coral);border-color:#ffcbbb;color:#fff;box-shadow:0 12px 25px rgba(251,116,72,.3)}.path-node small{position:absolute;white-space:nowrap;top:78px;color:var(--muted);font-size:9px;font-weight:900}.lesson-summary{align-self:start;position:sticky;top:24px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:29px;text-align:center;box-shadow:var(--shadow)}.summary-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:20px;background:linear-gradient(145deg,#ffcc61,#ffad30);color:#fff;font-size:26px;box-shadow:0 12px 22px rgba(255,191,62,.26)}.lesson-summary h3{font-size:10px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}.lesson-summary h2{margin:6px 0}.lesson-summary>p{font-size:11px;color:var(--muted)}.summary-reward{border:1px dashed #dfe3eb;border-radius:15px;padding:12px;margin:22px 0;display:flex;justify-content:space-between;font-size:10px}.summary-reward span{color:var(--muted)}
.wardrobe-layout{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(500px,1.18fr);gap:22px}.avatar-studio{background:radial-gradient(circle at 50% 38%,#f7f1ff 0,#e9f1ff 38%,#dfe9fa 100%);border:1px solid #dce4f1;border-radius:28px;min-height:620px;padding:24px;position:relative;overflow:hidden}.avatar-studio:after{content:"";position:absolute;left:10%;right:10%;bottom:100px;height:24px;border-radius:50%;background:rgba(49,70,111,.12);filter:blur(12px)}.studio-lights{display:flex;gap:8px}.studio-lights i{width:8px;height:8px;border-radius:50%;background:#ffb7a0}.studio-lights i:nth-child(2){background:#ffe19a}.studio-lights i:nth-child(3){background:#9de4cf}.avatar-stage{height:455px;position:relative;z-index:2}.stage-halo{position:absolute;width:320px;height:320px;border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%);background:rgba(255,255,255,.64);box-shadow:0 0 0 24px rgba(255,255,255,.22),0 0 0 52px rgba(255,255,255,.1)}.avatar-layer{position:absolute;z-index:3;left:50%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(38,49,77,.14));pointer-events:none}.avatar-layer:not([src]){display:none}.layer-outfit{width:255px;height:255px;bottom:42px;transform:translateX(-50%)}.layer-head{width:190px;height:190px;top:76px;transform:translateX(-50%)}.layer-hat{width:140px;height:140px;top:25px;transform:translateX(-50%);z-index:5}.layer-glasses{width:130px;height:130px;top:130px;transform:translateX(-50%);z-index:6}.layer-hand{width:116px;height:116px;right:calc(50% - 165px);left:auto;bottom:75px;z-index:6}.layer-pet{width:128px;height:128px;left:calc(50% - 175px);bottom:45px;z-index:6}.layer-frame{width:340px;height:340px;top:55px;transform:translateX(-50%);z-index:7}.outfit-status{position:absolute;z-index:5;left:24px;right:24px;bottom:24px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:13px 15px;display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:11px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(53,184,143,.13)}.outfit-status small,.outfit-status b{display:block}.outfit-status small{font-size:8px;color:var(--muted);font-weight:950;letter-spacing:1px}.outfit-status b{font-size:12px;margin-top:3px}.outfit-status button{background:transparent;color:var(--coral);font-size:10px;font-weight:900}
.closet-panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;min-width:0}.closet-top{display:flex;align-items:center;justify-content:space-between}.closet-tabs{display:flex;gap:7px;overflow-x:auto;margin:24px 0 18px;padding-bottom:3px;scrollbar-width:none}.closet-tabs::-webkit-scrollbar{display:none}.closet-tabs button{flex:0 0 auto;background:#f5f6f8;border-radius:12px;padding:10px 14px;color:var(--muted);font-size:10px;font-weight:900}.closet-tabs button.active{background:var(--ink);color:#fff;box-shadow:0 7px 17px rgba(23,35,59,.18)}.closet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.closet-item{position:relative;min-height:136px;border-radius:18px;background:#f7f8fb;border:2px solid transparent;padding:9px;text-align:left;transition:.2s}.closet-item:hover{transform:translateY(-3px);background:#f1f4f9}.closet-item.active{border-color:var(--coral);background:var(--orange-soft)}.closet-item.locked:after{content:"PLUS";position:absolute;right:8px;top:8px;background:var(--purple);color:#fff;font-size:7px;font-weight:950;border-radius:7px;padding:4px 6px;letter-spacing:.6px}.closet-item img{width:100%;height:78px;object-fit:contain}.closet-item b,.closet-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.closet-item b{font-size:10px}.closet-item small{color:var(--muted);font-size:8px;margin-top:3px}.closet-item .price{position:absolute;right:8px;bottom:9px;color:#aa7513;font-weight:900;font-size:8px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.metric-grid article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:21px;display:flex;align-items:center;gap:15px}.metric-symbol{width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;font-weight:950}.metric-symbol.coral{background:var(--orange-soft);color:var(--coral)}.metric-symbol.mint{background:var(--mint-soft);color:var(--mint)}.metric-symbol.blue{background:var(--blue-soft);color:var(--blue)}.metric-grid p{margin:0}.metric-grid small,.metric-grid b,.metric-grid em{display:block}.metric-grid small{color:var(--muted);font-size:9px}.metric-grid b{font-size:18px;margin:4px 0}.metric-grid em{font-style:normal;color:var(--mint);font-size:8px}.skill-panel{padding:28px}.skill-list{display:grid;gap:8px}.skill-list>div{display:grid;grid-template-columns:48px minmax(160px,1.2fr) minmax(160px,1fr) 42px;gap:15px;align-items:center;padding:17px 4px;border-top:1px solid #f0f1f5}.skill-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:950}.math-bg{background:var(--orange-soft);color:var(--coral)}.viet-bg{background:var(--mint-soft);color:var(--mint)}.eng-bg{background:var(--blue-soft);color:var(--blue)}.skill-list p{margin:0}.skill-list p b,.skill-list p small{display:block}.skill-list p b{font-size:12px}.skill-list p small{font-size:9px;color:var(--muted);margin-top:4px}.skill-bar{height:8px;border-radius:10px;background:#eef1f5;overflow:hidden}.skill-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),#ffad8f)}.skill-list>div:nth-child(2) .skill-bar i{background:linear-gradient(90deg,var(--mint),#79d7bb)}.skill-list>div:nth-child(3) .skill-bar i{background:linear-gradient(90deg,var(--blue),#8eb4f5)}.skill-list strong{font-size:12px;text-align:right}
.mobile-nav{display:none}.lesson-dialog{width:min(430px,calc(100% - 30px));border:0;border-radius:27px;padding:32px;text-align:center;box-shadow:0 28px 80px rgba(17,25,44,.3)}.lesson-dialog::backdrop{background:rgba(18,26,44,.58);backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:14px;top:12px;background:#f2f4f7;width:31px;height:31px;border-radius:10px}.dialog-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,#ffcc62,#ffad32);color:#fff;font-size:27px;margin:4px auto 16px}.lesson-dialog>small{font-size:9px;letter-spacing:1.3px;color:var(--coral);font-weight:950}.lesson-dialog h2{font-size:26px;margin:7px 0}.lesson-dialog p{color:var(--muted);font-size:12px;line-height:1.7}.dialog-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:22px}.toast{position:fixed;right:25px;bottom:25px;z-index:100;background:var(--ink);color:#fff;border-radius:14px;padding:13px 18px;font-size:11px;font-weight:800;box-shadow:0 14px 35px rgba(23,35,59,.24);opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1180px){.sidebar{width:92px;padding:28px 14px}.brand{justify-content:center;padding:0}.brand>span:last-child,.nav-item>span:nth-child(2),.side-card strong,.side-card small,.mini-progress,.parent-link span:last-child{display:none}.nav-item{justify-content:center;padding:0}.nav-dot{position:absolute;right:16px}.side-card{padding:15px;display:grid;place-items:center}.side-card-icon{margin:0}.parent-link{justify-content:center;padding-left:0;padding-right:0}.main{margin-left:92px;padding-left:28px;padding-right:28px}.hero-copy{padding-left:38px}.hero-card{grid-template-columns:1.12fr .88fr}.wardrobe-layout{grid-template-columns:1fr 1.18fr}.closet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.main{padding-left:22px;padding-right:22px}.topbar{height:88px}.hero-card{grid-template-columns:1fr;min-height:600px}.hero-copy{padding:40px 40px 0}.hero-visual{min-height:310px}.hero-glow{width:270px;height:270px;right:calc(50% - 135px);top:10px}.hero-visual>img{height:360px;right:calc(50% - 180px);bottom:-70px}.subject-grid{grid-template-columns:1fr}.subject-card{display:grid;grid-template-columns:210px 1fr}.subject-art{height:180px}.dashboard-grid,.wardrobe-layout{grid-template-columns:1fr}.learning-layout{grid-template-columns:1fr}.lesson-summary{position:static}.avatar-studio{min-height:590px}.metric-grid{grid-template-columns:1fr}.skill-list>div{grid-template-columns:48px 1fr 90px 42px}}
@media(max-width:640px){body{background:#f7f8fb}.sidebar{display:none}.main{margin:0;padding:0 15px 96px}.topbar{height:82px}.top-greeting small{display:none}.top-greeting strong{font-size:16px}.action-pill{padding:0 10px;height:38px}.action-pill small{display:none}.avatar-button{width:39px;height:39px}.hero-card{min-height:570px;border-radius:24px}.hero-copy{padding:31px 23px 0}.hero-copy h1{font-size:31px;letter-spacing:-1px}.hero-copy>p{font-size:13px}.hero-actions{gap:16px}.today-goal span{display:none}.hero-visual>img{height:330px;right:calc(50% - 165px)}.badge-xp{left:10%}.section-heading{margin-top:29px}.section-heading h2{font-size:20px}.subject-card{grid-template-columns:124px 1fr;border-radius:20px}.subject-art{height:156px}.subject-art img{transform:scale(1.25)}.subject-copy{padding:17px 14px}.subject-copy h3{font-size:17px}.subject-copy p{font-size:10px}.subject-label{font-size:7px}.subject-footer{margin-top:12px}.dashboard-grid{grid-template-columns:1fr}.panel{padding:18px;border-radius:20px}.achievement-panel{display:none}.lesson-row{grid-template-columns:42px 1fr 42px 20px;gap:9px}.page-heading{align-items:flex-start;margin-top:8px}.page-heading h1{font-size:28px}.page-heading p{font-size:11px;max-width:280px}.page-heading>.streak-box,.page-heading>.wallet,.page-heading>.btn{display:none}.path-card{padding:20px 8px;min-height:615px}.path-node:nth-child(even){margin-left:60px}.path-node:nth-child(odd){margin-left:-60px}.wardrobe-layout{display:block}.avatar-studio{min-height:520px;border-radius:23px}.avatar-stage{height:390px}.stage-halo{width:270px;height:270px}.layer-outfit{width:220px;height:220px;bottom:35px}.layer-head{width:165px;height:165px;top:69px}.layer-hat{width:125px;height:125px}.layer-glasses{width:115px;height:115px;top:116px}.layer-hand{right:calc(50% - 145px);bottom:66px}.layer-pet{left:calc(50% - 145px);bottom:38px}.layer-frame{width:295px;height:295px;top:50px}.closet-panel{margin-top:16px;border-radius:23px;padding:20px}.closet-grid{grid-template-columns:repeat(2,1fr)}.closet-item{min-height:128px}.closet-item img{height:72px}.skill-panel{padding:18px}.skill-list>div{grid-template-columns:40px 1fr 37px;gap:10px}.skill-bar{grid-column:2/4}.update-note{display:none}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);z-index:40;left:10px;right:10px;bottom:calc(9px + env(safe-area-inset-bottom));height:66px;border:1px solid rgba(223,226,234,.9);border-radius:21px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:0 10px 35px rgba(28,40,68,.16);padding:6px}.mobile-nav button{background:transparent;color:#98a1b1;border-radius:15px;display:grid;place-items:center;align-content:center;gap:2px}.mobile-nav button.active{background:var(--orange-soft);color:var(--coral)}.mobile-nav span{font-size:21px;line-height:1}.mobile-nav small{font-size:8px;font-weight:900}.toast{right:15px;left:15px;bottom:88px;text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Ecosystem workspace — glass layout inspired by the user's Mockin reference. */
body{background:
  radial-gradient(circle at 6% 10%,rgba(56,210,151,.22),transparent 29%),
  radial-gradient(circle at 92% 7%,rgba(70,184,232,.28),transparent 35%),
  radial-gradient(circle at 72% 90%,rgba(252,159,117,.29),transparent 37%),
  linear-gradient(145deg,#d7e6ef 0%,#d8d5e4 48%,#f1d0bf 100%);background-attachment:fixed}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(15px);pointer-events:none;animation:ambientFloat 12s ease-in-out infinite}
body:before{width:280px;height:280px;left:-80px;bottom:4%;background:rgba(42,184,128,.22)}
body:after{width:340px;height:340px;right:-100px;top:25%;background:rgba(86,142,232,.19);animation-delay:-5s}
@keyframes ambientFloat{50%{transform:translate3d(20px,-24px,0) scale(1.08)}}
.sidebar,.topbar,.panel,.subject-card,.closet-panel,.avatar-studio,.path-card,.lesson-summary,.metric-grid article{background:rgba(255,255,255,.64);border-color:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 18px 50px rgba(48,71,93,.1)}
.sidebar{background:rgba(248,251,253,.7)}
.hero-card{background:
  radial-gradient(circle at 75% 40%,rgba(68,211,165,.28),transparent 30%),
  linear-gradient(125deg,rgba(30,46,76,.94),rgba(35,55,88,.88));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px rgba(34,49,77,.23)}
.btn-primary{background:linear-gradient(135deg,#ff7a2e,#ff5f19);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px rgba(241,93,24,.34)}
.subject-card:hover,.panel:hover{border-color:rgba(255,255,255,.95)}
.hub-brand{display:none;align-items:center;gap:11px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.48);padding:6px 14px 6px 7px;border-radius:18px;color:var(--ink);font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 24px rgba(56,77,96,.1)}
.hub-brand img{width:38px;height:38px;border-radius:12px}
.hub-mode .sidebar{display:none}.hub-mode .main{margin-left:0;max-width:none;padding:0;background:transparent}.hub-mode .topbar{height:84px;padding:0 clamp(20px,5vw,74px);position:sticky;top:0;z-index:40;background:rgba(225,235,242,.53);border-bottom:1px solid rgba(255,255,255,.5);backdrop-filter:blur(25px)}.hub-mode .hub-brand{display:flex}.hub-mode .top-greeting{display:none}.hub-mode .action-pill{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.6);backdrop-filter:blur(15px)}
.hub-page{min-height:calc(100vh - 84px);padding:58px clamp(20px,5vw,74px) 38px;color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:72px 72px}
.hub-hero{text-align:center;max-width:1030px;margin:auto}.hub-overline{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);font-size:9px;letter-spacing:1.9px;font-weight:950;color:#476275;box-shadow:inset 0 1px 0 #fff}
.hub-hero h1{font-size:clamp(43px,6.6vw,84px);letter-spacing:-3.5px;line-height:1;margin:18px 0 15px;text-shadow:0 2px 0 rgba(255,255,255,.45)}.hub-hero h1 em{font-style:normal;background:linear-gradient(135deg,#ff772b,#e44f20);-webkit-background-clip:text;background-clip:text;color:transparent}.hub-hero>p{max-width:720px;margin:auto;color:#587080;font-size:14px;line-height:1.7}
.hub-controls{display:flex;justify-content:center;align-items:stretch;gap:10px;max-width:700px;margin:29px auto 0}.hub-search{height:54px;flex:1;display:flex;align-items:center;gap:11px;padding:0 17px;border-radius:18px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.78);box-shadow:inset 0 1px 0 #fff,0 14px 35px rgba(53,79,101,.1);backdrop-filter:blur(22px)}.hub-search span{font-size:22px;color:#587080}.hub-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px}.hub-search input::placeholder{color:#708695}
.hub-profile{display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.75);border-radius:18px;text-align:left;box-shadow:inset 0 1px 0 #fff}.hub-profile img{width:34px;height:34px;border-radius:11px}.hub-profile b,.hub-profile small{display:block}.hub-profile b{font-size:10px}.hub-profile small{font-size:8px;color:var(--muted);margin-top:3px}
.hub-tabs{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;overflow-x:auto;margin:39px auto 26px;padding:5px;border-radius:17px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.67);box-shadow:inset 0 1px 0 #fff,0 14px 32px rgba(50,75,96,.08);backdrop-filter:blur(20px);scrollbar-width:none}.hub-tabs::-webkit-scrollbar{display:none}.hub-tabs button{flex:0 0 auto;padding:12px 19px;border-radius:12px;background:transparent;color:#637887;font-size:9px;font-weight:950;letter-spacing:.6px}.hub-tabs button.active{background:linear-gradient(135deg,#ff7a2c,#ef5b1e);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(235,86,23,.3)}
.app-directory{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.ecosystem-card{min-width:0;overflow:hidden;border-radius:25px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 22px 55px rgba(43,69,90,.11);backdrop-filter:blur(24px) saturate(135%);transition:.35s cubic-bezier(.2,.8,.2,1)}.ecosystem-card:hover{transform:translateY(-8px) scale(1.008);box-shadow:inset 0 1px 0 #fff,0 30px 70px rgba(43,69,90,.19)}.ecosystem-card.hidden{display:none}
.ecosystem-art{height:245px;position:relative;display:grid;place-items:center;overflow:hidden}.ecosystem-art:after{content:"";position:absolute;inset:58% 0 0;background:linear-gradient(transparent,rgba(255,255,255,.22))}.ecosystem-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 23px rgba(28,45,62,.24));transition:.45s}.ecosystem-card:hover .ecosystem-art img{transform:scale(1.06) translateY(-5px)}
.coral-app{background:radial-gradient(circle at 53% 52%,rgba(255,151,99,.72),rgba(255,210,189,.36) 60%,transparent)}.red-app{background:radial-gradient(circle at 53% 49%,rgba(226,92,75,.59),rgba(245,190,177,.3) 62%,transparent)}.blue-app{background:radial-gradient(circle at 53% 49%,rgba(76,139,222,.58),rgba(180,214,244,.32) 62%,transparent)}.english-app{background:radial-gradient(circle at 53% 49%,rgba(51,154,208,.54),rgba(171,222,238,.3) 62%,transparent)}.ai-app{background:radial-gradient(circle at 50% 50%,rgba(142,91,213,.52),rgba(208,180,238,.27) 62%,transparent)}.exam-app{background:radial-gradient(circle at 50% 50%,rgba(39,171,134,.52),rgba(162,226,202,.29) 62%,transparent)}
.app-status{position:absolute;z-index:4;top:14px;left:14px;border-radius:9px;padding:6px 9px;font-size:7px;font-weight:950;letter-spacing:.6px;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}.app-status.live{background:rgba(32,147,107,.78);color:#fff}.app-status.beta{background:rgba(231,102,47,.8);color:#fff}.app-status.soon{background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.74);color:#526979}
.ecosystem-copy{padding:21px 22px 20px}.app-index{font-size:8px;letter-spacing:1.25px;color:#de6225;font-weight:950}.ecosystem-copy h2{font-size:20px;margin:8px 0 8px}.ecosystem-copy p{min-height:38px;margin:0;color:#5e7585;font-size:11px;line-height:1.65}.ecosystem-copy button{width:100%;display:flex;justify-content:space-between;margin-top:18px;padding:12px 0 0;background:transparent;border-top:1px solid rgba(96,120,136,.18);font-size:9px;font-weight:950;letter-spacing:.5px}.ecosystem-copy button span{font-size:15px;color:#ed6424}
.ai-orb{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;color:#fff;background:linear-gradient(145deg,#b277ee,#6440b0);box-shadow:inset -25px -25px 45px rgba(30,9,61,.2),0 20px 45px rgba(101,57,168,.28)}.ai-orb:before,.ai-orb:after,.ai-orb i{content:"";position:absolute;border:1px solid rgba(255,255,255,.38);border-radius:50%}.ai-orb:before{inset:-22px}.ai-orb:after{inset:-42px}.ai-orb i{inset:28px}.ai-orb span{font-size:29px;font-weight:950;letter-spacing:3px}.exam-shape{width:165px;height:165px;border-radius:35px;padding:29px;transform:rotate(-4deg);background:linear-gradient(145deg,#51c5a7,#24826f);box-shadow:inset -20px -20px 35px rgba(0,0,0,.15),0 20px 40px rgba(35,118,99,.25)}.exam-shape span{display:grid;place-items:center;width:47px;height:47px;border-radius:15px;background:rgba(255,255,255,.92);color:#278b75;font-size:24px;font-weight:950}.exam-shape i{display:block;height:8px;margin-top:13px;border-radius:8px;background:rgba(255,255,255,.52)}.exam-shape i:last-child{width:66%}
.hub-ad{max-width:1400px;margin:24px auto 0;background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.65)}.hub-footer{max-width:1400px;margin:53px auto 0;padding:28px 0 8px;border-top:1px solid rgba(255,255,255,.55);display:flex;align-items:flex-end;justify-content:space-between;color:#5c7484}.hub-footer b{font-size:19px;color:var(--ink)}.hub-footer p{margin:5px 0 0;font-size:10px}.hub-footer>span{font-size:9px}
.module-back{margin:9px 0 18px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);border-radius:12px;padding:9px 12px;color:#5c7180;font-size:10px;font-weight:900}.module-hero{min-height:360px;padding:40px 49px;overflow:hidden;border-radius:29px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;color:#fff;background:linear-gradient(125deg,rgba(35,52,83,.9),rgba(38,65,93,.75));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 28px 70px rgba(42,60,87,.2);backdrop-filter:blur(22px);position:relative}.module-hero:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:3%;top:-5%;background:rgba(82,213,171,.2)}.module-hero>div,.module-hero>img{position:relative;z-index:2}.module-tag{font-size:9px;letter-spacing:1.5px;color:#ffc4aa;font-weight:950}.module-hero h1{font-size:42px;margin:12px 0 10px}.module-hero p{max-width:540px;color:#d0d8e4;font-size:13px;line-height:1.7}.module-actions{display:flex;gap:10px;margin-top:23px}.module-hero>img{width:100%;height:330px;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(0,0,0,.28))}.module-dashboard{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-top:20px}.module-lesson-row{display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:12px;padding:14px 0;border-top:1px solid rgba(90,112,130,.13)}.module-lesson-row span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:950}.module-lesson-row b,.module-lesson-row small{display:block}.module-lesson-row b{font-size:12px}.module-lesson-row small{font-size:9px;color:var(--muted);margin-top:4px}.module-lesson-row button{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.58);font-size:9px;font-weight:900}.module-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.module-stat-grid div{padding:16px 12px;border-radius:15px;background:rgba(255,255,255,.47);border:1px solid rgba(255,255,255,.58)}.module-stat-grid b,.module-stat-grid small{display:block}.module-stat-grid b{font-size:20px}.module-stat-grid small{font-size:8px;color:var(--muted);margin-top:4px}
@media(max-width:1180px){.hub-mode .main{margin-left:0;padding:0}.app-directory{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.hub-mode .main{padding:0}.hub-page{padding-top:49px}.module-dashboard{grid-template-columns:1fr}}
@media(max-width:640px){.hub-mode .topbar{height:68px;padding:0 15px}.hub-mode .hub-brand{padding:5px 10px 5px 6px}.hub-mode .hub-brand span{font-size:11px}.hub-mode .top-actions .action-pill{display:none}.hub-mode .main{padding:0 0 88px}.hub-page{padding:38px 14px 30px;min-height:calc(100vh - 68px);background-size:46px 46px}.hub-hero h1{font-size:42px;letter-spacing:-2.1px}.hub-hero>p{font-size:11px}.hub-controls{display:block}.hub-profile{display:none}.hub-search{height:49px}.hub-tabs{width:100%;justify-content:flex-start;margin:28px 0 18px}.hub-tabs button{padding:11px 14px}.app-directory{grid-template-columns:1fr;gap:15px}.ecosystem-art{height:218px}.ecosystem-copy{padding:18px}.hub-footer{display:block;margin-top:38px}.hub-footer>span{display:block;margin-top:18px;line-height:1.8}.module-hero{grid-template-columns:1fr;padding:28px 22px 0}.module-hero h1{font-size:31px}.module-hero>img{height:245px}.module-actions .btn-secondary{display:none}.mobile-nav{grid-template-columns:repeat(5,1fr)}}

/* Studio hub v2 — original LD Learning experience using the requested glass-studio language. */
:root{--glass-blur:22px;--studio-ink:#17304a;--studio-cyan:#19d4e7;--studio-orange:#ff6419;--studio-border:rgba(255,255,255,.6)}
.hub-mode{background:#8bb4c9;color:var(--studio-ink)}
.hub-mode .main>.topbar{display:none}
.hub-mode .main{margin:0;max-width:none;padding:0;background:#8bb4c9}
.hub-mode .mobile-nav{display:none}
.studio-hub{position:relative;isolation:isolate;min-height:100vh;padding:28px clamp(24px,4.2vw,68px) 125px;overflow:hidden;color:var(--studio-ink);background:transparent}
.studio-hub:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(35,74,95,.04),rgba(197,128,152,.16));pointer-events:none}
.hub-scene{position:absolute;z-index:-2;inset:0 0 auto;height:min(1000px,100vh);background-image:linear-gradient(180deg,rgba(48,111,140,.17),rgba(220,144,153,.24)),url("assets/generated/learning-world-bg-v2.png");background-size:cover;background-position:center;filter:saturate(.82) contrast(.93)}
.hub-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,84,108,.06) 0,rgba(96,110,144,.15) 50%,rgba(190,137,143,.14) 75%,rgba(245,244,234,.82) 100%)}
.glass-plate{background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(255,255,255,.18));border:1px solid var(--studio-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 16px 44px rgba(31,64,86,.16);backdrop-filter:blur(var(--glass-blur)) saturate(135%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(135%)}

.studio-toolbar{position:relative;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;max-width:1460px;margin:0 auto}
.studio-logo{height:58px;display:flex;align-items:center;gap:10px;padding:6px 17px 6px 7px;border-radius:24px;color:#fff;text-align:left;text-shadow:0 1px 10px rgba(24,65,82,.3)}
.studio-logo-mark{width:44px;height:44px;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(23,54,72,.14)}
.studio-logo-mark img{width:37px;height:37px;border-radius:13px}.studio-logo b,.studio-logo small{display:block}.studio-logo b{font-size:18px;letter-spacing:-.4px}.studio-logo small{font-size:7px;letter-spacing:1.3px;text-transform:uppercase;opacity:.76;margin-top:2px}
.studio-customizer{justify-self:start;height:58px;display:flex;align-items:center;gap:11px;padding:8px 16px;border-radius:24px;color:rgba(255,255,255,.9)}
.palette-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(42,74,101,.33);border:1px solid rgba(255,255,255,.48)}
.theme-dots{display:flex;gap:7px}.theme-dots button{width:18px;height:18px;border-radius:50%;border:2px solid transparent;box-shadow:0 2px 8px rgba(16,41,55,.18)}.theme-dots button.active{border-color:#fff;transform:scale(1.12)}.theme-dots button:nth-child(1){background:#43bfd4}.theme-dots button:nth-child(2){background:#f0ad82}.theme-dots button:nth-child(3){background:#56c597}.theme-dots button:nth-child(4){background:#a68bd5}
.blur-label{font-size:9px;font-weight:900;margin-left:4px}.studio-customizer input{accent-color:#14d9e8;width:82px}.studio-customizer output{font-size:9px;font-weight:900;color:#91f6ff;min-width:31px}
.studio-account{height:58px;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:24px;color:#fff}
.studio-coin{display:flex;align-items:center;gap:4px;color:#fff;background:transparent}.studio-coin span{color:#ffe16d}.studio-coin b{font-size:11px}.studio-coin small{font-size:7px;opacity:.75}.studio-upgrade{height:36px;padding:0 15px;border-radius:15px;background:linear-gradient(135deg,#ff7c2e,#f24d12);color:#fff;font-size:9px;font-weight:950;box-shadow:0 8px 20px rgba(222,74,18,.25)}
.studio-user{display:flex;align-items:center;gap:8px;color:#fff;background:transparent;text-align:left}.studio-user img{width:39px;height:39px;border-radius:15px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.7)}.studio-user b,.studio-user small{display:block}.studio-user b{font-size:9px}.studio-user small{font-size:7px;opacity:.72;margin-top:2px}

.studio-stage{position:relative;z-index:4;max-width:1460px;min-height:520px;margin:44px auto 0;display:grid;grid-template-columns:minmax(530px,680px) 1fr;gap:26px;align-items:center}
.studio-hero{position:relative;padding:34px 34px 26px;border-radius:37px;overflow:hidden;background:linear-gradient(145deg,rgba(224,239,246,.47),rgba(202,199,218,.27));box-shadow:inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(255,255,255,.18),0 30px 70px rgba(44,66,89,.21)}
.studio-hero:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-100px;background:rgba(35,230,224,.16);filter:blur(10px)}
.studio-kicker{display:inline-flex;position:relative;padding:6px 12px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.32);font-size:9px;font-weight:950;letter-spacing:1px;color:#315266}
.studio-hero h1{position:relative;max-width:590px;font-size:clamp(37px,4.3vw,61px);line-height:1.02;letter-spacing:-2.8px;margin:19px 0 14px;color:#fff;text-shadow:0 3px 22px rgba(42,73,94,.34)}.studio-hero h1 em{font-style:normal;color:#23e8f1;text-shadow:0 0 24px rgba(35,232,241,.3)}
.studio-lead{position:relative;max-width:560px;margin:0;color:#24455c;font-size:12px;line-height:1.65;font-weight:600}
.studio-benefits{display:grid;gap:9px;margin:20px 0}.studio-benefits>div{display:grid;grid-template-columns:31px 1fr;gap:10px;align-items:center}.studio-benefits>div>span{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;background:rgba(255,187,61,.78);border:1px solid rgba(255,255,255,.76);color:#fff;box-shadow:0 6px 15px rgba(120,85,38,.13);font-weight:950}.studio-benefits>div:nth-child(2)>span{background:rgba(68,203,180,.72)}.studio-benefits>div:nth-child(3)>span{background:rgba(120,133,226,.7)}.studio-benefits b,.studio-benefits small{display:block}.studio-benefits b{font-size:11px;color:#203c50}.studio-benefits small{font-size:8px;color:#527083;margin-top:2px}
.studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.studio-primary,.studio-secondary{height:52px;border-radius:19px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:11px;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 12px 30px rgba(229,76,16,.26);transition:.25s ease}.studio-primary{background:linear-gradient(135deg,#ff7925,#f04c0e)}.studio-secondary{background:linear-gradient(135deg,#ff9834,#ff6a19)}.studio-primary:hover,.studio-secondary:hover{transform:translateY(-3px);filter:saturate(1.08)}.studio-actions b{font-size:17px;margin-left:3px}
.studio-subactions{display:flex;align-items:center;gap:14px;margin-top:14px}.studio-subactions button{background:transparent;color:#365a6f;font-size:8px;font-weight:900;text-decoration:underline;text-underline-offset:3px}.studio-subactions i{width:1px;height:12px;background:rgba(46,74,91,.32)}

.studio-mascot{position:relative;align-self:stretch;min-height:500px}.mascot-aura{position:absolute;width:390px;height:390px;border-radius:50%;right:9%;top:8%;background:radial-gradient(circle,rgba(89,235,227,.3),rgba(147,123,202,.14) 56%,transparent 70%);filter:blur(4px);animation:auraPulse 5s ease-in-out infinite}.mascot-fox{position:absolute;z-index:3;right:-2%;bottom:-35px;height:560px;max-width:72%;object-fit:contain;filter:drop-shadow(0 33px 28px rgba(33,63,78,.27));animation:mascotFloat 5.5s ease-in-out infinite}
.orbit-button{position:absolute;z-index:6;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:2px;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.39),rgba(98,104,147,.28));border:1px solid rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 35px rgba(36,61,77,.21);backdrop-filter:blur(19px);transition:.25s ease}.orbit-button:hover{transform:translateY(-5px) scale(1.06);background:rgba(255,255,255,.48)}.orbit-button span{font-size:17px;font-weight:950}.orbit-button small{font-size:5px;letter-spacing:.6px;font-weight:950;max-width:50px}.orbit-math{left:9%;top:14%}.orbit-chinese{left:0;top:45%}.orbit-korean{left:21%;bottom:5%}.orbit-ai{right:3%;top:8%}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}@keyframes auraPulse{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:1}}

.studio-feature-row{position:relative;z-index:7;max-width:820px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-9px auto 0 0}.studio-feature{min-height:118px;padding:18px;border-radius:25px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;color:#fff;text-align:left;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.54),0 18px 42px rgba(29,64,81,.18);backdrop-filter:blur(20px);transition:.28s ease}.studio-feature:hover{transform:translateY(-7px)}.studio-feature.teal{background:linear-gradient(145deg,rgba(20,168,154,.83),rgba(27,113,110,.72))}.studio-feature.violet{background:linear-gradient(145deg,rgba(149,72,204,.83),rgba(90,45,146,.72))}.studio-feature.blue{background:linear-gradient(145deg,rgba(31,163,207,.86),rgba(21,100,151,.74))}.feature-icon{width:39px;height:39px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.44);font-size:17px;font-weight:950}.studio-feature b,.studio-feature small{display:block}.studio-feature b{font-size:12px}.studio-feature small{font-size:7px;line-height:1.4;margin-top:4px;opacity:.82}.studio-feature>i{font-style:normal;font-size:18px}

.bubble-dock{position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);height:72px;padding:7px 9px;border-radius:30px;display:grid;grid-template-columns:repeat(6,66px);gap:3px;background:linear-gradient(145deg,rgba(221,238,244,.58),rgba(208,200,218,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 60px rgba(30,54,72,.28)}.bubble-dock button{border-radius:22px;display:grid;place-items:center;align-content:center;gap:2px;background:transparent;color:#36596d;transition:.23s ease}.bubble-dock button:hover{background:rgba(255,255,255,.36);transform:translateY(-4px)}.bubble-dock span{font-size:19px;font-weight:900}.bubble-dock small{font-size:6px;font-weight:950}.bubble-dock .dock-main{margin-top:-23px;height:78px;border-radius:30px;background:linear-gradient(145deg,#ff862e,#f35112);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 13px 30px rgba(222,74,16,.32)}

.ecosystem-library{position:relative;z-index:5;max-width:1460px;margin:72px auto 0;padding:30px;border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.53),rgba(255,255,255,.27));scroll-margin-top:30px}.library-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.library-heading>div>span{font-size:8px;letter-spacing:1.5px;font-weight:950;color:#3a7083}.library-heading h2{font-size:29px;letter-spacing:-1px;margin:6px 0 0}.ecosystem-library .hub-search{max-width:360px;margin:0;background:rgba(255,255,255,.42)}.ecosystem-library .hub-tabs{justify-content:flex-start;margin:22px 0 18px}.ecosystem-library .app-directory{grid-template-columns:repeat(3,1fr);gap:14px}.ecosystem-library .ecosystem-card{display:grid;grid-template-columns:43% 57%;min-height:168px;border-radius:24px;background:rgba(255,255,255,.32)}.ecosystem-library .ecosystem-art{height:100%;min-height:168px;border-radius:23px 0 0 23px}.ecosystem-library .ecosystem-art img{height:145px;bottom:-18px}.ecosystem-library .ecosystem-copy{padding:20px 17px}.ecosystem-library .ecosystem-copy h3{font-size:16px;letter-spacing:-.35px;margin:7px 0}.ecosystem-library .ecosystem-copy p{font-size:8px;line-height:1.5;min-height:25px;color:#587083}.ecosystem-library .ecosystem-copy button{margin-top:12px;padding:8px 10px;border-radius:10px;font-size:8px;background:rgba(255,255,255,.52);color:#294d61}.ecosystem-library .app-index{font-size:7px}.ecosystem-library .app-status{top:10px;left:10px;font-size:6px}
.studio-hub .hub-ad{position:relative;z-index:5;max-width:1460px;margin:20px auto 0;background:rgba(255,255,255,.35)}.studio-hub .hub-footer{position:relative;z-index:5;max-width:1460px;color:#355b6d}

body.hub-theme-sunset .hub-scene{filter:hue-rotate(-18deg) saturate(.88) contrast(.94)}body.hub-theme-forest .hub-scene{filter:hue-rotate(42deg) saturate(.82) contrast(.95)}body.hub-theme-violet .hub-scene{filter:hue-rotate(105deg) saturate(.73) contrast(.94)}

@media(max-width:1180px){.studio-toolbar{grid-template-columns:auto 1fr auto}.studio-customizer{justify-self:center}.studio-user span{display:none}.studio-stage{grid-template-columns:minmax(490px,620px) 1fr}.mascot-fox{height:500px;max-width:86%}.orbit-ai{right:0}.ecosystem-library .app-directory{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.studio-hub{padding:20px 20px 115px}.studio-customizer{display:none}.studio-stage{grid-template-columns:1fr;gap:0;margin-top:28px}.studio-hero{max-width:650px;z-index:5}.studio-mascot{min-height:420px;margin-top:-55px}.mascot-fox{right:3%;height:480px;max-width:68%}.orbit-math{left:12%;top:24%}.orbit-chinese{left:5%;top:52%}.orbit-korean{left:30%;bottom:4%}.studio-feature-row{margin:-56px auto 0;max-width:none}.ecosystem-library{margin-top:50px}.library-heading{align-items:stretch;flex-direction:column}.ecosystem-library .hub-search{max-width:none;width:100%}}
@media(max-width:640px){.hub-mode .main{padding:0;background:#8bb4c9}.studio-hub{padding:14px 12px 103px}.hub-scene{height:920px;background-position:58% center}.studio-toolbar{grid-template-columns:1fr auto;gap:8px}.studio-logo{height:49px;border-radius:20px;padding-right:11px}.studio-logo-mark{width:37px;height:37px;border-radius:14px}.studio-logo-mark img{width:31px;height:31px}.studio-logo b{font-size:14px}.studio-logo small{font-size:5px}.studio-account{height:49px;padding:5px 7px;border-radius:20px}.studio-account .studio-upgrade,.studio-account .studio-coin small,.studio-user span{display:none}.studio-user img{width:36px;height:36px}.studio-stage{margin-top:22px;min-height:0}.studio-hero{padding:25px 20px 21px;border-radius:28px}.studio-kicker{font-size:6px;letter-spacing:.7px}.studio-hero h1{font-size:37px;letter-spacing:-1.9px;margin-top:14px}.studio-lead{font-size:10px}.studio-benefits{gap:7px;margin:16px 0}.studio-benefits>div{grid-template-columns:28px 1fr;gap:8px}.studio-benefits>div>span{width:27px;height:27px;border-radius:9px}.studio-benefits b{font-size:9px}.studio-benefits small{font-size:7px}.studio-actions{grid-template-columns:1fr}.studio-primary,.studio-secondary{height:47px;border-radius:16px;font-size:9px}.studio-subactions{justify-content:center;gap:7px}.studio-subactions button{font-size:6px}.studio-mascot{min-height:355px;margin-top:-28px}.mascot-fox{height:380px;max-width:82%;right:-2%;bottom:-16px}.mascot-aura{width:290px;height:290px;right:-3%;top:7%}.orbit-button{width:52px;height:52px}.orbit-button span{font-size:14px}.orbit-button small{font-size:4px}.orbit-math{left:4%;top:30%}.orbit-chinese{left:0;top:60%}.orbit-korean{left:27%;bottom:0}.orbit-ai{right:0;top:12%}.studio-feature-row{grid-template-columns:1fr;margin:-25px 0 0;gap:9px}.studio-feature{min-height:76px;padding:12px 15px;border-radius:20px}.bubble-dock{width:calc(100% - 20px);height:67px;bottom:9px;grid-template-columns:repeat(6,1fr);padding:6px;border-radius:24px}.bubble-dock button{border-radius:17px}.bubble-dock .dock-main{height:69px;margin-top:-15px;border-radius:23px}.bubble-dock span{font-size:17px}.bubble-dock small{font-size:5px}.ecosystem-library{padding:20px 13px;border-radius:27px;margin-top:35px}.library-heading h2{font-size:23px}.ecosystem-library .hub-tabs{margin:17px 0 13px}.ecosystem-library .app-directory{grid-template-columns:1fr}.ecosystem-library .ecosystem-card{min-height:146px}.ecosystem-library .ecosystem-art{min-height:146px}.ecosystem-library .ecosystem-art img{height:128px}.studio-hub .hub-ad{display:none}}