/* ============================================================
   LIFEHUB — Global Design System
   Inspired by Tesla / SpaceX: dark, precise, breathing room
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:          #0c0c0c;
  --bg-1:        #141414;
  --bg-2:        #1a1a1a;
  --bg-3:        #252525;

  /* Borders */
  --border:      #333;
  --border-dim:  #262626;
  --border-hover: #444;
  --border-focus: #555;

  /* Text */
  --text:        #f0f0f0;
  --text-dim:    #b0b0b0;
  --text-dimmer: #888;
  --white:       #fff;

  /* Accent (primary action color — warm orange) */
  --accent:      #f0a870;
  --accent-dim:  rgba(240,168,112,0.12);
  --accent-glow: rgba(240,168,112,0.25);

  /* Success (green) */
  --success:     #7fcca4;
  --success-dim: rgba(127,204,164,0.12);
  --success-glow: rgba(127,204,164,0.25);

  /* Danger (red) */
  --danger:      #e68a8a;
  --danger-dim:  rgba(230,138,138,0.12);
  --danger-bright: #ff6b6b;

  /* Category colors — pastel palette */
  --cat-appointment: #7fb8e6;
  --cat-work:        #f0a870;
  --cat-personal:    #7fcca4;
  --cat-kids:        #b89cdb;
  --cat-school:      #7ac4d6;
  --cat-chore:       #a0a8b4;
  --cat-urgent:      #e68a8a;
  --cat-birthday:    #e0a0c0;
  --cat-holiday:     #e6ca7a;

  /* Semantic */
  --gold:        #e6ca7a;
  --blue:        #7fb8e6;
  --teal:        #7ac4d6;
  --purple:      #b89cdb;
  --pink:        #e0a0c0;
  --slate:       #a0a8b4;

  /* Overlay */
  --overlay-light: rgba(255,255,255,0.06);
  --overlay-hover: rgba(255,255,255,0.08);
  --overlay-dark:  rgba(0,0,0,0.5);

  /* Granular overlays (theme-switchable) */
  --overlay-02: rgba(255,255,255,0.02);
  --overlay-03: rgba(255,255,255,0.03);
  --overlay-04: rgba(255,255,255,0.04);
  --overlay-06: rgba(255,255,255,0.06);
  --overlay-08: rgba(255,255,255,0.08);
  --overlay-10: rgba(255,255,255,0.1);
  --overlay-15: rgba(255,255,255,0.15);

  color-scheme: dark;

  /* Typography & Layout */
  --font:        'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:        'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
  --radius:      6px;
  --radius-lg:   12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent horizontal scroll on iOS */
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 56px;
}

/* Native date/time pickers — force dark color scheme so the
   browser renders the calendar/clock popover in dark mode */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
  cursor: pointer;
}

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
  background: color-mix(in srgb, var(--bg-1) 95%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--text);
}

.logo-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-left: 12px;
}
.logo-splat {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin: 0 -0.5px;
  display: inline-block;
  filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.4));
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topnav-center {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ── FILTER BAR ─────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  position: relative;
}

.filter-toggle-btn {
  background: var(--overlay-06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-toggle-btn:hover,
.filter-toggle-btn.filter-open {
  background: var(--overlay-10);
  color: var(--text);
}
.filter-toggle-btn.filter-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── Filter Dropdown ── */
.filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 500;
  overflow: hidden;
}

.filter-dropdown-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bg-3);
}

.filter-dropdown-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.filter-mode-toggle {
  display: flex;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.filter-mode-opt {
  flex: 1;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-dimmer);
  transition: all 0.15s;
}
.filter-mode-opt:hover { color: var(--text-dim); }
.filter-mode-opt.active {
  background: var(--overlay-10);
  color: var(--text);
}

.filter-dropdown-body {
  padding: 10px 14px;
  max-height: 340px;
  overflow-y: auto;
}
.filter-dropdown-body::-webkit-scrollbar { width: 4px; }
.filter-dropdown-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.filter-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  margin-bottom: 6px;
}

.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  margin-bottom: 2px;
}
.filter-checkbox-row:hover { background: rgba(255,255,255,0.05); }
.filter-checkbox-row.filter-checked { background: var(--overlay-04); }

.filter-checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.filter-checkbox-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.filter-checked .filter-checkbox-label { color: var(--text); }

.filter-dropdown-footer {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--bg-3);
}

.filter-clear-btn {
  background: none;
  border: 1px solid rgba(230,138,138,0.3);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.filter-clear-btn:hover { background: var(--danger-dim); }



.import-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-right: 8px;
}
.import-btn:hover { color: var(--text); border-color: var(--border-hover); }

.undo-redo-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
  padding: 0 10px;
}
.undo-redo-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-focus); background: var(--bg-3); }
.undo-redo-btn:disabled { opacity: 0.25; cursor: default; }
.undo-redo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Desktop calendar hover popover */
.cal-hover-popover {
  position: fixed;
  z-index: 9000;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--overlay-06) inset;
  overflow-y: auto;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.cal-hover-popover.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.chp-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-dim);
}
.chp-date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.chp-date.chp-today {
  color: var(--danger-bright);
}
.chp-weather {
  font-size: 11px;
  color: var(--text-dimmer);
  margin-top: 3px;
}
.chp-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-dimmer);
  font-style: italic;
}
.chp-events {
  padding: 8px 0;
}
.chp-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.chp-event:hover { background: var(--bg-3); }
.chp-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.chp-event-body { min-width: 0; }
.chp-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chp-event-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dimmer);
  margin-top: 1px;
  font-family: var(--mono);
}
.chp-add-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chp-add-btn:hover {
  color: var(--text);
  border-color: var(--border-focus);
  border-style: solid;
  background: var(--bg-3);
}

/* Calendar cell bloom — expands in place on hover loiter */
.grid-day {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s;
}
.grid-day.grid-day-bloomed {
  transform: scale(2.1) !important;
  z-index: 500 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible !important;
}
.grid-day.grid-day-bloomed .grid-events-list {
  overflow: visible;
  max-height: none;
}
/* Don't counter-scale content in bloom — let it grow with the cell */
.grid-day.grid-day-bloomed .grid-day-header,
.grid-day.grid-day-bloomed .grid-events-list {
  transform: none !important;
}

/* Reminder UI */
.reminder-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-height: 120px; overflow-y: auto; }
.reminder-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-3);
  font-size: 12px;
  color: var(--text-dim);
}
.reminder-chip .reminder-text { flex: 1; }
.reminder-chip .reminder-remove {
  background: none; border: none; color: var(--text-dimmer);
  cursor: pointer; font-size: 14px; padding: 0 2px;
  transition: color 0.15s;
}
.reminder-chip .reminder-remove:hover { color: var(--danger); }
.reminder-add-row { display: flex; gap: 8px; }

/* Bell icon on events/tasks with active reminders */
.reminder-bell {
  font-size: 11px;
  margin-left: 4px;
  filter: saturate(2);
  flex-shrink: 0;
}

/* Active reminders panel */
.reminders-panel {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
}
.reminder-active-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13px;
}
.reminder-active-item:last-child { border-bottom: none; }
.reminder-active-item .reminder-icon { font-size: 16px; }
.reminder-active-item .reminder-info { flex: 1; }
.reminder-active-item .reminder-target { font-weight: 600; color: var(--text); }
.reminder-active-item .reminder-when { font-size: 11px; font-weight: 500; color: var(--text-dimmer); }
.reminder-active-item .reminder-dismiss {
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; padding: 4px 10px;
  border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s;
}
.reminder-active-item .reminder-dismiss:hover { color: var(--text); border-color: var(--border-focus); }

/* Reminder toast notification */
.reminder-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 20000;
  background: var(--bg-1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--overlay-06) inset;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reminder-toast.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reminder-toast.dismissing {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}
.reminder-toast-icon { font-size: 24px; flex-shrink: 0; }
.reminder-toast-body { flex: 1; cursor: pointer; }
.reminder-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.reminder-toast-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dimmer);
  margin-top: 2px;
}
.reminder-toast-dismiss {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.reminder-toast-dismiss:hover { color: var(--text); }

/* Loupe countdown ring */
.loupe-timer-ring {
  position: absolute;
  bottom: 6px;
  left: 6px;
  pointer-events: none;
  z-index: 10001;
  opacity: 0.85;
}
.loupe-ring-track {
  fill: none;
  stroke: var(--overlay-15);
  stroke-width: 2.5;
}
.loupe-ring-fill {
  fill: none;
  stroke: rgba(255,255,255,0.8);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 69.1;
  stroke-dashoffset: 0;
  transform-origin: 14px 14px;
  transform: rotate(-90deg);
  animation: loupe-countdown 3s linear forwards;
}
@keyframes loupe-countdown {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 69.1; }
}

/* Mobile time magnifier — floating bubble showing time during touch */
.time-magnifier {
  position: fixed;
  z-index: 10000;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 100px;
  opacity: 0;
  transform: scale(0.8) translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  white-space: nowrap;
}
.time-magnifier.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.strip-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-dim);
}

.import-export-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.import-export-btn:hover { color: var(--text); border-color: var(--border-hover); }
.import-export-icon { font-size: 14px; }

/* Routine section at bottom of Add Event chooser */
.chooser-routine-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}
.chooser-routine-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 24px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chooser-routine-btn:hover { color: var(--text); border-color: var(--border-focus); background: var(--bg-3); }
.chooser-routine-icon { font-size: 16px; }
.chooser-routine-desc {
  font-size: 11px;
  color: var(--text-dimmer);
  margin: 6px 0 0;
  letter-spacing: 0.3px;
}
.ie-btn { width: 100%; text-align: left; }

.add-btn {
  background: var(--text);
  color: var(--bg);
  border: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 9px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.add-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.strip-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.day-strip-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-dim);
}

.today-badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

/* ============================================================
   DAILY STATS BAR
   ============================================================ */
/* ── AI Natural Language Input ───────────────────────────────── */
.ai-input-section {
  margin-bottom: 24px;
}

.ai-input-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-input-bar:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--overlay-03);
}

.ai-input-icon {
  font-size: 16px;
  color: var(--text-dimmer);
  flex-shrink: 0;
  user-select: none;
}

.ai-input-field {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  min-width: 0;
}
.ai-input-field::placeholder {
  color: var(--text-dimmer);
  font-style: italic;
  font-size: 14px;
}

.ai-input-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 8px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ai-input-btn:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-focus); }
.ai-input-btn:disabled { opacity: 0.4; cursor: default; }
.ai-input-btn.loading { opacity: 0.6; cursor: default; }

.ai-status {
  font-size: 12px;
  color: var(--text-dimmer);
  padding: 6px 4px 0;
  min-height: 18px;
  font-style: italic;
}
.ai-status.error { color: var(--danger); font-style: normal; }

/* ── AI Answer Panel ─────────────────────────────────────────── */
.ai-answer-panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.ai-answer-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
}
.ai-answer-text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ── AI Review Panel ─────────────────────────────────────────── */
.ai-review-panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
}

.ai-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
}
.ai-review-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  flex: 1;
}
.ai-review-source {
  font-size: 11px;
  color: var(--text-dimmer);
  letter-spacing: 0.5px;
  font-family: var(--mono);
}
.ai-review-dismiss {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.ai-review-dismiss:hover { color: var(--text); }

.ai-review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ai-review-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.1s;
}
.ai-review-item:last-child { border-bottom: none; }
.ai-review-item.removed { opacity: 0.35; }

.ai-review-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.ai-review-info { min-width: 0; }
.ai-review-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.ai-review-event-meta {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-review-event-meta span {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  letter-spacing: 0.3px;
}
.ai-review-event-notes {
  font-size: 12px;
  color: var(--text-dimmer);
  margin-top: 3px;
  font-style: italic;
}
.ai-review-remove {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-review-remove:hover { color: var(--danger); }

.ai-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-dim);
  background: var(--bg-1);
}

/* ── Stats bar ─────────────────────────────────────────────── */
.daily-stats-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 32px;
}

.stats-bar-date {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--text);
}

.stats-bar-chips {
  display: flex;
  gap: 16px;
  flex: 1;
}

.stats-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}
.stats-chip strong {
  color: var(--text);
  font-weight: 700;
  margin-right: 3px;
}

.stats-next-event {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 5px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stats-next-event .next-label {
  color: var(--text-dimmer);
  margin-right: 6px;
}
.stats-next-event .next-countdown {
  color: var(--cat-appointment);
  font-family: var(--mono);
}

/* ============================================================
   DAY STRIP — 7 horizontal tiles
   ============================================================ */
.day-strip {
  margin-bottom: 56px;
}

.day-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.day-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.2s, box-shadow 0.2s;
  cursor: default;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  will-change: transform;
  transform-origin: center center;
}
.day-tile:hover { border-color: var(--border-hover); }
.day-tile.dock-magnified {
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border-color: var(--border-focus);
}
.day-tile.today { border-color: var(--border-focus); background: var(--bg-2); }
.day-tile.today .day-tile-header { background: var(--bg-3); }

.day-tile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.day-tile-dow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  width: 36px;
}

.day-tile-date {
  font-size: 30px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  width: 44px;
}

.day-tile-date.today-num {
  color: var(--white);
  font-weight: 600;
}

.day-tile-month {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-dim);
  width: 42px;
}

