:root {
  /* ── Light — Graphite palette ── */
  --bg-primary:    #FAFAFA;
  --bg-secondary:  #EDEDED;
  --text-primary:  #1F1F1F;
  --text-secondary:#5A5A5A;
  --text-tertiary: #8A8A8A;
  --border:        #B0B0B0;
  --accent:        #5C8A5C;
  --accent-hover:  #4A7349;
  --success:       #2CA86B;
  --warning:       #C8861A;
  --danger:        #C94040;
  /* gradients */
  --title-from:    #2A2A2A;
  --title-to:      #5A5A5A;
  --date-from:     #6A6A6A;
  --date-to:       #8A8A8A;
  /* component tokens */
  --queued-text:   #7A5010;
  --success-fg:    #FAFAFA;
  --accent-fg:     #FAFAFA;
  --accent-glow:   rgba(92,138,92,0.40);
  --color-warning: #E15A5A;
  --btn-add-from:  #E0E0E0;
  --btn-add-to:    #CBCBC5;
  --btn-add-text:  #1F1F1F;
  --option-color:  #0A0A0B;
  --option-bg:     #FAFAFA;
  /* surfaces */
  --card-bg:       rgba(0,0,0,0.035);
  --row-bg:        rgba(0,0,0,0.03);
  --row-hover:     rgba(0,0,0,0.055);
  --row-border:    rgba(0,0,0,0.09);
  --input-bg:      rgba(0,0,0,0.04);
  --input-border:  rgba(0,0,0,0.10);
  --input-focus:   rgba(0,0,0,0.22);
  --bar-empty:     rgba(0,0,0,0.10);
  --cb-border:     rgba(0,0,0,0.20);
  --cb-bg:         rgba(0,0,0,0.04);
  --ring-track:    rgba(0,0,0,0.08);
  --nav-bg:        rgba(250,250,250,0.93);
  --nav-border:    rgba(0,0,0,0.10);
  --section-rule:  rgba(0,0,0,0.12);
}

[data-theme="dark"] {
  /* ── Dark ── */
  --bg-primary:    #161616;
  --bg-secondary:  #232323;
  --text-primary:  #E8E8E8;
  --text-secondary:#B0B0B0;
  --text-tertiary: #76746E;
  --border:        #3A3A3A;
  --accent:        #7FAA7F;
  --accent-hover:  #92BB92;
  --success:       #6BE3A4;
  --warning:       #F2C063;
  --danger:        #FF6B6B;
  /* gradients */
  --title-from:    #FFFFFF;
  --title-to:      #C7C4BC;
  --date-from:     #9E9C97;
  --date-to:       #76746E;
  /* component tokens */
  --queued-text:   #FFE2A8;
  --success-fg:    #0A0A0B;
  --accent-fg:     #1A1A1A;
  --accent-glow:   rgba(127,170,127,0.40);
  --color-warning: #E07070;
  --btn-add-from:  #FFFFFF;
  --btn-add-to:    #E8E5DD;
  --btn-add-text:  #0A0A0B;
  /* surfaces */
  --card-bg:       rgba(255,255,255,0.04);
  --row-bg:        rgba(255,255,255,0.035);
  --row-hover:     rgba(255,255,255,0.058);
  --row-border:    rgba(255,255,255,0.06);
  --input-bg:      rgba(255,255,255,0.04);
  --input-border:  rgba(255,255,255,0.06);
  --input-focus:   rgba(255,255,255,0.20);
  --bar-empty:     rgba(255,255,255,0.10);
  --cb-border:     rgba(255,255,255,0.18);
  --cb-bg:         rgba(255,255,255,0.05);
  --ring-track:    rgba(255,255,255,0.06);
  --nav-bg:        rgba(5,5,6,0.84);
  --nav-border:    rgba(255,255,255,0.07);
  --section-rule:  rgba(255,255,255,0.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Prevent iOS Safari auto-zoom on input focus (zoom triggers below 16px) */
input, select, textarea { font-size: 16px; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  padding: max(24px, env(safe-area-inset-top)) 20px calc(68px + env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 14%, rgba(224,118,88,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 18% 90%, rgba(180,180,200,0.06) 0%, transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: washDrift 36s ease-in-out infinite alternate;
}

@keyframes washDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(8px,12px) scale(1.02); }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Page Title ── */
.dash-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--title-from) 0%, var(--title-to) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.dash-date {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--date-from) 0%, var(--date-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 6px;
}

/* ── Goal Ticker ── */
.ticker-row { margin-bottom: 18px; }

.goal-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 12px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.30) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.goal-ticker::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: tickerSweep 8s linear infinite;
  pointer-events: none;
}
@keyframes tickerSweep {
  0%   { left: -40%; }
  100% { left: 110%; }
}

