:root{--p:#2E7D32;--pl:#4CAF50;--pd:#1B5E20;--s:#FF9800;--d:#F44336;--bg:#F5F7FA;--c:#fff;--t1:#212121;--t2:#757575;--t3:#9E9E9E;--b:#E8EAED;--r8:8px;--r12:12px;--tr:all .2s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;contain:layout style}.hd{background:linear-gradient(135deg,var(--p) 0%,var(--pl) 100%);padding:14px 16px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(46,125,50,.2);will-change:transform}.lg{display:flex;align-items:center;justify-content:center;gap:10px}.lg-icon{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.lg-txt{color:#fff}.lg-txt h1{font-size:20px;font-weight:700;letter-spacing:2px;text-shadow:0 1px 2px rgba(0,0,0,.1);white-space:nowrap}.main{flex:1;padding:12px;display:flex;flex-direction:column;gap:12px;contain:layout}.ph{text-align:center;padding:8px 0 12px}.ph h2{font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:2px;color:var(--t1)}.ph h2::before{content:"✏️";font-size:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.sub{font-size:12px;color:var(--t2);letter-spacing:.3px}.card{background:var(--c);border-radius:var(--r12);box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);overflow:hidden;transition:var(--tr);contain:layout}.card:active{transform:scale(.997)}.ch{padding:14px 16px 10px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#FAFAFA 0%,#fff 100%)}.ch h3{font-size:14px;font-weight:600;color:var(--t1);letter-spacing:.2px}.ch-icon{font-size:16px;line-height:1}.form-p{padding:14px 16px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}.fg{display:flex;flex-direction:column;gap:6px;min-width:0}.fg-full{grid-column:1/-1}label{font-size:12px;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:4px;white-space:nowrap}.req{color:var(--d);font-size:13px}input,select{width:100%;height:46px;padding:0 44px 0 14px;border:1.5px solid var(--b);border-radius:var(--r8);font-size:15px;color:var(--t1);background:var(--c);transition:var(--tr);-webkit-appearance:none;appearance:none;font-family:inherit}input:focus,select:focus{outline:none;border-color:var(--pl);box-shadow:0 0 0 3px rgba(76,175,80,.12)}input::placeholder{color:var(--t3);font-size:14px}.iu{position:relative}.unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--t2);font-weight:500;pointer-events:none;white-space:nowrap}select{padding-right:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center}.lp{margin-top:8px;padding:9px 12px;background:linear-gradient(135deg,#FFF3E0 0%,#FFE0B2 100%);border-radius:var(--r8);font-size:12px;color:#E65100;font-weight:500;display:none;border-left:3px solid var(--s)}.lp.show{display:block}.btn{height:52px;background:linear-gradient(135deg,var(--p) 0%,var(--pl) 100%);color:#fff;border:none;border-radius:var(--r12);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:var(--tr);box-shadow:0 4px 12px rgba(46,125,50,.28);margin-top:4px;letter-spacing:.5px;font-family:inherit;-webkit-tap-highlight-color:transparent}.btn:active{transform:translateY(2px);box-shadow:0 2px 6px rgba(46,125,50,.28)}.res{display:none;background:var(--c);border-radius:var(--r12);box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden;margin-top:4px;animation:su .4s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.res.show{display:block}@keyframes su{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pn{padding:16px;background:linear-gradient(135deg,#E8F5E9 0%,#C8E6C9 100%);text-align:center;font-size:17px;font-weight:600;color:var(--pd);letter-spacing:.5px;text-shadow:0 1px 1px rgba(255,255,255,.5)}.cc{display:grid;grid-template-columns:1fr 32px 1fr;gap:8px;padding:18px 14px;align-items:center}.cb{text-align:center;padding:16px 10px;border-radius:var(--r12);transition:var(--tr)}.cb-b{background:linear-gradient(135deg,#FFF8E1 0%,#FFECB3 100%);box-shadow:0 2px 8px rgba(255,152,0,.1)}.cb-a{background:linear-gradient(135deg,#E8F5E9 0%,#C8E6C9 100%);box-shadow:0 2px 8px rgba(76,175,80,.12)}.cl{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--t2);margin-bottom:8px;font-weight:500}.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot-b{background:var(--s)}.dot-a{background:var(--pl)}.cv{font-size:24px;font-weight:700;margin-bottom:3px;letter-spacing:-.5px}.cv-b{color:#F57C00}.cv-a{color:var(--p)}.cd{font-size:11px;color:var(--t2);font-weight:500}.arrow{text-align:center;color:var(--t3)}.arrow::after{content:"→";font-size:22px;font-weight:700}.bd{padding:16px;background:#FAFAFA;border-top:1px solid var(--b)}.bd h4{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--t1)}.bd h4::before{content:"📊";font-size:14px}.bi{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px}.bin{color:var(--t2);font-weight:500}.biv{font-weight:600;color:var(--t1)}.bi-l .biv{color:var(--d)}.bdv{height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent);margin:10px 0}.bi-t{font-weight:600;padding:10px 0}.bi-t .biv{color:var(--p);font-size:16px}.bi-f{background:linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);margin:12px -16px -16px;padding:14px 16px;border-top:1px solid #90CAF9}.bi-f .bin{color:#1565C0}.bi-f .biv{color:#0D47A1;font-weight:700;font-size:15px}.pr{padding:16px;border-top:1px solid var(--b)}.pr h4{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--t1)}.pr h4::before{content:"💡";font-size:14px}.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pi{background:linear-gradient(180deg,var(--bg) 0%,#fff 100%);border-radius:var(--r8);padding:14px 6px;text-align:center;transition:var(--tr);border:1px solid var(--b)}.pi:active{transform:scale(.96)}.prr{font-size:11px;color:var(--t2);margin-bottom:4px;font-weight:500}.psp{font-size:17px;font-weight:700;color:var(--p);letter-spacing:-.3px}.his{display:none;margin-top:4px}.his.show{display:block}.hh{display:flex;justify-content:space-between;align-items:center}.hc{background:none;border:none;color:var(--d);font-size:12px;padding:6px 10px;border-radius:var(--r8);cursor:pointer;transition:var(--tr);font-weight:500}.hc:active{background:rgba(244,67,54,.1)}.hl{padding:10px 16px 14px}.hi{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--b);transition:var(--tr)}.hi:last-child{border:none}.hi:active{background:rgba(0,0,0,.02)}.hn{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}.ht{font-size:11px;color:var(--t3)}.ha{font-size:15px;font-weight:700;color:var(--p)}.hb{font-size:11px;color:var(--t3);text-decoration:line-through}.ft{text-align:center;padding:18px 16px;font-size:11px;color:var(--t3);letter-spacing:.3px}.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(33,33,33,.95);color:#fff;padding:12px 22px;border-radius:24px;font-size:13px;z-index:1000;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2);font-weight:500}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}input.err{border-color:var(--d);background:#FFEBEE;animation:sh .3s}@keyframes sh{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}@media(min-width:768px){.app{max-width:520px}.main{padding:16px;gap:14px}.ph h2{font-size:22px}.cv{font-size:26px}.form-p{gap:16px 14px}}@media(min-width:1024px){.app{max-width:560px}}