*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Yu Gothic,sans-serif;background:#f4f7f5;color:#1b2a22}.app{display:flex;flex-direction:column;height:100vh;max-width:480px;margin:0 auto;background:#fff;position:relative}.app-header{padding:10px 12px;background:#2d6a4f;color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.app-brand{display:flex;align-items:center;gap:8px;background:none;border:none;color:#fff;padding:4px;cursor:pointer}.app-brand img{width:28px;height:28px;border-radius:6px}.app-brand h1{margin:0;font-size:1.1rem}.icon-button{background:none;border:none;color:#fff;font-size:1.3rem;padding:6px;line-height:1;cursor:pointer}.app-main{flex:1;overflow-y:auto;padding:12px 12px 80px}.tab-bar{position:sticky;bottom:0;display:flex;background:#fff;border-top:1px solid #ddd;flex-shrink:0}.tab-button{flex:1;border:none;background:none;padding:8px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.75rem;color:#667}.tab-button.active{color:#2d6a4f;font-weight:600}.tab-icon{font-size:1.3rem}.card{background:#fff;border:1px solid #e3e8e5;border-radius:12px;padding:14px;margin-bottom:12px}.card h2{margin-top:0;font-size:1.05rem}.card h3{font-size:.95rem}label{display:block;font-size:.85rem;color:#445;margin-bottom:10px}input,select,textarea{width:100%;padding:8px 10px;margin-top:4px;border:1px solid #ccd3ce;border-radius:8px;font-size:1rem;font-family:inherit}button{background:#2d6a4f;color:#fff;border:none;border-radius:8px;padding:10px 14px;font-size:.95rem;cursor:pointer}button:disabled{opacity:.6}button.danger{background:#b3261e}button.secondary{background:#e7f0ea;color:#2d6a4f}.button-file{display:inline-flex;align-items:center;background:#e7f0ea;color:#2d6a4f;border-radius:8px;padding:10px 14px;font-size:.95rem;cursor:pointer;margin-bottom:0}.error{color:#b3261e;font-size:.85rem}.banner{background:#fff4e0;border:1px solid #f0c36d;border-radius:8px;padding:10px 12px;font-size:.85rem;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.banner.info{background:#eaf4ee;border-color:#8fce9a}button.link{background:none;color:#2d6a4f;text-decoration:underline;padding:0;font-size:.85rem}.hint{color:#667;font-size:.8rem}.ok-text{color:#2d6a4f;font-size:.85rem}.empty{text-align:center;color:#889;margin-top:24px}.vocab-list{list-style:none;padding:0;margin:0}.vocab-group{margin-bottom:16px}.vocab-group-title{font-size:.85rem;font-weight:600;color:#2d6a4f;margin:0 0 6px 2px}.vocab-item-header{display:flex;align-items:center;gap:6px;cursor:pointer;flex-wrap:wrap}.lang-badge{background:#e7f0ea;color:#2d6a4f;border-radius:6px;font-size:.75rem;padding:2px 6px}.unit-badge{background:#edf1ee;color:#556;border-radius:6px;font-size:.7rem;padding:2px 6px}.pinyin,.meaning{color:#778;font-size:.85rem}.vocab-item-body{margin-top:10px}.examples{padding-left:18px;margin:0}.examples li{margin-bottom:8px}.translation{color:#667;font-size:.85rem}.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.practice-term{font-size:1.4rem;font-weight:700;margin:0 0 10px}.record-area{margin-top:14px;display:flex;flex-direction:column;gap:8px}.playback audio{width:100%}.examples-practice ul{list-style:none;padding:0;margin:0}.examples-practice li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;gap:8px}.feedback.ok{border-color:#8fce9a;background:#f2fbf3}.feedback.ng{border-color:#f0c36d;background:#fff9ef}.feedback-status{font-weight:600;margin-top:0}.corrected{font-size:1.05rem;margin:6px 0}.feedback-text{color:#445;font-size:.9rem;margin-bottom:0}.history{list-style:none;padding:0;margin:0}.history li{padding:6px 0;border-bottom:1px solid #eee}.char-counter{text-align:right;font-size:.8rem;color:#667;margin-top:-4px}.char-counter.over{color:#b3261e;font-weight:600}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-end;justify-content:center;z-index:50}.modal-sheet{background:#fff;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:16px}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.modal-header h2{margin:0;font-size:1.1rem}.about-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.about-tabs button{background:#edf1ee;color:#445;font-size:.8rem;padding:6px 10px}.about-tabs button.active{background:#2d6a4f;color:#fff}.about-body{font-size:.9rem;line-height:1.6;color:#334;white-space:pre-wrap}.about-body h3{font-size:.95rem;margin-bottom:4px}.placeholder-note{color:#b3261e}