/* ════════════════════════════════════════════════════════════════
   Intelligence OS — Cinematic Dark Glass Design System
   ════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:    #060609;
  --bg-base:    #09090F;
  --surface-0:  #0D0D18;
  --surface-1:  #11111F;
  --surface-2:  #161628;
  --surface-3:  #1C1C34;
  --surface-4:  #222240;

  /* Borders */
  --border-0: rgba(255,255,255,0.04);
  --border-1: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.11);
  --border-3: rgba(255,255,255,0.18);

  /* Accent */
  --accent:       #5468E8;
  --accent-soft:  rgba(84,104,232,0.12);
  --accent-glow:  rgba(84,104,232,0.22);
  --accent-mid:   rgba(84,104,232,0.40);
  --accent-warm:  #E8A23B;
  --accent-teal:  #2EC4B6;
  --accent-green: #3ECB7A;
  --accent-red:   #E85B5B;
  --accent-purple: #9B6EE8;

  /* Text */
  --text-1: rgba(255,255,255,0.92);
  --text-2: rgba(255,255,255,0.58);
  --text-3: rgba(255,255,255,0.34);
  --text-4: rgba(255,255,255,0.18);

  /* Typography */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-2xs: 10px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 34px;
  --text-3xl: 46px;

  /* Spacing (8pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;

  /* Layout */
  --strip-h:  36px;
  --rail-w:   52px;
  --bnav-h:   64px;

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.025);
  --glass-border: rgba(255,255,255,0.07);
  --glass-blur:   20px;

  /* Shadows */
  --shadow-card:   0 1px 2px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.25);
  --shadow-float:  0 2px 6px rgba(0,0,0,0.7), 0 12px 40px rgba(0,0,0,0.45);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --t-fast:   100ms;
  --t-normal: 180ms;
  --t-slow:   300ms;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg-void);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

a { color: var(--accent); text-decoration: none; }
strong { font-weight: 600; }
h1,h2,h3,h4 { font-weight: 400; }

/* ── Intelligence Strip ─────────────────────────────────────────── */
#intelligence-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--strip-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--bg-void);
  border-bottom: 1px solid var(--border-0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  z-index: 200;
  gap: var(--sp-4);
  user-select: none;
}

.strip-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.strip-mark {
  color: var(--accent);
  font-size: 13px;
  opacity: 0.75;
}

.strip-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-4);
}

.strip-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 1;
  justify-content: center;
}

#strip-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  letter-spacing: 0.03em;
}

.strip-stat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
}

.strip-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.strip-energy-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.strip-energy-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  transition: background var(--t-fast);
}

.strip-energy-dot.filled {
  background: var(--accent-warm);
  border-color: transparent;
}

/* ── App Shell ──────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  padding-top: calc(var(--strip-h) + env(safe-area-inset-top));
}

/* ── Nav Rail ───────────────────────────────────────────────────── */
#nav-rail {
  position: fixed;
  top: calc(var(--strip-h) + env(safe-area-inset-top));
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  background: var(--bg-void);
  border-right: 1px solid var(--border-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) 0 0;
  z-index: 100;
  overflow: hidden;
}

.rail-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 0 var(--sp-1);
}

.rail-item {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--r-2);
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}

.rail-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.rail-item:hover {
  color: var(--text-2);
  background: var(--surface-1);
}

.rail-item.active {
  color: var(--text-1);
  background: var(--surface-2);
}

.rail-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.rail-divider {
  width: 20px;
  height: 1px;
  background: var(--border-0);
  margin: var(--sp-2) 0;
  flex-shrink: 0;
}

.rail-spacer { flex: 1; min-height: var(--sp-3); }

.rail-section-bottom {
  padding-bottom: var(--sp-2);
}

/* XP bar at bottom of rail */
.xp-bar-wrap {
  width: 100%;
  padding: var(--sp-2) 7px var(--sp-3);
  border-top: 1px solid var(--border-0);
  flex-shrink: 0;
}

.xp-bar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.xp-level-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.xp-streak {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-warm);
}

.xp-title-rail {
  display: block;
  font-family: var(--font-sans);
  font-size: 8px;
  color: var(--text-4);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.xp-title { display: none; }

.xp-bar-track {
  height: 2px;
  background: var(--surface-3);
  border-radius: 1px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-purple));
  border-radius: 1px;
  transition: width var(--t-slow) var(--ease-spring);
}

/* ── Stage ──────────────────────────────────────────────────────── */
#stage {
  margin-left: var(--rail-w);
  flex: 1;
  height: calc(100vh - var(--strip-h) - env(safe-area-inset-top));
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#stage::-webkit-scrollbar { width: 4px; }
#stage::-webkit-scrollbar-track { background: transparent; }
#stage::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }
#stage::-webkit-scrollbar-thumb:hover { background: var(--surface-4); }

/* ── Panels ─────────────────────────────────────────────────────── */
.panel {
  display: none;
  padding: var(--sp-8) var(--sp-8);
  min-height: 100%;
  animation: panelFadeIn var(--t-normal) var(--ease-out);
}

.panel.active { display: block; }

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-chat-layout {
  display: none;
  flex-direction: column;
  height: calc(100vh - var(--strip-h));
  padding: var(--sp-6) var(--sp-8) var(--sp-4);
}

.panel-chat-layout.active { display: flex; }

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-0);
  gap: var(--sp-4);
}

.panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.2;
  flex-shrink: 0;
}

/* ── Conflict Banner ────────────────────────────────────────────── */
#conflict-banner {
  margin: 0 var(--sp-8) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(232,91,91,0.08);
  border: 1px solid rgba(232,91,91,0.22);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  color: #fca5a5;
  line-height: 1.5;
}

#conflict-banner.hidden { display: none; }
#conflict-banner p { margin-bottom: var(--sp-1); }
#conflict-banner p:last-child { margin-bottom: 0; }

/* ── Cards (os-card) ────────────────────────────────────────────── */
.os-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-5);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card), var(--shadow-inset);
  margin-bottom: var(--sp-4);
}

.os-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  min-height: 24px;
}

.os-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.sub-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-0);
}

.sub-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.sub-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

/* ── Morning Briefing ───────────────────────────────────────────── */
#morning-briefing {
  background: linear-gradient(135deg, rgba(84,104,232,0.06) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

#briefing-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

#briefing-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#energy-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.energy-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  transition: background var(--t-fast), transform var(--t-fast);
}

.energy-dot.filled {
  background: var(--accent-warm);
  border-color: transparent;
}

#briefing-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--text-1);
}

#briefing-empty {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-3);
  font-style: italic;
}

