/* Basic styling + updated consistency for classes */

/* ===================================================
   Hero section — first-visit conversion context
   Visible only when !tutorialSeen (tied to first-run gate)
   =================================================== */
.hero-section {
  position: relative;
  padding: 28px 20px 24px;
  background: linear-gradient(160deg, rgba(21,101,192,0.12) 0%, rgba(33,150,243,0.04) 100%);
  border-bottom: 1px solid rgba(33,150,243,0.15);
  text-align: center;
}
.hero-section.dark-mode {
  background: linear-gradient(160deg, rgba(13,27,62,0.8) 0%, rgba(15,17,23,0.6) 100%);
  border-bottom-color: rgba(33,150,243,0.2);
}

.hero-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  padding: 4px 6px;
  color: inherit;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.hero-close:hover { opacity: 0.8; }

.hero-content {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-headline {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: inherit;
}
.dark-mode .hero-headline { color: #fff; }

.hero-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  width: 100%;
}
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: inherit;
  opacity: 0.82;
}
.hero-bullets li i {
  color: #2196f3;
  font-size: 11px;
  margin-top: 3px;
  flex-shrink: 0;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.15s, transform 0.1s;
}
.hero-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.hero-cta:active { transform: translateY(0); }

.hero-sub {
  font-size: 11.5px;
  opacity: 0.45;
  margin-top: -6px;
}

/* ===================================================
   Share button on list-complete overlay
   =================================================== */
.list-complete-share-btn {
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: 20px;
  border: none;
  background: #2196f3;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.15s;
}
.list-complete-share-btn:hover { opacity: 0.85; }
.dark-mode .list-complete-share-btn { background: #1976d2; }

/* ===================================================
   Header overflow menu
   =================================================== */
.header-overflow-wrap {
  position: relative;
}

/* ⋮ button — styled identically to the other header icon buttons */
.header-overflow-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 24px;
  color: #2196f3;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-overflow-btn:hover { color: #1976d2; }

/* Dropdown panel */
.header-overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: #fff;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  z-index: 201;
  overflow: hidden;
}
.header-overflow-menu.dark-mode {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #404040;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}

/* Menu rows */
.header-overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-top: 1px solid transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: inherit;
  transition: background 0.12s;
}
.header-overflow-item + .header-overflow-item {
  border-top-color: #f0f0f0;
}
.header-overflow-menu.dark-mode .header-overflow-item + .header-overflow-item {
  border-top-color: #383838;
}
.header-overflow-item:hover { background: rgba(33,150,243,0.07); }
.header-overflow-menu.dark-mode .header-overflow-item:hover { background: rgba(255,255,255,0.06); }
.header-overflow-item i { width: 16px; text-align: center; color: #2196f3; font-size: 14px; flex-shrink: 0; }
.header-overflow-menu.dark-mode .header-overflow-item i { color: #64b5f6; }
a.header-overflow-item { text-decoration: none; }

/* ===================================================
   PWA install nudge banner
   =================================================== */
.pwa-prompt {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #bbdefb;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 12px 16px;
  max-width: min(420px, calc(100vw - 32px));
  font-size: 13px;
}
.pwa-prompt.dark-mode {
  background: #1a237e22;
  border-color: #1565c0;
  background: #0d1b3e;
  color: #90caf9;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.pwa-prompt > i { font-size: 18px; opacity: 0.7; flex-shrink: 0; }
.pwa-prompt > span { flex: 1; line-height: 1.4; }
.pwa-prompt-install {
  padding: 6px 14px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-prompt-install:hover { opacity: 0.85; }
.pwa-prompt-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.5;
  font-size: 14px;
  color: inherit;
  flex-shrink: 0;
}
.pwa-prompt-dismiss:hover { opacity: 1; }

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

/* App tagline beneath the h1 */
.app-tagline {
  font-size: 11px;
  opacity: 0.55;
  margin: -2px 0 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================================================
   Whimsy Pack — keyframes and feature styles
   =================================================== */

/* Affirmation toast */
@media (prefers-reduced-motion: no-preference) {
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.affirmation-toast {
  position: fixed;
  bottom: 130px;
  right: 16px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
  animation: toastIn 0.25s ease-out both;
}
.affirmation-toast.dark-mode {
  background: #1b3a1d;
  border-color: #388e3c;
  color: #a5d6a7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Progress bar flash on task completion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes progressFlash {
    0%   { background-color: #4caf50; }
    40%  { background-color: #c8e6c9; }
    100% { background-color: #4caf50; }
  }
  .progress-bar.flash {
    animation: progressFlash 0.4s ease-out;
  }
}

/* Current task row breathing glow */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rowBreath {
    0%, 100% { box-shadow: inset 3px 0 0 rgba(33,150,243,0.25); }
    50%       { box-shadow: inset 3px 0 0 rgba(33,150,243,0.7); }
  }
  .task-item.current.timer-running {
    animation: rowBreath 2s ease-in-out infinite;
  }
}
/* Without motion: just a static highlight */
.task-item.current.timer-running {
  box-shadow: inset 3px 0 0 rgba(33,150,243,0.5);
}

/* Task strike-through on completion */
.task-item.completed .task-name {
  position: relative;
  opacity: 0.55;
}
/* Without motion: instant line */
.task-item.completed .task-name::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.45;
  width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes strikeThrough {
    from { width: 0%; }
    to   { width: 100%; }
  }
  .task-item.completed .task-name::after {
    width: 0%;
    animation: strikeThrough 0.4s ease-out forwards;
  }
}

/* List-complete celebration overlay */
@media (prefers-reduced-motion: no-preference) {
  @keyframes celebrateIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
  }
}

.list-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.list-complete-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  pointer-events: auto;
  animation: celebrateIn 0.3s ease-out both;
}
.list-complete-overlay.dark-mode .list-complete-card {
  background: #2a2a2a;
}
.list-complete-card i.fas.fa-star {
  font-size: 40px;
  color: #f9a825;
  display: block;
  margin-bottom: 12px;
}
.list-complete-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #222;
}
.list-complete-overlay.dark-mode .list-complete-title {
  color: #f0f0f0;
}
.list-complete-sub {
  margin: 0;
  font-size: 13px;
  color: #777;
}
.list-complete-overlay.dark-mode .list-complete-sub {
  color: #999;
}

/* ===================================================
   Options full-screen overlay
   =================================================== */
.options-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.options-overlay.dark-mode {
  background: #1e1e1e;
}

.options-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.options-overlay.dark-mode .options-overlay-header {
  background: #2a2a2a;
  border-bottom-color: #3a3a3c;
}

.options-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #555;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.options-close-button:hover {
  background: rgba(0,0,0,0.06);
  color: #111;
}
.options-overlay.dark-mode .options-close-button {
  color: #aaa;
}
.options-overlay.dark-mode .options-close-button:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.options-overlay-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}
.options-overlay.dark-mode .options-overlay-title {
  color: #f0f0f0;
}

