/* Unified level -> box -> phase course. */
.course-map{min-height:100vh;padding:38px clamp(18px,5vw,72px) 100px;background:linear-gradient(180deg,#fbf8f0,#f6f1e6);color:#3c3348}
.course-map-hero{max-width:1180px;margin:0 auto 28px;display:grid;grid-template-columns:1fr;gap:24px;padding:clamp(28px,5vw,58px);border:1px solid #d8c9b0;border-radius:34px;background:radial-gradient(circle at 80% 20%,#f4dca7 0,transparent 35%),#fffaf0;box-shadow:9px 10px 0 #e8dcc8;overflow:hidden}
.course-map-hero>div>span,.course-map-title>div>span,.course-zone-body header>span{font-size:10px;font-weight:900;letter-spacing:.08em;color:#8162a8}
.course-map-hero h1{font-size:clamp(37px,6vw,68px);line-height:1.25;margin:12px 0}.course-map-hero h1 em{color:#7e5da5;font-style:normal}.course-map-hero p{max-width:650px;color:#726b79;line-height:2;font-size:13px}
.course-map-hero aside{align-self:stretch;border:1px solid #cfb678;border-radius:25px;background:#302a46;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:7px 8px 0 #d7c795}
.course-map-hero aside small{color:#d8cdec;font-size:9px}.course-map-hero aside strong{font:900 62px/1.1 'DM Sans',sans-serif;margin:8px}.course-map-hero aside>span{font-size:11px}.course-map-hero aside>div{display:flex;gap:7px;margin-top:18px}.course-map-hero aside i{width:35px;height:6px;border-radius:20px;background:#625876}.course-map-hero aside i.done{background:#8dc4a2}.course-map-hero aside i.active{background:#f2cb6f;box-shadow:0 0 0 3px #f2cb6f22}
.course-map-panel{max-width:1180px;margin:0 auto;border:1px solid #ddd3c4;border-radius:30px;background:#fff;padding:clamp(22px,4vw,42px);box-shadow:0 16px 45px #5341270c}
.course-map-title,.course-breadcrumb{display:flex;align-items:center;justify-content:space-between;gap:16px}.course-map-title{margin-bottom:28px}.course-map-title h2{margin:5px 0;font-size:clamp(27px,4vw,42px)}.course-map-title p{margin:0;color:#827b83;font-size:11px}.course-map-title>strong{font:900 23px 'DM Sans',sans-serif;color:#7b5b9d;background:#f0e7f8;padding:10px 15px;border-radius:14px;white-space:nowrap}
.course-breadcrumb{justify-content:flex-start;margin-bottom:22px;color:#806e58;font-size:11px}.course-breadcrumb button{border:1px solid #ded3c3;background:#fffaf2;border-radius:999px;padding:9px 13px;display:flex;gap:7px;align-items:center;color:#67577b;font:inherit;font-weight:800;cursor:pointer}
.course-levels{display:grid;gap:14px}.course-level{width:100%;display:grid;grid-template-columns:52px 54px minmax(0,1fr) auto;align-items:center;gap:16px;text-align:right;border:1px solid #dfd5c6;border-radius:22px;background:#fffaf4;padding:16px 19px;color:#45384e;box-shadow:4px 5px 0 #eadfcf;transition:.16s}.course-level:not(:disabled){cursor:pointer}.course-level:not(:disabled):hover{transform:translateY(-2px);border-color:#b89bcf}.course-level>span,.course-level>b{font:900 17px 'DM Sans',sans-serif;color:#8b749e}.course-level div>small{color:#998b79;font-size:9px}.course-level div>strong{display:block;font-size:18px;margin:3px 0}.course-level div>p{font-size:10px;color:#817783;margin:0 0 8px}.course-level.locked{opacity:.5;box-shadow:none}.course-level.current{border:2px solid #9270b0;background:#f7f0fb}.course-level.complete{border-color:#9bc1a6;background:#f2f8f1}
.course-chest{width:46px;height:46px;border-radius:15px;background:#ece3d0;color:#79633f;display:grid;place-items:center}.course-chest.current{background:#8260a5;color:#fff}.course-chest.complete{background:#4f8a6c;color:#fff}.course-chest.locked{background:#ebe7df;color:#aaa39a}.course-progress{display:block;height:6px;border-radius:20px;background:#e9e1d6;overflow:hidden}.course-progress i{display:block;height:100%;background:linear-gradient(90deg,#8664a8,#c69b6a);border-radius:inherit}
.course-phase-key{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 22px;color:#706777;font-size:10px;font-weight:800}.course-phase-key span{display:flex;align-items:center;gap:7px}.course-phase-key i{width:12px;height:12px;border-radius:4px;background:#cfc8d3}.course-phase-key .phase-1 i{background:#8f6ab2}.course-phase-key .phase-2 i{background:#d09b43}.course-phase-key .phase-3 i{background:#4c8b72}
.course-boxes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.course-box{min-height:126px;border:1px solid #ddd6ca;border-radius:18px;background:#fbf9f5;padding:10px 8px;color:#554b59;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:3px 4px 0 #e8e0d4;transition:.15s}.course-box:not(:disabled){cursor:pointer}.course-box:not(:disabled):hover{transform:translateY(-2px)}.course-box .course-chest{width:35px;height:35px;border-radius:11px}.course-box>b{font:900 13px 'DM Sans',sans-serif}.course-box>small{font-size:8px;line-height:1.45;text-align:center;min-height:24px}.course-box>span:last-child{display:flex;gap:3px}.course-box>span:last-child i{width:17px;height:4px;border-radius:5px;background:#ddd6df}.course-box>span:last-child i.done{background:#5f947b}.course-box>span:last-child i.active{background:#e2ae53}.course-box.phase-0.current{border:2px solid #8f6ab2;background:#f4eef9}.course-box.phase-1.current{border:2px solid #d09b43;background:#fff7e6}.course-box.phase-2.current{border:2px solid #4c8b72;background:#edf7f2}.course-box.complete{border-color:#77a88e;background:#edf7f1}.course-box.locked{opacity:.42;box-shadow:none}.course-map-note{max-width:1180px;margin:18px auto 0;color:#81798a;font-size:10px;display:flex;align-items:center;gap:7px}

.course-zone{min-height:100vh;padding:20px clamp(14px,4vw,48px) 80px;color:#3f3549;transition:background .2s}.course-zone.vocabulary{background:linear-gradient(180deg,#f5effb,#fbf9fd)}.course-zone.grammar{background:linear-gradient(180deg,#fbf2df,#fffaf1)}.course-zone.watchRead{background:linear-gradient(180deg,#eaf4f0,#f8fbf9)}
.course-zone-head{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:11px 13px;border:1px solid #d9cfdf;border-radius:20px;background:#fff}.course-zone-head>div{text-align:center}.course-zone-head span{display:block;color:#8d8098;font-size:8px}.course-zone-head strong{display:block;margin-top:3px;font-size:16px}.course-zone-head button{border:1px solid #ddd3e5;border-radius:999px;background:#fff;padding:9px 12px;color:#675779;font:inherit;font-size:10px;font-weight:900;display:flex;align-items:center;gap:7px;cursor:pointer}
.course-notice,.course-review-note{max-width:1000px;margin:12px auto;border-radius:12px;background:#fff;padding:10px 14px;color:#62566d;font-size:10px;text-align:center}.course-phase-toggle{max-width:900px;margin:18px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.course-phase-toggle button{min-height:70px;border:1px solid #dad0df;border-radius:17px;background:#ffffffa8;color:#877b8d;padding:10px 13px;display:flex;align-items:center;gap:11px;text-align:right;font:inherit}.course-phase-toggle button:not(:disabled){cursor:pointer}.course-phase-toggle button>b{font:900 12px 'DM Sans',sans-serif}.course-phase-toggle button span{font-size:11px;font-weight:900}.course-phase-toggle button small{display:block;font-size:8px;font-weight:600;margin-top:3px}.course-phase-toggle button.active{border:2px solid #8261a3;background:#fff;color:#563d71;box-shadow:0 7px 18px #5e437018}.course-phase-toggle button.done svg{margin-inline-start:auto;color:#4f8b6a}.course-phase-toggle button:disabled{opacity:.43}
.course-process-review{max-width:620px;margin:12px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;color:#786d7d;font-size:9px}.course-process-review button{border:1px solid #d8cede;border-radius:999px;background:#fff;padding:8px 12px;color:#6e5c78;font:inherit;font-weight:900;cursor:pointer}.course-process-review button.active{background:#5f4772;color:#fff;border-color:#5f4772}
.course-zone-body{max-width:1000px;margin:24px auto}.course-zone-body>section,.course-zone-body>article{border:1px solid #ddd3df;border-radius:30px;background:#fff;padding:clamp(24px,5vw,52px);box-shadow:0 18px 50px #4a36500d}.course-zone-body header h1{font-size:clamp(30px,5vw,53px);line-height:1.35;margin:9px 0}.course-zone-body header p{color:#7b7180;line-height:1.9;font-size:11px}.course-advance,.course-submit{border:0;border-radius:999px;background:#654681;color:#fff;padding:14px 22px;font:inherit;font-size:11px;font-weight:900;cursor:pointer;margin-top:24px}
.vocab-deck{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:28px}.vocab-card{min-height:220px;border:1px solid #ded2e7;border-radius:23px;background:#f9f5fc;padding:22px;display:flex;flex-direction:column}.vocab-card>span{font-size:8px;color:#8f7b9d;font-weight:900}.vocab-card>strong{font:900 clamp(26px,5vw,48px) 'DM Sans',sans-serif;margin:auto 0 8px}.vocab-card>p{color:#6e5a7b}.vocab-card img{width:100%;height:170px;object-fit:cover;border-radius:16px;margin-bottom:16px}.vocab-card button{align-self:flex-start;border:0;border-radius:999px;background:#e8dcf2;color:#5b4173;padding:9px 13px;font-weight:900;cursor:pointer}
.course-question{border:1px solid #e1d7e6;border-radius:20px;padding:20px;margin:16px 0}.course-question legend{font-weight:900;padding:0 8px}.course-question>img{display:block;max-width:360px;width:100%;max-height:240px;object-fit:cover;border-radius:15px;margin:14px auto}.course-question>button{border:0;border-radius:999px;background:#e8def0;padding:10px 14px;color:#624a76;font-weight:800}.course-question>input{width:100%;border:1px solid #ddd0e3;border-radius:12px;padding:12px;margin-top:12px}.course-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:15px}.course-options label{border:1px solid #e1d8e4;border-radius:13px;padding:12px;background:#faf8fb;display:flex;gap:9px;align-items:center}
.phase-grammar{font-family:'Readex Pro',sans-serif}.grammar-formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.grammar-formulas div{border:1px solid #e5cf9f;border-radius:18px;background:#fff9ea;padding:20px}.grammar-formulas small{display:block;color:#a2762d;font:900 9px 'DM Sans',sans-serif}.grammar-formulas strong{display:block;margin-top:12px;font:800 16px 'DM Sans',sans-serif}.grammar-notes{border-right:5px solid #d29a3c;background:#fff7e4;border-radius:18px;padding:18px 24px;margin:22px 0}.grammar-notes li{margin:8px 0;line-height:1.8;font-size:12px}.grammar-examples>div{display:flex;align-items:center;justify-content:space-between}.grammar-examples>div span{background:#f1dfb8;border-radius:999px;padding:7px 11px;font-size:9px}.grammar-examples>p{display:grid;grid-template-columns:35px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid #eee2ca;padding:14px 0;margin:0}.grammar-examples>p b{color:#b08032}.grammar-examples>p small{font-size:8px;border-radius:999px;padding:5px 8px;background:#eee}.grammar-examples>p.medium small{background:#fff0c9}.grammar-examples>p.difficult small{background:#f4d8cf}
.phase-watch{background:#181c2d!important;color:#fff!important;border-color:#353b58!important}.phase-watch header>span{color:#e0b85f}.phase-watch header p{color:#bec2d3}.course-video{position:relative;padding-top:56.25%;border-radius:22px;overflow:hidden;margin:27px 0;background:#000;box-shadow:0 18px 45px #0005}.course-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.phase-watch .course-question{border-color:#3d435f;background:#23283d}.phase-watch .course-options label{background:#2b3048;border-color:#464d6b}.phase-watch .course-submit{background:#e2b85f;color:#282438}
.story-spread{display:grid;grid-template-columns:.8fr 1.2fr;min-height:420px;border:1px solid #c7d9cf;border-radius:24px;background:#fffef8;overflow:hidden;box-shadow:8px 9px 0 #dceae3}.story-spread>img{width:100%;height:100%;object-fit:cover}.story-spread>div{padding:clamp(25px,5vw,52px);display:flex;flex-direction:column}.story-spread>div>span{color:#56806e;font-size:9px;font-weight:900}.story-spread>div>p{font:700 clamp(18px,3vw,28px)/1.9 'DM Sans',sans-serif;margin:auto 0}.story-spread aside{border-top:1px solid #dce9e1;padding-top:17px;color:#617269;line-height:1.8}.story-pager{display:flex;justify-content:space-between;margin:18px 0}.story-pager button{border:1px solid #bdd4c7;border-radius:999px;background:#edf7f1;color:#426d5a;padding:10px 15px;font-weight:900}.story-pager button:disabled{opacity:.35}.course-empty{border:1px dashed #c8bcd0;border-radius:20px;padding:40px;text-align:center;color:#817689}
.course-control-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end}.course-control-backdrop{position:absolute;inset:0;border:0;background:#261e30aa}.course-control{position:relative;width:min(1100px,100%);max-height:88vh;overflow:auto;margin:0 auto;background:#fff;border-radius:30px 30px 0 0;padding:clamp(22px,4vw,42px);box-shadow:0 -18px 50px #1d152c55}.course-control>header{display:flex;justify-content:space-between;align-items:center}.course-control h2{margin:4px 0;font-size:28px}.course-control>header button{border:1px solid #ded4e5;border-radius:999px;background:#fff;padding:9px 14px;font-weight:900}.course-control>p{color:#7c7281;font-size:11px}.course-template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.course-template-grid article{border:1px solid #ddd4e3;border-radius:20px;padding:20px;background:#faf8fb}.course-template-grid article.grammar{background:#fff9eb;border-color:#e7d2a7}.course-template-grid article.watchRead{background:#eef7f3;border-color:#bed8cc}.course-template-grid article>span{font-size:9px;font-weight:900}.course-template-grid h3{font:800 14px 'DM Sans',sans-serif;overflow-wrap:anywhere}.course-template-grid code{display:block;background:#fff;border-radius:9px;padding:8px;font-size:10px}.course-template-grid small{display:block;min-height:45px;margin:10px 0;color:#756d78;font-size:8px;line-height:1.7}.course-template-grid article>div{display:flex;gap:8px;flex-wrap:wrap}.course-template-grid button,.course-template-grid label{border:0;border-radius:999px;background:#654b7c;color:#fff;padding:10px 13px;font-size:9px;font-weight:900;cursor:pointer}.course-template-grid label{position:relative;background:#fff;color:#5f516a;border:1px solid #d8cedf}.course-template-grid input{position:absolute;inset:0;opacity:0;cursor:pointer}.course-control-error,.course-control-success{padding:12px!important;border-radius:12px;font-weight:800}.course-control-error{background:#fff0ed;color:#9a493d!important}.course-control-success{background:#edf7f0;color:#39704e!important}
@media(max-width:900px){.course-boxes{grid-template-columns:repeat(5,minmax(0,1fr))}.course-template-grid{grid-template-columns:1fr}.course-map-hero{grid-template-columns:1fr}.grammar-formulas{grid-template-columns:1fr}}
@media(max-width:620px){.course-map{padding:20px 12px 90px}.course-map-hero{padding:25px 20px;border-radius:24px}.course-map-panel{padding:20px 13px;border-radius:22px}.course-level{grid-template-columns:36px 42px minmax(0,1fr);gap:9px}.course-level>b{display:none}.course-boxes{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.course-box{min-height:116px}.course-zone{padding:12px 10px 70px}.course-zone-head{grid-template-columns:1fr 1fr}.course-zone-head>div{grid-column:1/-1;grid-row:1}.course-phase-toggle{grid-template-columns:1fr}.course-zone-body>section,.course-zone-body>article{padding:22px 16px;border-radius:22px}.vocab-deck,.course-options{grid-template-columns:1fr}.story-spread{grid-template-columns:1fr}.story-spread>img{height:230px}.grammar-examples>p{grid-template-columns:28px 1fr}.grammar-examples>p small{grid-column:2}.course-template-grid article{padding:16px}}

.course-result{min-height:100vh;padding:clamp(28px,7vw,80px) 18px;background:radial-gradient(circle at 50% 5%,#efe3ff 0,transparent 35%),linear-gradient(155deg,#fbf8ff,#fffaf0);display:grid;place-items:center}
.course-result-card{width:min(820px,100%);border:1px solid #d9cce2;border-radius:34px;background:#fff;padding:clamp(28px,6vw,58px);text-align:center;box-shadow:10px 12px 0 #e6daed}
.course-result-kicker{display:inline-block;border-radius:999px;background:#eee4f6;color:#694b82;padding:8px 14px;font-size:10px;font-weight:900}
.course-result-score{width:170px;height:170px;margin:26px auto 20px;border:12px solid #8dc4a2;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 9px #e8f5ed}
.course-result-score strong{font:900 48px/1 'DM Sans',sans-serif;color:#3d7252}.course-result-score small{margin-top:7px;color:#6d7c72;font-size:10px;font-weight:800}
.course-result-card h1{font-size:clamp(29px,5vw,48px);margin:12px 0}.course-result-card>p{color:#756c79;line-height:1.8;font-size:12px}
.course-result-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.course-result-phases article{border:1px solid #ddd3e4;border-radius:20px;background:#faf7fc;padding:18px 12px;display:flex;flex-direction:column;gap:7px}.course-result-phases article>b{color:#85649d;font:800 10px 'DM Sans',sans-serif}.course-result-phases article>span{font-size:11px;font-weight:900}.course-result-phases article>strong{font:900 26px 'DM Sans',sans-serif;color:#473651}.course-result-phases article>small{font-size:8px;color:#82788a}
.course-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.course-result-actions button{min-width:130px;border:1px solid #cdbfd5;border-radius:999px;background:#fff;color:#5c4869;padding:13px 20px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.course-result-actions button.primary{background:#654681;color:#fff;border-color:#654681}.course-result-actions button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:620px){.course-result-card{padding:27px 16px;border-radius:24px}.course-result-phases{grid-template-columns:1fr}.course-result-actions{display:grid}.course-result-actions button{width:100%}}