.goal-ticker-led { display: flex; align-items: center; flex-shrink: 0; }
.goal-ticker-led-dot {
  display: block; width: 7px; height: 7px;
  background: var(--success); border-radius: 50%;
  box-shadow: 0 0 8px rgba(107,227,164,0.7);
  animation: ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.45; transform:scale(0.85); }
}

.goal-ticker-label {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--text-secondary); flex-shrink: 0; text-transform: uppercase;
}

.goal-ticker-stage { flex: 1; height: 22px; position: relative; overflow: hidden; }

.goal-ticker-row {
  display: flex; align-items: center; gap: 8px;
  height: 22px; position: absolute; top: 0; left: 0; width: 100%;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-primary); white-space: nowrap;
}
.goal-ticker-row.is-leaving  { animation: ticker-leave 500ms cubic-bezier(0.4,0,0.2,1) forwards; }
.goal-ticker-row.is-entering { animation: ticker-enter 500ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes ticker-leave  { from{opacity:1;transform:translateY(0)}    to{opacity:0;transform:translateY(-100%)} }
@keyframes ticker-enter  { from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)}     }

.goal-ticker-status { width:18px; flex-shrink:0; text-align:center; color:var(--text-tertiary); }
.goal-ticker-status[data-status="done"] { color:var(--success); }
.goal-ticker-text { flex:1; overflow:hidden; text-overflow:ellipsis; }

.goal-ticker-meta {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:0.04em; color:var(--text-secondary);
  padding:3px 8px; border-radius:999px; background:var(--card-bg);
  flex-shrink:0;
}

/* ── Day Ring ── */
.day-ring-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap;
  background: var(--card-bg);
  border-radius: 16px; padding: 22px;
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  margin-bottom: 18px;
}

.day-ring-left { position:relative; width:168px; height:168px; flex-shrink:0; }
.day-ring-left svg { width:168px; height:168px; }

.day-ring-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; gap:2px;
}

.day-ring-percent {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:40px; font-weight:800; letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums; color:var(--text-primary); line-height:1;
}
.day-ring-phase {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--text-tertiary); margin-top:5px;
}
.day-ring-clock {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px; color:var(--text-tertiary);
}

.day-ring-right { max-width:280px; display:flex; flex-direction:column; gap:6px; }
.day-ring-status { font-size:14px; font-weight:700; color:var(--text-primary); }
.day-ring-remaining { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; color:var(--text-secondary); }
.day-ring-hours-range { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; color:var(--text-tertiary); }

/* ── Section ── */
.section { display:flex; flex-direction:column; gap:12px; }

.section-title {
  font-size:10.5px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-tertiary);
  display:flex; align-items:center; gap:12px;
}
.section-title::before { content:''; width:18px; height:1px; background:var(--text-tertiary); opacity:0.6; flex-shrink:0; }
.section-title::after  { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--section-rule),transparent); }

/* ── Cards ── */
.gm-card {
  background: var(--card-bg);
  border-radius: 16px; padding: 18px 22px;
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transition: background 0.5s ease, border-color 200ms ease;
}
.gm-card.gm-all-done {
  background: linear-gradient(to bottom, rgba(107,227,164,0.06) 0%, var(--card-bg) 28%);
}