.options-overlay-body {
  padding: 16px;
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each section is a card inside the overlay */
.options-overlay-body .options-section {
  background: #fff;
  border-radius: 10px;
  padding: 4px 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.options-overlay.dark-mode .options-overlay-body .options-section {
  background: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.options-overlay-body .options-section-label {
  padding: 10px 16px 4px;
  margin: 0;
}
.options-overlay-body .option-row--toggle {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 16px;
  background: transparent;
}
.options-overlay-body .option-row--toggle:last-child {
  border-bottom: none;
}
.options-overlay.dark-mode .options-overlay-body .option-row--toggle {
  border-bottom-color: #3a3a3c;
}
.options-overlay.dark-mode .options-overlay-body .option-row--toggle label:first-child {
  color: #e8e8e8;
}
.options-overlay-body .option-row--field {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.options-overlay-body .option-row--field:last-child {
  border-bottom: none;
}
.options-overlay.dark-mode .options-overlay-body .option-row--field {
  border-bottom-color: #3a3a3c;
}
.options-overlay.dark-mode .options-overlay-body .option-row--field label:first-child {
  color: #aaa;
}
.options-overlay.dark-mode .options-overlay-body .option-row--field select,
.options-overlay.dark-mode .options-overlay-body .option-row--field input[type="text"] {
  background: #333;
  color: #f0f0f0;
  border-color: #4a4a4c;
}
.options-overlay.dark-mode .options-overlay-body .option-row--field select:focus,
.options-overlay.dark-mode .options-overlay-body .option-row--field input[type="text"]:focus {
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.15);
}

/* Help cards inside overlay */
.help-overlay-body {
  gap: 12px;
}
.help-card-overlay {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.options-overlay.dark-mode .help-card-overlay {
  background: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.help-card-overlay h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
  gap: 7px;
}
.options-overlay.dark-mode .help-card-overlay h3 {
  color: #f0f0f0;
}
.help-card-overlay h3 i {
  color: #2196f3;
  font-size: 15px;
}
.options-overlay.dark-mode .help-card-overlay h3 i {
  color: #90caf9;
}
.help-card-overlay .help-list {
  margin: 0;
  padding-left: 18px;
}
.help-card-overlay .help-list li {
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 4px;
}
.help-card-overlay .help-list li:last-child {
  margin-bottom: 0;
}
.options-overlay.dark-mode .help-card-overlay .help-list li {
  color: #bbb;
}

/* Compact task list */
#taskList.compact .task-item {
  padding: 5px 8px;
}
#taskList.compact .task-name {
  font-size: 13px;
}
#taskList.compact .task-time {
  font-size: 11px;
}

/* Warning pulse on footer */
@keyframes warning-pulse {
  0%, 100% { background-color: inherit; }
  50% { background-color: rgba(255, 80, 80, 0.12); }
}
.controls-footer.warning {
  animation: warning-pulse 1s ease-in-out infinite;
}
.controls-footer.warning .progress-bar {
  background: #e53935;
}

/* Task count in footer */
.timer-count {
  font-size: 12px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

/* Range input in settings */
.option-row--field input[type="range"] {
  width: 100%;
  box-sizing: border-box;
  accent-color: #2196f3;
  cursor: pointer;
}

/* Color input in settings */
.option-row--field input[type="color"] {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid #cdd2db;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}
.options-overlay.dark-mode .option-row--field input[type="color"] {
  border-color: #4a4a4c;
}

/* Basic page/container styling */
html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f0f2f5;
  color: #333;
}

.container {
  width: 90%;
  max-width: 650px;
  margin: 30px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px; /* consistent with other elements */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Boxes around relevant sections */
.section-box {
  border: 1px solid #ccc; /* unified border color */
  border-radius: 8px; /* increased radius for consistency */
  padding: 10px;
  margin-bottom: 15px;
  background: #fafafa;
}

/* Estimated finish time (unified styles) */
.estimated-finish {
  margin-top: 10px; /* unified margin-top */
  font-size: 16px; /* unified font-size */
  font-weight: bold; /* preserved bold */
  font-style: italic; /* added italic for consistency */
  text-align: center;
  color: #555;
}

/* ===================================================
   Options menu — settings card
   =================================================== */
.options-menu {
  display: none; /* toggled in code */
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #dde1e9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.options-menu h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #222;
  letter-spacing: 0.01em;
}

/* Section group: Audio, Voice, etc. */
.options-section {
  margin-bottom: 16px;
}
.options-section:last-child {
  margin-bottom: 0;
}

/* Small uppercase section heading */
.options-section-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2196f3;
}

/* Base row */
.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.option-row:last-child {
  margin-bottom: 0;
}

/* Label shared by both row variants */
.option-row label:first-child {
  font-size: 14px;
  color: #333;
  line-height: 1.3;
}

/* Toggle rows: label left, switch right, full width */
.option-row--toggle {
  justify-content: space-between;
  padding: 8px 10px;
  background: #f7f8fa;
  border-radius: 6px;
  border: 1px solid #e8eaf0;
}
.option-row--toggle label:first-child {
  flex: 1;
  font-weight: 500;
  color: #222;
}

/* Field rows: label fixed-width, input grows */
.option-row--field {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.option-row--field label:first-child {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  padding-left: 2px;
}
.option-row--field select,
.option-row--field input[type="text"] {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid #cdd2db;
  border-radius: 6px;
  background: #fff;
  color: #222;
  appearance: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.option-row--field select:focus,
.option-row--field input[type="text"]:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12);
}

/* --- Dark mode --- */
.options-menu.dark-mode {
  background: #252526;
  border-color: #3a3a3c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.options-menu.dark-mode h3 {
  color: #f0f0f0;
}
.options-menu.dark-mode .options-section-label {
  color: #90caf9;
}
.options-menu.dark-mode .option-row--toggle {
  background: #2e2e30;
  border-color: #3a3a3c;
}
.options-menu.dark-mode .option-row--toggle label:first-child {
  color: #e8e8e8;
}
.options-menu.dark-mode .option-row--field label:first-child {
  color: #aaa;
}
.options-menu.dark-mode .option-row--field select,
.options-menu.dark-mode .option-row--field input[type="text"] {
  background: #333;
  color: #f0f0f0;
  border-color: #4a4a4c;
}
.options-menu.dark-mode .option-row--field select:focus,
.options-menu.dark-mode .option-row--field input[type="text"]:focus {
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.15);
}

/* Preserve legacy .option-row label rule for any unmodified rows */
.option-row label {
  font-size: 14px;
  color: #333;
}
.option-row.dark-mode label {
  color: #fff;
}

/* === Tab bar === */
.tabs-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8eaf0;
  margin-bottom: 14px;
}
html.dark-mode .tabs-container {
  border-bottom-color: #2a2a2a;
}