.day-tile-summary {
  flex: 1;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.day-tile-summary:empty { flex: 0; }

.day-tile-count {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  font-weight: 600;
}

.day-tile-zoom {
  background: var(--bg-3);
  border: 1px solid var(--border-hover);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-left: 8px;
}
.day-tile-zoom:hover { color: var(--white); border-color: var(--text-dimmer); background: var(--border); }
.day-tile-zoom.expanded { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* Timeline track */
.day-tile-track {
  position: relative;
  margin: 12px 24px 18px;
}

/* Hour tick marks */
/* pointer-events set to 'auto' in JS after build so the axis acts as a click-to-add strip */
.track-axis {
  position: absolute;
  left: 0;
  right: 0;
  /* top and height set by JS */
}
.track-axis .track-hour,
.track-axis .track-hour-label,
.track-axis .track-noon {
  pointer-events: none;
}

.track-hour {
  position: absolute;
  bottom: 0;
  height: 6px;
  width: 1px;
  background: var(--border);
}

.track-hour-label {
  position: absolute;
  bottom: 2px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  transform: translateX(-50%);
  font-family: var(--mono);
}

.track-noon {
  position: absolute;
  bottom: 0;
  height: 10px;
  width: 1px;
  background: var(--border);
}

/* Event blocks on timeline */
.track-event {
  /* position, top, left, width, height, background, z-index set by JS inline */
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 6px;
  min-width: 4px;
  transition: opacity 0.15s, transform 0.15s;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: -1px 0 0 var(--bg-2), 1px 0 0 var(--bg-2);
  /* Prevent iOS long-press callout / text selection interfering with drag */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


.track-event:hover {
  opacity: 0.85;
  transform: scaleY(1.05);
}

.track-event-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(0,0,0,0.88);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── PTO overlay: precise hatch drawn only over the intersecting portion ── */
.track-event-pto-overlay {
  position: absolute;
  border-radius: 3px;
  z-index: 3; /* above event blocks (z-index:2) */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 5px;
  /* diagonal hatch */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 3px,
    rgba(240,200,120,0.55) 3px,
    rgba(240,200,120,0.55) 7px
  );
  box-shadow: inset 0 0 0 1px rgba(240,200,120,0.5);
}
.track-event-pto-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(0,0,0,0.6);
  white-space: nowrap;
  user-select: none;
}

/* Mobile date badge — hidden on desktop */
.day-date-badge { display: none; }

/* All-day events — label on left, segments fill the rest */
.day-tile-allday {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 30px; /* fixed height — same on all tiles */
}

/* "ALL DAY" label — left-aligned, beside the segments */
.allday-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-dimmer);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.allday-arrow {
  font-size: 11px;
  opacity: 0.4;
  line-height: 1;
}

/* Container that holds the colored segments side by side */
/* Marquee clip zone — sits between the label and the right edge, hides overflow */
.allday-marquee-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 3px;
}

/* Scrolling inner row — fills track normally, sized to content when marquee */
.allday-segments {
  display: flex;
  flex-direction: row;
  gap: 3px;
  width: 100%;
  height: 30px;
  border-radius: 3px;
}
.allday-segments.marquee-active {
  width: auto;
  flex-shrink: 0;
  border-radius: 0;
  height: 30px;
}
/* Text-only marquee — single event with cropped title */
.allday-segment-text.text-marquee-active {
  overflow: hidden;
  display: flex;
  gap: 32px; /* breathing room between loops */
}
.allday-text-marquee {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  animation: text-marquee var(--text-marquee-duration, 5s) linear infinite;
}
.allday-segment-text.text-marquee-active:hover .allday-text-marquee {
  animation-play-state: paused;
}
@keyframes text-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--text-marquee-width, 100px))); }
}

/* Animation applied only in marquee mode */
.allday-segments.marquee-active {
  animation: allday-marquee var(--marquee-duration, 6s) linear infinite;
}
.allday-segments.marquee-active:hover {
  animation-play-state: paused;
}
@keyframes allday-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Each segment: angled interior edges, straight outer edges via clip-path */
.allday-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.15s, filter 0.15s;
  /* Middle segments: angled on both left and right (6px offset) */
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.allday-segment:hover { opacity: 0.82; filter: brightness(1.08); }

/* First segment: vertical left edge, angled right edge only */
.allday-segment:first-child {
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

/* Last segment: angled left edge, vertical right edge only */
.allday-segment:last-child {
  clip-path: polygon(6px 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Single segment: both edges vertical, slight rounding */
.allday-segment:only-child {
  clip-path: none;
  border-radius: 2px;
}

.allday-segment-text {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(0,0,0,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 10px;
  line-height: 1;
}

/* ============================================================
   CALENDAR GRID (rolling + monthly)
   ============================================================ */
.month-grid-section { margin-top: 0; overflow: visible; }

/* ── View mode toggle (ROLLING / MONTHLY) ── */
.cal-view-toggle {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 3px;
  gap: 3px;
}
.cal-view-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cal-view-btn:hover { color: var(--text); background: var(--overlay-04); }
.cal-view-btn.active {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ── Monthly navigation bar ── */
.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav-arrow {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cal-nav-arrow:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-2);
}
.cal-today-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cal-today-btn:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-2);
}
.cal-month-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  min-width: 150px;
  text-align: center;
}

/* ── Category density dots ── */
.cal-month-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.cal-month-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
}
.cal-month-dot:hover { opacity: 1; transform: scale(1.4); }

/* ── Grid headers / grid — rolling uses 7 cols, monthly uses 8 (week# + 7 days) ── */
.month-grid-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.month-grid-headers.with-week-nums {
  grid-template-columns: 28px repeat(7, 1fr);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 6px;
  overflow: visible;
}
.month-grid.with-week-nums {
  grid-template-columns: 28px repeat(7, 1fr);
}

/* Week number cells */
.grid-week-num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-dimmer);
  letter-spacing: 0.5px;
  opacity: 0.7;
  user-select: none;
}
.grid-week-num-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dimmer);
  text-align: center;
  padding: 8px 0 4px;
  opacity: 0.6;
}

/* Outside-month day cells (monthly view) */
.grid-day.outside-month {
  opacity: 0.2;
  pointer-events: none;
}

.grid-dow-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 0 6px;
}

.grid-day {
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-height: 120px;
  min-width: 0;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.15s, background 0.15s, box-shadow 0.15s,
              z-index 0s;
  position: relative;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-origin: center center;
}
.grid-day:hover { border-color: var(--border); background: var(--bg-2); }
.grid-day.dock-magnified {
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.grid-day.today-cell {
  border-color: var(--border-hover);
  background: var(--bg-2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.grid-day.past-cell { opacity: 0.4; }

.grid-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.grid-day-num {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1;
}
.grid-day-num.today-label {
  color: var(--text);
  font-weight: 800;
  background: var(--text);
  color: var(--bg);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.grid-day-count {
  font-size: 10px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}

.grid-events-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.grid-event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
  min-height: 20px;
}
.grid-event-item:hover { background: rgba(255,255,255,0.05); }

.grid-event-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.grid-event-label {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.1s;
  line-height: 1.3;
}
.grid-event-item:hover .grid-event-label { color: var(--text); }

.grid-event-time {
  font-size: 10px;
  color: var(--text-dimmer);
  font-family: var(--mono);
  margin-left: auto;
  flex-shrink: 0;
}

.grid-overflow {
  font-size: 11px;
  color: var(--text-dimmer);
  letter-spacing: 0.5px;
  margin-top: 4px;
  padding-left: 6px;
}

/* Empty area at bottom of grid cell for tapping */
.grid-day-tap-area {
  flex: 1;
  min-height: 20px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.grid-day-tap-area:hover { background: var(--overlay-03); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 560px;
  max-width: 95vw;
  max-height: 85vh !important;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.modal .modal-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0 24px;
}

/* .modal-category-bar removed — color now on title text */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 14px;
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.modal-close:hover { color: var(--text); background: var(--overlay-08); }



.modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 0.15s;
}

.modal-meta {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.modal-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.modal-location {
  display: none;
  font-size: 14px;
  color: var(--text-dim);
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: var(--radius);
  margin-bottom: 12px;
  align-items: center;
  gap: 8px;
}
.modal-location.visible { display: flex; }
.modal-location-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.modal-location-text {
  flex: 1;
  line-height: 1.4;
}

.modal-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-dim);
}
.modal-action-danger {
  color: var(--danger) !important;
  border-color: rgba(230,138,138,0.3) !important;
}
.modal-action-danger:hover {
  background: var(--danger-dim) !important;
}

.modal-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.modal-actions-row:empty { display: none; margin: 0; }

.modal-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  text-decoration: none;
}
.modal-action-btn:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-3); }

.modal-notes {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  padding: 18px;
  background: var(--bg-2);
  border-radius: var(--radius);
  margin-bottom: 24px;
  min-height: 60px;
}

.modal-ai-section {
  border-top: 1px solid var(--border-dim);
  padding-top: 20px;
}

.modal-ai-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  margin-bottom: 10px;
}

.modal-ai-input-row {
  display: flex;
  gap: 8px;
}

.modal-ai-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.modal-ai-input:focus { border-color: var(--border-hover); }
.modal-ai-input::placeholder { color: var(--text-dimmer); }

.modal-ai-send {
  background: var(--text);
  color: var(--bg);
  border: none;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s;
}
.modal-ai-send:hover { opacity: 0.85; }

.modal-ai-response {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  min-height: 0;
}
.modal-ai-response:not(:empty) {
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--radius);
  border-left: 2px solid var(--border);
}

/* ============================================================
   EVENT ANIMATION EFFECTS
   ============================================================ */

/* SHIMMER — light sweep across the bar */
.fx-shimmer {
  position: relative;
  overflow: hidden;
}
.fx-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -60%; }
  100% { left: 160%; }
}

/* PULSE — breathing glow */
.fx-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 138, 138, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 12px 3px rgba(230, 138, 138, 0.4); filter: brightness(1.1); }
}

/* FIRE — flickering ember */
.fx-fire {
  position: relative;
  overflow: hidden;
  animation: fire-flicker 0.8s ease-in-out infinite alternate;
}
.fx-fire::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(0deg,
    rgba(255,80,0,0.3) 0%,
    rgba(255,160,0,0.15) 40%,
    transparent 100%);
  animation: fire-wave 1.5s ease-in-out infinite alternate;
  pointer-events: none;
}
.fx-fire::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(0deg,
    rgba(255,200,50,0.2) 0%,
    transparent 100%);
  animation: fire-wave 1s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes fire-flicker {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.08); }
}
@keyframes fire-wave {
  0% { transform: scaleY(0.9) translateY(2px); opacity: 0.7; }
  100% { transform: scaleY(1.1) translateY(-1px); opacity: 1; }
}

/* SPARKLE — twinkling particles via animated pseudo + box-shadow stars */
.fx-sparkle {
  position: relative;
  overflow: hidden;
}
.fx-sparkle::before {
  content: '✦';
  position: absolute;
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  animation: sparkle-drift-1 2.5s ease-in-out infinite;
  top: 2px; left: 20%;
  pointer-events: none;
}
.fx-sparkle::after {
  content: '✦';
  position: absolute;
  font-size: 6px;
  color: rgba(255,255,255,0.5);
  animation: sparkle-drift-2 3s ease-in-out infinite 0.8s;
  top: 4px; left: 60%;
  pointer-events: none;
}
@keyframes sparkle-drift-1 {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 1; transform: translateY(-4px) scale(1); }
  50% { opacity: 0.6; transform: translateY(-2px) scale(0.8); }
  80% { opacity: 1; transform: translateY(-6px) scale(1.1); }
}
@keyframes sparkle-drift-2 {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; transform: translateY(-5px) scale(1.2); }
  60% { opacity: 0.4; transform: translateY(-3px) scale(0.7); }
  90% { opacity: 0.9; transform: translateY(-7px) scale(1); }
}

/* WAVE — flowing gradient */
.fx-wave {
  position: relative;
  overflow: hidden;
}
.fx-wave::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 200%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.08) 75%,
    transparent 100%);
  animation: wave-flow 4s linear infinite;
  pointer-events: none;
}
@keyframes wave-flow {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* ELECTRIC — crackling edge glow */
.fx-electric {
  animation: electric-crackle 0.3s ease-in-out infinite alternate;
  position: relative;
}
.fx-electric::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.3);
  animation: electric-border 1.5s steps(3) infinite;
  pointer-events: none;
}
@keyframes electric-crackle {
  0% { box-shadow: 0 0 4px 0 rgba(200,200,255,0.2); }
  100% { box-shadow: 0 0 8px 2px rgba(200,200,255,0.35); }
}
@keyframes electric-border {
  0%, 100% { opacity: 0.3; }
  33% { opacity: 0.8; }
  66% { opacity: 0.1; }
}

/* RAINBOW — animated gradient border for milestones */
.fx-rainbow {
  position: relative;
  overflow: hidden;
}
.fx-rainbow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #e68a8a, #e6ca7a, #ffffff, #7fb8e6, #b89cdb, #e0a0c0, #e68a8a);
  background-size: 300% 100%;
  animation: rainbow-shift 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Sunrise/Sunset markers on timeline */
.track-sun-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.track-sun-marker-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  opacity: 0.25;
}

.track-sun-marker-icon {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}

.track-sun-gradient-dawn {
  position: absolute;
  bottom: 18px;
  height: calc(100% - 18px);
  pointer-events: none;
  z-index: 0;
  border-radius: 3px;
}

.track-sun-gradient-dusk {
  position: absolute;
  bottom: 18px;
  height: calc(100% - 18px);
  pointer-events: none;
  z-index: 0;
  border-radius: 3px;
}

/* Celestial info in insights footer — monocolor */
.day-tile-insights .insight-sun,
.day-tile-insights .insight-moon,
.day-tile-insights .insight-season {
  color: var(--text-dim);
}

/* NOW badge */
.now-badge {
  position: absolute;
  top: 0; /* flush with line top — no line peeking above badge */
  transform: translateX(-50%);
  background: var(--danger-bright);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 101;
  pointer-events: none;
  white-space: nowrap;
}