.gm-card-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:12px; margin-bottom:14px;
}

.gm-eyebrow {
  font-size:10.5px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-tertiary); margin-bottom:6px;
}

.gm-progress-row { display:flex; align-items:baseline; gap:6px; }

.gm-progress-num {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:42px; font-weight:700; letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums; color:var(--text-primary); line-height:1;
  transition:color 0.3s;
}
.gm-all-done .gm-progress-num { color:var(--success); }

.gm-progress-total {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:18px; color:var(--text-tertiary);
}
.gm-progress-label {
  font-size:11px; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--text-tertiary); transition:color 0.3s;
}
.gm-all-done .gm-progress-label { color:var(--success); }

/* Streak */
.gm-streak {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  background:var(--card-bg); color:var(--text-tertiary);
  border:1px solid transparent; transition:all 0.3s; flex-shrink:0;
}
.gm-streak.gm-streak-active {
  background:rgba(242,192,99,0.10); color:var(--warning);
  border-color:rgba(242,192,99,0.32);
}
.gm-streak-icon { font-size:13px; }
.gm-streak.gm-streak-active .gm-streak-icon { filter:drop-shadow(0 0 6px rgba(242,192,99,0.6)); }
.gm-streak-num { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:700; font-variant-numeric:tabular-nums; }
.gm-streak-label { font-size:10px; text-transform:uppercase; letter-spacing:0.10em; }

/* Bar */
.gm-bar { display:flex; gap:4px; height:6px; margin-bottom:16px; }
.gm-bar:empty { display:none; }
.gm-bar-seg { flex:1; border-radius:3px; background:var(--bar-empty); transition:background 0.3s,box-shadow 0.3s; }
.gm-bar-seg-done { background:var(--success); box-shadow:0 0 6px rgba(107,227,164,0.40); }

/* List */
.goal-list { list-style:none; display:flex; flex-direction:column; }
.empty-state { font-size:12px; color:var(--text-tertiary); font-style:italic; padding:14px 0; text-align:center; }

/* Goal item */
.goal-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin-bottom:6px;
  background:var(--row-bg);
  border-radius:12px; border:1px solid var(--row-border);
  transition:background 0.15s; position:relative;
}
.goal-item:hover { background:var(--row-hover); }
.goal-item:hover .goal-drag  { opacity:1; }
.goal-item:hover .goal-delete { opacity:0.5; }
.goal-item.gm-done { opacity:0.45; background:rgba(107,227,164,0.04); }
.goal-item.gm-queued {
  background:rgba(242,192,99,0.10);
  box-shadow:inset 3px 0 0 0 var(--warning);
}
.goal-item.gm-queued .goal-text { color:var(--queued-text); }
.goal-item.is-queue-flashing { animation:gm-queue-flash 0.48s ease-out; }
@keyframes gm-queue-flash {
  0%   { background:rgba(242,192,99,0.10); transform:scale(1); }
  50%  { background:rgba(242,192,99,0.32); transform:scale(1.015); }
  100% { background:rgba(242,192,99,0.10); transform:scale(1); }
}

/* Drag handle */
.goal-drag {
  font-size:14px; width:14px; flex-shrink:0;
  cursor:grab; opacity:0; transition:opacity 0.15s;
  color:var(--text-tertiary); letter-spacing:-2px; user-select:none;
}
.goal-drag:active { cursor:grabbing; }