/* Skeleton */
.sk-line {
  height: 14px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  margin-bottom: var(--sp-2);
  animation: skeletonPulse 1.6s ease-in-out infinite;
}
.sk-line:last-child { margin-bottom: 0; }

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Today Panel Layout ─────────────────────────────────────────── */
.today-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-5);
  align-items: start;
}

.today-main { display: flex; flex-direction: column; gap: var(--sp-4); }
.today-aside { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Quick Capture ──────────────────────────────────────────────── */
.quick-capture {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
}

.quick-capture input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  font-size: var(--text-base);
  color: var(--text-1);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.quick-capture input[type="text"]:focus {
  border-color: rgba(84,104,232,0.35);
  background: var(--surface-1);
  outline: none;
}

.capture-add-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.capture-add-btn svg { width: 15px; height: 15px; }

.capture-add-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-mid);
}

/* ── Forms ──────────────────────────────────────────────────────── */
.os-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.add-form-input-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.add-form-input-row input { flex: 1; }

.add-form-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

.add-form-row select,
.add-form-row input[type="date"] { flex: 1; min-width: 80px; }

.add-form-inline {
  flex-direction: row !important;
  align-items: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.form-group label {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-weight: 500;
}

/* ── Inputs, Selects, Textareas ─────────────────────────────────── */
input[type="text"],
input[type="date"],
input[type="email"],
textarea,
select {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(84,104,232,0.4);
  background: var(--surface-2);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

::placeholder { color: var(--text-4); }
::-webkit-input-placeholder { color: var(--text-4); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.btn-secondary:hover {
  border-color: var(--border-3);
  color: var(--text-1);
  background: var(--surface-1);
}

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  border: none;
  padding: 6px 8px;
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.btn-ghost:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

.btn-sm { padding: 5px 10px; font-size: var(--text-xs); }
.btn-icon-sm { padding: 6px 8px; font-size: 14px; }

/* ── Count Chip / Badge ─────────────────────────────────────────── */
.count-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  vertical-align: middle;
  margin-left: 4px;
}

.badge.hidden { display: none; }

/* ── Todo List ──────────────────────────────────────────────────── */
#todo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-3);
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 8px var(--sp-2);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
}

.todo-item:hover {
  background: var(--surface-1);
  border-color: var(--border-0);
}

.todo-item.done { opacity: 0.45; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--text-3); }

.todo-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  cursor: pointer;
  margin-top: 2px;
  transition: border-color var(--t-fast), background var(--t-fast);
  position: relative;
}

.todo-check:hover { border-color: var(--accent); }

.todo-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.todo-check.checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.todo-body {
  flex: 1;
  min-width: 0;
}

.todo-text {
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
}

.todo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: 3px;
}

.todo-due {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.todo-goal-name {
  font-size: var(--text-xs);
  color: var(--text-3);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-recurring-badge {
  font-size: var(--text-xs);
  color: var(--accent-teal);
  background: rgba(46,196,182,0.1);
  padding: 1px 5px;
  border-radius: var(--r-1);
}

.todo-start-timer,
.todo-edit-btn,
.todo-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-4);
  font-size: 14px;
  padding: 2px 4px;
  border-radius: var(--r-1);
  transition: color var(--t-fast), background var(--t-fast);
  opacity: 0;
}

.todo-item:hover .todo-start-timer,
.todo-item:hover .todo-edit-btn,
.todo-item:hover .todo-delete { opacity: 1; }

.todo-start-timer:hover { color: var(--accent-teal); }
.todo-start-timer.active { color: var(--accent-teal); opacity: 1; }
.todo-edit-btn:hover { color: var(--text-2); }
.todo-delete:hover { color: var(--accent-red); background: rgba(232,91,91,0.08); }

/* Category dots */
.cat-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-dot.cat-film { background: var(--accent); }
.cat-dot.cat-fitness { background: var(--accent-green); }
.cat-dot.cat-personal { background: var(--accent-warm); }
.cat-dot.cat-other { background: var(--text-4); }

.cat-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

/* Quest badges */
.quest-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-1);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.quest-badge.quest-side_quest {
  background: rgba(155,110,232,0.15);
  color: var(--accent-purple);
}

.quest-badge.quest-main_quest {
  background: rgba(232,162,59,0.15);
  color: var(--accent-warm);
}

/* Inline edit form */
.inline-edit-form {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--surface-2);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.inline-edit-form.hidden { display: none; }

.inline-edit-text { width: 100%; padding: 6px 10px; }

.inline-edit-row {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  align-items: center;
}

.inline-edit-row select,
.inline-edit-row input { flex: 1; min-width: 70px; font-size: var(--text-xs); padding: 5px 8px; }

/* ── Evening Log & Feedback ─────────────────────────────────────── */
#log-textarea { width: 100%; }

.feedback-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-3);
}

.already-logged {
  font-size: var(--text-xs);
  color: var(--text-4);
  margin-top: var(--sp-2);
}

/* ── Insights List ──────────────────────────────────────────────── */
.insight-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.insight-item:last-child { border-bottom: none; }

.insight-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-top: 3px;
}

/* ── Quick Notes ────────────────────────────────────────────────── */
.note-item {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.note-item:last-child { border-bottom: none; }

.note-delete {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.note-item:hover .note-delete { opacity: 1; }
.note-delete:hover { color: var(--accent-red); }

/* ── Plan Day Card ──────────────────────────────────────────────── */
#daily-plan-card {
  padding: var(--sp-4);
  background: var(--surface-1);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  margin-top: var(--sp-3);
}

#daily-plan-card.hidden { display: none; }

/* ── Focus Peaking Chart ────────────────────────────────────────── */
#focus-peaking-chart {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 48px;
}

.peak-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--surface-3);
  min-height: 3px;
  cursor: default;
}

.peak-bar.high { background: var(--accent); }
.peak-bar.medium { background: rgba(84,104,232,0.4); }

.peak-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  text-align: center;
  margin-top: 4px;
}

/* ── Loading / AI text ──────────────────────────────────────────── */
.loading-text {
  font-size: var(--text-sm);
  color: var(--text-3);
  font-style: italic;
  padding: var(--sp-3) 0;
}

.loading-text.hidden { display: none; }

.ai-text {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ── Overview Panel ─────────────────────────────────────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.overview-col {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 260px;
  box-shadow: var(--shadow-card);
}

.overview-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-0);
}

.overview-col-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.overview-col-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
}

.overview-col > div[id$="-list"] {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
}

.ov-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: auto;
}

.ov-add-form input { width: 100%; font-size: var(--text-sm); padding: 7px 10px; }

.ov-add-form-row {
  display: flex;
  gap: var(--sp-2);
}

.ov-add-form-row select { flex: 1; font-size: var(--text-sm); padding: 6px 8px; }