/* Clickable strip overlaid on the hour-label axis — always triggers "add event" */
.track-axis-strip {
  transition: background 0.15s;
}
.track-axis-strip:hover {
  background: rgba(255,255,255,0.05);
}

/* Hover zone for empty timeline areas */
.track-hover-zone {
  position: absolute;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 1;
}
.track-hover-zone:hover {
  background: var(--overlay-04);
}

/* Right-click context menu */
.context-menu {
  position: fixed;
  z-index: 2000;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: none;
  /* transform-origin set by JS to spawn point */
}
.context-menu.open {
  display: block;
  animation: popover-bloom 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.context-menu.closing {
  animation: popover-shrink 0.12s ease-in both;
}

.context-menu-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding: 10px 18px 8px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.context-menu-item:hover {
  background: var(--bg-3);
}

.context-menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.context-menu-label {
  flex: 1;
}

.context-menu-shortcut {
  font-size: 11px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 4px 0;
}

/* Add event modal */
/* -- Custom Date/Time Widget --------------------------- */
.dt-section { padding-bottom: 4px; }

/* Top row: date chip + all-day */
.dt-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dt-date-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex: 1;
}
.dt-date-chip:hover { border-color: var(--border-focus); background: var(--bg-3); }
.dt-date-chip-dow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  min-width: 3ch;
}
.dt-date-chip-main {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.3px;
}

.dt-allday-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dt-allday-toggle {
  position: relative;
  width: 40px;
  height: 24px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.dt-allday-toggle.dt-allday-on {
  background: var(--success-glow);
  border-color: var(--success);
}
.dt-allday-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: var(--text-dimmer);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.dt-allday-on .dt-allday-knob { transform: translateX(18px); background: var(--success); }
.dt-allday-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Mini calendar popup */
.dt-cal-popup {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  animation: dtCalIn 0.15s ease;
}
@keyframes dtCalIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dt-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dt-cal-month-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.dt-cal-nav {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: color 0.1s, background 0.1s;
  line-height: 1;
}
.dt-cal-nav:hover { color: var(--text); background: rgba(255,255,255,0.07); }

.dt-cal-month-label {
  cursor: pointer;
  border: none;
  background: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dt-cal-month-label:hover { background: rgba(255,255,255,0.07); }

/* Year/month picker */
.dt-cal-year-strip {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Month grid — 4 columns */
.dt-cal-month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.dt-cal-month-btn {
  padding: 9px 4px;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-align: center;
}
.dt-cal-month-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.dt-cal-month-btn.dt-cal-month-sel {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 700;
}

/* Year drum — vertical scroll */
.dt-cal-year-drum-wrap {
  height: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-dim);
  padding-top: 4px;
  position: relative;
  /* Fade top/bottom edges */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
.dt-cal-year-drum-wrap::-webkit-scrollbar { display: none; }
.dt-cal-year-drum-track {
  display: flex;
  flex-direction: column;
}
.dt-cal-year-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dimmer);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s, color 0.15s;
  flex-shrink: 0;
  user-select: none;
}
.dt-cal-year-item:hover { background: var(--overlay-06); color: var(--text-dim); }
.dt-cal-year-item.dt-cal-year-sel {
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  background: var(--accent-dim);
}
.dt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dt-cal-dh {
  text-align: center;
  font-size: 10px;  /* exception: mini calendar day headers, tight space */
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dimmer);
  padding: 4px 0;
}
.dt-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.1s, color 0.1s;
}
.dt-cal-day:hover { background: var(--overlay-08); color: var(--text); }
.dt-cal-today { color: var(--text); font-weight: 700; }
.dt-cal-today::after {
  content: '';
  display: block;
  width: 4px; height: 4px;
  background: var(--success);
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
}
.dt-cal-today { position: relative; }
.dt-cal-sel {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  font-weight: 700;
  border: 1px solid rgba(240,168,112,0.4);
}
.dt-cal-blank { cursor: default; }

/* Time pickers */
/* Time drum pickers */
.dt-time-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.dt-drum-group {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dt-drum-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
}
.dt-drums {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dt-drum {
  position: relative;
  width: 48px;
  height: 114px;  /* 3 items visible */
  overflow: hidden;
  cursor: ns-resize;
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
}
.dt-drum-ampm { width: 42px; }
.dt-drum-track {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}
.dt-drum-item {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  font-family: var(--mono);
  color: var(--text-dimmer);
  transition: color 0.15s, font-size 0.15s, opacity 0.15s;
  opacity: 0.35;
}
.dt-drum-ampm .dt-drum-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--font);
}
.dt-drum-item.dt-drum-selected {
  color: var(--text);
  font-size: 26px;
  font-weight: 400;
  opacity: 1;
}
.dt-drum-ampm .dt-drum-item.dt-drum-selected {
  font-size: 14px;
  font-weight: 800;
}
/* Fade mask: top and bottom edges fade out */
.dt-drum-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg-2) 0%,
    transparent 30%,
    transparent 70%,
    var(--bg-2) 100%
  );
}
/* Center highlight band */
.dt-drum::after {
  content: '';
  position: absolute;
  top: 38px;
  left: 2px;
  right: 2px;
  height: 38px;
  border-radius: 6px;
  background: var(--overlay-04);
  border-top: 1px solid var(--overlay-08);
  border-bottom: 1px solid var(--overlay-08);
  pointer-events: none;
}
.dt-drum-colon {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-dimmer);
  margin: 0 -1px;
  padding-top: 0;
}
.dt-duration-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dimmer);
  align-self: center;
  padding: 4px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}


.add-modal-time {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Category selector (edit mode) */
.category-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.category-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.category-chip:hover { border-color: var(--border-focus); }
.category-chip.selected {
  border-color: var(--chip-color, var(--text-dimmer));
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.category-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.allday-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  user-select: none;
  margin-left: 4px;
}
.allday-toggle-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #ffffff;
  cursor: pointer;
}

.add-modal-time label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.add-modal-time input[type="time"],
.add-modal-time input[type="date"] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  color-scheme: dark;
  cursor: pointer;
  min-width: 0;
}
.add-modal-time input[type="date"] { width: 150px; }
.add-modal-time input[type="time"] { width: 120px; }
.add-modal-time input[type="time"]:focus,
.add-modal-time input[type="date"]:focus { border-color: var(--border-focus); }

.add-modal-recurrence {
  margin-bottom: 16px;
}
.add-modal-recurrence > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.recurrence-options {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.recurrence-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  text-align: center;
}
.recurrence-btn:hover { border-color: var(--border-focus); color: var(--text); }
.recurrence-btn.selected { border-color: var(--text-dimmer); background: var(--bg-3); color: var(--text); box-shadow: 0 0 0 1px var(--border-focus); }

.recurrence-until {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recurrence-until label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dimmer);
}

.add-modal-field {
  margin-bottom: 16px;
  position: relative;
}

/* PTO override toggle */
.pto-override-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 2px;
}
.pto-override-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--danger);
  flex-shrink: 0;
  cursor: pointer;
}
.pto-override-label {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.4;
}
.pto-override-hint {
  display: block;
  font-size: 12px;
  color: var(--text-dimmer);
  margin-top: 2px;
}

.add-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.add-modal-field input[type="text"],
.add-modal-field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.15s;
}
.add-modal-field input:focus,
.add-modal-field textarea:focus { border-color: var(--border-focus); }
.add-modal-field textarea { resize: vertical; min-height: 60px; }
.add-modal-field input::placeholder,
.add-modal-field textarea::placeholder { color: var(--text-dimmer); font-size: 14px; }

/* ── Event modal polish ────────────────────────────────── */
/* Sections — grouped with subtle dividers */
.em-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-dim);
}
.em-section:last-of-type { border-bottom: none; margin-bottom: 8px; }

/* Unified select dropdown */
.em-select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
  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='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color-scheme: dark;
}
.em-select:focus { border-color: var(--border-focus); }
.em-select option { background: var(--bg-2); color: var(--text); }

/* ── Premium custom select ──────────────────── */
.cs-wrap {
  position: relative;
  width: 100%;
}
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
}
.cs-trigger:hover { border-color: var(--border-focus); background: var(--bg-3); }
.cs-trigger.cs-open {
  border-color: var(--border-focus);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-radius: 10px 10px 0 0;
}
.cs-trigger-arrow {
  font-size: 11px;
  color: var(--text-dimmer);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cs-open .cs-trigger-arrow { transform: rotate(180deg); }
.cs-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-trigger-text.cs-placeholder { color: var(--text-dim); }

.cs-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border-hover);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 400;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
  animation: csSlideIn 0.12s ease;
}
@keyframes csSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cs-dropdown::-webkit-scrollbar { width: 5px; }
.cs-dropdown::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }

.cs-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
  border-bottom: 1px solid var(--overlay-04);
}
.cs-option:last-child { border-bottom: none; }
.cs-option:hover {
  background: var(--overlay-06);
  color: var(--text);
}
.cs-option.cs-selected {
  color: var(--text);
  font-weight: 600;
  background: var(--accent-dim);
}
.cs-option.cs-selected::before {
  content: '✓ ';
  color: var(--accent);
  font-weight: 700;
}

/* Small inline inputs (origin year, until date) */
.em-input-sm {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  color-scheme: dark;
  width: 120px;
}
.em-input-sm:focus { border-color: var(--border-focus); }

/* Inline row */
.em-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Toggle labels (all-day, forever, radio) */
.em-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  user-select: none;
  white-space: nowrap;
}
.em-toggle input[type="checkbox"],
.em-toggle input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

/* Hint text */
.em-hint { font-size: 12px; color: var(--text-dimmer); font-style: italic; }
.em-subtext { font-size: 11px; color: var(--text-dimmer); margin-top: 4px; }

/* Edit scope radios */
.em-scope-row { margin-top: 12px; }
.em-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dimmer);
  display: block;
  margin-bottom: 8px;
}
.em-scope-options { display: flex; flex-direction: column; gap: 8px; }

/* Action bar — clean, separated */
.em-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px 16px;
  border-top: 1px solid var(--border-dim);
  background: var(--bg-1);
  flex-shrink: 0; /* never scroll — always visible at bottom */
}
.em-actions-right { display: flex; gap: 10px; margin-left: auto; }

.em-btn-save, .em-btn-cancel, .em-btn-delete {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.em-btn-save {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.em-btn-save:hover { opacity: 0.85; }
.em-btn-cancel {
  background: none;
  color: var(--text-dim);
  border-color: var(--border);
}
.em-btn-cancel:hover { color: var(--text); border-color: var(--border-focus); }
.em-btn-delete {
  background: none;
  color: var(--danger);
  border-color: rgba(230, 138, 138, 0.25);
}
.em-btn-delete:hover { border-color: var(--danger); background: var(--danger-dim); }

.location-tools-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Quick-fill buttons row — match input width */
.location-quick-btns {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.location-quick-btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 7px 6px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.location-quick-btn:hover { color: var(--text); border-color: var(--border-focus); background: var(--bg-3); }
.location-current-btn svg { flex-shrink: 0; }

/* Favorites dropdown */
.location-fav-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  z-index: 300;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}
.location-fav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bg-3);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.location-fav-item:last-child { border-bottom: none; }
.location-fav-item:hover { background: rgba(255,255,255,0.05); }
.location-fav-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.location-fav-addr {
  font-size: 12px;
  color: var(--text);
}
.location-fav-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-dimmer);
}

.location-tool-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}
.location-tool-btn:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-3); }
.location-tool-btn:disabled { opacity: 0.55; cursor: wait; }

.location-tool-status {
  font-size: 12px;
  color: var(--text-dimmer);
  min-height: 16px;
}
.location-tool-status.success { color: var(--success); }
.location-tool-status.error { color: var(--danger); }

/* Kid chips */
.kid-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.kid-chip:hover { border-color: var(--border-hover); }
.kid-chip.selected {
  border-color: var(--kid-color, var(--purple));
  background: rgba(184,156,219,0.1);
  color: var(--text);
}
.kid-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Kid profile row in manager */
.kid-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}
.kid-profile-row:last-child { border-bottom: none; }
.kid-profile-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kid-profile-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.kid-profile-actions {
  display: flex;
  gap: 8px;
}
.kid-profile-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.kid-profile-btn:hover { color: var(--text); border-color: var(--border-hover); }
.kid-profile-btn.delete { color: var(--danger); }
.kid-profile-btn.delete:hover { color: var(--danger-bright); border-color: var(--danger); }

/* ── Add Event Chooser ─────────────────────────────────────── */

/* Modal: wide on desktop, normal on mobile */
.chooser-modal {
  width: min(820px, 96vw) !important;
  max-width: 96vw !important;
  max-height: 88vh !important;
  overflow-y: hidden !important; /* scroll handled by .chooser-modal-content */
  display: flex;
  flex-direction: column;
}
.chooser-modal-content {
  padding: 20px 28px 24px !important;
  overflow-y: auto;
  flex: 1;
}

.chooser-outer {
  padding-bottom: 8px;
}

/* 2-column matrix on desktop */
.chooser-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* Each category cell */
.chooser-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Full-width manage section below matrix */
.chooser-manage-section { }
.chooser-manage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Manage items — slightly more compact */
.chooser-manage-row .chooser-item {
  padding: 9px 12px;
}

/* Subtle section divider */
.chooser-group-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 10px 0;
  opacity: 0.5;
}

/* Group label (WORK, HEALTH, etc.) */
.chooser-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding: 6px 4px 4px;
  user-select: none;
}

/* Group of items — flush, separated internally */
.chooser-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chooser-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 11px 14px;
  background: none;
  border: none;
  border-top: 1px solid transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  width: 100%;
}
.chooser-item + .chooser-item { border-top-color: var(--border-dim); }
.chooser-item:hover { background: var(--overlay-04); }
.chooser-item:active { background: var(--bg-3); }