/* Checkbox */
.goal-cb-wrap { position:relative; width:22px; height:22px; flex-shrink:0; }
.goal-cb-wrap input[type="checkbox"] {
  position:absolute; opacity:0; width:100%; height:100%;
  cursor:pointer; z-index:2; margin:0;
}
.goal-cb-visual {
  width:22px; height:22px; border-radius:7px;
  border:1.5px solid var(--cb-border);
  background:var(--cb-bg);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;
  pointer-events:none;
}
.goal-cb-wrap input:checked ~ .goal-cb-visual {
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
}
.goal-cb-visual::after {
  content:''; display:block; width:5px; height:9px;
  border-right:2px solid var(--success-fg); border-bottom:2px solid var(--success-fg);
  transform:rotate(45deg) scale(0);
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  margin-top:-2px;
}
.goal-cb-wrap input:checked ~ .goal-cb-visual::after { transform:rotate(45deg) scale(1); }
.goal-item.read-only .goal-cb-wrap input { cursor:default; pointer-events:none; }
.goal-item.read-only .goal-cb-visual { opacity:0.4; }

/* Goal text */
.goal-text {
  flex:1; font-size:13.5px; color:var(--text-primary);
  cursor:text; outline:none; min-width:0; word-break:break-word;
}
.goal-item.gm-done .goal-text {
  text-decoration:line-through;
  text-decoration-color:var(--text-tertiary);
}
.goal-text[contenteditable="true"] {
  outline:1px solid var(--input-focus); border-radius:4px; padding:0 4px;
}

/* Queue btn */
.gm-queue-btn {
  background:none; border:none; cursor:pointer; font-size:13px;
  color:var(--text-tertiary); opacity:0.55;
  transition:opacity 0.15s,filter 0.15s; padding:2px; flex-shrink:0;
}
.gm-queue-btn.gm-queue-active { color:var(--warning); opacity:1; filter:drop-shadow(0 0 4px rgba(242,192,99,0.65)); }
.gm-queue-btn:disabled { cursor:default; }

/* Delete btn */
.goal-delete {
  background:none; border:none; cursor:pointer; font-size:14px;
  color:var(--text-tertiary); opacity:0; transition:opacity 0.15s,color 0.15s;
  padding:2px; flex-shrink:0; line-height:1;
}
.goal-delete:hover { color:var(--danger) !important; opacity:1 !important; }

/* Show more row */
.show-more-row {
  display:flex; align-items:center; justify-content:center;
  padding:8px 14px; margin-bottom:6px;
  border:1px dashed var(--row-border); border-radius:12px;
  cursor:pointer; font-size:12px; color:var(--text-tertiary);
  transition:background 0.15s,color 0.15s;
}
.show-more-row:hover { background:var(--card-bg); color:var(--text-secondary); }

/* Push remaining */
.gm-push-btn {
  width:100%; padding:10px; background:none;
  border:1px dashed var(--row-border); border-radius:10px;
  color:var(--text-tertiary); font-size:12px; cursor:pointer;
  transition:background 0.15s,color 0.15s,border-color 0.15s; margin-bottom:14px;
  font-family:inherit;
}
.gm-push-btn:hover { background:var(--card-bg); color:var(--text-primary); border-color:var(--input-focus); }

/* Input wrap */
.gm-input-wrap {
  border-top:1px solid var(--row-border);
  padding-top:14px; margin-top:14px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.gm-input-wrap input[type="text"] {
  flex:1; min-width:0; padding:11px 14px; border-radius:12px;
  background:var(--input-bg); border:1px solid var(--input-border);
  color:var(--text-primary); font-family:inherit;
  outline:none; transition:border-color 0.15s;
}
.gm-input-wrap input[type="text"]:focus { border-color:var(--input-focus); }
.gm-input-wrap input[type="text"]::placeholder { color:var(--text-tertiary); }

.btn-add {
  padding:11px 20px; border-radius:10px;
  background:var(--accent);
  color:var(--accent-fg); font-size:13px; font-weight:700; border:none; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,0.15),0 4px 12px rgba(0,0,0,0.25);
  transition:transform 0.1s,box-shadow 0.1s,background 0.15s; white-space:nowrap; font-family:inherit;
}
.btn-add:hover {
  transform:translateY(-1px); background:var(--accent-hover);
  box-shadow:0 1px 0 rgba(0,0,0,0.15),0 6px 16px rgba(0,0,0,0.30);
}
.btn-polish {
  padding:11px 20px; border-radius:10px;
  background:var(--input-bg); color:var(--text-primary);
  font-size:13px; font-weight:600; border:1px solid var(--input-border);
  cursor:pointer; transition:background 0.15s,transform 0.1s; white-space:nowrap; font-family:inherit;
}
.btn-polish:hover { background:var(--row-hover); transform:translateY(-1px); }
.btn-polish:disabled { opacity:0.6; cursor:default; transform:none; }

