:root {
  --green: #2f6b4f;
  --green-dark: #234f3b;
  --green-soft: #e5efe8;
  --amber: #c9772f;
  --amber-soft: #f6e9dc;
  --bg: #f7f5f0;
  --card: #ffffff;
  --ink: #1f2a24;
  --muted: #6b7770;
  --line: #e4e0d7;
  --danger: #b23b3b;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(31, 42, 36, 0.08), 0 6px 20px rgba(31, 42, 36, 0.05);
  --maxw: 620px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.card.tap, .tab, .starbtn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 0; }
p { margin: 0 0 .6rem; }
small { color: var(--muted); }
a { color: var(--green); }

.boot { padding: 4rem 1rem; text-align: center; color: var(--muted); }

/* Layout ------------------------------------------------------------------ */
.app-shell { max-width: var(--maxw); margin: 0 auto; padding-bottom: calc(78px + var(--safe-b)); min-height: 100vh; }
.view { padding: 1rem 1rem 2rem; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--green); color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + .9rem) 1rem .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.topbar h1 { color: #fff; font-size: 1.2rem; flex: 1; }
.topbar .sub { color: #d8e8df; font-size: .8rem; display: block; font-weight: 400; }
.iconbtn { background: rgba(255,255,255,.15); color:#fff; border:0; border-radius:10px; padding:.5rem .7rem; font-size:.85rem; cursor:pointer; }

/* Cards ------------------------------------------------------------------- */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; margin-bottom: .85rem; border: 1px solid var(--line);
}
.card.tap { cursor: pointer; transition: transform .06s ease; }
.card.tap:active { transform: scale(.99); }
.card-head { display:flex; align-items:flex-start; gap:.6rem; }
.card-head .grow { flex:1; }

.banner { background: var(--green-soft); border:1px solid #d3e3d8; }
.banner .goal { font-weight:600; color: var(--green-dark); }

.starbtn { background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:#c9c3b6; padding:0 .1rem; }
.starbtn.on { color:var(--amber); }

.pill { display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; background:var(--green-soft); color:var(--green-dark); }
.pill.cat { background:#eef0ee; color:#4a544d; }
.pill.key { background:var(--amber-soft); color:var(--amber); }
.pill.muted { background:#eef0ee; color:var(--muted); }

.section-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin: 1.2rem .25rem .4rem; }

/* 3D level bars ----------------------------------------------------------- */
.dims { display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; }
.dim { }
.dim-top { display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; }
.dim-name { font-weight:600; font-size:.9rem; }
.dim-name .k { color:var(--amber); }
.dim-lvl { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--muted); font-size:.85rem; }
.rungs { display:flex; gap:4px; }
.rung { flex:1; height:8px; border-radius:4px; background:#e7e3d9; }
.rung.on { background:var(--green); }
.rung.on.key { background:var(--amber); }
.dim-desc { font-size:.82rem; color:var(--muted); margin-top:.35rem; }

.counter-ctl { display:flex; align-items:center; gap:1rem; margin-top:.35rem; }
.counter-val { font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); min-width:4rem; text-align:center; }
.counter-ctl .counter-val { flex:0 0 auto; }
.counter-val .unit { font-size:.85rem; font-weight:500; color:var(--muted); margin-left:.25rem; }
.metric-sub { font-size:.78rem; color:var(--muted); margin-top:.4rem; }
.ladder-ctl { display:flex; gap:.6rem; margin-top:.55rem; }
.step { width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:#fff; font-size:1.5rem; line-height:1; cursor:pointer; touch-action:manipulation; color:var(--ink); }
.step:active { background:var(--green-soft); border-color:var(--green); }

ol.steps { margin:.2rem 0 0; padding-left:1.3rem; }
ol.steps li { margin-bottom:.55rem; font-size:.9rem; line-height:1.4; }
ol.steps li::marker { color:var(--green); font-weight:700; }


/* Suggestion box ---------------------------------------------------------- */
.suggest { border-radius:12px; padding:.85rem; margin-top:.6rem; font-size:.9rem; }
.suggest.push { background:var(--amber-soft); border:1px solid #ecd6bf; }
.suggest.hold { background:var(--green-soft); border:1px solid #d3e3d8; }
.suggest.drop { background:#f7e3e3; border:1px solid #eccaca; }
.suggest strong { display:block; margin-bottom:.2rem; }
.streakdots { display:inline-flex; gap:4px; vertical-align:middle; margin-left:.3rem; }
.streakdots i { width:9px; height:9px; border-radius:50%; background:#d8d3c7; display:inline-block; }
.streakdots i.on { background:var(--amber); }

/* Buttons ----------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:0; border-radius:12px; padding:.8rem 1rem; font-size:.95rem; font-weight:600; cursor:pointer; width:100%; }
.btn.primary { background:var(--green); color:#fff; }
.btn.amber { background:var(--amber); color:#fff; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn.danger { background:#fff; color:var(--danger); border:1px solid #eccaca; }
.btn.sm { padding:.55rem .8rem; font-size:.85rem; width:auto; }
.btn-row { display:flex; gap:.6rem; margin-top:.6rem; }

/* Forms ------------------------------------------------------------------- */
label.field { display:block; font-size:.85rem; font-weight:600; margin:.7rem 0 .3rem; }
input, textarea, select {
  width:100%; padding:.75rem .8rem; border:1px solid var(--line); border-radius:12px;
  font-size:1rem; font-family:inherit; background:#fff; color:var(--ink);
}
textarea { min-height:80px; resize:vertical; }
.err { color:var(--danger); font-size:.85rem; margin-top:.5rem; min-height:1.1em; }

.ratings { display:flex; gap:.5rem; }
.ratings button { flex:1; padding:.7rem .3rem; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:.85rem; cursor:pointer; }
.ratings button.sel[data-r="solid"] { background:var(--green); color:#fff; border-color:var(--green); }
.ratings button.sel[data-r="progress"] { background:var(--amber); color:#fff; border-color:var(--amber); }
.ratings button.sel[data-r="failed"] { background:var(--danger); color:#fff; border-color:var(--danger); }

/* Login ------------------------------------------------------------------- */
.login-wrap { max-width:400px; margin:0 auto; padding:3rem 1.25rem; text-align:center; }
.login-wrap .logo { font-size:3rem; }
.login-wrap h1 { margin:.5rem 0 .2rem; }
.login-wrap form { text-align:left; margin-top:1.5rem; }

/* History ----------------------------------------------------------------- */
.log-item { display:flex; gap:.7rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line); }
.log-item:last-child { border-bottom:0; }
.dot { width:10px; height:10px; border-radius:50%; margin-top:.4rem; flex:0 0 auto; }
.dot.solid { background:var(--green); }
.dot.progress { background:var(--amber); }
.dot.failed { background:var(--danger); }
.log-item .meta { font-size:.78rem; color:var(--muted); }

/* Bottom nav -------------------------------------------------------------- */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:#fff; border-top:1px solid var(--line);
  display:flex; padding-bottom:var(--safe-b);
}
.tabbar .app-shell { padding:0; display:flex; width:100%; min-height:0; }
.tab { flex:1; background:none; border:0; padding:.6rem 0 .5rem; color:var(--muted); font-size:.7rem; font-weight:600; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.tab .ic { font-size:1.3rem; line-height:1; }
.tab.active { color:var(--green); }

/* Modal sheet ------------------------------------------------------------- */
.sheet-backdrop { position:fixed; inset:0; background:rgba(31,42,36,.4); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.sheet { background:var(--bg); width:100%; max-width:var(--maxw); border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto; padding:1.1rem 1.1rem calc(1.5rem + var(--safe-b)); }
.sheet .grabber { width:40px; height:4px; background:#d8d3c7; border-radius:2px; margin:0 auto .8rem; }
.sheet-head { display:flex; align-items:center; margin-bottom:.4rem; }
.sheet-head h2 { flex:1; margin:0; }
.closex { background:none; border:0; font-size:1.5rem; color:var(--muted); cursor:pointer; line-height:1; }

.notes { white-space:pre-wrap; font-size:.9rem; color:#39443d; }
.method-item { font-size:.85rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.method-item:last-child { border-bottom:0; }
.method-item .src { color:var(--muted); font-style:italic; }
ul.tight { margin:.3rem 0 0; padding-left:1.1rem; }
ul.tight li { margin-bottom:.35rem; font-size:.9rem; }
.empty { text-align:center; color:var(--muted); padding:2rem 1rem; }