/* Overview rendered items */
.overview-todo-item,
.overview-goal-item,
.overview-capture-item,
.overview-note-item,
.ov-todo-item,
.ov-goal-item,
.ov-capture-item,
.ov-note-item {
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  line-height: 1.4;
}

.overview-todo-item:last-child,
.overview-goal-item:last-child,
.ov-todo-item:last-child,
.ov-goal-item:last-child,
.ov-capture-item:last-child,
.ov-note-item:last-child { border-bottom: none; }

.ov-todo-item.done .ov-todo-text { text-decoration: line-through; opacity: 0.5; }

.overview-goal-card {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-0);
}

.overview-goal-card:last-child { border-bottom: none; }

.overview-goal-name {
  font-size: var(--text-sm);
  color: var(--text-1);
  margin-bottom: 4px;
}

.overview-goal-bar {
  height: 100%;
  background: var(--accent-green);
  border-radius: 1px;
}

/* ── Chat Panel ─────────────────────────────────────────────────── */
#panel-chat .panel-header { flex-shrink: 0; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-behavior: smooth;
}

#chat-messages::-webkit-scrollbar { width: 3px; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }

#chat-messages:empty::before {
  content: 'Ask anything — I have full context of your goals, projects, and day.';
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--text-4);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.8;
  padding-top: 8vh;
}

.chat-msg {
  max-width: 78%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  font-size: var(--text-base);
  line-height: 1.65;
  animation: chatMsgIn 200ms var(--ease-spring);
}

@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid rgba(84,104,232,0.2);
  color: var(--text-1);
}

.chat-msg.ai,
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-1);
}

.chat-msg.chat-loading { opacity: 0.6; }

.chat-confirm-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

#chat-input-area {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-0);
  flex-shrink: 0;
  align-items: center;
}

#chat-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  font-size: var(--text-base);
}

#chat-input:focus {
  border-color: rgba(84,104,232,0.4);
  background: var(--surface-2);
  outline: none;
}

/* ── Goals Panel ────────────────────────────────────────────────── */
.goal-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-fast);
}

.goal-card:hover { border-color: var(--border-2); }
.goal-card.highlighted { border-color: var(--accent); }

.goal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.goal-text {
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.4;
  flex: 1;
}

.goal-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }

.goal-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.goal-cat {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
}

.goal-cat.film     { background: var(--accent-soft); color: var(--accent); }
.goal-cat.fitness  { background: rgba(62,203,122,0.12); color: var(--accent-green); }
.goal-cat.personal { background: rgba(232,162,59,0.12); color: var(--accent-warm); }
.goal-cat.other    { background: var(--surface-2); color: var(--text-3); }

.goal-deadline { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }
.goal-deadline.urgent { color: var(--accent-red); }

.goal-progress-bar {
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.goal-progress-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-spring);
}

.goal-todo-list { margin-top: var(--sp-3); }
.goal-todo-count { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--sp-2); }

.goal-milestones {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border-0);
  padding-top: var(--sp-3);
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.milestone-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.milestone-check.done { background: var(--accent-green); border-color: var(--accent-green); }

/* ── Projects Panel ─────────────────────────────────────────────── */

/* Expandable project card (.project-item = JS-rendered) */
.project-item,
.project-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--t-fast);
}

.project-item:hover,
.project-card:hover { border-color: var(--border-2); }

.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  user-select: none;
}

.project-header-left  { flex: 1; min-width: 0; }
.project-header-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.project-name,
.project-name-text {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.3;
}

.project-deadline-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 3px;
}

.project-description {
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: 1.5;
}

/* Priority toggle buttons */
.project-priority-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 2px;
}

.priority-btn {
  padding: 2px 7px;
  border: none;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--text-4);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  text-transform: capitalize;
  transition: background var(--t-fast), color var(--t-fast);
}

.priority-btn.active { background: var(--surface-3); color: var(--text-1); }
.priority-btn[data-priority="high"].active { color: var(--accent-red); }
.priority-btn[data-priority="medium"].active { color: var(--accent-warm); }
.priority-btn[data-priority="low"].active { color: var(--accent-green); }

.expand-chevron {
  color: var(--text-4);
  flex-shrink: 0;
  transition: transform var(--t-normal) var(--ease-spring), color var(--t-fast);
}

.project-item.expanded .expand-chevron { transform: rotate(180deg); color: var(--text-2); }

/* Expanded project body */
.project-body {
  padding: 0 var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-top: 1px solid var(--border-0);
  padding-top: var(--sp-4);
}

/* Progress bar */
.project-progress-bar-wrap {
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}

.project-progress-bar {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-spring);
}

/* Phase pipeline */
.phase-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.phase-step-wrapper { display: flex; align-items: center; gap: 4px; }

.phase-step {
  padding: 4px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.phase-step:hover { background: var(--surface-2); color: var(--text-2); }
.phase-step.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(84,104,232,0.25); }
.phase-step.past { color: var(--text-4); border-color: var(--border-0); }

.phase-arrow { color: var(--text-4); font-size: 12px; }

/* Phase history */
.phase-history { display: flex; flex-direction: column; gap: 3px; }

.phase-history-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-3);
  padding: 2px 0;
  border-bottom: 1px solid var(--border-0);
}

.phase-history-entry:last-child { border-bottom: none; }
.phase-history-date { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }

/* Section labels within project */
.project-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--sp-2);
}

/* Notes textarea */
.project-notes-area {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Link items */
.project-link-url { color: var(--accent); font-size: var(--text-sm); word-break: break-all; }

.project-link-remove {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 14px;
  padding: 0 3px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.project-link-remove:hover { color: var(--accent-red); }

/* Add link form */
.project-add-link-form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.link-url-input  { flex: 2; min-width: 120px; font-size: var(--text-sm); padding: 6px 8px; }
.link-label-input { flex: 1; min-width: 80px;  font-size: var(--text-sm); padding: 6px 8px; }

/* Tasks within project */
.project-todos { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }

.project-add-todo-form {
  display: flex;
  gap: var(--sp-2);
}

.project-todo-input {
  flex: 1;
  font-size: var(--text-sm);
  padding: 6px 10px;
}

.project-todo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  border-bottom: 1px solid var(--border-0);
}

.project-todo-item:last-child { border-bottom: none; }
.project-todo-item.done { opacity: 0.5; text-decoration: line-through; }

/* Project actions */
.project-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.complete-project-btn {
  font-size: var(--text-xs);
  padding: 5px 12px;
}

/* Legacy classes kept for backward compat */
.project-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.phase-badge {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 500;
}

/* ── Habits Panel ───────────────────────────────────────────────── */
#habits-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.habit-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.habit-item:hover { border-color: var(--border-2); background: var(--surface-2); }
.habit-item.done { border-color: rgba(62,203,122,0.2); background: rgba(62,203,122,0.04); }

.habit-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  color: transparent;
}

