:root{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;color:#13203a;background-color:#f4f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px}#root{min-height:100vh}.app-shell{width:min(960px,calc(100% - 32px));margin:24px auto 40px;display:grid;gap:18px}.hero{padding:24px;border-radius:20px;color:#fff;background:linear-gradient(130deg,#1f6feb,#2da44e 55%,#ec8f26);box-shadow:0 14px 34px #12307047}.hero h1{margin:0 0 8px;font-size:clamp(28px,5vw,40px);line-height:1.1}.hero p{margin:0;opacity:.94}.panel{background:#fff;border-radius:16px;padding:20px;border:1px solid #dbe4f3;box-shadow:0 10px 26px #0e1f3814}.form-grid{display:grid;gap:12px}.form-grid label{font-size:14px;font-weight:700;color:#20385a}.form-grid textarea,.form-grid select,.form-grid input[type=file]{width:100%;border:1px solid #c4d1e6;border-radius:10px;padding:12px;font:inherit;color:#1c2f4d;background:#fbfdff}.form-grid textarea:focus,.form-grid select:focus,.form-grid input[type=file]:focus{outline:2px solid #7db2ff;border-color:#7db2ff}.audio-preview{border:1px solid #d5e1f5;border-radius:10px;background:#f7faff;padding:10px 12px;display:grid;gap:8px}.audio-preview p{margin:0;font-size:13px;color:#385780}.audio-preview audio{width:100%}.hint{margin:0;font-size:13px;color:#496385}button{appearance:none;border:none;border-radius:10px;padding:12px 16px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(120deg,#0b69ff,#4b8bff);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover:enabled{transform:translateY(-1px);box-shadow:0 8px 18px #0d4ccc52}button:disabled{cursor:not-allowed;opacity:.72}.error-box{background:#ffe9ea;color:#a6232d;border:1px solid #ffc8cd;padding:10px 12px;border-radius:10px}.result-panel{display:grid;gap:16px}.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.result-head h2{margin:0}.sid-badge{padding:4px 10px;border-radius:999px;background:#edf3ff;color:#1a4b9f;font-size:12px;border:1px solid #c8dbff}.score-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.score-card{border:1px solid #dbe4f3;border-radius:12px;padding:12px;background:#f8fbff}.score-card p{margin:0;color:#4b6689;font-size:13px}.score-card strong{display:block;margin-top:6px;font-size:24px;color:#0f356f}.score-bars{display:grid;gap:8px}.bar-row{display:grid;grid-template-columns:72px 1fr 46px;align-items:center;gap:8px}.bar-row span{font-size:13px;color:#2b456b}.bar-track{height:10px;border-radius:999px;background:#e6eefc;overflow:hidden}.bar-value{height:100%;border-radius:inherit;background:linear-gradient(90deg,#1f82ff,#3fbc8f)}.bar-number{text-align:right;font-variant-numeric:tabular-nums}.char-analysis{border:1px solid #dbe4f3;border-radius:14px;background:#f7fbff;padding:14px;display:grid;gap:12px}.char-analysis-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.char-analysis-head h3{margin:0;font-size:24px;color:#153056}.char-analysis-head p{margin:0;font-size:13px;color:#4e678a}.char-empty{margin:0;color:#5c7393}.char-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.char-card{border-radius:10px;border:2px solid #2ab384;padding:10px 10px 12px;background:#d8ebe2;box-shadow:0 3px 8px #11356614;display:grid;gap:6px}.char-card.warn{border-color:#eb9a13;background:#f5ede0}.char-card.error{border-color:#e25b52;background:#f6e5e4}.char-pinyin{margin:0;text-align:center;font-size:20px;color:#355f58;font-weight:600}.char-text{display:block;text-align:center;font-size:42px;line-height:1.1;color:#0f4f43;font-weight:800}.char-card.warn .char-text{color:#8e4d0b}.char-card.error .char-text{color:#aa2d24}.char-meta{margin:0;text-align:center;font-size:12px;color:#557b72}details{border:1px solid #dbe4f3;border-radius:10px;padding:10px 12px;background:#fcfdff}details summary{cursor:pointer;font-weight:600;color:#1f3f6b}pre{margin-top:10px;max-height:320px;overflow:auto;background:#0f1d32;color:#dce8ff;padding:12px;border-radius:8px;font-size:12px}@media(max-width:720px){.app-shell{width:calc(100% - 20px);margin:12px auto 24px}.hero{padding:18px}.panel{padding:14px}.bar-row{grid-template-columns:66px 1fr 42px}.char-analysis-head h3{font-size:20px}.char-pinyin{font-size:16px}.char-text{font-size:34px}}