.polish-status { width:100%; font-size:11px; color:var(--text-tertiary); min-height:16px; margin-top:4px; }
.polish-status.err { color:var(--danger); }

/* Tomorrow card */
.gm-card-tomorrow .gm-progress-row { display:none; }
.gm-tomorrow-sub { font-size:12px; color:var(--text-tertiary); margin-top:2px; }
.gm-tomorrow-count {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  font-variant-numeric:tabular-nums; color:var(--text-tertiary);
}

/* Responsive */
@media (max-width:480px) {
  .dash-title { font-size:22px; }
  .goal-ticker { padding:9px 12px; }
  .goal-ticker-label { font-size:9px; letter-spacing:0.14em; }
  .goal-ticker-row { font-size:12px; }
  .goal-ticker-meta { font-size:10px; padding:2px 7px; }
  .day-ring-left { width:144px; height:144px; }
  .day-ring-left svg { width:144px; height:144px; }
  .day-ring-percent { font-size:32px; }
  .day-ring-status { font-size:13px; }
}

/* ── Views ── */
.view { display:none; }
.view.view-active { display:block; }

/* ── Bottom Nav ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid var(--nav-border);
  transition:background 200ms ease, border-color 200ms ease;
}
.nav-btn {
  flex:1; max-width:220px; padding:10px 16px; border-radius:10px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--text-tertiary); transition:color 0.15s,background 0.15s;
}
.nav-btn.nav-active { background:var(--row-hover); color:var(--accent); }
.nav-btn:hover:not(.nav-active) { color:var(--text-secondary); background:var(--card-bg); }

/* ── Supplement rows ── */
.supp-row.supp-done { background:rgba(107,227,164,0.07) !important; opacity:1 !important; }
.supp-row.supp-overdue {
  background:rgba(255,107,107,0.07) !important;
  box-shadow:inset 3px 0 0 0 rgba(255,107,107,0.55) !important;
}
.supp-name { flex:1; font-size:13.5px; color:var(--text-primary); min-width:0; word-break:break-word; }
.supp-dosage {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px; color:var(--text-secondary); white-space:nowrap; flex-shrink:0;
}