.chooser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  margin-top: 1px;
}

/* Item name */
.chooser-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  grid-row: 1;
  grid-column: 2;
  line-height: 1.3;
}

/* Description on second row, indented under name */
.chooser-desc {
  font-size: 11px;
  color: var(--text-dimmer);
  grid-row: 2;
  grid-column: 2;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chooser-special .chooser-name { color: var(--text-dim); }
.chooser-special .chooser-desc { color: var(--text-dimmer); }

/* Legacy divider */
.chooser-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 10px 0;
  opacity: 0.5;
}

/* ── Mobile: collapse to single column ── */
@media (max-width: 640px) {
  .chooser-modal { width: 96vw; }
  .chooser-matrix { grid-template-columns: 1fr; gap: 0; }
  .chooser-cell + .chooser-cell { margin-top: 10px; }
  .chooser-manage-row { grid-template-columns: 1fr; }
  .chooser-item { grid-template-columns: 12px 1fr auto; grid-template-rows: auto; }
  .chooser-desc {
    grid-row: 1; grid-column: 3;
    align-self: center;
    text-align: right;
    max-width: 120px;
  }
}

/* Work schedule builder */
.work-day-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-dim);
}
.work-day-row:last-child { border-bottom: none; }

.work-day-toggle {
  width: 16px;
  height: 16px;
  accent-color: var(--cat-work);
  cursor: pointer;
}

.work-day-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  width: 44px;
  color: var(--text);
}
.work-day-label.off { color: var(--text-dimmer); text-decoration: line-through; }

.work-time-input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
  color-scheme: dark;
  cursor: pointer;
}
.work-time-input:focus { border-color: var(--border-hover); }
.work-time-input:disabled { opacity: 0.3; }

.work-overnight-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--cat-work);
  border: 1px solid var(--cat-work);
  border-radius: 2px;
  padding: 1px 5px;
  opacity: 0.7;
}

.work-day-hours {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-left: auto;
}

/* Birthday picker contact list */
.bday-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
}
.bday-contact-row:hover { background: var(--bg-2); }
.bday-contact-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
  cursor: pointer;
}
.bday-contact-name {
  font-size: 15px;
  color: var(--text);
  flex: 1;
}
.bday-contact-date {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.bday-contact-age {
  font-size: 12px;
  color: var(--text-dimmer);
  width: 70px;
  text-align: right;
}

.effect-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.effect-option {
  width: 42px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text-dim);
}
.effect-option:hover { border-color: var(--border-hover); background: var(--bg-3); }
.effect-option.selected { border-color: var(--text-dimmer); background: var(--bg-3); box-shadow: 0 0 0 1px var(--border-focus); }

.add-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

.add-modal-actions button {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.add-modal-actions .btn-cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.add-modal-actions .btn-cancel:hover { border-color: var(--border-hover); color: var(--text); }
.add-modal-actions .btn-save {
  background: var(--text);
  color: var(--bg);
}
.add-modal-actions .btn-save:hover { opacity: 0.85; }

/* Sun arc */
.track-sun-arc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 16px;
  pointer-events: none;
  z-index: 0;
}

.track-sun-arc canvas {
  width: 100%;
  height: 100%;
}

/* Sun toggle in nav */
.sun-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 16px;
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-right: 12px;
  line-height: 1;
}
.sun-toggle:hover { color: var(--text-dim); border-color: var(--border-hover); }
.sun-toggle.active { color: var(--gold); border-color: var(--gold)40; background: var(--gold)0a; }

.day-tile-timerange {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-left: auto;
  padding-right: 4px;
}

/* Weather chart overlay (long-press reveal) */
.weather-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.weather-chart-overlay.visible {
  opacity: 1;
}
.weather-chart-overlay canvas {
  display: block;
}

/* Hide events/axis when chart is active */
.chart-active .track-event,
.chart-active .track-event-pto-overlay,
.chart-active .track-hover-zone,
.chart-active .track-sun-arc,
.chart-active .track-now-line {
  opacity: 0;
  transition: opacity 0.15s;
}
/* Keep the active sun arc visible during long-press */
.chart-active .track-sun-arc-active {
  opacity: 1;
  z-index: 51;
}

/* Make insight items that trigger charts look interactive */
.insight-weather,
.insight-precip,
.insight-humidity,
.insight-wind,
.insight-uv,
.insight-aqi,
.insight-sun {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.insight-weather:hover,
.insight-precip:hover,
.insight-humidity:hover,
.insight-wind:hover,
.insight-uv:hover,
.insight-aqi:hover,
.insight-sun:hover {
  color: var(--text) !important;
}

/* Grid day weather mini-indicator */
.grid-day-weather {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Day insight/data bar — consolidated footer with weather, sun, moon, seasonal */
.day-tile-insights {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 24px 14px;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  border-top: 1px solid var(--border);
  line-height: 1.4;
  background: var(--bg-2);
  position: relative;
  z-index: 1;
}

/* Weather items */
.insight-weather {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.insight-weather-low {
  font-weight: 400;
  color: var(--text-dim);
}
.insight-weather-desc {
  font-size: 13px;
  color: var(--text-dim);
}
.insight-precip {
  font-size: 13px;
  color: var(--blue);
  font-family: var(--mono);
}
.insight-wind {
  font-size: 13px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}

/* Sun icon (inline SVG — sun + horizon) */
.insight-sun-icon {
  width: 22px;
  height: 16px;
  vertical-align: -3px;
  color: var(--text-dim);
  margin-right: 2px;
}

/* Steam icon for humidity */
.insight-steam-icon {
  width: 12px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 2px;
}

/* Sun, moon, season items */
.day-tile-insights .insight-sun,
.day-tile-insights .insight-moon,
.day-tile-insights .insight-season {
  font-size: 13px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Now-line: full track height, badge caps the top visually */
.track-now-line {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  pointer-events: none; /* don't intercept touches */
}

@media (max-width: 768px) {
  /* Context menus as bottom sheets on mobile */
  .context-menu.open {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw;
    border-radius: 16px 16px 0 0 !important;
    padding: 12px 0 env(safe-area-inset-bottom, 16px);
    animation: popover-slide-up 0.2s ease both;
  }
  .context-menu-item {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
  .context-menu-header {
    padding: 10px 20px 6px !important;
  }
  main { padding: 16px 12px 80px; }
  .topnav { padding: 0 12px; height: 48px; }
  body { padding-top: 48px; }
  .logo-sub { display: none; }
  .modal { width: 100% !important; max-width: 100vw !important; max-height: 95vh; border-radius: 0; }
  .modal-content { padding: 20px 16px 24px; }
  .modal-header { padding: 16px 16px 10px; }
  .modal-overlay.open,
  .task-modal-overlay,
  .popover-mode {
    align-items: flex-end !important;
  }
  .popover-mode .modal,
  .modal-overlay .modal {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh;
    animation: popover-slide-up 0.25s ease both;
  }
  @keyframes popover-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .add-modal-actions { position: sticky; bottom: 0; background: var(--bg-1); padding: 12px 0 0; border-top: 1px solid var(--border-dim); }

  .daily-stats-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 16px;
  }
  .stats-bar-date { font-size: 16px; width: 100%; }

  /* Nav — collapse right side buttons */
  .topnav-center { display: none; }
  .topnav-right {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .sun-toggle { padding: 4px 8px; font-size: 12px; }
  .add-btn {
    font-size: 16px;
    padding: 6px 12px;
    letter-spacing: 0;
  }
  .add-btn-text { display: none; }

  /* Day tile header — let allday wrap naturally */
  .day-tile-header {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Compact date badge on mobile — stack DOW over number, hide month */
  .day-tile-header { align-items: center; }
  .day-tile-dow {
    display: none;
  }
  .day-tile-month {
    display: none;
  }
  .day-tile-date {
    display: none;
  }
  /* Inject DOW before the number via a wrapper we'll add in JS */
  .day-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    flex-shrink: 0;
  }
  .day-date-badge .badge-dow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dimmer);
    text-transform: uppercase;
    line-height: 1;
  }
  .day-date-badge .badge-num {
    font-size: 20px;
    font-weight: 300;
    color: var(--text);
    line-height: 1;
  }
  .day-date-badge .badge-num.today-num {
    color: var(--white);
    font-weight: 600;
  }
  .day-tile-summary { font-size: 11px; }
  .day-tile-timerange { font-size: 8px; }

  /* Allday bar in header — full-width, compact */
  .day-tile-allday { flex: 1; min-width: 0; }
  .allday-label { font-size: 8px; }
  .day-tile-allday,
  .allday-marquee-track,
  .allday-segments,
  .allday-segments.marquee-active { height: 22px !important; }
  .allday-segment-text { font-size: 10px; }
  .allday-segment { font-size: 10px; padding: 0 6px; }

  /* Track area */
  .day-tile-track { margin: 8px 14px 10px; }
  .track-event-label { font-size: 9px; }
  .track-hour-label { font-size: 8px; }

  /* Insights footer */
  .day-tile-insights {
    padding: 6px 14px 8px;
    font-size: 9px;
    flex-wrap: wrap;
  }
  .day-tile-insights span { margin-right: 10px; }

  /* Work schedule mobile */
  .work-day-row { gap: 6px; padding: 6px 0; }
  .work-day-label { font-size: 11px; width: 32px; }
  .work-time-input { font-size: 11px; padding: 5px 6px; }
  .work-day-hours { font-size: 10px; }

  /* Chooser */
  .chooser-item { padding: 12px 14px; font-size: 13px; }

  /* Month grid */
  .month-grid-headers { gap: 3px; }
  .month-grid { gap: 3px; grid-auto-rows: minmax(90px, auto); }
  .grid-day { padding: 6px; min-height: 90px; }
  .grid-day-num { font-size: 12px; }
  .grid-day-num.today-label { width: 20px; height: 20px; font-size: 10px; }
  .grid-event-label { font-size: 9px; }
  .grid-event-time { display: none; }
  .grid-day-weather { display: none; }
  .grid-dow-header { font-size: 8px; letter-spacing: 1.5px; }

  /* Calendar header — stack and compact on mobile */
  .month-grid-section > .strip-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cal-view-toggle {
    width: 100%;
    justify-content: center;
  }
  .cal-view-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-align: center;
  }
  .cal-month-nav {
    width: 100%;
    justify-content: center;
    gap: 6px;
  }
  .cal-month-title {
    font-size: 13px;
    min-width: 0;
    flex: 1;
  }
  .cal-nav-arrow {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .cal-today-btn {
    font-size: 9px;
    padding: 5px 8px;
  }
  .cal-month-dots {
    width: 100%;
    justify-content: center;
  }

  /* Larger touch target for timeline bar on mobile */
  .timeline-bar {
    top: 0 !important;
  }

  /* Prevent text selection on calendar grid during long press */
  .month-grid, #monthGrid {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Calendar loupe — floating expanded cell on touch-hold */
  .cal-loupe {
    position: fixed;
    z-index: 10000;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--overlay-08) inset;
    padding: 10px;
    overflow: auto;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    will-change: left, top, opacity, transform;
  }
  .cal-loupe.visible {
    opacity: 1;
    transform: scale(1);
  }
  /* Content crossfade */
  .cal-loupe-inner {
    transition: opacity 0.1s ease;
  }
  .cal-loupe-inner.fading { opacity: 0.3; }
  .cal-loupe .grid-day {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    transform: none !important;
  }
  .cal-loupe .grid-day-header { margin-bottom: 8px; }
  .cal-loupe .grid-day-num { font-size: 18px !important; }
  .cal-loupe .grid-event { padding: 6px 8px !important; margin-bottom: 4px; border-radius: 4px; }
  .cal-loupe .grid-event-label { font-size: 12px !important; }
  .cal-loupe .grid-event-time { display: inline !important; font-size: 11px !important; }
  .cal-loupe .grid-overflow { font-size: 11px; color: var(--text-dimmer); margin-top: 4px; }
  .cal-loupe .grid-day-count { font-size: 11px !important; }
  .cal-loupe .grid-day-weather { display: block !important; font-size: 12px; }
}

/* ============================================================
   TASK PANEL
   ============================================================ */

.task-panel {
  margin-bottom: 24px;
}

.task-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.task-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}

.task-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-add-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.task-add-btn:hover { color: var(--text); border-color: var(--border-focus); background: var(--bg-3); }

.task-completed-toggle {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.task-completed-toggle:hover { color: var(--text); }

/* Section labels (TODAY / UPCOMING / COMPLETED) */
.task-section { margin-top: 10px; }
.task-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  padding: 4px 0 6px;
}
.task-section-completed .task-section-label { color: var(--border-hover); }

/* Task list */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual task row */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.task-item:hover { border-color: var(--border-hover); background: var(--bg-2); }

/* Swipe reveal layers */
.task-swipe-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 2;
  background: var(--bg-1);
}
.task-swipe-reveal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 1;
  border-radius: var(--radius);
}
.task-swipe-disregard { background: var(--accent-glow); color: var(--accent); }
.task-swipe-delete { background: rgba(230,138,138,0.25); color: var(--danger); }

/* Disregarded task styling */
.task-item.disregarded { opacity: 0.6; }
.task-item.disregarded .task-title { text-decoration: line-through; }

/* Priority accent bar on left edge */
.task-item::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.15s;
}
.task-item.priority-high::before    { background: var(--cat-appointment); }
.task-item.priority-urgent::before  { background: var(--cat-urgent); }

/* Checkbox */
.task-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--border-focus);
  border-radius: 4px;
  margin-top: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.task-check:hover { border-color: var(--text-dimmer); }
