/* Task Days Custom Styles - BEM Methodology */
/* Replacing Tailwind CSS with custom BEM classes */

/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Iosevka Charon for brand lockup (footer, in-app); weight 500 */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/iosevka@5.0.0/500.css');

/* =================================
   RESET AND BASE STYLES
   ================================= */

/* CSS variables for user preferences (set inline from layout when logged in) */
:root {
  --user-accent: #3b82f6;
  --user-font: inherit;

  /* Responsive breakpoints (use in media queries) */
  --bp-phone: 768px;
  --bp-tablet: 1024px;
}

* {
  box-sizing: border-box;
}

/* Remove underlines from all links and buttons */
a,
a:hover,
a:focus,
button {
  text-decoration: none;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  /* Safe area insets for PWA: content clears notches and status bar on devices with viewport-fit=cover */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  min-height: 100vh;
}

body.body--font-handwritten {
  font-family: 'Gloria Hallelujah', 'Comic Sans MS', 'Marker Felt', 'Trebuchet MS', cursive, sans-serif;
}

/* =================================
   MARKETING PAGES FONT SPLIT
   ================================= */
/* Formal font for marketing copy (lighter weight); handwritten only for app preview areas */
.marketing-landing,
.marketing-page {
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
}

/* Headings and bold text - lighter weight for softer feel */
.marketing-landing h1,
.marketing-landing h2,
.marketing-landing h3,
.marketing-landing h4,
.marketing-page h1,
.marketing-page h2,
.marketing-page h3,
.marketing-page h4 {
  font-weight: 400;
}

/* Marketing: never inherit theme-dark/lined/etc — ensure H1s and text always visible on light backgrounds */
.theme-dark .marketing-landing h1,
.theme-dark .marketing-landing h2,
.theme-dark .marketing-landing h3,
.theme-dark .marketing-landing h4,
.theme-dark .marketing-page h1,
.theme-dark .marketing-page h2,
.theme-dark .marketing-page h3,
.theme-dark .marketing-page h4,
.theme-dark .marketing-landing .mkt-hero__title,
.theme-dark .marketing-landing .mkt-hero__subtitle,
.theme-dark .marketing-page .mkt-hero__title,
.theme-dark .marketing-page .mkt-hero__subtitle,
.theme-dark .marketing-landing .mkt-heading,
.theme-dark .marketing-page .mkt-heading,
.theme-dark .marketing-landing .mkt-subheading,
.theme-dark .marketing-page .mkt-subheading {
  color: #4E5C64 !important;
}
.theme-dark .marketing-landing .mkt-hero,
.theme-dark .marketing-page .mkt-hero {
  background: #FBF2F3 !important;
}
.theme-dark .marketing-landing .mkt-section.bg-white,
.theme-dark .marketing-page .mkt-section.bg-white,
.theme-dark .marketing-landing .mkt-strip,
.theme-dark .marketing-page .mkt-strip,
.theme-dark .marketing-landing .mkt-card,
.theme-dark .marketing-page .mkt-card {
  background: white !important;
  color: #4E5C64 !important;
}
.theme-dark .marketing-landing .mkt-section--cream,
.theme-dark .marketing-page .mkt-section--cream {
  background: #FAF3EE !important;
  color: #4E5C64 !important;
}
.theme-dark .marketing-landing .mkt-card__title,
.theme-dark .marketing-landing .mkt-card__text,
.theme-dark .marketing-page .mkt-card__title,
.theme-dark .marketing-page .mkt-card__text,
.theme-dark .marketing-landing .mkt-strip__item,
.theme-dark .marketing-page .mkt-strip__item {
  color: #4E5C64 !important;
}
.theme-dark .marketing-landing .mkt-trust-text,
.theme-dark .marketing-page .mkt-trust-text,
.theme-dark .marketing-landing .mkt-trust-title,
.theme-dark .marketing-page .mkt-trust-title {
  color: #4E5C64 !important;
}

.marketing-landing .font-semibold,
.marketing-page .font-semibold {
  font-weight: 500;
}

.marketing-landing .font-bold,
.marketing-page .font-bold {
  font-weight: 600;
}

.marketing-landing strong,
.marketing-page strong {
  font-weight: 500;
}

.marketing-landing .app-preview,
.marketing-page .app-preview {
  font-family: 'Gloria Hallelujah', 'Comic Sans MS', 'Marker Felt', 'Trebuchet MS', cursive, sans-serif;
  font-weight: 400;
}

/* Marketing icon circles - consistent round background for all feature icons */
.marketing-icon-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Prevent white-on-white: ensure icon circles always have visible definition */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Inline SVG icons inherit color from parent (currentColor) */
.marketing-icon-circle svg {
  flex-shrink: 0;
}

/* =================================
   LAYOUT COMPONENTS (BEM)
   ================================= */

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container--wide {
  max-width: 1400px;
}

.container--narrow {
  max-width: 800px;
}

/* Flexbox utilities */
.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--justify-between {
  justify-content: space-between;
}

.flex--justify-center {
  justify-content: center;
}

.flex--align-center {
  align-items: center;
}