/* ── Supplement add bar ── */
.supp-add-bar {
  margin-top:16px;
  background:var(--card-bg); border-radius:16px; padding:16px 18px;
  backdrop-filter:blur(24px) saturate(1.2); box-shadow:0 12px 40px rgba(0,0,0,0.45);
}
.supp-add-inputs { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.supp-add-inputs input[type="text"],
.supp-add-inputs input[type="number"],
.supp-add-inputs select {
  background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:10px; color:var(--text-primary); font-family:inherit;
  padding:10px 12px; outline:none; transition:border-color 0.15s;
}
.supp-add-inputs input[type="text"]:focus,
.supp-add-inputs input[type="number"]:focus,
.supp-add-inputs select:focus { border-color:var(--input-focus); }
.supp-add-inputs input::placeholder { color:var(--text-tertiary); }
.supp-add-inputs input[type="number"]::-webkit-inner-spin-button,
.supp-add-inputs input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.supp-add-inputs input[type="number"] { -moz-appearance:textfield; }
.supp-add-inputs select {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.supp-input-name   { flex:2; min-width:120px; }
.supp-input-amount { width:76px; flex-shrink:0; text-align:center; }
.supp-select-unit  { width:100px; flex-shrink:0; }
.supp-select-cat   { flex:1; min-width:130px; }
.supp-add-inputs option { color:var(--option-color); background:var(--option-bg); }
.supp-sections     { display:flex; flex-direction:column; gap:14px; }
.supp-section-card .section-title { margin-bottom:12px; }
.supp-list { list-style:none; display:flex; flex-direction:column; }

/* ── Ring track (theme-aware via CSS) ── */
.ring-track { stroke: var(--ring-track); }

/* ── Settings Menu ── */
.settings-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 1001;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, border-color 200ms ease;
}
.settings-btn:hover { background: var(--bg-secondary); }
.settings-btn-bars { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.settings-btn-bar {
  display: block; width: 16px; height: 1.5px;
  background: var(--text-primary); border-radius: 2px;
  transition: background 200ms ease;
}

/* To add a new setting: copy a .settings-section block, change data-setting, label, and control. Wire it in the initSettings() function. */
.settings-panel {
  position: fixed;
  top: 64px; right: 16px;
  z-index: 1000;
  width: 240px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  display: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.settings-panel.open { display: block; }
.settings-section {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; padding: 4px 0;
}
.settings-label {
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.seg-control {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px; gap: 2px;
  transition: background 200ms ease;
}
.seg-btn {
  flex: 1; padding: 6px 10px;
  font-size: 13px; border-radius: 6px;
  border: none; background: transparent;
  color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.seg-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 500;
}

/* ── Productivity score ── */
.prod-score-wrap {
  background: var(--card-bg);
  border-radius: 16px; padding: 18px 22px;
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.prod-score-num {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 42px; font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1;
}
.prod-score-num.prod-null { color: var(--text-tertiary); }
.prod-score-label { font-size: 12px; color: var(--text-secondary); flex: 1; }
.prod-history-btn {
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--accent);
  background: transparent; color: var(--accent);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background 150ms ease;
}
.prod-history-btn:hover { background: var(--card-bg); }

/* ── History view ── */
.hist-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hist-back-btn {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-primary); font-size: 13px; cursor: pointer;
  font-family: inherit; transition: background 150ms ease;
}
.hist-back-btn:hover { background: var(--card-bg); }
.hist-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hist-row {
  background: var(--row-bg); border: 1px solid var(--row-border);
  border-radius: 12px; overflow: hidden;
}
.hist-row-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
}
.hist-row-header:hover { background: var(--row-hover); }
.hist-date { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.hist-score {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 13px; font-weight: 700;
}
.hist-chevron { font-size: 12px; color: var(--text-tertiary); transition: transform 0.2s; }
.hist-row.expanded .hist-chevron { transform: rotate(90deg); }
.hist-goals { display: none; padding: 8px 16px 12px; border-top: 1px solid var(--row-border); }
.hist-row.expanded .hist-goals { display: block; }
.hist-goal-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.hist-goal-done { color: var(--success); }
.hist-goal-miss { color: var(--danger); }
.hist-score-green { color: var(--success); }
.hist-score-amber { color: var(--warning); }
.hist-score-red   { color: var(--danger); }
.hist-score-gray  { color: var(--text-tertiary); }

/* ── Gym view ── */
.gym-date-picker {
  width: 100%; max-width: 220px; padding: 10px 12px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-primary); font-family: inherit;
  outline: none; transition: border-color 0.15s; text-align: center;
  color-scheme: dark;
}
[data-theme="light"] .gym-date-picker { color-scheme: light; }
.gym-date-picker:focus { border-color: var(--input-focus); }
.gym-add-card { margin-top: 0; }
.gym-form-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; flex-wrap: wrap;
}
.gym-form-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); min-width: 110px; flex-shrink: 0;
}
.gym-num-input {
  width: 72px; padding: 10px 12px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-primary); font-family: inherit;
  outline: none; transition: border-color 0.15s; text-align: center;
}
.gym-num-input:focus { border-color: var(--input-focus); }
.gym-num-input::-webkit-inner-spin-button,
.gym-num-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.gym-num-input { -moz-appearance: textfield; }
.gym-text-input {
  flex: 1; min-width: 160px; padding: 10px 12px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-primary); font-family: inherit;
  outline: none; transition: border-color 0.15s;
}
.gym-text-input:focus { border-color: var(--input-focus); }
.gym-text-input::placeholder { color: var(--text-tertiary); }
.gym-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 10px; color: var(--text-primary); font-family: inherit;
  padding: 10px 12px; padding-right: 32px; outline: none; transition: border-color 0.15s;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.gym-select:focus { border-color: var(--input-focus); }