.habit-check svg { width: 14px; height: 14px; }
.habit-check:hover { border-color: var(--accent-green); }

.habit-check.checked {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
}

.habit-info { flex: 1; min-width: 0; }

.habit-name {
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.3;
}

.habit-bottom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 4px;
}

.habit-goal-tag {
  font-size: var(--text-xs);
  color: var(--text-4);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-1);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-dots { display: flex; gap: 3px; align-items: center; }

.habit-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  transition: background var(--t-fast);
}

.habit-dot.done { background: var(--accent-green); border-color: transparent; }

.habit-streak {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 2px;
}

.habit-streak.hot { color: var(--accent-warm); }
.habit-streak-emoji { font-size: 11px; }

.habit-edit-btn,
.habit-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-4);
  font-size: 14px;
  padding: 3px 5px;
  border-radius: var(--r-1);
  transition: color var(--t-fast);
  opacity: 0;
}

.habit-item:hover .habit-edit-btn,
.habit-item:hover .habit-delete { opacity: 1; }
.habit-edit-btn:hover { color: var(--text-2); }
.habit-delete:hover { color: var(--accent-red); }

/* ── Journal Panel ──────────────────────────────────────────────── */
.journal-layout { display: flex; flex-direction: column; gap: var(--sp-4); }

.journal-compose { display: flex; flex-direction: column; gap: var(--sp-3); }

.journal-compose textarea { width: 100%; min-height: 120px; font-size: var(--text-base); line-height: 1.7; resize: vertical; }

.journal-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.journal-mood-row { display: flex; align-items: center; gap: var(--sp-2); }
.journal-mood-row label { font-size: var(--text-xs); color: var(--text-3); }
.journal-mood-row select { padding: 5px 10px; font-size: var(--text-sm); }

#journal-mood-chart-wrap {
  padding: var(--sp-4);
  background: var(--surface-1);
  border-radius: var(--r-3);
  border: 1px solid var(--border-1);
}

#journal-mood-chart-wrap.hidden { display: none; }

#journal-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.journal-entry {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}

.journal-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.journal-entry-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }

.journal-entry-mood {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 10px;
}

.journal-entry-content {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ── Health Panel ───────────────────────────────────────────────── */
.health-import-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}

.file-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.file-label:hover { border-color: var(--border-3); color: var(--text-1); }
.file-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.file-label input[type="file"] { display: none; }

#import-status { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--text-2); }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

@media (max-width: 600px) {
  .charts-grid { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--t-fast);
}
.chart-card:hover { border-color: var(--border-2); }

.chart-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.chart-card-title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.chart-card-value {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.health-chart-svg {
  width: 100%;
  height: 72px;
  display: block;
  overflow: visible;
}

.chart-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart-card-avg {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.chart-card-unit {
  font-size: var(--text-2xs);
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.health-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.health-table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--text-3);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-1);
}

.health-table td {
  padding: 8px 10px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-0);
  font-family: var(--font-mono);
}

.health-table tr:last-child td { border-bottom: none; }

/* ── Weekly Review ──────────────────────────────────────────────── */
#weekly-review-form { margin-bottom: var(--sp-5); }

.review-archive-item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.review-archive-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

/* ── Insights Panel ─────────────────────────────────────────────── */
#insights-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.insight-card {
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-3);
  line-height: 1.6;
}

.insight-text {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.6;
}

.insight-date,
.insight-card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-top: var(--sp-2);
}

/* ── Progress Panel ─────────────────────────────────────────────── */
.progress-level-card {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-4);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-card);
}

.progress-level-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}

.progress-level-info { flex: 1; }

.progress-level-title { font-size: var(--text-lg); color: var(--text-1); margin-bottom: var(--sp-1); }

.progress-xp-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

.progress-xp-bar-track {
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-purple));
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-spring);
}

.progress-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.progress-stat {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  text-align: center;
}

.progress-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-1);
  line-height: 1;
  margin-bottom: 4px;
}

.progress-stat-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.progress-section-heading {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--sp-5) 0 var(--sp-3);
}

.progress-ach-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  margin-left: var(--sp-2);
}

.xp-history-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  padding: var(--sp-2) 0;
}

.xp-history-bar {
  flex: 1;
  background: var(--surface-3);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background var(--t-fast);
}

.xp-history-bar.active { background: var(--accent); opacity: 0.7; }
.xp-history-bar.active:hover { opacity: 1; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.achievement-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  transition: border-color var(--t-fast);
}

.achievement-card.unlocked { border-color: rgba(84,104,232,0.25); }
.achievement-card.locked { opacity: 0.45; }

.achievement-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.achievement-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-1); margin-bottom: 2px; }
.achievement-desc { font-size: var(--text-xs); color: var(--text-3); }
.achievement-xp-bonus { font-family: var(--font-mono); font-size: 10px; color: var(--accent); margin-top: 3px; }
.locked-label { color: var(--text-4) !important; }

/* ── Settings ───────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
}

.settings-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

.status-output {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  display: none;
  white-space: pre-wrap;
  line-height: 1.5;
}

.status-output:not(:empty) { display: block; }

.memory-pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  color: var(--text-2);
  padding: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  max-height: 400px;
  overflow-y: auto;
  margin-top: var(--sp-3);
  line-height: 1.6;
}

#memory-view.hidden { display: none; }

.custom-cat-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
}

.custom-cat-item:last-child { border-bottom: none; }
.custom-cat-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.custom-cat-name { flex: 1; color: var(--text-2); }

.custom-cat-remove {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  transition: color var(--t-fast);
}

.custom-cat-remove:hover { color: var(--accent-red); }

/* Toggle Switch */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-1);
  border-top: 1px solid var(--border-0);
}

.settings-toggle-label { font-size: var(--text-sm); color: var(--text-2); }

.toggle-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  padding: 0;
  border: none;
  background: none;
}

.toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  background: var(--surface-3);
  border-radius: 11px;
  border: 1px solid var(--border-2);
  transition: background var(--t-normal), border-color var(--t-normal);
  padding: 2px;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform var(--t-normal) var(--ease-spring), background var(--t-normal);
  flex-shrink: 0;
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: #fff;
}

/* ── Mobile Bottom Nav ──────────────────────────────────────────── */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bnav-h) + env(safe-area-inset-bottom));
  background: var(--bg-void);
  border-top: 1px solid var(--border-1);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
  align-items: stretch;
}

.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 10px;
  transition: color var(--t-fast);
  padding: 0;
  min-height: 0;
}

