/* VSTEP Studio · premium interface system */
:root {
 --bg:#f5f7fa; --surface:#fff; --ink:#18243c; --muted:#7d8799;
 --line:#e7ebf2; --primary:#6555df; --primary-dark:#5041c6;
 --lavender:#eeebfb; --navy:#121e35; --green:#16846c;
 --orange:#d98b44; --blue:#4f7fd5;
 --shadow:0 4px 25px #182c4505; --radius:20px;
}
body{background:radial-gradient(ellipse at 100% 0,#eef2fc 0,transparent 42%),var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.app-shell.premium{padding-left:244px}
.premium .sidebar{width:244px;background:linear-gradient(172deg,#15243e 0%,#111c31 72%);padding:32px 20px 22px;border-right:1px solid #ffffff08}
.premium .brand{gap:12px;padding:0 13px}
.premium .brand img{width:42px;height:42px;box-shadow:0 6px 18px #03091740;border-radius:13px}
.premium .brand-name{font-size:21px;line-height:1.1;letter-spacing:-.9px}
.premium .brand-name span{font-size:17px;margin-left:3px;font-weight:400;color:#b1bdd6}
.premium .brand small{display:block;margin-top:6px;font-size:8px;letter-spacing:2.2px;color:#697e9f}
.premium .nav-label{font-size:9px;letter-spacing:1.6px;padding:45px 15px 16px;color:#647896}
.premium .nav-list{gap:9px}
.premium .nav-link{padding:12px 13px;gap:11px;min-height:48px;font-size:13px;border-radius:11px;color:#99abc5;position:relative;transition:background .2s,color .2s}
.premium .nav-icon{display:flex;align-items:center;justify-content:center;width:25px}
.premium .nav-link .icon{height:19px;width:19px}
.premium .nav-link.active{background:linear-gradient(105deg,#7266e9,#5a55ce);box-shadow:0 7px 20px #070e2528;color:#fff}
.premium .nav-link.active::before{content:"";height:19px;width:3px;position:absolute;left:-20px;top:14px;background:#a6ead8;border-radius:0 3px 3px 0}
.premium .nav-link .badge-small{font-size:9px;margin-left:auto;background:#ffffff0e;border:1px solid #ffffff07;padding:2px 7px;color:#a9b8d4}
.premium .nav-link.active .badge-small{color:#fff;background:#ffffff20}
.premium .sidebar-bottom{padding-top:28px}
.premium .sidebar-card{padding:19px;margin:0 1px 23px;position:relative;overflow:hidden;background:linear-gradient(130deg,#28344e,#1d2c47);border:1px solid #526b8c28;border-radius:16px}
.premium .sidebar-card::after{content:"";height:115px;width:115px;position:absolute;right:-54px;top:55px;border:20px solid #8395bb07;border-radius:50%;pointer-events:none}
.premium .sidebar-card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.premium .sidebar-orbit{display:flex;align-items:center;justify-content:center;color:#a9e6d4;background:#a9e6d414;border:1px solid #b9f5da10;height:33px;width:33px;border-radius:11px}
.premium .sidebar-orbit .icon{width:18px;color:inherit}
.premium .sidebar-card-top .badge-small{letter-spacing:1.4px;font-size:8px;color:#7086a6}
.premium .sidebar-card h3{font-size:22px;font-weight:700;letter-spacing:-.6px;margin-top:17px;color:#f1f4fb}
.premium .sidebar-card h3 span{color:#a9e6d4}
.premium .sidebar-card p{font-size:11px;color:#91a1bd;line-height:1.9;margin:7px 0 19px}
.premium .sidebar-card button{display:flex;align-items:center;justify-content:space-between;font-size:10px;background:#ffffff07;border:1px solid #ffffff0c;padding:9px 10px;border-radius:8px;position:relative;z-index:1}
.premium .sidebar-card button .icon{width:13px;height:13px;color:#b8c3db}
.premium .sidebar-foot{margin-top:24px;padding-left:13px;font-size:9px;color:#536b8b}
.premium .sidebar-foot span{color:#8296b4;margin-bottom:6px;font-size:10px}
.status-dot{width:5px;height:5px;background:#8cd7c1;border-radius:50%;display:inline-block;flex:none}
.premium .topbar{height:88px;background:#ffffffd9;backdrop-filter:blur(15px);padding:0 38px;border-bottom:1px solid #e8ecf4}
.premium .breadcrumbs{font-size:11px;gap:10px}
.premium .breadcrumbs>.icon{height:12px;width:12px;color:#c4cbd7}
.premium .breadcrumb-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f3f5fa;color:#8b98af;border-radius:10px;margin-right:2px}
.premium .breadcrumb-icon .icon{width:16px}
.premium .breadcrumbs strong{font-size:12px;font-weight:650;color:#4c5870}
.premium .top-actions{gap:18px}
.premium .daily-chip{display:flex;align-items:center;gap:7px;font-size:11px;border:0;background:none;color:#8a94a6;padding:8px 0}
.premium .daily-chip .icon{width:16px;height:16px;color:#9dabc0}
.premium .daily-chip:hover{color:var(--primary)}
.premium .level-pill{padding:5px 11px 5px 13px;border:1px solid #e9e7f4;border-radius:11px;background:#f7f6fc;gap:13px}
.premium .level-pill .goal-word{font-size:8px;letter-spacing:1px;font-weight:650;color:#9a91b6}
.premium .level-pill select{font-size:15px;color:#6c5bba;font-weight:750;padding:4px 0;outline-offset:2px}
.premium .header-help{border:1px solid #e9edf4;color:#8c97aa;background:#fff;border-radius:50%;padding:8px}
.premium .header-help .icon{width:17px;height:17px}
.premium .content{padding:32px 38px 34px;max-width:1515px}
.premium .page-intro{margin-bottom:25px;gap:18px;align-items:center}
.premium .page-intro h1{font-size:29px;letter-spacing:-1px;font-weight:750;color:#19273d}
.premium .page-intro p{margin-top:6px;font-size:12px;color:#8a94a5;line-height:1.9}
.premium .intro-date{font-size:10px;border:1px solid #e8edf4;background:#ffffffb3;color:#8793a7;padding:8px 12px;border-radius:9px;gap:8px}
.premium .intro-date .icon{width:14px;height:14px;color:#9aa7b8}
.premium h2{font-size:20px;font-weight:720;letter-spacing:-.5px;color:#202d43}
.premium h3{font-weight:650}
.premium .btn{border-radius:10px;padding:11px 17px;font-size:12px;min-height:43px;transition:background .18s,box-shadow .18s,transform .18s}
.premium .btn.primary{background:linear-gradient(105deg,#7360e5,#6154d8);box-shadow:0 4px 9px #6353d920}
.premium .btn.primary:hover{background:linear-gradient(105deg,#6653d4,#5445c6);box-shadow:0 6px 18px #6253d92b;transform:translateY(-1px)}
.premium .btn.secondary{color:#65728a;border-color:#e4e9f1;background:#fff}
.premium .btn.secondary:hover{background:#f5f3ff;border-color:#d6cff1;color:#6951bd}
.premium .btn.soft{background:#f0ebfc;color:#7760bf}
.premium .btn.ghost{color:#6d66b1;box-shadow:none;font-size:11px;min-height:35px}
.premium .btn.small{font-size:11px;min-height:35px;padding:8px 12px}
.premium .btn .icon{height:16px;width:16px}
.premium .hero-premium{min-height:333px;padding:32px 37px;isolation:isolate;position:relative;overflow:hidden;border:1px solid #23375a;border-radius:23px;background:radial-gradient(ellipse at 88% 32%,#4955895c,transparent 52%),linear-gradient(112deg,#162842 0%,#172840 52%,#252e52 100%);box-shadow:0 12px 30px #142c4612}
.premium .hero-premium::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff09;pointer-events:none;z-index:4}
.premium .hero-grid{position:absolute;inset:0;background-image:linear-gradient(#b9c8e305 1px,transparent 1px),linear-gradient(90deg,#b9c8e305 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(to right,transparent,#000);pointer-events:none;z-index:-1}
.premium .hero-premium .hero-copy{max-width:60%;position:relative;z-index:3}
.premium .hero-premium .eyebrow{font-size:8px;letter-spacing:1.8px;color:#9aacc8;line-height:1.6;margin-bottom:13px;gap:8px}
.premium .live-dot{width:5px;height:5px;border-radius:50%;background:#b6e9d7;box-shadow:0 0 12px #a8f2cf50}
.premium .hero-premium h2{font-size:43px;letter-spacing:-1.6px;line-height:1.12;font-weight:750;color:#f8f9ff;margin:0 0 17px}
.premium .hero-premium h2 span{color:#b6e7d6}
.premium .hero-premium p{font-size:12px;color:#93a4bf;line-height:1.85;margin:0 0 23px;max-width:390px}
.premium .hero-premium .hero-actions{gap:19px;position:relative;z-index:3}
.premium .hero-premium .btn.primary{background:#c5f0d9;color:#24483d;box-shadow:0 5px 18px #0b162725;font-size:11px;padding:11px 17px}
.premium .hero-premium .btn.primary:hover{background:#defae9;box-shadow:0 5px 20px #b1e2cf12}
.premium .hero-premium .btn.ghost{color:#b2bfd4;font-size:10px;padding:8px 0}
.premium .hero-bottom{display:flex;align-items:center;gap:13px;color:#7188a6;font-size:9px;margin-top:25px;white-space:nowrap}
.premium .hero-bottom span{display:inline-flex;align-items:center;gap:5px}
.premium .hero-bottom .icon{height:12px;width:12px;color:#92a5bc}
.premium .hero-bottom i{height:3px;width:3px;border-radius:50%;background:#566d8b}
.premium .hero-art{width:415px;right:15px;top:-38px;bottom:-44px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.premium .hero-art::before{display:none}
.premium .hero-art img{width:100%;height:auto;max-height:none;position:relative;z-index:1;object-fit:contain;filter:drop-shadow(0 20px 16px #050c1e22);animation:studio-float 7s ease-in-out infinite}
.premium .art-glow{position:absolute;width:300px;height:230px;right:16px;top:85px;background:radial-gradient(ellipse,#a79bf526,transparent 68%);filter:blur(15px);border-radius:50%}
.premium .art-label{position:absolute;bottom:64px;left:47px;z-index:3;background:#253953c9;backdrop-filter:blur(18px);box-shadow:0 8px 26px #08122730;border:1px solid #a4c8d72c;display:flex;align-items:center;gap:9px;padding:11px 15px 11px 11px;border-radius:13px;transform:rotate(-3deg)}
.premium .art-label>span{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:9px;background:#c1e8d61c;color:#c1e8d6}
.premium .art-label .icon{width:17px;height:17px}
.premium .art-label strong{display:block;font-size:10px;color:#e0edf1;font-weight:600}
.premium .art-label small{display:block;font-size:8px;color:#93a9c0;margin-top:2px}
.premium .hero-chapter{position:absolute;right:35px;bottom:15px;z-index:0;font-size:9px;letter-spacing:5px;color:#8392b03d}
@keyframes studio-float{50%{transform:translateY(-5px) rotate(.4deg)}}
.premium .premium-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 32px}
.premium .metric{padding:19px 21px;gap:15px;min-height:91px;position:relative;border:1px solid #e5eaf1;border-radius:16px;box-shadow:0 3px 15px #1b2c3d03;background:#fff}
.premium .metric-icon{width:43px;height:43px;border-radius:13px}
.premium .metric-icon .icon{width:21px;height:21px}
.premium .metric-label{font-size:10px;color:#8c96a7;margin:0 0 3px}
.premium .metric-value{font-size:25px;font-weight:750;letter-spacing:-.8px;line-height:1.4;color:#26334a}
.premium .metric-value span{font-size:10px;font-weight:450;color:#a0a8b7;margin-left:7px;letter-spacing:0}
.premium .metric-spark{font-size:25px;color:#dfb27e;margin-left:auto;align-self:flex-end;line-height:1.6}
.premium .metric-mini-ring{--progress:0;flex:none;width:27px;height:27px;margin-left:auto;border-radius:50%;background:conic-gradient(#7e9edf calc(var(--progress)*1%),#eaf0fa 0);position:relative}
.premium .metric-mini-ring::before{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}
.premium .metric-bars{display:flex;gap:3px;align-items:flex-end;margin-left:auto;height:28px;align-self:center;opacity:.6}
.premium .metric-bars i{width:4px;border-radius:2px;background:#91c4b3;height:8px}.premium .metric-bars i:nth-child(2){height:13px}.premium .metric-bars i:nth-child(3){height:19px}.premium .metric-bars i:nth-child(4){height:27px}
.premium .metric-icon.orange{background:#fdf0e3;color:#c88b4d}.premium .metric-icon.blue{background:#edf2fd;color:#6b8fd0}.premium .metric-icon.green{background:#e7f5ee;color:#55a88a}
.premium .dashboard-columns{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px;align-items:start}
.premium .section-heading{margin-bottom:18px;gap:12px;align-items:flex-end}
.premium .section-heading h2{font-size:21px;letter-spacing:-.65px;line-height:1.4;margin-top:3px}
.premium .section-heading p{font-size:11px;margin-top:5px;color:#9aa2af}
.premium .section-kicker{display:block;letter-spacing:1.6px;font-size:8px;font-weight:700;color:#a0a8b6;line-height:1.7}
.premium .section-heading .btn{font-size:10px;min-height:30px;gap:6px}
.premium .section-heading .btn .icon{width:14px;height:14px}
.premium .skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.premium .skill-card{min-height:232px;border:1px solid var(--skill-line);border-radius:17px;overflow:hidden;position:relative;padding:17px;background:linear-gradient(150deg,var(--skill-bg),#fff 95%);box-shadow:0 3px 12px #26354c02;transition:transform .22s,box-shadow .22s,border-color .22s}
.premium .skill-card::before{content:"";position:absolute;width:115px;height:115px;right:-50px;top:63px;border:18px solid var(--skill-halo);border-radius:50%;pointer-events:none}
.premium .skill-card:hover{transform:translateY(-5px);border-color:var(--skill-accent);box-shadow:0 12px 27px #2536500d}
.premium .skill-listening{--skill-bg:#fff3e7;--skill-line:#f4e9da;--skill-accent:#d9974f;--skill-halo:#e6b98010}
.premium .skill-reading{--skill-bg:#eaf1ff;--skill-line:#e1e8f6;--skill-accent:#7194d5;--skill-halo:#7194d513}
.premium .skill-writing{--skill-bg:#f1ebfc;--skill-line:#e9e1f7;--skill-accent:#a089cf;--skill-halo:#ae8eda12}
.premium .skill-speaking{--skill-bg:#e8f6ee;--skill-line:#deeee5;--skill-accent:#6cb295;--skill-halo:#8cc8ac12}
.premium .skill-card-top{display:flex;align-items:center;justify-content:space-between}
.premium .skill-card .skill-icon{height:32px;width:32px;border-radius:10px;background:#fff9;color:var(--skill-accent);box-shadow:0 2px 4px #28353e03}
.premium .skill-card .skill-icon .icon{height:17px;width:17px}
.premium .skill-ordinal{font-size:9px;font-weight:600;color:var(--skill-accent);opacity:.55;letter-spacing:1px}
.premium .skill-visual{height:64px;width:64px;display:block;margin:8px 0 6px auto;color:var(--skill-accent);opacity:.74;position:relative;z-index:1;fill:none}
.premium .skill-card .en{margin:0;font-size:8px;letter-spacing:1.6px;color:var(--skill-accent);text-transform:uppercase;font-weight:600}
.premium .skill-card h3{margin:3px 0 6px;font-size:17px;letter-spacing:-.4px;font-weight:720;color:#344059}
.premium .skill-card .count{font-size:9px;color:#9ba2b1;line-height:1.5}
.premium .skill-card-bottom{display:flex;gap:15px;align-items:center;margin-top:12px}
.premium .skill-card .progress{background:var(--skill-line);flex:1;height:3px;margin:0}
.premium .skill-card .progress span{background:var(--skill-accent)}
.premium .skill-card .go{position:static;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--skill-accent);height:24px;width:24px;box-shadow:0 3px 6px #18273705}
.premium .skill-card .go .icon{width:12px;height:12px}
.premium .study-panel{margin-top:30px}
.premium .badge{font-size:9px;letter-spacing:.2px;padding:5px 9px;border-radius:7px;font-weight:600}
.premium .badge .icon{width:12px;height:12px}
.premium .badge.purple{color:#8b77b3;background:#f0edf8}.premium .badge.green{color:#55937e;background:#ecf7f1}
.premium .study-list{gap:11px}
.premium .study-row{gap:15px;padding:17px 18px;border:1px solid #e6eaf2;border-radius:14px;box-shadow:0 2px 9px #23364d02}
.premium .study-step{background:none;color:#bbc2ce;font-size:10px;width:19px;height:30px;border-radius:50%}
.premium .study-step.done{color:#51a385;background:#eef9f1;width:22px;height:22px}
.premium .study-step.done .icon{height:13px;width:13px}
.premium .study-subject{height:37px;width:37px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.premium .study-subject .icon{height:17px;width:17px}
.premium .study-subject.orange{color:#cb9a61;background:#fbf1e7}.premium .study-subject.blue{color:#7896c9;background:#edf2fa}.premium .study-subject.purple{color:#a28bc6;background:#f4effb}
.premium .study-copy h3{font-size:12px;color:#59657a;line-height:1.6}
.premium .study-copy p{font-size:10px;color:#a5adba;margin-top:3px}
.premium .study-row .btn{font-size:10px;border:1px solid #eae7f5;background:#faf9fd;color:#8a78b7;padding:7px 11px;min-height:33px;gap:8px}
.premium .study-row .btn .icon{width:12px;height:12px}
.premium .journey-strip{display:flex;align-items:center;gap:13px;border:1px solid #ece8df;border-radius:14px;padding:17px 19px;background:#fbf9f3;margin-top:20px}
.premium .journey-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#f4eddf;color:#c4a26b;flex:none}
.premium .journey-icon .icon{width:19px;height:19px}
.premium .journey-strip h3{font-size:12px;color:#8a7b61;font-weight:600}
.premium .journey-strip p{font-size:10px;color:#b3a48b;line-height:1.8;margin-top:3px}
.premium .journey-strip>.icon-btn{color:#bcaa8c;margin-left:auto}
.premium .aside-column{gap:20px;padding-top:0}
.premium .aside-column .panel{padding:22px;border-color:#e6eaf1;border-radius:18px;box-shadow:0 5px 18px #253b5003}
.premium .daily-panel .panel-title{align-items:flex-start}
.premium .daily-panel .panel-title h3{font-size:14px;font-weight:650;letter-spacing:-.2px;margin-top:3px;color:#455169}
.premium .daily-panel .panel-title .icon-btn{padding:5px;color:#a4adbd}
.premium .daily-panel .panel-title .icon{width:14px;height:14px}
.premium .goal-ring{width:134px;height:134px;margin:21px auto 18px;padding:9px;background:conic-gradient(#9fcfb9 calc(var(--pct)*1%),#eff3f3 0);box-shadow:inset 0 0 0 1px #ecf1f0}
.premium .goal-ring .inner{background:#fff;box-shadow:0 0 0 4px #fff}
.premium .ring-symbol{color:#adc6b7;display:flex;align-items:center;justify-content:center;margin-bottom:1px}
.premium .ring-symbol .icon{height:17px;width:17px}
.premium .goal-ring strong{font-size:28px;color:#344d46;line-height:1.2;letter-spacing:-1px}
.premium .goal-ring strong small{font-size:13px;color:#b3bdbb;letter-spacing:0}
.premium .goal-ring .inner>small{font-size:9px;margin-top:3px;color:#a8b0b2}
.premium .goal-caption{font-size:10px;color:#9ca8a3;line-height:1.9}
.premium .week{margin-top:22px;justify-content:space-between;gap:0}
.premium .day{font-size:8px;color:#aab3be}
.premium .day i{width:24px;height:24px;border:0;background:#f5f7fa;color:#9aa7b5;font-size:9px;margin-top:8px}
.premium .day.today i{border:1px solid #afc8bc;background:#eef6f1;color:#769985}
.premium .day.done i{background:#9ebfae;color:#fff}
.premium .daily-bottom{display:flex;justify-content:center;align-items:center;gap:6px;font-size:9px;line-height:1.8;margin:18px -22px -22px;padding:13px 10px;border-top:1px solid #edf0f4;color:#a3b0a8;background:#fdfefd;border-radius:0 0 18px 18px}
.premium .daily-bottom .status-dot{height:4px;width:4px;background:#adc7b8}
.premium .aside-column .challenge-card{background:linear-gradient(135deg,#e7effa,#f2f6fb);border-color:#dae4f1;overflow:hidden;position:relative}
.premium .challenge-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.premium .challenge-icon{height:33px;width:33px;background:#fff8;color:#8da4c6;display:flex;align-items:center;justify-content:center;border-radius:10px}
.premium .challenge-icon .icon{height:17px;width:17px}
.premium .challenge-top .badge{background:none;font-size:7px;letter-spacing:1.1px;color:#9aadc7;padding:0}
.premium .challenge-time{display:flex;align-items:center;gap:9px;margin-top:22px}
.premium .challenge-time>strong{font-size:55px;letter-spacing:-3px;font-weight:700;color:#6e8aae;line-height:1}
.premium .challenge-time>span:not(.challenge-circle){font-size:9px;line-height:1.7;color:#9fb0c7}
.premium .challenge-circle{margin-left:auto;height:49px;width:49px;border:1px solid #cfdded;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff15}
.premium .challenge-circle .icon{width:24px;height:24px;stroke-width:1.2;color:#b1c1d7}
.premium .challenge-card h3{font-size:22px;letter-spacing:-.7px;line-height:1.4;color:#5b7395;margin-top:17px;font-weight:650}
.premium .challenge-card p{font-size:10px;line-height:1.9;color:#a0adc1;margin:9px 0 18px}
.premium .challenge-card .btn{width:100%;border:1px solid #ccd9e8;color:#7790b2;background:#ffffff96;font-size:10px;min-height:37px}
.premium .challenge-card .btn:hover{border-color:#b9cde4;background:#fff}
.premium .challenge-note{font-size:8px;color:#adb9cb;text-align:center;display:block;margin-top:9px}
.premium .source-note{font-size:9px;line-height:1.9;color:#a5adba;padding:0 5px}
.premium .source-note a{color:#9196ad}
.premium .footer{margin-top:34px;border-color:#e6eaf1;color:#aeb5c0;font-size:9px;align-items:center}
.premium .footer strong{font-weight:600;color:#95a0b0}
.premium .footer button{display:flex;align-items:center;gap:5px;color:#a7a2b8;font-size:9px}
.premium .footer button .icon{width:12px;height:12px}
.premium .panel{border-color:#e4e9f1;box-shadow:0 4px 25px #182c4504;border-radius:18px}
.premium .tabs{border:1px solid #e7eaf2;background:#fff;padding:5px;border-radius:13px;gap:5px;margin-bottom:25px}
.premium .tab{border:0;border-radius:9px;min-height:40px;padding:10px 18px;font-size:12px;color:#8d97aa;justify-content:center;flex:1;transition:background .2s}
.premium .tab.active{color:#fff;background:#23344f;font-weight:600;box-shadow:0 3px 8px #19294015}
.premium .tab.active .muted{color:#b7c4da}
.premium .tab .muted{font-size:10px}
.premium .lesson-grid{gap:20px}
.premium .lesson-card{padding:25px;overflow:hidden;position:relative;transition:box-shadow .2s,transform .2s}
.premium .lesson-card:hover{box-shadow:0 12px 30px #263f5d09;transform:translateY(-2px)}
.premium .lesson-card::before{content:"";height:3px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,#c2b6e4,#dae3f6,#c7e2d5)}
.premium .lesson-card .skill-icon{height:45px;width:45px;border-radius:14px}
.premium .lesson-card h3{font-size:20px;letter-spacing:-.6px;font-weight:650;color:#394b64;margin-top:17px}
.premium .lesson-card>p{font-size:12px;color:#9ba5b5;margin-top:7px}
.premium .lesson-card .card-foot{margin-top:28px;border-top:1px solid #eff1f6;padding-top:18px}
.premium .meta{font-size:10px;color:#9ca8b8}
.premium .notice{font-size:11px;line-height:1.85;border-radius:12px;background:#f0eef9;border-color:#e7e3f4;color:#9689b2;padding:14px 17px}
.premium .notice.info{background:#edf3fb;border-color:#e0eaf7;color:#8299b8}
.premium .notice.warning{background:#fdf6e9;border-color:#f0e6d0;color:#a98d59}
.premium .notice.success{background:#edf7f1;border-color:#deeee5;color:#7c9b8b}
.premium .back{color:#9a9fb0;font-size:11px;margin-bottom:19px}
.premium .lesson-header{margin-bottom:23px}
.premium .lesson-header h1{font-size:27px;letter-spacing:-.8px;color:#2b3b52;font-weight:700}
.premium .lesson-header p{font-size:11px;color:#9ba5b6;margin-top:7px;line-height:1.8}
.premium .lesson-layout{gap:24px}
.premium .lesson-layout>.panel{padding:26px}
.premium .passage-title{font-size:14px;font-weight:650;color:#627189}
.premium .passage-title .icon{color:#a092ba;width:18px}
.premium .passage{font-size:14px;line-height:2.05;color:#7e899b;margin-top:21px}
.premium .question{padding:22px 0}
.premium .q-number{font-size:9px;font-weight:700;letter-spacing:1.1px;color:#b4a2ce;margin-bottom:9px}
.premium .question-title{font-size:13px;line-height:1.9;font-weight:600;color:#586980;margin-bottom:14px}
.premium .answer{border-color:#e7ebf2;color:#8b95a6;border-radius:10px;padding:12px 13px;font-size:12px;gap:11px;transition:border-color .15s,background .15s}
.premium .answer:hover{background:#faf9fe;border-color:#c7b9e4}
.premium .answer.selected{background:#f4f0fd;border-color:#c2b0e3;color:#8b6eaf}
.premium .answer.correct{background:#eff8f2;border-color:#bfdcca;color:#6e9d7e}
.premium .answer.wrong{background:#fdf0f2;border-color:#e2bac2;color:#b08792}
.premium .answer input{margin-top:4px}
.premium .explanation{font-size:11px;color:#8a9e8f;line-height:1.9;padding-top:14px}
.premium .score-banner{background:linear-gradient(115deg,#e9f4ee,#f1f8f3);border-color:#d4e7dc;border-radius:17px;padding:26px;gap:24px}
.premium .score-number{color:#6b9e81;font-size:43px}
.premium .score-banner h3{color:#60866e;font-size:18px}
.premium .score-banner p{color:#95b09f;font-size:11px}
.premium .audio-box{padding:23px;background:linear-gradient(135deg,#f0ebfb,#f8f6fc);border-color:#e8e1f3;border-radius:16px}
.premium .audio-controls .play{background:#9580bf;box-shadow:0 5px 15px #8f7bb31a;width:49px;height:49px}
.premium .audio-meta strong{font-size:12px;color:#8c7ca5;font-weight:600}
.premium .audio-meta small{font-size:9px;color:#bcafc9;margin-top:2px}
.premium .wave{height:59px;margin:19px 0 9px}
.premium .wave i{background:#c8b9e1}
.premium details summary{font-size:11px;color:#9d8cb8}
.premium .prompt{background:#f6f3fb;border-color:#eae4f2;border-radius:14px;font-size:14px;line-height:1.9;padding:22px;color:#93849f}
.premium .tip-list{font-size:12px;color:#9ba0ad;line-height:2.15}
.premium .editor{border-color:#e7eaf2;border-radius:12px;background:#fdfdff;font-size:14px;line-height:1.95;padding:20px;color:#65748a;min-height:398px}
.premium .editor:focus{outline:3px solid #efeafa;border-color:#c7b8e3}
.premium .editor.short{min-height:150px}
.premium .editor-foot{font-size:10px;color:#b3b7c2;margin:11px 0 21px}
.premium .rubric{gap:12px;margin-top:23px}
.premium .rubric h3{font-size:13px;color:#9f96ac;font-weight:600}
.premium .rubric label{font-size:11px;color:#a4a7b4;line-height:1.8}
.premium .recorder{border-color:#e9e2f4;border-radius:17px;background:radial-gradient(ellipse at 50% 35%,#f0ebfa,#faf9fd);padding:28px 22px}
.premium .recorder .eyebrow{font-size:8px;letter-spacing:2px;color:#b0a3c0}
.premium .record-clock{font-size:39px;color:#a391bd;letter-spacing:-1px;font-weight:600}
.premium .record-status{font-size:10px;color:#b7afc5}
.premium .record-btn{background:#ac96cd;box-shadow:0 0 0 8px #ede6f7}
.premium .record-btn.recording{background:#d593a2}
.premium .vocab-wrap{max-width:760px}
.premium .flashcard{min-height:351px;border-color:#e5dcf3;border-radius:23px;background:radial-gradient(ellipse at 85% 25%,#f7f1ff,#f1ecf8 60%,#f9f7fd);overflow:hidden}
.premium .flashcard::before,.premium .flashcard::after{content:"";position:absolute;pointer-events:none;width:240px;height:240px;border:1px solid #cfc0e526;border-radius:50%;right:-100px;top:-115px}
.premium .flashcard::after{width:280px;height:280px;right:-115px;top:-134px}
.premium .flashcard .eyebrow{font-size:8px;letter-spacing:2px;color:#baa7d0}
.premium .flashcard .word{font-size:43px;letter-spacing:-1.5px;color:#a08cb7;font-weight:700}
.premium .flashcard .ipa{font-size:14px;color:#bcafca;margin-top:12px}
.premium .flashcard .meaning{font-size:27px;color:#a390b4}
.premium .flashcard .example{font-size:14px;line-height:1.95;color:#b0a2bd}
.premium .flip-hint{font-size:9px;color:#bfb0cf}
.premium .flip-hint .icon{width:11px;height:11px;vertical-align:middle}
.premium .flash-actions{gap:11px;margin-top:25px}
.premium .vocab-item{border-color:#e6eaf1;border-radius:12px;padding:15px;font-size:11px;color:#a4a7b4}
.premium .vocab-item strong{font-size:13px;color:#8b899b}
.premium .vocab-item.known{border-color:#deeee5;background:#f3f9f5}
.premium .exam-hero{background:radial-gradient(ellipse at 88% 0,#55658966,transparent 65%),linear-gradient(115deg,#192c47,#283751);border-color:#2d405c;padding:36px;color:#fff;border-radius:21px;position:relative;overflow:hidden}
.premium .exam-hero::after{content:"";position:absolute;right:-130px;top:-160px;width:440px;height:440px;border:1px solid #c2d4e90e;border-radius:50%;pointer-events:none}
.premium .exam-hero .eyebrow{font-size:8px;letter-spacing:1.8px;color:#8c9fbf}
.premium .exam-hero h2{font-size:33px;letter-spacing:-1px;line-height:1.2;color:#e9edf4;margin:15px 0}
.premium .exam-hero p{font-size:11px;line-height:1.95;color:#8da1bd;max-width:550px}
.premium .exam-hero>.btn{background:#c4ead7;color:#547c68;font-size:11px;box-shadow:0 4px 20px #0a162f25}
.premium .exam-details .panel{border-radius:16px;padding:23px}
.premium .exam-details .panel h3{font-size:13px;color:#92a0b2;line-height:1.8}
.premium .exam-details .panel p{font-size:10px;color:#b8bfc9}
.premium .format-table{font-size:11px;color:#9ca5b4}
.premium .format-table th{font-size:10px;color:#a0a9b8;background:#f7f9fc;font-weight:600}
.premium .format-table th,.premium .format-table td{padding:16px 13px;border-color:#edf0f5}
.premium .timer{background:#f0ebfa;color:#a08abf;font-size:21px;font-weight:650;border:1px solid #e7def2;border-radius:12px;padding:10px 17px}
.premium .timer.urgent{background:#fbecf0;color:#cb8b9b;border-color:#f2dbe2}
.premium .exam-tabs{gap:10px}
.premium .exam-tab{padding:12px;font-size:11px;border-color:#e5eaf2;border-radius:11px;color:#a4adbd}
.premium .exam-tab.active{background:#2b3c57;color:#d7dfed;border-color:#31425c}
.premium .history-row{border-color:#e6ebf2;border-radius:14px;padding:20px 22px}
.premium .history-row h3{font-size:13px;color:#7c899e;font-weight:600}
.premium .history-row p{font-size:10px;color:#b7bfcb;margin-top:5px}
.premium .history-score{color:#b09bca;font-size:22px}
.premium .history-score small{font-size:10px;color:#c4b8d3}
.premium .empty{padding:53px 25px;border-color:#e6eaf1;border-radius:20px}
.premium .empty .empty-icon{background:#f1edf9;color:#b8a5ce;border-radius:20px}
.premium .empty h3{font-size:19px;color:#a192b3;font-weight:600;letter-spacing:-.5px}
.premium .empty p{font-size:12px;color:#bbb3c6;margin-top:9px;line-height:1.9}
.premium .field{font-size:11px}
.premium .field span{font-size:11px;color:#a39aaf;margin-bottom:8px}
.premium .field select{border-color:#e8e4ef;border-radius:10px;padding:12px;color:#a39aaf}
.premium .dialog-overlay{background:#0d1b3280;backdrop-filter:blur(7px)}
.premium .dialog{border-radius:22px;box-shadow:0 25px 100px #0614272b}
.premium .dialog h2{color:#3a4c66}
.premium .dialog p{color:#8593a8}
.premium .dialog .btn{font-size:12px}
/* Keep study text contrast comfortably readable. */
.premium .passage{color:#5a687e}
.premium .question-title{color:#3b4d65}
.premium .answer{color:#64758b}
.premium .answer.selected{color:#745a99}
.premium .answer.correct{color:#397c54}
.premium .answer.wrong{color:#aa6677}
.premium .explanation{color:#6a8873}
.premium .prompt{color:#72617e}
.premium .tip-list{color:#7e8899}
.premium .rubric label{color:#7f8495}
.premium .flashcard .word{color:#7a5f9a}
.premium .flashcard .meaning{color:#7d6295}
.premium .flashcard .example{color:#95839e}
.premium .empty h3{color:#877098}
.premium .empty p{color:#a99cb4}
.premium .history-row h3{color:#66758c}
@media(min-width:1650px){
 .premium .content{padding:39px 45px}.premium .hero-premium{padding:39px 44px;min-height:367px}.premium .hero-premium h2{font-size:49px}.premium .hero-premium p{font-size:13px}.premium .hero-art{width:468px;right:28px;top:-48px;bottom:-49px}.premium .dashboard-columns{grid-template-columns:minmax(0,1fr) 303px;gap:28px}.premium .skill-card{padding:20px;min-height:249px}.premium .skill-visual{height:73px;width:73px;margin-top:10px}.premium .skill-card h3{font-size:19px}.premium .skill-card .count{font-size:10px}
}
@media(max-width:1280px){
 .app-shell.premium{padding-left:220px}.premium .sidebar{width:220px;padding-left:15px;padding-right:15px}.premium .brand{padding:0 8px;gap:10px}.premium .brand img{width:38px;height:38px}.premium .brand-name{font-size:19px}.premium .brand-name span{font-size:15px}.premium .brand small{font-size:7px;letter-spacing:1.9px}.premium .nav-link{font-size:12px;padding-left:11px;gap:9px}.premium .nav-label{font-size:8px;padding-left:12px}.premium .nav-link.active::before{left:-15px}.premium .content{padding:28px 30px}.premium .topbar{padding:0 30px;height:82px}.premium .top-actions{gap:14px}.premium .breadcrumbs{font-size:10px;gap:8px}.premium .hero-premium{padding:31px;min-height:322px}.premium .hero-premium h2{font-size:40px}.premium .hero-art{width:365px;right:3px;top:-24px;bottom:-27px}.premium .hero-premium .hero-copy{max-width:61%}.premium .hero-premium .hero-actions{gap:15px}.premium .hero-premium .btn.ghost{font-size:9px}.premium .hero-premium p{font-size:11px}.premium .hero-bottom{font-size:8px;gap:9px}.premium .art-label{bottom:56px;left:30px;padding:9px 13px 9px 9px}.premium .hero-chapter{right:22px;font-size:7px;letter-spacing:3px}.premium .dashboard-columns{grid-template-columns:minmax(0,1fr) 255px;gap:22px}.premium .aside-column .panel{padding:20px}.premium .daily-bottom{margin:17px -20px -20px}.premium .metric{padding:18px;gap:12px}.premium .metric-value{font-size:23px}.premium .metric-icon{width:39px;height:39px}.premium .metric-value span{font-size:9px}.premium .metric-mini-ring{width:23px;height:23px}.premium .metric-spark{font-size:20px}.premium .metric-bars{gap:2px}.premium .metric-bars i{width:3px}.premium .premium-metrics{gap:14px;margin-top:19px}.premium .skill-card{padding:15px;min-height:224px}.premium .skill-card h3{font-size:16px}.premium .skill-card .count{font-size:8px}.premium .skill-visual{height:60px;width:60px}.premium .skill-grid{gap:11px}.premium .study-row{gap:11px;padding:15px 13px}.premium .study-subject{width:33px;height:33px;border-radius:10px}.premium .study-copy h3{font-size:11px}.premium .study-copy p{font-size:9px}.premium .study-row .btn{font-size:9px;padding:7px 9px}.premium .challenge-card h3{font-size:21px}
}
@media(max-width:1180px) and (min-width:1081px){
 .premium .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.premium .skill-card{min-height:186px}.premium .skill-visual{position:absolute;right:20px;top:45px;height:74px;width:74px;opacity:.45}.premium .skill-card-copy{margin-top:22px}.premium .skill-card-bottom{margin-top:16px}.premium .skill-card .count{font-size:9px}.premium .hero-art{width:330px;right:-12px}.premium .hero-premium .hero-copy{max-width:64%}.premium .hero-premium h2{font-size:38px}.premium .hero-premium .btn.ghost{display:none}.premium .hero-bottom span:last-child{display:none}.premium .hero-bottom i{display:none}.premium .daily-chip span{display:none}.premium .daily-chip{background:#fff;border:1px solid #e8edf4;width:33px;height:33px;justify-content:center;border-radius:10px}
}
@media(max-width:1080px){
 .app-shell.premium{padding-left:210px}.premium .sidebar{width:210px}.premium .brand-name{font-size:18px}.premium .brand-name span{font-size:14px}.premium .content{padding:28px}.premium .topbar{padding:0 28px}.premium .breadcrumbs>span:not(.breadcrumb-icon){display:none}.premium .daily-chip span{display:none}.premium .daily-chip{width:33px;height:33px;border:1px solid #e8edf4;border-radius:10px;justify-content:center;background:#fff}.premium .top-actions{gap:11px}.premium .page-intro h1{font-size:26px}.premium .intro-date{display:none}.premium .hero-premium{min-height:320px;padding:29px}.premium .hero-premium .hero-copy{max-width:63%}.premium .hero-premium h2{font-size:39px}.premium .hero-premium p{font-size:11px}.premium .hero-art{width:340px;right:-19px;top:-13px}.premium .hero-premium .btn.ghost{display:none}.premium .hero-bottom span:last-child,.premium .hero-bottom i{display:none}.premium .art-label{left:48px;bottom:55px}.premium .art-label strong{font-size:9px}.premium .art-label small{font-size:7px}.premium .dashboard-columns{grid-template-columns:minmax(0,1fr);gap:25px}.premium .aside-column{grid-template-columns:1fr 1fr;gap:19px}.premium .source-note{grid-column:1/-1}.premium .aside-column .panel{padding:23px}.premium .daily-panel .panel-title h3{font-size:15px}.premium .goal-ring{margin:22px auto;width:140px;height:140px}.premium .week{justify-content:center;gap:13px}.premium .daily-bottom{margin:20px -23px -23px}.premium .challenge-top .badge{font-size:8px}.premium .challenge-card h3{font-size:25px}.premium .challenge-card p{font-size:11px;line-height:2}.premium .challenge-time{margin-top:25px}.premium .challenge-time>strong{font-size:60px}.premium .challenge-card .btn{margin-top:5px}.premium .metric{padding:17px 15px;gap:11px}.premium .metric-value span{display:block;margin:0;font-size:8px;line-height:1.4;color:#a6b0be}.premium .metric-value{font-size:24px;line-height:1.3}.premium .metric-icon{width:36px;height:36px;flex:none}.premium .metric-label{font-size:9px}.premium .metric-spark,.premium .metric-bars,.premium .metric-mini-ring{display:none}
}
@media(max-width:900px){
 .app-shell.premium{padding-left:0;padding-bottom:83px}.premium .sidebar{display:none}.premium .topbar{height:76px;padding:0 27px}.premium .breadcrumbs{display:none}.premium .topbar-brand{display:flex;align-items:center;gap:8px;color:#263750;font-size:20px;font-weight:750;letter-spacing:-.8px}.premium .topbar-brand img{width:34px;height:34px;border-radius:11px;box-shadow:0 4px 9px #222f4712}.premium .topbar-brand span{font-size:16px;font-weight:450;color:#9ba5b5;margin-left:-4px}.premium .content{padding:27px}.premium .top-actions{gap:12px}.premium .header-help{display:none}.premium .level-pill{padding:5px 10px}.premium .level-pill select{font-size:14px}.premium .daily-chip{width:33px;height:33px;padding:7px}.premium .hero-premium{min-height:333px;padding:33px}.premium .hero-premium .hero-copy{max-width:63%}.premium .hero-premium h2{font-size:42px}.premium .hero-premium p{font-size:12px}.premium .hero-art{width:369px;right:-5px;top:-19px}.premium .hero-bottom span:last-child{display:inline-flex}.premium .hero-bottom i{display:block}.premium .hero-bottom{font-size:8px}.premium .hero-premium .btn.ghost{display:inline-flex}.premium .hero-premium .hero-actions{gap:17px}.premium .hero-premium .btn.ghost{font-size:9px}.premium .premium-metrics{gap:15px}.premium .metric{padding:18px 17px;gap:13px;align-items:center;flex-direction:row}.premium .metric-value span{display:inline;margin-left:6px;font-size:9px}.premium .metric-label{font-size:9px}.premium .metric-value{font-size:24px}.premium .metric-icon{width:38px;height:38px}.premium .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;justify-content:space-around;background:#fffffff2;backdrop-filter:blur(16px);border-top:1px solid #e8ecf3;box-shadow:0 -5px 25px #1a2e4905;padding:7px 17px calc(9px + env(safe-area-inset-bottom))}.premium .mobile-nav a{display:flex;align-items:center;flex-direction:column;gap:3px;min-width:58px;padding:0;font-size:9px;color:#a5aebe;text-decoration:none}.premium .mobile-icon{height:32px;width:45px;display:flex;align-items:center;justify-content:center;border-radius:11px}.premium .mobile-nav a.active{color:#7a6dba;font-weight:600}.premium .mobile-nav a.active .mobile-icon{background:#f0ecfa;color:#8c7bc6}.premium .mobile-nav .icon{height:19px;width:19px;stroke-width:1.7}.toast{left:50%;bottom:93px}.premium .lesson-layout{grid-template-columns:1fr}.premium .settings-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .premium .page-intro h1{font-size:25px}.premium .page-intro p{font-size:11px;max-width:100%}.premium .hero-premium{min-height:322px;padding:28px}.premium .hero-premium h2{font-size:37px}.premium .hero-premium .hero-copy{max-width:65%}.premium .hero-premium p{font-size:11px}.premium .hero-art{width:315px;right:-20px;top:-4px;opacity:1}.premium .hero-bottom span:last-child,.premium .hero-bottom i{display:none}.premium .hero-premium .btn.ghost{display:none}.premium .art-label{bottom:55px;left:45px;padding:8px 12px 8px 8px;border-radius:11px}.premium .art-label strong{font-size:8px}.premium .art-label small{font-size:7px}.premium .art-label>span{height:24px;width:24px;border-radius:7px}.premium .hero-chapter{font-size:6px;letter-spacing:2px}.premium .hero-premium .eyebrow{font-size:7px;letter-spacing:1.4px}.premium .hero-premium .hero-bottom{font-size:8px;margin-top:25px}.premium .premium-metrics{margin-top:17px;margin-bottom:28px;gap:11px}.premium .metric{padding:16px 13px;flex-direction:row;gap:9px}.premium .metric-value span{display:block;margin:0;line-height:1.6;font-size:8px}.premium .metric-icon{height:32px;width:32px;border-radius:10px}.premium .metric-icon .icon{width:16px;height:16px}.premium .metric-label{font-size:8px}.premium .metric-value{font-size:23px}.premium .section-heading h2{font-size:21px}.premium .skill-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.premium .skill-card{padding:15px 13px;min-height:213px}.premium .skill-visual{height:54px;width:54px;margin:9px -4px 6px auto}.premium .skill-card .skill-icon{height:29px;width:29px;border-radius:9px}.premium .skill-card .en{font-size:7px;letter-spacing:1px}.premium .skill-card h3{font-size:16px}.premium .skill-card .count{font-size:8px;line-height:1.7}.premium .lesson-card h3{font-size:19px}.premium .tabs{margin-left:0;margin-right:0;padding:4px;gap:4px}.premium .tab{font-size:11px;padding:10px 13px;gap:7px}.premium .tab .muted{display:none}.premium .tabs .tab .icon{width:15px;height:15px}.premium .lesson-header h1{font-size:24px}.premium .lesson-header p{font-size:10px}.premium .lesson-layout>.panel{padding:23px}.premium .settings-grid{grid-template-columns:1fr}.premium .editor{min-height:340px}.premium .editor.short{min-height:145px}.premium .exam-hero{padding:30px;gap:22px}.premium .exam-hero h2{font-size:30px}.premium .exam-hero p{font-size:11px}.premium .exam-details{gap:13px}.premium .exam-details .panel{padding:21px}.premium .exam-details .panel h3{font-size:12px}.premium .result-skills .panel{padding:20px}
}
@media(max-width:650px){
 .premium .topbar{padding:0 21px;height:71px}.premium .topbar-brand{font-size:18px;gap:7px}.premium .topbar-brand img{width:31px;height:31px}.premium .topbar-brand span{font-size:15px}.premium .top-actions{gap:9px}.premium .level-pill .goal-word{display:none}.premium .level-pill{padding:4px 7px}.premium .level-pill select{font-size:13px}.premium .content{padding:23px 21px 30px}.premium .page-intro{margin-bottom:23px}.premium .page-intro h1{font-size:25px;letter-spacing:-.9px}.premium .page-intro p{font-size:10px;line-height:1.9;margin-top:7px}.premium .hero-premium{min-height:343px;padding:28px 27px;border-radius:21px}.premium .hero-premium .hero-copy{max-width:100%}.premium .hero-premium h2{font-size:38px;line-height:1.12;letter-spacing:-1.4px;margin-top:14px;margin-bottom:16px}.premium .hero-premium p{font-size:11px;max-width:235px;position:relative;z-index:3}.premium .hero-premium .hero-actions{margin-top:26px}.premium .hero-premium .btn.primary{font-size:10px;padding:11px 15px;min-height:41px}.premium .hero-premium .hero-bottom{margin-top:23px;font-size:7px}.premium .hero-art{width:240px;height:auto;top:auto;bottom:-54px;right:-36px;z-index:1;opacity:.92;align-items:flex-end}.premium .hero-art img{animation:none}.premium .art-label{display:none}.premium .art-glow{width:240px;height:190px;right:10px;top:30px}.premium .hero-chapter{bottom:13px;left:28px;right:auto;font-size:6px;letter-spacing:2px;display:none}.premium .hero-grid{background-size:29px 29px;opacity:.7}.premium .premium-metrics{gap:9px;margin:16px 0 28px}.premium .metric{padding:15px 13px;flex-direction:column;align-items:flex-start;gap:9px;border-radius:13px;min-height:120px}.premium .metric-icon{height:29px;width:29px;border-radius:9px}.premium .metric-icon .icon{height:15px;width:15px}.premium .metric-label{font-size:8px;margin-bottom:3px;line-height:1.5}.premium .metric-value{font-size:23px;line-height:1.2}.premium .metric-value span{font-size:8px;line-height:1.6;margin:3px 0 0}.premium .section-kicker{font-size:7px;letter-spacing:1.3px}.premium .section-heading{gap:10px;margin-bottom:17px}.premium .section-heading h2{font-size:21px;margin-top:4px}.premium .section-heading p{font-size:10px;line-height:1.9}.premium .section-heading .btn{font-size:8px;gap:4px;white-space:nowrap;align-self:center}.premium .section-heading .btn .icon{height:11px;width:11px}.premium .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.premium .skill-card{min-height:210px;padding:17px}.premium .skill-card .skill-icon{height:31px;width:31px}.premium .skill-visual{height:64px;width:64px;margin:5px -1px 4px auto}.premium .skill-card .en{font-size:8px;letter-spacing:1.2px}.premium .skill-card h3{font-size:18px;margin-top:3px}.premium .skill-card .count{font-size:8px}.premium .skill-card-bottom{margin-top:13px}.premium .skill-card .go{height:23px;width:23px}.premium .study-panel{margin-top:27px}.premium .study-row{gap:11px;padding:15px 13px}.premium .study-step{width:15px;font-size:9px}.premium .study-subject{width:31px;height:31px;border-radius:9px}.premium .study-subject .icon{width:15px;height:15px}.premium .study-copy h3{font-size:11px;line-height:1.7}.premium .study-copy p{font-size:8px}.premium .study-row .btn{font-size:9px;padding:7px 9px;min-height:31px;gap:4px}.premium .study-row .btn .icon{width:10px}.premium .journey-strip{padding:16px 14px;gap:12px;border-radius:13px}.premium .journey-strip h3{font-size:10px;line-height:1.9}.premium .journey-strip p{font-size:9px;line-height:1.8}.premium .journey-icon{height:30px;width:30px;border-radius:9px}.premium .journey-icon .icon{width:16px;height:16px}.premium .journey-strip>.icon-btn{padding:0}.premium .journey-strip>.icon-btn .icon{height:14px;width:14px}.premium .aside-column{grid-template-columns:1fr;gap:18px}.premium .aside-column .panel{padding:22px}.premium .daily-panel{display:grid;grid-template-columns:118px 1fr;column-gap:20px}.premium .daily-panel .panel-title{grid-column:1/-1;margin-bottom:18px}.premium .goal-ring{width:115px;height:115px;margin:0;grid-column:1;grid-row:2/4}.premium .goal-ring strong{font-size:27px}.premium .goal-ring .inner>small{font-size:8px}.premium .goal-caption{grid-column:2;text-align:left;font-size:10px;line-height:1.9;align-self:end;margin-bottom:4px}.premium .week{grid-column:2;justify-content:space-between;gap:0;align-self:start;margin-top:11px}.premium .day{font-size:7px}.premium .day i{width:22px;height:22px;font-size:8px}.premium .daily-bottom{grid-column:1/-1;margin:21px -22px -22px;padding:12px 10px;font-size:8px}.premium .challenge-card{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.premium .challenge-top{grid-column:1/-1}.premium .challenge-time{grid-column:1;margin-top:20px;align-self:center}.premium .challenge-time>strong{font-size:58px}.premium .challenge-time>span:not(.challenge-circle){font-size:9px}.premium .challenge-circle{display:none}.premium .challenge-card h3{grid-column:2;grid-row:2;font-size:24px;line-height:1.35;align-self:center;margin-top:20px}.premium .challenge-card p{grid-column:1/-1;margin:18px 0 16px;font-size:10px}.premium .challenge-card .btn{grid-column:1/-1;margin:0;min-height:38px}.premium .challenge-note{grid-column:1/-1;margin-top:10px;font-size:8px}.premium .source-note{font-size:8px;line-height:2}.premium .footer{font-size:8px;margin-top:29px;padding-top:19px}.premium .footer button{font-size:8px}.premium .lesson-grid{gap:17px}.premium .lesson-card{padding:22px}.premium .lesson-card .skill-icon{height:43px;width:43px}.premium .lesson-card h3{font-size:20px}.premium .lesson-card>p{font-size:11px}.premium .lesson-card .card-foot{margin-top:22px;padding-top:17px}.premium .meta{font-size:10px;gap:11px}.premium .lesson-card .btn{font-size:10px}.premium .notice{font-size:10px;line-height:1.95;padding:14px 15px}.premium .notice .icon{height:16px;width:16px}.premium .lesson-header{gap:13px;margin-bottom:20px}.premium .lesson-header h1{font-size:23px;letter-spacing:-.6px}.premium .lesson-header p{font-size:10px;line-height:1.9}.premium .lesson-header .badge{font-size:8px;padding:5px 8px}.premium .lesson-layout>.panel{padding:22px}.premium .passage{font-size:13px;line-height:2.05}.premium .passage-title{font-size:13px}.premium .question-title{font-size:13px;line-height:1.85}.premium .q-number{font-size:8px}.premium .answer{font-size:12px;padding:11px 12px}.premium .explanation{font-size:11px;line-height:1.95}.premium .audio-box{padding:19px}.premium .audio-controls{gap:9px}.premium .audio-controls .play{height:44px;width:44px}.premium .audio-meta strong{font-size:11px}.premium .rate{font-size:10px;padding:4px}.premium .wave{height:51px;gap:4px}.premium .wave i{width:3px}.premium .prompt{padding:19px;font-size:13px}.premium .tip-list{font-size:11px;line-height:2.1}.premium .editor{font-size:13px;padding:18px;min-height:330px}.premium .editor.short{min-height:145px}.premium .rubric label{font-size:11px}.premium .question-actions .btn{font-size:10px;padding:10px 13px}.premium .question-actions small{font-size:9px}.premium .score-banner{padding:22px;gap:19px}.premium .score-banner h3{font-size:16px}.premium .score-banner p{font-size:10px;line-height:1.9}.premium .score-number{font-size:37px}.premium .vocab-toolbar{gap:11px}.premium .vocab-toolbar>.small{font-size:10px}.premium .flashcard{min-height:323px;padding:25px 20px;border-radius:21px}.premium .flashcard .word{font-size:34px;letter-spacing:-1px}.premium .flashcard .ipa{font-size:13px}.premium .flashcard .meaning{font-size:25px}.premium .flashcard .example{font-size:13px}.premium .flash-actions{gap:9px}.premium .flash-actions .btn{font-size:10px;padding:10px 13px}.premium .vocab-list{gap:9px}.premium .vocab-item{padding:12px;font-size:10px;line-height:1.9}.premium .vocab-item strong{font-size:12px}.premium .exam-hero{padding:28px}.premium .exam-hero h2{font-size:29px}.premium .exam-hero .eyebrow{font-size:7px}.premium .exam-hero p{font-size:10px}.premium .exam-hero>.btn{font-size:10px}.premium .exam-details{gap:11px;margin:19px 0}.premium .exam-details .panel{padding:19px}.premium .exam-details .skill-icon{width:38px;height:38px}.premium .exam-details .panel h3{font-size:12px}.premium .exam-details .panel p{font-size:9px}.premium .timer{font-size:17px;padding:9px 11px;gap:7px}.premium .timer .icon{width:15px;height:15px}.premium .exam-tabs{gap:7px}.premium .exam-tab{font-size:10px;padding:11px 7px;gap:6px}.premium .exam-tab .icon{height:13px;width:13px}.premium .result-skills{gap:11px}.premium .result-skills .panel{padding:20px}.premium .history-row{padding:17px 15px;gap:12px}.premium .history-row h3{font-size:12px}.premium .history-row p{font-size:9px}.premium .history-score{font-size:20px}.premium .history-row .skill-icon{width:34px;height:34px;border-radius:11px}.premium .history-row .skill-icon .icon{width:17px;height:17px}.premium .history-row .icon-btn{padding:3px}.premium .mobile-nav{padding-left:9px;padding-right:9px}.premium .mobile-nav a{font-size:8px;min-width:50px}.premium .mobile-icon{width:42px;height:31px}.premium .mobile-nav .icon{height:19px;width:19px}
}
@media(max-width:390px){
 .premium .topbar{padding:0 16px}.premium .topbar-brand{font-size:17px;gap:6px}.premium .topbar-brand span{font-size:14px}.premium .topbar-brand img{height:29px;width:29px}.premium .top-actions{gap:7px}.premium .daily-chip{width:29px;height:29px}.premium .daily-chip .icon{height:13px;width:13px}.premium .content{padding:22px 16px 28px}.premium .page-intro h1{font-size:23px}.premium .hero-premium{min-height:340px;padding:25px 23px}.premium .hero-premium h2{font-size:34px;letter-spacing:-1.25px;line-height:1.14}.premium .hero-premium p{font-size:10px;max-width:218px}.premium .hero-premium .eyebrow{font-size:6px;letter-spacing:1.25px}.premium .hero-premium .hero-actions{margin-top:27px}.premium .hero-premium .btn.primary{font-size:9px;padding:10px 13px;min-height:38px}.premium .hero-premium .hero-bottom{font-size:7px;gap:6px}.premium .hero-art{width:204px;right:-42px;bottom:-26px;opacity:.88}.premium .metric{padding:14px 11px}.premium .metric-label{font-size:7px}.premium .metric-value{font-size:22px}.premium .metric-value span{font-size:7px}.premium .premium-metrics{gap:8px}.premium .section-heading .btn{font-size:7px}.premium .skill-card{padding:15px;min-height:207px}.premium .skill-card h3{font-size:17px}.premium .study-row{padding:14px 12px;gap:9px}.premium .study-step{display:none}.premium .study-copy h3{font-size:10px}.premium .study-copy p{font-size:8px}.premium .study-row .btn{font-size:8px;padding:7px 9px}.premium .study-row .btn .icon{display:none}.premium .journey-strip{padding:14px 12px;gap:10px}.premium .journey-strip h3{font-size:9px}.premium .journey-strip p{font-size:8px}.premium .daily-panel{grid-template-columns:104px 1fr;gap:14px}.premium .goal-ring{width:104px;height:104px;padding:8px}.premium .goal-ring strong{font-size:24px}.premium .goal-ring strong small{font-size:11px}.premium .ring-symbol .icon{height:14px;width:14px}.premium .goal-caption{font-size:9px}.premium .day i{width:19px;height:19px;font-size:7px}.premium .week{margin-top:7px}.premium .daily-bottom{margin-top:17px;font-size:7px}.premium .aside-column .panel{padding:20px}.premium .daily-bottom{margin-left:-20px;margin-right:-20px;margin-bottom:-20px}.premium .challenge-card h3{font-size:22px}.premium .challenge-time>strong{font-size:52px}.premium .flash-actions{gap:7px}.premium .flash-actions .btn{padding:9px 11px;font-size:9px}.premium .footer{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(prefers-reduced-motion:reduce){.premium *,.premium *::before,.premium *::after{animation:none!important;transition:none!important}}
@media print{.premium .sidebar,.premium .topbar,.premium .mobile-nav{display:none}.app-shell.premium{padding:0}.premium .hero-premium{background:#fff;color:#000}.premium .hero-premium h2{color:#111}.premium .hero-art{display:none}.premium .content{padding:0}}

/* Readability layer: clear contrast and comfortable Vietnamese labels. */
.premium .page-intro p{font-size:13px;color:#7b8799}
.premium .hero-premium{min-height:351px}
.premium .hero-premium .eyebrow{font-size:10px;letter-spacing:1.5px;color:#a8b8cf}
.premium .hero-premium p{font-size:14px;color:#a4b3c9}
.premium .hero-premium .btn.primary{font-size:13px;padding:12px 19px}
.premium .hero-premium .btn.ghost{font-size:11px;color:#b9c8dd}
.premium .hero-bottom{font-size:10px;color:#94a8c2}
.premium .hero-art{width:425px}
.premium .intro-date{font-size:11px;color:#7b8ba0}
.premium .metric-label{font-size:11px;color:#8692a4}
.premium .metric-value{font-size:26px;color:#26374e}
.premium .metric-value span{font-size:11px;color:#909daf}
.premium .skill-card{min-height:247px}
.premium .skill-card .en{font-size:10px;color:var(--skill-text);letter-spacing:1.1px}
.premium .skill-card .count{font-size:11px;color:#8592a4;line-height:1.7}
.premium .skill-card h3{font-size:19px;color:#344863;margin-top:2px}
.premium .skill-listening{--skill-text:#a7763b}
.premium .skill-reading{--skill-text:#5c7caf}
.premium .skill-writing{--skill-text:#8a6aac}
.premium .skill-speaking{--skill-text:#548c72}
.premium .section-kicker{font-size:9px;color:#94a0b2}
.premium .section-heading p{font-size:12px;color:#8b98aa}
.premium .section-heading .btn{font-size:11px}
.premium .study-copy h3{font-size:13px;color:#586b85}
.premium .study-copy p{font-size:11px;color:#8d9bae}
.premium .study-row .btn{font-size:11px;color:#8a73b3}
.premium .study-step{font-size:11px;color:#a7b4c6}
.premium .goal-caption{font-size:11px;color:#7e9589}
.premium .goal-ring .inner>small{font-size:10px;color:#97aaa0}
.premium .daily-bottom{font-size:10px;color:#8da297}
.premium .challenge-top .badge{font-size:8px;color:#8ea2bf}
.premium .challenge-time>span:not(.challenge-circle){font-size:11px;color:#879dbb}
.premium .challenge-card h3{color:#506d94}
.premium .challenge-card p{font-size:12px;color:#7f95b3}
.premium .challenge-card .btn{font-size:11px;color:#6e89ad}
.premium .challenge-note{font-size:9px;color:#8fa2bd}
.premium .journey-strip h3{font-size:12px;color:#917d5c}
.premium .journey-strip p{font-size:11px;color:#a59374}
.premium .source-note{font-size:10px;color:#9aa5b5}
.premium .footer{font-size:10px;color:#9ba8ba}
.premium .footer button{font-size:10px}
.premium .notice{font-size:12px;color:#827094}
.premium .notice.info{color:#6983a5}
.premium .notice.warning{color:#997c45}
.premium .notice.success{color:#659078}
.premium .lesson-card>p{font-size:13px;color:#8899ae}
.premium .meta{font-size:11px;color:#8d9eb5}
.premium .lesson-header p{font-size:12px;color:#91a0b4}
.premium .audio-meta strong{color:#877098}
.premium .audio-meta small{color:#a695b8}
.premium .score-banner h3{color:#577e64}
.premium .score-banner p{color:#829e8b;font-size:12px;line-height:1.8}
.premium .score-number{color:#528264}
.premium .rubric label{font-size:12px;color:#7d8b9f}
.premium .editor-foot{font-size:11px;color:#96a3b6}
.premium .flashcard .example{color:#8c769c}
.premium .vocab-item{color:#8a94a6;font-size:12px}
.premium .vocab-item strong{color:#7f7395;font-size:14px}
.premium .exam-hero p{font-size:13px;color:#a3b5d0}
.premium .exam-details .panel h3{color:#7e91aa;font-size:14px}
.premium .exam-details .panel p{color:#94a4bb;font-size:12px}
.premium .format-table{font-size:12px;color:#8b9bb1}
.premium .history-row h3{font-size:14px;color:#6f819c}
.premium .history-row p{font-size:11px;color:#9aacc3}
.premium .field span{font-size:12px;color:#8a7d9a}
.premium .field select{color:#8a7d9a}
@media(min-width:1650px){.premium .hero-premium{min-height:377px}.premium .hero-art{width:470px}}
@media(max-width:1280px){
 .premium .hero-premium{min-height:343px}.premium .hero-art{width:374px}.premium .hero-premium .eyebrow{font-size:9px}.premium .hero-premium p{font-size:13px}.premium .hero-premium .btn.primary{font-size:12px;padding:11px 16px}.premium .hero-premium .btn.ghost{font-size:10px}.premium .hero-bottom{font-size:9px}.premium .skill-card{min-height:242px}.premium .skill-card h3{font-size:18px}.premium .skill-card .count{font-size:10px}.premium .skill-card .en{font-size:9px}.premium .study-copy h3{font-size:12px}.premium .study-copy p{font-size:10px}.premium .study-row .btn{font-size:10px}.premium .metric-label{font-size:10px}.premium .metric-value span{font-size:10px}.premium .challenge-card p{font-size:11px}
}
@media(max-width:1180px) and (min-width:1081px){
 .premium .skill-card{min-height:205px}.premium .hero-art{width:333px}.premium .hero-premium .btn.ghost{display:none}.premium .skill-card .count{font-size:11px}
}
@media(max-width:1080px){
 .premium .hero-premium{min-height:344px}.premium .hero-art{width:348px;right:-22px}.premium .hero-premium p{font-size:12px}.premium .hero-premium .eyebrow{font-size:8px}.premium .hero-bottom{font-size:9px}.premium .metric-label{font-size:10px;line-height:1.5}.premium .metric-value span{font-size:9px}.premium .skill-card{min-height:247px}.premium .skill-card .count{font-size:10px}.premium .challenge-card p{font-size:12px}
}
@media(max-width:900px){
 .premium .hero-premium{min-height:353px}.premium .hero-art{width:380px;right:-8px}.premium .hero-premium .eyebrow{font-size:9px}.premium .hero-premium p{font-size:13px}.premium .hero-bottom{font-size:9px}.premium .metric-label{font-size:11px}.premium .metric-value span{font-size:10px}.premium .skill-card .count{font-size:11px}
}
@media(max-width:760px){
 .premium .hero-premium{min-height:348px}.premium .hero-art{width:329px;right:-30px}.premium .hero-premium .eyebrow{font-size:8px}.premium .hero-premium p{font-size:12px}.premium .hero-premium .btn.primary{font-size:11px}.premium .metric-label{font-size:10px}.premium .metric-value span{font-size:9px}.premium .skill-card{min-height:241px}.premium .skill-card h3{font-size:17px}.premium .skill-card .count{font-size:10px}.premium .skill-card .en{font-size:9px}.premium .lesson-header p{font-size:11px}.premium .exam-hero p{font-size:12px}
}
@media(max-width:650px){
 .premium .hero-premium{min-height:364px}.premium .hero-art{width:230px;right:-42px;bottom:-20px;opacity:.87}.premium .hero-premium .eyebrow{font-size:8px;letter-spacing:1px}.premium .hero-premium p{font-size:12px;max-width:250px}.premium .hero-premium .btn.primary{font-size:12px;padding:11px 15px}.premium .hero-bottom{font-size:9px}.premium .page-intro p{font-size:12px}.premium .metric{min-height:137px;gap:11px;padding:16px 12px}.premium .metric-label{font-size:10px;line-height:1.6}.premium .metric-value{font-size:24px}.premium .metric-value span{font-size:9px;line-height:1.7}.premium .section-kicker{font-size:8px}.premium .section-heading p{font-size:11px}.premium .section-heading .btn{font-size:9px}.premium .skill-card{min-height:237px}.premium .skill-card h3{font-size:20px}.premium .skill-card .count{font-size:10px;line-height:1.8}.premium .skill-card .en{font-size:10px}.premium .study-copy h3{font-size:12px}.premium .study-copy p{font-size:10px;line-height:1.8}.premium .study-row .btn{font-size:10px}.premium .study-step{font-size:10px}.premium .journey-strip h3{font-size:11px;line-height:1.8}.premium .journey-strip p{font-size:10px}.premium .goal-caption{font-size:11px}.premium .goal-ring .inner>small{font-size:10px}.premium .daily-bottom{font-size:9px}.premium .challenge-card p{font-size:12px}.premium .challenge-card .btn{font-size:12px}.premium .challenge-note{font-size:10px}.premium .source-note{font-size:10px}.premium .footer{font-size:9px}.premium .footer button{font-size:9px}.premium .notice{font-size:11px}.premium .tip-list{font-size:12px}.premium .rubric label{font-size:12px}.premium .lesson-card>p{font-size:12px}.premium .meta{font-size:11px}.premium .lesson-card .btn{font-size:11px}.premium .lesson-header p{font-size:11px}.premium .score-banner p{font-size:11px}.premium .vocab-item{font-size:11px}.premium .vocab-item strong{font-size:13px}.premium .exam-hero p{font-size:12px}.premium .exam-details .panel h3{font-size:13px}.premium .exam-details .panel p{font-size:11px}.premium .history-row h3{font-size:13px}.premium .history-row p{font-size:10px}.premium .mobile-nav a{font-size:9px}.premium .flash-actions .btn{font-size:11px}
}
@media(max-width:390px){
 .premium .hero-premium{min-height:358px}.premium .hero-art{width:196px;right:-40px;bottom:-2px}.premium .hero-premium .eyebrow{font-size:7px;letter-spacing:.7px}.premium .hero-premium p{font-size:11px;max-width:225px}.premium .hero-premium .btn.primary{font-size:11px}.premium .hero-bottom{font-size:8px}.premium .metric{padding:14px 11px;min-height:135px}.premium .metric-label{font-size:9px}.premium .metric-value span{font-size:9px}.premium .skill-card{min-height:235px}.premium .skill-card h3{font-size:18px}.premium .skill-card .count{font-size:10px}.premium .study-copy h3{font-size:11px}.premium .study-copy p{font-size:9px}.premium .study-row .btn{font-size:9px}.premium .daily-bottom{font-size:8px}.premium .goal-caption{font-size:10px}.premium .goal-ring .inner>small{font-size:9px}.premium .flash-actions .btn{font-size:10px}.premium .journey-strip h3{font-size:10px}.premium .journey-strip p{font-size:9px}
}