.tab {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: #555;
  padding: 5px 8px 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  user-select: none;
  border: 1.5px solid transparent;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab:hover {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
}
.tab.active {
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}
.tab.active:hover {
  background: #1e88e5;
}
.tab.dragging {
  opacity: 0.55;
  outline: 2px dashed #2196f3;
  outline-offset: 1px;
}

/* Dark mode tabs */
html.dark-mode .tab        { color: #888; }
html.dark-mode .tab:hover  { background: rgba(144, 202, 249, 0.1); color: #90caf9; }
html.dark-mode .tab.active { background: #1565c0; color: #fff; }
html.dark-mode .tab.active:hover { background: #1976d2; }

/* Tab name */
.tab-name {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task count badge */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.tab.active .tab-count              { background: rgba(255, 255, 255, 0.28); }
html.dark-mode .tab .tab-count      { background: rgba(255, 255, 255, 0.08); }
html.dark-mode .tab.active .tab-count { background: rgba(255, 255, 255, 0.22); }

/* Tab ellipsis — hidden until hover/focus; always visible on active tab */
.tab-menu-btn {
  opacity: 0;
  flex-shrink: 0;
  padding: 2px 3px;
  transition: opacity 0.12s;
}
.tab:hover .tab-menu-btn,
.tab.active .tab-menu-btn,
.tab:focus-within .tab-menu-btn { opacity: 1; }

/* Rename input inside the tab pill */
.tab-edit-input {
  min-width: 72px;
  max-width: 120px;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  outline: none;
}
.tab-edit-input::placeholder { color: rgba(255, 255, 255, 0.55); }

/* Add-list button — small dashed circle at end of tab row */
.tab-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  color: #2196f3;
  border: 1.5px dashed #2196f3;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tab-add-btn:hover { background: rgba(33, 150, 243, 0.1); }
html.dark-mode .tab-add-btn       { color: #90caf9; border-color: #90caf9; }
html.dark-mode .tab-add-btn:hover { background: rgba(144, 202, 249, 0.1); }

/* Inline list-creation chip — animates in alongside the other tabs */
.tab-create-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(33, 150, 243, 0.07);
  border: 1.5px solid #2196f3;
  border-radius: 20px;
  padding: 3px 5px 3px 12px;
  animation: tab-pop-in 0.15s ease;
}
html.dark-mode .tab-create-inline {
  background: rgba(144, 202, 249, 0.06);
  border-color: #1976d2;
}
@keyframes tab-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.tab-create-inline input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  width: 96px;
  padding: 2px 0;
}
html.dark-mode .tab-create-inline input { color: #eee; }
.tab-create-inline input::placeholder   { color: #aaa; }

.tab-create-save,
.tab-create-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.tab-create-save            { color: #2196f3; }
.tab-create-save:hover      { background: rgba(33, 150, 243, 0.15); }
.tab-create-cancel          { color: #f44336; }
.tab-create-cancel:hover    { background: rgba(244, 67, 54, 0.12); }
html.dark-mode .tab-create-save   { color: #90caf9; }
html.dark-mode .tab-create-cancel { color: #ef9a9a; }

.btn-cancel {
  background: #f44336 !important;
}

.btn-cancel:hover {
  background: #e53935 !important;
}

/* Task input fields */
.task-input {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0; /* replaced by .section-box spacing */
}

.task-input input,
.task-input select {
  flex: 1;
  min-width: 100px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.task-input button {
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

.task-input button:hover {
  background: #43a047;
}

/* Task list styling */
#taskList {
  list-style: none;
  padding: 0 0 80px 0;
  margin: 0;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer; /* click to set current task */
  gap: 10px;
}
/* YouTube rows: top-align so embed/thumb don't stretch weird */
.task-item:has(.yt-embed-wrapper),
.task-item:has(.yt-thumb-wrapper) {
  align-items: center;
}
.task-item:has(.yt-embed-wrapper) {
  align-items: flex-start;
}

.task-item .task-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.task-item .task-details .task-name {
  font-weight: bold;
  margin-bottom: 2px;
}

.task-item .task-details .task-time {
  font-size: 14px;
}

.task-actions {
  display: flex;
  gap: 5px;
  position: relative; /* contains the menu-popover so it anchors to the actions area */
  cursor: default; /* prevents changing the current task when clicking these controls */
  align-items: center;
  flex-shrink: 0;
}

/* Editing row: highlight and hide the side action column */
.task-item.editing {
  background: rgba(33, 150, 243, 0.05);
  border-left: 3px solid #2196f3;
  padding-left: 5px;
}
.task-item.editing.dark-mode {
  background: rgba(100, 181, 246, 0.08);
  border-left-color: #64b5f6;
}
.task-item.editing .task-actions {
  display: none;
}

.task-actions button {
  border: none;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  font-size: 12px;
}

/* Drag handle for task reordering */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 10px 0 4px;
  cursor: grab;
  color: #bbb;
  touch-action: none;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  font-size: 14px;
}
.drag-handle:active {
  cursor: grabbing;
  color: #888;
}

/* Remove background on hover for ellipsis triggers to keep them clean */
.task-actions button:hover {
  background: transparent;
}

/* YouTube embed block inside tasks (current task, full width) */
.yt-embed-wrapper {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #000;
}
.task-item.dark-mode .yt-embed-wrapper {
  border-color: #444;
}

/* YouTube thumbnail preview (non-current tasks) */
.yt-thumb-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.yt-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.yt-thumb-wrapper:hover .yt-thumb {
  opacity: 1;
}
.yt-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* Timer section */
.timer-section {
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 8px; /* consistent radius */
  padding: 10px;
  background: #fafafa;
  margin-bottom: 15px;
}

.progress-container {
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
  height: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.progress-bar {
  background: #4caf50;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 5px;
}

.timer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
}

.timer-text,
.timer-percent {
  margin: 4px 0;
}

/* Timer controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.controls button {
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-start { background: #4caf50; }
.btn-start:hover { background: #43a047; }

.btn-skip { background: #ff9800; }
.btn-skip:hover { background: #fb8c00; }

.btn-complete { background: #2196f3; }
.btn-complete:hover { background: #1976d2; }

.btn-pause { background: #757575; }
.btn-pause:hover { background: #616161; }

.btn-red { background: #f44336; }
.btn-red:hover { background: #e53935; }

.btn-pip {
  background: #546e7a;
  padding: 8px 10px;
}
.btn-pip:hover { background: #455a64; }
.btn-pip--active { background: #0288d1; }
.btn-pip--active:hover { background: #0277bd; }

/* Current task highlight */
.task-item.current {
  background: rgba(33, 150, 243, 0.08);
  border-left: 3px solid #2196f3;
  padding-left: 5px;
}
.task-item.current.dark-mode {
  background: rgba(100, 181, 246, 0.12);
  border-left: 3px solid #64b5f6;
}

/* Inline task editing */
.task-edit-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 2px 0;
}

.task-edit-inline input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

.dark-mode .task-edit-inline input {
  background: #333;
  border-color: #555;
  color: #fff;
}

.task-edit-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-edit-time-row input {
  max-width: 80px;
  width: auto !important;
}

.task-edit-unit {
  font-size: 12px;
  color: #777;
}

.dark-mode .task-edit-unit {
  color: #aaa;
}

.task-edit-unit-select {
  flex-shrink: 0;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.dark-mode .task-edit-unit-select {
  background: #333;
  border-color: #555;
  color: #fff;
}

.task-edit-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.task-edit-save,
.task-edit-cancel {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}

.task-edit-save {
  background: #4caf50;
}
.task-edit-save:hover { background: #43a047; }

.task-edit-cancel {
  background: #757575;
}
.task-edit-cancel:hover { background: #616161; }

/* Help menu grid layout */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.help-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
}

.help-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.help-menu.dark-mode .help-card {
  background: #333;
  border-color: #555;
}

.help-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.help-list li {
  margin-bottom: 4px;
}

.kbd {
  display: inline-block;
  background: #eee;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.6;
}

.dark-mode .kbd {
  background: #444;
  border-color: #666;
  color: #eee;
}

.btn-chip {
  display: inline-block;
  background: #2196f3;
  color: #fff;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.6;
}

.dots {
  font-weight: bold;
  letter-spacing: 2px;
}

/* Current task label in timer */
.timer-task-name {
  font-weight: bold;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.timer-section.dark-mode .timer-task-name {
  color: #eee;
}

/* Import/Export */
/* Import/Export now lives in the header (.io-menu-*); the old bottom-bar
   styles (.import-export, .btn-export, #importFileBttn, .io-status, ...)
   were removed when the bar was deleted. */

/* Responsive adjustments */
@media (max-width: 400px) {
  .task-input,
  .controls,
  .import-section {
    flex-direction: column;
  }
  /* .task-actions intentionally not overridden here — the 768px block sets row layout
     and takes precedence since it appears later in the file */
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header gear button for toggling options */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* Header buttons */
.header-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.gear-button,
.help-button,
.stats-button,
.feedback-button,
.data-button {
  background: transparent;
  border: none;
  color: #2196f3;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}

.gear-button:hover,
.help-button:hover,
.stats-button:hover,
.feedback-button:hover,
.data-button:hover {
  color: #1976d2;
}

/* ===================================================
   Backup & Restore (Data) overlay
   Mirrors .help-card-overlay / .options-section structure exactly so it
   feels like a sibling of the Help and Settings pages.
   =================================================== */
.data-overlay-body {
  gap: 12px;
}

.data-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.options-overlay.dark-mode .data-card {
  background: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.data-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
  gap: 7px;
}
.options-overlay.dark-mode .data-card h3 {
  color: #f0f0f0;
}
.data-card h3 i {
  color: #2196f3;
  font-size: 15px;
}
.options-overlay.dark-mode .data-card h3 i {
  color: #90caf9;
}

.data-card-text {
  margin: 0 0 12px;
  font-size: 13px;
  color: #444;
  line-height: 1.55;
}
.options-overlay.dark-mode .data-card-text {
  color: #bbb;
}

.data-card-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}
.options-overlay.dark-mode .data-card-note {
  color: #888;
}
.data-card-note--muted {
  font-style: italic;
}

.data-card-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
}
.data-card-bullets li {
  font-size: 12.5px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 3px;
}
.data-card-bullets li:last-child { margin-bottom: 0; }
.data-card-bullets code {
  background: rgba(33, 150, 243, 0.08);
  color: #1976d2;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: 'Courier New', Courier, monospace;
}
.options-overlay.dark-mode .data-card-bullets li {
  color: #aaa;
}
.options-overlay.dark-mode .data-card-bullets code {
  background: rgba(144, 202, 249, 0.12);
  color: #90caf9;
}

/* Summary stats row inside the "Your data" card */
.data-summary {
  display: flex;
  gap: 10px;
  margin: 6px 0 4px;
}
.data-summary-item {
  flex: 1;
  background: #f5f7fa;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  min-width: 0;
}
.options-overlay.dark-mode .data-summary-item {
  background: #1e1e1e;
  border-color: #3a3a3c;
}
.data-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #2196f3;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.options-overlay.dark-mode .data-summary-value {
  color: #90caf9;
}
.data-summary-label {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.options-overlay.dark-mode .data-summary-label {
  color: #888;
}

/* Big primary action buttons inside data cards */
.data-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}
.data-action-btn:active {
  transform: scale(0.985);
}
.data-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.data-action-btn--primary {
  background: #2196f3;
  color: #fff;
}
.data-action-btn--primary:hover:not(:disabled) {
  background: #1976d2;
}
.options-overlay.dark-mode .data-action-btn--primary,
.share-modal-backdrop.dark-mode .data-action-btn--primary {
  background: #1976d2;
}
.options-overlay.dark-mode .data-action-btn--primary:hover:not(:disabled),
.share-modal-backdrop.dark-mode .data-action-btn--primary:hover:not(:disabled) {
  background: #1565c0;
}
.data-action-btn--secondary {
  background: transparent;
  color: #2196f3;
  border: 1.5px solid #2196f3;
}
.data-action-btn--secondary:hover:not(:disabled) {
  background: rgba(33, 150, 243, 0.08);
}
.options-overlay.dark-mode .data-action-btn--secondary,
.share-modal-backdrop.dark-mode .data-action-btn--secondary {
  color: #90caf9;
  border-color: #90caf9;
}
.options-overlay.dark-mode .data-action-btn--secondary:hover:not(:disabled),
.share-modal-backdrop.dark-mode .data-action-btn--secondary:hover:not(:disabled) {
  background: rgba(144, 202, 249, 0.10);
}
.data-action-btn i {
  font-size: 16px;
}

/* ===================================================
   Feedback overlay
   =================================================== */
.feedback-overlay-body {
  max-width: 980px;
  flex: 1;
  min-height: 0;
}

.feedback-card {
  padding: 16px;
}

.feedback-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feedback-card-header h3 {
  margin: 0;
}

.feedback-open-link {
  width: auto;
  flex-shrink: 0;
  text-decoration: none;
}

.feedback-embed-shell {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  min-height: clamp(620px, calc(100dvh - 220px), 1200px);
}
.options-overlay.dark-mode .feedback-embed-shell {
  background: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.feedback-embed-frame {
  display: block;
  width: 100%;
  height: clamp(620px, calc(100dvh - 220px), 1200px);
  border: 0;
  background: #fff;
}

/* ===================================================
   Stats share buttons + share-card modal
   =================================================== */
.stats-share-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.stats-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.stats-share-btn:hover { background: #1976d2; }
.stats-share-btn:active { transform: scale(0.98); }
.stats-share-btn i { font-size: 14px; }
.dark-mode .stats-share-btn { background: #1976d2; }
.dark-mode .stats-share-btn:hover { background: #1565c0; }

.stats-share-btn--inline {
  padding: 8px 14px;
  font-size: 12px;
  margin-right: 8px;
}

/* Share modal — sits above the stats overlay */
.share-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: shareBackdropIn 0.18s ease-out;
}
@keyframes shareBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.share-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: shareModalIn 0.22s ease-out;
}
.share-modal-backdrop.dark-mode .share-modal {
  background: #1e1e1e;
}
@keyframes shareModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.share-modal-backdrop.dark-mode .share-modal-header {
  border-bottom-color: #3a3a3c;
}
.share-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}
.share-modal-backdrop.dark-mode .share-modal-title {
  color: #f0f0f0;
}
.share-modal .options-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #555;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.share-modal .options-close-button:hover {
  background: rgba(0,0,0,0.06);
  color: #111;
}
.share-modal-backdrop.dark-mode .share-modal .options-close-button { color: #aaa; }
.share-modal-backdrop.dark-mode .share-modal .options-close-button:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.share-modal-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.share-modal-hint {
  margin: 0;
  font-size: 12.5px;
  color: #777;
  text-align: center;
  line-height: 1.5;
}
.share-modal-backdrop.dark-mode .share-modal-hint { color: #888; }

.share-canvas-frame {
  background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.share-modal-backdrop.dark-mode .share-canvas-frame {
  background: linear-gradient(180deg, #0f1922 0%, #1e3a5f 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.share-canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.share-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.share-modal-actions .data-action-btn {
  flex: 1 1 140px;
}

/* Inline status banner — shown inside the overlay after import/export */
.data-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.data-status i { font-size: 16px; }
.data-status--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.data-status--error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.data-status.dark-mode.data-status--success {
  background: #1b3a1f;
  color: #81c784;
  border-color: #388e3c;
}
.data-status.dark-mode.data-status--error {
  background: #3b1a1a;
  color: #ef9a9a;
  border-color: #c62828;
}

/* Floating IO status toast (replaces the old bottom-bar status line) */
.io-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  max-width: 86vw;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 2000;
  pointer-events: none;
  animation: ioToastIn 0.18s ease-out;
}
@keyframes ioToastIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.io-toast--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.io-toast--error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.io-toast.dark-mode.io-toast--success {
  background: #1b3a1f;
  color: #81c784;
  border-color: #388e3c;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.io-toast.dark-mode.io-toast--error {
  background: #3b1a1a;
  color: #ef9a9a;
  border-color: #c62828;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Help page footer — version + repo link */
.help-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 2px;
  gap: 8px;
}

.help-footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2196f3;
  text-decoration: none;
}

.help-footer-link:hover {
  text-decoration: underline;
}

.help-footer-version {
  font-size: 11px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

.options-overlay.dark-mode .help-footer-link {
  color: #90caf9;
}

.options-overlay.dark-mode .help-footer-version {
  color: #666;
}

/* ── Buy Me a Coffee button ── */
.help-footer {
  flex-wrap: wrap;
}
.help-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bmc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  background: #2196f3;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  line-height: 1;
}
.bmc-btn:hover { opacity: 0.85; }
.dark-mode .bmc-btn {
  background: #1565c0;
  color: #e3f2fd;
}

/* Help Menu */
.help-menu {
  display: none;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 8px;
  padding: 10px;
}

.help-menu h3 {
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.help-menu ul {
  margin: 10px 0;
  padding-left: 20px;
}

.help-menu li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Toggle switch container (used in tasks and options) */
.enable-checkbox-wrapper {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

/* Hide the default checkbox */
.enable-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom toggle switch background */
.enable-checkbox-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 1px solid #bbb;
}

/* Knob inside the toggle switch */
.enable-checkbox-label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* When checkbox is checked */
.enable-checkbox:checked + .enable-checkbox-label {
  background-color: #4caf50;
  border-color: #43a047;
}

.enable-checkbox:checked + .enable-checkbox-label::after {
  transform: translateX(20px);
}

/* Dark mode styles */
html.dark-mode {
  background: #121212;
  color: #ffffff;
}

body.dark-mode {
  background: #121212;
  color: #ffffff;
}

.container.dark-mode {
  background: #1e1e1e;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
}

.section-box.dark-mode {
  background: #2a2a2a;
}

.options-menu.dark-mode,
.help-menu.dark-mode {
  background: #2a2a2a;
  border-color: #444;
}

/* .tab dark-mode rules moved to html.dark-mode .tab selectors above */

.task-item.dark-mode {
  border-bottom: 1px solid #444;
}

.progress-container.dark-mode {
  background: #333; /* only override differs from light mode */
}

.progress-bar.dark-mode {
  background: #76c7c0;
}

/* Dark mode toggle button */
.dark-mode-button {
  background: transparent;
  border: none;
  color: #2196f3;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}

.dark-mode-button:hover {
  color: #1976d2;
}

.task-input.dark-mode input,
.task-input.dark-mode select {
  flex: 1;
  min-width: 100px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #333;
  color: #fff;
}

.timer-section.dark-mode {
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  background: #2a2a2a;
  color: #eee;
}

.timer-info.dark-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #fff;
}

.estimated-finish.dark-mode {
  margin-top: 10px; /* unified margin-top */
  font-size: 16px; /* unified font-size */
  font-weight: bold; /* preserved bold */
  font-style: italic; /* added italic for consistency */
  text-align: center;
  color: #fff;
}

.option-row.dark-mode label {
  color: #fff;
}

.task-input.dark-mode input::placeholder {
  color: #fff;
}

.tab-edit-input.dark-mode {
  min-width: 100px;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #333;
  color: #fff;
}

/* === Small icon button (… triggers) === */
.icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
}

/* Ellipsis buttons: default white, no background; tasks in light mode should appear black */
.ellipsis-button { color: #fff; } /* default white */
html:not(.dark-mode) .task-actions .ellipsis-button { color: #000; } /* black for task ellipsis in light mode */
/* Keep tabs' ellipsis visible in both modes for contrast */
.tab .ellipsis-button { color: #555; }
.tab.active .ellipsis-button { color: #fff; }
html.dark-mode .tab .ellipsis-button { color: #aaa; }

/* Remove hover background to keep "no background" appearance */
.icon-button:hover { opacity: 0.8; background: transparent; }

/* === Menu popover === */
.menu-popover {
  position: absolute;
  min-width: 160px;
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 6px 0;
  z-index: 1000;
}
.menu-popover.dark-mode {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.menu-item {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-item:hover { background: rgba(0,0,0,0.05); }
.dark-mode .menu-item { color: #fff; }
.dark-mode .menu-item:hover { background: rgba(255,255,255,0.08); }

.menu-danger { color: #e53935; }
.dark-mode .menu-danger { color: #ff6b63; }

.menu-danger--confirm {
  background: rgba(229, 57, 53, 0.1);
  font-weight: 600;
}
.dark-mode .menu-danger--confirm {
  background: rgba(239, 83, 80, 0.15);
}

/* Ensure clickable area for ellipsis is visually aligned in both modes */
.ellipsis-button { padding: 4px 6px; }

/* Anchor popovers reliably */
.task-item { position: relative; }
.tab { position: relative; }

/* Raise the task row whose menu is open above sibling rows and the sticky footer
   (z-index: 100) so the popover is never clipped or covered. */
.task-item--menu-open { z-index: 150; }

/* Dragging hint */
.task-item.dragging,
.tab.dragging { opacity: 0.8; }

/* ===================================================
   Sticky controls footer
   =================================================== */
.controls-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #e0e0e0;
  z-index: 100;
}
.controls-footer.dark-mode {
  background: #1e1e1e;
  border-top-color: #333;
}
.controls-footer .timer-section {
  margin-top: 0;
  margin-bottom: 8px;
}
.controls-footer .controls {
  margin-bottom: 0;
}
.controls-footer {
  margin-bottom: 24px;
}
/* (.import-export bottom-bar removed; controls live in the header now) */

/* ===================================================
   Mobile layout (768px and below)
   =================================================== */
@media (max-width: 768px) {

  /* --- Container: edge-to-edge --- */
  .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* --- Header: compact --- */
  header {
    margin-bottom: 8px;
  }
  h1 {
    font-size: 18px;
    margin-bottom: 0;
  }
  .gear-button,
  .help-button,
  .stats-button,
  .feedback-button,
  .dark-mode-button,
  .data-button,
  .header-overflow-btn {
    font-size: 20px;
    padding: 4px 6px;
    min-height: 40px;
    min-width: 40px;
  }
  .header-buttons {
    gap: 4px;
  }

  .feedback-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .feedback-open-link {
    width: 100%;
  }

  .feedback-embed-shell,
  .feedback-embed-frame {
    min-height: calc(100dvh - 245px);
    height: calc(100dvh - 245px);
  }

  /* --- Section boxes: tighter on mobile --- */
  .section-box {
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .estimated-finish {
    margin-top: 0;
    font-size: 14px;
  }

  /* --- Tabs: horizontal scroll, single row --- */
  .tabs-scroll-wrapper {
    position: relative;
    margin-bottom: 10px;
  }
  /* Right fade — always visible when overflowing */
  .tabs-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 44px;
    height: calc(100% - 10px); /* stop above the border-bottom */
    pointer-events: none;
    background: linear-gradient(to left, #fff 30%, transparent);
    z-index: 1;
    transition: opacity 0.2s;
  }
  /* Left fade — only after user has scrolled */
  .tabs-scroll-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 44px;
    height: calc(100% - 10px);
    pointer-events: none;
    background: linear-gradient(to right, #fff 30%, transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .tabs-scroll-wrapper.has-scrolled::before { opacity: 1; }
  .tabs-scroll-wrapper.no-overflow::after   { opacity: 0; }
  /* Dark mode fades */
  html.dark-mode .tabs-scroll-wrapper::after  { background: linear-gradient(to left,  #1e1e1e 30%, transparent); }
  html.dark-mode .tabs-scroll-wrapper::before { background: linear-gradient(to right, #1e1e1e 30%, transparent); }

  .tabs-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 4px;
    padding-bottom: 8px;
    margin-bottom: 0; /* handled by wrapper now */
  }
  .tabs-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .tab {
    flex-shrink: 0; /* never shrink — scroll instead */
    font-size: 12px;
    padding: 4px 7px 4px 9px;
  }
  .tab-name {
    max-width: 90px;
  }
  .tab-count {
    font-size: 10px;
    min-width: 16px;
    height: 16px;
  }
  .tab-add-btn {
    flex-shrink: 0;
  }
  .tab-add-btn {
    width: 26px;
    height: 26px;
  }

  /* --- Task input: name full-width, then time + unit + btn on one row --- */
  .task-input {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .task-input input[type="text"] {
    flex: 1 1 100%;
    font-size: 16px; /* prevents iOS auto-zoom */
    box-sizing: border-box;
    min-width: 0;
  }
  .task-input input[type="number"] {
    flex: 1 1 64px;
    min-width: 64px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .task-input select {
    flex: 2 1 110px;
    min-width: 110px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .task-input button {
    flex: 0 0 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
  }

  /* --- Touch targets: 44px min per Apple HIG --- */
  .controls button,
  .btn-export,
  #importFileBttn {
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Controls footer: icon-only, spread full width --- */
  .controls {
    gap: 6px;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  .controls button {
    flex: 1 1 0;
    justify-content: center;
    font-size: 0; /* hide text labels — icons only */
    padding: 0;
    min-height: 44px;
    border-radius: 8px;
  }
  .controls button i {
    font-size: 18px;
  }

  /* --- Task items: compact single-line pills on mobile --- */
  .task-item {
    padding: 8px;
    align-items: center; /* vertically center drag handle, details, and actions */
    gap: 6px;
  }
  .drag-handle {
    padding: 0 6px 0 2px; /* tighter on mobile */
  }
  .task-item .task-details {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
  }
  .task-item .task-details .task-name {
    margin-bottom: 0;
  }
  .task-item .task-details .task-time {
    font-size: 12px;
    opacity: 0.65;
    white-space: nowrap;
  }
  .task-actions {
    flex-direction: row;
    align-items: center;
  }

  /* --- Timer section: compact --- */
  .timer-section {
    padding: 8px 10px;
  }
  .timer-info {
    font-size: 13px;
  }

  /* --- iPhone home bar safe area --- */
  .controls-footer {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  /* --- Options/help menus: bleed edge-to-edge --- */
  .options-menu,
  .help-menu {
    border-radius: 0;
    margin-left: -14px;
    margin-right: -14px;
    border-left: none;
    border-right: none;
  }

  /* Options: tighter padding on mobile, 16px font to prevent iOS zoom */
  .options-menu {
    padding: 12px;
  }
  .option-row--toggle {
    padding: 10px 12px;
    min-height: 44px; /* touch target */
  }
  .option-row--field select,
  .option-row--field input[type="text"] {
    font-size: 16px; /* prevents iOS auto-zoom */
    min-height: 44px;
  }

  /* Help grid: single column */
  .help-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .help-card {
    padding: 10px 12px;
  }

}

/* === Remaining countdown in sticky footer (item 2) === */
.timer-remaining {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: bold;
  color: #2196f3;
  letter-spacing: 0.05em;
}
.timer-section.dark-mode .timer-remaining { color: #90caf9; }

/* === Empty state (item 3) === */
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: #aaa;
  font-style: italic;
  font-size: 14px;
}
.empty-state i {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.4;
}
.empty-state p { margin: 0; }
.container.dark-mode .empty-state { color: #666; }

/* === Disabled task visual styling (item 4) === */
.task-item.disabled { cursor: default; }
.task-item.disabled .task-details { opacity: 0.45; }
.task-item.disabled .task-name { text-decoration: line-through; }

/* === Panel animation (item 5) === */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-menu[style*="block"],
.options-menu[style*="block"] {
  animation: fadeSlideDown 0.18s ease;
}

/* === Running state indicator (item 9) === */
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.controls-footer.running .progress-bar {
  animation: progress-pulse 2s ease-in-out infinite;
}
.controls-footer.running {
  border-top-color: #2196f3;
}
.controls-footer.dark-mode.running {
  border-top-color: #64b5f6;
}

/* === Dark mode option panel selects (item 11) — handled by .option-row--field rules above === */

/* === Desktop hover-only drag handles (item 12) === */
@media (hover: hover) {
  .drag-handle {
    opacity: 0;
    transition: opacity 0.15s;
  }
  .task-item:hover .drag-handle {
    opacity: 1;
  }
}

/* === Whimsy: empty state breathing === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes emptyPulse {
    0%, 100% { transform: scale(1);    opacity: 0.4; }
    50%       { transform: scale(1.14); opacity: 0.75; }
  }
  .empty-state i {
    display: inline-block;
    animation: emptyPulse 3s ease-in-out infinite;
  }
}

/* === Whimsy: drag handle spreads on hover === */
.drag-handle i {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .drag-handle:hover i {
    transform: scaleX(1.35);
    opacity: 0.85;
  }
}

/* === Whimsy: start button sonar ring === */
@keyframes btnRing {
  0%   { box-shadow: 0 0 0 0   rgba(33,150,243,0.6); }
  100% { box-shadow: 0 0 0 18px rgba(33,150,243,0); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn-start.btn-start--pulse {
    animation: btnRing 0.4s ease-out forwards;
  }
}

/* === Whimsy: task left-border transition (edit/current/hover) === */
.task-item {
  transition: border-left-color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
}

/* === Whimsy: new task slide-in === */
@keyframes taskSlideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .task-item--new {
    animation: taskSlideIn 0.25s ease-out both;
  }
}

/* === Whimsy: skip swipe === */
@keyframes skipOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}
@keyframes skipIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .task-item--skip-out { animation: skipOut 0.22s ease-in  both; }
  .task-item--skip-in  { animation: skipIn  0.22s ease-out both; }
}

/* === Whimsy: drag-drop landing ripple === */
@keyframes dropLine {
  0%   { transform: scaleX(0); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .task-item--dropped::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: #2196f3;
    transform-origin: left center;
    animation: dropLine 0.45s ease-out forwards;
    pointer-events: none;
  }
}

/* === Whimsy: warning digits jitter red === */
@keyframes warnJitter {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-1.5px); }
  75%       { transform: translateX(1.5px); }
}
/* Colour applies always; motion only without prefers-reduced-motion */
.timer-remaining--warn { color: #e53935; }
@media (prefers-reduced-motion: no-preference) {
  .timer-remaining--warn {
    animation: warnJitter 0.7s ease-in-out infinite;
    display: inline-block;
  }
}

/* === Whimsy: last-5s countdown zoom === */
@keyframes countdownZoom {
  0%   { transform: scale(1.00); }
  20%  { transform: scale(1.04); }
  40%  { transform: scale(1.08); }
  60%  { transform: scale(1.11); }
  80%  { transform: scale(1.13); }
  100% { transform: scale(1.00); }
}
@media (prefers-reduced-motion: no-preference) {
  .timer-remaining--countdown {
    display: inline-block;
    animation: countdownZoom 5s linear both;
    transform-origin: center;
  }
}

/* === Whimsy: new list tab spring arrival === */
@keyframes tabArrive {
  from { opacity: 0; transform: scale(0.72) translateY(5px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .tab--arrived {
    animation: tabArrive 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

/* === Whimsy: deleted tab shrink-out === */
@keyframes tabRemove {
  from { opacity: 1; transform: scale(1);   max-width: 200px; padding-left: 9px; padding-right: 7px; }
  to   { opacity: 0; transform: scale(0.8); max-width: 0;     padding-left: 0;  padding-right: 0; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .tab--removing {
    overflow: hidden;
    pointer-events: none;
    animation: tabRemove 0.2s ease-in both;
  }
}

/* === Tab scroll nudge (one-time hint animation) === */
@keyframes tabs-nudge {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(-16px); }
  62%  { transform: translateX(-7px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .tabs-container.tabs-nudge {
    animation: tabs-nudge 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
  }
}

/* === Stats overlay === */
.stats-overlay-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section heading */
.stats-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #aaa;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 0;
}
.stats-block-label--section {
  margin-top: 20px;
}
.options-overlay.dark-mode .stats-block-label { color: #666; }

.stats-list-count {
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.options-overlay.dark-mode .stats-list-count {
  background: #1a2a3a;
  color: #90caf9;
}

/* Global block */
.stats-global-block {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 16px;
}
.stats-global-block.dark-mode {
  background: #2a2a2a;
  border-color: #3a3a3c;
}

/* Hero row — 3 big numbers */
.stats-hero {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.stat-hero-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(145deg, #e3f2fd 0%, #ede7f6 100%);
  border-radius: 10px;
  padding: 14px 8px 10px;
}
.stats-global-block.dark-mode .stat-hero-item {
  background: linear-gradient(145deg, #1a2535 0%, #231a35 100%);
}
.stat-hero-value {
  font-size: 26px;
  font-weight: 800;
  color: #1565c0;
  line-height: 1.1;
}
.stats-global-block.dark-mode .stat-hero-value { color: #90caf9; }
.stat-hero-label {
  font-size: 10px;
  color: #777;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-global-block.dark-mode .stat-hero-label { color: #888; }

/* Stat card grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stats-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Stat card */
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #efefef;
  border-radius: 9px;
  padding: 10px 6px;
  text-align: center;
}
.stats-global-block.dark-mode .stat-card,
.stats-accordion-item.dark-mode .stat-card {
  background: #323232;
  border-color: #444;
}

.stat-card-icon {
  font-size: 14px;
  color: #2196f3;
  margin-bottom: 5px;
}
.stat-card-value {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}
.stats-global-block.dark-mode .stat-card-value,
.stats-accordion-item.dark-mode .stat-card-value { color: #f0f0f0; }

.stat-card-value--sm {
  font-size: 12px;
  word-break: break-word;
  line-height: 1.3;
}
.stat-card-label {
  font-size: 10px;
  color: #888;
  margin-top: 3px;
}
.stats-global-block.dark-mode .stat-card-label,
.stats-accordion-item.dark-mode .stat-card-label { color: #999; }

/* Accordion */
.stats-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-accordion-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
}
.stats-accordion-item.dark-mode {
  background: #2a2a2a;
  border-color: #3a3a3c;
}
.stats-accordion-item.is-current {
  border-color: #2196f3;
  box-shadow: 0 0 0 1px rgba(33,150,243,0.25);
}
.stats-accordion-item.dark-mode.is-current {
  border-color: #64b5f6;
  box-shadow: 0 0 0 1px rgba(100,181,246,0.2);
}

.stats-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.stats-accordion-header:hover {
  background: rgba(0,0,0,0.03);
}
.stats-accordion-item.dark-mode .stats-accordion-header:hover {
  background: rgba(255,255,255,0.04);
}
.stats-accordion-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-accordion-item.dark-mode .stats-accordion-name { color: #e8e8e8; }
.stats-accordion-meta {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}
.stats-accordion-chevron {
  font-size: 11px;
  color: #bbb;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.stats-accordion-header.is-open .stats-accordion-chevron {
  transform: rotate(180deg);
}

/* Accordion body animation (grid-template-rows trick) */
.stats-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.stats-accordion-body.is-open {
  grid-template-rows: 1fr;
}
.stats-accordion-body-inner {
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: border-color 0.22s ease;
}
.stats-accordion-body.is-open .stats-accordion-body-inner {
  border-top-color: #f0f0f0;
}
.stats-accordion-item.dark-mode .stats-accordion-body.is-open .stats-accordion-body-inner {
  border-top-color: #3a3a3c;
}

.stats-accordion-grid {
  padding: 12px;
}

.stats-accordion-footer {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-reset-btn {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #bbb;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stats-reset-btn:hover { color: #e53935; }
.stats-accordion-item.dark-mode .stats-reset-btn { color: #555; }
.stats-accordion-item.dark-mode .stats-reset-btn:hover { color: #ef5350; }

/* ===================================================
   Whimsy Pack 3 — Add / Delete / Edit interactions
   =================================================== */

/* === Menu popover spring entrance === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes menuPopIn {
    from { opacity: 0; transform: scale(0.85) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }
  .menu-popover {
    animation: menuPopIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

/* === Add button: shake on reject === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes addBtnReject {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(3px); }
  }
  .btn--rejected {
    animation: addBtnReject 0.35s ease both;
  }
}

/* === Add button: flash on success === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes addBtnConfirm {
    0%   { transform: scale(1);    background: #2196f3; }
    40%  { transform: scale(1.18); background: #4caf50; }
    70%  { transform: scale(0.95); background: #43a047; }
    100% { transform: scale(1);    background: #2196f3; }
  }
  .btn--added {
    animation: addBtnConfirm 0.35s ease both;
  }
}

/* === Task name input: glow on success === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes inputConfirm {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); border-color: #ccc; }
    30%  { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.35); border-color: #4caf50; }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); border-color: #ccc; }
  }
  .input--confirmed {
    animation: inputConfirm 0.5s ease both;
  }
}

/* === Delete: row slide+collapse exit === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes taskSlideOut {
    0%   { opacity: 1; transform: translateX(0);    max-height: 200px; margin-bottom: 0; }
    40%  { opacity: 0; transform: translateX(30px); max-height: 200px; margin-bottom: 0; }
    100% { opacity: 0; transform: translateX(30px); max-height: 0;     margin-bottom: -1px; }
  }
  .task-item--removing {
    pointer-events: none;
    overflow: hidden;
    animation: taskSlideOut 0.28s ease-in both;
  }
}

/* === Edit form: expand on open === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes editFormIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .task-edit-inline {
    animation: editFormIn 0.18s ease-out both;
  }
}

/* === Edit form: collapse on close === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes editFormOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
  }
  .task-item--edit-closing .task-edit-inline {
    animation: editFormOut 0.18s ease-in both;
    pointer-events: none;
  }
}

/* === Edit save button: pulse on click === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes savePulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
  .task-edit-save.save--flashing {
    animation: savePulse 0.25s ease both;
  }
}

/* ===================================================
   First-run tutorial — modal card + highlight ring
   Sits above all other overlays (z-index 2100, just under io-toast 2000?
   actually above it so the tutorial is uninterruptable). Tokens cloned from
   .share-modal-backdrop / .data-action-btn for visual consistency.
   =================================================== */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 16px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: tutorialBackdropIn 0.22s ease-out;
}
@keyframes tutorialBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tutorial-card {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: tutorialCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.tutorial-overlay.dark-mode .tutorial-card {
  background: #1e1e1e;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
@keyframes tutorialCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tutorial-step-counter {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2196f3;
}
.tutorial-overlay.dark-mode .tutorial-step-counter {
  color: #90caf9;
}
.tutorial-skip {
  background: transparent;
  border: none;
  color: #777;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tutorial-skip:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #222;
}
.tutorial-overlay.dark-mode .tutorial-skip { color: #aaa; }
.tutorial-overlay.dark-mode .tutorial-skip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tutorial-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 6px 4px 4px;
}
.tutorial-icon {
  font-size: 42px;
  color: #2196f3;
  background: linear-gradient(145deg, #e3f2fd 0%, #ede7f6 100%);
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(33, 150, 243, 0.25);
}
.tutorial-overlay.dark-mode .tutorial-icon {
  color: #90caf9;
  background: linear-gradient(145deg, #1a2535 0%, #231a35 100%);
  box-shadow: 0 6px 18px rgba(33, 150, 243, 0.35);
}
.tutorial-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: #222;
  line-height: 1.25;
}
.tutorial-overlay.dark-mode .tutorial-title { color: #f0f0f0; }
.tutorial-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #555;
}
.tutorial-overlay.dark-mode .tutorial-text { color: #b8b8b8; }

.tutorial-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d0d0;
  transition: background 0.2s, transform 0.2s;
}
.tutorial-dot.active {
  background: #2196f3;
  transform: scale(1.3);
}
.tutorial-overlay.dark-mode .tutorial-dot { background: #444; }
.tutorial-overlay.dark-mode .tutorial-dot.active { background: #90caf9; }

.tutorial-actions {
  display: flex;
  gap: 10px;
}
.tutorial-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s, opacity 0.15s;
}
.tutorial-btn:active { transform: scale(0.985); }
.tutorial-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tutorial-btn--primary {
  background: #2196f3;
  color: #fff;
}
.tutorial-btn--primary:hover:not(:disabled) {
  background: #1976d2;
}
.tutorial-overlay.dark-mode .tutorial-btn--primary { background: #1976d2; }
.tutorial-overlay.dark-mode .tutorial-btn--primary:hover:not(:disabled) {
  background: #1565c0;
}
.tutorial-btn--secondary {
  background: transparent;
  color: #2196f3;
  border: 1.5px solid #2196f3;
}
.tutorial-btn--secondary:hover:not(:disabled) {
  background: rgba(33, 150, 243, 0.08);
}
.tutorial-overlay.dark-mode .tutorial-btn--secondary {
  color: #90caf9;
  border-color: #90caf9;
}
.tutorial-overlay.dark-mode .tutorial-btn--secondary:hover:not(:disabled) {
  background: rgba(144, 202, 249, 0.10);
}

/* Bottom-sheet variant on phones — easier to reach with thumb */
@media (max-width: 600px) {
  .tutorial-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .tutorial-card {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: tutorialSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes tutorialSheetIn {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tutorial-icon {
    width: 72px;
    height: 72px;
    font-size: 36px;
  }
}

/* Highlight ring — uses :has() to glow the relevant region while a step
   that points at it is active. Falls back gracefully on browsers without
   :has() (no glow, but the modal copy still teaches the user). */
@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.85), 0 0 22px rgba(33, 150, 243, 0.55); }
  50%      { box-shadow: 0 0 0 3px rgba(33, 150, 243, 1.00), 0 0 32px rgba(33, 150, 243, 0.85); }
}
body:has(.tutorial-overlay[data-tut-step="tabs"]) .tabs-container,
body:has(.tutorial-overlay[data-tut-step="tasks"]) #taskList,
body:has(.tutorial-overlay[data-tut-step="footer"]) .controls-footer,
body:has(.tutorial-overlay[data-tut-step="header"]) .header-buttons {
  border-radius: 10px;
  animation: tutorialPulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 2099;
}
body:has(.tutorial-overlay[data-tut-step="stats"]) .stats-button {
  border-radius: 50%;
  animation: tutorialPulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 2099;
}

/* Replay-tutorial button at the top of the Help overlay body */
.help-replay-tutorial {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: linear-gradient(145deg, #e3f2fd 0%, #ede7f6 100%);
  color: #1565c0;
  border: 1.5px solid rgba(33, 150, 243, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.help-replay-tutorial:hover {
  background: linear-gradient(145deg, #d7eaff 0%, #e1d6f4 100%);
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.25);
}
.help-replay-tutorial:active { transform: scale(0.98); }
.help-replay-tutorial i { font-size: 14px; }
.options-overlay.dark-mode .help-replay-tutorial {
  background: linear-gradient(145deg, #1a2535 0%, #231a35 100%);
  color: #90caf9;
  border-color: rgba(144, 202, 249, 0.35);
}
.options-overlay.dark-mode .help-replay-tutorial:hover {
  background: linear-gradient(145deg, #21304a 0%, #2c2147 100%);
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.35);
}