.bnav-item svg { width: 25px; height: 25px; }
.bnav-item span { font-size: 10px; letter-spacing: 0.01em; }
.bnav-item.active { color: var(--accent); }

/* ── More Menu (mobile) ─────────────────────────────────────────── */
#more-menu {
  display: none;
  position: fixed;
  bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom) + 6px);
  right: var(--sp-4);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: var(--sp-1) 0;
  z-index: 110;
  min-width: 180px;
  box-shadow: var(--shadow-float);
}

#more-menu.open { display: block; }

.more-menu-item {
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  background: none;
  border: none;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
  display: block;
}

.more-menu-item:hover { background: var(--surface-4); }

/* ── Toast Notifications ────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 500;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-1);
  box-shadow: var(--shadow-float);
  max-width: 320px;
  pointer-events: all;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity var(--t-normal) var(--ease-spring),
              transform var(--t-normal) var(--ease-spring);
}

.toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { border-color: rgba(62,203,122,0.3); }
.toast-error   { border-color: rgba(232,91,91,0.3); color: #fca5a5; }
.toast-warning { border-color: rgba(232,162,59,0.3); color: #fcd34d; }

/* ── Modal ──────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: modalIn var(--t-normal) var(--ease-spring);
}

#modal-overlay.hidden { display: none; }

@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#modal-box {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  padding: var(--sp-8);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-float);
  animation: modalBoxIn var(--t-normal) var(--ease-spring);
}

@keyframes modalBoxIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}

.modal-sub { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-5); }

.modal-skip {
  display: block;
  margin-top: var(--sp-3);
  background: none;
  border: none;
  color: var(--text-3);
  font-size: var(--text-sm);
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding: var(--sp-2);
  transition: color var(--t-fast);
}

.modal-skip:hover { color: var(--text-2); }

.energy-btn-row { display: flex; gap: var(--sp-2); }

.energy-btn {
  flex: 1;
  padding: var(--sp-4);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  cursor: pointer;
  font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.energy-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
  transform: translateY(-2px);
}

/* Level Up Modal */
.level-up-modal { text-align: center; position: relative; overflow: hidden; }

.level-up-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.level-up-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
  position: relative;
}

.level-up-title {
  font-size: var(--text-xl);
  color: var(--text-1);
  margin-bottom: var(--sp-3);
  position: relative;
}

.level-up-sub { font-size: var(--text-sm); color: var(--text-3); position: relative; }

/* ── XP Popup ───────────────────────────────────────────────────── */
.xp-popup {
  position: fixed;
  z-index: 400;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
  pointer-events: none;
  animation: xpFloat 1.2s var(--ease-spring) forwards;
  transform: translateX(-50%);
}

@keyframes xpFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

/* ── Timer — Feature Visibility ─────────────────────────────────── */

/* ▷ buttons opt-in */
.todo-start-timer             { display: none !important; }
.timer-enabled .todo-start-timer { display: flex !important; }

/* ── Floating Timer Widget ──────────────────────────────────────── */
#float-timer {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 200;
  user-select: none;
  cursor: grab;
}

#float-timer:active { cursor: grabbing; }
#float-timer button,
#float-timer input  { cursor: pointer; }

#float-timer.hidden { display: none; }

/* Mini pill ─────────────────────────────────────────────────────── */
.ft-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 10px;
  background: rgba(17,17,31,0.94);
  border: 1px solid var(--border-2);
  border-radius: 17px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.ft-mini:hover {
  background: rgba(24,24,44,0.97);
  border-color: var(--border-3);
}

.ft-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.ft-mini-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0.05em;
  min-width: 44px;
}

.ft-mini-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* Expanded panel ─────────────────────────────────────────────────── */
.ft-expanded {
  background: rgba(14,14,26,0.97);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  width: 216px;
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ft-exp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.ft-exp-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ft-collapse-btn {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}

.ft-collapse-btn svg { width: 14px; height: 14px; }
.ft-collapse-btn:hover { color: var(--text-2); }

/* Mode tabs */
.ft-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-2);
  padding: 3px;
}

.ft-tab {
  flex: 1;
  padding: 5px 4px;
  background: transparent;
  border: none;
  border-radius: var(--r-1);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.ft-tab.active {
  background: var(--surface-4);
  color: var(--text-1);
}

.ft-tab:not(.active):not(:disabled):hover { color: var(--text-2); }
.ft-tab:disabled { cursor: not-allowed; opacity: 0.5; }

/* Ring */
.ft-ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--sp-2);
}

.ft-ring { width: 88px; height: 88px; }

.ft-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0.06em;
}

/* Clock display */
.ft-clock-display {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-1);
  text-align: center;
  letter-spacing: 0.06em;
  padding: var(--sp-4) 0 var(--sp-2);
}

.ft-phase-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin-bottom: var(--sp-3);
}

/* Custom duration input */
.ft-custom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  justify-content: center;
}

.ft-minutes-input {
  width: 58px !important;
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-base) !important;
  padding: 5px 8px !important;
}

.ft-minutes-label {
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Controls */
.ft-controls {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-2);
}

.ft-btn {
  flex: 1;
  padding: 7px 10px !important;
  font-size: var(--text-sm) !important;
}

/* Linked task label */
.ft-task-tag {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  background: var(--surface-2);
  border-radius: var(--r-2);
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid var(--border-0);
}

/* ── Collapsible Forms ──────────────────────────────────────────── */

/* Meta rows are hidden by default */
.form-meta-row { display: none !important; }
.form-meta-col { display: none !important; }

/* Show when form is expanded */
.os-add-form.form-expanded .form-meta-row,
.os-add-form.form-expanded .form-meta-col,
.ov-add-form.form-expanded .form-meta-row { display: flex !important; }

.form-meta-col {
  flex-direction: column;
  gap: var(--sp-2);
}

/* Expand button */
.expand-form-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.expand-form-btn svg {
  width: 13px;
  height: 13px;
  transition: transform var(--t-normal) var(--ease-spring);
}

.expand-form-btn:hover {
  color: var(--text-2);
  border-color: var(--border-2);
  background: var(--surface-2);
}

.expand-form-btn.active {
  color: var(--accent);
  border-color: rgba(84,104,232,0.3);
  background: var(--accent-soft);
}

.expand-form-btn.active svg { transform: rotate(180deg); }

/* Overview form input row */
.ov-input-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.ov-input-row input { flex: 1; font-size: var(--text-sm); padding: 7px 10px; }

