@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#EDE7D8;
  --paper-dim:#E2DBC8;
  --ink:#262320;
  --ink-soft:#5b564d;
  --line:#C9BFA6;
  --ember:#AE4A2E;
  --ember-soft:#e6d3c9;
  --moss:#4B6E4E;
  --moss-soft:#d9e3d4;
  --brass:#A9812F;
  --brass-soft:#eadfc0;
  --card:#F5F1E4;
}

*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
body{ background:var(--paper); }

.app-shell{
  font-family:'IBM Plex Serif', Georgia, serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  width:100%;
}

.loading{ padding:48px 20px; text-align:center; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }

.server-warning{ background:var(--ember-soft); border:1px solid var(--ember); color:#7a2e18; border-radius:3px; padding:12px 14px; font-size:13px; line-height:1.6; max-width:720px; margin:0 auto; }

.masthead{
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  padding:18px 20px 0 20px;
  position:sticky; top:0; z-index:10;
}
.masthead-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; max-width:720px; margin:0 auto; }
.masthead-kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; color:var(--ink-soft); }
.masthead-title{ font-size:26px; font-weight:600; margin:2px 0 14px 0; line-height:1.15; }
.save-note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); min-width:60px; text-align:right; padding-bottom:16px; }

.tabbar{ display:flex; gap:2px; max-width:720px; margin:0 auto; overflow-x:auto; }
.tab-btn{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);
  background:transparent; border:none; border-bottom:3px solid transparent;
  padding:9px 10px; cursor:pointer;
}
.tab-btn-on{ color:var(--ink); border-bottom-color:var(--ember); font-weight:600; }
.tab-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:-2px; }

.main{ padding:18px 16px 60px 16px; }
.page{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:3px; padding:18px; }
.panel-title{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.02em; color:var(--ink-soft); margin-bottom:12px; }
.panel-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.panel-title-row .panel-title{ margin-bottom:0; }

