*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI","Noto Sans TC",sans-serif;background:#f7f1e7;color:#183153}.app{min-height:100vh;padding:18px 28px}header{height:70px;display:flex;align-items:center;gap:22px;max-width:1500px;margin:auto}.brand{background:#173b6c;color:#fff;text-decoration:none;padding:12px 16px;border-radius:12px;font-weight:800}h1{margin:0;font-size:28px}h1 span{color:#c55d42}header p{margin:3px 0;color:#718096}.header-actions{margin-left:auto;display:flex;gap:8px}button,select{font:inherit}button{border:1px solid #d9e2ec;background:#fff;border-radius:10px;padding:10px 14px;font-weight:800;color:#183153;cursor:pointer}.stage{position:relative;max-width:1500px;min-height:calc(100vh - 100px);margin:auto;border-radius:24px;overflow:hidden;background-position:center;background-size:cover;box-shadow:0 18px 45px #173b6c33}.shade{position:absolute;inset:0;background:linear-gradient(#eff7ff0d,#f9f4e714 72%,#f9f4e724)}.stats,.progress-track,.workspace,.city-label{position:relative}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 22px 10px}.stats div{background:#ffffffd9;padding:10px 14px;border-radius:12px}.stats small{display:block;color:#6b7c93}.stats b{font-size:22px}.progress-track{height:8px;margin:0 22px;background:#ffffffaa;border-radius:9px;overflow:hidden}.progress-track i{display:block;height:100%;background:#e76f51}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;padding:20px 22px 48px}.card-shell{width:min(900px,96%);height:350px;margin:34px auto 0;perspective:1200px;cursor:pointer}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:.55s}.card.flipped{transform:rotateY(180deg)}.face{position:absolute;inset:0;border:1px solid #ffffffa8;border-radius:25px;backface-visibility:hidden;background:#fffef38f;box-shadow:0 12px 28px #173b6c29;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px;backdrop-filter:blur(2px)}.back{transform:rotateY(180deg);background:#173b6cd9;color:#fff}.lesson-badge,.source-badge{position:absolute;top:22px;border-radius:18px;padding:7px 12px;font-weight:900}.lesson-badge{left:22px;background:#e76f51;color:#fff}.source-badge{right:22px;background:#f3d38b;color:#503715}.sound{font-size:28px;border-radius:50%;width:64px;height:64px;padding:0}.sound.small{width:auto;height:auto;border-radius:11px;margin:14px}.face h2{font-size:clamp(28px,4vw,58px);line-height:1.2;margin:22px 0;text-align:center;max-width:100%}.face h3{font-size:clamp(24px,3vw,42px);line-height:1.2;margin:0 0 18px;text-align:center}.meaning{font-size:clamp(28px,3.5vw,48px);font-weight:900;text-align:center}.face code{position:absolute;bottom:18px;right:24px;opacity:.72}.controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}.controls .flip{background:#f3d38b}.controls .known{background:#2a9d8f;color:#fff}.controls .review{background:#e76f51;color:#fff}.tip{text-align:center;font-weight:700}.listening .front .lesson-badge,.listening .front .source-badge,.listening .front h2,.listening .front code{display:none}.listening .front .sound{width:100px;height:100px;font-size:46px}aside{background:#fffffff0;border-radius:18px;padding:18px;height:570px}aside h3{margin:0 0 10px}.activity{display:grid;grid-template-columns:1fr 1fr;gap:8px}.activity .active{background:#173b6c;color:#fff}aside p{font-size:13px;color:#61758a}aside label{display:grid;gap:6px;font-weight:700}select{padding:9px;border:1px solid #ccd8e5;border-radius:9px}.word-list{height:390px;overflow:auto;margin-top:12px;display:grid;gap:6px;align-content:start;grid-auto-rows:min-content}.word-list button{text-align:left;padding:8px 10px;display:grid;grid-template-columns:1fr auto}.word-list span{font:10px ui-monospace;color:#718096}.word-list b{grid-column:1;font-size:13px}.word-list small{grid-column:2;grid-row:1/3}.word-list .active{outline:3px solid #f3d38b}.word-list .known{border-left:6px solid #2a9d8f}.word-list .review{border-left:6px solid #e76f51}.city-label{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;text-shadow:0 2px 8px #000;font-weight:900;letter-spacing:2px}@media(max-width:900px){.app{padding:8px}header{height:auto;flex-wrap:wrap}.header-actions{width:100%}.stats{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr;padding:12px 10px 45px}.card-shell{width:100%;height:380px;margin-top:12px}.face{padding:45px 22px}aside{height:390px}.word-list{height:220px}}
.listening .front .source-badge{display:block!important}
.face h2.long-sentence{font-size:clamp(22px,2.8vw,38px);line-height:1.18}