.task-check.checked {
  background: var(--border);
  border-color: var(--text-dimmer);
  color: var(--text-dimmer);
}
.task-check.celebrate {
  animation: checkCelebrate 0.4s ease-out;
  background: var(--success-glow);
  border-color: var(--success);
  color: var(--success);
}
@keyframes checkCelebrate {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Task completion animation phases */
.task-item.completing {
  background: rgba(127, 204, 164, 0.06);
  border-color: var(--success-glow);
}
.task-item.completing .task-title {
  color: var(--text-dimmer);
}
.task-item.completing .task-check {
  background: var(--success-glow);
  border-color: var(--success);
  color: var(--success);
}

/* Strikethrough sweep animation */
.strike-sweep {
  position: relative;
}
.strike-sweep::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 1.5px;
  background: var(--text-dimmer);
  animation: sweepStrike 0.3s ease-out forwards;
}
@keyframes sweepStrike {
  from { width: 0; }
  to { width: 100%; }
}

/* Task content */
.task-content { flex: 1; min-width: 0; }
.task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.task-item.completed .task-title {
  color: var(--text-dimmer);
  text-decoration: line-through;
}
.task-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.task-notes {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.5;
}

/* Badges: due date, deadline, recurrence */
.task-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dimmer);
  display: flex;
  align-items: center;
  gap: 3px;
}
.task-badge.recurring { color: var(--text-dimmer); }
.task-badge.task-linked-event {
  color: var(--teal);
  border-color: rgba(122, 196, 214, 0.3);
}
.task-badge.task-linked-event:hover {
  border-color: var(--teal);
  background: rgba(122, 196, 214, 0.08);
}

/* Deadline urgency levels */
.task-deadline-far  { color: var(--success); }  /* >7 days: green */
.task-deadline-week { color: var(--success); }  /* 4-7 days: green */
.task-deadline-3d   { color: var(--gold); }  /* 3 days: yellow */
.task-deadline-2d   { color: var(--danger); }  /* 2 days: red */
.task-deadline-1d   { color: var(--danger); animation: deadline-glow-soft 2s ease-in-out infinite; }
.task-deadline-today {
  color: var(--danger-bright);
  font-weight: 700;
  animation: deadline-glow 1.5s ease-in-out infinite;
}
.task-deadline-pastdue {
  color: #8b0000;
  font-weight: 700;
  letter-spacing: 1px;
  animation: deadline-pulse-dark 2.5s ease-in-out infinite;
}

@keyframes deadline-glow-soft {
  0%, 100% { text-shadow: 0 0 4px rgba(230,138,138,0.3); }
  50%      { text-shadow: 0 0 10px rgba(230,138,138,0.6); }
}

@keyframes deadline-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,107,107,0.4); }
  50%      { text-shadow: 0 0 16px rgba(255,107,107,0.8), 0 0 30px rgba(255,107,107,0.3); }
}

@keyframes deadline-pulse-dark {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 4px rgba(139,0,0,0.3); }
  50%      { opacity: 1; text-shadow: 0 0 12px rgba(139,0,0,0.6); }
}

/* Urgent pulse */
.task-item.priority-urgent .task-title {
  color: var(--cat-urgent);
}

/* Upcoming date separator */
.task-date-separator {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dimmer);
  padding: 8px 0 4px;
  border-top: 1px solid var(--border-dim);
  margin-top: 4px;
}
.task-date-separator:first-child { border-top: none; margin-top: 0; }

/* Task items: right-click for edit/delete context menu */

/* Completed timestamp */
.task-completed-at {
  font-size: 11px;
  color: var(--border-hover);
  margin-top: 2px;
}

/* Task modal overlay — lighter, not blacked out */
.task-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.task-modal-overlay .modal {
  width: 520px;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: 80vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.task-modal-overlay .modal .modal-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.task-modal-overlay .em-actions {
  flex-shrink: 0 !important;
}


.task-empty-state {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 14px 0 6px;
  background: linear-gradient(90deg, #6dd6a0, #ffffff, #a8e6cf, #ffffff, #6dd6a0);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-green 3s ease-in-out infinite;
}

@keyframes shimmer-green {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ============================================================
   ROUTINE MODAL
   ============================================================ */

.add-btn-routine {
  background: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
.add-btn-routine:hover {
  border-color: var(--border-focus) !important;
  color: var(--text) !important;
  background: var(--bg-3) !important;
}

.routine-day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.routine-day-btn {
  width: 48px;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.routine-day-btn:hover { border-color: var(--border-focus); }
.routine-day-btn.active {
  background: var(--bg-3);
  border-color: var(--text-dimmer);
  color: var(--text);
}
.routine-daily-btn {
  width: auto;
  padding: 8px 14px;
}
.routine-daily-btn.active {
  background: var(--success)22;
  border-color: var(--success);
  color: var(--success);
}

.routine-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.routine-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
}
.routine-item-row:hover { border-color: var(--border-hover); }
.routine-item-title {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}
.routine-item-remove {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  transition: color 0.15s;
}
.routine-item-remove:hover { color: var(--cat-urgent); }

.routine-add-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.routine-add-item input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.routine-add-item input:focus { border-color: var(--border-focus); }
.routine-add-item input::placeholder { color: var(--text-dimmer); }
.routine-add-item-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 18px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.routine-add-item-btn:hover { border-color: var(--border-focus); color: var(--text); }

/* Routine group in task list */
.task-routine-group {
  margin-bottom: 8px;
}
.task-routine-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.task-routine-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.task-routine-progress {
  font-size: 11px;
  color: var(--text-dimmer);
  font-weight: 600;
}
.task-routine-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 4px;
}

/* ============================================================
   POPOVER MODE � contextual panels that bloom from cursor
   Applied to .modal-overlay or .task-modal-overlay
   ============================================================ */

/* Light transparent backdrop instead of dark overlay */
.popover-mode {
  background: rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(2px) !important;
}

/* Position the modal at a fixed point, not centered */
.popover-mode .modal {
  position: fixed;
  margin: 0;
  /* transform-origin set by JS to the spawn point */
  animation: popover-bloom 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Bloom animation � scale from 0.6 + fade in */
@keyframes popover-bloom {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shrink-out when closing */
.popover-mode .modal.popover-closing {
  animation: popover-shrink 0.12s ease-in both;
}
@keyframes popover-shrink {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* Completed tasks � collapsible time groups + search */
.completed-search {
  margin-bottom: 10px;
}
.completed-search-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 8px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.completed-search-input:focus { border-color: var(--border-focus); }
.completed-search-input::placeholder { color: var(--text-dimmer); }

.completed-group {
  margin-bottom: 2px;
}

.completed-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.1s;
  user-select: none;
}
.completed-group-header:hover { background: var(--bg-2); }

.completed-group-arrow {
  font-size: 11px;
  color: var(--text-dimmer);
  width: 14px;
  text-align: center;
}

.completed-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  flex: 1;
}

.completed-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dimmer);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

.completed-group-body {
  padding-left: 6px;
}

/* ============================================================
   TIMELINE BAR � hover pin + drag-to-select
   ============================================================ */

.timeline-pin {
  position: absolute;
  top: 4px;
  bottom: 12px;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
  pointer-events: none;
  display: none;
  z-index: 10;
  transform: translateX(-1px);
}

.timeline-pin::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: var(--text);
  border-radius: 50%;
}

.timeline-pin-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.drag-drop-pin {
  z-index: 20;
}

.drag-drop-pin::before {
  background: var(--text);
}

.drag-drop-pin .timeline-pin-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.timeline-selection {
  position: absolute;
  top: auto;
  bottom: 0;
  height: 32px; /* axis height — selection stays in the time axis area */
  background: var(--overlay-15);
  border-left: 2px solid var(--text-dim);
  border-right: 2px solid var(--text-dim);
  border-radius: 3px;
  pointer-events: none;
  display: none;
  z-index: 200;
}

/* Timeline selection start/end labels */
.timeline-sel-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.5px;
  top: 50%;
  transform: translateY(-50%);
}

/* Start label: to the left of the selection */
.timeline-sel-start {
  right: 100%;
  margin-right: 4px;
}

/* End label: to the right of the selection */
.timeline-sel-end {
  left: 100%;
  margin-left: 4px;
}

/* Fallback: above the selection at left edge (when too close to left wall) */
.timeline-sel-above-left {
  left: 0;
  bottom: 100%;
  top: auto;
  transform: none;
  margin-bottom: 2px;
}

/* Fallback: above the selection at right edge (when too close to right wall) */
.timeline-sel-above-right {
  right: 0;
  bottom: 100%;
  top: auto;
  transform: none;
  margin-bottom: 2px;
}

/* ============================================================
   EVENT DRAG & DROP
   ============================================================ */

/* Event resize handles */
.event-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.event-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: rgba(255,255,255,0.8);
}

.event-resize-left {
  left: -4px;
  border-radius: 4px 0 0 4px;
}

.event-resize-left::after {
  left: 4px;
}

.event-resize-right {
  right: -4px;
  border-radius: 0 4px 4px 0;
}

.event-resize-right::after {
  right: 4px;
}

.track-event:hover .event-resize-handle {
  opacity: 1;
}

/* Larger touch hit area for resize handles on mobile */
@media (pointer: coarse) {
  .event-resize-handle {
    width: 24px;
    opacity: 0.5; /* always slightly visible on touch */
  }
  .event-resize-left { left: -8px; }
  .event-resize-right { right: -8px; }
}

.track-event.resizing {
  z-index: 50 !important;
}

.drag-ghost {
  transition: none !important;
  opacity: 0.9;
}

.drag-ghost .track-event-label {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.drag-time-tooltip {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* -- PROFILE BUTTON ---------------------------------------- */
.profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.profile-btn:hover {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--text-dim);
  box-shadow: 0 0 0 3px var(--overlay-04);
}

/* -- PROFILE SLIDE-OUT PANEL ------------------------------- */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.profile-overlay.open {
  opacity: 1;
  visibility: visible;
}

.profile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}

.profile-panel.open {
  transform: translateX(0);
}

/* Panel header — subtle gradient for visual weight */
.profile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.profile-panel-header h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.profile-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-3);
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  transition: all 0.15s ease;
  line-height: 1;
}

.profile-close-btn:hover {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--border);
}

/* Panel body + custom scrollbar */
.profile-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px 40px;
}

.profile-panel-body::-webkit-scrollbar {
  width: 6px;
}
.profile-panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.profile-panel-body::-webkit-scrollbar-thumb {
  background: var(--border-dim);
  border-radius: 3px;
}
.profile-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* Sections */
.profile-section {
  border-bottom: 1px solid var(--border-dim);
}
.profile-section:last-child { border-bottom: none; }

/* Collapsible section headers — premium accordion */
.profile-section.collapsible .profile-section-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  margin: 0;
  user-select: none;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.profile-section.collapsible .profile-section-label:hover {
  background: var(--overlay-03);
}
.profile-section:not(.collapsible) .profile-section-label {
  padding: 16px 8px 10px;
}

/* Chevron arrow */
.collapse-arrow {
  font-size: 13px;
  color: var(--text-dimmer);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
}
.profile-section.collapsible.open .collapse-arrow {
  transform: rotate(90deg);
}

/* Section body collapse animation */
.profile-section-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
  padding-bottom: 0;
}
.profile-section.open .profile-section-body {
  max-height: 2000px;
  padding-bottom: 16px;
}

/* ── Theme Picker ───────────────────────────── */
.theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.theme-card {
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--border-dim);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.selected { border-color: var(--accent); }
.theme-card-preview { display: flex; gap: 4px; height: 32px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.theme-card-preview > div { flex: 1; }
.theme-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
.theme-card-desc { font-size: 11px; color: var(--text-dimmer); }

/* Section label typography */
.profile-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

/* ---- Insight toggles ---- */
.insight-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.insight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 8px;
  border-bottom: 1px solid var(--overlay-04);
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 6px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}
.insight-row:hover { background: var(--overlay-03); }
.insight-row:last-child { border-bottom: none; }
.insight-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.15s ease;
}
.insight-row.active .insight-row-label { color: var(--text); }

/* iOS-style toggle switch */
.insight-switch {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 24px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.insight-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-dimmer);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
}
.insight-switch:checked {
  background: var(--success-glow);
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success-dim);
}
.insight-switch:checked::before {
  transform: translateX(16px);
  background: var(--success);
}

/* ---- Form fields — premium styling ---- */
.profile-field {
  margin-bottom: 14px;
}

.profile-field:last-child {
  margin-bottom: 0;
}

.profile-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.profile-field input[type="text"],
.profile-field input[type="number"],
.profile-field input[type="time"],
.profile-field input[type="date"],
.profile-field select {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.profile-field input:focus,
.profile-field select:focus {
  border-color: var(--text-dim);
  box-shadow: 0 0 0 2px var(--overlay-04), inset 0 1px 3px rgba(0,0,0,0.15);
}

.profile-field-row {
  display: flex;
  gap: 12px;
}

.profile-field-row > div {
  flex: 1;
}

.profile-field-optional {
  font-size: 11px;
  color: var(--text-dimmer);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Work schedule ---- */
.profile-work-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}
.profile-work-day:hover { background: var(--overlay-03); }
.profile-work-day.ws-off { opacity: 0.5; }
.profile-work-day.ws-off:hover { opacity: 0.7; }

.ws-day-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 90px;
}
.ws-day-toggle .day-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.3px;
  user-select: none;
}
.ws-day-toggle .insight-switch {
  flex-shrink: 0;
}

.ws-times {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s;
}
.ws-times.ws-disabled { opacity: 0.25; pointer-events: none; }

.ws-to {
  font-size: 12px;
  color: var(--text-dimmer);
  font-weight: 500;
}

.profile-work-day input[type="time"] {
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--mono);
  width: 110px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: dark;
}
.profile-work-day input[type="time"]:focus {
  border-color: var(--text-dim);
  box-shadow: 0 0 0 2px var(--overlay-04);
}
.profile-work-day input[type="time"]:disabled {
  opacity: 0.3;
}

