:root{
  --primary: #3498db;
  --secondary: #2c3e50;
  --accent: #e74c3c;
  --font: system-ui, sans-serif;
}
*{ box-sizing: border-box; }
body{ margin:0; font-family: var(--font); background:#f5f7fb; color:#222; }
header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:10; }
.nav{ display:flex; gap:12px; padding:12px 16px; overflow-x:auto; }
.nav-item{ color: var(--secondary); text-decoration:none; padding:8px 10px; border-radius:8px; border:1px solid #e5e7eb; white-space:nowrap; }
.nav-item.active{ background: var(--primary); color:#fff; border-color: var(--primary); }
.container{ max-width: 720px; margin:0 auto; padding:16px; }
h1{ font-size:1.5rem; margin: 8px 0 4px; }
.desc{ color:#555; margin-bottom:16px; }
.row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #eee; }
.label{ flex: 1 1 45%; font-weight:600; font-size:0.95rem; }
.controls{ flex: 1 1 55%; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mood-btn{ font-size:1.2rem; padding:8px 10px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer; }
.mood-btn.active{ border-color: var(--primary); background:#eef6ff; }
.notes .notes-text{ width:100%; min-height:60px; padding:8px; border:1px solid #ddd; border-radius:8px; }
.hidden{ display:none; }
input.inp{ padding:8px 10px; border:1px solid #ddd; border-radius:8px; font-size:16px; }
/* Improve iOS Safari sizing for date/time inputs and prevent zoom */
input[type="date"].inp,
input[type="time"].inp{ font-size:16px; min-height:44px; padding:10px 12px; }
/* Ensure toolbar date input is also comfortably sized */
.toolbar input[type="date"]{ font-size:16px; min-height:44px; padding:10px 12px; border:1px solid #ddd; border-radius:8px; background:#fff; color:inherit; }
/* Optional min-widths to avoid overly narrow controls on iOS */
input[type="time"].inp{ min-width: 9ch; }
input[type="date"].inp{ min-width: 12ch; }
html{ -webkit-text-size-adjust: 100%; }
.help{ font-weight:400; color:#666; font-size:0.85rem; margin-top:4px; }
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 0 16px; border-bottom:1px dashed #e5e7eb; margin-bottom:8px; }
.toolbar button{ padding:8px 12px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; }
.toolbar .date-display{ font-weight:600; }
footer{ text-align:center; padding:24px; color:#888; }
/* Login page specific base styles reuse general */
.card{ background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
label{ display:block; font-weight:600; margin-bottom: 8px; }
input[type=password]{ width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:1rem; }
button{ padding:12px 14px; background: var(--primary); color:#fff; border:none; border-radius:8px; font-size:1rem; }

.section-title{ margin-top:16px; padding-top:12px; border-top:2px solid #eee; font-weight:700; color: var(--secondary); }
.controls .since{ align-self:center; color:#666; font-size:0.85rem; margin-left:6px; white-space:nowrap; }

/* Compact clear buttons next to controls */
.clear-btn{ padding:4px 8px; font-size:0.85rem; background:#fff; color:inherit; border:1px solid #ddd; border-radius:6px; cursor:pointer; }

/** Toolbar-specific overrides placed after generic button rule to ensure visibility */
.toolbar button{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid #ddd; background:#fff; color:inherit; border-radius:8px; cursor:pointer; }
.toolbar button:disabled{ opacity:.5; cursor:not-allowed; }
/* .toolbar input[type="date"] already defined above with font-size */
.toolbar .date-display{ font-weight:600; }

/* Keep number input + clear button together for single-number rows */
.inline-pair{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }

/* Notes toggle styled as button and spacing tweaks */
.notes .notes-toggle{ padding:6px 10px; font-size:0.85rem; background:#fff; color:inherit; border:1px solid #ddd; border-radius:6px; cursor:pointer; }
.mood-btn + .mood-btn{ margin-left:6px; }
.mood .clear-btn{ margin-left:8px; }
.notes .clear-btn{ margin-left:8px; }
.inp + .clear-btn{ margin-left:8px; }