*{box-sizing:border-box}html{height:100%;scroll-behavior:smooth}body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173b50;background:linear-gradient(155deg,#e8f1f4 0%,#f7faf9 62%,#e6f0ed 100%)}button,select{font:inherit}button{cursor:pointer}.app{max-width:680px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 22px)}.head{display:flex;align-items:center;gap:13px;margin:0 0 20px}.logo{background:#173b50;color:#fff;border-radius:18px;height:58px;min-width:58px;display:grid;place-items:center;font-size:36px;box-shadow:0 7px 22px #173b5025}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:#5c8390}h1{font-size:clamp(21px,5vw,29px);letter-spacing:-.9px;margin:3px 0 2px;line-height:1.12}.head p{font-size:13px;margin:5px 0 0;color:#61818b}.filters{display:flex;gap:7px;overflow-x:auto;margin-bottom:14px;padding:2px 1px 5px}.filter{flex:1;white-space:nowrap;border:1px solid #cfe0e5;background:#fff;color:#486975;border-radius:14px;padding:11px 10px;font-size:12px;font-weight:700}.filter.active{background:#173b50;color:#fff;border-color:#173b50;box-shadow:0 6px 17px #173b5022}.flash-panel{background:#fff;border-radius:22px;padding:13px 14px 12px;box-shadow:0 13px 40px #173b5012;border:1px solid #e2e9e9}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.card-top{font-size:11px;letter-spacing:1.35px;font-weight:750;color:#7895a0}.card-top span:last-child{font-size:12px;letter-spacing:normal;border-radius:30px;background:#edf4f4;padding:6px 10px;color:#355f6d}.flash-image-container{width:100%;height:min(56vh,500px);min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px 0}.flash-image-container img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .15s ease}.flash-image-container img.changing{opacity:0}.card-bottom{font-size:12px;color:#647f88;border-top:1px solid #ecf0f1;padding:10px 1px 0;min-height:28px}.status-dot{width:9px;height:9px;background:#2caf8a;border-radius:50%;box-shadow:0 0 0 4px #e0f7ef}.status-dot.paused{background:#f09f56;box-shadow:0 0 0 4px #fff0df}.settings{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:0 3px;color:#52717c;font-weight:650;font-size:14px}.settings select{border:1px solid #c9dadd;border-radius:12px;background:#fff;color:#173b50;padding:9px 16px;font-weight:700}.controls{display:flex;gap:10px;margin-top:13px}.button{flex:1;border:0;border-radius:15px;padding:14px 12px;font-weight:800;font-size:15px}.button-primary{background:#173b50;color:white;box-shadow:0 8px 20px #173b5028}.button-secondary{background:white;color:#173b50;border:1px solid #c9dadd}.button:active,.filter:active{transform:scale(.98)}.notice{text-align:center;color:#65818b;font-size:12px;min-height:20px;margin:16px 0 20px}footer{font-size:10px;letter-spacing:2px;text-align:center;color:#9ab0b8;font-weight:700}@media(max-width:380px){.app{padding-left:12px;padding-right:12px}.filter{font-size:11px;padding:10px 7px}.flash-image-container{height:51vh;min-height:240px}.head p{font-size:12px}}@media(min-width:720px){.flash-image-container{height:500px}}

/* Creator attribution – v1.1 */
.site-footer{margin:18px 0 8px;text-align:center;letter-spacing:normal;color:#63818b;line-height:1.7;font-weight:500}
.site-footer .footer-version{font-size:10px;letter-spacing:1.7px;color:#8da5ac;font-weight:750}
.site-footer .footer-credit{font-size:12px;margin-top:6px;color:#355e6c}
.site-footer .footer-credit strong{font-weight:800;color:#173b50}
.site-footer .footer-copyright{font-size:10px;margin-top:3px;color:#78929a}

/* v1.2: Four learning collections; horizontal tabs on narrow mobile screens. */
.filters{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.filters .filter{flex:0 0 auto;min-width:max-content;padding-left:14px;padding-right:14px}

/* v1.3 – HSK 1 micro-lessons & recall cards */
.course-panel{background:#fff;border:1px solid #dde8e9;border-radius:20px;padding:16px;margin:-1px 0 15px;box-shadow:0 5px 18px #173b500b}
.course-panel[hidden],.answer-actions[hidden],.flash-front[hidden],#flash-image[hidden]{display:none!important}
.course-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.section-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#60828e}
.ten-tag{font-size:11px;font-weight:750;padding:6px 10px;border-radius:99px;background:#e7f3f1;color:#246958;white-space:nowrap}
.course-selects{display:grid;grid-template-columns:1.15fr 1fr;gap:10px}
.course-selects>div{min-width:0}.course-selects label{display:block;color:#5b7781;font-size:12px;font-weight:700;margin-bottom:6px}
.course-selects select{width:100%;min-width:0;border:1px solid #c8dde0;border-radius:12px;padding:12px 8px;background:#f9fbfb;color:#173b50;font-size:13px;font-weight:700;appearance:auto}
.course-selects select:disabled{opacity:.5}
.lesson-title{font-size:15px;font-weight:800;margin-top:17px;line-height:1.4}
.progress-track{height:8px;border-radius:99px;background:#e9f0f2;overflow:hidden;margin-top:11px}
.progress-track span{display:block;width:0;height:100%;background:#20a780;border-radius:99px;transition:width .25s}
.lesson-summary{font-size:12px;color:#436c79;font-weight:700;margin-top:9px}
.lesson-help{font-size:11px;color:#78929c;margin-top:5px;line-height:1.5}
.flash-front{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Microsoft Yahei",sans-serif;font-size:clamp(86px,21vw,150px);font-weight:500;text-align:center;color:#111;line-height:1.2;overflow-wrap:anywhere;padding:8px;max-width:100%;letter-spacing:0}
.answer-actions{display:grid;gap:10px;margin-top:12px}
.answer-actions .button{width:100%;padding:12px 10px;font-size:14px}
.reveal-btn{border:1px solid #a5cbd0;background:#eef7f7;color:#183e52}
.rating-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.remember-btn{background:#19866c;color:white}
.retry-btn{background:#fff;color:#a35f1e;border:1px solid #e6bb8b}
.remember-btn.rated{outline:3px solid #b5eada}.retry-btn.rated{outline:3px solid #f6daba}
.local-note{font-size:10px;color:#7a979f;text-align:center;margin:1px 0 2px}
.flash-image-container{cursor:pointer}
@media(max-width:380px){.course-panel{padding:13px}.course-selects select{font-size:12px;padding:10px 6px}.flash-front{font-size:24vw}}

/* v1.4 – two activities, device speech, HSK 1 everyday sentence quizzes. */
[hidden]{display:none!important}
.practice-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 14px}
.practice-tab{border:1px solid #d3e3e5;background:#f7fafb;color:#456b75;border-radius:11px;padding:11px 5px;font-size:12px;font-weight:800}
.practice-tab.active{background:#1a746f;color:white;border-color:#1a746f}
.word-audio-bar,.quiz-audio-actions{display:flex;gap:8px;margin-top:11px}
.audio-button{flex:1;border:1px solid #bcd6db;background:#f7fcfc;border-radius:13px;padding:12px 8px;color:#21576a;font-size:13px;font-weight:750;cursor:pointer}
.sentence-workspace{margin-bottom:15px}
.quiz-status-card,.quiz-card,.quiz-done,.quiz-unavailable{background:#fff;border:1px solid #dfe8eb;border-radius:20px;padding:17px;margin-bottom:13px;box-shadow:0 7px 24px #173b500c}
.quiz-bar{height:9px;background:#eaf1f1;border-radius:50px;overflow:hidden;margin-top:14px}.quiz-bar>div{background:#24987e;height:100%;width:0;transition:width .25s}
.quiz-stat{font-size:12px;margin-top:9px;color:#4d7b87;font-weight:700}
.quiz-label,.quiz-solution-label{font-size:10px;letter-spacing:1.1px;color:#7c9aa2;font-weight:800}
.quiz-vietnamese{font-size:clamp(21px,5.2vw,27px);line-height:1.55;color:#173b50;font-weight:750;margin:19px 0 18px}
.quiz-cloze{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;text-align:center;border-radius:16px;background:#edf6f4;padding:18px 9px;color:#122e39;font-size:clamp(23px,6vw,36px);line-height:1.6;overflow-wrap:anywhere;margin-bottom:17px}
.quiz-input-label{display:block;font-size:12px;color:#64808a;font-weight:800;margin:0 0 8px}
#quiz-input{display:block;width:100%;padding:13px 14px;border:2px solid #c5dbe1;border-radius:13px;font-size:22px;outline:none;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;color:#15394d;background:#fff}
#quiz-input:focus{border-color:#16866e}#quiz-input:disabled{opacity:.65;background:#f4f8f8}
.quiz-suggestions{margin:10px 0 14px;font-size:12px;color:#527885}.quiz-suggestions>summary{cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.quiz-choice-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.quiz-choice{border:1px solid #cfe1e3;background:#fff;border-radius:11px;padding:10px 13px;font-size:18px;color:#174055}
.quiz-feedback{font-size:14px;font-weight:800;line-height:1.6;margin:12px 0;min-height:18px}.quiz-feedback.right{color:#0e826a}.quiz-feedback.wrong{color:#a25920}
.quiz-solution{background:#f8fbfb;border:1px solid #dae8ea;padding:13px;border-radius:13px;margin:10px 0 14px}
.quiz-full-hanzi{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;font-size:clamp(24px,5.7vw,34px);line-height:1.55;color:#102f42;margin:8px 0;overflow-wrap:anywhere}
.quiz-pinyin{font-size:15px;color:#597a89;line-height:1.65}.quiz-buttons{display:flex;gap:9px;margin-top:9px}.quiz-buttons .button{font-size:13px;padding:13px 6px}.quiz-secondary-buttons{margin-top:8px}
.quiz-auto-wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#67848e;margin:13px 0 9px}.quiz-auto-wrap select{max-width:67%;font:inherit;padding:9px 7px;border:1px solid #c9dadd;border-radius:10px;background:white;color:#164052}
.quiz-done,.quiz-unavailable{text-align:center;padding:28px 16px}.quiz-done h2,.quiz-unavailable h2{font-size:20px}.quiz-done p,.quiz-unavailable p{color:#65818b;line-height:1.65}.quiz-done .button,.quiz-unavailable .button{width:100%}.quiz-done-icon{font-size:55px}
@media(max-width:380px){.practice-tab{font-size:11px;padding:11px 3px}.quiz-buttons .button{font-size:12px}}

.course-selects.single{grid-template-columns:1fr}

.auto-pronounce{display:flex;gap:8px;align-items:center;font-size:12px;color:#63818b;margin:9px 2px 1px}
.auto-pronounce input{accent-color:#13886e;width:16px;height:16px}

/* v1.5: compact, warm color accents, mobile-first layout */
:root{--primary:#173b50;--teal:#087d72;--sun:#ffbd62;--coral:#e98966}
body{background:linear-gradient(155deg,#e7f6f4 0%,#f8fcfb 46%,#fff7eb 100%)}
.app{max-width:750px;padding:calc(env(safe-area-inset-top) + 13px) 12px calc(env(safe-area-inset-bottom) + 16px)}
.head{margin-bottom:12px;gap:11px}.logo{height:51px;min-width:51px;border-radius:16px;font-size:31px;background:linear-gradient(145deg,#11364d,#0c8777)}
.head h1{font-size:clamp(20px,4.4vw,26px)}.head p{margin-top:2px}
.filters{margin-bottom:10px;gap:6px}.filter{padding:10px 12px;border-radius:12px}
.filter.active{background:linear-gradient(135deg,#173b50,#0c6b75)}
.course-panel{padding:13px;margin-bottom:11px;border-radius:18px}
.course-header{margin-bottom:9px}.practice-switch{grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:11px}
.practice-tab{font-size:11px;padding:10px 3px;border-radius:11px;white-space:nowrap}
.practice-tab.active{background:linear-gradient(135deg,#05866f,#167c8d);border-color:transparent;box-shadow:0 4px 9px #06816d22}
.course-selects select{padding:9px 6px}.lesson-title{margin-top:11px;font-size:14px}
.progress-track{margin-top:8px}.lesson-summary{margin-top:6px}.lesson-help{margin-top:2px}
.flash-panel{border-radius:18px}.flash-image-container{height:min(45vh,420px);min-height:250px}
.quiz-status-card,.quiz-card,.quiz-done,.quiz-unavailable{border-radius:18px;padding:13px;margin-bottom:10px}
.quiz-vietnamese{font-size:clamp(19px,4.7vw,23px);margin:14px 0 12px}.quiz-cloze{padding:13px 9px;margin-bottom:12px;font-size:clamp(23px,6vw,31px)}
.button{padding:12px 10px;border-radius:12px}.button-primary{background:linear-gradient(135deg,#174257,#097a75)}
.site-footer{margin-top:13px}
.passage-toolbar,.passage-card{background:#fff;border:1px solid #daebeb;border-radius:18px;padding:13px;margin-bottom:11px;box-shadow:0 5px 19px #173b500b}
.passage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(120deg,#fffaf1,#e9f9f5)}
.direction-label{display:block;color:#657e87;font-size:12px;font-weight:800;margin-top:7px}
#passage-direction{max-width:52%;font-size:12px;border-radius:10px;border:1px solid #c9e3e5;background:white;color:var(--primary);padding:9px 4px;font-weight:700}
.passage-status{margin:0 0 10px}.passage-source{font-size:clamp(18px,4.3vw,22px);line-height:1.85;color:#193b4e;font-weight:620;background:linear-gradient(145deg,#f0faf8,#fff8eb);border:1px solid #e3ede7;border-radius:14px;padding:16px 14px;margin:11px 0 17px;white-space:pre-wrap}
#passage-input{width:100%;min-height:126px;padding:13px;border:2px solid #cadfe1;border-radius:13px;font-size:18px;font-family:system-ui,-apple-system,'PingFang SC',sans-serif;line-height:1.7;resize:vertical;color:#173b50;outline:none}
#passage-input:focus{border-color:#0b917e}.passage-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.passage-actions-row .button{font-size:12px;line-height:1.3}.passage-actions-row .button:disabled{opacity:.45}
.passage-hint,.passage-model{margin:12px 0;background:#f1f9f7;border:1px solid #d1e8df;border-radius:12px;padding:13px;font-size:13px;line-height:1.75;color:#466670}
.passage-feedback{font-size:12px;font-weight:750;color:#2e7a6e;margin:9px 0}
.passage-model-body{font-family:system-ui,-apple-system,'PingFang SC',sans-serif;font-size:17px;line-height:1.8;margin:12px 0;color:#183849;white-space:pre-wrap}
.passage-pinyin-details summary{font-size:12px;cursor:pointer;color:#157f78;font-weight:750}.passage-pinyin,.passage-grammar{font-size:12px;line-height:1.7;margin-top:8px;color:#5f7f86}
.passage-full{width:100%;margin-top:7px}
@media(max-width:375px){.practice-tab{font-size:10px;letter-spacing:-.15px}.passage-actions-row .button{font-size:11px;padding:11px 4px}.passage-toolbar{flex-wrap:wrap}#passage-direction{max-width:none;width:100%}}

.link-to-hsk2{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(145deg,#e4f8ef,#fef7e8);color:#067761!important;border:1px solid #70bfab!important}

/* v2.1: prevent duplicate lesson heading under the selector. */
.lesson-title[hidden]{display:none!important;}