/* Small + submit button in overview */
.ov-submit-btn {
  padding: 6px 10px !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* ── Text utilities ─────────────────────────────────────────────── */
.text-muted, .muted { color: var(--text-3); }
.text-sm, .small { font-size: var(--text-sm); }
.hidden { display: none !important; }

/* ── Gamification Hidden State ──────────────────────────────────── */
.gamification-hidden .gamification-element { display: none !important; }
.gamification-hidden .xp-bar-wrap { display: none !important; }
.gamification-hidden .xp-popup { display: none !important; }
.gamification-hidden .quest-badge { display: none !important; }
.gamification-hidden .achievement-card { display: none !important; }

/* ── Responsive — Mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
  #nav-rail { display: none; }
  #bottom-nav { display: flex; }

  #stage {
    margin-left: 0;
    height: calc(100vh - var(--strip-h) - env(safe-area-inset-top) - var(--bnav-h) - env(safe-area-inset-bottom));
  }

  .panel {
    padding: var(--sp-5) var(--sp-4);
    padding-bottom: var(--sp-8);
  }

  .panel-chat-layout {
    height: calc(100vh - var(--strip-h) - env(safe-area-inset-top) - var(--bnav-h) - env(safe-area-inset-bottom));
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
  }

  #conflict-banner { margin: 0 var(--sp-4) var(--sp-3); }

  .today-layout { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .progress-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .achievements-grid { grid-template-columns: 1fr; }

  #morning-briefing { padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4); }
  #briefing-text { font-size: var(--text-base); }
  .os-card { padding: var(--sp-4) var(--sp-4); }

  #float-timer {
    right: var(--sp-3);
    left: auto;
    bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom) + var(--sp-3));
  }

  #toast-container {
    bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom) + var(--sp-3));
  }

  .strip-name { display: none; }
  .strip-meta { justify-content: flex-end; }

  .add-form-row { flex-direction: column; align-items: stretch; }
  .add-form-row select,
  .add-form-row input[type="date"] { flex: none; width: 100%; }
  .add-form-row .btn-primary { width: 100%; }

  .panel-title { font-size: var(--text-lg); }
}

/* ── Responsive — Wide ──────────────────────────────────────────── */
@media (min-width: 1400px) {
  .overview-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .today-layout { grid-template-columns: 1fr 340px; }
}

/* ── Overview todo rows ─────────────────────────────────────────── */
.overview-todo-group { margin-bottom: var(--sp-3); }

.overview-todo-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: var(--sp-1) 0 var(--sp-1);
}

.overview-todo-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
}

.overview-todo-row:last-child { border-bottom: none; }
.overview-todo-row.done .overview-todo-text { text-decoration: line-through; opacity: 0.45; }

.ov-todo-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  cursor: pointer;
  margin-top: 2px;
  transition: border-color var(--t-fast), background var(--t-fast);
  position: relative;
}

.ov-todo-check:hover { border-color: var(--accent); }

.ov-todo-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.ov-todo-check.checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

.overview-todo-text {
  flex: 1;
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
}

.overview-todo-meta {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--font-mono);
  margin-top: 1px;
}

.overview-todo-due { color: var(--text-4); }
.overview-todo-goal { color: var(--text-4); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ov-todo-delete {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  opacity: 0;
  flex-shrink: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.overview-todo-row:hover .ov-todo-delete { opacity: 1; }
.ov-todo-delete:hover { color: var(--accent-red); }

/* ── Overview goal cards ────────────────────────────────────────── */
.overview-goal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.overview-goal-text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.4;
  flex: 1;
}

.overview-goal-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.overview-goal-deadline {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.overview-goal-todo-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}

.overview-goal-progress { margin-top: var(--sp-2); }

.overview-goal-progress-bar {
  height: 2px;
  background: var(--surface-3);
  border-radius: 1px;
  overflow: hidden;
}

.overview-goal-progress-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 1px;
  transition: width var(--t-slow);
}

/* ── Goal items (renderGoalsList) ───────────────────────────────── */
.goal-item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-fast);
}

.goal-item:hover { border-color: var(--border-2); }
.goal-item.highlighted { border-left: 2px solid var(--accent); }

/* Inline goal edit form */
.goal-edit-form {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.goal-edit-form.hidden { display: none; }

.goal-edit-form input,
.goal-edit-form select { width: 100%; font-size: var(--text-sm); }

/* Danger / Archive button */
.btn-danger,
.archive-goal-btn,
.ov-goal-archive {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  padding: 3px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-danger:hover,
.archive-goal-btn:hover,
.ov-goal-archive:hover {
  color: var(--accent-red);
  border-color: rgba(232,91,91,0.3);
  background: rgba(232,91,91,0.07);
}

/* Milestone */
.milestone-text { flex: 1; color: var(--text-2); font-size: var(--text-sm); }
.milestone-delete {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  opacity: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.milestone-item:hover .milestone-delete { opacity: 1; }
.milestone-delete:hover { color: var(--accent-red); }

/* ── Overview capture items ─────────────────────────────────────── */
.ov-capture-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.ov-capture-item:last-child,
.overview-capture-item:last-child { border-bottom: none; }

.ov-capture-text,
.overview-capture-text { flex: 1; word-break: break-word; }

.capture-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overview-capture-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}

.capture-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.ov-capture-done,
.ov-capture-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  opacity: 0;
  flex-shrink: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.ov-capture-item:hover .ov-capture-done,
.ov-capture-item:hover .ov-capture-delete,
.overview-capture-item:hover .ov-capture-done,
.overview-capture-item:hover .ov-capture-delete { opacity: 1; }

.ov-capture-done { color: var(--accent-green); }
.ov-capture-done:hover { color: var(--accent-green); opacity: 1; }
.ov-capture-delete { color: var(--text-4); }
.ov-capture-delete:hover { color: var(--accent-red); }

/* ── Overview note items ────────────────────────────────────────── */
.ov-note-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.ov-note-item:last-child { border-bottom: none; }

.ov-note-delete {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  opacity: 0;
  flex-shrink: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.ov-note-item:hover .ov-note-delete { opacity: 1; }
.ov-note-delete:hover { color: var(--accent-red); }

/* ── Category tags ──────────────────────────────────────────────── */
.cat-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cat-tag.film     { background: var(--accent-soft); color: var(--accent); }
.cat-tag.fitness  { background: rgba(62,203,122,0.12); color: var(--accent-green); }
.cat-tag.personal { background: rgba(232,162,59,0.12); color: var(--accent-warm); }
.cat-tag.other    { background: var(--surface-2); color: var(--text-3); }

/* ── Goal link row ──────────────────────────────────────────────── */
.goal-link-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.goal-view-todos-btn {
  font-size: var(--text-xs);
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
  transition: opacity var(--t-fast);
}

.goal-view-todos-btn:hover { opacity: 0.7; }

/* ── Milestone add form ─────────────────────────────────────────── */
.milestone-add-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-2);
}

.milestone-add-form input { flex: 1; font-size: var(--text-sm); padding: 5px 8px; }

.milestone-add-btn {
  background: none;
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  color: var(--text-3);
  font-size: var(--text-xs);
  padding: 4px 8px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.milestone-add-btn:hover { color: var(--text-1); border-color: var(--border-3); }

/* ── Weekly archive items ───────────────────────────────────────── */
.week-plan-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
}

.week-plan-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

/* ── Project detail items ───────────────────────────────────────── */
.project-links-list { margin-top: var(--sp-3); }

.project-link-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  font-size: var(--text-sm);
}