.flex--align-start {
  align-items: flex-start;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--grow {
  flex: 1;
}

/* Grid utilities */
.grid {
  display: grid;
}

.grid--cols-1 {
  grid-template-columns: 1fr;
}

.grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--gap-4 {
  gap: 1rem;
}

.grid--gap-8 {
  gap: 2rem;
}

.grid--gap-12 {
  gap: 3rem;
}

/* =================================
   SPACING UTILITIES (BEM)
   ================================= */

/* Padding */
.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Margins */
.m-0 {
  margin: 0;
}

.m-2 {
  margin: 0.5rem;
}

.m-4 {
  margin: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

/* Spacing between elements */
.space-x-1>*+* {
  margin-left: 0.25rem;
}

.space-x-2>*+* {
  margin-left: 0.5rem;
}

.space-x-3>*+* {
  margin-left: 0.75rem;
}

.space-x-4>*+* {
  margin-left: 1rem;
}

.space-x-8>*+* {
  margin-left: 2.5rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-y-3>*+* {
  margin-top: 1.25rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

.space-y-6>*+* {
  margin-top: 1.5rem;
}

.space-y-8>*+* {
  margin-top: 2rem;
}

/* =================================
   TYPOGRAPHY (BEM)
   ================================= */

/* Text sizes - 10% bigger */
.text-xs {
  font-size: 0.825rem;
}

.text-sm {
  font-size: 0.9625rem;
}

.text-base {
  font-size: 1.1rem;
}

.text-lg {
  font-size: 1.2375rem;
}

.text-xl {
  font-size: 1.375rem;
}

.text-2xl {
  font-size: 1.65rem;
}

.text-3xl {
  font-size: 2.0625rem;
}

.text-4xl {
  font-size: 2.475rem;
}

.text-5xl {
  font-size: 3.3rem;
}

.text-6xl {
  font-size: 4.125rem;
}

/* Font weights */
.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Text alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Line height */
.leading-tight {
  line-height: 1.25;
}

.leading-relaxed {
  line-height: 1.625;
}

/* =================================
   COLORS (BEM)
   ================================= */

/* Text colors */
.text-white {
  color: #ffffff;
}

.text-black {
  color: #000000;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-800 {
  color: #1f2937;
}

.text-gray-900 {
  color: #111827;
}

.text-blue-600 {
  color: #2563eb;
}

.text-blue-700 {
  color: #1d4ed8;
}

.text-blue-800 {
  color: #1e40af;
}

.text-green-600 {
  color: #16a34a;
}

.text-green-700 {
  color: #15803d;
}

.text-green-800 {
  color: #166534;
}

.text-red-600 {
  color: #dc2626;
}

.text-red-700 {
  color: #b91c1c;
}

.text-red-800 {
  color: #991b1b;
}

.text-orange-600 {
  color: #ea580c;
}

/* Background colors */
.bg-white {
  background-color: #ffffff;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.bg-gray-200 {
  background-color: #e5e7eb;
}

.bg-gray-900 {
  background-color: #111827;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.bg-blue-600 {
  background-color: #2563eb;
}

.bg-blue-700 {
  background-color: #1d4ed8;
}

.bg-green-100 {
  background-color: #dcfce7;
}

.bg-green-200 {
  background-color: #bbf7d0;
}

.bg-green-500 {
  background-color: #22c55e;
}

.bg-yellow-200 {
  background-color: #fef08a;
}

.bg-purple-100 {
  background-color: #f3e8ff;
}

.bg-orange-50 {
  background-color: #fff7ed;
}

.bg-orange-500 {
  background-color: #f97316;
}

.bg-indigo-100 {
  background-color: #e0e7ff;
}

/* Gradients */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff;
}

.from-blue-50.to-cyan-100 {
  background-image: linear-gradient(to bottom right, #eff6ff, #cffafe);
}

.from-amber-50.to-orange-100 {
  background-image: linear-gradient(to bottom right, #fffbeb, #fed7aa);
}

.from-slate-800.to-slate-900 {
  background-image: linear-gradient(to bottom right, #1e293b, #0f172a);
}

/* =================================
   BORDERS AND SHADOWS
   ================================= */

.border {
  border: 1px solid #e5e7eb;
}

.border-2 {
  border: 2px solid #e5e7eb;
}

.border-b {
  border-bottom: 1px solid #e5e7eb;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.border-orange-300 {
  border-color: #fdba74;
}

.border-dashed {
  border-style: dashed;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* =================================
   SIZING
   ================================= */

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-full {
  width: 100%;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-2 {
  height: 0.5rem;
}

.h-4 {
  width: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-10 {
  height: 2.5rem;
}

.h-16 {
  height: 4rem;
}

.h-48 {
  height: 12rem;
}

.h-full {
  height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-7xl {
  max-width: 80rem;
}

/* =================================
   POSITIONING AND DISPLAY
   ================================= */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-1 {
  top: 0.25rem;
}

.right-1 {
  right: 0.25rem;
}

.bottom-20 {
  bottom: 5rem;
}

.right-20 {
  right: 5rem;
}

.z-50 {
  z-index: 50;
}

.z-1000 {
  z-index: 1000;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.hidden {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* =================================
   INTERACTIVE STATES
   ================================= */

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Hover states */
.hover\:text-blue-600:hover {
  color: #2563eb;
}

.hover\:text-blue-700:hover {
  color: #1d4ed8;
}

.hover\:text-blue-800:hover {
  color: #1e40af;
}

.hover\:text-gray-800:hover {
  color: #1f2937;
}

.hover\:text-green-800:hover {
  color: #166534;
}

.hover\:text-red-800:hover {
  color: #991b1b;
}

.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-gray-100:hover {
  background-color: #f3f4f6;
}

.hover\:bg-white:hover {
  background-color: #ffffff;
}

/* Focus states - use :focus-visible for visible keyboard focus (WCAG 2.4.7) */
.focus\:outline-none:focus {
  outline: none;
}

.focus\:outline-none:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.focus\:text-gray-800:focus {
  color: #1f2937;
}

/* Opacity */
.opacity-50 {
  opacity: 0.5;
}

/* Transitions */
.transition-colors {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.transition-opacity {
  transition: opacity 0.5s ease-in-out;
}

.transition-all {
  transition: all 0.2s ease-in-out;
}

.duration-300 {
  transition-duration: 0.3s;
}

.duration-500 {
  transition-duration: 0.5s;
}

/* Transform */
.transform {
  transform: translateZ(0);
}

.rotate-12 {
  transform: rotate(12deg);
}

.-rotate-6 {
  transform: rotate(-6deg);
}

.scale-75 {
  transform: scale(0.75);
}

/* =================================
   RESPONSIVE UTILITIES
   ================================= */

/* Mobile first approach - sm: 640px and up */
@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }
}

/* md: 768px and up */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:hidden {
    display: none;
  }

  .md\:inline {
    display: inline;
  }

  .md\:block {
    display: block;
  }
}

/* lg: 1024px and up */
@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
  }
}

/* xl: 1280px and up */
@media (min-width: 1280px) {
  .xl\:text-gray-700 {
    color: #374151;
  }
}

/* 2xl: 1536px and up */
@media (min-width: 1536px) {
  .\32xl\:text-gray-900 {
    color: #111827;
  }
}

/* =================================
   NOTEBOOK THEME COMPONENTS (BEM)
   ================================= */

/* Notebook background - Classic theme: plain white */
.notebook-background {
  background-color: #ffffff;
}

/* Notebook card component */
.notebook-card {
  background-color: transparent;
  border: none;
  position: relative;
  padding: 16px;
}

/* Hand-drawn checkbox styles - kept for backward compat in pages views */
.hand-checkbox {
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid #d4d0e8;
  background: #ede9f8;
  transition: all 0.15s ease;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.hand-checkbox:hover {
  border-color: #b8b0d8;
}

.hand-checkbox--unchecked {
  background: #ede9f8;
}

.hand-checkbox--checked {
  background: #7c6cc4;
  border-color: #7c6cc4;
}

/* New circular checkbox for todo items */
.todo-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d4d0e8;
  background: #ede9f8;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.todo-checkbox:hover {
  border-color: #b8b0d8;
}

.todo-checkbox--checked {
  background: #7c6cc4;
  border-color: #7c6cc4;
}

/* Minimalistic square checkbox for main todo list */
.todo-checkbox-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #bbb;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: border-color 0.1s, background 0.1s;
}

.todo-checkbox-box:hover {
  border-color: #888;
}

.todo-checkbox-box--unchecked {
  background: transparent;
}

.todo-checkbox-box--checked {
  background: transparent;
  border-color: #888;
}

.todo-checkbox-box--checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 0 0 0 5px;
  border: solid #777;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Logo images - navbar and footer */
.navbar__logo-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar__logo-img--nav {
  width: 50px;
  height: 50px;
  transform: rotate(-7deg);
  padding-right: 6px;
}

.navbar__logo-img.mr-3 {
  margin-right: 0.75rem;
}

.mkt-footer__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  transform: rotate(-5deg);
}


/* Hand-drawn strike-through for completed todos - SVG version that wraps with text */
.hand-strike-through {
  text-decoration: none !important;
  display: inline !important;
  position: relative !important;
  padding: 0 2px !important;
}

/* Handwritten SVG strikethrough that wraps with text */
.hand-strike-through::after {
  content: '';
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 3px !important;
  background: url("data:image/svg+xml,%3csvg width='100' height='3' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3e%3cpath d='M0,1.5 Q15,0.8 30,1.8 T60,1.2 T90,1.6 T100,1.3' stroke='%236b7280' stroke-width='1.8' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") repeat-x !important;
  background-size: 100px 3px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Mobile fallback - use wavy text-decoration on very small screens */
@media (max-width: 480px) {
  .hand-strike-through {
    text-decoration: line-through !important;
    text-decoration-color: #6b7280 !important;
    text-decoration-thickness: 1.5px !important;
    text-decoration-style: wavy !important;
  }

  .hand-strike-through::after {
    display: none !important;
  }
}

/* Fix h4 margin in todo items */
.todo-item h4 {
  margin-top: 0;
  margin-bottom: 0;
  display: inline;
}

/* Hand-underline: decorative underlines disabled (class kept for compatibility) */
.hand-underline {
  position: relative;
  text-decoration: none;
  border: none !important;
}

.hand-underline::after {
  display: none;
}

.hand-underline:hover::after {
  display: none;
}

/* Todo item component */
.todo-item {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 8px;
  transition: all 0.2s ease;
}

.todo-item:hover {
  background-color: rgba(59, 130, 246, 0.03);
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.todo-item--new {
  opacity: 0;
  animation: fadeInSlide 0.5s ease-out forwards;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add todo form components */
.add-todo--collapsed {
  background-color: transparent;
  font-family: 'Gloria Hallelujah', 'Comic Sans MS', 'Marker Felt', 'Trebuchet MS', cursive, sans-serif;
  border: none;
  padding: 16px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-todo--collapsed:hover {
  background-color: rgba(59, 130, 246, 0.02);
  border-radius: 4px;
}

.add-todo--expanded {
  background-color: transparent;
  border: none;
  padding: 20px 0;
  animation: expandForm 0.3s ease-out;
}

@keyframes expandForm {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form input styles – clean flat underline */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: 8px 0;
  font-size: 0.9375rem;
  color: #111;
  width: 100%;
  transition: border-color 0.15s ease;
}

.form-input::placeholder {
  color: #999;
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-bottom-color: #111;
  background-color: transparent;
  box-shadow: none;
  outline: none;
}

/* Pulse focus effect */
.pulse-focus:focus {
  animation: pulse-focus 0.3s ease-out;
}

@keyframes pulse-focus {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

/* Hide browser autocomplete styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
}

/* =================================
   THEME SYSTEM (BEM)
   ================================= */

/* Theme 2: Lined Paper */
.theme-lined {
  background-color: #fafafa;
  background-image: linear-gradient(to bottom, #f3f4f6 1px, transparent 1px);
  background-size: 100% 32px;
}

/* Theme 3: Graph Paper */
.theme-graph {
  background-color: #fafafa;
  background-image: linear-gradient(#f3f4f6 1px, transparent 1px), linear-gradient(90deg, #f3f4f6 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Theme 4: Vintage Paper — warm dotted grid on cream */
.theme-vintage {
  background-color: #FDFBF7;
  background-image: radial-gradient(circle, #d4af87 1px, transparent 1px);
  background-size: 20px 20px;
  color: #3e2723;
}

.theme-vintage .text-gray-600 {
  color: #5d4e37 !important;
}

.theme-vintage .text-gray-700 {
  color: #4a3728 !important;
}

/* Theme 5: Dark Mode — Dracula palette
   ── Colour reference ────────────────────────────────────────
   Background:    #282a36   base canvas
   Current Line:  #44475a   panel / hover surface
   Selection:     #44475a   (same)
   Foreground:    #f8f8f2   primary text
   Comment:       #6272a4   muted / secondary text
   Purple:        #bd93f9   accent (links, focus, active)
   Pink:          #ff79c6   secondary accent
   Cyan:          #8be9fd   info / placeholder focus
   Green:         #50fa7b   success
   Yellow:        #f1fa8c   warning
   Orange:        #ffb86c   highlight
   Red:           #ff5555   danger / delete
   ─────────────────────────────────────────────────────────── */
.theme-dark {
  background-color: #282a36;
  color: #f8f8f2;
}

/* ── Generic text colour overrides ── */
.theme-dark .text-gray-600 {
  color: #6272a4 !important;
}

.theme-dark .text-gray-700 {
  color: #c1c8e6 !important;
}

.theme-dark .text-gray-800 {
  color: #f8f8f2 !important;
}

.theme-dark .text-gray-900 {
  color: #f8f8f2 !important;
}

.theme-dark .text-black {
  color: #f8f8f2 !important;
}

/* ── Headings ── */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .font-bold,
.theme-dark .font-semibold {
  color: #f8f8f2 !important;
}

/* ── Form labels & inputs ── */
.theme-dark input,
.theme-dark textarea,
.theme-dark label,
.theme-dark .form-label {
  color: #f8f8f2 !important;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark ::placeholder {
  color: #6272a4 !important;
}

/* ── Form input backgrounds — clean, no decorative lines ── */
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark input[type="date"],
.theme-dark textarea {
  background-color: transparent !important;
  background-image: none !important;
  color: #f8f8f2 !important;
  border-color: #44475a !important;
}

.theme-dark input[type="text"]:focus,
.theme-dark input[type="email"]:focus,
.theme-dark input[type="password"]:focus,
.theme-dark input[type="date"]:focus,
.theme-dark textarea:focus {
  background-image: none !important;
  border-color: #bd93f9 !important;
  outline: none !important;
}

/* ── Background overrides ── */
.theme-dark .bg-white {
  background-color: #383a4e !important;
  color: #f8f8f2 !important;
}

.theme-dark .bg-gray-50 {
  background-color: #2f3146 !important;
}

.theme-dark .bg-gray-100 {
  background-color: #383a4e !important;
  color: #f8f8f2 !important;
}

.theme-dark .bg-gray-200 {
  background-color: #44475a !important;
}

/* ── Semantic colour overrides ── */
.theme-dark .text-blue-600 {
  color: #8be9fd !important;
}

.theme-dark .text-blue-800 {
  color: #bd93f9 !important;
}

.theme-dark .text-green-600 {
  color: #50fa7b !important;
}

.theme-dark .text-green-700 {
  color: #50fa7b !important;
}

.theme-dark .text-green-800 {
  color: #50fa7b !important;
}

.theme-dark .text-red-600 {
  color: #ff5555 !important;
}

.theme-dark .text-red-700 {
  color: #ff5555 !important;
}

.theme-dark .text-red-800 {
  color: #ff6e6e !important;
}

/* ── Dashboard: week view columns ── */
.theme-dark .dashboard__week-view {
  border-bottom-color: #44475a;
}

.theme-dark .week-col+.week-col {
  border-left-color: #383a4e;
}

.theme-dark .week-col--today {
  background-color: #2e3046;
}

.theme-dark .week-col__date {
  color: #6272a4;
}

.theme-dark .week-col__day {
  color: #f8f8f2;
}

/* ── Todo items ── */
.theme-dark .todo-item {
  border-bottom-color: #383a4e;
}

.theme-dark .todo-item__title {
  color: #f8f8f2;
}

.theme-dark .todo-item__title--done {
  color: #6272a4;
}

.theme-dark .todo-item__delete {
  color: #44475a;
}

.theme-dark .todo-item__delete:hover {
  color: #ff5555;
}

/* ── Todo input (add task) — no underline decoration ── */
.theme-dark .todo-input {
  color: #f8f8f2;
  background-image: none !important;
  border-bottom: 1px solid #44475a;
}

.theme-dark .todo-input::placeholder {
  color: #6272a4;
}

.theme-dark .todo-input:focus {
  background-image: none !important;
  border-bottom-color: #bd93f9;
}

/* ── Toolbar (hover style popup) ── */
.theme-dark .todo-item__toolbar {
  background: #383a4e;
  border-color: #44475a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.theme-dark .todo-toolbar__btn {
  color: #6272a4;
}

.theme-dark .todo-toolbar__btn:hover {
  background: #44475a;
  color: #f8f8f2;
}

.theme-dark .todo-options-modal__content {
  background: #282a36;
}

.theme-dark .todo-options-modal__delete {
  color: #6272a4;
}

.theme-dark .todo-options-modal__delete:hover {
  color: #ff5555;
}

.theme-dark .todo-options-modal__close {
  background: #44475a;
  color: #f8f8f2;
}

/* ── Highlight colour picker ── */
.theme-dark .todo-highlight-picker {
  background: #383a4e;
  border-color: #44475a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ── Bottom list section ── */
.theme-dark .lists__titlebar {
  border-top-color: #44475a;
  background-color: #282a36;
}

.theme-dark .lists__titlebar-chevron {
  color: #6272a4;
}

.theme-dark .lists__titlebar-add {
  color: #6272a4;
}

.theme-dark .lists__titlebar-scroll-btn {
  color: #6272a4;
}

.theme-dark .lists__titlebar-scroll-btn:hover {
  color: #f8f8f2;
}

.theme-dark .lists__tabs {
  border-bottom-color: #383a4e;
}

.theme-dark .lists__tab {
  color: #6272a4;
}

.theme-dark .lists__tab:hover {
  color: #c1c8e6;
}

.theme-dark .lists__column-title {
  color: #c1c8e6;
}

/* ── Desktop nav bar ── */
.theme-dark .desktop-nav {
  background: #282a36;
  border-bottom-color: #383a4e;
}

.theme-dark .desktop-nav__user {
  color: #f8f8f2;
}

.theme-dark .desktop-nav__link {
  color: #6272a4;
}

.theme-dark .desktop-nav__link:hover {
  background: #383a4e;
  color: #f8f8f2;
}

.theme-dark .desktop-nav__close {
  color: #6272a4;
}

/* ── Side drawer ── */
.theme-dark .side-drawer {
  background: #21222c;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.7);
}

.theme-dark .side-drawer__header {
  border-bottom-color: #383a4e;
}

.theme-dark .side-drawer__title {
  color: #f8f8f2;
}

.theme-dark .side-drawer__close {
  color: #6272a4;
}

.theme-dark .side-drawer__close:hover {
  color: #c1c8e6;
}

/* ── Theme option cards inside drawer ── */
.theme-dark .theme-option {
  background: #383a4e;
  border-color: #44475a;
}

.theme-dark .theme-option:hover {
  border-color: #6272a4;
}

.theme-dark .theme-option__label {
  color: #c1c8e6;
}

.theme-dark .theme-preview {
  border-color: #44475a;
}

/* ── View option cards inside drawer ── */
.theme-dark .view-option {
  border-color: #44475a;
  color: #c1c8e6;
}

.theme-dark .view-option:hover {
  background: #383a4e;
  border-color: #6272a4;
}

.theme-dark .view-option--active {
  background: #383a4e;
}

.theme-dark .view-option__label {
  color: #f8f8f2;
}

.theme-dark .view-option__desc {
  color: #6272a4;
}

/* ── Bottom sheet (mobile) ── */
.theme-dark .bottom-sheet {
  background: #21222c;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.7);
}

.theme-dark .bottom-sheet__handle {
  background: #44475a;
}

.theme-dark .bottom-sheet__user {
  border-bottom-color: #383a4e;
}

.theme-dark .bottom-sheet__username {
  color: #f8f8f2;
}

.theme-dark .bottom-sheet__link {
  color: #c1c8e6;
}

.theme-dark .bottom-sheet__link:hover {
  color: #f8f8f2;
}

.theme-dark .bottom-sheet__divider {
  background: #383a4e;
}

/* ── FAB / hamburger icon ── */
.theme-dark .fab {
  color: #6272a4;
}

/* ── Empty state text ── */
.theme-dark .dashboard__empty-text {
  color: #6272a4;
}

.theme-dark .lists__new-btn {
  color: #6272a4;
}

.theme-dark .lists__new-btn:hover {
  color: #f8f8f2;
}

/* Theme selector components */
.theme-selector {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-toggle--mobile {
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-toggle__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-toggle__btn:hover {
  transform: scale(1.1);
  border-color: #3b82f6;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.theme-toggle__btn:active {
  transform: scale(0.95);
}

.theme-selector--mobile {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 200px;
  max-width: 250px;
}

.theme-dark .theme-selector--mobile {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-dark .theme-selector {
  background: rgba(31, 41, 55, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-selector button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 2px solid transparent;
  margin: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-selector button:hover {
  transform: scale(1.1);
  border-color: #3b82f6;
}

.theme-selector button.active {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}

.theme-btn--classic {
  background: #e5e7eb;
}

.theme-btn--lined {
  background: linear-gradient(to bottom, transparent 40%, #e5e7eb 40%, #e5e7eb 60%, transparent 60%), #fefefe;
}

.theme-btn--graph {
  background: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px), #fefefe;
  background-size: 8px 8px;
}

.theme-btn--vintage {
  background: radial-gradient(circle, #d4af87 30%, transparent 30%), #f9f7f4;
}

.theme-btn--dark {
  background: radial-gradient(circle, #404040 30%, transparent 30%), #1a1a1a;
}

/* =================================
   NAVIGATION COMPONENTS (BEM)
   ================================= */

.navbar {
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.navbar__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .navbar__container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .navbar__container {
    padding: 0 2rem;
  }
}

.navbar__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  font-family: 'Iosevka', 'Iosevka Charon', ui-monospace, monospace;
}

.navbar__nav--desktop {
  display: none;
  align-items: center;
}

@media (min-width: 768px) {
  .navbar__nav--desktop {
    display: flex;
  }
}

.navbar__nav-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  /* More space between nav items */
}

.navbar__nav-item {
  margin-left: 3rem;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* More space between action items */
}

.navbar__nav-link {
  color: #4E5C64;
  font-weight: 500;
  transition: color var(--mkt-dur-normal, 200ms) var(--mkt-ease-smooth, ease);
  position: relative;
}

.navbar__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #4E5C64;
  transition: width var(--mkt-dur-normal, 200ms) var(--mkt-ease-spring, ease);
  border-radius: 1px;
}

.navbar__nav-link:hover {
  color: #4E5C64;
}

.navbar__nav-link:hover::after {
  width: 100%;
}

.navbar__nav-link--active {
  color: #4E5C64;
}

.navbar__nav-link--active::after {
  width: 100%;
}

.navbar__actions {
  display: flex;
  align-items: center;
}

.navbar__user-greeting {
  color: #374151;
  margin-right: 1rem;
}

.navbar__menu-btn {
  display: block;
  color: #4b5563;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.15s ease-in-out;
}

.navbar__menu-btn:hover {
  color: #1f2937;
}

.navbar__menu-btn:focus-visible {
  color: #1f2937;
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .navbar__menu-btn {
    display: none;
  }
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background-color: #ffffff;
}

@media (max-width: 767px) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mobile-menu.hidden {
    display: none;
  }
}

.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.mobile-menu__close-btn {
  color: #4b5563;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.15s ease-in-out;
}

.mobile-menu__close-btn:hover {
  color: #1f2937;
}

.mobile-menu__close-btn:focus-visible {
  color: #1f2937;
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.mobile-menu__content {
  flex: 1;
  padding: 1.5rem 1rem;
}

.mobile-menu__nav-list {
  margin-bottom: 2rem;
}

.mobile-menu__nav-item {
  margin-bottom: 2rem;
}

.mobile-menu__nav-link {
  display: block;
  font-size: 1.875rem;
  font-weight: 500;
  color: #111827;
  transition: color 0.15s ease-in-out;
}

.mobile-menu__nav-link:hover {
  color: #2563eb;
}

.mobile-menu__nav-link--active {
  color: #2563eb;
}

.mobile-menu__user-greeting {
  font-size: 1.25rem;
  color: #374151;
  margin-bottom: 2rem;
}

.mobile-menu__actions {
  padding-top: 2rem;
}

.mobile-menu__action-item {
  margin-bottom: 1.5rem;
}

.mobile-menu__action-link {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: #4b5563;
  transition: color 0.15s ease-in-out;
}

.mobile-menu__action-link:hover {
  color: #2563eb;
}

.mobile-menu__action-btn {
  display: block;
  background-color: #2563eb;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.15s ease-in-out;
  border: none;
  cursor: pointer;
  width: 100%;
}

.mobile-menu__action-btn:hover {
  background-color: #1d4ed8;
}

/* =================================
   FLASH MESSAGES (BEM)
   ================================= */

.flash-message {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  font-weight: 500;
  transition: opacity 0.5s ease-in-out;
}

.flash-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: currentColor;
  opacity: 0.6;
}

.flash-message--success {
  color: #15803d;
}

.flash-message--error {
  color: #b91c1c;
}

/* Dark mode flash messages */
.theme-dark .flash-message {
  background: rgba(31, 41, 55, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =================================
   DRAG AND DROP STYLES (BEM)
   ================================= */

.todo-item--dragging {
  transform: rotate(2deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  cursor: grabbing !important;
}

.todo-item--drag-over {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.05);
}

.todo-placeholder {
  margin: 8px 0;
  transition: all 0.2s ease;
}

[data-sortable-target="item"] {
  cursor: grab;
  transition: all 0.2s ease;
}

[data-sortable-target="item"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.drag-handle {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  cursor: grab;
}

[data-sortable-target="item"]:hover .drag-handle {
  opacity: 0.8;
}

/* Dark mode drag styles */
.theme-dark .todo-item--drag-over {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #60a5fa !important;
}

.theme-dark .todo-placeholder {
  color: #60a5fa;
}

/* =================================
   BUTTON COMPONENTS (BEM)
   ================================= */

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn--primary {
  background-color: #2563eb;
  color: #ffffff;
}

.btn--primary:hover {
  background-color: #1d4ed8;
}

.btn--secondary {
  background-color: transparent;
  color: #4b5563;
  border: 2px solid #d1d5db;
}

.btn--secondary:hover {
  background-color: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn--small {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* =================================
   FORM COMPONENTS (BEM)
   ================================= */

/* Submit buttons with hand-underline */
input[type="submit"].hand-underline,
button.hand-underline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline;
}

input[type="submit"].hand-underline:hover,
button.hand-underline:hover {
  background: none;
  border: none;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-checkbox {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2,1.5 Q2.1,1.1 3.2,1.7 L14.4,2.3 Q16,2.1 16.2,3.6 L16.4,13.8 Q16,15.1 14.3,15.3 L3.6,15.1 Q2.1,15.4 1.8,14.1 L1.6,3.2 Q2.1,1.8 2,1.5 Z' stroke='%236b7280' stroke-width='1.2' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat center;
  background-size: contain;
  appearance: none;
  -webkit-appearance: none;
  border: none;
}

.form-checkbox:checked {
  background: url("data:image/svg+xml,%3csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2,1.5 Q2.1,1.1 3.2,1.7 L14.4,2.3 Q16,2.1 16.2,3.6 L16.4,13.8 Q16,15.1 14.3,15.3 L3.6,15.1 Q2.1,15.4 1.8,14.1 L1.6,3.2 Q2.1,1.8 2,1.5 Z' stroke='%236b7280' stroke-width='1.2' fill='none' stroke-linecap='round'/%3e%3cpath d='M4.2,9.1 Q5.4,10.3 6.5,11.4 Q10.2,7.7 13.7,5.1' stroke='%2316a34a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat center;
  background-size: contain;
}

/* Dark theme checkbox */
.theme-dark .form-checkbox {
  background: url("data:image/svg+xml,%3csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2,1.5 Q2.1,1.1 3.2,1.7 L14.4,2.3 Q16,2.1 16.2,3.6 L16.4,13.8 Q16,15.1 14.3,15.3 L3.6,15.1 Q2.1,15.4 1.8,14.1 L1.6,3.2 Q2.1,1.8 2,1.5 Z' stroke='%23d1d5db' stroke-width='1.2' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat center;
}

.theme-dark .form-checkbox:checked {
  background: url("data:image/svg+xml,%3csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2,1.5 Q2.1,1.1 3.2,1.7 L14.4,2.3 Q16,2.1 16.2,3.6 L16.4,13.8 Q16,15.1 14.3,15.3 L3.6,15.1 Q2.1,15.4 1.8,14.1 L1.6,3.2 Q2.1,1.8 2,1.5 Z' stroke='%23d1d5db' stroke-width='1.2' fill='none' stroke-linecap='round'/%3e%3cpath d='M4.2,9.1 Q5.4,10.3 6.5,11.4 Q10.2,7.7 13.7,5.1' stroke='%2334d399' stroke-width='1.8' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat center;
}

/* =================================
   MODAL COMPONENTS (BEM)
   ================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.modal-container {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  font-family: var(--user-font, inherit);
}

/* Dark theme modal */
.theme-dark .modal-container {
  background: rgba(31, 41, 55, 0.98);
  border: 1px solid rgba(75, 85, 99, 0.3);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(75, 85, 99, 0.2);
}

/* Lined paper theme */
.theme-lined .modal-container {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Graph paper theme */
.theme-graph .modal-container {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Vintage theme */
.theme-vintage .modal-container {
  background: rgba(254, 249, 231, 0.98);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

/* Mobile responsive - full screen on mobile */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
  }

  .modal-container {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    padding: 1.5rem;
    max-width: none;
  }
}

/* =================================
   MARKETING PAGE STYLES
   ================================= */

/* Hero section */
.min-h-screen {
  min-height: 100vh;
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff;
}

.from-blue-50.to-indigo-100 {
  background: linear-gradient(to bottom right, #eff6ff, #e0e7ff);
}

/* Grid layouts */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-12 {
  gap: 3rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-0\.5 {
  gap: 0.125rem;
}

/* Text sizes for marketing */
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Spacing */
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-2 {
  padding: 0.5rem;
}

/* Margins */
.mb-16 {
  margin-bottom: 4rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

/* Background colors */
.bg-white {
  background-color: #ffffff;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.bg-gray-200 {
  background-color: #e5e7eb;
}

.bg-gray-900 {
  background-color: #111827;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.bg-blue-600 {
  background-color: #2563eb;
}

.bg-blue-700 {
  background-color: #1d4ed8;
}

.bg-green-100 {
  background-color: #dcfce7;
}

.bg-green-200 {
  background-color: #bbf7d0;
}

.bg-green-500 {
  background-color: #22c55e;
}

.bg-yellow-200 {
  background-color: #fef08a;
}

.bg-purple-100 {
  background-color: #f3e8ff;
}

.bg-orange-50 {
  background-color: #fff7ed;
}

.bg-orange-100 {
  background-color: #fed7aa;
}

.bg-slate-800 {
  background-color: #1e293b;
}

.bg-slate-900 {
  background-color: #0f172a;
}

/* Text colors */
.text-gray-900 {
  color: #111827;
}

.text-gray-800 {
  color: #1f2937;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-blue-600 {
  color: #2563eb;
}

.text-blue-100 {
  color: #dbeafe;
}

.text-white {
  color: #ffffff;
}

.text-slate-100 {
  color: #f1f5f9;
}

.text-slate-200 {
  color: #e2e8f0;
}

.text-orange-700 {
  color: #c2410c;
}

/* Borders */
.border-2 {
  border-width: 2px;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.border-orange-300 {
  border-color: #fdba74;
}

.border-white {
  border-color: #ffffff;
}

/* Border radius */
.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Shadows */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Positioning */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.-top-4 {
  top: -1rem;
}

.-right-4 {
  right: -1rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-left-4 {
  left: -1rem;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Transforms */
.rotate-12 {
  transform: rotate(12deg);
}

.-rotate-6 {
  transform: rotate(-6deg);
}

.scale-75 {
  transform: scale(0.75);
}

/* Z-index */
.z-50 {
  z-index: 50;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

/* Additional utility classes */
.max-w-7xl {
  max-width: 80rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.w-full {
  width: 100%;
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

/* Font sizes - 10% bigger */
.text-3xl {
  font-size: 2.2rem;
  line-height: 2.5rem;
}

.text-2xl {
  font-size: 1.65rem;
  line-height: 2.2rem;
}

.text-xl {
  font-size: 1.375rem;
  line-height: 1.925rem;
}

.text-lg {
  font-size: 1.2375rem;
  line-height: 1.925rem;
}

.text-base {
  font-size: 1.1rem;
  line-height: 1.76rem;
}

.text-sm {
  font-size: 0.9625rem;
  line-height: 1.43rem;
}

.text-xs {
  font-size: 0.825rem;
  line-height: 1.1rem;
}

/* Font weights */
.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

/* Spacing adjustments */
.space-y-8>*+* {
  margin-top: 2.2rem;
}

.space-y-6>*+* {
  margin-top: 1.65rem;
}

.space-y-1>*+* {
  margin-top: 0.275rem;
}

.-space-y-px>*+* {
  margin-top: -1px;
}

.mt-8 {
  margin-top: 2.2rem;
}

.mt-6 {
  margin-top: 1.65rem;
}

.py-12 {
  padding-top: 3.3rem;
  padding-bottom: 3.3rem;
}

.px-4 {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.px-6 {
  padding-left: 1.65rem;
  padding-right: 1.65rem;
}

.px-8 {
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

/* List styles */
.list-disc {
  list-style-type: disc;
}

.pl-5 {
  padding-left: 1.375rem;
}

/* Text colors */
.text-indigo-600 {
  color: #4f46e5;
}

.text-indigo-500 {
  color: #6366f1;
}

/* Hover states */
.hover\:text-indigo-500:hover {
  color: #6366f1;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.leading-tight {
  line-height: 1.25;
}

.leading-relaxed {
  line-height: 1.625;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.transition-colors {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-gray-100:hover {
  background-color: #f3f4f6;
}

.hover\:border-blue-600:hover {
  border-color: #2563eb;
}

.hover\:text-blue-600:hover {
  color: #2563eb;
}

.hover\:text-white:hover {
  color: #ffffff;
}

.hover\:bg-white:hover {
  background-color: #ffffff;
}

.hover\:text-blue-600:hover {
  color: #2563eb;
}

/* Space utilities */
.space-y-4>*+* {
  margin-top: 1rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-x-2>*+* {
  margin-left: 0.5rem;
}

.space-x-4>*+* {
  margin-left: 1rem;
}

/* Flex utilities */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.p-1 {
  padding: 0.25rem;
}

/* Grid utilities */
.grid {
  display: grid;
}

/* Width utilities */
.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-48 {
  height: 12rem;
}

/* Opacity */
.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
  }
}

/* =================================
   FOOTER STYLES
   ================================= */

/* Footer links - white at rest, slightly darker on hover */
footer a {
  color: #ffffff;
  transition: color 0.15s ease-in-out;
}

footer a:hover {
  color: #e5e7eb;
  /* Slightly darker white on hover */
}

/* =================================
   UTILITY CLASSES
   ================================= */

.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;
}

/* Skip link - visible on focus for keyboard/screen reader users (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: #0f172a;
  color: #f8fafc;
  font-weight: 600;
  border-radius: 4px;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.line-through {
  text-decoration: line-through;
}

.italic {
  font-style: italic;
}

.resize-none {
  resize: none;
}

/* =================================
   ANIMATIONS
   ================================= */

.form-slide-in {
  animation: slideIn 0.4s ease-out;
}

.form-slide-out {
  animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 300px;
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 300px;
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
  }
}

/* Pulse animation for focus states */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Dark mode animation adjustments */
.theme-dark .pulse-focus:focus {
  animation: pulseDark 2s infinite;
}

/* =================================
   LOGOUT MODAL STYLES
   ================================= */

.logout-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logout-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.logout-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.logout-modal__dialog {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.logout-modal.show .logout-modal__dialog {
  transform: scale(1);
}

.logout-modal__content {
  display: flex;
  flex-direction: column;
}

.logout-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.logout-modal__title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  /* Inherit the user's chosen font from preferences */
  font-family: var(--user-font, inherit);
}

.logout-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.logout-modal__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.logout-modal__body {
  padding: 16px 24px;
}

.logout-modal__body p {
  margin: 0 0 8px 0;
  color: #374151;
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--user-font, inherit);
}

.logout-modal__subtext {
  color: #6b7280;
  font-size: 14px;
  font-style: italic;
  font-family: var(--user-font, inherit);
}

.logout-modal__footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  justify-content: flex-end;
}

.logout-modal__btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  /* Inherit the user's chosen font from preferences */
  font-family: var(--user-font, inherit);
}

.logout-modal__btn--secondary {
  background: #f9fafb;
  color: #374151;
  border-color: #d1d5db;
}

.logout-modal__btn--secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.logout-modal__btn--primary {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.logout-modal__btn--primary:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Keyboard focus - visible outline for modal buttons (WCAG 2.4.7) */
.logout-modal__btn:focus-visible,
.logout-modal__close:focus-visible {
  outline: 2px solid var(--user-accent, #9966CC);
  outline-offset: 2px;
}

/* Dark mode styles for logout modal */
.theme-dark .logout-modal__dialog {
  background: #1f2937;
  border: 1px solid #374151;
}

.theme-dark .logout-modal__title {
  color: #f9fafb;
}

.theme-dark .logout-modal__body p {
  color: #d1d5db;
}

.theme-dark .logout-modal__subtext {
  color: #9ca3af;
}

.theme-dark .logout-modal__close {
  color: #9ca3af;
}

.theme-dark .logout-modal__close:hover {
  background: #374151;
  color: #d1d5db;
}

.theme-dark .logout-modal__btn--secondary {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
}

.theme-dark .logout-modal__btn--secondary:hover {
  background: #4b5563;
  border-color: #6b7280;
}

/* Lined theme styles for logout modal */
.theme-lined .logout-modal__dialog {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Graph theme styles for logout modal */
.theme-graph .logout-modal__dialog {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Vintage theme styles for logout modal */
.theme-vintage .logout-modal__dialog {
  background: rgba(254, 249, 231, 0.98);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.theme-vintage .logout-modal__title {
  color: #78350f;
}

.theme-vintage .logout-modal__body p {
  color: #92400e;
}

.theme-vintage .logout-modal__subtext {
  color: #a16207;
}

.theme-vintage .logout-modal__header {
  border-bottom-color: rgba(180, 83, 9, 0.15);
}

.theme-vintage .logout-modal__btn--secondary {
  background: rgba(254, 243, 199, 0.6);
  color: #78350f;
  border-color: rgba(180, 83, 9, 0.2);
}

.theme-vintage .logout-modal__btn--secondary:hover {
  background: rgba(254, 243, 199, 0.9);
  border-color: rgba(180, 83, 9, 0.3);
}

/* =================================
   CONFIRMATION / WARNING MODAL
   ================================= */

.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.confirm-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.confirm-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.confirm-modal__dialog {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 380px;
  width: 100%;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.25s ease;
}

.confirm-modal.show .confirm-modal__dialog {
  transform: scale(1);
}

.confirm-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 24px;
}

.confirm-modal__icon {
  margin-bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-family: var(--user-font, inherit);
}

.confirm-modal__message {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px 0;
  font-family: var(--user-font, inherit);
}

.confirm-modal__footer {
  display: flex;
  gap: 12px;
  width: 100%;
}

.confirm-modal__btn {
  flex: 1;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  font-family: var(--user-font, inherit);
}

.confirm-modal__btn--no {
  background: #f9fafb;
  color: #374151;
  border-color: #d1d5db;
}

.confirm-modal__btn--no:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.confirm-modal__btn--yes {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.confirm-modal__btn--yes:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Focus styles (WCAG 2.4.7) */
.confirm-modal__btn:focus-visible {
  outline: 2px solid var(--user-accent, #9966CC);
  outline-offset: 2px;
}

/* Dark theme */
.theme-dark .confirm-modal__dialog {
  background: #1f2937;
  border: 1px solid #374151;
}

.theme-dark .confirm-modal__icon {
  background: rgba(245, 158, 11, 0.15);
}

.theme-dark .confirm-modal__title {
  color: #f9fafb;
}

.theme-dark .confirm-modal__message {
  color: #9ca3af;
}

.theme-dark .confirm-modal__btn--no {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
}

.theme-dark .confirm-modal__btn--no:hover {
  background: #4b5563;
  border-color: #6b7280;
}

/* Lined theme */
.theme-lined .confirm-modal__dialog {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Graph theme */
.theme-graph .confirm-modal__dialog {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.3);
}

/* Vintage theme */
.theme-vintage .confirm-modal__dialog {
  background: rgba(254, 249, 231, 0.98);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.theme-vintage .confirm-modal__icon {
  background: rgba(180, 83, 9, 0.1);
}

.theme-vintage .confirm-modal__title {
  color: #78350f;
}

.theme-vintage .confirm-modal__message {
  color: #a16207;
}

.theme-vintage .confirm-modal__btn--no {
  background: rgba(254, 243, 199, 0.6);
  color: #78350f;
  border-color: rgba(180, 83, 9, 0.2);
}

.theme-vintage .confirm-modal__btn--no:hover {
  background: rgba(254, 243, 199, 0.9);
  border-color: rgba(180, 83, 9, 0.3);
}

@keyframes pulseDark {
  0% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(96, 165, 250, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
}

/* =================================
   MARKETING 3.0 — MOTION DESIGN SYSTEM
   2026 UX Architect Edition
   ================================= */

/* --- Motion Design Tokens (UX Architect spec) --- */
:root {
  --mkt-dur-instant: 80ms;
  --mkt-dur-fast: 100ms;
  --mkt-dur-micro: 150ms;
  --mkt-dur-normal: 200ms;
  --mkt-dur-smooth: 300ms;
  --mkt-dur-modal: 275ms;
  --mkt-dur-emphasis: 600ms;

  --mkt-ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --mkt-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --mkt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mkt-ease-out: cubic-bezier(0, 0, 0.2, 1);

  --mkt-shadow-raised: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --mkt-shadow-float: 0 16px 40px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.04);
  --mkt-shadow-portal: 0 32px 64px rgba(0,0,0,0.14), 0 12px 24px rgba(0,0,0,0.06);
}

/* --- Entrance Keyframes --- */
@keyframes mkt-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mkt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mkt-slide-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mkt-slide-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mkt-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mkt-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes mkt-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.75; }
}

@keyframes mkt-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

/* --- Hero --- */
.mkt-hero {
  background: #FBF2F3;
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.mkt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 65% 45%, rgba(181, 193, 168, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.mkt-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mkt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(78, 92, 100, 0.07);
  border: 1px solid rgba(78, 92, 100, 0.15);
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  color: #4E5C64;
  margin-bottom: 1.75rem;
  letter-spacing: 0.01em;
}

.mkt-hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #B5C1A8;
  flex-shrink: 0;
  animation: mkt-dot-pulse 2.5s ease-in-out infinite;
}

.mkt-hero__title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: #4E5C64;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
}

.mkt-hero__title-handwritten {
  font-family: 'Gloria Hallelujah', 'Comic Sans MS', cursive;
  font-weight: 400;
  color: #4E5C64;
  display: block;
  font-size: 0.78em;
  line-height: 1.5;
  margin-top: 0.15em;
}

.mkt-hero__subtitle {
  font-size: 1.15rem;
  color: #4E5C64;
  max-width: 38rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  font-weight: 300;
}

.mkt-hero__cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.mkt-hero__trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  color: #4E5C64;
  font-size: 0.875rem;
}

.mkt-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mkt-hero__trust-item::before {
  content: '✓';
  color: #4E5C64;
  font-weight: 700;
}

/* --- Buttons --- */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.825rem 1.75rem;
  border-radius: 0.625rem;
  font-size: 0.975rem;
  font-weight: 600;
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-normal) var(--mkt-ease-smooth),
              background-color var(--mkt-dur-fast) ease,
              color var(--mkt-dur-fast) ease,
              border-color var(--mkt-dur-fast) ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.mkt-btn:active {
  transform: scale(0.97);
  transition-duration: var(--mkt-dur-instant);
}

.mkt-btn--primary {
  background: #4E5C64;
  color: #FAF8F5;
}

.mkt-btn--primary:hover {
  background: #3A4A52;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(78, 92, 100, 0.35);
  color: #FAF8F5;
}

.mkt-btn--ghost {
  background: transparent;
  color: #4E5C64;
  border: 1.5px solid #4E5C64;
}

.mkt-btn--ghost:hover {
  background: #4E5C64;
  border-color: #4E5C64;
  color: #FAF8F5;
}

.mkt-btn--outline {
  background: transparent;
  color: #4E5C64;
  border: 1.5px solid #D8D4CC;
}

.mkt-btn--outline:hover {
  border-color: #4E5C64;
  color: #FAF8F5;
  background: #4E5C64;
}

.mkt-btn--white {
  background: #4E5C64;
  color: #FAF8F5;
}

.mkt-btn--white:hover {
  background: #3A4A52;
  color: #FAF8F5;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(78, 92, 100, 0.3);
}

/* --- App Mockup --- */
.mkt-mockup {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-width: 420px;
  margin-left: auto;
}

.mkt-mockup__chrome {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mkt-mockup__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.mkt-mockup__dot--red {
  background: #fc5f5a;
}

.mkt-mockup__dot--yellow {
  background: #fdbc40;
}

.mkt-mockup__dot--green {
  background: #33c748;
}

.mkt-mockup__url {
  margin-left: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.3rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  color: #64748b;
  flex: 1;
  text-align: center;
  font-family: ui-monospace, 'SF Mono', monospace;
}

.mkt-mockup__body {
  padding: 1.25rem;
}

/* --- Layout --- */
.mkt-section {
  padding: 5rem 0;
}

.mkt-section--sm {
  padding: 3rem 0;
}

.mkt-section--lg {
  padding: 6.5rem 0;
}

.mkt-section--cream {
  background: #FAF3EE;
}

.mkt-section--dark {
  background: #F2F5EF;
  color: #4E5C64;
}

.mkt-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.mkt-inner--narrow {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Section Labels & Headings --- */
.mkt-label {
  display: inline-block;
  background: #E8E2DC;
  color: #4E5C64;
  border-radius: 9999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.mkt-label--amber {
  background: #F3DCDE;
  color: #4E5C64;
}

.mkt-label--green {
  background: #E4ECDA;
  color: #4E5C64;
}

.mkt-label--dark {
  background: rgba(78, 92, 100, 0.1);
  color: #4E5C64;
}

.mkt-heading {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  font-weight: 700;
  color: #4E5C64;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.mkt-heading--white {
  color: #4E5C64;
}

.mkt-subheading {
  font-size: 1.1rem;
  color: #4E5C64;
  line-height: 1.78;
  max-width: 44rem;
}

.mkt-subheading--white {
  color: #4E5C64;
}

/* --- Feature Cards --- */
.mkt-card {
  background: white;
  border: 1px solid #D8D4CC;
  border-radius: 1rem;
  padding: 2rem;
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-card:hover {
  box-shadow: var(--mkt-shadow-float);
  transform: translateY(-5px);
}

.mkt-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.mkt-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4E5C64;
  margin-bottom: 0.625rem;
}

.mkt-card__text {
  font-size: 0.925rem;
  color: #4E5C64;
  line-height: 1.72;
}

/* --- Feature Strip --- */
.mkt-strip {
  background: white;
  border-top: 1px solid #D8D4CC;
  border-bottom: 1px solid #D8D4CC;
  padding: 1.75rem 0;
}

.mkt-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 54rem;
  margin: 0 auto;
}

.mkt-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.625rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4E5C64;
}

.mkt-strip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #B5C1A8;
  flex-shrink: 0;
}

/* --- Theme Cards --- */
.mkt-theme-card {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--mkt-shadow-raised);
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-theme-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--mkt-shadow-float);
}

.mkt-theme-preview {
  height: 11rem;
  padding: 1.25rem;
  position: relative;
}

.mkt-theme-label {
  background: white;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mkt-theme-name {
  font-weight: 600;
  font-size: 0.925rem;
  color: #4E5C64;
  margin-bottom: 0.2rem;
}

.mkt-theme-desc {
  font-size: 0.825rem;
  color: #4E5C64;
}

/* --- Trust Items --- */
.mkt-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.mkt-trust-item {
  text-align: center;
  padding: 2rem 1.5rem;
  background: white;
  border: 1px solid #D8D4CC;
  border-radius: 1rem;
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-trust-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow-raised);
}

.mkt-trust-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.mkt-trust-title {
  font-weight: 600;
  color: #4E5C64;
  margin-bottom: 0.5rem;
  font-size: 0.975rem;
}

.mkt-trust-text {
  color: #4E5C64;
  font-size: 0.875rem;
  line-height: 1.65;
}

/* --- CTA Section --- */
.mkt-cta {
  background: #F2F5EF;
  padding: 5rem 0;
  text-align: center;
}

.mkt-cta__title {
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  font-weight: 700;
  color: #4E5C64;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.mkt-cta__subtitle {
  font-size: 1.1rem;
  color: #4E5C64;
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
}

.mkt-cta__trust {
  margin-top: 1.5rem;
  color: #4E5C64;
  font-size: 0.875rem;
}

/* --- Pricing --- */
.mkt-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 62rem;
  margin: 0 auto;
}

.mkt-pricing-card {
  background: white;
  border: 2px solid #D8D4CC;
  border-radius: 1.25rem;
  padding: 2.5rem;
  position: relative;
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-shadow-float);
}

.mkt-pricing-card--featured {
  border-color: #4E5C64;
  box-shadow: 0 0 0 4px rgba(78, 92, 100, 0.08), var(--mkt-shadow-raised);
}

.mkt-pricing-card--featured:hover {
  box-shadow: 0 0 0 4px rgba(78, 92, 100, 0.12), var(--mkt-shadow-portal);
}

.mkt-pricing-badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #4E5C64;
  color: #FAF8F5;
  padding: 0.3rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}

.mkt-pricing-price {
  font-size: 3.25rem;
  font-weight: 800;
  color: #4E5C64;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mkt-pricing-price--blue {
  color: #4E5C64;
}

.mkt-pricing-period {
  font-size: 0.875rem;
  color: #4E5C64;
  margin-top: 0.3rem;
}

.mkt-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}

.mkt-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.925rem;
  color: #4E5C64;
  border-bottom: 1px solid #EDEAE6;
}

.mkt-feature-list li:last-child {
  border-bottom: none;
}

.mkt-feature-check {
  color: #4E5C64;
  font-size: 0.9rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  font-weight: 700;
}

.mkt-feature-cross {
  color: #D8D4CC;
  font-size: 0.9rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.mkt-feature-text--muted {
  color: #4E5C64;
}

/* --- FAQ --- */
.mkt-faq-list {
  border: 1px solid #D8D4CC;
  border-radius: 0.875rem;
  overflow: hidden;
  max-width: 56rem;
  margin: 0 auto;
}

.mkt-faq-item {
  border-bottom: 1px solid #D8D4CC;
  padding: 1.625rem 2rem;
  background: white;
}

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

.mkt-faq-q {
  font-weight: 600;
  color: #4E5C64;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.mkt-faq-a {
  color: #4E5C64;
  line-height: 1.75;
  font-size: 0.925rem;
}

/* --- How-to Steps --- */
.mkt-steps {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.mkt-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mkt-step--reverse {
  direction: rtl;
}

.mkt-step--reverse>* {
  direction: ltr;
}

.mkt-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #4E5C64;
  color: #FAF8F5;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.mkt-step__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #4E5C64;
  margin-bottom: 0.875rem;
  letter-spacing: -0.015em;
}

.mkt-step__text {
  color: #4E5C64;
  line-height: 1.8;
  margin-bottom: 1.25rem;
  font-size: 1.025rem;
}

.mkt-step__visual {
  background: #F0EDEA;
  border: 1px solid #D8D4CC;
  border-radius: 0.875rem;
  padding: 1.75rem;
}

/* --- Manifesto (Why page) --- */
.mkt-manifesto {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 2rem;
  padding: 3rem 0;
  border-bottom: 1px solid #D8D4CC;
  align-items: flex-start;
}

.mkt-manifesto:last-child {
  border-bottom: none;
}

.mkt-manifesto__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.mkt-manifesto__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: #4E5C64;
  margin-bottom: 0.875rem;
  letter-spacing: -0.015em;
}

.mkt-manifesto__body {
  font-size: 1.025rem;
  color: #4E5C64;
  line-height: 1.82;
}

.mkt-manifesto__body strong {
  color: #4E5C64;
  font-weight: 600;
}

.mkt-manifesto__body p+p {
  margin-top: 0.875rem;
}

/* --- Testimonials --- */
.mkt-testimonial {
  background: white;
  border: 1px solid #D8D4CC;
  border-radius: 1rem;
  padding: 1.75rem;
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow-raised);
}

.mkt-testimonial__stars {
  color: #E8B4B8;
  font-size: 1.025rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.mkt-testimonial__quote {
  color: #4E5C64;
  line-height: 1.72;
  margin-bottom: 1.25rem;
  font-style: italic;
  font-size: 0.975rem;
}

.mkt-testimonial__author {
  font-weight: 600;
  color: #4E5C64;
  font-size: 0.875rem;
}

.mkt-testimonial__role {
  color: #4E5C64;
  font-size: 0.825rem;
  margin-top: 0.15rem;
}

/* --- Philosophy cards (Why page) --- */
.mkt-philosophy {
  background: white;
  border: 1px solid #D8D4CC;
  border-radius: 0.875rem;
  padding: 2.25rem;
}

.mkt-philosophy__quote {
  font-size: 1.125rem;
  color: #4E5C64;
  font-style: italic;
  border-left: 3px solid #B5C1A8;
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* --- Prose (Privacy / Terms) --- */
.mkt-prose {
  font-size: 0.975rem;
  line-height: 1.82;
  color: #4E5C64;
}

.mkt-prose h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #4E5C64;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid #D8D4CC;
  letter-spacing: -0.01em;
}

.mkt-prose h2:first-child {
  margin-top: 0;
  border-top: none;
}

.mkt-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4E5C64;
  margin-top: 1.75rem;
  margin-bottom: 0.625rem;
}

.mkt-prose p {
  margin-bottom: 1.125rem;
}

.mkt-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.125rem;
}

.mkt-prose li {
  margin-bottom: 0.4rem;
  color: #4E5C64;
}

.mkt-prose a {
  color: #4E5C64;
  font-weight: 600;
  text-decoration: underline;
}

.mkt-prose a:hover {
  color: #4E5C64;
  text-decoration: underline;
}

.mkt-highlight-box {
  border-radius: 0.5rem;
  padding: 1.125rem 1.5rem;
  margin: 1.5rem 0;
  border-left: 4px solid;
  font-size: 0.925rem;
  line-height: 1.7;
}

.mkt-highlight-box--blue {
  background: #F0EDEA;
  border-color: #4E5C64;
  color: #4E5C64;
}

.mkt-highlight-box--green {
  background: #F2F5EF;
  border-color: #B5C1A8;
  color: #4E5C64;
}

.mkt-highlight-box--amber {
  background: #FBF2F3;
  border-color: #E8B4B8;
  color: #4E5C64;
}

/* --- Improved Footer (WCAG AA accessible) --- */
.mkt-footer {
  background: #4E5C64;
  color: #FAF8F5;
  padding: 4.5rem 0 2rem;
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
}

.mkt-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.mkt-footer__grid--compact {
  grid-template-columns: 1fr auto;
  gap: 3rem;
}

/* Pricing card labels - accessible contrast (4.5:1) on white */
.mkt-pricing-card__label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4E5C64;
  margin-bottom: 0.75rem;
}

.mkt-pricing-card__label--blue {
  color: #4E5C64;
}

.mkt-footer__brand-name {
  font-size: 1.375rem;
  font-weight: 500;
  font-family: 'Iosevka', 'Iosevka Charon', ui-monospace, monospace;
  color: #FAF8F5;
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mkt-footer__brand-desc {
  color: #EDD5C8;
  font-size: 1rem;
  line-height: 1.72;
  max-width: 20rem;
  margin-bottom: 1.5rem;
}

.mkt-footer__col-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #FAF8F5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}

.mkt-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mkt-footer__link {
  color: #EDD5C8;
  font-size: 1rem;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.15s;
}

.mkt-footer__link:hover {
  color: #FAF8F5;
}

.mkt-footer__link:focus-visible {
  outline: 2px solid #FAF8F5;
  outline-offset: 2px;
  border-radius: 2px;
}

.mkt-footer__tagline {
  color: #EDD5C8;
  font-size: 0.9375rem;
  margin-top: 0.5rem;
}

.mkt-footer__bottom {
  border-top: 1px solid rgba(250, 248, 245, 0.15);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.mkt-footer__copyright {
  color: #EDD5C8;
  font-size: 0.9375rem;
}

/* Override the marketing h1-h4 weight rule for mkt- heading classes */
.marketing-landing .mkt-hero__title,
.marketing-page .mkt-hero__title,
.marketing-landing .mkt-heading,
.marketing-page .mkt-heading,
.marketing-landing .mkt-step__title,
.marketing-page .mkt-step__title,
.marketing-landing .mkt-manifesto__title,
.marketing-page .mkt-manifesto__title,
.marketing-landing .mkt-card__title,
.marketing-page .mkt-card__title,
.marketing-landing .mkt-cta__title,
.marketing-page .mkt-cta__title,
.marketing-landing .mkt-pricing-price,
.marketing-page .mkt-pricing-price {
  font-weight: 700;
}

.marketing-landing .mkt-btn,
.marketing-page .mkt-btn {
  font-weight: 600;
}

.marketing-landing .mkt-faq-q,
.marketing-page .mkt-faq-q,
.marketing-landing .mkt-trust-title,
.marketing-page .mkt-trust-title,
.marketing-landing .mkt-testimonial__author,
.marketing-page .mkt-testimonial__author {
  font-weight: 600;
}

/* --- Scoped palette overrides for marketing pages --- */
.marketing-landing .btn--primary,
.marketing-page .btn--primary {
  background-color: #4E5C64 !important;
  color: #FAF8F5 !important;
}
.marketing-landing .btn--primary:hover,
.marketing-page .btn--primary:hover {
  background-color: #3A4A52 !important;
}

/* Icon background tints — all derived from the 5-colour palette */
.marketing-landing .bg-blue-100,
.marketing-page .bg-blue-100 { background-color: #E8EDF0 !important; }
.marketing-landing .text-blue-600,
.marketing-page .text-blue-600 { color: #4E5C64 !important; }

.marketing-landing .bg-green-100,
.marketing-page .bg-green-100 { background-color: #E4ECDA !important; }
.marketing-landing .text-green-600,
.marketing-page .text-green-600 { color: #4E5C64 !important; }

.marketing-landing .bg-purple-100,
.marketing-page .bg-purple-100 { background-color: #F3DCDE !important; }
.marketing-landing .text-purple-600,
.marketing-page .text-purple-600 { color: #4E5C64 !important; }

.marketing-landing .bg-orange-100,
.marketing-page .bg-orange-100 { background-color: #F5EAE2 !important; }
.marketing-landing .text-orange-600,
.marketing-page .text-orange-600 { color: #4E5C64 !important; }

.marketing-landing .bg-yellow-100,
.marketing-page .bg-yellow-100 { background-color: #F5EAE2 !important; }
.marketing-landing .text-yellow-600,
.marketing-page .text-yellow-600 { color: #4E5C64 !important; }

.marketing-landing .bg-indigo-100,
.marketing-page .bg-indigo-100 { background-color: #E8EDF0 !important; }
.marketing-landing .text-indigo-600,
.marketing-page .text-indigo-600 { color: #4E5C64 !important; }

.marketing-landing .bg-red-100,
.marketing-page .bg-red-100 { background-color: #F3DCDE !important; }
.marketing-landing .text-red-600,
.marketing-page .text-red-600 { color: #4E5C64 !important; }

/* Responsive grid helpers for marketing pages */
.mkt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mkt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.mkt-grid-2--wide-gap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .mkt-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .mkt-grid-3,
  .mkt-grid-2,
  .mkt-grid-2--wide-gap {
    grid-template-columns: 1fr;
  }
}

/* Additional missing utilities */
.text-indigo-600 {
  color: #4f46e5;
}

.bg-indigo-100 {
  background-color: #e0e7ff;
}

.text-yellow-600 {
  color: #ca8a04;
}

.bg-yellow-100 {
  background-color: #fef9c3;
}

.bg-orange-100 {
  background-color: #ffedd5;
}

.text-orange-600 {
  color: #ea580c;
}

.bg-green-50 {
  background-color: #f0fdf4;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .mkt-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mkt-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .mkt-hero__cta-group {
    justify-content: center;
  }

  .mkt-hero__trust-strip {
    justify-content: center;
  }

  .mkt-mockup {
    margin: 0 auto;
    max-width: 380px;
  }

  .mkt-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mkt-footer__grid,
  .mkt-footer__grid--compact {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .mkt-step {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mkt-step--reverse {
    direction: ltr;
  }

  .mkt-pricing-grid {
    grid-template-columns: 1fr;
  }

  .mkt-manifesto {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mkt-strip__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .mkt-trust-grid {
    grid-template-columns: 1fr;
  }

  .mkt-footer__grid,
  .mkt-footer__grid--compact {
    grid-template-columns: 1fr;
  }

  .mkt-faq-item {
    padding: 1.25rem 1.25rem;
  }
}

/* --- Scroll Reveal System --- */
.mkt-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--mkt-dur-smooth) var(--mkt-ease-out),
              transform var(--mkt-dur-smooth) var(--mkt-ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.mkt-reveal--left {
  transform: translateX(-32px);
}

.mkt-reveal--right {
  transform: translateX(32px);
}

.mkt-reveal--scale {
  transform: scale(0.92);
}

.mkt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* --- Hero Entrance (above-the-fold, CSS-only) --- */
.marketing-landing .mkt-hero .mkt-hero__eyebrow,
.marketing-page .mkt-hero .mkt-hero__eyebrow {
  animation: mkt-fade-up 500ms var(--mkt-ease-out) 100ms both;
}

.marketing-landing .mkt-hero .mkt-hero__title,
.marketing-page .mkt-hero .mkt-hero__title {
  animation: mkt-fade-up 600ms var(--mkt-ease-out) 250ms both;
}

.marketing-landing .mkt-hero .mkt-hero__subtitle,
.marketing-page .mkt-hero .mkt-hero__subtitle {
  animation: mkt-fade-up 600ms var(--mkt-ease-out) 400ms both;
}

.marketing-landing .mkt-hero .mkt-hero__cta-group,
.marketing-page .mkt-hero .mkt-hero__cta-group {
  animation: mkt-fade-up 500ms var(--mkt-ease-out) 550ms both;
}

.marketing-landing .mkt-hero .mkt-hero__trust-strip,
.marketing-page .mkt-hero .mkt-hero__trust-strip {
  animation: mkt-fade-in 600ms var(--mkt-ease-out) 700ms both;
}

/* --- Floating Portal (hero app mockup) --- */
.mkt-portal {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.mkt-portal__frame {
  transform: rotateY(-3deg) rotateX(2deg);
  transition: transform 500ms var(--mkt-ease-spring);
  box-shadow: var(--mkt-shadow-portal);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  animation: mkt-scale-in 800ms var(--mkt-ease-spring) 350ms both;
}

.mkt-portal__frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  border: 2px solid rgba(78, 92, 100, 0.2);
  pointer-events: none;
  animation: mkt-glow-pulse 3s ease-in-out infinite;
}

.mkt-portal__frame:hover {
  transform: rotateY(-1deg) rotateX(1deg) translateY(-6px);
  box-shadow: var(--mkt-shadow-portal), 0 0 40px rgba(78, 92, 100, 0.08);
}

.mkt-portal__frame img {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* --- Floating Animation (for accent elements) --- */
.mkt-float {
  animation: mkt-float 6s ease-in-out infinite;
}

/* --- Navbar Scroll State (sticky glass morphism) --- */
.marketing-landing .navbar,
.marketing-page .navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth),
              background-color var(--mkt-dur-smooth) var(--mkt-ease-smooth),
              backdrop-filter var(--mkt-dur-smooth) var(--mkt-ease-smooth),
              -webkit-backdrop-filter var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.marketing-landing .navbar--scrolled,
.marketing-page .navbar--scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
}

/* --- Enhanced Section Spacing --- */
.mkt-section-intro {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* --- FAQ Accordion --- */
.mkt-faq-item[data-faq-target="item"] {
  cursor: pointer;
}

.mkt-faq-q--toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}

.mkt-faq-q--toggle:hover {
  color: #4E5C64;
}

.mkt-faq-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform var(--mkt-dur-modal) var(--mkt-ease-spring);
  color: #4E5C64;
}

.mkt-faq-item.is-open .mkt-faq-chevron {
  transform: rotate(180deg);
  color: #4E5C64;
}

[data-faq-answer] {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mkt-dur-modal) var(--mkt-ease-smooth);
}

.mkt-faq-item.is-open [data-faq-answer] {
  max-height: none;
}

/* --- Philosophy Card Hover --- */
.mkt-philosophy {
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-philosophy:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow-raised);
}

/* --- Manifesto Section Dividers --- */
.mkt-manifesto {
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring);
}

.mkt-manifesto:hover {
  transform: translateX(4px);
}

/* --- Enhanced CTA Gradient --- */
/* CTA gradient animation removed — CTA now uses solid light background */

/* --- Step Visual Enhancement --- */
.mkt-step__visual {
  transition: transform var(--mkt-dur-normal) var(--mkt-ease-spring),
              box-shadow var(--mkt-dur-smooth) var(--mkt-ease-smooth);
}

.mkt-step__visual:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-shadow-float);
}

/* --- Link Hover Underline Animation --- */
.mkt-link-animated {
  position: relative;
  text-decoration: none;
}

.mkt-link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--mkt-dur-normal) var(--mkt-ease-spring);
}

.mkt-link-animated:hover::after {
  width: 100%;
}

/* --- Icon Bounce on Reveal --- */
.mkt-reveal.is-visible .mkt-card__icon,
.mkt-reveal.is-visible .mkt-trust-icon,
.mkt-reveal.is-visible .mkt-manifesto__icon {
  animation: mkt-scale-in var(--mkt-dur-emphasis) var(--mkt-ease-spring) both;
}

/* --- prefers-reduced-motion: disable all custom animations --- */
@media (prefers-reduced-motion: reduce) {
  .mkt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mkt-hero__eyebrow-dot {
    animation: none !important;
  }

  .marketing-landing .mkt-hero .mkt-hero__eyebrow,
  .marketing-page .mkt-hero .mkt-hero__eyebrow,
  .marketing-landing .mkt-hero .mkt-hero__title,
  .marketing-page .mkt-hero .mkt-hero__title,
  .marketing-landing .mkt-hero .mkt-hero__subtitle,
  .marketing-page .mkt-hero .mkt-hero__subtitle,
  .marketing-landing .mkt-hero .mkt-hero__cta-group,
  .marketing-page .mkt-hero .mkt-hero__cta-group,
  .marketing-landing .mkt-hero .mkt-hero__trust-strip,
  .marketing-page .mkt-hero .mkt-hero__trust-strip {
    animation: none !important;
  }

  .mkt-portal__frame {
    animation: none !important;
    transform: none !important;
  }

  .mkt-portal__frame::after {
    animation: none !important;
  }

  .mkt-float {
    animation: none !important;
  }

  .mkt-cta {
    animation: none !important;
  }

  .mkt-btn {
    transition: background-color var(--mkt-dur-fast) ease,
                color var(--mkt-dur-fast) ease !important;
  }

  .mkt-card,
  .mkt-theme-card,
  .mkt-trust-item,
  .mkt-testimonial,
  .mkt-pricing-card,
  .mkt-philosophy,
  .mkt-manifesto,
  .mkt-step__visual {
    transition: none !important;
  }

  .mkt-reveal.is-visible .mkt-card__icon,
  .mkt-reveal.is-visible .mkt-trust-icon,
  .mkt-reveal.is-visible .mkt-manifesto__icon {
    animation: none !important;
  }

  [data-faq-answer] {
    transition: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mkt-faq-chevron {
    transition: none !important;
  }
}

/* =================================
   CALENDAR TEMPLATE (Phase 3.5: TeuxDeux-style)
   ================================= */
.calendar-week {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
}

.theme-dark .calendar-week {
  background-color: #282a36;
}

.theme-lined .calendar-week,
.theme-graph .calendar-week,
.theme-vintage .calendar-week {
  background-color: #f8f9fa;
}

/* Remove vertical lines from notebook-card on calendar days */
.calendar-day .notebook-card::before {
  display: none;
}

.calendar-week__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .calendar-week__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex-wrap: wrap;
  }
}

.calendar-day {
  flex-shrink: 0;
  width: 220px;
  min-height: 120px;
}

@media (min-width: 768px) {
  .calendar-day {
    width: auto;
    min-width: 0;
  }
}

.calendar-day--today {
  box-shadow: 0 0 0 2px #3b82f6;
  border-radius: 4px;
}

.theme-dark .calendar-day--today {
  box-shadow: 0 0 0 2px #60a5fa;
}

.theme-dark .calendar-todo-item:hover {
  background-color: rgba(75, 85, 99, 0.5);
}

/* Day header: date on top (gray), day name below (bold); today in accent */
.calendar-day__date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.theme-dark .calendar-day__date {
  color: #c1c8e6;
}

.calendar-day__name {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

.theme-dark .calendar-day__name {
  color: #f5f5f5;
}

.calendar-day__name--today {
  color: var(--user-accent);
}

/* =================================
   USER ACCENT & FONT (Phase 3)
   ================================= */
/* Override accent colors to use --user-accent when set via layout */
.text-blue-600,
a.text-blue-600 {
  color: var(--user-accent) !important;
}

.hover\:text-blue-600:hover,
a.text-blue-600:hover,
.text-blue-600:hover {
  color: var(--user-accent) !important;
}

.hover\:text-blue-800:hover,
a.text-blue-800:hover {
  color: var(--user-accent) !important;
}

.theme-dark .text-blue-600,
.theme-dark a.text-blue-600 {
  color: var(--user-accent) !important;
}

.theme-dark .text-blue-800,
.theme-dark .hover\:text-blue-800:hover {
  color: var(--user-accent) !important;
}

/* =================================
   DASHBOARD – FLAT MINIMAL
   ================================= */
.dashboard {
  width: 100%;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
}

/* ── Week View (fills remaining space; no bottom lists) ── */
.dashboard__week-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.week-col {
  padding: 16px 16px 24px;
  min-height: 200px;
}

.week-col+.week-col {
  border-left: 1px solid #f0f0f0;
}

.week-col--today {
  background: #fafafa;
}

.week-col__header {
  margin-bottom: 16px;
}

.week-col__date {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #888;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.week-col__day {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.02em;
}

.week-col__day--today {
  color: #7c6cc4;
}

.week-col__items {
  min-height: 40px;
}

.week-col__add {
  margin-top: 8px;
}

/* ── Todo Item ── */
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}

.todo-item:hover .todo-item__actions {
  opacity: 1;
}

.todo-item__form {
  display: flex;
  flex-grow: 1;
}

/* Wrapper so title grows and can truncate; flex layout for display vs form */
.todo-item__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.todo-item__title-wrap > .todo-item__title {
  flex: 1;
  min-width: 0;
}

/* Menu button (⋯) to open options modal — visible on mobile, desktop */
.todo-item__menu-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 1.125rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.todo-item__menu-btn:hover {
  color: #333;
}

.todo-item__title {
  font-size: 0.875rem;
  color: #222;
  line-height: 1.4;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.todo-item__title--done {
  text-decoration: line-through;
  text-decoration-color: #ff3366;
  text-decoration-thickness: 2px;
  color: #aaa;
}

/* Inline edit: input matches title styling, snappy feel */
.todo-item__edit-inner {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.todo-item__title-input {
  font-size: 0.875rem;
  color: #222;
  line-height: 1.4;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 0 0 2px 0;
  margin: 0;
  outline: none;
  width: 100%;
  min-width: 60px;
  font-family: inherit;
}

.todo-item__title-input:focus {
  border-bottom-color: #222;
}

.todo-item__edit-form {
  display: none;
  flex: 1;
  min-width: 0;
}

.todo-item__edit-form .todo-item__edit-inner[style*="display:"] {
  display: inline-flex !important;
}

.todo-item__actions {
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: auto;
  flex-shrink: 0;
}

.todo-item__delete {
  font-size: 1.125rem;
  color: #999;
  text-decoration: none;
  line-height: 1;
  margin-left: 4px;
}

.todo-item__delete:hover {
  color: #e74c3c;
}

/* ── Todo Input ── */
.todo-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: #111;
  background: transparent;
  outline: none;
  transition: border-color 0.15s ease;
}

.todo-input::placeholder {
  color: #999;
}

.todo-input:focus {
  border-bottom-color: #111;
}

/* ── Custom Lists Section ── */
/* Bottom section removed per legal-changes — week view fills remaining space */

/* ── Focus mode: hide nav/FAB/title/Not Yet trigger, center day, pomodoro panel ── */
body.focus-mode .fab,
body.focus-mode [data-controller*="fab-navigation"] .fab,
body.focus-mode .nav-island__cog,
body.focus-mode .not-yet-panel__trigger {
  display: none !important;
}

.dashboard__header--hidden {
  display: none !important;
}

/* Focus mode: center single day column, give it max-width */
.dashboard--focus-mode .dashboard__week-view--focus {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 50vh;
  max-height: 70vh;
}

.dashboard--focus-mode .dashboard__week-view--focus .week-col {
  max-width: 420px;
  width: 100%;
}

/* Focus mode: pomodoro footer */
.dashboard__focus-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 32px;
  gap: 20px;
}

/* Pomodoro panel */
.focus-mode__pomodoro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pomodoro__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pomodoro__durations {
  display: flex;
  gap: 10px;
}

.pomodoro__duration-btn {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.pomodoro__duration-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.pomodoro__duration-btn--active {
  background: var(--user-accent, #9966CC);
  border-color: var(--user-accent, #9966CC);
  color: #fff;
}

.pomodoro__timer-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pomodoro__display {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #111;
  min-width: 5ch;
}

.pomodoro__play-btn,
.pomodoro__pause-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--user-accent, #9966CC);
  background: #fff;
  color: var(--user-accent, #9966CC);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.pomodoro__play-btn:hover,
.pomodoro__pause-btn:hover {
  background: var(--user-accent, #9966CC);
  color: #fff;
}

.focus-mode__exit {
  font-size: 0.9rem;
  color: #666;
  text-decoration: underline;
}

.focus-mode__exit:hover {
  color: #333;
}

/* Pomodoro "Well done!" modal */
.pomodoro-done-modal {
  padding: 0;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  max-width: 90vw;
}

.pomodoro-done-modal::backdrop {
  background: rgba(0,0,0,0.5);
}

.pomodoro-done-modal__content {
  padding: 32px 28px;
  text-align: center;
}

.pomodoro-done-modal__title {
  margin: 0 0 12px;
  font-size: 1.75rem;
  font-weight: 800;
  color: #111;
  font-family: var(--user-font, inherit);
}

.pomodoro-done-modal__text {
  margin: 0 0 24px;
  font-size: 1rem;
  color: #666;
  font-family: var(--user-font, inherit);
}

.pomodoro-done-modal__btn {
  padding: 12px 32px;
  background: var(--user-accent, #9966CC);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--user-font, inherit);
}

.theme-dark .pomodoro__duration-btn { background: #44475a; border-color: #6272a4; color: #f8f8f2; }
.theme-dark .pomodoro__duration-btn:hover { background: #6272a4; }
.theme-dark .pomodoro__display { color: #f8f8f2; }
.theme-dark .pomodoro-done-modal__title { color: #f8f8f2; }
.theme-dark .pomodoro-done-modal__text { color: #6272a4; }
.theme-dark .focus-mode__exit { color: #6272a4; }
.theme-dark .focus-mode__exit:hover { color: #f8f8f2; }

/* =================================
   CALENDAR PICKER MODAL
   ================================= */
.dashboard__nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  font-weight: inherit;
}

.dashboard__nav-btn:hover {
  color: var(--user-accent, #9966CC);
}

.calendar-picker__trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: #2d2d2d;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.calendar-picker__trigger:hover {
  color: var(--user-accent, #9966CC);
  background: rgba(0, 0, 0, 0.05);
}

.calendar-modal {
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 320px;
  margin: auto;
  font-family: var(--user-font, inherit);
}

.calendar-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.calendar-modal__content {
  padding: 20px;
}

.calendar-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.calendar-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
  padding: 0 4px;
  line-height: 1;
}

.calendar-modal__close:hover {
  color: #333;
}

.calendar-modal__today-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--user-accent, #9966CC);
}

.calendar-modal__today-link:hover {
  text-decoration: underline;
}

.calendar-modal__month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.calendar-modal__month-label {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  min-width: 140px;
  text-align: center;
}

.calendar-modal__month-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
}

.calendar-modal__month-btn:hover {
  color: var(--user-accent, #9966CC);
}

.calendar-modal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}

.calendar-modal__header-row {
  display: contents;
}

.calendar-modal__header-row .calendar-modal__weekday {
  grid-column: span 1;
}

.calendar-modal__weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  padding: 4px 0;
}

.calendar-modal__grid-body {
  display: contents;
}

.calendar-modal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 0.9rem;
  color: #333;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.calendar-modal__day:hover {
  background: #f3f4f6;
}

.calendar-modal__day--today {
  background: var(--user-accent, #9966CC);
  color: white;
  font-weight: 600;
}

.calendar-modal__day--today:hover {
  opacity: 0.9;
}

.calendar-modal__day--selected {
  outline: 2px solid var(--user-accent, #9966CC);
  outline-offset: 2px;
}

.calendar-modal__day--empty {
  pointer-events: none;
  background: none;
}

.calendar-modal__footer {
  display: flex;
  justify-content: flex-end;
}

.calendar-modal__cancel {
  padding: 8px 16px;
  background: #f3f4f6;
  color: #4b5563;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.calendar-modal__cancel:hover {
  background: #e5e7eb;
}

/* Dark theme overrides for calendar modal */
.theme-dark .dashboard__nav-btn { color: #6272a4; }
.theme-dark .dashboard__nav-btn:hover { color: #bd93f9; }
.theme-dark .dashboard__nav-row { color: #6272a4; }
/* Force dark background – dialogs in top layer may not inherit from body, so we also support .theme-dark on the dialog itself (set by date_picker_controller) */
.theme-dark .calendar-modal,
.calendar-modal.theme-dark { background: #282a36 !important; color: #f8f8f2; }
.theme-dark .calendar-modal__content,
.calendar-modal.theme-dark .calendar-modal__content { background: #282a36 !important; }
.theme-dark .calendar-modal__header,
.theme-dark .calendar-modal__month-nav,
.theme-dark .calendar-modal__grid,
.theme-dark .calendar-modal__footer,
.calendar-modal.theme-dark .calendar-modal__header,
.calendar-modal.theme-dark .calendar-modal__month-nav,
.calendar-modal.theme-dark .calendar-modal__grid,
.calendar-modal.theme-dark .calendar-modal__footer { color: inherit; }
.theme-dark .calendar-picker__trigger { color: #6272a4; }
.theme-dark .calendar-picker__trigger:hover { color: #bd93f9; }
.theme-dark .calendar-modal__title,
.calendar-modal.theme-dark .calendar-modal__title { color: #f8f8f2; }
.theme-dark .calendar-modal__close,
.calendar-modal.theme-dark .calendar-modal__close { color: #6272a4; }
.theme-dark .calendar-modal__close:hover,
.calendar-modal.theme-dark .calendar-modal__close:hover { color: #f8f8f2; }
.theme-dark .calendar-modal__today-link,
.calendar-modal.theme-dark .calendar-modal__today-link { color: #bd93f9; }
.theme-dark .calendar-modal__month-label,
.calendar-modal.theme-dark .calendar-modal__month-label { color: #f8f8f2; }
.theme-dark .calendar-modal__month-btn,
.calendar-modal.theme-dark .calendar-modal__month-btn { color: #6272a4; }
.theme-dark .calendar-modal__month-btn:hover,
.calendar-modal.theme-dark .calendar-modal__month-btn:hover { color: #bd93f9; }
.theme-dark .calendar-modal__weekday,
.calendar-modal.theme-dark .calendar-modal__weekday { color: #6272a4; }
.theme-dark .calendar-modal__day,
.calendar-modal.theme-dark .calendar-modal__day { color: #f8f8f2; }
.theme-dark .calendar-modal__day:hover,
.calendar-modal.theme-dark .calendar-modal__day:hover { background: #44475a; }
.theme-dark .calendar-modal__day--today,
.calendar-modal.theme-dark .calendar-modal__day--today { background: #bd93f9; color: #282a36; }
.theme-dark .calendar-modal__day--selected,
.calendar-modal.theme-dark .calendar-modal__day--selected { outline-color: #bd93f9; }
.theme-dark .calendar-modal__cancel,
.calendar-modal.theme-dark .calendar-modal__cancel { background: #44475a; color: #f8f8f2; }
.theme-dark .calendar-modal__cancel:hover,
.calendar-modal.theme-dark .calendar-modal__cancel:hover { background: #6272a4; }

/* Task area above the title bar */
.lists__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Bottom title bar — chevron | names | + */
.lists__titlebar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  height: 52px;
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
}

.lists__titlebar-chevron {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  padding: 0 8px 0 0;
}

.lists__titlebar-names {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 32px;
  align-items: center;
  min-width: 0;
}

.lists__titlebar-names::-webkit-scrollbar {
  display: none;
}

.lists__titlebar-add {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  color: #555;
  line-height: 1;
  padding: 0 0 0 8px;
}

/* Add button when inside scroll area (after last list) */
.lists__titlebar-add--inline {
  flex: 0 0 auto;
  padding: 0 0 0 8px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll arrows for list headers (visible only when content overflows) */
.lists__titlebar-scroll-arrows {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 8px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lists__titlebar-scroll-arrows--visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.lists__titlebar-scroll-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: #555;
  line-height: 1;
  padding: 0 6px;
}

.lists__titlebar-scroll-btn:hover {
  color: #111;
}

/* ── Single "Not Yet" list layout ── */
.lists__column--single {
  flex: 1 1 100%;
  min-width: 0;
}

.lists__titlebar--single {
  gap: 12px;
}

.lists__column-title--not-yet {
  flex: 1;
  margin: 0;
}

.lists__titlebar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lists__titlebar-break-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #888;
  padding: 0 6px;
  line-height: 1;
}

.lists__titlebar-break-btn:hover {
  color: #333;
}

/* Visual break: section divider with optional title (grey, bold) */
.todo-visual-break {
  padding: 8px 0;
}

.todo-visual-break__section {
  font-weight: 700;
  color: #6b7280;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.theme-dark .todo-visual-break__section {
  color: #9ca3af;
}

.todo-visual-break__line {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}

.theme-dark .todo-visual-break__line {
  border-top-color: #44475a;
}

/* ── Right-hand Not Yet panel (Future Tasks) ── */
.not-yet-panel__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1099;
}

/* During drag from Not Yet list: let drop events reach week columns underneath overlay */
body.is-dragging-from-not-yet .not-yet-panel__overlay {
  pointer-events: none;
}

.not-yet-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 95vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

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

.not-yet-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.not-yet-panel__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #111;
  outline: none;
}

.not-yet-panel__title[contenteditable="true"]:focus {
  outline: 2px solid var(--user-accent, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}

.not-yet-panel__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.not-yet-panel__close:hover {
  color: #111;
}

.not-yet-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.not-yet-panel__list {
  min-height: 60px;
}

.not-yet-panel__add {
  margin-top: 12px;
}

.not-yet-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.not-yet-panel__break-btn,
.not-yet-panel__new-list-btn {
  background: none;
  border: none;
  font-size: 0.8125rem;
  color: #888;
  cursor: pointer;
}

.not-yet-panel__break-btn:hover,
.not-yet-panel__new-list-btn:hover {
  color: #111;
}

.not-yet-panel__empty {
  text-align: center;
  padding: 32px 16px;
}

.not-yet-panel__empty p {
  margin: 0 0 16px;
  color: #666;
  font-size: 0.9375rem;
}

.not-yet-panel__trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: #2d2d2d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  padding: 0;
}

.not-yet-panel__trigger:hover {
  opacity: 0.6;
}

/* Double chevron, rotated to point left (looking out from right edge) */
.not-yet-panel__chevron {
  transform: rotate(180deg);
}

.theme-dark .not-yet-panel {
  background: #282a36;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

.theme-dark .not-yet-panel__title { color: #f8f8f2; }
.theme-dark .not-yet-panel__close { color: #6272a4; }
.theme-dark .not-yet-panel__close:hover { color: #f8f8f2; }
.theme-dark .not-yet-panel__header { border-bottom-color: #44475a; }
.theme-dark .not-yet-panel__actions { border-top-color: #44475a; }
.theme-dark .not-yet-panel__break-btn,
.theme-dark .not-yet-panel__new-list-btn { color: #6272a4; }
.theme-dark .not-yet-panel__break-btn:hover,
.theme-dark .not-yet-panel__new-list-btn:hover { color: #f8f8f2; }
.theme-dark .not-yet-panel__empty p { color: #a0aec0; }
.theme-dark .not-yet-panel__trigger { color: #6272a4; }
.theme-dark .not-yet-panel__trigger:hover { color: #f8f8f2; }

.lists__tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-left: 10px;
}

.lists__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
}

.lists__tab:hover {
  color: #333;
}

.lists__tab--active {
  color: #333;
  border-bottom-color: #333;
}

.lists__tab-count {
  font-weight: 400;
  color: #aaa;
  font-size: 0.75rem;
  margin-left: 4px;
}

.lists__columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
  flex: 1;
}

.lists__column {
  flex: 0 0 280px;
  min-height: 80px;
}

.lists__column-title {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #111;
  margin: 0 0 12px;
}

.lists__column-add {
  margin-top: 8px;
}

.lists__column--new {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.lists__new-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #aaa;
  text-decoration: none;
  padding: 8px 0;
}

.lists__new-btn:hover {
  color: #111;
}

.dashboard__empty-lists {
  text-align: center;
  padding: 32px 0;
}

/* Nav island — desktop: contents (children positioned separately); mobile: bottom island */
.nav-island {
  display: contents;
}

/* Cog: top-left (desktop and mobile) */
.nav-island__cog {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: none;
  border: none;
  color: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.15s ease;
  padding: 0;
}

.fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: none;
  border: none;
  color: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.15s ease;
  padding: 0;
}

.fab:hover,
.nav-island__cog:hover {
  opacity: 0.6;
}

.fab--hidden {
  display: none;
}

.fab__icon {
  width: 24px;
  height: 24px;
}

.fab__icon--hidden {
  display: none;
}

/* Chevron (Not Yet) — hidden on desktop, shown in mobile island */
.nav-island__chevron {
  display: none;
}

.theme-dark .nav-island__cog,
.theme-dark .nav-island__chevron {
  color: #6272a4;
}

.theme-dark .nav-island__cog:hover,
.theme-dark .nav-island__chevron:hover {
  color: #f8f8f2;
}

/* Mobile: full-screen panels + bottom island (Account | Cog | Chevron) */
@media (max-width: 768px) {
  main#main-content {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* Preferences & notes panels full screen on mobile */
  .side-drawer.preferences-panel,
  .side-drawer.settings-panel,
  .notes-drawer {
    width: 100%;
    max-width: 100%;
  }

  .side-drawer.preferences-panel,
  .side-drawer.settings-panel {
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }

  .not-yet-panel {
    width: 100%;
    max-width: 100%;
  }

  /* Hide dashboard's Not Yet trigger on mobile (chevron is in island) */
  .not-yet-panel__trigger {
    display: none !important;
  }

  .nav-island {
    display: flex;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: color-mix(in srgb, var(--user-accent, #9966CC) 8%, white);
    border-radius: 999px;
    padding: 8px 16px;
    gap: 8px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  /* Cog stays top-left on mobile; only chevron in island */
  .nav-island__cog {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
  }

  .fab {
    position: static;
    width: 36px;
    height: 36px;
  }

  .nav-island__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #333;
  }

  /* Flip chevrons horizontally on mobile (» → «) */
  .nav-island__chevron-icon {
    transform: scaleX(-1);
  }

  .theme-dark .nav-island {
    background: color-mix(in srgb, var(--user-accent, #bd93f9) 12%, #282a36);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
}

/* ── Bottom Sheet (mobile) ── */
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1001;
}

.bottom-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 16px 16px;
  z-index: 1002;
  max-height: 50vh;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.bottom-sheet__handle-bar {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

.bottom-sheet__content {
  padding: 0 24px 32px;
}

.bottom-sheet__user {
  padding: 8px 0 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
  text-align: center;
}

.bottom-sheet__username {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111;
}

.bottom-sheet__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-sheet__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.9375rem;
  color: #333;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.bottom-sheet__link:hover {
  color: #111;
}

.bottom-sheet__link--danger {
  color: #e74c3c;
}

.bottom-sheet__link--danger:hover {
  color: #c0392b;
}

.bottom-sheet__link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bottom-sheet__divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

/* ── Desktop Nav Bar ── */
.desktop-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  z-index: 1002;
  padding: 12px 24px;
}

.desktop-nav__inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.desktop-nav__user {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111;
  margin-right: auto;
}

.desktop-nav__links {
  display: flex;
  gap: 8px;
}

.desktop-nav__link {
  font-size: 0.8125rem;
  color: #555;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.desktop-nav__link:hover {
  background: #f5f5f5;
  color: #111;
}

.desktop-nav__link--danger {
  color: #e74c3c;
}

.desktop-nav__close {
  font-size: 1.25rem;
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
}

/* ── Side Drawer (slides from left) ── */
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 80vw;
  background: #fff;
  z-index: 2001;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.side-drawer--open {
  transform: translateX(0);
}

.side-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.side-drawer__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.side-drawer__close {
  font-size: 1.25rem;
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
}

.side-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.side-drawer__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2000;
}

/* Theme options inside side drawer */
.theme-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}

.theme-option:hover {
  border-color: #bbb;
}

.theme-option--active {
  border-color: var(--user-accent, #9966CC) !important;
}

.theme-option__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
}

.theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* ── View Options (side drawer) ── */
.view-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  color: #333;
}

.view-option:hover {
  border-color: #bbb;
  background: #fafafa;
}

.view-option--active {
  border-color: #7c6cc4;
  background: #f5f3ff;
}

.view-option__number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #7c6cc4;
  min-width: 32px;
  text-align: center;
}

.view-option__info {
  display: flex;
  flex-direction: column;
}

.view-option__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
}

.view-option__desc {
  font-size: 0.75rem;
  color: #888;
}

/* Empty lists placeholder */
.dashboard__empty-lists {
  text-align: center;
  padding: 32px 0;
}

.dashboard__empty-text {
  font-size: 0.875rem;
  color: #aaa;
  margin: 0;
}

/* ── Mobile Responsive ── */
@media (max-width: 767px) {
  .dashboard {
    padding: 16px 16px 80px;
  }

  .dashboard__week-view {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    min-height: auto;
    max-height: none;
  }

  .week-col {
    min-width: 85vw;
    scroll-snap-align: center;
    flex-shrink: 0;
    border-left: none;
    border-right: 1px solid #f0f0f0;
  }

  .lists__columns {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__week-view {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* =================================
   ACCENT COLOR PROPAGATION
   ================================= */
.dashboard__header-center {
  color: var(--user-accent) !important;
}

.todo-item__title--done {
  text-decoration: line-through;
  opacity: 0.45;
}

.lists__tab--active {
  color: var(--user-accent) !important;
  border-bottom-color: var(--user-accent) !important;
}

.week-col__day--today {
  color: var(--user-accent) !important;
}

.view-option--active {
  border-color: var(--user-accent) !important;
}

.view-option__number {
  color: var(--user-accent) !important;
}

.theme-option--active {
  border-color: var(--user-accent) !important;
}

.pref-toggle-btn--active {
  background: var(--user-accent) !important;
  color: white !important;
  border-color: var(--user-accent) !important;
}

/* =================================
   TODO ITEM — STYLE OPTIONS (Bold, Highlight, Recurrence)
   ================================= */
.todo-item--bold .todo-item__title {
  font-weight: 700 !important;
}

.todo-item--ghost {
  opacity: 0.4;
}

.todo-item--chosen {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.todo-item--drag {
  opacity: 0.85;
}

.todo-item__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* The mini style toolbar — hidden until hover */
.todo-item__toolbar {
  display: none;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  margin-right: 4px;
}

.todo-item__toolbar .todo-item__notes-btn {
  margin-left: 0;
}

.todo-item:hover .todo-item__toolbar {
  display: flex;
}

.todo-toolbar__form {
  display: inline-flex;
}

.todo-toolbar__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 0.72rem;
  color: #888;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.todo-toolbar__btn:hover {
  background: #f0f0f0;
  color: #333;
}

.todo-toolbar__btn--active {
  background: var(--user-accent) !important;
  color: #fff !important;
}

/* Highlight picker */
.todo-toolbar__highlight-wrap,
.todo-toolbar__recur-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.todo-highlight-picker {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px;
  gap: 6px;
  flex-wrap: wrap;
  width: 148px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 400;
}

.todo-highlight-picker--open {
  display: flex;
}

.todo-highlight-picker--modal.todo-highlight-picker--open {
  display: flex;
}

.todo-highlight-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: transform 0.1s;
}

.todo-highlight-color:hover {
  transform: scale(1.2);
}

.todo-highlight-color--active {
  border-color: #333 !important;
}

/* Recurrence picker */
.todo-recur-picker {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 400;
  min-width: 148px;
}

.todo-recur-picker--open {
  display: flex;
  flex-direction: column;
}

.todo-recur-option {
  background: none;
  border: none;
  text-align: left;
  padding: 7px 14px;
  font-size: 0.8rem;
  color: #555;
  cursor: pointer;
  transition: background 0.1s;
}

.todo-recur-option:hover {
  background: #f5f5f5;
}

.todo-recur-option--active {
  color: var(--user-accent);
  font-weight: 600;
}

/* =================================
   PREFERENCES & SETTINGS SIDE DRAWERS
   ================================= */
/* ── Settings Bottom Sheet (legal-changes: replaces left drawer) ── */
.settings-sheet__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1098;
}

.settings-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 85vh;
  background: color-mix(in srgb, var(--user-accent, #9966CC) 10%, white);
  border-radius: 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  z-index: 1099;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

/* Account tab: same panel size, no expansion */

.settings-sheet--open {
  transform: translateY(0);
}

.settings-sheet__handle-bar {
  display: flex;
  justify-content: center;
  padding: 2px 0 2px;
  flex-shrink: 0;
}

.settings-sheet__handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

.settings-sheet__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px 4px;
  min-height: 0;
  flex-shrink: 0;
}

/* Content area — 5% left/right padding, 2% gap handled by grid */
.settings-sheet__content {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 5% 14px;
  box-sizing: border-box;
}

.settings-sheet__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

.settings-sheet__close:hover {
  color: #111;
}

.settings-sheet__body {
  flex: 1;
  min-height: 0;
}

/* 5-column grid — desktop (1024px+). Theme | Font | Accent | View | Completed.
   Flexible fr units, Accent gets enough room for 4 swatches per row. */
.settings-sheet__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.6fr);
  gap: 0 16px;
  align-items: start;
  height: 100%;
  min-width: 0;
}

.settings-sheet__section {
  padding: 2px 4px 2px 8px;
  min-width: 0;
  overflow: hidden;
}

/* Theme & Font aligned horizontally — same label height, content starts together */
.settings-sheet__section--theme,
.settings-sheet__section--font {
  display: flex;
  flex-direction: column;
}

.settings-sheet__section--theme .pref-section__label,
.settings-sheet__section--font .pref-section__label {
  min-height: 14px;
}

/* Accent column — 4 per row by default, 8 in one row on larger desktop */
.settings-sheet__section--accent .pref-color-swatches {
  display: grid;
  grid-template-columns: repeat(4, 20px);
  gap: 6px;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .settings-sheet__section--accent .pref-color-swatches {
    grid-template-columns: repeat(8, 20px);
  }
}

.settings-sheet__section--accent .pref-color-swatch {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
}

/* Column content — larger, readable fonts */
.settings-sheet__section .pref-section__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 6px;
}

/* Theme — 2 rows (3 + 2) */
.settings-sheet__section--theme .theme-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Font — 2 rows (2 + 2); higher specificity to beat global .pref-font-list */
.settings-sheet__columns .settings-sheet__section--font .pref-font-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

/* Exclude theme section — it uses 3-column (3+2) layout above */
.settings-sheet__section:not(.settings-sheet__section--theme) .theme-modal__grid {
  grid-template-columns: 1fr;
  gap: 2px;
}

.settings-sheet__section .theme-option {
  flex-direction: row;
  gap: 4px;
  padding: 2px 4px;
}

.settings-sheet__section .theme-preview {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 4px;
}

.settings-sheet__section .theme-option__label {
  font-size: 0.68rem;
}

.settings-sheet__section:not(.settings-sheet__section--accent) .pref-color-swatches {
  flex-wrap: wrap;
  gap: 2px;
}

.settings-sheet__section:not(.settings-sheet__section--accent) .pref-color-swatch {
  width: 14px;
  height: 14px;
}

/* Font section uses grid (2+2); exclude it from default flex column */
.settings-sheet__section:not(.settings-sheet__section--font) .pref-font-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-sheet__section .pref-font-btn {
  padding: 4px 6px;
  font-size: 0.72rem;
}

.settings-sheet__section .pref-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* View & Completed — single row only */
.settings-sheet__section--view .pref-toggle-group,
.settings-sheet__section--completed .pref-toggle-group {
  flex-wrap: nowrap;
}

.settings-sheet__section .pref-toggle-btn {
  padding: 4px 6px;
  font-size: 0.72rem;
}

.settings-sheet__section .pref-section__hint {
  display: none;
}

.theme-dark .settings-sheet {
  background: color-mix(in srgb, var(--user-accent, #bd93f9) 12%, #282a36);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

.theme-dark .settings-sheet__handle { background: #44475a; }
.theme-dark .settings-sheet__close { color: #6272a4; }
.theme-dark .settings-sheet__close:hover { color: #f8f8f2; }

.settings-panel {
  width: 330px;
}

/* ── Preferences Panel (left drawer with tabs) ── */
.preferences-panel {
  width: 320px;
  max-width: 90vw;
}

.preferences-panel__tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 24px;
  gap: 0;
}

.preferences-panel__tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.preferences-panel__tab:hover {
  color: #374151;
}

.preferences-panel__tab--active {
  color: var(--user-accent, #9966CC);
  border-bottom-color: var(--user-accent, #9966CC);
}

.preferences-panel__body {
  padding: 24px;
}

.preferences-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 16px;
}

.preferences-panel__tab-content .pref-section__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b7280;
  margin: 0 0 8px;
}

.preferences-panel__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.875rem;
}

.preferences-panel__footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  transform: rotate(-5deg);
}

.preferences-panel__footer-name {
  font-weight: 500;
  font-family: 'Iosevka', 'Iosevka Charon', ui-monospace, monospace;
}

.theme-dark .preferences-panel__footer {
  border-top-color: #383a4e;
  color: #6272a4;
}

/* =================================
   SETTINGS SHEET — RESPONSIVE BREAKPOINTS
   Desktop: 1024px+ (base above)
   Tablet: 769px–1023px — wrap content, no overlap
   Phone: ≤768px — stacked, full screen
   ================================= */

/* Tablet: keep columns, wrap content inside each to prevent overlap */
@media (max-width: 1023px) {
  .settings-sheet {
    max-height: 80vh;
  }

  /* 5 columns but flexible - can shrink, no overflow */
  .settings-sheet__columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 12px;
    min-width: 0;
  }

  .settings-sheet__section {
    min-width: 0;
    overflow: hidden;
  }

  /* Theme: 2 columns to fit tablet width */
  .settings-sheet__section--theme .theme-modal__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Font: stay 2-col, smaller */
  .settings-sheet__columns .settings-sheet__section--font .pref-font-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  /* Accent: wrap swatches, smaller */
  .settings-sheet__section--accent .pref-color-swatches {
    flex-wrap: wrap;
    gap: 6px;
  }

  .settings-sheet__section--accent .pref-color-swatch {
    width: 18px;
    height: 18px;
  }

  /* View & Completed: wrap if needed */
  .settings-sheet__section--view .pref-toggle-group,
  .settings-sheet__section--completed .pref-toggle-group {
    flex-wrap: wrap;
  }

  .settings-sheet__section .pref-toggle-btn,
  .settings-sheet__section .pref-font-btn,
  .settings-sheet__section .theme-option {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

/* Phone: single column, full screen, no wasted bottom space */
@media (max-width: 768px) {
  .settings-sheet {
    max-height: none;
    height: 100vh;
    height: 100dvh;
  }

  .settings-sheet__content {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .settings-sheet__columns {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
    min-width: 0;
    height: auto;
    padding: 16px;
  }

  .settings-sheet__section {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 0;
  }

  .settings-sheet__section:last-child {
    border-bottom: none;
  }

  .settings-sheet__section .pref-section__label {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  /* Theme: 3 columns in single column layout */
  .settings-sheet__section--theme .theme-modal__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .settings-sheet__section--accent .pref-color-swatches {
    flex-wrap: wrap;
    gap: 8px;
  }

  .settings-sheet__section--accent .pref-color-swatch {
    width: 28px;
    height: 28px;
  }

  .settings-sheet__section .theme-option,
  .settings-sheet__section .pref-font-btn,
  .settings-sheet__section .pref-toggle-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .theme-dark .settings-sheet__section {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

.pref-section {
  padding: 14px 0;
  border-bottom: 1px solid #f4f4f4;
}

.pref-section:last-child {
  border-bottom: none;
}

.pref-section__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 10px;
}

.pref-section__hint {
  font-size: 0.72rem;
  color: #999;
  margin: -4px 0 10px;
  line-height: 1.3;
}

/* Colour swatches */
.pref-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pref-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s, border-color 0.12s;
}

.pref-color-swatch:hover {
  transform: scale(1.18);
}

.pref-color-swatch--active {
  border-color: #111 !important;
}

.pref-color-swatch--custom {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Font list */
.pref-font-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pref-font-btn {
  background: none;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  color: #444;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pref-font-btn:hover {
  background: #f8f5ff;
  border-color: var(--user-accent);
}

.pref-font-btn--active {
  border-color: var(--user-accent);
  color: var(--user-accent);
  font-weight: 700;
  background: #f8f5ff;
}

/* Toggle group (columns, show/hide) */
.pref-toggle-group {
  display: flex;
  gap: 4px;
}

.pref-toggle-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  color: #666;
  text-decoration: none;
  display: inline-block;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.pref-toggle-btn:hover {
  border-color: var(--user-accent);
  color: var(--user-accent);
}

/* Celebrations toggle switch */
.pref-toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.pref-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pref-toggle-track {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 11px;
  transition: background 0.2s;
  position: relative;
}

.pref-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

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

.pref-toggle-switch input:checked+.pref-toggle-track::after {
  left: 21px;
}

/* Account settings inputs */
.pref-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #333;
  background: #fafafa;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.pref-input:focus {
  border-color: var(--user-accent);
  background: #fff;
}

.pref-save-btn {
  background: var(--user-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}

.pref-save-btn:hover {
  opacity: 0.88;
}

.pref-danger-link {
  color: #dc2626;
  font-size: 0.875rem;
  text-decoration: underline;
}

.pref-danger-link:hover {
  color: #991b1b;
}

/* Preferences drawer tab icon buttons */
.pref-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #999;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}

.pref-tab-btn:hover {
  color: #b2b2b2;
}

.pref-tab-btn--active {
  border-color: var(--user-accent);
  color: var(--user-accent);
  font-weight: 700;
  background: #f8f5ff;
}

/* =================================
   DARK THEME - PREFERENCES PANEL
   ================================= */

/* Section dividers */
.theme-dark .pref-section {
  border-bottom-color: #383a4e;
}

.theme-dark .pref-section__label {
  color: #6272a4;
}

.theme-dark .pref-section__hint {
  color: #6272a4;
}

/* Tab icon buttons - raise contrast in dark mode */
.theme-dark .pref-tab-btn {
  color: #6272a4;
}

.theme-dark .pref-tab-btn:hover {
  color: #f8f8f2;
}

.theme-dark .pref-tab-btn--active {
  color: #f8f8f2;
}

/* Active colour swatch ring */
.theme-dark .pref-color-swatch--active {
  border-color: #f8f8f2 !important;
}

/* Font picker buttons - quiet surface */
.theme-dark .pref-font-btn {
  background: transparent;
  border-color: #383a4e;
  color: #c1c8e6;
}

.theme-dark .pref-font-btn:hover {
  background: #383a4e;
  border-color: #6272a4;
  color: #f8f8f2;
}

.theme-dark .pref-font-btn--active {
  background: #383a4e;
  border-color: var(--user-accent);
  color: var(--user-accent);
}

/* Toggle buttons (view days, show/hide completed) */
.theme-dark .pref-toggle-btn {
  background: transparent;
  border-color: #383a4e;
  color: #c1c8e6;
}

.theme-dark .pref-toggle-btn:hover {
  background: #383a4e;
  border-color: #6272a4;
  color: #f8f8f2;
}

.theme-dark .pref-toggle-btn--active {
  background: var(--user-accent) !important;
  border-color: var(--user-accent) !important;
  color: #fff !important;
}

/* Toggle switch track */
.theme-dark .pref-toggle-track {
  background: #383a4e;
}

/* Account inputs */
.theme-dark .pref-input {
  background: #383a4e;
  border-color: #44475a;
  color: #f8f8f2;
}

.theme-dark .pref-input:focus {
  background: #44475a;
  border-color: var(--user-accent);
}

.theme-dark .pref-input::placeholder {
  color: #6272a4;
}

/* Account section title */
.theme-dark .pref-section h3 {
  color: #f8f8f2 !important;
}

/* Danger section border */
.theme-dark .pref-section--danger {
  border-top-color: #44475a !important;
}

.theme-dark .pref-danger-link {
  color: #ff5555;
}

.theme-dark .pref-danger-link:hover {
  color: #ff6e6e;
}


/* =================================
   CALENDAR PICKER MODAL
   ================================= */
.calendar-picker-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 300px;
  padding-bottom: 16px;
  overflow: hidden;
}

.calendar-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.calendar-picker__title {
  font-size: 0.925rem;
  font-weight: 700;
  color: #333;
  flex: 1;
  text-align: center;
  font-family: var(--user-font, inherit);
}

.calendar-picker__nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: #888;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s;
}

.calendar-picker__nav:hover {
  background: #f0f0f0;
}

.calendar-picker__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #aaa;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.calendar-picker__close:hover {
  color: #333;
  background: #f5f5f5;
}

.calendar-picker__grid {
  padding: 12px;
}

.cal-grid__days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.cal-grid__days-header span {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #bbb;
}

.cal-grid__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: #333;
  transition: background 0.12s, color 0.12s;
}

.cal-day:hover {
  background: #f0eeff;
  color: var(--user-accent);
}

.cal-day--today {
  background: var(--user-accent);
  color: #fff;
  font-weight: 700;
}

.cal-day--today:hover {
  opacity: 0.85;
}

.cal-day--empty {
  pointer-events: none;
}

/* Tab drag */
.lists__tab-name {
  cursor: grab;
}

.lists__tab-name:active {
  cursor: grabbing;
}

.lists__tab {
  user-select: none;
}

/* Theme grid inside Preferences */
.theme-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.theme-option:hover {
  border-color: #ddd;
}

.theme-option--active {
  border-color: var(--user-accent) !important;
}

.theme-preview {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.theme-option__label {
  font-size: 0.62rem;
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
}

/* =================================
   NOTES PANEL (side drawer)
   ================================= */

/* 2.5x the preferences drawer width (230 * 2.5 = 575) */
.notes-drawer {
  width: 575px !important;
  max-width: 92vw;
}

/* ── Header ── */
.notes-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 28px 0;
}

.notes-drawer__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notes-drawer__color-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--user-accent, #9966CC);
  flex-shrink: 0;
  opacity: 0.7;
}

.notes-drawer__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.3;
}

/* ── Toolbar (format buttons + date) ── */
.notes-drawer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.notes-drawer__format-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}

.notes-fmt-btn {
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 32px;
  min-height: 32px;
}

.notes-fmt-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #222;
}

.notes-fmt-btn:active {
  background: #eee;
}

.notes-fmt-btn--italic {
  font-style: italic;
}

.notes-drawer__date {
  font-size: 0.72rem;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Editor body ── */
.notes-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.notes-drawer__editor {
  min-height: 120px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #333;
  outline: none;
  word-wrap: break-word;
}

.notes-drawer__editor:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
}

.notes-drawer__editor a {
  color: var(--user-accent, #9966CC);
  text-decoration: underline;
}

.notes-drawer__editor img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 8px 0;
}

/* Hidden file input for image picker — visually hidden but programmatically clickable */
.notes-image-file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.notes-drawer__editor ul {
  margin: 8px 0;
  padding-left: 20px;
}

.notes-drawer__editor li {
  margin-bottom: 4px;
}

/* ── Subtasks ── */
.notes-drawer__subtasks {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notes-subtask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.1s;
}

.notes-subtask:hover {
  background: #f9f9f9;
}

.notes-subtask__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}

.notes-subtask__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--user-accent, #9966CC);
  cursor: pointer;
  flex-shrink: 0;
}

.notes-subtask__text {
  font-size: 0.88rem;
  color: #333;
  outline: none;
  flex: 1;
  line-height: 1.4;
  min-width: 0;
}

.notes-subtask__text:empty::before {
  content: attr(data-placeholder);
  color: #ccc;
}

.notes-subtask__checkbox:checked + .notes-subtask__text {
  text-decoration: line-through;
  color: #aaa;
}

.notes-subtask__delete {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.notes-subtask:hover .notes-subtask__delete {
  opacity: 1;
}

.notes-subtask__delete:hover {
  color: #e74c3c;
}

/* ── Footer / saved indicator ── */
.notes-drawer__footer {
  padding: 12px 28px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.notes-drawer__saved {
  font-size: 0.72rem;
  color: #e74c3c;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ── Notes icon: inside toolbar at end (right) ── */
.todo-item__notes-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  color: #888;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}

.todo-item__notes-btn:hover {
  color: #333;
}

.todo-item__notes-btn--active {
  color: var(--user-accent, #9966CC);
}

.todo-item__notes-btn--active:hover {
  color: var(--user-accent, #9966CC);
  filter: brightness(0.85);
}

/* Subtle right border for todos with notes — user accent colour */
.todo-item--has-notes {
  border-right: 3px solid var(--user-accent, #9966CC);
}

/* ── Todo options modal (mobile) ── */
.todo-options-modal {
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 92vw;
  width: auto;
  margin: auto;
}

.todo-options-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.todo-options-modal__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-options-modal__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
}

.todo-options-modal__toolbar .todo-highlight-picker,
.todo-options-modal__toolbar .todo-recur-picker {
  z-index: 500;
}

.todo-options-modal__toolbar .todo-toolbar__btn,
.todo-options-modal__toolbar .todo-highlight-color,
.todo-options-modal__toolbar .todo-recur-option {
  min-width: 36px;
}

.todo-options-modal__edit {
  font-size: 0.875rem;
  color: #4b5563;
  padding: 4px 8px;
  margin-right: 4px;
}

.todo-options-modal__edit:hover {
  color: #111;
}

.todo-options-modal__delete {
  font-size: 1.25rem;
  color: #999;
  margin-left: auto;
  padding: 4px 8px;
}

.todo-options-modal__delete:hover {
  color: #e74c3c;
}

.todo-options-modal__close {
  padding: 8px 16px;
  background: #f3f4f6;
  color: #4b5563;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Mobile: show actions on tap instead of hover; single tap = options, double tap = complete */
@media (max-width: 768px) {
  .todo-item:hover .todo-item__actions {
    opacity: 1;
  }

  .todo-item__actions {
    opacity: 0.7;
  }

  .todo-item__toolbar {
    margin-right: 2px;
  }

  .todo-toolbar__btn {
    padding: 4px 6px;
    min-width: 32px;
  }

  .todo-item__delete {
    font-size: 1.125rem;
    padding: 2px 4px;
  }
}

/* ============= DARK THEME: NOTES ============= */
.theme-dark .notes-drawer {
  background: #21222c;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.7);
}

.theme-dark .notes-drawer__title {
  color: #f8f8f2;
}

.theme-dark .notes-drawer__toolbar {
  border-bottom-color: #383a4e;
}

.theme-dark .notes-fmt-btn {
  color: #c1c8e6;
  border-color: #44475a;
}

.theme-dark .notes-fmt-btn:hover {
  background: #383a4e;
  color: #f8f8f2;
}

.theme-dark .notes-drawer__date {
  color: #6272a4;
}

.theme-dark .notes-drawer__editor {
  color: #f8f8f2;
}

.theme-dark .notes-drawer__editor:empty::before {
  color: #6272a4;
}

.theme-dark .notes-subtask:hover {
  background: #2a2c3a;
}

.theme-dark .notes-subtask__text {
  color: #f8f8f2;
}

.theme-dark .notes-subtask__checkbox:checked + .notes-subtask__text {
  color: #6272a4;
}

.theme-dark .notes-drawer__footer {
  border-top-color: #383a4e;
}

.theme-dark .notes-drawer__saved {
  color: #ff79c6;
}

/* ── Notes link insertion modal ── */
.notes-link-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 10;
  border-radius: inherit;
}

.notes-link-modal__card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 24px;
  width: 360px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notes-link-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notes-link-modal__title {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  margin: 0;
  font-family: var(--user-font, inherit);
}

.notes-link-modal__close {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #aaa;
  padding: 0 4px;
  line-height: 1;
}

.notes-link-modal__close:hover {
  color: #555;
}

.notes-link-modal__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  font-family: var(--user-font, inherit);
}

.notes-link-modal__input:focus {
  border-color: var(--user-accent, #9966CC);
}

.notes-link-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.notes-link-modal__btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--user-font, inherit);
}

.notes-link-modal__btn--cancel {
  background: #f3f4f6;
  color: #555;
}

.notes-link-modal__btn--cancel:hover {
  background: #e5e7eb;
}

.notes-link-modal__btn--insert {
  background: var(--user-accent, #9966CC);
  color: #fff;
}

.notes-link-modal__btn--insert:hover {
  opacity: 0.9;
}

/* Dark theme */
.theme-dark .notes-link-modal {
  background: rgba(0, 0, 0, 0.5);
}

.theme-dark .notes-link-modal__card {
  background: #2a2c3a;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.theme-dark .notes-link-modal__title {
  color: #f8f8f2;
}

.theme-dark .notes-link-modal__input {
  background: #21222c;
  border-color: #44475a;
  color: #f8f8f2;
}

.theme-dark .notes-link-modal__input:focus {
  border-color: var(--user-accent, #bd93f9);
}

.theme-dark .notes-link-modal__btn--cancel {
  background: #383a4e;
  color: #c1c8e6;
}

.theme-dark .notes-link-modal__btn--cancel:hover {
  background: #44475a;
}