.hero{ background:var(--ink); color:var(--paper); border-radius:3px; padding:26px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hero-main{ display:flex; flex-direction:column; align-items:flex-start; }
.hero-flame{ color:var(--ember-soft); margin-bottom:4px; }
.hero-number{ font-family:'IBM Plex Mono',monospace; font-size:56px; font-weight:700; line-height:1; }
.hero-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#cfc8b8; margin-top:2px; }
.hero-stats{ display:flex; gap:22px; flex-wrap:wrap; }
.hero-stat{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; color:#e7e1d2; }
.hero-stat-num{ font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:700; }
.hero-stat-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#a9a190; }

.chain-row{ display:flex; flex-wrap:wrap; gap:6px; }
.stamp{ border-radius:50%; border:2px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); padding:0; }
.stamp-success{ background:var(--moss); border-color:var(--moss); color:#fff; }
.stamp-fail{ background:var(--ember); border-color:var(--ember); color:#fff; }
.stamp-today{ border-color:var(--brass); border-style:dashed; }
.stamp-future{ opacity:0.35; cursor:default; }
.stamp-none{ opacity:0.15; cursor:default; }
.stamp:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

.btn-ghost{ display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:3px; padding:6px 10px; cursor:pointer; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost:disabled{ opacity:0.5; cursor:default; }

.today-progress-track{ height:8px; background:var(--paper-dim); border-radius:4px; overflow:hidden; }
.today-progress-fill{ height:100%; background:var(--brass); transition:width 0.3s; }
.today-progress-text{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin:6px 0 12px 0; }
.rule-mini-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.rule-mini{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); padding:6px 8px; border:1px solid var(--line); border-radius:3px; }
.rule-mini-on{ color:var(--ink); border-color:var(--moss); background:var(--moss-soft); }
.rule-mini-fail{ color:#7a2e18; border-color:var(--ember); background:var(--ember-soft); }

.consistency-list{ display:flex; flex-direction:column; gap:9px; }
.consistency-row{ display:flex; align-items:center; gap:10px; }
.consistency-label{ width:130px; flex-shrink:0; font-size:13px; }
.consistency-track{ flex:1; height:7px; background:var(--paper-dim); border-radius:4px; overflow:hidden; }
.consistency-fill{ height:100%; background:var(--ink); }
.consistency-pct{ width:36px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }

.footnote{ font-size:13px; color:var(--ink-soft); line-height:1.6; max-width:680px; }

.date-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.date-nav-mid{ text-align:center; }
.date-nav-day{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }
.date-nav-date{ font-size:17px; font-weight:600; }
.date-nav-row2{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.icon-btn{ background:var(--paper); border:1px solid var(--line); border-radius:3px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex-shrink:0; }
.icon-btn:hover{ border-color:var(--ink); }
.icon-btn-sm{ width:28px; height:28px; }

.status-pill{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 9px; border-radius:20px; border:1px solid var(--line); }
.status-success{ background:var(--moss-soft); border-color:var(--moss); color:#2c4a2e; }
.status-fail{ background:var(--ember-soft); border-color:var(--ember); color:#7a2e18; }
.status-today{ background:var(--brass-soft); border-color:var(--brass); color:#6b4f16; }
.status-muted{ color:var(--ink-soft); }

.rule-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.rule-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:11px 12px; cursor:pointer; font-family:'IBM Plex Serif',serif; font-size:14px; color:var(--ink); }
.rule-row-on{ background:var(--moss-soft); border-color:var(--moss); }
.rule-row-fail{ background:var(--ember-soft); border-color:var(--ember); }
.rule-icon{ color:var(--ink-soft); flex-shrink:0; }
.rule-row-on .rule-icon{ color:#2c4a2e; }
.rule-row-fail .rule-icon{ color:#7a2e18; }
.rule-label{ flex:1; }
.rule-check{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rule-check-on{ background:var(--moss); border-color:var(--moss); color:#fff; }

.diet-row{ cursor:default; }
.diet-btns{ display:flex; gap:8px; margin-left:auto; flex-shrink:0; }
.diet-icon-btn{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.diet-icon-check.diet-icon-on{ background:var(--moss); border-color:var(--moss); color:#fff; }
.diet-icon-x.diet-icon-on{ background:var(--ember); border-color:var(--ember); color:#fff; }

.metric-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px; }
.metric-field{ display:flex; flex-direction:column; gap:5px; }
.metric-label{ display:flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }
.metric-field input, .metric-field select, .notes-field textarea{
  font-family:'IBM Plex Serif',serif; font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:8px 9px;
}
.metric-field input:focus, .metric-field select:focus, .notes-field textarea:focus{ outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass); }
.notes-field{ display:flex; flex-direction:column; gap:5px; }
.notes-field textarea{ resize:vertical; }

.lc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px; }
.lc-wide{ grid-column:1 / -1; }
.lc-entries{ display:flex; flex-direction:column; gap:16px; }
.lc-entry{ border:1px solid var(--line); border-radius:3px; padding:14px; background:var(--paper); }
.lc-entry-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lc-entry-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }

.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav-title{ font-weight:600; font-size:16px; }
.month-summary{ display:flex; gap:22px; padding:12px 0; margin-bottom:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.month-summary-item{ display:flex; flex-direction:column; gap:2px; }
.month-summary-num{ font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:700; }
.month-summary-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-weekday-row{ margin-bottom:6px; }
.cal-weekday{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-align:center; }
.cal-cell{ aspect-ratio:1; border:1px solid var(--line); border-radius:3px; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--ink); }
.cal-cell-empty{ border:none; background:transparent; cursor:default; }
.cal-cell-success{ background:var(--moss); border-color:var(--moss); color:#fff; }
.cal-cell-fail{ background:var(--ember); border-color:var(--ember); color:#fff; }
.cal-cell-today{ border-color:var(--brass); border-style:dashed; border-width:2px; }
.cal-cell-future{ opacity:0.45; }
.cal-cell-none{ opacity:0.2; cursor:default; }
.cal-daynum{ font-family:'IBM Plex Mono',monospace; font-size:12px; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.legend-item{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }
.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.legend-success{ background:var(--moss); }
.legend-fail{ background:var(--ember); }
.legend-today{ border:2px dashed var(--brass); }
.legend-future{ background:var(--line); }

.lc-table{ display:flex; flex-direction:column; gap:8px; }
.lc-row{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:10px 12px; cursor:pointer; }
.lc-row:hover{ border-color:var(--ink); }
.lc-row-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); width:52px; flex-shrink:0; }
.lc-row-main{ flex:1; min-width:0; }
.lc-row-problem{ font-size:14px; font-weight:600; }
.lc-row-meta{ display:flex; gap:8px; margin-top:3px; }
.diff-pill{ font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 7px; border-radius:10px; }
.diff-easy{ background:var(--moss-soft); color:#2c4a2e; }
.diff-medium{ background:var(--brass-soft); color:#6b4f16; }
.diff-hard{ background:var(--ember-soft); color:#7a2e18; }
.lc-topic{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); }
.lc-row-result{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); flex-shrink:0; }

.rules-ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rules-ol li{ display:flex; align-items:center; gap:10px; font-size:14px; }
.rule-copy{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 10px 0; }
.rule-copy code{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--paper-dim); padding:1px 5px; border-radius:2px; }

@media (max-width:480px){
  .masthead-title{ font-size:21px; }
  .hero-number{ font-size:44px; }
  .hero{ padding:20px 16px; }
  .diet-btns{ margin-left:0; }
}