.project-link-item a { color: var(--accent); }

.project-phase-history {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-4);
}


/* ── Insight list empty state ───────────────────────────────────── */
.no-data-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--text-4);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ── Add goal/project form rows fix ─────────────────────────────── */
#panel-goals .add-form-row,
#panel-projects .add-form-row,
#panel-habits .add-form-row { flex-wrap: nowrap; }

@media (max-width: 600px) {
  #panel-goals .add-form-row,
  #panel-projects .add-form-row { flex-wrap: wrap; }
}

/* Habits form: goal link + button inline */
#add-habit-form .add-form-row { flex-wrap: nowrap; }
#add-habit-form .add-form-row select { flex: 1; }
#add-habit-form .add-form-row .btn-primary { flex-shrink: 0; }

/* ── Focus peaking hours label ──────────────────────────────────── */
.peak-hours-row {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.peak-hour-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-4);
  text-align: center;
}

/* ── Journal entry rendered items ───────────────────────────────── */
.journal-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  flex: 1;
}

.journal-mood-badge {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  background: rgba(var(--mood-color, 255,255,255), 0.1);
  color: var(--mood-color, var(--text-2));
  flex-shrink: 0;
}

.journal-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-4);
  padding: 2px 4px;
  border-radius: var(--r-1);
  opacity: 0;
  flex-shrink: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
  display: flex;
  align-items: center;
}

.journal-delete svg { width: 14px; height: 14px; }

.journal-entry:hover .journal-delete { opacity: 1; }
.journal-delete:hover { color: var(--accent-red); }

.journal-content {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: var(--sp-2);
}

/* ── Project cards rendered by JS ───────────────────────────────── */
.project-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }

.project-priority {
  font-size: var(--text-xs);
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-3);
}

.project-links {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.project-links a {
  font-size: var(--text-xs);
  color: var(--accent);
}

/* ── Today insights ─────────────────────────────────────────────── */
#today-insights-list .insight-item {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── Today notes ────────────────────────────────────────────────── */
#today-notes-list .note-item {
  font-size: var(--text-sm);
}

/* ── Misc panel body states ─────────────────────────────────────── */
#panel-progress { padding-bottom: var(--sp-12); }

/* Goals inline editing */
.goal-edit-inline {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
}

.goal-edit-inline.hidden { display: none; }
.goal-edit-inline input,
.goal-edit-inline select,
.goal-edit-inline textarea { width: 100%; font-size: var(--text-sm); }
.goal-edit-inline-row { display: flex; gap: var(--sp-2); align-items: center; }

/* ── Mobile: Today form collapse ────────────────────────────────── */
@media (max-width: 768px) {
  /* Collapse the quest type selector on mobile to save space */
  #todo-quest-type { display: none; }
}

/* ── Progress panel — remove outer card wrapper ─────────────────── */
#panel-progress .os-card:not(:first-child) {
  margin-top: 0;
}

/* Scroll offset for inner sections */
#panel-chat #chat-messages {
  padding-bottom: var(--sp-2);
}

/* Weekly review synthesis card */
#review-synthesis-box .ai-text {
  margin-top: var(--sp-2);
}

/* Insights panel empty state */
#insights-list:empty::before {
  content: 'No insights yet — insights are generated after evening logs.';
  display: block;
  font-size: var(--text-sm);
  color: var(--text-4);
  font-style: italic;
  padding: var(--sp-6) 0;
}

/* ── Tooltip on rail items ──────────────────────────────────────── */
.rail-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-3);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: var(--shadow-float);
}

/* ── Status outputs ─────────────────────────────────────────────── */
.status-ok  { color: var(--accent-green) !important; }
.status-err { color: var(--accent-red)   !important; }

/* ── Overflows for overview columns ─────────────────────────────── */
#overview-todo-list,
#overview-goals-list,
#overview-captures-list,
#overview-notes-list {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

/* ════════════════════════════════════════════════════════════════
   SESSION 1 FEATURES
   ════════════════════════════════════════════════════════════════ */

/* ── Command Palette ─────────────────────────────────────────────── */
#cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}

#cmd-palette.hidden { display: none; }

#cmd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

#cmd-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: cmdIn 150ms var(--ease-spring);
}

@keyframes cmdIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-1);
}

#cmd-input-wrap svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex-shrink: 0;
}

#cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  outline: none;
  padding: 0;
}

#cmd-input::placeholder { color: var(--text-4); }

#cmd-esc-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  padding: 2px 6px;
  flex-shrink: 0;
}

#cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--sp-2) 0;
}

#cmd-results:empty { display: none; }

.cmd-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: var(--sp-2) var(--sp-5) var(--sp-1);
}

.cmd-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: background var(--t-fast);
}

.cmd-result:hover,
.cmd-result.selected {
  background: var(--surface-3);
}

.cmd-result-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 13px;
}

.cmd-result-icon svg { width: 14px; height: 14px; }

.cmd-result-body { flex: 1; min-width: 0; }

.cmd-result-title {
  font-size: var(--text-sm);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-result-sub {
  font-size: var(--text-xs);
  color: var(--text-4);
  margin-top: 1px;
}

.cmd-result-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  padding: 1px 6px;
  flex-shrink: 0;
}

.cmd-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-4);
  font-style: italic;
}

/* Mobile command palette */
@media (max-width: 768px) {
  #cmd-palette { align-items: flex-end; padding-top: 0; }
  #cmd-box { border-radius: var(--r-4) var(--r-4) 0 0; }
  @keyframes cmdIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Overview Search ─────────────────────────────────────────────── */
.overview-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-5);
  transition: border-color var(--t-fast);
}

.overview-search-bar:focus-within {
  border-color: rgba(84,104,232,0.35);
  background: var(--surface-2);
}

.overview-search-bar svg {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

#overview-search {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 10px 0;
  outline: none;
}

#overview-search::placeholder { color: var(--text-4); }

#overview-search-results {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}

#overview-search-results.hidden { display: none; }

.search-results-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  margin-bottom: var(--sp-4);
}

