:root{--bg:#f4f1e6;--card:#fffdf8;--ink:#1f2a24;--mute:#66706a;--green:#2b7a3d;--dgreen:#1c5a2a;--soil:#8a5a2b;--line:#e2dac6;--red:#c0452f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.4;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 4px;max-width:560px;margin:0 auto}
.top a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.top h1{font-size:1.3rem;margin:0;color:var(--dgreen);line-height:1.1}
.top small{display:block;font-size:.78rem;color:var(--mute);font-weight:500}
.top img{border-radius:9px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 14px 6px;max-width:560px;margin:0 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:sticky;top:0;background:var(--bg);z-index:5}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;gap:5px;padding:0 14px;border-radius:22px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
main{max-width:560px;margin:0 auto;padding:2px 14px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0}
.card h2{margin:0;font-size:1.2rem}
.label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:700;margin:0 0 4px}
.big{font-size:2.2rem;font-weight:800;line-height:1.1;margin:0;word-break:break-word}
.big.dim{color:#b9b3a3}
.sub{margin:4px 0 0;color:var(--mute)}
.hero{background:var(--green);color:#fff;border-color:var(--green)}
.hero .label,.hero .sub{color:#dcf1e1}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:10px 4px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:700;text-align:center;font-size:.95rem}
.tile:active{background:#e8f3ea}
.tile .e{font-size:2rem;line-height:1}
.lab{font-weight:700;margin:14px 0 6px}
.form .lab:first-child{margin-top:2px}
label{display:block;font-weight:700;margin:14px 0 4px}
.inwrap{position:relative}
input,select{width:100%;min-height:54px;font:inherit;font-size:1.15rem;padding:10px 12px;border:1.5px solid #cdc3aa;border-radius:12px;background:#fff;color:var(--ink)}
.inwrap input{padding-right:46px}
.suf{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mute);font-weight:700;pointer-events:none}
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #7cc58a;outline-offset:1px}
.seg{display:flex;gap:6px}
.seg button{flex:1;min-height:50px;border:1.5px solid #cdc3aa;border-radius:12px;background:#fff;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:6px 8px}
.seg button.on{background:var(--green);border-color:var(--green);color:#fff}
.hint{font-size:.85rem;color:var(--mute);margin:4px 0 0}
.btn{display:inline-block;min-height:50px;border:0;border-radius:14px;background:var(--green);color:#fff;font:inherit;font-weight:700;font-size:1rem;padding:12px 18px;margin-top:14px;cursor:pointer}
.btn.alt{background:#fff;color:var(--dgreen);border:2px solid var(--green)}
.btn.small{min-height:46px}
.row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.row:first-of-type{border-top:0}
.row .nm{color:var(--mute);font-size:.95rem}
.row .amt{font-weight:700;text-align:right}
.row.st .nm{color:var(--ink);font-weight:700}
.row.st .amt{color:var(--dgreen);font-size:1.1rem}
.math summary{font-weight:700;cursor:pointer;min-height:30px}
.math p{margin:8px 0 0;font-size:.92rem}
.notes ul{margin:4px 0 0;padding-left:20px}.notes li{margin:6px 0;font-size:.95rem}
.help{font-size:.95rem;color:var(--mute);margin:0}
.back{text-align:center;margin:6px 0}.back a{color:var(--dgreen);font-weight:700;display:inline-block;padding:12px}
.ad-slot{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.45rem .75rem;margin:12px 0;background:rgba(255,255,255,.55);border:1px dashed rgba(31,77,58,.28);border-radius:10px;color:#6b7a70;font-size:.8rem}
.ad-slot__badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid rgba(31,77,58,.25);border-radius:5px;padding:.1rem .35rem}
.foot{max-width:560px;margin:18px auto 0;text-align:center;font-size:.85rem;color:var(--mute);padding:0 14px}
.foot p{margin:4px 0}.foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}.tiny{font-size:.75rem}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:20;max-width:90%;text-align:center;font-size:.95rem}
.toast[hidden]{display:none}
@media (max-width:340px){.tiles{grid-template-columns:repeat(2,1fr)}}
.sumbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--dgreen);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:baseline;gap:10px;font-size:1.05rem}
.sumbar[hidden]{display:none}
.sumbar .l{opacity:.8;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.sumbar strong{font-size:1.25rem}
body.hasbar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}