/* Compact drum variant (dt-compact) */
.dt-compact .dt-drum {
  width: 32px;
  height: 78px; /* 3 items at 26px */
}
.dt-compact .dt-drum-ampm { width: 30px; }
.dt-compact .dt-drum-item {
  height: 26px;
  font-size: 15px;
}
.dt-compact .dt-drum-item.dt-drum-selected {
  font-size: 17px;
}
.dt-compact .dt-drum-ampm .dt-drum-item {
  font-size: 10px;
}
.dt-compact .dt-drum-ampm .dt-drum-item.dt-drum-selected {
  font-size: 11px;
}
.dt-compact .dt-drum::after {
  top: 26px;
  height: 26px;
}
.dt-compact .dt-drum-colon {
  font-size: 15px;
}
.dt-compact .dt-drum-mask {
  background: linear-gradient(to bottom,
    var(--bg-1) 0%,
    transparent 25%,
    transparent 75%,
    var(--bg-1) 100%
  );
}

/* Work schedule compact overrides */
.profile-work-day .dt-time-inline {
  margin: 0;
}
.profile-work-day .dt-drum-group {
  padding: 2px 2px;
  border: none;
  background: none;
  gap: 0;
}
.profile-work-day .dt-drum-label { display: none; }
.ws-times {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-times .ws-to {
  font-size: 11px;
  color: var(--text-dimmer);
  font-weight: 500;
}

/* ---- Family member cards ---- */
.profile-kid {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-kid:hover {
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.profile-kid-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--overlay-08);
}
.profile-kid-initial {
  font-size: 17px;
  font-weight: 700;
  color: rgba(0,0,0,0.6);
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.profile-kid-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  min-height: 42px;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.profile-kid-color::-webkit-color-swatch-wrapper { padding: 0; }
.profile-kid-color::-webkit-color-swatch { border: none; border-radius: 50%; }

.profile-kid-info {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 76px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.profile-kid-clickable {
  cursor: pointer;
}
.profile-kid-clickable:hover {
  border-color: var(--border);
  background: var(--bg-3);
}
.profile-kid-name-label {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-kid-rel-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-dimmer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-kid-remove {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.15s ease;
  opacity: 0;
}
.profile-kid:hover .profile-kid-remove { opacity: 1; }
.profile-kid-remove:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

/* ---- Add buttons — solid subtle style ---- */
.profile-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  background: var(--overlay-02);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.profile-add-btn:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-3);
}





.profile-subsection-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  text-transform: uppercase;
  margin-top: 18px;
  margin-bottom: 8px;
}
/* -- SAVED ADDRESS CARDS ----------------------------------- */
.saved-addr-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.saved-addr-card:hover { border-color: var(--border); }
.saved-addr-card.saved-addr-editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-color: var(--border);
  background: var(--bg-2);
  padding: 12px;
}
.saved-addr-pin {
  color: var(--text-dimmer);
  flex-shrink: 0;
}
.saved-addr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saved-addr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-addr-address {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-addr-edit-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  font-size: 14px;
  padding: 3px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.saved-addr-card:hover .saved-addr-edit-btn { opacity: 0.6; }
.saved-addr-edit-btn:hover { opacity: 1 !important; color: var(--text); }
.saved-addr-remove-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.saved-addr-card:hover .saved-addr-remove-btn { opacity: 0.5; }
.saved-addr-remove-btn:hover { opacity: 1 !important; color: var(--danger); }

/* Edit mode */
.saved-addr-edit-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.saved-addr-edit-row { display: flex; flex-direction: column; gap: 4px; }
.saved-addr-edit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dimmer);
}
.saved-addr-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.saved-addr-input:focus { border-color: var(--border-focus); }
.saved-addr-input::placeholder { color: var(--text-dimmer); }
.saved-addr-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.saved-addr-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.saved-addr-cancel-btn:hover { border-color: var(--border-focus); color: var(--text); }
.saved-addr-save-btn {
  background: var(--success-dim);
  border: 1px solid rgba(127,204,164,0.3);
  border-radius: 6px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.saved-addr-save-btn:hover { background: var(--success-glow); border-color: rgba(127,204,164,0.5); }




/* -- BRIEFING PROMPT EDITOR MODAL -------------------------- */
.brief-prompt-modal { width: 640px; max-width: 95vw; }
.brief-prompt-modal .modal-content { padding: 0 24px; }
.brief-prompt-intro {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 16px;
}
.brief-prompt-examples { margin-bottom: 12px; }
.brief-prompt-example-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dimmer);
  margin-bottom: 8px;
}
.brief-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brief-prompt-chip {
  padding: 6px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.brief-prompt-chip:hover {
  background: var(--accent-dim);
  border-color: rgba(240,168,112,0.3);
  color: var(--text);
}
.brief-prompt-textarea {
  width: 100%;
  min-height: 200px;
  max-height: 50vh;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.brief-prompt-textarea:focus { border-color: var(--border-focus); }
.brief-prompt-textarea::placeholder {
  color: var(--text-dimmer);
  font-size: 13px;
}
.brief-prompt-footer-hint {
  font-size: 11px;
  color: var(--text-dimmer);
  margin-top: 8px;
  margin-bottom: 4px;
}
.brief-prompt-char-count {
  font-size: 11px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}
.brief-prompt-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.brief-prompt-btn:hover { color: var(--text); }

.brief-listen-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.brief-listen-btn:hover { color: var(--text); }
.brief-listen-btn.playing { color: var(--accent, var(--text)); }
.brief-listen-btn.loading { opacity: 0.6; }
.brief-listen-btn .tts-spinner { animation: tts-spin 1s linear infinite; }
@keyframes tts-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .brief-prompt-modal { width: 100%; max-width: 100vw; }
  .brief-prompt-textarea { min-height: 160px; }
}
/* -- MODEL SUGGESTION CARDS -------------------------------- */
.model-suggestions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.model-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: left;
  font-family: var(--font);
}
.model-card:hover {
  border-color: var(--border);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.model-card.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.model-card-tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.model-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.model-card-desc {
  font-size: 11px;
  color: var(--text-dimmer);
  line-height: 1.3;
}
.model-custom-row {
  display: flex;
  gap: 0;
}
.model-custom-row input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--mono);
  outline: none;
  transition: border-color 0.15s;
}
.model-custom-row input:focus { border-color: var(--border-focus); }
.model-custom-row input::placeholder { color: var(--text-dimmer); font-family: var(--font); }

@media (max-width: 600px) {
  .model-suggestions { grid-template-columns: 1fr; }
}
/* -- AI PROVIDER PICKER ------------------------------------ */
.provider-picker { position: relative; }
.provider-picker-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.provider-picker-btn:hover { border-color: var(--border-focus); background: var(--bg-3); }
.provider-picker.open .provider-picker-btn { border-color: var(--border-focus); background: var(--bg-3); }
.provider-picker-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-dimmer);
}
.provider-picker-icon svg { width: 18px; height: 18px; }
.provider-picker-label { flex: 1; }
.provider-picker-btn .provider-picker-label { color: var(--text-dim); }
.provider-picker.has-value .provider-picker-label { color: var(--text); font-weight: 500; }
.provider-picker-chev {
  color: var(--text-dimmer);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.provider-picker.open .provider-picker-chev { transform: rotate(180deg); }

.provider-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
  padding: 4px;
}

.provider-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.provider-option:hover { background: var(--bg-3); }
.provider-option.selected { background: var(--accent-dim); }

.provider-opt-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-dim);
  opacity: 0.7;
}
.provider-option:hover .provider-opt-logo,
.provider-option.selected .provider-opt-logo { opacity: 1; color: var(--text); }

.provider-opt-info { display: flex; flex-direction: column; gap: 1px; }
.provider-opt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.provider-opt-desc {
  font-size: 11px;
  color: var(--text-dimmer);
  letter-spacing: 0.3px;
}
.provider-option.selected .provider-opt-name { color: var(--accent); }
/* -- ADDRESS AUTOCOMPLETE DROPDOWN ------------------------- */
.addr-autocomplete-dropdown {
  position: absolute;
  z-index: 9999;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.addr-ac-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 0;
}
.addr-ac-item:hover,
.addr-ac-item.addr-ac-active {
  background: var(--bg-3);
}
.addr-ac-pin {
  color: var(--text-dimmer);
  flex-shrink: 0;
  margin-top: 2px;
}
.addr-ac-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}
/* -- API KEY VAULT ----------------------------------------- */
.api-key-vault {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.api-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.api-key-row.connected {
  border-color: var(--border);
}
.api-key-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.api-key-row-icon {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
}
.api-key-row-icon svg { width: 18px; height: 18px; }
.api-key-row.connected .api-key-row-icon { color: var(--text); }
.api-key-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.api-key-row.connected .api-key-row-name { color: var(--text); }
.api-key-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.api-key-status {
  font-size: 11px;
  color: var(--text-dimmer);
}
.api-key-row.connected .api-key-status {
  color: var(--accent);
}
.api-key-masked {
  font-size: 11px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}
.api-key-action-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s;
}
.api-key-action-btn:hover { background: var(--bg-hover); color: var(--text); }
.api-key-auto-row {
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin-top: 6px;
}
.api-key-auto-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.api-key-auto-input-wrap {
  display: flex;
  gap: 6px;
}
.api-key-auto-input-wrap input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--mono);
  outline: none;
}
.api-key-auto-input-wrap input:focus { border-color: var(--border-focus); }
.api-key-auto-save {
  padding: 8px 16px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: var(--bg-1);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
}
.api-key-auto-save:hover { opacity: 0.9; }
.api-key-auto-cancel {
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
}
.api-key-auto-remove {
  margin-top: 8px;
  text-align: right;
}
.api-key-remove-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--text-dimmer);
  border-radius: 6px;
  color: var(--text-dimmer);
  cursor: pointer;
  font-family: var(--font);
}
.api-key-remove-btn:hover { color: #e06060; border-color: #e06060; }

/* -- AI FEATURE ROWS --------------------------------------- */
.ai-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}
.ai-feature-row:last-of-type { border-bottom: none; }
.ai-feature-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ai-feature-label strong {
  font-size: 13px;
  color: var(--text);
}
.ai-feature-desc {
  font-size: 11px;
  color: var(--text-dimmer);
  line-height: 1.3;
}
.ai-feature-row .em-select {
  width: auto;
  min-width: 160px;
  max-width: 220px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .ai-feature-row { flex-direction: column; align-items: stretch; }
  .ai-feature-row .em-select { max-width: none; min-width: 0; width: 100%; }
  .api-key-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .api-key-row-right { width: 100%; justify-content: space-between; }
}

/* -- ADDRESS FIELD (display + edit mode) ------------------- */
.profile-address-field { position: relative; }

.profile-address-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.profile-address-display:hover { border-color: var(--border); }
.profile-address-icon {
  color: var(--text-dimmer);
  flex-shrink: 0;
}
.profile-address-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-address-edit-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.profile-address-display:hover .profile-address-edit-btn { opacity: 1; }
.profile-address-edit-btn:hover { color: var(--text); }

.profile-address-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.profile-address-input-wrap input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.profile-address-input-wrap input[type="text"]:focus {
  border-color: var(--border-focus);
}
.profile-address-input-wrap input[type="text"]:focus + .profile-address-save-btn {
  border-color: var(--border-focus);
}
.profile-address-save-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  color: var(--success);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 13px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.profile-address-save-btn:hover {
  background: var(--success-dim);
  color: var(--success);
  border-color: var(--border-focus);
}
/* -- MEMBER COLOR SWATCH PICKER --------------------------- */
.member-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.member-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-color-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.member-color-swatch.selected {
  border-color: var(--white);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.4);
  transform: scale(1.1);
}
.member-color-custom {
  background: var(--bg-3) !important;
  border-color: var(--border) !important;
  color: var(--text-dimmer);
}
.member-color-custom:hover { color: var(--text); }
.member-color-custom.selected { border-color: var(--text-dim) !important; }
.member-color-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.member-color-preview-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--overlay-15);
}
.member-color-preview-hex {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dimmer);
  letter-spacing: 1px;
}
/* ---- Mobile: full-width panel ---- */
@media (max-width: 600px) {
  .profile-panel {
    width: 100%;
    max-width: 100vw;
  }
  .profile-panel-body {
    padding: 4px 16px 32px;
  }
}

/* ============================================================
   DAILY BRIEFING CARD — Premium expandable card
   Glassmorphism · Animated accents · Polished typography
   ============================================================ */

/* ── Keyframes ── */
@keyframes brief-accent-pulse {
  0%, 100% { opacity: 0.7; background-position: 0% 0%; }
  50% { opacity: 1; background-position: 0% 100%; }
}
@keyframes brief-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes brief-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes brief-glow-in {
  from { box-shadow: 0 0 0 rgba(240, 168, 112, 0); }
  to { box-shadow: 0 0 20px rgba(240, 168, 112, 0.08), 0 4px 24px rgba(0, 0, 0, 0.15); }
}

/* ── Card container ── */
.brief-card {
  margin: 0 auto 14px;
  max-width: 1600px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-1) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--border-dim) 60%, transparent);
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              transform 0.3s ease;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

/* Animated gradient left accent bar */
.brief-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f0a870 0%, #e8b468 25%, #6dd6a0 50%, #68b8e8 75%, #f0a870 100%);
  background-size: 100% 200%;
  animation: brief-accent-pulse 4s ease-in-out infinite;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  z-index: 1;
}

/* Warm glow on hover */
.brief-card:hover {
  box-shadow: 0 2px 20px rgba(240, 168, 112, 0.1),
              0 8px 32px rgba(0, 0, 0, 0.18);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  transform: translateY(-1px);
}

