/* Mielo — look (§9): white, honey yellow, warm ink #17130E (never pure dark bars or buttons), one big number per card. */
:root{--ink:#17130E;--brown:#6B5A1E;--muted:#5C554C;--yellow:#FFD814;--yellow-2:#FFC700;--yellow-soft:#FFF7CC;
--green-bg:#EAF7EF;--green:#0B6B3A;--orange-bg:#FFF1E6;--orange:#8A3B00;--blue-bg:#F4F8FF;--blue:#4C8DF6;--line:#EEE9DA;
--border:#E6DFC8;--bg:#ffffff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.4}
.app{max-width:480px;min-height:100vh;margin:0 auto;display:flex;flex-direction:column}
.screen{flex:1;padding:20px 16px 12px;display:flex;flex-direction:column;gap:16px}
.title,.big,.tile-num,.debt-num,.brand{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;letter-spacing:-.5px}
.title{font-size:32px;margin:0}
.brand{font-size:36px;margin:0 0 8px;text-align:center}
.hello{display:flex;align-items:center;gap:8px}
.bubble{flex:1;margin:0;background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:12px 14px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(23,19,14,.08)}
.card{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:6px}
.card p{margin:0}
.yellow-soft{background:var(--yellow-soft)}
.orange-soft{background:var(--orange-bg)}
.label-brown{font-size:14px;font-weight:700;color:var(--brown)}
.big{font-size:44px;line-height:1;margin:0}
.big.smaller{font-size:24px;line-height:1.15}
.trail{width:100%;height:auto;margin-top:6px}
.trail-road{fill:none;stroke:#E9DFAE;stroke-width:12;stroke-linecap:round}
.trail-done{fill:none;stroke:var(--yellow-2);stroke-width:12;stroke-linecap:round}
.dot{fill:#fff;stroke:#C9BB7E;stroke-width:2}
.dot-paid{fill:#2E9E5B;stroke:#fff;stroke-width:2}
.flag-pole{stroke:var(--brown);stroke-width:2.5;stroke-linecap:round}
.flag{fill:#2E9E5B}
.trail-meta{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--brown)}
.whatif{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--brown);margin-top:6px}
.whatif input{width:100%;min-height:44px;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none}
.whatif input::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:#E9DFAE}
.whatif input::-moz-range-track{height:10px;border-radius:99px;background:#E9DFAE}
.whatif input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:var(--yellow);border:2px solid #E0B800}
.whatif input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--yellow);border:2px solid #E0B800}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);min-height:44px}
.tile.green{background:var(--green-bg)}.tile.green .tile-label{color:var(--green)}
.tile.orange{background:var(--orange-bg)}.tile.orange .tile-label{color:var(--orange)}
.tile-label{font-size:13px;font-weight:700}
.tile-num{font-size:30px}
.tile-note{font-size:13px;font-weight:600;color:var(--green)}
.pill{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;font-weight:800;font-size:16px;text-decoration:none;color:var(--ink);border:0;padding:0 20px;font-family:inherit;cursor:pointer;width:100%}
.pill.yellow{background:var(--yellow);box-shadow:0 3px 0 #E0B800}
.pill.yellow:disabled{background:var(--yellow-soft);box-shadow:none;color:var(--brown);cursor:default}
.pill.quiet{background:var(--yellow-soft);min-height:48px;font-size:15px}
.refresh{margin:0}
.note{border-radius:16px;padding:12px 14px;font-weight:600;margin:0}
.note.orange{background:var(--orange-bg);color:var(--orange)}
.small{font-size:14px;color:var(--muted)}
.strong{font-weight:700}
.orange-text{color:var(--orange)}.green-text{color:var(--green)}
.group{font-size:15px;color:var(--muted);margin:8px 0 0}
.debt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.debt{border:1.5px solid var(--border);border-radius:18px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:64px}
.debt.behind{background:var(--orange-bg);border-color:#F3D4BC}
.debt-name{display:flex;flex-direction:column;gap:4px;font-weight:700}
.status{font-size:13px;font-weight:700}
.debt-num{font-size:24px;white-space:nowrap}
.back{color:var(--muted);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.facts div{background:var(--blue-bg);border-radius:16px;padding:12px 14px}
.facts dt{font-size:13px;font-weight:700;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:800;font-size:18px}
.form{display:flex;flex-direction:column;gap:12px}
.form label,.login label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
input,select{font:inherit;min-height:48px;border:1.5px solid var(--border);border-radius:14px;padding:10px 12px;background:#fff;color:var(--ink)}
input:focus,select:focus,.pill:focus-visible,a:focus-visible{outline:3px solid var(--yellow-2);outline-offset:2px}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 12px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg)}
.tab{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.tab.on{background:#FFF3B0;font-weight:800;color:var(--ink)}
.tab.soon{opacity:.55}
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.narrow{width:100%;max-width:380px;background:var(--yellow-soft)}
.login form{display:flex;flex-direction:column;gap:12px}
.bee-halo{fill:#FFF3B0}.bee-wing{fill:#EAF4FF;stroke:#9FB8D6;stroke-width:2}.bee-body{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5}
.bee-stripe{fill:#3B2F1E}.bee-antenna{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.bee-ink{fill:var(--ink)}.bee-shine{fill:#fff}.bee-mouth{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.bee-spark{fill:var(--yellow-2)}.bee-speed{stroke:var(--yellow-2);stroke-width:3;stroke-linecap:round}
.bee{flex:none}
.small-bee .bubble{font-size:14px}
@media (min-width:700px){.screen{padding:28px 24px}}
.check{flex-direction:row!important;align-items:center;gap:10px!important}.check input{min-height:24px;width:24px}

.tab.signout{margin:0;padding:0;display:flex}
.tab.signout button{all:unset;cursor:pointer;flex:1;text-align:center;font:inherit;color:inherit;padding:inherit}
.tab.signout button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.qr{background:#fff;padding:12px;border-radius:12px;max-width:240px;margin:12px auto}
.qr svg{width:100%;height:auto;display:block}
.setup-key strong{letter-spacing:.08em;word-break:break-all}