.gym-select option { color: var(--option-color); background: var(--option-bg); }
.gym-unit-label { font-size: 12px; color: var(--text-tertiary); }
.gym-session-card {
  background: var(--row-bg); border: 1px solid var(--row-border);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.gym-session-info { flex: 1; }
.gym-session-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.gym-session-summary { font-size: 13px; color: var(--text-primary); }

/* ── Weight tab ── */
.weight-header-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.weight-latest-num {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:48px; font-weight:800; letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums; color:var(--text-primary); line-height:1;
}
.weight-latest-unit {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:18px; color:var(--text-tertiary); margin-left:4px; align-self:flex-end; padding-bottom:6px;
}
.weight-latest-sub { font-size:12px; color:var(--text-secondary); margin-top:6px; }
.weight-delta-losing { color:var(--accent); font-size:13px; font-weight:600; }
.weight-delta-gaining { color:var(--color-warning); font-size:13px; font-weight:600; }
.weight-delta-neutral { color:var(--text-secondary); font-size:13px; }
.weight-range-row { display:flex; justify-content:center; margin-bottom:14px; }
.weight-entry-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin-bottom:6px;
  background:var(--row-bg); border-radius:12px; border:1px solid var(--row-border);
}
.weight-entry-val {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:14px; font-weight:700; color:var(--text-primary); min-width:72px;
}
.weight-status-pill {
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; flex-shrink:0;
}
.weight-status-pill.wsp-empty { background:rgba(92,138,92,0.12); color:var(--accent); }
[data-theme="dark"] .weight-status-pill.wsp-empty { background:rgba(127,170,127,0.12); }
.weight-status-pill.wsp-fed { background:rgba(225,90,90,0.12); color:var(--color-warning); }
[data-theme="dark"] .weight-status-pill.wsp-fed { background:rgba(224,112,112,0.12); }
.weight-entry-time { font-size:12px; color:var(--text-tertiary); flex:1; }
.weight-form-row { display:flex; align-items:center; gap:12px; padding:8px 0; flex-wrap:wrap; }
.weight-form-label {
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-tertiary); min-width:70px; flex-shrink:0;
}
/* ── Gym chart colors ── */
:root {
  --gym-color-gym:           #5C8A5C;
  --gym-color-running:       #B85C5C;
  --gym-color-indoor-running:#C28A4B;
  --gym-color-biking:        #3B6F9E;
  --gym-color-indoor-biking: #6E5BA3;
  --gym-color-other:         #888780;
}
[data-theme="dark"] {
  --gym-color-gym:           #7FAA7F;
  --gym-color-running:       #E07070;
  --gym-color-indoor-running:#DDA56C;
  --gym-color-biking:        #6FA2D0;
  --gym-color-indoor-biking: #9A87C9;
  --gym-color-other:         #B0AFA6;
}
.gym-chart-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.gym-chart-legend-item { display:flex; align-items:center; gap:5px; }
.gym-chart-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.gym-chart-legend-label { font-size:11px; color:var(--text-secondary); }
.weight-chart-wrap { margin-top:12px; }
.weight-period-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px 12px;
}
.weight-nav-btn {
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-primary); cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background 150ms ease; font-family:inherit;
}
.weight-nav-btn:hover:not(:disabled) { background:var(--bg-secondary); }
.weight-nav-btn:disabled { opacity:0.35; cursor:not-allowed; }
.weight-period-label { font-weight:500; color:var(--text-primary); font-size:14px; }