/* ── Header ── */
.brief-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 14px 20px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* ── Title cluster ── */
.brief-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.brief-card-icon {
  font-size: 17px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.brief-card-label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(135deg, var(--text) 0%, var(--text-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brief-card-time {
  font-size: 11px;
  color: var(--text-dimmer);
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
  letter-spacing: 0.3px;
}

/* ── Actions bar ── */
.brief-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.brief-nav-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.brief-nav-btn:hover {
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  color: var(--text);
  opacity: 1;
}
.brief-date-label {
  font-size: 11px;
  color: var(--text-dimmer);
  min-width: 54px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.brief-refresh-btn {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin-left: 2px;
  opacity: 0.6;
}
.brief-refresh-btn:hover {
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  color: var(--text);
  opacity: 1;
  transform: rotate(30deg);
}
.brief-refresh-btn.spinning {
  animation: brief-spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  color: #f0a870;
  opacity: 1;
}

/* ── Chevron ── */
.brief-expand-chevron {
  font-size: 18px;
  color: var(--text-dimmer);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
  font-weight: 700;
  margin-left: 4px;
  opacity: 0.5;
}
.brief-card:hover .brief-expand-chevron {
  opacity: 0.8;
  color: var(--text-dim);
}
.brief-card.expanded .brief-expand-chevron {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--text);
}

/* ── Expandable body ── */
.brief-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
  padding: 0 20px;
  opacity: 0;
}
.brief-card.expanded .brief-card-body {
  max-height: 3000px;
  padding: 0 20px 20px;
  opacity: 1;
}

/* ── Brief content markdown rendering ── */
.brief-content {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* Section headings */
.brief-content h1,
.brief-content h2,
.brief-content h3 {
  color: var(--text);
  margin: 20px 0 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  position: relative;
}
.brief-content h1 {
  font-size: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 50%, transparent);
}
.brief-content h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  padding: 6px 0 6px 12px;
  margin: 22px 0 10px;
  border-bottom: none;
  position: relative;
}
.brief-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, #f0a870, #6dd6a0);
  border-radius: 2px;
}
.brief-content h3 {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 600;
}

/* Paragraphs */
.brief-content p {
  margin: 8px 0;
}

/* Lists */
.brief-content ul,
.brief-content ol {
  margin: 8px 0;
  padding-left: 22px;
}
.brief-content li {
  margin: 5px 0;
  line-height: 1.65;
}
.brief-content li::marker {
  color: var(--text-dimmer);
}

/* Inline styles */
.brief-content strong {
  color: var(--text);
  font-weight: 700;
}
.brief-content em {
  color: var(--text-dim);
  font-style: italic;
}

/* Inline code */
.brief-content code {
  background: var(--bg-3);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 40%, transparent);
}

/* Code blocks */
.brief-content pre {
  background: color-mix(in srgb, var(--bg) 95%, #000);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
}
.brief-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1.6;
}

/* Blockquotes — premium accent treatment */
.brief-content blockquote {
  position: relative;
  border: none;
  border-left: none;
  padding: 14px 18px 14px 20px;
  margin: 14px 0;
  color: var(--text-dim);
  font-style: italic;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bg-2) 80%, transparent) 0%,
    color-mix(in srgb, var(--bg-3) 50%, transparent) 100%
  );
  border-radius: var(--radius);
  line-height: 1.7;
}
.brief-content blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #f0a870 0%, #e8b468 100%);
  border-radius: 2px;
}
.brief-content blockquote p {
  margin: 4px 0;
}

/* Horizontal rules */
.brief-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-dim) 20%,
    var(--border) 50%,
    var(--border-dim) 80%,
    transparent 100%
  );
  margin: 16px 0;
}

/* Links in brief */
.brief-content a {
  color: #68b8e8;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, #68b8e8 30%, transparent);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.brief-content a:hover {
  color: #8ccbf0;
  border-bottom-color: #8ccbf0;
}

/* ── Empty / loading state ── */
.brief-card-empty {
  margin: 0 auto 14px;
  max-width: 1600px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-1) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--border-dim) 50%, transparent);
  text-align: center;
  position: relative;
}
.brief-card-empty::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--border-dim), var(--border));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  opacity: 0.5;
}
.brief-empty-text {
  font-size: 12px;
  color: var(--text-dimmer);
  letter-spacing: 0.3px;
}
.brief-empty-text a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-dimmer);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.brief-empty-text a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ── Shimmer loading animation ── */
.brief-shimmer {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-2) 90%, transparent) 25%,
    color-mix(in srgb, var(--bg-3) 70%, transparent) 50%,
    color-mix(in srgb, var(--bg-2) 90%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: brief-shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
  height: 13px;
  margin: 9px 0;
}
.brief-shimmer:nth-child(2) { width: 75%; animation-delay: 0.15s; }
.brief-shimmer:nth-child(3) { width: 55%; animation-delay: 0.3s; }

/* ── Profile: Brief API key field ── */
.brief-key-icon {
  margin-right: 4px;
}
.brief-key-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  color: var(--text-dimmer);
  transition: color 0.15s;
}
.brief-key-toggle:hover {
  color: var(--text);
}
#briefInstructions {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.2s;
}
#briefInstructions:focus {
  border-color: var(--text-dimmer);
}
#briefInstructions::placeholder {
  color: var(--text-dimmer);
  font-size: 12px;
  line-height: 1.5;
}
#briefModel {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}
#briefModel:focus {
  border-color: var(--text-dimmer);
}

/* Brief card mobile responsive */
@media (max-width: 600px) {
  .brief-card {
    border-radius: var(--radius);
    margin: 0 auto 8px;
  }
  .brief-card-header {
    flex-direction: row;
    align-items: center;
    padding: 10px 12px 10px 14px;
    gap: 8px;
  }
  .brief-card-title { gap: 6px; }
  .brief-card-icon { font-size: 14px; }
  .brief-card-label { font-size: 10px; letter-spacing: 1.5px; }
  .brief-card-time { font-size: 10px; }

  /* Hide date nav + prompt on collapsed mobile */
  .brief-card:not(.expanded) .brief-nav-btn,
  .brief-card:not(.expanded) .brief-date-label,
  .brief-card:not(.expanded) .brief-prompt-btn,
  .brief-card:not(.expanded) .brief-listen-btn { display: none; }

  /* Show them when expanded */
  .brief-card.expanded .brief-card-header {
    flex-wrap: wrap;
    padding: 12px 14px;
  }

  .brief-card-actions { gap: 4px; }
  .brief-nav-btn { width: 28px; height: 28px; font-size: 11px; }
  .brief-refresh-btn { width: 28px; height: 28px; font-size: 13px; }
  .brief-expand-chevron { font-size: 14px; }

  .brief-card-body { padding: 0 12px; }
  .brief-card.expanded .brief-card-body { padding: 0 12px 12px; }
  .brief-content { font-size: 13px; line-height: 1.6; }
  .brief-content h2 { font-size: 11px; }
  .brief-content blockquote { padding: 8px 12px 8px 14px; }
}
}


/* -- NEON ECLIPSE SPECIAL EFFECTS ----------------------------- */
[data-theme="neonEclipse"] .topnav {
  box-shadow: 0 1px 20px rgba(255,0,255,0.08), 0 1px 0 rgba(0,255,255,0.1);
}
[data-theme="neonEclipse"] .logo {
  text-shadow: 0 0 8px rgba(255,0,255,0.5), 0 0 20px rgba(255,0,255,0.2);
}
[data-theme="neonEclipse"] .em-btn-save,
[data-theme="neonEclipse"] .btn-save {
  box-shadow: 0 0 12px rgba(255,0,255,0.3), 0 0 30px rgba(255,0,255,0.1);
  text-shadow: 0 0 6px rgba(255,0,255,0.4);
}
[data-theme="neonEclipse"] .em-btn-save:hover,
[data-theme="neonEclipse"] .btn-save:hover {
  box-shadow: 0 0 18px rgba(255,0,255,0.5), 0 0 40px rgba(255,0,255,0.2);
}
[data-theme="neonEclipse"] .add-btn {
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
  text-shadow: 0 0 4px rgba(0,255,255,0.4);
}
[data-theme="neonEclipse"] .add-btn:hover {
  box-shadow: 0 0 20px rgba(0,255,255,0.5), 0 0 40px rgba(0,255,255,0.15);
}
[data-theme="neonEclipse"] .day-tile {
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,0,255,0.05);
}
[data-theme="neonEclipse"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(255,0,255,0.15), 0 0 1px rgba(0,255,255,0.3);
}
[data-theme="neonEclipse"] .day-tile.today {
  box-shadow: 0 0 16px rgba(0,255,255,0.12), 0 0 1px rgba(0,255,255,0.4);
  border-color: rgba(0,255,255,0.3);
}
[data-theme="neonEclipse"] .task-check.celebrate {
  box-shadow: 0 0 14px rgba(57,255,20,0.5);
}
[data-theme="neonEclipse"] .day-tile-zoom {
  text-shadow: 0 0 4px currentColor;
}
[data-theme="neonEclipse"] .day-tile-zoom:hover {
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
}
[data-theme="neonEclipse"] .day-tile-zoom.expanded {
  box-shadow: 0 0 10px rgba(255,0,255,0.3);
  text-shadow: 0 0 6px rgba(255,0,255,0.5);
}
[data-theme="neonEclipse"] .track-event {
  box-shadow: 0 0 6px rgba(255,0,255,0.1);
}
[data-theme="neonEclipse"] .modal {
  box-shadow: 0 0 40px rgba(255,0,255,0.1), 0 0 80px rgba(0,255,255,0.05), 0 8px 32px rgba(0,0,0,0.6);
}
[data-theme="neonEclipse"] .brief-card {
  box-shadow: 0 0 20px rgba(157,78,221,0.1), 0 0 1px rgba(0,255,255,0.2);
}
[data-theme="neonEclipse"] .profile-panel {
  box-shadow: -4px 0 30px rgba(255,0,255,0.08);
}
[data-theme="neonEclipse"] .insight-switch:checked {
  box-shadow: 0 0 8px rgba(57,255,20,0.4);
}
[data-theme="neonEclipse"] .stats-bar-date {
  text-shadow: 0 0 12px rgba(0,255,255,0.3);
}
/* Neon pulse animation on primary buttons */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,0,255,0.3), 0 0 25px rgba(255,0,255,0.1); }
  50% { box-shadow: 0 0 16px rgba(255,0,255,0.5), 0 0 40px rgba(255,0,255,0.2); }
}
[data-theme="neonEclipse"] .em-btn-save,
[data-theme="neonEclipse"] .btn-save {
  animation: neon-pulse 2.5s ease-in-out infinite;
}


/* -- MIDNIGHT SPECIAL EFFECTS --------------------------------- */
[data-theme="midnight"] .day-tile:hover,
:root:not([data-theme]) .day-tile:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 1px rgba(127,184,230,0.15);
}
:root:not([data-theme]) .day-tile.today,
[data-theme="midnight"] .day-tile.today {
  box-shadow: 0 0 12px rgba(127,184,230,0.08);
}
:root:not([data-theme]) .em-btn-save:hover,
[data-theme="midnight"] .em-btn-save:hover {
  box-shadow: 0 0 12px rgba(240,168,112,0.2);
}

/* -- DAYLIGHT SPECIAL EFFECTS --------------------------------- */
[data-theme="daylight"] .day-tile {
  box-shadow: 0 2px 8px rgba(180,160,120,0.12);
}
[data-theme="daylight"] .day-tile:hover {
  box-shadow: 0 4px 16px rgba(180,160,120,0.2);
}
[data-theme="daylight"] .em-btn-save,
[data-theme="daylight"] .btn-save {
  box-shadow: 0 2px 8px rgba(212,137,74,0.15);
}
[data-theme="daylight"] .modal {
  box-shadow: 0 8px 40px rgba(120,100,60,0.15);
}
[data-theme="daylight"] input:focus,
[data-theme="daylight"] select:focus,
[data-theme="daylight"] textarea:focus {
  box-shadow: 0 0 0 2px rgba(212,137,74,0.12);
}

/* -- LUMINA TIDE SPECIAL EFFECTS ------------------------------ */
[data-theme="luminaTide"] .day-tile {
  box-shadow: 0 2px 8px rgba(42,157,143,0.08);
  transition: box-shadow 0.3s ease, transform 0.18s ease, border-color 0.2s;
}
[data-theme="luminaTide"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(42,157,143,0.15), 0 0 1px rgba(80,176,200,0.2);
}
[data-theme="luminaTide"] .day-tile.today {
  box-shadow: 0 0 16px rgba(42,157,143,0.1);
  border-color: rgba(42,157,143,0.3);
}
[data-theme="luminaTide"] .em-btn-save,
[data-theme="luminaTide"] .btn-save {
  box-shadow: 0 2px 10px rgba(42,157,143,0.2);
}
[data-theme="luminaTide"] .em-btn-save:hover {
  box-shadow: 0 4px 16px rgba(42,157,143,0.3);
}
[data-theme="luminaTide"] .topnav {
  box-shadow: 0 1px 12px rgba(42,157,143,0.08);
}
[data-theme="luminaTide"] .insight-switch:checked {
  box-shadow: 0 0 6px rgba(42,157,143,0.3);
}
[data-theme="luminaTide"] .brief-card {
  box-shadow: 0 2px 12px rgba(42,157,143,0.08);
}

