:root{--primary: #ffb703;--secondary: #fb8500;--accent: #219ebc;--danger: #ef476f;--success: #06d6a0;--dark: #023047;--paper: #fffdfa;--bg: #fdfcf8;--border-w: 4px;--shadow-off: 6px;color:var(--dark);font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,sans-serif;font-synthesis:none;line-height:1.4;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background-color:var(--bg);background-image:radial-gradient(#d7dce0 1px,transparent 1px),linear-gradient(135deg,rgba(255,183,3,.16),transparent 42%),linear-gradient(225deg,rgba(33,158,188,.14),transparent 38%);background-position:0 0,0 0,100% 0;background-size:30px 30px,100% 100%,100% 100%;-webkit-user-select:none;user-select:none}button,input{font:inherit}button{border:0;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;filter:grayscale(.25);opacity:.56}h1,h2,p{margin:0}#app{min-height:100vh}.app-shell{position:relative;width:min(100%,560px);min-height:100vh;margin:0 auto;padding:18px;display:flex;align-items:center}.view{display:flex;width:100%;flex-direction:column;animation:view-in .36s cubic-bezier(.2,.9,.2,1) both}.pop-card{border:var(--border-w) solid var(--dark);border-radius:24px;background:#fff;box-shadow:var(--shadow-off) var(--shadow-off) 0 var(--dark);transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1),background-color .15s ease,color .15s ease}.pop-btn:active,.pop-btn.is-pressed{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--dark)}.home-header{margin-bottom:28px;text-align:center}.badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;margin-bottom:14px;padding:4px 14px;border:2px solid var(--dark);border-radius:999px;background:#ffe1ec;font-size:12px;font-weight:900;text-transform:uppercase}.title{margin-bottom:10px;font-size:clamp(3.1rem,13vw,4.35rem);font-style:italic;font-weight:1000;letter-spacing:0;line-height:.95;text-shadow:4px 4px 0 rgba(255,183,3,.4)}.subtitle{color:#61707a;font-size:15px;font-weight:700}.stats-grid,.mini-nav,.option-grid,.result-grid{display:grid;gap:12px}.stats-grid{grid-template-columns:repeat(3,1fr);margin-bottom:22px}.stat-card{min-width:0;padding:12px;overflow:hidden;border-left-width:8px}.stat-card:nth-child(1){border-left-color:#ef4444}.stat-card:nth-child(2){border-left-color:#22c55e}.stat-card:nth-child(3){border-left-color:#3b82f6}.label{color:#02304785;font-size:11px;font-weight:1000;text-transform:uppercase;white-space:nowrap}.value{margin-top:4px;font-size:25px;font-weight:1000;line-height:1}.hero-action{width:100%;min-height:104px;margin-bottom:18px;padding:18px;color:#fff;background:linear-gradient(110deg,#fb7185,#fb923c);font-size:31px;font-style:italic;font-weight:1000;text-align:center}.hero-action span{display:block;margin-top:3px;font-size:14px;font-style:normal;opacity:.84}.custom-row{display:flex;gap:10px;margin-bottom:18px}.custom-box{display:flex;flex:1;min-width:0;align-items:center;gap:10px;padding:12px}.custom-box input{width:100%;min-width:0;border:0;outline:0;color:var(--dark);background:transparent;font-size:22px;font-weight:1000}.custom-start{min-width:108px;padding:0 20px;font-weight:1000;background:#fff}.grade-panel{margin-bottom:24px;padding:12px}.grade-toggle{width:100%;min-height:66px;padding:6px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:transparent;text-align:left}.grade-toggle strong{display:block;margin-top:4px;font-size:24px;font-weight:1000;line-height:1.05}.grade-panel-body{padding-top:12px}.grade-count{flex:0 0 auto;padding:6px 10px;border:2px solid var(--dark);border-radius:999px;background:#dcfce7;font-size:12px;font-weight:1000}.grade-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.grade-tabs button{min-height:48px;padding:6px;background:#fff7d6;font-size:14px;font-weight:1000}.grade-tabs button.selected{color:#fff;background:var(--accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark)}.grade-controls{display:grid;grid-template-columns:1fr 1fr 104px;gap:8px;margin-bottom:12px}.scope-option,.grade-count-input{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--dark);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--dark);font-size:13px;font-weight:1000}.scope-option input{width:16px;min-width:16px;height:16px;margin:0;accent-color:var(--accent)}.grade-count-input input{width:44px;border:0;outline:0;background:transparent;font-weight:1000;text-align:center}.grade-start{width:100%;min-height:58px;padding:10px 14px;color:#fff;background:var(--dark);font-size:18px;font-weight:1000}.text-panel{margin-bottom:14px}.text-form{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.text-name-input{min-height:50px;padding:9px 12px;display:flex;align-items:center;gap:10px;border:3px solid var(--dark);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--dark);font-weight:1000}.text-name-input span{flex:0 0 auto;color:#02304785;font-size:12px}.text-name-input input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--dark);font-weight:1000}.custom-textarea{width:100%;resize:vertical;min-height:122px;padding:12px;border:3px solid var(--dark);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--dark);color:var(--dark);font:inherit;font-weight:800;outline:0}.text-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;margin-bottom:12px}.save-text-btn{min-height:58px;padding:10px 14px;background:#fff7d6;font-weight:1000}.saved-text-list{display:flex;flex-direction:column;gap:8px}.saved-text-item{display:grid;grid-template-columns:1fr 68px;gap:8px}.saved-text-item button{min-height:46px;padding:8px 10px;border:3px solid var(--dark);border-radius:14px;background:#fff;box-shadow:3px 3px 0 var(--dark);text-align:left}.saved-text-item.selected button:first-child{background:#d8f3ff}.saved-text-item strong,.saved-text-item span{display:block;font-weight:1000}.saved-text-item span{color:#02304785;font-size:12px}.delete-text-btn{color:#fff;background:var(--danger)!important;text-align:center!important;font-size:13px;font-weight:1000}.mini-nav{grid-template-columns:repeat(3,1fr)}.mini-nav button{min-height:88px;padding:12px 8px;font-weight:1000;text-align:center}.mini-nav .icon{display:block;margin-bottom:5px;font-size:22px}.mini-nav .sound{background:#e0f2fe}.mini-nav .wrong{background:#ffe4ec}.mini-nav .records{background:#dcfce7}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-weight:1000}.icon-button{display:grid;width:44px;height:44px;place-items:center;border:3px solid var(--dark);border-radius:14px;background:#fff;box-shadow:3px 3px 0 var(--dark);font-size:20px;font-weight:1000}.progress-wrap{flex:1;min-width:0}.progress-line{height:16px;overflow:hidden;border:3px solid var(--dark);border-radius:999px;background:#eef2f4}.progress-fill{width:0%;height:100%;background:var(--accent);transition:width .32s ease-out}.score-pill{min-width:82px;text-align:right;font-size:20px}.question-card{position:relative;min-height:296px;margin-bottom:18px;padding:32px 22px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.question-card.correct{animation:bump .32s ease;background:#bbf7d0}.question-card.wrong{animation:shake .38s ease;background:#fecaca}.question-card:before{position:absolute;top:-42px;right:-34px;width:130px;height:130px;border:4px solid var(--dark);border-radius:35px;background:#ffe066;transform:rotate(16deg);content:""}.question-card:after{position:absolute;bottom:-46px;left:-36px;width:118px;height:118px;border:4px solid var(--dark);border-radius:999px;background:#8ecae6;content:""}.target-word{position:relative;z-index:1;margin-bottom:10px;font-family:STKaiti,KaiTi,Microsoft YaHei,serif;font-size:clamp(6rem,30vw,8.7rem);font-weight:1000;line-height:1;text-shadow:6px 6px 0 rgba(251,133,0,.18)}.character-info{position:relative;z-index:1;width:min(100%,420px);margin-bottom:18px;display:flex;flex-direction:column;align-items:center;gap:7px}.character-pinyin{color:var(--danger);font-size:20px;font-weight:1000;line-height:1.1}.selected-pinyin{min-width:168px;padding:7px 12px;border:3px solid var(--dark);border-radius:16px;background:#fff7d6;box-shadow:3px 3px 0 var(--dark)}.selected-pinyin span{display:block;color:#02304785;font-size:11px;font-weight:1000}.selected-pinyin strong{display:block;margin-top:3px;color:var(--accent);font-size:24px;font-weight:1000;line-height:1}.character-meta{color:#45616d;font-size:13px;font-weight:900}.stroke-sequence{width:100%;padding:7px 10px;border:2px solid rgba(2,48,71,.2);border-radius:12px;background:#ffffffc7;color:#375766;font-size:13px;font-weight:900}.stroke-sequence span{margin-right:8px;color:#02304785}.word-examples{display:flex;max-width:100%;flex-wrap:wrap;justify-content:center;gap:6px}.word-examples span{padding:4px 8px;border:2px solid var(--dark);border-radius:999px;background:#fff7d6;font-size:12px;font-weight:1000}.character-explanation{max-width:100%;color:#4d6670;font-size:13px;font-weight:800;line-height:1.45}.sound-action{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;min-height:56px;padding:10px 22px;color:#126782;background:#d8f3ff;font-size:17px;font-weight:1000}.sound-action .icon{font-size:23px}.combo-wrap{position:absolute;top:15%;right:8%;z-index:2;pointer-events:none;opacity:0;transform:rotate(14deg)}.combo-wrap.show{animation:combo-pop .98s cubic-bezier(.2,.8,.2,1) both}.combo-text{color:#ef233c;font-size:42px;font-style:italic;font-weight:1000;-webkit-text-stroke:2px white;text-shadow:4px 4px 0 var(--dark)}.option-grid{grid-template-columns:repeat(2,1fr);margin-bottom:18px}.option-btn{min-height:88px;padding:14px 10px;font-size:24px;font-weight:1000;text-align:center}.option-btn.selected,.tone-btn.selected{color:#fff;background:var(--accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark)}.tone-section{margin-bottom:18px;text-align:center}.syllable-preview{width:min(100%,320px);min-height:58px;margin:0 auto 12px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:3px solid var(--dark);border-radius:18px;background:#fff7d6;box-shadow:4px 4px 0 var(--dark)}.syllable-preview span{color:#02304785;font-size:12px;font-weight:1000}.syllable-preview strong{font-size:24px;font-weight:1000;line-height:1}.tone-title{margin-bottom:12px;color:#0230476b;font-size:12px;font-weight:1000;letter-spacing:0;text-transform:uppercase}.tone-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.tone-btn{display:flex;width:64px;height:64px;align-items:center;flex-direction:column;justify-content:center;border:3px solid var(--dark);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--dark);font-size:16px;font-weight:1000;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease}.tone-symbol{display:block;font-size:24px;line-height:1}.tone-label{display:block;margin-top:2px;font-size:13px;line-height:1}.tone-btn.selected{color:var(--dark);background:var(--primary);transform:scale(1.08) rotate(-4deg)}.feedback{min-height:46px;margin-bottom:14px;padding:10px 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:1000;text-align:center}.feedback.correct{background:var(--success)}.feedback.wrong{background:var(--danger)}.submit-action{width:100%;min-height:58px;padding:10px 14px;color:#fff;background:var(--dark);font-size:20px;font-weight:1000}.practice-action-bar{position:sticky;z-index:20;bottom:max(8px,env(safe-area-inset-bottom));margin-top:4px;padding:5px;border:2px solid rgba(2,48,71,.16);border-radius:22px;background:#fdfcf8b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .16s ease,transform .16s ease,border-color .16s ease,box-shadow .16s ease}.practice-action-bar.ready{border-color:var(--dark);box-shadow:0 8px 22px #02304724;opacity:1;transform:translateY(-2px)}.next-action{background:var(--accent)}.result-view{align-items:center;text-align:center}.result-card{width:100%;margin-bottom:18px;padding:32px 22px}.result-emoji{margin-bottom:10px;font-size:76px;line-height:1}.result-title{margin-bottom:12px;font-size:35px;font-weight:1000;line-height:1.05}.star-line{margin:20px 0;color:#facc15;font-size:40px;letter-spacing:3px;text-shadow:2px 2px 0 var(--dark)}.star-line .dim{opacity:.22}.result-grid{grid-template-columns:repeat(2,1fr)}.result-grid div{padding:16px;border-radius:18px;background:#f7fafc}.result-actions{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:12px}.result-actions button,.back-home{min-height:70px;padding:12px;font-size:20px;font-weight:1000}.back-home{background:var(--primary)}.again{background:#bbf7d0}.list-card{margin-bottom:14px;padding:18px}.pronunciation-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:18px;background:#fff7d6}.pronunciation-card strong{display:block;margin-top:4px;font-size:30px;font-weight:1000;line-height:1}.sound-action.mini{min-width:126px;min-height:56px;padding:10px 14px;justify-content:center}.section-title{font-size:28px;font-weight:1000}.sound-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.sequence-button{min-width:96px;min-height:42px;padding:6px 12px;background:#fff7d6;font-size:14px;font-weight:1000;white-space:nowrap}.sequence-button.playing{color:#fff;background:var(--danger)}.sound-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sound-grid button{min-height:56px;padding:8px;background:#fff;font-size:19px;font-weight:1000}.sound-grid button.selected{color:#fff;background:var(--accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark)}.wrong-list,.record-list{display:flex;flex-direction:column;gap:10px}.item-row{padding:14px;text-align:left}.item-row strong{display:block;font-size:21px;font-weight:1000}.item-row span,.item-row small{display:block;margin-top:3px;color:#64748b;font-weight:800}.empty{padding:28px 18px;color:#64748b;font-weight:900;text-align:center}.danger-action{width:100%;min-height:58px;margin-top:14px;color:#fff;background:var(--danger);font-weight:1000}@keyframes view-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.03) rotate(-1deg)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-7px)}80%{transform:translate(7px)}}@keyframes combo-pop{0%{opacity:0;transform:scale(.55) rotate(0)}42%{opacity:1;transform:scale(1.18) rotate(14deg)}to{opacity:0;transform:translateY(-46px) scale(1) rotate(14deg)}}@media(max-width:460px){.app-shell{padding:14px;align-items:flex-start}.stats-grid,.mini-nav{gap:9px}.stat-card{padding:10px 7px;border-left-width:6px}.label{font-size:9px}.value{font-size:21px}.custom-row{flex-direction:column}.custom-start{min-height:60px}.grade-tabs{grid-template-columns:repeat(3,1fr)}.grade-controls,.text-actions,.saved-text-item{grid-template-columns:1fr}.scope-option,.grade-count-input{justify-content:flex-start;padding:0 14px}.mini-nav button{min-height:78px;font-size:13px}.option-btn{min-height:78px;font-size:20px}.tone-btn{width:58px;height:58px;font-size:14px}.sound-grid{grid-template-columns:repeat(3,1fr)}.practice-action-bar{bottom:max(8px,env(safe-area-inset-bottom));margin-right:0;margin-left:0}.submit-action{min-height:54px;font-size:18px}.sound-section-head{align-items:flex-start}.sequence-button{min-width:88px;font-size:13px}.pronunciation-card{align-items:stretch;flex-direction:column}.sound-action.mini{width:100%}}