:root{--navy:#0e2a47;--navy2:#123a5f;--gold:#c9a227;--bg:#f4f6f9;--card:#ffffff;--ink:#17242f;--muted:#5b6b7a;--line:#dbe3ec}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:76px}
.topbar{background:var(--navy);color:#fff;padding:14px 16px 10px;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{background:var(--gold);color:var(--navy);font-weight:800;border-radius:8px;padding:4px 8px}
.brand-name{font-weight:700;font-size:1.15rem;letter-spacing:.2px}
.tagline{color:#bcd0e4;font-size:.82rem;margin-top:2px}
main{max-width:680px;margin:0 auto;padding:16px}
.view{display:none}.view.active{display:block}
h1{font-size:1.45rem;margin:.2em 0 .3em}
h2{font-size:1.08rem;margin:.2em 0 .45em}
.lede{color:var(--muted);margin-top:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}
.card.highlight{border-color:var(--gold);background:#fffdf4}
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.goal-card{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-size:1rem}
.goal-card strong{color:var(--navy)}
.goal-card span{color:var(--muted);font-size:.85rem}
.btn{display:inline-block;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:.95rem;cursor:pointer;text-decoration:none;margin-top:6px}
.btn.secondary{background:#e8eef5;color:var(--navy)}
.btn.danger-ghost{background:transparent;color:#a33;border:1px solid #e3c2c2}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--navy);display:flex;z-index:6;padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;background:none;border:none;color:#bcd0e4;padding:12px 2px;font-size:.82rem;cursor:pointer}
.tabbar button.active{color:#fff;font-weight:700;box-shadow:inset 0 3px 0 var(--gold)}
label{display:block;margin:10px 0;font-size:.95rem}
label.check{display:flex;gap:8px;align-items:flex-start}
select,input[type=number],input[type=text]{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:1rem;margin-top:4px;background:#fff}
label.check input{width:auto;margin-top:2px}
.rating-row{display:flex;gap:8px;margin:8px 0}
.rating-row select{flex:1}
.result .big{font-size:1.5rem;font-weight:800;color:var(--navy);margin:.15em 0}
.badge{background:var(--gold);color:var(--navy);border-radius:6px;font-size:.7rem;padding:2px 7px;vertical-align:middle}
.muted{color:var(--muted);font-size:.88rem}
.disclaimer{color:var(--muted);font-size:.82rem;line-height:1.45;margin:18px 0}
.cat-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.cat-btn{background:#e8eef5;border:1px solid var(--line);color:var(--navy);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:.92rem}
.cat-btn.active{background:var(--navy);color:#fff}
.plan-list{list-style:none;padding:0;margin:10px 0}
.plan-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;display:flex;gap:10px;align-items:flex-start}
.plan-list .done{text-decoration:line-through;color:var(--muted)}
.progress-wrap{background:#e2e9f1;border-radius:999px;height:10px;overflow:hidden}
#plan-progress-bar{background:var(--gold);height:100%;width:0%}
#plan-add-form{display:flex;gap:8px;margin:12px 0}
#plan-add-form input{flex:1;margin-top:0}
#plan-add-form .btn{margin-top:0}
.res-list{display:flex;flex-direction:column;gap:10px}
.res{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.res strong{color:var(--navy)}
.res span{color:var(--muted);font-size:.88rem}
.tier{border-top:1px solid var(--line);padding:8px 0}
.tier:first-of-type{border-top:none}
.tier.locked{opacity:.75}
a{color:var(--navy2)}