/* -- SOLAR DUNES SPECIAL EFFECTS ------------------------------ */
[data-theme="solarDunes"] .day-tile {
  box-shadow: 0 2px 8px rgba(232,120,48,0.08);
}
[data-theme="solarDunes"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(232,120,48,0.15);
}
[data-theme="solarDunes"] .day-tile.today {
  box-shadow: 0 0 16px rgba(255,184,64,0.12);
  border-color: rgba(232,120,48,0.3);
}
[data-theme="solarDunes"] .em-btn-save,
[data-theme="solarDunes"] .btn-save {
  box-shadow: 0 2px 10px rgba(232,120,48,0.2);
}
[data-theme="solarDunes"] .em-btn-save:hover {
  box-shadow: 0 4px 16px rgba(232,120,48,0.35);
}
[data-theme="solarDunes"] .topnav {
  box-shadow: 0 1px 12px rgba(232,120,48,0.06);
}
[data-theme="solarDunes"] .modal {
  box-shadow: 0 8px 40px rgba(140,80,30,0.2);
}
[data-theme="solarDunes"] input:focus,
[data-theme="solarDunes"] select:focus {
  box-shadow: 0 0 0 2px rgba(232,120,48,0.12);
}

/* -- VERDANT CANOPY SPECIAL EFFECTS --------------------------- */
[data-theme="verdantCanopy"] .day-tile {
  box-shadow: 0 2px 8px rgba(0,10,5,0.3);
}
[data-theme="verdantCanopy"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(90,184,122,0.1), 0 2px 8px rgba(0,10,5,0.3);
}
[data-theme="verdantCanopy"] .day-tile.today {
  box-shadow: 0 0 16px rgba(90,184,122,0.1);
  border-color: rgba(90,184,122,0.3);
}
[data-theme="verdantCanopy"] .em-btn-save,
[data-theme="verdantCanopy"] .btn-save {
  box-shadow: 0 0 10px rgba(90,184,122,0.2);
}
[data-theme="verdantCanopy"] .em-btn-save:hover {
  box-shadow: 0 0 18px rgba(90,184,122,0.3);
}
[data-theme="verdantCanopy"] .insight-switch:checked {
  box-shadow: 0 0 6px rgba(90,184,122,0.35);
}
[data-theme="verdantCanopy"] .topnav {
  box-shadow: 0 1px 12px rgba(0,10,5,0.3);
}
[data-theme="verdantCanopy"] .logo {
  text-shadow: 0 0 8px rgba(90,184,122,0.2);
}
[data-theme="verdantCanopy"] .track-event {
  box-shadow: 0 0 4px rgba(90,184,122,0.08);
}

/* -- BLUSH PETAL SPECIAL EFFECTS ------------------------------ */
[data-theme="blushPetal"] .day-tile {
  box-shadow: 0 2px 10px rgba(232,138,158,0.08);
}
[data-theme="blushPetal"] .day-tile:hover {
  box-shadow: 0 4px 18px rgba(232,138,158,0.14);
}
[data-theme="blushPetal"] .day-tile.today {
  box-shadow: 0 0 14px rgba(232,138,158,0.1);
  border-color: rgba(232,138,158,0.25);
}
[data-theme="blushPetal"] .em-btn-save,
[data-theme="blushPetal"] .btn-save {
  box-shadow: 0 2px 10px rgba(232,138,158,0.2);
}
[data-theme="blushPetal"] .em-btn-save:hover {
  box-shadow: 0 4px 16px rgba(232,138,158,0.3);
}
[data-theme="blushPetal"] .modal {
  box-shadow: 0 8px 40px rgba(140,80,100,0.1);
}
[data-theme="blushPetal"] input:focus,
[data-theme="blushPetal"] select:focus {
  box-shadow: 0 0 0 2px rgba(232,138,158,0.15);
}
[data-theme="blushPetal"] .topnav {
  box-shadow: 0 1px 10px rgba(232,138,158,0.06);
}
[data-theme="blushPetal"] .insight-switch:checked {
  box-shadow: 0 0 6px rgba(184,160,217,0.35);
}

/* -- CELESTIAL VEIL SPECIAL EFFECTS --------------------------- */
[data-theme="celestialVeil"] .logo {
  text-shadow: 0 0 10px rgba(154,122,255,0.4), 0 0 25px rgba(154,122,255,0.15);
}
[data-theme="celestialVeil"] .day-tile {
  box-shadow: 0 2px 8px rgba(5,3,15,0.4);
}
[data-theme="celestialVeil"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(154,122,255,0.1), 0 2px 8px rgba(5,3,15,0.4);
}
[data-theme="celestialVeil"] .day-tile.today {
  box-shadow: 0 0 16px rgba(78,205,196,0.08), 0 0 1px rgba(154,122,255,0.3);
  border-color: rgba(154,122,255,0.3);
}
[data-theme="celestialVeil"] .em-btn-save,
[data-theme="celestialVeil"] .btn-save {
  box-shadow: 0 0 12px rgba(154,122,255,0.25);
  text-shadow: 0 0 4px rgba(154,122,255,0.3);
}
[data-theme="celestialVeil"] .em-btn-save:hover {
  box-shadow: 0 0 20px rgba(154,122,255,0.4);
}
[data-theme="celestialVeil"] .modal {
  box-shadow: 0 0 40px rgba(154,122,255,0.08), 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="celestialVeil"] .topnav {
  box-shadow: 0 1px 16px rgba(154,122,255,0.06);
}
[data-theme="celestialVeil"] .brief-card {
  box-shadow: 0 0 16px rgba(154,122,255,0.06);
}
[data-theme="celestialVeil"] .insight-switch:checked {
  box-shadow: 0 0 6px rgba(78,205,196,0.4);
}
[data-theme="celestialVeil"] .stats-bar-date {
  text-shadow: 0 0 10px rgba(154,122,255,0.2);
}
@keyframes celestial-twinkle {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}
[data-theme="celestialVeil"] .day-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 30%, rgba(154,122,255,0.04) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(78,205,196,0.03) 0%, transparent 50%);
  animation: celestial-twinkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* -- MOLTEN CORE SPECIAL EFFECTS ------------------------------ */
[data-theme="moltenCore"] .logo {
  text-shadow: 0 0 8px rgba(255,77,0,0.4), 0 0 20px rgba(255,77,0,0.15);
}
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,77,0,0.2), 0 0 20px rgba(255,77,0,0.08); }
  50% { box-shadow: 0 0 14px rgba(255,77,0,0.35), 0 0 30px rgba(255,77,0,0.12); }
}
[data-theme="moltenCore"] .em-btn-save,
[data-theme="moltenCore"] .btn-save {
  animation: ember-pulse 3s ease-in-out infinite;
  text-shadow: 0 0 4px rgba(255,77,0,0.3);
}
[data-theme="moltenCore"] .day-tile {
  box-shadow: 0 2px 8px rgba(5,4,2,0.5);
}
[data-theme="moltenCore"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(255,77,0,0.08), 0 2px 8px rgba(5,4,2,0.5);
}
[data-theme="moltenCore"] .day-tile.today {
  box-shadow: 0 0 16px rgba(255,77,0,0.1);
  border-color: rgba(255,204,102,0.25);
}
[data-theme="moltenCore"] .topnav {
  box-shadow: 0 1px 16px rgba(255,77,0,0.06);
}
[data-theme="moltenCore"] .modal {
  box-shadow: 0 0 30px rgba(255,77,0,0.08), 0 8px 32px rgba(0,0,0,0.6);
}
[data-theme="moltenCore"] .insight-switch:checked {
  box-shadow: 0 0 8px rgba(255,221,51,0.35);
}
[data-theme="moltenCore"] .track-event {
  box-shadow: 0 0 4px rgba(255,77,0,0.08);
}
[data-theme="moltenCore"] .stats-bar-date {
  text-shadow: 0 0 10px rgba(255,204,102,0.25);
}

/* -- ETERNAL ROSE SPECIAL EFFECTS ----------------------------- */
[data-theme="eternalRose"] .logo {
  text-shadow: 0 0 8px rgba(192,90,126,0.3), 0 0 20px rgba(192,90,126,0.1);
}
[data-theme="eternalRose"] .day-tile {
  box-shadow: 0 2px 8px rgba(8,4,6,0.4);
}
[data-theme="eternalRose"] .day-tile:hover {
  box-shadow: 0 4px 20px rgba(192,90,126,0.1), 0 2px 8px rgba(8,4,6,0.4);
}
[data-theme="eternalRose"] .day-tile.today {
  box-shadow: 0 0 16px rgba(192,90,126,0.08);
  border-color: rgba(232,200,160,0.2);
}
[data-theme="eternalRose"] .em-btn-save,
[data-theme="eternalRose"] .btn-save {
  box-shadow: 0 0 10px rgba(192,90,126,0.25);
  text-shadow: 0 0 4px rgba(192,90,126,0.2);
}
[data-theme="eternalRose"] .em-btn-save:hover {
  box-shadow: 0 0 18px rgba(216,122,156,0.35);
}
[data-theme="eternalRose"] .topnav {
  box-shadow: 0 1px 12px rgba(192,90,126,0.06);
}
[data-theme="eternalRose"] .modal {
  box-shadow: 0 0 30px rgba(192,90,126,0.06), 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="eternalRose"] .insight-switch:checked {
  box-shadow: 0 0 6px rgba(232,200,160,0.35);
}
[data-theme="eternalRose"] input:focus,
[data-theme="eternalRose"] select:focus {
  box-shadow: 0 0 0 2px rgba(192,90,126,0.12);
}
[data-theme="eternalRose"] .brief-card {
  box-shadow: 0 2px 12px rgba(192,90,126,0.06);
}

/* ============================================================
   AI TUTORIAL MODAL
   ============================================================ */
.ai-tutorial-modal {
  width: 700px !important;
  max-width: 96vw !important;
  max-height: 90vh !important;
}
.ai-tutorial-content {
  padding: 0 28px 28px !important;
}
.ai-tutorial-content .tut-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-dim);
}
.ai-tutorial-content .tut-section-last {
  border-bottom: none;
  margin-bottom: 8px;
}
.tut-heading {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 0 0 12px;
}
.tut-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.tut-text strong { color: var(--text); }

/* Feature cards */
.tut-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.tut-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
}
.tut-feature-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tut-feature-card strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 3px;
}
.tut-feature-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Scenarios */
.tut-scenario {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--overlay-04);
}
.tut-scenario:last-child { border-bottom: none; }
.tut-scenario-emoji {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tut-scenario strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.tut-scenario p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}
.tut-scenario em {
  color: var(--text-dimmer);
  font-style: italic;
}

/* Provider tabs */
.tut-providers {
  margin-top: 16px;
}
.tut-provider-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tut-provider-tabs::-webkit-scrollbar { display: none; }
.tut-tab {
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px 8px 0 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tut-tab:hover { color: var(--text); border-color: var(--border); }
.tut-tab.active {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--border);
  border-bottom-color: var(--bg-3);
}
.tut-provider-body {
  border: 1px solid var(--border);
  border-radius: 0 10px 10px 10px;
  background: var(--bg-3);
  overflow: hidden;
}
.tut-provider-panel {
  display: none;
  padding: 18px 20px;
}
.tut-provider-panel.active { display: block; }
.tut-provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.tut-provider-header strong {
  font-size: 15px;
  color: var(--text);
}
.tut-cost-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dimmer);
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  padding: 4px 10px;
  border-radius: 12px;
}
.tut-steps {
  margin: 0;
  padding-left: 20px;
  counter-reset: none;
}
.tut-steps li {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 6px;
}
.tut-steps li strong { color: var(--text); }
.tut-steps a {
  color: #68b8e8;
  text-decoration: none;
  border-bottom: 1px solid rgba(104,184,232,0.3);
}
.tut-steps a:hover { color: #8ccbf0; border-bottom-color: #8ccbf0; }
.tut-steps code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--border-dim);
}

/* Cost card */
.tut-cost-card {
  text-align: center;
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  margin-bottom: 16px;
}
.tut-cost-headline {
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 1px;
}
.tut-cost-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin: 6px 0 0;
}

/* List */
.tut-list {
  margin: 0;
  padding-left: 20px;
}
.tut-list li {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 6px;
}
.tut-list li strong { color: var(--text); }

/* Bottom action */
.tut-bottom-action {
  text-align: center;
  padding: 16px 0 4px;
}
.tut-bottom-action .em-btn-save {
  padding: 12px 40px;
  font-size: 14px;
}

/* Tutorial link style */
.tut-link {
  display: inline-block;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  margin-top: 6px;
  transition: color 0.15s;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-dimmer);
}
.tut-link:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Mobile */
@media (max-width: 640px) {
  .ai-tutorial-modal {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
  }
  .ai-tutorial-content { padding: 0 16px 20px !important; }
  .tut-heading { font-size: 15px; }
  .tut-tab { padding: 6px 12px; font-size: 11px; }
  .tut-provider-panel { padding: 14px 14px; }
  .tut-cost-headline { font-size: 22px; }
}


/* -- AI Model Indicator under input bar -------------------- */
.ai-model-indicator {
  font-size: 11px;
  color: var(--text-dimmer);
  font-family: var(--mono);
  letter-spacing: 0.3px;
  padding: 2px 0;
  text-align: center;
}

/* -- Brief meta bar (model + voice info) ------------------- */
.brief-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--border-dim);
  font-size: 11px;
  color: var(--text-dimmer);
  font-family: var(--mono);
}

/* -- Prominent listen button ------------------------------- */
.brief-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0.5px;
  padding: 4px 12px 4px 8px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.brief-listen-btn:hover {
  background: var(--accent-glow);
  color: var(--text);
}
.brief-listen-btn.playing {
  background: var(--success-dim);
  border-color: var(--success);
  color: var(--success);
}
.brief-listen-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}
.brief-listen-label {
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .brief-card:not(.expanded) .brief-listen-label { display: none; }
  .brief-card:not(.expanded) .brief-listen-btn { padding: 4px 6px; }
}