.search-group { margin-bottom: var(--sp-4); }
.search-group:last-child { margin-bottom: 0; }

.search-group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--sp-2);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-fast);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { color: var(--text-1); }

.search-highlight {
  background: rgba(84,104,232,0.2);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Accent Color Picker ─────────────────────────────────────────── */
.accent-swatches {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

.accent-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast);
  flex-shrink: 0;
}

.accent-swatch svg { width: 14px; height: 14px; }
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active { border-color: var(--text-1); }

/* ── Keyboard Shortcuts ──────────────────────────────────────────── */
.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 2px 7px;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Recurring task badge (already used, add missing ones) ─────────── */
.todo-recurring-badge {
  font-size: 10px;
  color: var(--accent-teal);
  background: rgba(46,196,182,0.1);
  padding: 1px 5px;
  border-radius: var(--r-1);
}

/* ── Capture actions (per-item quick convert) ────────────────────── */
.capture-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.ov-capture-item:hover .capture-actions,
.overview-capture-item:hover .capture-actions { opacity: 1; }

.capture-action-btn {
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  color: var(--text-3);
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.capture-action-btn:hover {
  background: var(--surface-4);
  color: var(--text-1);
  border-color: var(--border-2);
}

.capture-action-btn.to-task:hover  { color: var(--accent); border-color: rgba(84,104,232,0.3); }
.capture-action-btn.to-note:hover  { color: var(--accent-warm); border-color: rgba(232,162,59,0.3); }
.capture-action-btn.archive-cap:hover { color: var(--accent-green); }

/* Daily plan line */
.daily-plan-line {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.7;
  padding: 2px 0;
}

/* Week plan pre */
.week-plan-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-2);
  white-space: pre-wrap;
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════
   SESSION 2 FEATURES
   ════════════════════════════════════════════════════════════════ */

/* ── Year in Pixels ──────────────────────────────────────────────── */
.pixels-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--r-2);
  padding: 3px;
}

.pixels-tab {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-1);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.pixels-tab.active {
  background: var(--surface-4);
  color: var(--text-1);
}

.pixels-tab:not(.active):hover { color: var(--text-2); }

.pixels-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--text-3);
  flex-wrap: wrap;
}

.pixels-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pixels-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.pixels-grid {
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}

.pixels-grid-inner {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  gap: 3px;
  width: max-content;
}

.pixels-month-labels {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
  width: max-content;
  margin-bottom: 4px;
}

.pixel-month-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  height: 13px;
  display: flex;
  align-items: center;
  min-width: 13px;
  white-space: nowrap;
}

.pixel {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  cursor: default;
  transition: opacity var(--t-fast), transform var(--t-fast);
  background: var(--surface-3);
}

.pixel:hover { opacity: 0.75; transform: scale(1.2); cursor: pointer; }
.pixel.future { opacity: 0.2; cursor: default; }

.pixels-tooltip {
  position: fixed;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-1);
  pointer-events: none;
  z-index: 400;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
}

.pixels-tooltip.hidden { display: none; }

.pixels-day-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: 6px;
  flex-shrink: 0;
}

.pixel-day-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  height: 13px;
  display: flex;
  align-items: center;
  width: 16px;
}

.pixels-grid-wrap {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
}

/* ── Body Metrics ────────────────────────────────────────────────── */
.body-metric-input-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

.body-metric-input-row input {
  flex: 1;
  min-width: 100px;
}

.body-fat-guide {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.body-fat-guide.hidden { display: none; }

.body-fat-guide ul {
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-4);
}

.body-fat-guide li {
  margin-bottom: 3px;
}

.body-fat-guide p { margin-bottom: var(--sp-2); }

#body-metrics-chart {
  margin-top: var(--sp-4);
  overflow-x: auto;
}

#body-metrics-list {
  margin-top: var(--sp-3);
  max-height: 200px;
  overflow-y: auto;
}

.body-metric-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-0);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.body-metric-row:last-child { border-bottom: none; }

.body-metric-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  min-width: 90px;
}

.body-metric-values {
  display: flex;
  gap: var(--sp-3);
  flex: 1;
}

.body-metric-delete {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.body-metric-row:hover .body-metric-delete { opacity: 1; }
.body-metric-delete:hover { color: var(--accent-red); }

/* ── Sleep vs Productivity ───────────────────────────────────────── */
#sleep-prod-chart-wrap {
  margin-top: var(--sp-3);
  overflow-x: auto;
}

#sleep-prod-chart-wrap.hidden { display: none; }

.sleep-prod-svg {
  max-width: 100%;
}

.scatter-point {
  cursor: pointer;
  transition: r 0.1s, opacity 0.1s;
}

.scatter-point:hover { opacity: 0.7; }

/* ── Reflection Prompts ──────────────────────────────────────────── */
.reflection-prompt-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.reflection-prompt-card:hover {
  background: var(--surface-2);
  border-color: rgba(84,104,232,0.25);
}

.reflection-prompt-card:last-child { margin-bottom: 0; }

.reflection-prompt-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.reflection-prompt-text {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}

/* ── Linked Notes ────────────────────────────────────────────────── */
.note-link {
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dashed rgba(84,104,232,0.4);
  transition: color var(--t-fast);
}

.note-link:hover { color: var(--accent); opacity: 0.7; }

.notes-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  padding: 2px 8px 2px 6px;
  border-radius: 10px;
  margin-bottom: var(--sp-2);
  cursor: pointer;
}

.notes-filter-badge:hover { opacity: 0.8; }

/* ── Export Buttons ──────────────────────────────────────────────── */
.export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.export-btn {
  font-size: var(--text-xs) !important;
  padding: 6px 12px !important;
}

/* ── Login Screen ──────────────────────────────────────────────────────────── */

#login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-void);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

#login-screen.hidden {
  display: none;
}

#login-box {
  width: 100%;
  max-width: 360px;
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.login-mark {
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}

.login-title {
  font-family: 'Instrument Serif', serif;
  font-size: var(--text-xl);
  color: var(--text-1);
  letter-spacing: -.02em;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.login-field label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.login-field input {
  height: 44px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-1);
  font-family: inherit;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
  outline: none;
}

.login-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-field input::placeholder {
  color: var(--text-4);
}

.login-error {
  font-size: var(--text-xs);
  color: #f87171;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.2);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.login-btn {
  width: 100%;
  height: 44px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  margin-top: var(--sp-1);
}

.login-btn:hover {
  opacity: .88;
}

.login-btn:active {
  transform: scale(.98);
}

.login-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.login-hint {
  font-size: 11px;
  color: var(--text-4);
  text-align: center;
  margin-top: var(--sp-4);
  line-height: 1.5;
}