:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#223a36;background:#f4f6f1;font-size:15px;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:40px 24px}.hero{margin-bottom:32px}.eyebrow{color:#607e6d;font-size:12px;letter-spacing:2px}h1{font-size:clamp(26px,4vw,40px);margin:8px 0}.hero>p:last-child{color:#687d75}.layout{display:grid;grid-template-columns:1.08fr 1fr;gap:24px;align-items:start}.card{background:#fff;border:1px solid #dce5dc;border-radius:20px;padding:26px;min-width:0;box-shadow:0 12px 35px #29413208}.section-title{font-size:17px;margin:0 0 18px}h3.section-title{margin-top:24px}.tabs{display:flex;background:#eef3ed;border-radius:12px;padding:5px;gap:4px}.tabs button{flex:1;border:none}.tabs [aria-pressed=true]{background:#255b47;color:#fff}.hint{color:#657970;font-size:13px}button,input,select{font:inherit}button{border:1px solid #d3dfd5;border-radius:9px;background:white;padding:9px 12px;color:inherit;cursor:pointer;max-width:100%}button:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:default}.primary{background:#255b47;color:white;border-color:#255b47}.secondary{font-size:13px;margin:5px 5px 5px 0}.actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}label{display:block;font-size:13px}input,select{display:block;width:100%;min-width:0;padding:9px;border:1px solid #c9d7ce;border-radius:8px;background:#fff;color:#223a36;margin:4px 0 12px}input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:3px solid #b6d5c2;outline-offset:2px}.record,.product,.tier{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1eb}.record small{display:block;color:#657970}.remove{font-size:12px;padding:7px}details{margin-top:18px}summary{cursor:pointer;color:#255b47}#total{font-size:clamp(32px,5vw,48px);font-variant-numeric:tabular-nums;line-height:1.2;color:#255b47;overflow-wrap:anywhere}.metrics{display:flex;gap:30px;border-bottom:1px solid #edf1eb;padding-bottom:14px}.metrics p{font-size:12px;color:#657970}.metrics span{display:block;font-size:17px;color:#223a36;overflow-wrap:anywhere}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:right;padding:10px 5px;border-bottom:1px solid #e4ebe3}th:first-child,td:first-child{text-align:left;overflow-wrap:anywhere}th{color:#657970}#chart{display:grid;gap:14px}.bar-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;overflow-wrap:anywhere}.track{height:8px;background:#edf2ed;border-radius:6px;margin-top:5px}.fill{height:100%;background:#689c7f;border-radius:6px}#message{font-size:13px;color:#a03d2d}.guide{margin-top:32px;color:#60736a;font-size:14px}.guide h2{font-size:19px;color:#223a36}a{color:#255b47}footer{text-align:center;color:#83938a;font-size:12px;padding:28px}[hidden]{display:none!important}[data-embedded=true] .hero,[data-embedded=true] .section-title,[data-embedded=true] .guide,[data-embedded=true] footer{display:none}[data-embedded=true] main{padding:14px}[data-embedded=true] .card{box-shadow:none}@media(max-width:800px){.layout{grid-template-columns:1fr}main{padding:24px 16px}.card{padding:20px}.hero{margin-bottom:22px}}@media(max-width:380px){.card{padding:14px}.record,.product,.tier{gap:6px;grid-template-columns:1fr 1fr}.remove{grid-column:1/-1;justify-self:end}main{padding:16px 10px}.metrics{gap:15px}}
#products{margin:10px 0 6px}
#products .product{grid-template-columns:minmax(0,1fr) minmax(80px,.65fr) auto;gap:8px;padding:7px 0;align-items:end}
#products label{font-size:12px;line-height:1.4}
#products input{font-size:13px;padding:6px 8px;margin:3px 0 0;border-radius:6px}
#products .remove{grid-column:auto;align-self:end;justify-self:auto;padding:6px 9px;line-height:1.6;color:#b42318;background:#fff1f0;border-color:#f4b4ae;border-radius:6px}
#products .remove:hover{background:#ffe0dc;border-color:#dc6b61}
#products .product,#products .product-heading{grid-template-columns:minmax(0,1fr) minmax(80px,.65fr) 50px}
#products .product{border-bottom:0;padding:4px 0}
#products .product-heading{display:grid;gap:8px;font-size:12px;color:#657970;padding-bottom:3px}
#products input{margin:0}
@media(max-width:380px){#products .product{grid-template-columns:minmax(0,1fr) 80px auto;gap:5px}#products .remove{padding:6px}}
@media(max-width:380px){#products .product,#products .product-heading{grid-template-columns:minmax(0,1fr) 80px 40px;gap:5px}}