body{color:#1f2933;background:#f4f1ea;margin:0;font-family:Microsoft YaHei,PingFang SC,sans-serif}#root{min-height:100vh}.page{max-width:1100px;margin:0 auto;padding:24px 20px 48px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.sheet-grid{grid-template-columns:1fr 1fr;gap:22px 32px;display:grid}.sheet-grid.cols-3{grid-template-columns:1fr 1fr 1fr}.sheet-item{min-height:96px;position:relative}.sheet-word{letter-spacing:.04em;font-size:28px;font-weight:650}.pinyin-grid{--cell:22px;--line:#b7b0a4;--guide:#e7a3a3;height:calc(var(--cell) * 3);background-image:linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));background-size:100% 1px;background-position:left top, left calc(var(--cell) * 2), left bottom;background-repeat:no-repeat;margin-top:8px;position:relative}.pinyin-grid:after{content:"";left:0;right:0;top:var(--cell);background:repeating-linear-gradient(to right, var(--guide) 0 5px, transparent 5px 8px);height:1px;position:absolute}.pinyin-baseline{left:2px;right:2px;top:calc(var(--cell) * 2);height:0;position:absolute}.sheet-pinyin{letter-spacing:.04em;font-size:28px;line-height:1;position:relative;top:-.78em}.sheet-item.is-correct .pinyin-grid{--line:#0f766e;--guide:#14b8a6}.sheet-item.is-wrong .pinyin-grid{--line:#dc2626;--guide:#f87171}.hanzi-prompt{letter-spacing:.04em;font-size:22px}.tian-row{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.tian{--line:#c45c5c;border:1.5px solid var(--line);background:#fff;width:56px;height:56px;position:relative}.tian:before,.tian:after{content:"";background:repeating-linear-gradient(to right, var(--line) 0 4px, transparent 4px 7px);position:absolute}.tian:before{height:1px;top:50%;left:0;right:0}.tian:after{background:repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 7px);width:1px;top:0;bottom:0;left:50%}.tian-char{justify-content:center;align-items:center;font-size:32px;font-weight:650;display:flex;position:absolute;inset:0}.sheet-item.is-correct .tian{--line:#0f766e}.sheet-item.is-wrong .tian{--line:#dc2626}.mark-row{gap:10px;margin-top:10px;display:flex}.mark-btn,.mark-seal{cursor:pointer;background:#fff;border:2px solid #e6dfd2;border-radius:18px;justify-content:center;align-items:center;width:64px;height:64px;font-size:36px;line-height:1;display:inline-flex}.mark-btn.ok{color:#0f766e}.mark-btn.bad{color:#dc2626}.mark-btn.ok.is-on,.mark-seal.ok{color:#fff;background:#0f766e;border-color:#0f766e}.mark-btn.bad.is-on,.mark-seal.bad{color:#fff;background:#dc2626;border-color:#dc2626}.emoji-pop{z-index:2;pointer-events:none;font-size:68px;animation:.85s ease-out forwards emojiPop;position:absolute;top:0;left:42%}.score-board{text-align:center;background:#f3faf7;border-radius:18px;margin-top:28px;padding:22px 16px 18px}.score-board.is-low{background:#fff7ed}.score-emoji{font-size:64px;line-height:1}.score-number{color:#0f766e;font-size:76px;font-weight:750;line-height:1}.score-board.is-low .score-number{color:#c2410c}@keyframes emojiPop{0%{opacity:0;transform:translateY(16px)scale(.35)}28%{opacity:1;transform:translateY(-10px)scale(1.18)}70%{opacity:1}to{opacity:0;transform:translateY(-56px)scale(1)}}.paper{background:#fffdf8;border:1px solid #e6dfd2;border-radius:16px;padding:28px 28px 20px}.auth-wrap{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.top-nav{color:#1f2933;text-decoration:none}.practice-menu{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.practice-menu button{color:#1f2933;font:inherit;cursor:pointer;background:#fffdf8;border:1px solid #e6dfd2;border-radius:999px;padding:10px 18px;font-size:16px}.practice-menu button.is-on{color:#fff;background:#0f766e;border-color:#0f766e}.practice-panel{padding:20px 22px}.record-list{flex-direction:column;gap:12px;display:flex}.record-row{background:#fffdf8;border:1px solid #e6dfd2;border-radius:14px;align-items:center;gap:14px;padding:12px;display:flex}.record-main{flex-direction:column;flex:1;gap:6px;display:flex}.record-photo,.sheet-photo{object-fit:cover;background:#f4f1ea;border:1px solid #e6dfd2;border-radius:10px}.record-photo{width:72px;height:72px}.record-photo.empty{color:#8a8175;justify-content:center;align-items:center;font-size:12px;display:flex}.sheet-photo{width:min(100%,360px);max-height:480px;display:block}.upload-btn{color:#fff;cursor:pointer;background:#0f766e;border-radius:10px;align-items:center;height:36px;padding:0 16px;display:inline-flex}.upload-btn input{display:none}.upload-btn.is-busy{opacity:.7;cursor:wait}.home-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.board-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;display:grid}.board{background:#fffdf8;border:1px solid #e6dfd2;border-radius:16px;padding:16px}.rank-list{flex-direction:column;gap:8px;padding-top:14px;display:flex}.rank-row{text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit;background:#fff;border:1px solid #e6dfd2;border-radius:12px;grid-template-columns:36px 44px 1fr auto auto;align-items:center;gap:10px;padding:8px 10px;display:grid}.rank-1{background:#fff8e1;border-color:#e6b325}.rank-2{background:#f3f5f8;border-color:#b7c0cc}.rank-3{background:#fff4ec;border-color:#e0a070}.rank-badge{justify-content:center;align-items:center;width:28px;height:28px;font-weight:700;display:inline-flex;position:relative}.rank-1 .rank-badge{color:#a16207}.rank-2 .rank-badge{color:#4b5563}.rank-3 .rank-badge{color:#9a3412}.rank-crown{font-size:18px;line-height:1;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.rank-name{align-items:center;gap:6px;min-width:0;display:flex}.rank-metric{color:#6b6258;flex-direction:column;align-items:flex-end;min-width:52px;font-size:12px;display:flex}.rank-metric strong{color:#1f2933;font-size:16px}.child-card{cursor:pointer}.child-card:hover{border-color:#0f766e}.header-user,.avatar-link{cursor:pointer;color:inherit;font:inherit;background:0 0;border:0;align-items:center;gap:8px;padding:4px;display:inline-flex}.header-user{border-radius:999px;padding:4px 10px 4px 4px}.header-user:hover{background:#f4f1ea}.brand-mark{color:#fff;background:#0f766e;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:inline-flex}@media (width<=720px){.sheet-grid,.sheet-grid.cols-3{grid-template-columns:1fr}}@media print{body{background:#fff}.ant-layout-header,.no-print{display:none!important}}