/* ==========================================================================
   AuraFlow Productivity & Project Command Center Styling
   Vanilla CSS Design System - Glassmorphic Dark & Light Theme
   ========================================================================== */

/* --- Custom Variables & Theme Tokens --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #080c14;
  --bg-sidebar: rgba(12, 13, 20, 0.42);
  --bg-glass: rgba(18, 20, 32, 0.42);
  --bg-glass-hover: rgba(28, 31, 48, 0.58);
  --bg-card: rgba(22, 24, 38, 0.42);
  --bg-card-solid: #161826;
  --border-glass: rgba(255, 255, 255, 0.09);
  --border-glass-light: rgba(255, 255, 255, 0.04);
  --text-main: #ffffff;
  --text-muted: #cbd5e1;
  --text-inverse: #050608;
  --focus-studio-blue-ink: #36a9e8;
  
  --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 20px rgba(23, 166, 228, 0.15);
  --shadow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  
  --input-bg: rgba(6, 7, 10, 0.55);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-focus-border: var(--primary);
  --modal-overlay-bg: rgba(3, 4, 6, 0.85);
  
  --scroll-thumb: rgba(255, 255, 255, 0.12);
  --aurora-opacity: 0.35;
  --text-shadow-style: 0 1px 3px rgba(0, 0, 0, 0.4);
  --primary-light: #38bdf8;

  --glass-highlight: inset 0 1.5px 0 0 rgba(255, 255, 255, 0.12);
  --bg-toast: #181a26;
  --border-toast: rgba(255, 255, 255, 0.12);
  --bg-onboarding: #121420;
  --long-break-color: #8b5cf6;

  /* Task priority accents shared with the mobile task composer. */
  --task-priority-high: #ff2d55;
  --task-priority-medium: #ffb000;
  --task-priority-low: #00b67a;
}

/* --- Ideation Canvas Focus Mode --- */
.mindmap-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.mindmap-focus-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mindmap-focus-icon-exit {
  display: none;
}

.mindmap-focus-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.mindmap-focus-mode {
  overflow: hidden;
}

body.mindmap-focus-mode .main-content {
  overflow: hidden;
  zoom: 1;
}

body.mindmap-focus-mode #tab-mindmap.active {
  animation: none !important;
  opacity: 1;
  transform: none !important;
}

body.mindmap-focus-mode .mindmap-workspace {
  position: fixed !important;
  inset: 0;
  z-index: 900;
  inline-size: 100dvw;
  block-size: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--bg-app);
  box-shadow: none;
}

body.mindmap-focus-mode .mindmap-toolbar {
  margin-block-start: max(16px, env(safe-area-inset-top));
  margin-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

body.mindmap-focus-mode .mindmap-focus-icon-enter {
  display: none;
}

body.mindmap-focus-mode .mindmap-focus-icon-exit {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mindmap-focus-toggle {
    transition: none;
  }
}

/* Founder pricing promise */
.founder-card-assurance {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

.founder-card-assurance strong {
  color: var(--text-main);
}

.founder-card-assurance span {
  display: block;
  margin-top: 2px;
  color: #d97706;
}

:root:not([data-theme="light"]) .founder-card-assurance span {
  color: #fcd34d;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Alabaster background */
  --bg-app: #FAF9F5;
  
  /* Glassmorphic overlays (frosted white glass) */
  --bg-sidebar: rgba(255, 255, 255, 0.45);
  --bg-glass: rgba(255, 255, 255, 0.55);
  --bg-glass-hover: rgba(255, 255, 255, 0.75);
  --bg-card: rgba(255, 255, 255, 0.65);
  --bg-card-solid: #ffffff;
  
  /* Liquid Glass Refraction borders for light mode */
  /* We use a very faint ink outline for structural definition and white inner shadow for refraction */
  --border-glass: rgba(28, 26, 23, 0.06);
  --border-glass-light: rgba(28, 26, 23, 0.03);
  
  /* Slate Ink typography */
  --text-main: #1C1A17;
  --text-muted: #6B655C;
  --text-inverse: #ffffff;
  --focus-studio-blue-ink: #0b7aa8;
  
  /* Warm-tinted shadows */
  --shadow-main: 0 12px 32px 0 rgba(40, 33, 24, 0.08);
  --shadow-glow: 0 8px 24px rgba(23, 166, 228, 0.15); /* Accent tint */
  --shadow-success: 0 8px 24px rgba(94, 122, 91, 0.15);
  
  /* Inputs sunk into the Alabaster */
  --input-bg: rgba(245, 243, 236, 0.5); /* surface-sunk */
  --input-border: rgba(231, 227, 218, 0.8); /* border */
  --input-focus-border: #17A6E4; /* Accent color */
  --modal-overlay-bg: rgba(250, 249, 245, 0.85);

  --scroll-thumb: rgba(28, 26, 23, 0.12);
  --aurora-opacity: 0.12; /* Subtle warm glow behind glass */
  --text-shadow-style: none; /* No text shadows in light mode */
  --primary-light: #0284c7;

  --glass-highlight: inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85);
  --bg-toast: #ffffff;
  --border-toast: rgba(28, 26, 23, 0.1);
  --bg-onboarding: #ffffff;
  --long-break-color: #7c3aed;

  /* Task priority accents shared with the mobile task composer. */
  --task-priority-high: #d9274f;
  --task-priority-medium: #d98f00;
  --task-priority-low: #008f62;
}

:root {
  /* Color Palette Accent Tokens */
  --primary: #17A6E4; /* Indigo */
  --primary-glow: rgba(23, 166, 228, 0.28);
  --primary-dark: #0b7aa8;
  --secondary: #0ea5e9; /* Violet */

  /* Focus Studio palette shared with the mobile focus surface. */
  --focus-studio-blue: #36a9e8;
  --focus-studio-indigo: #5853ee;
  --focus-studio-green: #2bc894;
  --focus-studio-amber: #f2a43a;
  --focus-studio-pink: #d76f9f;
  --focus-studio-blue-ink: #36a9e8;
  --focus-studio-gradient: linear-gradient(135deg, var(--focus-studio-blue), var(--focus-studio-indigo));
  
  --success: #10b981; /* Emerald */
  --success-glow: rgba(16, 185, 129, 0.3);
  --info: #3b82f6; /* Blue */
  --warning: #f59e0b; /* Amber */
  --danger: #f43f5e; /* Sunset Rose */
  --danger-glow: rgba(244, 63, 94, 0.3);
  
  --violet-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --purple-grad: linear-gradient(135deg, #17A6E4, #4f46e5);
  --blue-grad: linear-gradient(135deg, #3b82f6, #06b6d4);
  --green-grad: linear-gradient(135deg, #10b981, #059669);
  --amber-grad: linear-gradient(135deg, #f59e0b, #eab308);
  --pink-grad: linear-gradient(135deg, #ec4899, #db2777);
  --red-grad: linear-gradient(135deg, #f43f5e, #be123c);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --transition-premium: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-md: 14px;
  --radius-lg: 24px;
  
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  
  /* Google faces are enhancements; these local stacks keep layout and typography stable offline. */
  --font-title: 'Onest', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Onest', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Yellowtail', 'Segoe Script', cursive, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --font-cursive: 'Caveat', 'Segoe Script', cursive, Georgia, serif;
  --font-onest: 'Onest', 'Segoe UI', Arial, sans-serif;
  --font-google-sans: 'Google Sans Flex', 'Segoe UI', Arial, sans-serif;
}

/* --- Core Resets & Base Styles --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  background-color: var(--bg-app);
}

body {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  background-color: transparent;
  color: var(--text-main);
  overflow-x: hidden;
  height: 100%;
  min-height: 100%;
  max-height: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  zoom: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
}

/* --- Custom Scrollbar (Hidden-until-Hover) --- */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-sm);
}
*:hover::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

/* --- Layout Grid --- */
.app-container {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  position: fixed;
  inset: 0;
  height: auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  --sidebar-motion-duration: 260ms;
  --sidebar-collapse-duration: 220ms;
  --sidebar-content-duration: 140ms;
  --sidebar-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transition: grid-template-columns var(--sidebar-motion-duration) var(--sidebar-motion-ease);
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

/* --- Left Sidebar Component --- */
.sidebar {
  background-color: var(--bg-sidebar);
  backdrop-filter: blur(28px) saturate(110%);
  -webkit-backdrop-filter: blur(28px) saturate(110%);
  border-right: 1px solid var(--border-glass);
  padding: var(--space-lg) 16px 16px 16px; /* Tighter bottom padding to pull blocks lower */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow-y: auto;
  min-width: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding-left: 8px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  background: var(--purple-grad);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-glow);
}

.brand-logo svg {
  width: 22px;
  height: 22px;
}

.brand-name {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-main), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-sm) 16px 12px 20px; /* Leave room for left indicator line */
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition:
    background-color 140ms ease-out,
    border-color 140ms ease-out,
    color 140ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar Tab Accent Indicator Bar on Left */
.nav-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 24px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 140ms ease-out;
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease-out;
}

.shortcut-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  margin-inline-start: auto;
  padding: 0.18rem 0.3rem;
  border: 1px solid var(--border-glass-light);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.nav-btn.active .shortcut-hint {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.nav-btn:hover {
  background-color: var(--bg-glass);
  color: var(--text-main);
  transform: translateX(4px);
}

.nav-btn:hover::before {
  transform: translateY(-50%) scaleY(0.667);
  background-color: var(--primary-light);
}

.nav-btn:hover svg {
  transform: scale(1.12);
}

.nav-btn.active {
  background: rgba(23, 166, 228, 0.22);
  border: 1px solid rgba(23, 166, 228, 0.4);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-glow);
}

.nav-btn.active::before {
  transform: translateY(-50%) scaleY(1);
  background-color: var(--primary);
}

.nav-btn.active svg {
  color: #ffffff;
  transform: scale(1.12);
}

:root[data-theme="light"] .nav-btn.active {
  background: rgba(23, 166, 228, 0.15);
  border: 1px solid rgba(23, 166, 228, 0.32);
  color: var(--primary-dark);
}

:root[data-theme="light"] .nav-btn.active svg {
  color: var(--primary-dark);
}

/* --- Mascot / Emotional encouraging Widget --- */
.sidebar-mascot {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  box-shadow: var(--shadow-main);
}

.mascot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-grad);
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: mascot-float 3s ease-in-out infinite alternate;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mascot-avatar-stage {
  position: relative;
  width: 100%;
  height: 0;
  flex: 0 0 0;
  margin-bottom: calc(-1 * var(--space-sm));
  transition:
    width var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    height var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    flex-basis var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    margin-bottom var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.mascot-avatar.water-reminder {
  position: absolute;
  top: 0;
  left: 50%;
  width: 185px;
  height: 230px;
  z-index: 2;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
  transform: translate(-50%, -176px) !important;
  transform-origin: center center;
  transition:
    width var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    height var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-radius var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}

.mascot-avatar.water-reminder .mascot-face {
  display: none !important;
}

.mascot-avatar.water-reminder::before,
.mascot-avatar.water-reminder::after {
  display: none !important;
}

.mascot-3d-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(var(--mascot-artwork-offset-y, 0px)) scale(var(--mascot-artwork-scale, 1));
  transform-origin: center center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--mascot-feather-start, 100%),
    transparent var(--mascot-feather-end, 100%)
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--mascot-feather-start, 100%),
    transparent var(--mascot-feather-end, 100%)
  );
  filter: drop-shadow(0 6px 8px rgba(41, 52, 121, 0.18));
  transition: transform var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sidebar-mascot:has(.mascot-avatar.water-reminder) {
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding-top: 72px;
}

.sidebar-mascot:has(.mascot-avatar.water-reminder) .mascot-text {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 4px;
}

/* Night portrait lighting: adds depth without changing approved geometry. */
:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder) {
  --mascot-night-glow: rgba(112, 118, 255, 0.3);
  --mascot-night-rim: rgba(142, 161, 255, 0.22);
  background: rgba(15, 19, 31, 0.82);
  border-color: rgba(181, 194, 230, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 8px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder.ignis) {
  --mascot-night-glow: rgba(245, 158, 11, 0.3);
  --mascot-night-rim: rgba(251, 191, 36, 0.22);
}

:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder.panda) {
  --mascot-night-glow: rgba(163, 180, 116, 0.26);
  --mascot-night-rim: rgba(205, 218, 162, 0.2);
}

:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder)::before {
  content: "";
  position: absolute;
  top: -94px;
  left: 50%;
  width: 214px;
  height: 214px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--mascot-night-glow) 0%, rgba(8, 12, 20, 0) 68%);
  filter: blur(10px);
  opacity: 0.72;
}

:root[data-theme="dark"] .mascot-3d-img {
  filter:
    brightness(1.04)
    saturate(1.05)
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 9px var(--mascot-night-rim));
}

:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder) .mascot-bubble {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82);
}

:root[data-theme="dark"] .sidebar-mascot:has(.mascot-avatar.water-reminder) .mascot-name {
  color: #d6deeb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.mascot-face {
  width: 24px;
  height: 24px;
  position: relative;
}

.mascot-eye {
  width: 4px;
  height: 4px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 6px;
}

.mascot-eye.left { left: 4px; }
.mascot-eye.right { right: 4px; }

.mascot-mouth {
  width: 10px;
  height: 6px;
  border-bottom: 2px solid white;
  border-radius: 0 0 10px 10px;
  position: absolute;
  bottom: 4px;
  left: 7px;
}

.mascot-bubble {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-main);
  font-style: italic;
  font-weight: 500;
  margin-bottom: var(--space-xxs);
}

.mascot-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
}

@keyframes mascot-float {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-5px) rotate(3deg); }
}

.main-content {
  padding: var(--space-xl);
  overflow-y: auto;
  height: 100%;
  min-width: 0;
}

/* --- Header & Top Bar --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.header-welcome h1 {
  font-family: 'Lexend Deca', var(--font-title);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: none;
}

.header-welcome p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: var(--space-xxs);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.icon-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  box-shadow: var(--shadow-main);
  transition: var(--transition-fast);
}

.icon-btn:hover {
  background: var(--bg-glass-hover);
  transform: translateY(-2px);
}

.sun-icon { display: none; width: 20px; height: 20px; }
.moon-icon { display: block; width: 20px; height: 20px; }

:root[data-theme="light"] .sun-icon { display: block; }
:root[data-theme="light"] .moon-icon { display: none; }

.streak-badge {
  font-family: var(--font-title);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  padding: var(--space-xs) 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  position: relative;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: var(--shadow-main);
}

.streak-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(176, 118, 79, 0.4));
  animation: fire-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes fire-pulse {
  from { transform: scale(0.98); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-icon-img {
    animation: none;
    transform: none;
  }
}

.streak-tooltip {
  position: absolute;
  bottom: -40px;
  right: 0;
  background: var(--bg-sidebar);
  color: var(--text-main);
  font-size: 11px;
  padding: 6px var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-main);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-5px);
  z-index: 100;
}

.streak-badge:hover .streak-tooltip {
  opacity: 1;
  transform: translateY(0px);
}

/* --- Encouraging Quote Banner --- */
.banner-quote-wrapper {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-main);
  position: relative;
  overflow: hidden;
}

.banner-quote-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--purple-grad);
}

.banner-quote-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.quote-icon {
  font-size: 24px;
  line-height: 1;
}

.quote-text-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.quote-text {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: 0.9;
}

.quote-author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-inline-start: 8px;
}

/* --- Tab Panel Visibility Control --- */
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(12px);
}

.tab-panel.active {
  display: block;
  animation: tab-fade-in 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.active {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Metrics KPI Cards Grid --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(28px) saturate(110%);
  -webkit-backdrop-filter: blur(28px) saturate(110%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main), var(--glass-highlight);
  position: relative;
  overflow: hidden;
}

.metric-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(23,166,228,0.06) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  z-index: 0;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.metric-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.metric-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-icon svg {
  width: 20px;
  height: 20px;
}

.metric-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--info); }
.metric-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.metric-icon.purple { background: rgba(139, 92, 246, 0.1); color: var(--secondary); }

.metric-body {
  margin-top: var(--space-sm);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-sm);
}

.metric-info-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.metric-sparkline-container {
  width: 110px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.metric-value {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
  text-shadow: var(--text-shadow-style);
}

.metric-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-xxs);
  display: block;
}

.metric-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-glass);
  border-radius: 99px;
  overflow: hidden;
  margin-top: var(--space-md);
  z-index: 1;
}

.bar-fill {
  height: 100%;
  background: var(--purple-grad);
  border-radius: 99px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-fill.green-bar { background: var(--green-grad); }
.bar-fill.purple-bar { background: var(--blue-grad); }

/* --- Pomodoro & MIT Row --- */
.dashboard-focus-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* --- Aura AI Coach Center --- */
.aura-ai-coach-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.aura-coach-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-md);
}

.aura-coach-icon {
  --aura-guidance-accent: var(--secondary);
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--aura-guidance-accent) 34%, var(--border-glass));
  border-radius: 11px;
  background: color-mix(in srgb, var(--aura-guidance-accent) 18%, var(--bg-card));
  box-shadow: 0 0 14px color-mix(in srgb, var(--aura-guidance-accent) 22%, transparent);
}

.aura-coach-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: hue-rotate(-30deg) saturate(1.08);
}

:root[data-theme="dark"] .aura-coach-icon img,
body.dark-mode .aura-coach-icon img {
  filter: hue-rotate(-30deg) brightness(1.35) saturate(1.12) drop-shadow(0 0 3px var(--primary-glow));
}

.aura-coach-title-group {
  min-width: 0;
}

.aura-coach-title {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.aura-coach-subtitle {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.ai-recommendation-box {
  --aura-guidance-accent: var(--secondary);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--aura-guidance-accent) 18%, var(--border-glass));
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aura-guidance-accent) 7%, var(--bg-card)), var(--bg-card));
}

.rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

.rec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--aura-guidance-accent) 28%, transparent);
  border-radius: 999px;
  color: var(--aura-guidance-accent);
  background: color-mix(in srgb, var(--aura-guidance-accent) 10%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.rec-kicker-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.rec-score {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
}

.rec-body {
  min-width: 0;
  text-align: left;
}

.rec-task-title {
  margin: 0;
  overflow: hidden;
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-project-line {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-project-line strong {
  color: var(--secondary);
  font-weight: 700;
}

.rec-reason {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.rec-keyword {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  vertical-align: baseline;
  white-space: nowrap;
}

.rec-keyword::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--rec-keyword-gradient);
}

.rec-keyword-overdue {
  --rec-keyword-gradient: var(--red-grad);
}

.rec-keyword-today {
  --rec-keyword-gradient: var(--blue-grad);
}

.rec-keyword-approaching {
  --rec-keyword-gradient: var(--amber-grad);
}

.rec-keyword-priority {
  --rec-keyword-gradient: var(--violet-grad);
}

.rec-keyword-add {
  --rec-keyword-gradient: var(--green-grad);
}

.rec-actions {
  margin-top: var(--space-md);
}

.aura-ai-coach-card .aura-coach-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11px;
}

.aura-coach-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* --- Deep Work Studio / Pomodoro --- */
.pomodoro-container,
#walkthrough-timer-studio {
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}

#walkthrough-timer-studio {
  --timer-mode-blue: var(--primary);
  --timer-mode-indigo: var(--primary);
  --timer-mode-accent: var(--timer-mode-indigo);
  --timer-mode-gradient: linear-gradient(135deg, var(--timer-mode-blue), var(--timer-mode-indigo));
}

#walkthrough-timer-studio[data-mode="short"] {
  --timer-mode-blue: var(--focus-studio-green);
  --timer-mode-indigo: var(--focus-studio-blue);
}

#walkthrough-timer-studio[data-mode="long"] {
  --timer-mode-blue: var(--focus-studio-amber);
  --timer-mode-indigo: var(--focus-studio-pink);
}

.section-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--border-glass-light);
  padding-bottom: 12px;
  text-shadow: var(--text-shadow-style);
}

.timer-mode-selector {
  display: flex;
  position: relative;
  background: var(--input-bg);
  border: 1px solid var(--border-glass);
  padding: var(--space-xxs);
  border-radius: var(--radius-md);
  gap: var(--space-xxs);
  margin-bottom: 28px;
  z-index: 1;
}

.timer-sliding-highlight {
  position: absolute;
  top: var(--space-xxs);
  left: 0;
  height: calc(100% - (var(--space-xxs) * 2));
  background: var(--timer-mode-gradient);
  border: 1px solid color-mix(in srgb, var(--timer-mode-accent) 36%, transparent);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--timer-mode-accent) 20%, transparent);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
  pointer-events: none;
}

.timer-mode-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-xs) 20px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
  position: relative;
  z-index: 2;
}

.timer-mode-btn:hover {
  color: var(--text-main);
}
.timer-mode-btn.active {
  color: #fff;
}

.timer-display-ring {
  width: 220px;
  height: 220px;
  position: relative;
  margin-bottom: 28px;
}

.timer-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-ring-bg {
  fill: none;
  stroke: var(--border-glass);
  stroke-width: 6px;
}

.timer-ring-progress {
  fill: none;
  stroke: var(--timer-mode-accent);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}

.timer-ring-progress.short-break {
  stroke: url(#timer-ring-gradient-short);
}

.timer-ring-progress.long-break {
  stroke: url(#timer-ring-gradient-long);
}

.timer-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

#timer-time {
  font-family: var(--font-title);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.timer-state-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
  font-weight: 600;
}

#walkthrough-timer-studio .timer-state-label {
  color: var(--timer-mode-accent);
}

#walkthrough-timer-studio .timer-state-task {
  color: var(--text-main);
}

#walkthrough-timer-studio .timer-state-task:not(:empty)::before {
  content: " ";
}

.timer-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: var(--space-lg);
}

.control-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.control-btn:hover {
  color: var(--text-main);
  background: var(--bg-glass-hover);
  transform: scale(1.05);
}

#walkthrough-timer-studio .control-btn:hover {
  color: var(--timer-mode-accent);
  border-color: color-mix(in srgb, var(--timer-mode-accent) 32%, var(--border-glass));
}

.control-btn svg {
  width: 20px;
  height: 20px;
}

.control-btn[data-tooltip],
.play-btn[data-tooltip] {
  position: relative;
}

.control-btn[data-tooltip]::after,
.play-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 25;
  padding: 7px 10px;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-glass);
  border-radius: 9px;
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.control-btn[data-tooltip]:hover::after,
.control-btn[data-tooltip]:focus-visible::after,
.play-btn[data-tooltip]:hover::after,
.play-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.play-btn {
  background: var(--timer-mode-gradient, var(--purple-grad));
  border: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-glow);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px color-mix(in srgb, var(--timer-mode-accent, var(--primary)) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #walkthrough-timer-studio .timer-sliding-highlight,
  #walkthrough-timer-studio .timer-ring-progress,
  #walkthrough-timer-studio .play-btn,
  #walkthrough-timer-studio .control-btn[data-tooltip]::after,
  #walkthrough-timer-studio .play-btn[data-tooltip]::after {
    transition: none;
  }
}

.play-btn svg {
  width: 24px;
  height: 24px;
}

.play-btn svg.play-icon {
  margin-left: 2px;
}

/* --- Persistent timer companion --- */
.floating-timer {
  --floating-timer-accent: var(--focus-studio-blue);
  --floating-timer-offset-x: 0px;
  --floating-timer-offset-y: 0px;
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 950;
  display: grid;
  grid-template-columns: auto 1px minmax(0, max-content);
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100vw - 24px);
  min-height: 56px;
  padding: 8px 22px 8px 16px;
  font-family: var(--font-onest);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card-solid) 96%, transparent);
  color: var(--text-main);
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transform: translate3d(
    calc(-50% + var(--floating-timer-offset-x)),
    calc(10px + var(--floating-timer-offset-y)),
    0
  );
  transition:
    opacity 180ms ease-out,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 260ms;
}

.floating-timer.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(
    calc(-50% + var(--floating-timer-offset-x)),
    var(--floating-timer-offset-y),
    0
  );
  transition:
    opacity 180ms ease-out,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.floating-timer.is-dragging {
  cursor: grabbing;
  transition: none;
}

.floating-timer:focus-visible {
  outline: 2px solid var(--floating-timer-accent);
  outline-offset: 3px;
}

.floating-timer-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(-2px);
}

.floating-timer-divider {
  align-self: center;
  width: 1px;
  height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--floating-timer-accent) 42%, var(--border-glass));
  opacity: 0.85;
}

.floating-timer[data-mode="short"] {
  --floating-timer-accent: var(--focus-studio-green);
}

.floating-timer[data-mode="long"] {
  --floating-timer-accent: var(--focus-studio-amber);
}

.floating-timer-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.floating-timer-target {
  overflow: hidden;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-timer-time {
  color: var(--floating-timer-accent);
  font-family: var(--font-onest);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .floating-timer {
    transform: translate3d(
      calc(-50% + var(--floating-timer-offset-x)),
      calc(10px + var(--floating-timer-offset-y)),
      0
    );
    transition: opacity 120ms ease-out;
  }

  .floating-timer.is-visible {
    transform: translate3d(
      calc(-50% + var(--floating-timer-offset-x)),
      var(--floating-timer-offset-y),
      0
    );
    transition: opacity 120ms ease-out;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .floating-timer {
    background: var(--bg-card-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 600px) {
  .floating-timer {
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
    min-height: 52px;
    gap: 8px;
    padding: 7px 18px 7px 12px;
    border-radius: 15px;
  }

  .floating-timer-icon {
    width: 24px;
    height: 24px;
  }

  .floating-timer-divider {
    height: 28px;
  }

  .floating-timer-target {
    font-size: 11.5px;
  }

  .floating-timer-time {
    font-size: 20px;
  }

}

.hidden {
  display: none !important;
}

.timer-project-select {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--text-muted);
}

.timer-project-select select {
  background: var(--input-bg);
  color: var(--text-main);
  border: 1px solid var(--border-glass);
  padding: 6px var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  outline: none;
}

/* --- Today's MIT System --- */
.focus-tasks-container {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.mit-card {
  background: var(--bg-glass-hover);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  position: relative;
  transition: border-color 0.3s ease;
}

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

.mit-placeholder p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.mit-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mit-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.checkbox-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.checkbox-circle:hover {
  background: rgba(23, 166, 228, 0.1);
  transform: scale(1.05);
}

.checkbox-circle.checked {
  background: var(--success);
  border-color: var(--success);
}

.checkbox-circle.checked::after {
  content: '✓';
  color: white;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mit-details h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-xxs);
}

.mit-title-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.mit-title-row h3 {
  min-width: 0;
  flex: 0 1 auto;
  margin-bottom: 0;
}

.mit-meta-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.mit-project-name {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mit-priority-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.75px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.mit-priority-label::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.mit-priority-label[data-priority="high"],
.mit-priority-label[data-priority="urgent"] {
  color: var(--task-priority-high);
}

.mit-priority-label[data-priority="medium"] {
  color: var(--task-priority-medium);
}

.mit-priority-label[data-priority="low"] {
  color: var(--task-priority-low);
}

.mit-details-clickable {
  cursor: pointer;
}

.mit-details-clickable:hover h3 {
  color: var(--primary-light) !important;
}

.mit-details-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 58%, transparent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.mit-details.completed h3 {
  text-decoration: line-through;
  color: var(--text-muted);
}

.mit-change-focus {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.mit-change-focus:hover {
  color: var(--text-main);
  text-decoration: none;
}

.mit-change-focus:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 58%, transparent);
  outline-offset: 2px;
}

.badge {
  display: inline-block;
  padding: var(--space-xxs) 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--input-bg);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
}

.encouraging-words-box {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass-light);
  padding: 20px;
  border-radius: var(--radius-md);
  margin-top: auto;
  border-left: 3px solid var(--success);
}

.encouraging-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.encouraging-header h4 {
  font-size: 14px;
  font-weight: 700;
}

.encouraging-words-box p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.glow-emoji {
  animation: float-emoji 2s infinite alternate;
  display: inline-block;
}

@keyframes float-emoji {
  0% { transform: translateY(0); filter: drop-shadow(0 0 1px gold); }
  100% { transform: translateY(-3px); filter: drop-shadow(0 0 6px gold); }
}

/* --- TAB: PROJECTS CATALOG & CRUD --- */
.tab-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.panel-main-title {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-shadow: var(--text-shadow-style);
}

.panel-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-xxs);
}

/* --- Buttons Style System --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--purple-grad);
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(23, 166, 228, 0.35);
}

.btn-primary:active {
  transform: translateY(0px);
}

.btn-outline {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--bg-glass-hover);
  transform: translateY(-2px);
}

.btn-outline.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-glow);
}

.btn-danger {
  background: var(--red-grad);
  color: white;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3);
}

.btn-text {
  background: transparent;
  color: var(--text-main);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-text svg {
  width: 16px;
  height: 16px;
}

.btn-text:hover {
  color: var(--primary);
}

.btn-text-danger {
  background: transparent;
  color: var(--danger);
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-text-danger:hover {
  text-decoration: underline;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* --- Projects Catalog Grid --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}

.project-card {
  padding: var(--space-lg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 220px;
}

.project-card.active-focus-project {
  border-left: 4px solid var(--project-color, var(--primary)) !important;
  box-shadow: inset 10px 0 20px -10px var(--project-color, var(--primary)) !important;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--project-color, var(--primary)) !important;
  box-shadow: var(--shadow-glow);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.project-card-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.project-card-header h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-xxs);
}

.project-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-glass-light);
  padding-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.project-card-progress {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
}

.project-progress-row {
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.project-progress-row:hover {
  background: transparent;
}

.project-progress-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 72%, transparent);
  outline-offset: 4px;
}

.circle-progress-mini {
  width: 24px;
  height: 24px;
}

/* --- Project Detail View Panel --- */
.project-detail-panel {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xs);
  animation: panel-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panel-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 16px;
  margin-bottom: var(--space-lg);
}

.project-detail-header-actions {
  display: flex;
  gap: var(--space-sm);
}

.project-detail-summary {
  margin-bottom: var(--space-xl);
}

.project-title-area {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.project-detail-color-pill {
  width: 8px;
  height: 36px;
  border-radius: 99px;
  display: block;
}

.project-title-area h3 {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
}

.project-detail-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 800px;
  margin-bottom: var(--space-lg);
}

.project-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  background: var(--input-bg);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.meta-val {
  font-size: 14px;
  font-weight: 700;
}

.badge-priority.low {
  color: var(--task-priority-low);
  background: color-mix(in srgb, var(--task-priority-low) 12%, transparent);
}
.badge-priority.medium {
  color: var(--task-priority-medium);
  background: color-mix(in srgb, var(--task-priority-medium) 12%, transparent);
}
.badge-priority.high {
  color: var(--task-priority-high);
  background: color-mix(in srgb, var(--task-priority-high) 12%, transparent);
}

/* --- Work Inside Project / Tasks list --- */
.project-tasks-workflow {
  margin-top: var(--space-xl);
}

.workflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.workflow-header h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
}

.project-tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.task-list-item {
  background: var(--bg-glass-hover);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: var(--space-md) 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-fast);
}

.task-list-item:hover {
  transform: translateX(4px);
  border-color: var(--primary);
}

.task-list-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.task-item-checkbox {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 2px solid var(--text-muted);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.task-item-checkbox:hover {
  border-color: var(--primary);
}

.task-item-checkbox.completed {
  background: var(--success);
  border-color: var(--success);
}

.task-item-checkbox.completed::after {
  content: '✓';
  color: white;
  font-weight: bold;
  font-size: 11px;
}

.task-list-details h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.task-list-details.completed h4 {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-subtasks-fraction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}

.task-subtasks-progress-track {
  display: block;
  width: 28px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--focus-studio-blue) 14%, var(--border-glass));
}

.task-subtasks-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--focus-studio-gradient);
}

.task-list-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* --- Project Detail Sanctuary Vault --- */
.project-vault-wrapper {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border-glass);
  padding-top: 20px;
}

.project-vault-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 16px;
  background: var(--input-bg);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-vault-toggle:hover {
  background: var(--bg-glass-hover);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(23, 166, 228, 0.1);
}

.toggle-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.toggle-left h4 {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-main);
}

.zen-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-vault-toggle:hover .zen-arrow {
  color: var(--primary);
}

.project-vault-toggle.open .zen-arrow {
  transform: rotate(180deg);
}

.vault-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--text-muted);
}

.project-vault-content {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed var(--border-glass-light);
  animation: slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vault-notice {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: block;
}

.vault-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- TAB 3: KANBAN BOARD SYSTEM --- */
.kanban-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.kanban-search-toggle {
  width: 38px;
  height: 38px;
  padding: 8px;
  flex: 0 0 38px;
  overflow: hidden;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, flex-basis 320ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, padding 320ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, margin-right 320ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, opacity 180ms ease 260ms, border-color 180ms ease 260ms;
}

.kanban-search-toggle:hover {
  transform: none;
}

.kanban-search-toggle[aria-expanded="true"] {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-glass));
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-glass));
  width: 0;
  flex-basis: 0;
  padding-left: 0;
  padding-right: 0;
  margin-right: calc(-1 * var(--space-sm));
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1), flex-basis 320ms cubic-bezier(0.16, 1, 0.3, 1), padding 320ms cubic-bezier(0.16, 1, 0.3, 1), margin-right 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, border-color 180ms ease;
}

.kanban-search-field {
  display: flex;
  align-items: center;
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-width 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 190ms ease, visibility 0s linear 320ms;
}

.kanban-search-field.is-open {
  width: 220px;
  max-width: 220px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: max-width 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 190ms ease;
}

.kanban-search-input {
  flex: 0 0 220px;
  width: 220px;
  cursor: text;
}

@media (max-width: 900px) {
  .kanban-filters {
    flex-wrap: wrap;
  }

  .kanban-search-field.is-open {
    flex: 1 1 180px;
    width: 220px;
    max-width: min(220px, 100%);
  }

  .kanban-search-input {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanban-search-toggle,
  .kanban-search-field {
    transition: none;
  }
}

.form-input-inline {
  background: var(--input-bg);
  color: var(--text-main);
  border: 1px solid var(--border-glass);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: var(--space-xs);
  height: calc(100vh - 220px);
  overflow: hidden;
}

.kanban-column {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0; /* Constraints flex resizing */
}

.column-header {
  margin-bottom: var(--space-md);
}

.column-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.todo-dot { background-color: var(--info); }
.inprogress-dot { background-color: var(--warning); }
.inreview-dot { background-color: var(--secondary); }
.done-dot { background-color: var(--success); }

.column-title h3 {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  flex-grow: 1;
}

.column-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--input-bg);
  border: 1px solid var(--border-glass);
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--text-muted);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  flex-grow: 1;
  padding-top: 4px;
  padding-bottom: 20px;
  min-height: 0; /* Shrink to fit, enabling scrolling */
  padding-left: 16px;
  padding-right: 16px;
  margin-top: -4px;
  margin-left: -16px;
  margin-right: -16px;
}

/* Dragging state over column */
#cards-todo.drag-over {
  background: rgba(23, 166, 228, 0.05);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
  box-shadow: none;
}
#cards-inprogress.drag-over {
  background: rgba(6, 182, 212, 0.05);
  outline: 2px dashed #06b6d4;
  outline-offset: -2px;
  border-radius: var(--radius-md);
  box-shadow: none;
}
#cards-inreview.drag-over {
  background: rgba(245, 158, 11, 0.05);
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
  border-radius: var(--radius-md);
  box-shadow: none;
}
#cards-done.drag-over {
  background: rgba(16, 185, 129, 0.05);
  outline: 2px dashed var(--success);
  outline-offset: -2px;
  border-radius: var(--radius-md);
  box-shadow: none;
}

/* --- Kanban Card --- */
.kanban-card {
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: grab;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease;
  user-select: none;
}

.kanban-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.48;
  transform: none;
  cursor: grabbing;
  transition: none;
  box-shadow: none;
  will-change: transform;
}

.kanban-board.is-dragging .kanban-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.kanban-board.is-dragging .kanban-card:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kanban-board.is-dragging .kanban-card.dragging,
.kanban-board.is-dragging .kanban-card.dragging:hover {
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.card-project-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.kanban-card h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  word-break: break-word;
}

.kanban-card.completed h4 {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Card Progress Fraction */
.card-checklist-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.progress-mini-bar {
  width: 50%;
  height: 4px;
  background: var(--border-glass);
  border-radius: 99px;
  overflow: hidden;
}

.progress-mini-fill {
  height: 100%;
  background: var(--success);
  border-radius: 99px;
  width: 0%;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  border-top: 1px solid var(--border-glass-light);
  padding-top: 10px;
  font-size: 11px;
}

.card-due {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--text-muted);
}

.card-due.overdue {
  color: var(--danger);
  font-weight: 600;
}

.card-due svg {
  width: 12px;
  height: 12px;
}

.card-actions {
  display: flex;
  gap: 6px;
}

.card-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxs);
  border-radius: var(--radius-xs);
}

.card-action-btn:hover {
  background: var(--input-bg);
  color: var(--text-main);
}

.card-action-btn.plan-today {
  color: var(--text-muted);
  background: transparent;
}

.card-action-btn.plan-today:hover,
.card-action-btn.plan-today:focus-visible,
.card-action-btn.plan-today[aria-pressed="true"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.card-action-btn.notes:hover { color: var(--primary); }
.card-action-btn.notes.has-notes { color: var(--primary); opacity: 1; }
.card-action-btn.edit:hover { color: var(--primary); }
.card-action-btn.delete:hover { color: var(--danger); }

.card-action-btn svg {
  width: 13px;
  height: 13px;
}

/* --- TAB 4: ANALYTICS & INSIGHTS --- */
.analytics-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.chart-card {
  padding: var(--space-lg);
  min-height: 320px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.activity-heatmap-card {
  --activity-heatmap-cell-size: 12px;
  --activity-heatmap-month-gap: 6px;
  inline-size: 100%;
  min-block-size: 0;
}

@supports (container-type: inline-size) and (width: 1cqi) {
  .activity-heatmap-card {
    container-type: inline-size;
    --activity-heatmap-cell-size: clamp(12px, 1.2cqi, 18px);
  }
}

.activity-heatmap-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-sm);
}

.activity-heatmap-header .chart-desc {
  margin-block-end: 0;
}

.activity-heatmap-period {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-glass));
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25px;
  white-space: nowrap;
}

.activity-heatmap-figure {
  min-inline-size: 0;
  margin: 0;
}

.activity-heatmap-scroll {
  inline-size: 100%;
  display: grid;
  justify-items: center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  padding-block-end: 4px;
}

.activity-heatmap-months,
.activity-heatmap-grid {
  inline-size: max-content;
  min-inline-size: 0;
}

.activity-heatmap-months {
  display: flex;
  column-gap: 4px;
  min-block-size: 18px;
  align-items: flex-end;
  margin-inline-start: 36px;
  margin-block-end: 6px;
}

.activity-heatmap-month-slot {
  display: flex;
  flex: 0 0 var(--activity-heatmap-cell-size);
  inline-size: var(--activity-heatmap-cell-size);
  min-block-size: 18px;
  align-items: flex-end;
}

.activity-heatmap-month-slot.is-month-start,
.activity-heatmap-week.is-month-start {
  margin-inline-start: var(--activity-heatmap-month-gap);
}

.activity-heatmap-months span {
  inline-size: max-content;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.activity-heatmap-body {
  display: grid;
  grid-template-columns: 28px max-content;
  gap: 8px;
  inline-size: max-content;
  min-inline-size: 0;
}

.activity-heatmap-weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
  row-gap: 4px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 12px;
  text-align: end;
}

.activity-heatmap-grid {
  display: flex;
  align-items: flex-start;
  column-gap: 4px;
}

.activity-heatmap-week {
  display: grid;
  flex: 0 0 var(--activity-heatmap-cell-size);
  grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
  row-gap: 4px;
}

.activity-heatmap-cell {
  display: block;
  inline-size: var(--activity-heatmap-cell-size);
  block-size: var(--activity-heatmap-cell-size);
  min-inline-size: 0;
  min-block-size: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  box-sizing: border-box;
  transition: transform 140ms ease, filter 140ms ease;
}

.activity-heatmap-cell.level-0 {
  background: var(--bg-card);
  border-color: var(--border-glass-light);
}

.activity-heatmap-cell.level-1 {
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-card));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border-glass));
}

.activity-heatmap-cell.level-2 {
  background: color-mix(in srgb, var(--primary) 36%, var(--bg-card));
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border-glass));
}

.activity-heatmap-cell.level-3 {
  background: color-mix(in srgb, var(--primary) 60%, var(--bg-card));
  border-color: color-mix(in srgb, var(--primary) 66%, var(--border-glass));
}

.activity-heatmap-cell.level-4 {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary-light) 75%, var(--primary));
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Day mode: soften the heatmap into a warmer, quieter paper-and-ink scale. */
:root[data-theme="light"] .activity-heatmap-cell {
  border-radius: 4px;
}

:root[data-theme="light"] .activity-heatmap-cell.level-0 {
  background: #f1f3f4;
  border-color: rgba(94, 112, 126, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

:root[data-theme="light"] .activity-heatmap-cell.level-1 {
  background: #eaf3fb;
  border-color: rgba(93, 158, 213, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .activity-heatmap-cell.level-2 {
  background: #d4e9f9;
  border-color: rgba(82, 151, 211, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

:root[data-theme="light"] .activity-heatmap-cell.level-3 {
  background: #add4f4;
  border-color: rgba(60, 137, 203, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

:root[data-theme="light"] .activity-heatmap-cell.level-4 {
  background: #74b9eb;
  border-color: rgba(43, 124, 189, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.activity-heatmap-cell.is-future {
  opacity: 0.32;
}

.activity-heatmap-grid .activity-heatmap-cell:not(.is-future):hover {
  z-index: 1;
  transform: translateY(-1px) scale(1.12);
  filter: brightness(1.15);
}

.activity-heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.activity-heatmap-legend {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  white-space: nowrap;
}

.activity-heatmap-legend .activity-heatmap-cell {
  inline-size: 12px;
  min-inline-size: 12px;
  block-size: 12px;
  flex: 0 0 12px;
}

.activity-heatmap-legend > span:first-child {
  margin-inline-end: 2px;
}

.activity-heatmap-legend > span:last-child {
  margin-inline-start: 2px;
}

@media (max-width: 600px) {
  .activity-heatmap-header,
  .activity-heatmap-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .activity-heatmap-scroll {
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-heatmap-cell {
    transition: none;
  }

  .activity-heatmap-grid .activity-heatmap-cell:not(.is-future):hover {
    transform: none;
  }
}

.chart-card h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
}

.chart-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 200px;
}

.chart-container svg {
  background: transparent;
}

/* Behavioral Insights Styles */
.insights-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  justify-content: center;
  flex: 1;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass-light);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.insight-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(23, 166, 228, 0.05);
}

.insight-icon-wrapper {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  margin-top: 1px;
  border-radius: 10px;
  flex-shrink: 0;
}

.insight-icon-wrapper > span {
  font-size: 20px;
  line-height: 1;
}

.insight-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.insight-icon-fill {
  fill: currentColor;
  opacity: 0.16;
  stroke: none;
}

.insight-content {
  flex: 1;
}

.insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xxs);
}

.insight-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.insight-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.insight-text {
  font-size: 12px;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.insight-item.insight-type-wellness .insight-icon-wrapper {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.22);
  color: var(--info);
}
.insight-item.insight-type-wellness .insight-tag,
.insight-item.insight-type-wellness .insight-badge {
  color: var(--info);
  background: rgba(59, 130, 246, 0.1);
}

.insight-item.insight-type-mindfulness .insight-icon-wrapper {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: var(--success);
}
.insight-item.insight-type-mindfulness .insight-tag,
.insight-item.insight-type-mindfulness .insight-badge {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.insight-item.insight-type-priority .insight-icon-wrapper {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: #f43f5e;
}
.insight-item.insight-type-priority .insight-tag,
.insight-item.insight-type-priority .insight-badge {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.1);
}

.insight-item.insight-type-rhythm .insight-icon-wrapper {
  background: rgba(23, 166, 228, 0.08);
  border: 1px solid rgba(23, 166, 228, 0.15);
  color: var(--primary);
}
.insight-item.insight-type-rhythm .insight-tag,
.insight-item.insight-type-rhythm .insight-badge {
  color: var(--primary);
  background: rgba(23, 166, 228, 0.1);
}

/* Fallback / empty state */
.insight-empty-state {
  text-align: center;
  padding: 20px;
}

.insight-empty-emoji {
  font-size: 28px;
  margin-bottom: var(--space-xs);
  animation: float-pulse 2s ease-in-out infinite;
}

.insight-empty-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* SVG Chart Typography & Styling */
.chart-axis-line {
  stroke: var(--border-glass);
  stroke-width: 1px;
}

.chart-grid-line {
  stroke: var(--border-glass-light);
  stroke-width: 1px;
  stroke-dasharray: 4,4;
}

.chart-text {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--text-muted);
  text-anchor: middle;
}

.chart-text-y {
  text-anchor: end;
  dominant-baseline: middle;
}

.heatmap-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-main);
  text-anchor: start !important;
}

.heatmap-subtext {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--text-muted);
  text-anchor: start !important;
}

.chart-label-x {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  fill: var(--text-main) !important;
  text-anchor: middle;
}

.chart-bar {
  rx: 4px;
  transition: height 0.5s ease, y 0.5s ease;
  cursor: pointer;
}

.chart-bar:hover {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(23, 166, 228, 0.4));
}

#time-spent-svg .desktop-project-time-bar {
  cursor: pointer;
  outline: none;
  transition: opacity 180ms ease, filter 180ms ease;
}

#time-spent-svg .desktop-project-time-bar:hover,
#time-spent-svg .desktop-project-time-bar:focus-visible {
  opacity: 1;
  filter: brightness(1.08) saturate(1.06) drop-shadow(0 2px 4px rgba(23, 166, 228, 0.28));
}

#time-spent-svg .desktop-project-time-bar.is-selected {
  opacity: 1;
  filter: brightness(1.1) saturate(1.08) drop-shadow(0 3px 5px rgba(23, 166, 228, 0.34));
  stroke: var(--primary);
  stroke-width: 1.5px;
  paint-order: stroke;
}

#time-spent-svg .desktop-project-time-bar:focus-visible {
  stroke: var(--primary);
  stroke-width: 2px;
  paint-order: stroke;
}

.desktop-project-time-selection {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 1px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.desktop-project-time-selection strong {
  color: var(--text-main);
  font-weight: 650;
}

.desktop-project-time-selection-value {
  color: var(--primary);
  font-weight: 800;
  white-space: nowrap;
}

.desktop-project-time-selection-swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--selection-color, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selection-color, var(--primary)) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #time-spent-svg .desktop-project-time-bar {
    transition: none;
  }
}

@media (forced-colors: active) {
  #time-spent-svg .desktop-project-time-bar:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    filter: none;
  }
}

.chart-line {
  fill: none;
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-area {
  opacity: 0.15;
}

.chart-point {
  stroke-width: 2.5px;
  cursor: pointer;
  transition: r 0.2s ease;
}

.chart-point:hover {
  r: 7px;
}

/* Focus history logs */
.history-logs-card {
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.activity-heatmap-card + .history-logs-card {
  margin-block-start: var(--space-md);
}

.history-logs-card h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-glass);
  padding: var(--space-sm) 16px;
}

td {
  font-size: 13px;
  border-bottom: 1px solid var(--border-glass-light);
  padding: 14px 16px;
  color: var(--text-main);
}

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

.empty-state {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-xl);
}

/* --- TAB 5: SETTINGS CONTROL PANEL --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  align-items: start;
}

.settings-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

@media (max-width: 1100px) {
  .settings-grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .settings-grid-3col {
    grid-template-columns: 1fr;
  }
}

.settings-card {
  padding: var(--space-lg);
}

.settings-card h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.companion-preference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.9fr);
  gap: 10px;
  align-items: end;
}

.companion-preference-grid .form-group {
  min-width: 0;
}

.companion-visibility-setting {
  min-height: 45px;
  padding: 7px 10px 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--input-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border-glass));
  border-radius: var(--radius-sm);
}

.companion-visibility-setting .setting-toggle-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.companion-visibility-setting .setting-toggle-info > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.companion-visibility-setting .setting-desc {
  color: var(--text-muted);
}

.companion-visibility-setting:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

@media (max-width: 1250px) and (min-width: 701px) {
  .companion-preference-grid {
    grid-template-columns: 1fr;
  }
}

.mascot-simulator-readout {
  min-height: 116px;
  padding: 14px;
  color: var(--text-main);
  background: color-mix(in srgb, var(--primary) 7%, var(--input-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-glass));
  border-radius: 12px;
}

.mascot-simulator-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mascot-simulator-meta strong {
  font-size: 12px;
  color: var(--primary);
}

.mascot-simulator-meta span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}

.mascot-simulator-readout p {
  margin: 0;
  color: var(--text-main);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  text-wrap: pretty;
}

.mascot-simulator-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.mascot-simulator-context span:first-child {
  color: var(--primary);
  font-weight: 700;
}

.mascot-simulator-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.mascot-simulator-controls .btn {
  min-height: 36px;
  padding: 7px 6px;
  font-size: 10px;
  white-space: nowrap;
}

.mascot-simulator-controls .btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.mascot-event-lab {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-glass-light);
}

.mascot-event-lab > label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
}

.mascot-event-trigger-row {
  display: flex;
  gap: 8px;
}

.mascot-event-trigger-row .form-input {
  min-width: 0;
  flex: 1;
}

.mascot-event-trigger-row .btn {
  min-height: 38px;
  white-space: nowrap;
}

#mascot-event-description {
  margin: 8px 0 10px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.mascot-event-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mascot-event-details > div {
  min-width: 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--input-bg));
  border-radius: 8px;
}

.mascot-event-details dt {
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}

.mascot-event-details dd {
  margin: 0;
  color: var(--text-main);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mascot-event-details .mascot-event-result {
  grid-column: 1 / -1;
}

.mascot-event-result[data-status="shown"] {
  background: color-mix(in srgb, #10b981 10%, var(--input-bg));
}

.mascot-event-result[data-status="suppressed"] {
  background: color-mix(in srgb, #f59e0b 10%, var(--input-bg));
}

.mascot-event-result[data-status="queued"] {
  background: color-mix(in srgb, var(--primary) 10%, var(--input-bg));
}

.mascot-simulator-note {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 440px) {
  .mascot-simulator-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .mascot-simulator-meta span {
    text-align: left;
  }

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

  .mascot-event-trigger-row {
    align-items: stretch;
    flex-direction: column;
  }

  .mascot-event-details {
    grid-template-columns: 1fr;
  }

  .mascot-event-details .mascot-event-result {
    grid-column: auto;
  }
}

/* Workday alignment uses one high-contrast component for both the real
   rollover prompt and its developer-only visual preview. */
.workday-alignment-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 96000;
  width: min(760px, calc(100vw - 32px));
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #f8fafc;
  background: #111827;
  border: 1px solid #334155;
  border-radius: 14px;
  box-shadow: 0 8px 8px rgba(2, 6, 23, 0.28);
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.workday-alignment-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.workday-alignment-message {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.workday-alignment-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #fbbf24;
  background: #27200f;
  border-radius: 50%;
}

.workday-alignment-icon svg {
  width: 19px;
  height: 19px;
}

.workday-alignment-copy {
  min-width: 0;
  text-align: left;
}

.workday-alignment-copy h4 {
  margin: 0 0 3px;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
}

.workday-alignment-copy p {
  max-width: 62ch;
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
  text-wrap: pretty;
}

.workday-alignment-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.workday-alignment-actions .btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.workday-alignment-actions .btn-outline {
  color: #e2e8f0;
  background: #1e293b;
  border-color: #475569;
}

.workday-alignment-actions .btn-outline:hover {
  color: #ffffff;
  background: #334155;
}

[data-theme="light"] .workday-alignment-banner {
  color: #172033;
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 8px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] .workday-alignment-icon {
  color: #9a5b00;
  background: #fff4d6;
}

[data-theme="light"] .workday-alignment-copy h4 {
  color: #111827;
}

[data-theme="light"] .workday-alignment-copy p {
  color: #475569;
}

[data-theme="light"] .workday-alignment-actions .btn-outline {
  color: #334155;
  background: #f8fafc;
  border-color: #cbd5e1;
}

@media (max-width: 720px) {
  .workday-alignment-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .workday-alignment-actions {
    width: 100%;
  }

  .workday-alignment-actions .btn {
    flex: 1;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workday-alignment-banner {
    transition: opacity 120ms linear;
    transform: translate(-50%, 0);
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Premium iOS Style Toggle Switch Component --- */
.setting-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

.setting-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.setting-toggle-info label {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  margin-bottom: 0;
}

.setting-toggle-info .setting-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* iOS Toggle Switch Element */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-radius: 20px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="4.25" stroke="%2364748b" stroke-width="1.75"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-image 0.2s ease;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 10px rgba(56, 189, 248, 0.25);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(28px);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><line x1="10" y1="5.25" x2="10" y2="14.75" stroke="%2364748b" stroke-width="2" stroke-linecap="round"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

:root[data-theme="light"] .toggle-slider {
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .toggle-switch input:checked + .toggle-slider {
  background: rgba(2, 132, 199, 0.22);
  border: 1px solid rgba(2, 132, 199, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 10px rgba(2, 132, 199, 0.2);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: var(--transition-fast);
}

select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

:root[data-theme="light"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.gratitude-history-item {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gratitude-history-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(23, 166, 228, 0.25) !important;
}

:root[data-theme="light"] .gratitude-history-item:hover {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(23, 166, 228, 0.2) !important;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(23,166,228,0.25);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

textarea.form-input {
  resize: vertical;
}

.form-group-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form-group-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-group-checkbox label {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-group-danger {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* --- Color Picker Theme Grid --- */
.color-picker-grid {
  display: flex;
  gap: var(--space-xs);
}

.color-picker-item {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: block;
}

.color-picker-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.color-picker-item span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-picker-item span::after {
  content: "";
  font-size: 12px;
  font-weight: 900;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.color-picker-item input:checked + span {
  border-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255,255,255,0.9), 0 0 4px rgba(255,255,255,0.5) inset;
}

.color-picker-item input:checked + span::after {
  content: "✓";
  opacity: 1;
}

/* --- Modal Base --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in 0.25s ease-out forwards;
}

.modal-overlay.hidden {
  display: none !important; /* Performance critical: completely remove closed modals from rendering/layout tree */
}

.modal-box {
  width: 520px;
  max-width: 90%;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  padding: var(--space-xl);
  box-shadow: var(--shadow-main);
  animation: modal-zoom-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Keep every morning-briefing step at the compact scale used by the latest backup. */
.briefing-modal-box {
  zoom: 0.9;
}

.upgrade-gate-modal-box {
  zoom: 0.9;
}

.task-editor-modal-box {
  zoom: 0.9;
  width: min(650px, calc(100vw - 32px));
  max-width: min(650px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  padding: 18px 22px 16px;
  border-radius: var(--radius-lg);
}

.task-editor-modal-box::-webkit-scrollbar {
  width: 8px;
}

.task-editor-modal-box::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
}

.task-editor-header {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.task-editor-heading-copy {
  min-width: 0;
}

.task-editor-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.task-editor-header h3 {
  color: var(--text-main);
  font-size: 22px;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.task-editor-heading-copy p {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.task-editor-close {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-glass-light);
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.task-editor-close:hover,
.task-editor-close:focus-visible {
  border-color: var(--border-glass);
  background: var(--bg-glass-hover);
}

.task-editor-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.task-editor-form {
  display: grid;
  gap: 12px;
}

.task-editor-section {
  min-width: 0;
}

.task-editor-section + .task-editor-section,
.task-metadata-info + .task-editor-footer {
  border-top: 1px solid var(--border-glass-light);
  padding-top: 10px;
}

.task-editor-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.task-editor-section-heading h4 {
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.task-editor-section-heading p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.task-editor-title-field {
  margin-bottom: 8px;
}

.task-editor-modal-box .form-group {
  gap: 4px;
}

.task-editor-modal-box .form-group label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.task-editor-modal-box .form-input {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px;
}

.task-editor-modal-box .form-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.task-editor-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.task-editor-field-wide {
  margin-top: 8px;
}

.task-editor-modal-box .custom-select-wrapper {
  min-width: 0;
}

.task-editor-modal-box .custom-select-trigger {
  min-height: 36px;
  padding: 8px 10px;
  border-color: var(--input-border);
  border-radius: 9px;
  background: var(--input-bg);
  font-size: 12.5px;
}

:root[data-theme="light"] .task-editor-modal-box .custom-select-trigger {
  border-color: var(--input-border);
  background: var(--input-bg);
}

.task-editor-modal-box .custom-select-trigger:hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--input-border));
}

.task-editor-modal-box .custom-select-options {
  width: 100%;
  max-width: none;
  border-radius: 11px;
}

.task-editor-subtasks-section {
  min-width: 0;
}

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

@keyframes modal-zoom-in {
  from { opacity: 0; transform: scale(0.92) translateY(15px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.modal-header h3 {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
}

.close-modal-btn {
  background: transparent;
  border: none;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
}

.close-modal-btn:hover {
  color: var(--text-main);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border-glass-light);
  padding-top: 16px;
}

.task-editor-footer {
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 0;
}

.task-editor-secondary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.task-editor-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.task-editor-icon-btn svg {
  width: 18px;
  height: 18px;
}

.task-editor-schedule-today {
  color: var(--primary);
}

.task-editor-schedule-today:hover,
.task-editor-schedule-today:focus-visible,
.task-editor-schedule-today[aria-pressed="true"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

.task-editor-mark-done {
  color: var(--success);
}

.task-editor-mark-done:hover,
.task-editor-mark-done:focus-visible {
  background: transparent;
  border-color: transparent;
}

.task-editor-delete {
  color: var(--danger);
}

.task-editor-delete:hover,
.task-editor-delete:focus-visible {
  background: transparent;
  border-color: transparent;
}

.task-editor-save {
  width: 44px;
  height: 44px;
  color: var(--focus-studio-indigo);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.task-editor-save:hover,
.task-editor-save:focus-visible {
  background: transparent;
  border-color: transparent;
}

.task-editor-save svg {
  width: 20px;
  height: 20px;
}

.task-editor-icon-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.task-editor-icon-btn[hidden] {
  display: none;
}

/* --- Subtask Creation UI --- */
.subtask-creation-container {
  background: color-mix(in srgb, var(--input-bg) 70%, var(--bg-card));
  border: 1px solid var(--input-border);
  border-radius: 11px;
  padding: 8px;
  max-height: none;
  overflow: visible;
}

.subtask-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.subtask-add-row .form-input {
  flex-grow: 1;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}

.subtask-add-row .btn {
  min-width: 92px;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.subtask-creation-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.subtask-creation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  font-size: 11.5px;
  background: transparent;
  padding: 3px 2px;
  border-top: 1px solid var(--border-glass-light);
}

.subtask-creation-item:first-child {
  border-top: 0;
}

.subtask-creation-item .subtask-creation-cb {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.subtask-creation-item .edit-subtask-btn,
.subtask-creation-item .delete-subtask-btn {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.subtask-creation-item .edit-subtask-btn:hover,
.subtask-creation-item .edit-subtask-btn:focus-visible {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.subtask-creation-item .delete-subtask-btn:hover,
.subtask-creation-item .delete-subtask-btn:focus-visible {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.subtask-creation-item :where(.edit-subtask-btn, .delete-subtask-btn):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.delete-subtask-btn {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
}

/* Keep the task editor's controls ahead of the shared modal defaults. */
.task-editor-modal-box .task-editor-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.task-editor-modal-box .task-editor-header h3 {
  font-size: 20px;
}

.task-editor-modal-box .task-editor-close {
  display: block;
  width: auto;
  height: auto;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-editor-modal-box .task-editor-close:hover,
.task-editor-modal-box .task-editor-close:focus-visible {
  border: 0;
  background: transparent;
}

.task-editor-modal-box .task-editor-footer {
  margin-top: 0;
  padding-top: 10px;
}

.task-editor-modal-box .task-editor-icon-btn {
  width: 34px;
  height: 34px;
}

.task-editor-modal-box .task-editor-save {
  width: 38px;
  height: 38px;
}

.task-metadata-info {
  display: grid;
  gap: 3px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 10px;
  line-height: 1.35;
}

.task-metadata-info > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .task-editor-modal-box {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 20px 18px 18px;
    border-radius: 20px;
  }

  .task-editor-header h3 {
    font-size: 19px;
  }

  .task-editor-field-grid {
    grid-template-columns: 1fr;
  }

  .task-editor-field-wide {
    margin-top: 13px;
  }

}

/* --- TOAST ALERTS SYSTEM --- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* The desktop shell now renders at full scale in compact windows; keep
     legacy in-app notification sizing without shrinking the workspace. */
  zoom: 0.9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999 !important;
}

.toast {
  background: var(--bg-toast);
  border: 1px solid var(--border-toast);
  box-shadow: var(--shadow-main);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 280px;
  transform: translateX(120%);
  animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast.success { border-left: 4px solid var(--success); box-shadow: var(--shadow-success); }
.toast.info { border-left: 4px solid var(--info); box-shadow: var(--shadow-glow); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.danger { border-left: 4px solid var(--danger); box-shadow: var(--shadow-danger-glow); }

@keyframes toast-slide-in {
  to { transform: translateX(0); }
}

.toast-icon { font-size: 18px; }
.toast-msg { font-size: 13px; font-weight: 500; }

/* --- RESPONSIVENESS AND COLLAPSIBILITY --- */
@media (max-width: 1024px) {
  .app-container {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none; /* Mobile collapsible is outside standard sandbox scope */
  }
  .dashboard-focus-row {
    grid-template-columns: 1fr;
  }
  .analytics-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Phase 8: Mindful Enhancements Styles
   ========================================================================== */

/* --- Focus Ambient Soundscapes Drawer --- */
.ambient-sounds-drawer {
  margin-top: var(--space-lg);
  padding-top: 16px;
  border-top: 1px solid var(--border-glass-light);
  text-align: left;
  width: 100%;
}

.ambient-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
  display: block;
}

.ambient-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.ambient-sound-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-glass);
  padding: var(--space-xs) 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--text-muted);
}

.ambient-sound-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text-main);
  transform: translateY(-1px);
}

.ambient-sound-btn.active {
  color: white !important;
}

#ambient-btn-rain:hover, #ambient-btn-rain.active {
  border-color: #06b6d4;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}
#ambient-btn-rain.active {
  background: var(--blue-grad) !important;
}

#ambient-btn-drone:hover, #ambient-btn-drone.active {
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(23, 166, 228, 0.25);
}
#ambient-btn-drone.active {
  background: var(--violet-grad) !important;
}

#ambient-btn-noise:hover, #ambient-btn-noise.active {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
#ambient-btn-noise.active {
  background: var(--amber-grad) !important;
}

#ambient-btn-ocean:hover, #ambient-btn-ocean.active {
  border-color: #1d4ed8;
  box-shadow: 0 0 12px rgba(29, 78, 216, 0.25);
}
#ambient-btn-ocean.active {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
}

#ambient-btn-forest:hover, #ambient-btn-forest.active {
  border-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
#ambient-btn-forest.active {
  background: var(--green-grad) !important;
}

.ambient-sound-btn .sound-icon {
  font-size: 16px;
}

.ambient-sound-btn .sound-label {
  font-size: 10px;
  font-weight: 600;
}

.ambient-volume-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.ambient-volume-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex-grow: 1;
  background: linear-gradient(to right, var(--primary) var(--val, 10%), rgba(100, 116, 139, 0.25) var(--val, 10%));
  height: 4px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: background 0.3s;
}

.ambient-volume-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-sm);
}

.ambient-volume-slider input[type="range"]::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
  transition: transform 0.2s, background-color 0.2s;
}

.ambient-volume-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: #a5b4fc;
}

.ambient-volume-slider input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-sm);
}

.ambient-volume-slider input[type="range"]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  box-shadow: 0 0 8px var(--primary-glow);
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.ambient-volume-slider input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.25);
  background: #a5b4fc;
}

/* --- Mindful Breathing Guide --- */
.breathing-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-glass-hover);
  border: 1px solid var(--border-glass-light);
  margin-bottom: var(--space-lg);
  transition: var(--transition-premium);
}

.breathing-card:hover {
  border-color: var(--border-glass);
}

.breathing-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breathing-header h4 {
  font-size: 13px;
  font-weight: 700;
}

.breathing-hub {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

/* Premium Liquid Glass Breathing Reset */
.breathing-card {
  position: relative;
  overflow: hidden;
}

.breathing-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(23, 166, 228, 0.01) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background 3s ease;
}

.breathing-card.active-inhale::before {
  background: radial-gradient(circle, rgba(23, 166, 228, 0.08) 0%, rgba(23, 166, 228, 0.03) 60%, transparent 70%);
}
.breathing-card.active-hold::before {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.03) 60%, transparent 70%);
}
.breathing-card.active-exhale::before {
  background: radial-gradient(circle, rgba(23, 166, 228, 0.03) 0%, rgba(23, 166, 228, 0.01) 60%, transparent 70%);
}

.breathing-circle-outer {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(23, 166, 228, 0.08);
  border: 2px solid rgba(23, 166, 228, 0.4);
  box-shadow: 
    0 8px 24px rgba(23, 166, 228, 0.2),
    inset 0 0 16px rgba(23, 166, 228, 0.1);
  backdrop-filter: blur(12px);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: floatOrb 6s ease-in-out infinite;
}

.theme-light .breathing-circle-outer {
  background: rgba(2, 132, 199, 0.06);
  border: 2px solid rgba(2, 132, 199, 0.4);
  box-shadow: 
    0 8px 24px rgba(2, 132, 199, 0.18),
    inset 0 0 16px rgba(2, 132, 199, 0.08);
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.breathing-circle-outer:hover {
  border-color: rgba(23, 166, 228, 0.6);
  box-shadow: 
    0 12px 32px rgba(23, 166, 228, 0.25), 
    inset 0 0 20px rgba(23, 166, 228, 0.15);
}

.theme-light .breathing-circle-outer:hover {
  border-color: rgba(2, 132, 199, 0.7);
  box-shadow: 
    0 12px 32px rgba(2, 132, 199, 0.3), 
    inset 0 0 20px rgba(2, 132, 199, 0.15);
}

.breathing-circle-outer:active {
  transform: scale(0.96) !important;
}

/* Ethereal Glowing Aura Ring */
.breathing-aura-ring {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid rgba(23, 166, 228, 0.4);
  background: radial-gradient(circle, rgba(23, 166, 228, 0.2) 0%, transparent 70%);
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
  transform: scale(1);
  will-change: transform, opacity;
}

.theme-light .breathing-aura-ring {
  border: 2px solid rgba(2, 132, 199, 0.5);
  background: radial-gradient(circle, rgba(2, 132, 199, 0.25) 0%, transparent 70%);
}

.breathing-aura-ring.inhale {
  transform: scale(2.0);
  opacity: 0.85;
  border-color: rgba(23, 166, 228, 0.7);
  background: radial-gradient(circle, rgba(23, 166, 228, 0.35) 0%, transparent 70%);
}

.theme-light .breathing-aura-ring.inhale {
  border-color: rgba(2, 132, 199, 0.8);
  background: radial-gradient(circle, rgba(2, 132, 199, 0.4) 0%, transparent 70%);
}

.breathing-aura-ring.hold {
  transform: scale(2.0);
  opacity: 0.9;
  border-color: rgba(16, 185, 129, 0.8);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

.theme-light .breathing-aura-ring.hold {
  border-color: rgba(5, 150, 105, 0.85);
  background: radial-gradient(circle, rgba(5, 150, 105, 0.45) 0%, transparent 70%);
}

.breathing-aura-ring.exhale {
  transform: scale(1.0);
  opacity: 0.5;
  border-color: rgba(99, 102, 241, 0.5);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
}

.theme-light .breathing-aura-ring.exhale {
  border-color: rgba(67, 56, 202, 0.6);
  background: radial-gradient(circle, rgba(67, 56, 202, 0.3) 0%, transparent 70%);
}

/* Inner Breathing Orb Ring */
.breathing-circle {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 
    0 8px 24px rgba(2, 132, 199, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform: scale(1.0);
  will-change: transform, background, box-shadow;
}

.theme-light .breathing-circle {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 
    0 8px 24px rgba(2, 132, 199, 0.45),
    inset 0 2px 8px rgba(255, 255, 255, 0.8);
}

.breathing-text {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.breathing-subtext {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

/* Breathing States scale & color mappings */
.breathing-circle.inhale {
  transform: scale(1.85);
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  border-color: #ffffff;
  box-shadow: 
    0 12px 36px rgba(14, 165, 233, 0.55),
    inset 0 3px 10px rgba(255, 255, 255, 0.8);
}

.theme-light .breathing-circle.inhale {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border-color: #ffffff;
  box-shadow: 
    0 12px 36px rgba(2, 132, 199, 0.5),
    inset 0 3px 10px rgba(255, 255, 255, 0.9);
}

.breathing-circle.hold {
  transform: scale(1.85);
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  border-color: #ffffff;
  box-shadow: 
    0 12px 36px rgba(16, 185, 129, 0.55),
    inset 0 3px 10px rgba(255, 255, 255, 0.8);
}

.theme-light .breathing-circle.hold {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-color: #ffffff;
  box-shadow: 
    0 12px 36px rgba(5, 150, 105, 0.5),
    inset 0 3px 10px rgba(255, 255, 255, 0.9);
}

.breathing-circle.exhale {
  transform: scale(1.0);
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-color: #ffffff;
  box-shadow: 
    0 8px 24px rgba(99, 102, 241, 0.45),
    inset 0 2px 8px rgba(255, 255, 255, 0.7);
}

.theme-light .breathing-circle.exhale {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  border-color: #ffffff;
  box-shadow: 
    0 8px 24px rgba(67, 56, 202, 0.45),
    inset 0 2px 8px rgba(255, 255, 255, 0.8);
}2);
}8);
}

/* Animated Concentric Breathing Header Icon Rings */
.breathing-icon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  opacity: 0.8;
  animation: iconBreathe 3s ease-in-out infinite;
}

.breathing-icon-ring.ring-1 {
  width: 18px;
  height: 18px;
  animation-delay: 0s;
}

.breathing-icon-ring.ring-2 {
  width: 12px;
  height: 12px;
  animation-delay: 0.4s;
}

.breathing-icon-ring.ring-3 {
  width: 6px;
  height: 6px;
  animation-delay: 0.8s;
}

@keyframes iconBreathe {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.4;
    border-color: var(--primary);
  }
  50% {
    transform: scale(1.1);
    opacity: 0.95;
    border-color: var(--secondary);
    box-shadow: 0 0 5px rgba(23, 166, 228, 0.2);
  }
}

/* --- Dynamic Mascot Facial Expression Mappings --- */
.mascot-eye {
  width: 4px;
  height: 4px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mascot-mouth {
  width: 10px;
  height: 6px;
  border-bottom: 2px solid white;
  border-radius: 0 0 10px 10px;
  position: absolute;
  bottom: 4px;
  left: 7px;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mode: Zen Face 🧘 */
.mascot-face.zen .mascot-eye {
  height: 2px;
  border-radius: var(--radius-xs);
  top: 8px;
}
.mascot-face.zen .mascot-mouth {
  width: 8px;
  height: 2px;
  border-bottom: 2px solid white;
  border-radius: 0;
  bottom: 5px;
  left: 8px;
}

/* Mode: Deep Focus Face 🔍 */
.mascot-face.focus .mascot-eye {
  width: 5px;
  height: 2px;
  border-radius: 0;
  top: 7px;
}
.mascot-face.focus .mascot-mouth {
  width: 6px;
  height: 6px;
  border: 2px solid white;
  border-radius: 50%;
  bottom: 3px;
  left: 9px;
}

/* Mode: Celebrating Happy Face Heart Eyes 💖 */
.mascot-face.happy .mascot-eye {
  background-color: var(--danger);
  transform: scale(1.3);
  border-radius: 50%;
}
.mascot-face.happy .mascot-mouth {
  width: 12px;
  height: 7px;
  border-bottom: 3px solid white;
  border-radius: 0 0 12px 12px;
  left: 6px;
}

/* Mode: Sleepy Night Owl face 💤 */
.mascot-face.sleepy .mascot-eye {
  height: 2px;
  border-radius: var(--radius-xs);
  top: 8px;
}
.mascot-face.sleepy .mascot-eye.left { transform: rotate(-15deg); }
.mascot-face.sleepy .mascot-eye.right { transform: rotate(15deg); }
.mascot-face.sleepy .mascot-mouth {
  width: 4px;
  height: 3px;
  border-bottom: 2px solid white;
  border-radius: 50%;
  bottom: 4px;
  left: 10px;
}

/* ==========================================================================
   Phase 9: Premium Advanced Mindful Enhancements (Mascots, Showcases & Heatmaps)
   ========================================================================== */

/* Mascot: Ignis (Warm Active Flame) */
.mascot-avatar.ignis {
  background: var(--amber-grad) !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.45);
  animation: ignis-float-flicker 1.5s ease-in-out infinite alternate !important;
}

.mascot-avatar.water-reminder.ignis {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.mascot-avatar.ignis::before {
  content: '';
  position: absolute;
  top: -15px;
  width: 32px;
  height: 32px;
  background: var(--red-grad);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  z-index: -1;
  animation: ignis-flame-burn 0.8s ease-in-out infinite alternate;
}

.mascot-avatar.ignis::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  background: var(--amber-grad);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  z-index: -1;
  animation: ignis-flame-burn-inner 0.6s ease-in-out infinite alternate-reverse;
}

@keyframes ignis-float-flicker {
  0% { transform: translateY(0) scale(1) rotate(-1deg); }
  50% { transform: translateY(-4px) scale(0.97) rotate(2deg); }
  100% { transform: translateY(-7px) scale(1.03) rotate(-2deg); }
}

@keyframes ignis-flame-burn {
  0% { transform: rotate(-45deg) scale(0.9) skewX(2deg); }
  100% { transform: rotate(-45deg) scale(1.15) skewX(-2deg); }
}

@keyframes ignis-flame-burn-inner {
  0% { transform: rotate(-45deg) scale(0.85); filter: brightness(1.2); }
  100% { transform: rotate(-45deg) scale(1.1); filter: brightness(0.9); }
}

/* Mascot: Panda (Calm Sleeping Panda) */
.mascot-avatar.panda {
  background: #ffffff !important;
  border: 3px solid #1f2937 !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  animation: panda-breathing 4.5s ease-in-out infinite !important;
}

.mascot-avatar.water-reminder.panda {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

.mascot-avatar.panda::before,
.mascot-avatar.panda::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #1f2937;
  border-radius: 50%;
  top: -4px;
  z-index: -1;
  transition: var(--transition-premium);
}

.mascot-avatar.panda::before {
  left: -2px;
}

.mascot-avatar.panda::after {
  right: -2px;
}

.mascot-avatar.panda .mascot-eye {
  background-color: #1f2937 !important;
}

.mascot-avatar.panda .mascot-eye::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #1f2937;
  border-radius: 50%;
  top: -3px;
  left: -3px;
  z-index: -1;
}

.mascot-avatar.panda .mascot-eye::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  top: 0px;
  left: 0px;
}

.mascot-avatar.panda .mascot-mouth {
  border-bottom-color: #1f2937 !important;
  bottom: 5px !important;
}

@keyframes panda-breathing {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* --- Priority Energy Heatmap Chart styling --- */
.heatmap-lit-block {
  transition: opacity 0.5s ease, transform 0.3s ease;
}
.heatmap-lit-block:hover {
  transform: scale(1.1) translateY(-2px);
  filter: brightness(1.2);
  cursor: pointer;
}
.heatmap-dark-block {
  fill: var(--text-muted);
  transition: opacity 0.5s ease;
}

/* --- Weekly Certificate Modal styling --- */
.certificate-modal-box {
  width: 720px;
  max-width: 95%;
}

.certificate-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
  margin: 10px 0;
}

.certificate-border {
  border: 1px dashed var(--primary);
  border-radius: calc(var(--radius-md) - 4px);
  padding: var(--space-lg);
  background: radial-gradient(circle, rgba(23, 166, 228, 0.04) 0%, transparent 80%);
}

.certificate-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.certificate-badge {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 800;
  color: var(--warning);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.certificate-content h2 {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--text-main), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cert-presentation {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}

.cert-user-name {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--primary);
  text-shadow: 0 0 15px var(--primary-glow);
  margin: var(--space-xxs) 0;
}

.cert-achievement-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 500px;
  margin-bottom: var(--space-xs);
}

.cert-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: 500px;
  margin: var(--space-md) 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.cert-stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.cert-stat-val {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.cert-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin-top: var(--space-lg);
}

.cert-signature-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 200px;
  text-align: center;
}

.cert-sig-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 6px;
}

.mascot-sig-name {
  font-family: var(--font-title);
  color: var(--secondary);
}

.cert-sig-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Printable CSS Overrides --- */
@media print {
  body, html {
    background: #ffffff !important;
    color: #111827 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Hide all workspace elements except the showcase overlays */
  .app-container, .modal-overlay:not(#modal-showcase), .toast-container, .no-print {
    display: none !important;
  }

  /* Make the active modal overlay and box transparent wrapper frames during printing */
  #modal-showcase, .certificate-modal-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }
  
  /* Show the print area */
  #certificate-print-area {
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 650px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 3px double #111827 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    padding: 40px !important;
    page-break-inside: avoid;
  }
  
  .certificate-border {
    border: 1px dashed #17A6E4 !important;
    background: none !important;
  }
  
  .cert-user-name {
    color: #4f46e5 !important;
    text-shadow: none !important;
  }
  
  .cert-stats-grid {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .cert-stat-val, .cert-sig-val, .certificate-content h2 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
  
  .cert-sig-val {
    border-bottom: 1px solid #d1d5db !important;
  }
  
  .cert-stat-lbl, .cert-sig-lbl, .cert-presentation, .cert-achievement-desc {
    color: #4b5563 !important;
  }
  
  .mascot-sig-name {
    color: #8b5cf6 !important;
  }
}

/* ==========================================================================
   Phase 10: Cosmic Flow Enhancements Styles (Mind Map, RPG & Backdrops)
   ========================================================================== */

#backdrop-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

#backdrop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Ideation Canvas Workspace --- */
.mindmap-workspace {
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-main);
}

.mindmap-canvas-container {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#mindmap-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

#mindmap-canvas:focus {
  outline: none;
}

.mindmap-workspace:focus-within {
  border-color: var(--primary, #17A6E4) !important;
  box-shadow: 0 0 12px rgba(23, 166, 228, 0.3) !important;
}

.mindmap-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  margin: var(--space-md) 16px 0 16px;
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10;
}

.toolbar-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
}

.toolbar-label {
  color: var(--text-muted);
  font-weight: 500;
}

.toolbar-value {
  color: var(--text-main);
  font-weight: 700;
  font-family: var(--font-title);
  background: var(--blue-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Mascot RPG HUD --- */
.mascot-rpg-hud {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-glass-light);
  padding-top: 10px;
  text-align: left;
}

.rpg-level-badge {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  width: max-content;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
}

.rpg-xp-progress {
  width: 100%;
  height: 6px;
  background: var(--border-glass);
  border-radius: 99px;
  overflow: hidden;
}

.rpg-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warning), var(--primary));
  border-radius: 99px;
  width: 0%;
  transition: width 0.3s ease;
}

.rpg-xp-text {
  font-family: var(--font-title);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
}

/* --- Aurora Borealis CSS Active Backdrop layers --- */
.aurora-bg {
  background: linear-gradient(135deg, #050608 0%, #05100e 50%, #031412 100%) !important;
  position: relative;
  overflow: hidden;
}

:root[data-theme="light"] .aurora-bg {
  background: linear-gradient(135deg, #FAF9F5 0%, #f0f7f4 50%, #eefbf4 100%) !important;
}

.aurora-glow {
  position: absolute;
  width: 65vw;
  height: 65vw;
  border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
  filter: blur(130px);
  mix-blend-mode: screen;
  opacity: 0.42;
  pointer-events: none;
  z-index: -1;
  transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.5s ease;
}

:root[data-theme="light"] .aurora-glow {
  mix-blend-mode: multiply;
  opacity: 0.08; /* Keep it very subtle in light mode so it doesn't get muddy */
}

.aurora-glow-1 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, transparent 70%); /* Emerald Green */
  top: -20%;
  left: -20%;
  animation: aurora-move-1 32s ease-in-out infinite alternate;
}

.aurora-glow-2 {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.38) 0%, transparent 70%); /* Mint Green */
  bottom: -20%;
  right: -20%;
  animation: aurora-move-2 26s ease-in-out infinite alternate;
}

.aurora-glow-3 {
  background: radial-gradient(circle, rgba(94, 122, 91, 0.4) 0%, transparent 70%); /* Sage Green from spec */
  top: 30%;
  left: 20%;
  animation: aurora-move-3 38s ease-in-out infinite alternate;
}

.aurora-glow-4 {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.35) 0%, transparent 70%); /* Teal Green */
  bottom: 20%;
  left: -10%;
  animation: aurora-move-4 28s ease-in-out infinite alternate;
}

.aurora-glow-5 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%); /* Faint Emerald */
  top: -10%;
  right: 15%;
  animation: aurora-move-5 34s ease-in-out infinite alternate;
}

@keyframes aurora-move-1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; }
  33% { transform: translate(15vw, 10vh) scale(1.2) rotate(60deg); border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; }
  66% { transform: translate(5vw, 25vh) scale(0.8) rotate(120deg); border-radius: 60% 40% 60% 40% / 40% 30% 70% 60%; }
  100% { transform: translate(25vw, 15vh) scale(1.3) rotate(180deg); border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; }
}

@keyframes aurora-move-2 {
  0% { transform: translate(0, 0) scale(1.1) rotate(0deg); border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
  50% { transform: translate(-18vw, -12vh) scale(1.3) rotate(-90deg); border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
  100% { transform: translate(-8vw, -25vh) scale(0.9) rotate(-180deg); border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
}

@keyframes aurora-move-3 {
  0% { transform: translate(0, 0) scale(0.9) rotate(0deg); }
  33% { transform: translate(10vw, -15vh) scale(1.15) rotate(45deg); }
  66% { transform: translate(-12vw, -5vh) scale(1.3) rotate(90deg); }
  100% { transform: translate(5vw, 10vh) scale(1) rotate(135deg); }
}

@keyframes aurora-move-4 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50%; }
  50% { transform: translate(20vw, -20vh) scale(0.8) rotate(120deg); border-radius: 30% 70% 70% 30% / 50% 40% 60% 50%; }
  100% { transform: translate(10vw, 5vh) scale(1.2) rotate(240deg); border-radius: 50%; }
}

@keyframes aurora-move-5 {
  0% { transform: translate(0, 0) scale(1.15) rotate(0deg); }
  50% { transform: translate(-22vw, 18vh) scale(0.85) rotate(-120deg); }
  100% { transform: translate(-5vw, -8vh) scale(1.05) rotate(-240deg); }
}

/* ==========================================================================
   Phase 11: Emotional Mood-Rings, Gratitude Journal & Task Vault Styles
   ========================================================================== */

.mood-card, .gratitude-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mood-card:hover, .gratitude-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.mood-header, .gratitude-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

.mood-header h4, .gratitude-header h4 {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.mood-subtext, .gratitude-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.mood-dial-buttons {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: space-between;
}

.mood-btn {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
}

.mood-btn:hover {
  transform: scale(1.05);
  color: var(--text-main);
  background: var(--bg-glass-hover);
}

.mood-btn .mood-icon {
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.mood-btn .mood-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Active Custom Gradient Mood States */
.mood-btn.inspired:hover, .mood-btn.inspired.active {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.mood-btn.inspired.active {
  background: var(--amber-grad) !important;
  color: white !important;
}

.mood-btn.calm:hover, .mood-btn.calm.active {
  border-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
.mood-btn.calm.active {
  background: var(--green-grad) !important;
  color: white !important;
}

.mood-btn.focused:hover, .mood-btn.focused.active {
  border-color: #17A6E4;
  box-shadow: 0 0 12px rgba(23, 166, 228, 0.25);
}
.mood-btn.focused.active {
  background: var(--purple-grad) !important;
  color: white !important;
}

.mood-btn.anxious:hover, .mood-btn.anxious.active {
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}
.mood-btn.anxious.active {
  background: var(--blue-grad) !important;
  color: white !important;
}

.mood-btn.tired:hover, .mood-btn.tired.active {
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}
.mood-btn.tired.active {
  background: var(--red-grad) !important;
  color: white !important;
}

/* Gratitude Journal input styling */
.gratitude-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gratitude-input {
  font-size: 12px;
  padding: var(--space-xs) 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.gratitude-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(23, 166, 228, 0.15);
}

.gratitude-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px dashed rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-sm);
  animation: scale-up-fade 0.4s ease;
  position: relative;
}

#btn-edit-gratitude {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  opacity: 0.4;
}

#btn-edit-gratitude:hover {
  opacity: 1;
  color: var(--text-main);
  background: var(--bg-glass-hover);
}

.gratitude-success-state .success-icon {
  animation: float-pulse 2s ease-in-out infinite;
}

@keyframes scale-up-fade {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes float-pulse {
  0%, 100% { transform: translateY(0); filter: brightness(1.2); }
  50% { transform: translateY(-3px); filter: brightness(0.95); }
}

/* Vault List Styling */
.vault-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vault-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.vault-item:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-glass);
}

.vault-item-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  text-align: left;
}

.vault-item-details h4 {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.vault-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 10px;
  color: var(--text-muted);
}

.vault-item-meta .vault-project-pill {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.vault-item-actions {
  display: flex;
  gap: var(--space-xs);
}

.vault-btn {
  padding: 6px var(--space-sm);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  background: transparent;
  border: 1px solid transparent;
}

.vault-btn.restore {
  border-color: var(--primary);
  color: var(--primary);
}

.vault-btn.restore:hover {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 8px rgba(23, 166, 228, 0.2);
}

.vault-btn.purge {
  border-color: var(--danger);
  color: var(--danger);
}

.vault-btn.purge:hover {
  background: var(--danger);
  color: white;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.2);
}

/* ==========================================================================
   Phase 13: Mindful Zen Garden & Cinematic Time Capsule
   ========================================================================== */

.zen-garden-card {
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-main);
  background: var(--bg-glass);
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.zen-garden-card:hover {
  border-color: var(--primary-glow);
}

/* Scrapbook elegant handwriting notes */
.scrapbook-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.scrapbook-note {
  font-family: var(--font-cursive);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-main);
  padding: var(--space-xxs) 0;
  border-bottom: 1px dashed rgba(23, 166, 228, 0.15);
  margin-bottom: var(--space-xs);
  transition: color 0.3s ease;
  position: relative;
}

.scrapbook-note::before {
  content: "✏️";
  font-size: 11px;
  margin-right: 8px;
  opacity: 0.7;
}

/* Danger Zone Custom Master Reset highlighting */
.btn-danger-highlight {
  background: rgba(244, 63, 94, 0.08) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.05) !important;
  transition: var(--transition-premium) !important;
  font-family: var(--font-title);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-danger-highlight:hover {
  background: var(--danger) !important;
  color: white !important;
  border-color: var(--danger) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.35) !important;
}

/* Capsule canvas mood details styles */
#capsule-mood-canvas {
  transition: transform 0.5s ease;
}

.mood-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) 8px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass-light);
  color: var(--text-main);
}

/* Cloud Sync Rotation keyframe */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.icon-btn.syncing svg {
  animation: spin 0.8s linear infinite !important;
}

.sidebar-mascot.companion-off {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  min-height: 0;
  text-align: center;
  overflow: hidden;
}

.sidebar-mascot.companion-off:has(.mascot-avatar.water-reminder) {
  padding-top: var(--space-md);
}

.sidebar-mascot.companion-off::before,
.sidebar-mascot.companion-off .mascot-avatar,
.sidebar-mascot.companion-off .mascot-text {
  display: none !important;
}

.sidebar-mascot.companion-off .mascot-rpg-hud {
  width: 100%;
  margin-top: 0;
}

.sidebar-mascot.companion-off .sidebar-profile,
:root[data-theme="light"] .sidebar-mascot.companion-off .sidebar-profile {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-mascot,
  .sidebar-mascot * {
    transition-duration: 0.01ms !important;
  }
}
#btn-sync-refresh {
  position: relative;
}
#btn-sync-refresh.syncing {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(56, 189, 248, 0.1);
}
#btn-sync-refresh.sync-synced {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-glass-light));
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
#btn-sync-refresh.sync-offline,
#btn-sync-refresh.sync-pending {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.1);
}
#btn-sync-refresh.sync-attention {
  color: #ef6464;
  border-color: rgba(239, 100, 100, 0.46);
  background: rgba(239, 100, 100, 0.1);
}
#btn-sync-refresh[data-sync-count]::after {
  content: attr(data-sync-count);
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 16px;
  min-height: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid var(--bg-main);
  background: #f59e0b;
  color: #271500;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
}
#btn-sync-refresh.sync-attention[data-sync-count]::after {
  background: #ef6464;
  color: #ffffff;
}

/* ==========================================================================
   Phase 22: Refined Auth Portal & Interactive Guided Mascot Walkthrough
   ========================================================================== */

/* Auth Portal Hard-Wired Day Mode & Premium Split Stage */
#auth-portal-overlay.auth-day-overlay {
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 10000 !important;
}

#auth-portal-overlay .modal-box.auth-day-split-card {
  width: 1070px !important;
  max-width: 95vw !important;
  height: 655px !important;
  padding: 0 !important;
  border-radius: 36px !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  position: relative !important;
  background: #ffffff url('auriem_signin_left_stage.png') no-repeat left center / contain !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.18), 0 12px 36px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

/* Right Content Panel - 75% gap position (no overlap) */
.auth-day-right-panel {
  margin-left: 49.25% !important;
  flex: 1 !important;
  padding: 37px 46px 35px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: transparent !important;
  color: #0f172a !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Top Bar Mode Toggle */
.auth-day-top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
}

.auth-day-toggle-wrap {
  font-family: 'Onest', sans-serif !important;
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.auth-day-toggle-link {
  font-family: 'Onest', sans-serif !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 0 4px !important;
  transition: opacity 0.2s ease !important;
}

.auth-day-toggle-link:hover {
  opacity: 0.75 !important;
  text-decoration: underline !important;
}

/* Forms Wrapper & Animations - Balanced 375px Pill Width */
.auth-day-forms-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 375px !important;
}

.auth-day-form-screen {
  animation: dayFormFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  width: 100% !important;
  max-width: 375px !important;
}

/* The shared auth button rule uses !important for its flex layout. Keep
   loading-only controls truly absent until the state machine reveals them. */
#auth-preparing-screen [hidden] {
  display: none !important;
}

.auth-day-hydration-progress {
  position: relative;
  width: 168px;
  height: 5px;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
}

.auth-day-hydration-progress-bar {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22a8e8, #5148ef);
  animation: authHydrationProgress 1.45s ease-in-out infinite;
}

@keyframes authHydrationProgress {
  0% {
    transform: translateX(-125%);
  }
  55% {
    transform: translateX(95%);
  }
  100% {
    transform: translateX(245%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-day-hydration-progress-bar {
    animation: none;
    transform: translateX(0);
  }
}

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

/* Typography & Headings */
.auth-day-title {
  font-family: 'Onest', sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin: 0 0 5px 0 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.1 !important;
}

.auth-day-subtitle {
  font-family: 'Onest', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin: 0 0 23px 0 !important;
}

.auth-day-gradient-brand {
  background: linear-gradient(135deg, #17A6E4 0%, #3b82f6 50%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  display: inline !important;
}

/* Google Sign-in Button - Compact Pill */
.auth-day-google-btn {
  width: 100% !important;
  max-width: 375px !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-day-google-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Divider */
.auth-day-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 21px 0 19px 0 !important;
  max-width: 375px !important;
}

.auth-day-divider-line {
  flex: 1 !important;
  height: 1px !important;
  background: #e2e8f0 !important;
}

.auth-day-divider-text {
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

/* Inputs - Compact Pill */
.auth-day-input-group {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 375px !important;
  margin-bottom: 16px !important;
}

.auth-day-input-icon {
  position: absolute !important;
  left: 16px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.auth-day-input {
  width: 100% !important;
  max-width: 375px !important;
  padding: 14px 44px 14px 46px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-day-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.auth-day-input:focus {
  background: #ffffff !important;
  border-color: #17A6E4 !important;
  box-shadow: 0 0 0 4px rgba(23, 166, 228, 0.12) !important;
  outline: none !important;
}

.auth-day-field-shell {
  width: 100% !important;
  max-width: 375px !important;
  margin-bottom: 16px !important;
}

.auth-day-input-label {
  display: block !important;
  margin: 0 0 8px 2px !important;
  color: #475569 !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.auth-day-field-shell .auth-day-input-group {
  max-width: none !important;
  margin-bottom: 0 !important;
}

.auth-day-field-error {
  margin: 9px 2px 0 !important;
  padding: 8px 10px !important;
  border-left: 3px solid #d66b6b !important;
  border-radius: 8px !important;
  background: #fff5f4 !important;
  color: #a83f4b !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.auth-day-field-error[hidden] {
  display: none !important;
}

.auth-day-input[aria-invalid="true"] {
  background: #fffafa !important;
  border-color: #d66b6b !important;
  box-shadow: 0 0 0 4px rgba(214, 107, 107, 0.12) !important;
}

/* Eye Password Toggle Button */
.btn-toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: color 0.2s ease, transform 0.15s ease !important;
  z-index: 5 !important;
}

.btn-toggle-password:hover {
  color: var(--primary, #17A6E4) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.btn-toggle-password:active {
  transform: translateY(-50%) scale(0.95) !important;
}

.auth-day-otp-input {
  padding: 14px 16px !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* Primary Action Gradient Button - Compact Pill */
.auth-day-gradient-btn {
  width: 100% !important;
  max-width: 375px !important;
  padding: 14px 24px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #17A6E4 0%, #3b82f6 50%, #4f46e5 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(23, 166, 228, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-day-gradient-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(23, 166, 228, 0.45) !important;
  filter: brightness(1.04) !important;
}

.auth-day-gradient-btn:active {
  transform: translateY(0) !important;
}

/* Links & Legal text */
.auth-day-terms {
  font-family: 'Onest', sans-serif !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  margin-top: 18px !important;
  line-height: 1.4 !important;
  max-width: 375px !important;
}

.auth-day-terms a {
  color: #17A6E4 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.auth-day-sublinks {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 0 16px 0 !important;
  max-width: 375px !important;
}

.auth-day-link-sm {
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  color: #17A6E4 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.auth-day-link-sm:hover {
  text-decoration: underline !important;
}

.auth-day-link-sm:focus-visible,
.auth-day-link:focus-visible,
.btn-toggle-password:focus-visible {
  outline: 3px solid rgba(23, 166, 228, 0.28) !important;
  outline-offset: 3px !important;
}

.auth-day-back-wrap {
  font-family: 'Onest', sans-serif !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 16px !important;
  max-width: 375px !important;
}

.auth-day-link {
  color: #17A6E4 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.auth-day-link:hover {
  text-decoration: underline !important;
}

/* Mobile Stacking */
@media (max-width: 860px) {
  #auth-portal-overlay .modal-box.auth-day-split-card {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    min-height: 580px !important;
    border-radius: 24px !important;
    background-size: cover !important;
  }
  .auth-day-right-panel {
    margin-left: 0 !important;
    padding: 24px 28px !important;
  }
}

/* Transparent Overlay for Active Onboarding Tour */
#startup-guide-overlay.transparent-tour {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important; /* Let clicks pass to widgets below */
}

/* Floating Tour HUD box */
#startup-guide-overlay.transparent-tour .modal-box.glass {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 380px !important;
  margin: 0 !important;
  pointer-events: auto !important; /* Capture button clicks */
  box-shadow: var(--shadow-main) !important;
  animation: slide-in-hud 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1.5px solid var(--border-glass) !important;
  background: var(--bg-onboarding) !important;
  color: var(--text-main) !important;
}

#startup-guide-overlay .modal-box.glass {
  background: var(--bg-onboarding) !important;
  border: 1.5px solid var(--border-glass) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-main) !important;
}

#startup-guide-overlay h2 {
  color: var(--text-main) !important;
}

#startup-guide-overlay p {
  color: var(--text-muted) !important;
}

@keyframes slide-in-hud {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pulse Spotlight highlight for active widgets */
.walkthrough-highlight-glow {
  position: relative;
  z-index: 10050 !important;
  box-shadow: 0 0 0 4px var(--primary), 0 0 25px var(--primary-glow) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius-lg) !important; /* Extremely smooth rounded edges matching glass grids */
  transition: var(--transition-premium) !important;
  animation: pulseHighlight 2s infinite !important;
}

@keyframes pulseHighlight {
  0%, 100% {
    box-shadow: 0 0 0 4px var(--primary), 0 0 25px var(--primary-glow) !important;
  }
  50% {
    box-shadow: 0 0 0 6px var(--secondary), 0 0 35px var(--secondary-glow) !important;
  }
}

/* Onboarding indicator dots */
.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-glass-light);
  display: inline-block;
  transition: var(--transition-premium);
}
.guide-dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 99px;
  box-shadow: var(--shadow-glow);
}

/* Aura guide breathing mascot animations */
.aura-guide-mascot-container {
  position: relative;
}

.aura-pulse-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid rgba(23, 166, 228, 0.4);
  box-shadow: 0 0 15px rgba(23, 166, 228, 0.2);
  animation: pulseRing 3s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  opacity: 0;
}

.aura-pulse-ring.ring-2 {
  animation-delay: 1.5s;
}

.aura-energy-core {
  font-size: 54px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: auraBreathing 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px var(--primary-glow));
}

@keyframes pulseRing {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes auraBreathing {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 15px var(--primary-glow));
  }
  50% {
    transform: scale(1.1) translateY(-6px);
    filter: drop-shadow(0 0 25px rgba(23, 166, 228, 0.7));
  }
}

/* Custom Profile badge card glow integration */
.profile-badge-card {
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s ease;
}
.profile-badge-card:hover {
  border-color: rgba(23, 166, 228, 0.3) !important;
}




@keyframes fillProgress {
  from { stroke-dasharray: 0, 100; }
}
.mini-ring-progress {
  animation: fillProgress 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Active Focus Task Ripple Beacon & Row/Card highlights */
.active-focus-card {
  position: relative;
  overflow: visible !important;
  transition: var(--transition-premium);
}

/* Kanban card specifics: add left border trace & inset glow */
.kanban-card.active-focus-card {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-left: 4px solid var(--focus-glow-color) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: inset 10px 0 20px -10px var(--focus-glow-color) !important;
}

/* Central glowing beacon dot (Exactly aligned with ::after) */
.kanban-card.active-focus-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--focus-glow-color);
  box-shadow: 0 0 8px var(--focus-glow-color);
  z-index: 5;
  box-sizing: border-box !important;
}

/* Concentric ripple ring (Sharing exact same coordinates and base size for mathematical concentricity) */
.kanban-card.active-focus-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--focus-glow-color);
  animation: pond-ripple 2.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
  pointer-events: none;
  z-index: 4;
  transform-origin: center center;
  box-sizing: border-box !important;
}

@keyframes pond-ripple {
  0% {
    transform: scale(1);
    opacity: 0.95;
  }
  100% {
    transform: scale(5.5);
    opacity: 0;
  }
}

/* List Row Highlight (Subtle Left Border Trace & soft glow overlay) */
.task-list-item.active-focus-card {
  border-left: 4px solid var(--focus-glow-color) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: inset 10px 0 20px -10px var(--focus-glow-color) !important;
}

/* Focus History Arrow rotation & hover matching SOHE */
#toggle-focus-history.open #focus-history-arrow {
  transform: rotate(180deg);
}

#toggle-focus-history:hover #focus-history-arrow {
  color: var(--primary) !important;
}

/* Pulse Timeline: quiet, consistent iconography for every activity type. */
.pulse-timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pulse-timeline-item:hover {
  transform: translateY(-1px);
  background: var(--bg-glass-hover);
  border-color: var(--border-glass);
}

.pulse-timeline-icon-shell {
  --pulse-icon-color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--pulse-icon-color);
  background: var(--bg-card);
  border: 1px solid var(--border-glass-light);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--pulse-icon-color) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--pulse-icon-color) 24%, var(--border-glass-light));
}

.pulse-timeline-icon {
  width: 17px;
  height: 17px;
}

.pulse-timeline-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.pulse-timeline-text {
  margin: 0;
  overflow: hidden;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pulse-timeline-time {
  color: var(--text-muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.pulse-type-success .pulse-timeline-icon-shell {
  --pulse-icon-color: #f5c15c;
}

.pulse-type-work .pulse-timeline-icon-shell {
  --pulse-icon-color: var(--focus-studio-amber);
}

.pulse-type-wellness .pulse-timeline-icon-shell {
  --pulse-icon-color: #46c7a1;
}

.pulse-type-info .pulse-timeline-icon-shell {
  --pulse-icon-color: var(--primary-light);
}

.pulse-type-project .pulse-timeline-icon-shell {
  --pulse-icon-color: #a78bfa;
}

.pulse-type-task_scheduled .pulse-timeline-icon-shell {
  --pulse-icon-color: #60a5fa;
}

/* Pulse Timeline Arrow rotation & hover matching SOHE */
#toggle-pulse-timeline.open #pulse-timeline-arrow {
  transform: rotate(180deg);
}

#toggle-pulse-timeline:hover #pulse-timeline-arrow {
  color: var(--primary) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-timeline-item {
    transition: none;
  }
}

/* Gratitude Journal Arrow rotation & hover matching SOHE */
#toggle-gratitude-history.open #gratitude-history-arrow {
  transform: rotate(180deg);
}

#toggle-gratitude-history:hover #gratitude-history-arrow {
  color: var(--primary) !important;
}

/* Today Focus Agenda Collapsible Arrow rotation & hover matching SOHE */
#toggle-today-agenda.open #today-agenda-arrow {
  transform: rotate(180deg);
}

#toggle-today-agenda:hover #today-agenda-arrow {
  color: var(--focus-studio-blue-ink) !important;
}

/* Tomorrow planning keeps the committed plan ahead of the next suggestions. */
.tomorrow-agenda-box > .agenda-header,
.tomorrow-scheduled-box > .scheduled-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tomorrow-agenda-box > .agenda-header::marker,
.tomorrow-agenda-box > .agenda-header::-webkit-details-marker,
.tomorrow-scheduled-box > .scheduled-header::marker,
.tomorrow-scheduled-box > .scheduled-header::-webkit-details-marker {
  display: none;
}

.tomorrow-agenda-box > .agenda-header .agenda-collapse-arrow,
.tomorrow-scheduled-box > .scheduled-header .agenda-collapse-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.14s ease;
}

.tomorrow-agenda-box[open] > .agenda-header .agenda-collapse-arrow,
.tomorrow-scheduled-box[open] > .scheduled-header .agenda-collapse-arrow {
  transform: rotate(180deg);
}

.tomorrow-agenda-box > .agenda-header:hover .agenda-collapse-arrow,
.tomorrow-agenda-box > .agenda-header:focus-visible .agenda-collapse-arrow,
.tomorrow-scheduled-box > .scheduled-header:hover .agenda-collapse-arrow,
.tomorrow-scheduled-box > .scheduled-header:focus-visible .agenda-collapse-arrow {
  color: var(--focus-studio-blue-ink);
}

.tomorrow-agenda-box > .agenda-header:focus-visible,
.tomorrow-scheduled-box > .scheduled-header:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 58%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

#tomorrow-scheduled-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.2;
}

.scheduled-summary-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.tomorrow-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
  justify-content: center;
}

#tomorrow-scheduled-visible {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#tomorrow-agenda-list {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.tomorrow-agenda-collapsed-list {
  margin-top: 6px;
  justify-content: flex-start;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.tomorrow-agenda-collapsed-list[hidden] {
  display: none !important;
}

.tomorrow-agenda-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--focus-studio-blue-ink);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.tomorrow-agenda-toggler[hidden] {
  display: none;
}

.tomorrow-agenda-toggler svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}

.tomorrow-agenda-toggler:hover,
.tomorrow-agenda-toggler:focus-visible {
  border-color: color-mix(in srgb, var(--focus-studio-blue) 24%, transparent);
  background: color-mix(in srgb, var(--focus-studio-blue) 7%, transparent);
}

.tomorrow-agenda-toggler:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 58%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tomorrow-agenda-box > .agenda-header .agenda-collapse-arrow,
  .tomorrow-scheduled-box > .scheduled-header .agenda-collapse-arrow {
    transition: none;
  }

  .tomorrow-agenda-toggler svg {
    transition: none;
  }
}

.today-agenda-subtask-progress {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.mit-subtask-progress {
  margin-left: 2px;
}

.today-agenda-project {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.today-agenda-subtask-progress-track {
  display: block;
  width: 28px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--focus-studio-blue) 14%, var(--border-glass));
}

.today-agenda-subtask-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--focus-studio-gradient);
}

.today-agenda-task-item:hover {
  background: color-mix(in srgb, var(--focus-studio-blue) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--focus-studio-blue) 28%, var(--border-glass-light)) !important;
}

.today-agenda-task-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 72%, transparent);
  outline-offset: 2px;
}

.agenda-builder-item,
.tomorrow-scheduled-task-item {
  cursor: pointer;
}

.agenda-builder-item:hover,
.tomorrow-scheduled-task-item:hover {
  background: color-mix(in srgb, var(--focus-studio-blue) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--focus-studio-blue) 28%, var(--border-glass-light)) !important;
}

.agenda-builder-item:focus-visible,
.tomorrow-scheduled-task-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 72%, transparent);
  outline-offset: 2px;
}

/* MIT focus-surface drag-over feedback */
.mit-focus-drop-surface {
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, outline 0.2s ease;
}

.mit-focus-drop-surface.drag-hover {
  background: color-mix(in srgb, var(--focus-studio-blue) 8%, transparent) !important;
  outline: 2px dashed var(--focus-studio-blue-ink) !important;
  outline-offset: -2px;
}

#today-agenda-remaining-list .agenda-pointer-dragging {
  opacity: 0.94 !important;
  cursor: grabbing !important;
  outline: 2px solid color-mix(in srgb, var(--focus-studio-blue-ink) 70%, transparent);
  outline-offset: 2px;
  transition: none;
}

#today-agenda-remaining-list .agenda-pointer-placeholder {
  box-sizing: border-box;
  min-height: 0;
  border: 1.5px dashed color-mix(in srgb, var(--focus-studio-blue-ink) 72%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--focus-studio-blue) 7%, transparent);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  #today-agenda-remaining-list .agenda-pointer-dragging {
    transition: none;
  }
}

/* ==========================================================
   Re-Entry Audit Focus Sifter (Card Layout)
   ========================================================== */
.audit-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  margin: 20px 0;
}

.audit-progress-label {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.audit-swipe-card {
  width: 100%;
  max-width: 440px;
  min-height: 110px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--border-glass-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg) 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
  position: relative;
  overflow: hidden;
}

.audit-swipe-card-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
}

.audit-actions-group {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.audit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-xs) 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass-light);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.audit-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.audit-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Base button states with soft color indications */
.audit-btn-done {
  border-color: rgba(16, 185, 129, 0.35);
  color: rgba(16, 185, 129, 0.9);
}
.audit-btn-done:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--success);
  color: var(--success);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.audit-btn-today {
  border-color: rgba(245, 158, 11, 0.35);
  color: rgba(245, 158, 11, 0.9);
}
.audit-btn-today:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: var(--warning);
  color: var(--warning);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.audit-btn-backlog {
  border-color: rgba(23, 166, 228, 0.35);
  color: rgba(23, 166, 228, 0.9);
}
.audit-btn-backlog:hover {
  background: rgba(23, 166, 228, 0.16);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 12px rgba(23, 166, 228, 0.25);
}

.audit-btn-delete {
  border-color: rgba(239, 68, 68, 0.35);
  color: rgba(239, 68, 68, 0.9);
}
.audit-btn-delete:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

/* Swipe animations (250ms ease) */
.card-swipe-out-right {
  transform: translateX(180px) rotate(10deg);
  opacity: 0;
}
.card-swipe-out-left {
  transform: translateX(-180px) rotate(-10deg);
  opacity: 0;
}
.card-swipe-out-up {
  transform: translateY(-120px);
  opacity: 0;
}
.card-swipe-out-down {
  transform: translateY(120px);
  opacity: 0;
}

/* ==========================================================
   Sidebar Profile & Premium Badges
   ========================================================== */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 0 0;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-top: 1px solid var(--border-glass-light); /* Sleek divider separating mascot from profile */
  border-radius: 0;
  margin-top: 14px;
  margin-bottom: 0;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-premium);
  box-shadow: none;
}

.sidebar-profile:hover {
  cursor: pointer;
  border-top-color: var(--primary); /* Glowing highlight on divider on hover */
}

:root[data-theme="light"] .sidebar-profile {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
}

:root[data-theme="light"] .sidebar-profile:hover {
  background: transparent;
  border-top-color: rgba(23, 166, 228, 0.5);
}

.profile-avatar-container {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-premium);
  flex-shrink: 0;
}

.sidebar-level-progress {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.profile-level-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.sidebar-level-progress,
.profile-level-value {
  display: none;
}

.profile-level-ring-track,
.profile-level-ring-progress {
  fill: none;
  stroke-width: 3.2;
}

.profile-level-ring-track {
  stroke: var(--border-glass);
}

.profile-level-ring-progress {
  stroke: url(#sidebar-level-ring-gradient);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 240ms ease-out;
}

.profile-level-value {
  position: absolute;
  inset: 50% auto auto 50%;
  width: auto;
  height: auto;
  place-items: center;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(23, 166, 228, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

:root[data-theme="light"] .avatar-placeholder {
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.profile-avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg-card-solid);
}

.profile-avatar-svg {
  stroke: #ffffff;
}

:root[data-theme="light"] .profile-avatar-svg {
  stroke: #ffffff; /* always white on the gradient avatar circle background */
}

.profile-info {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-xxs) !important;
  align-items: flex-start !important;
  text-align: left;
}

.profile-name {
  font-family: var(--font-title);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.user-badge {
  font-family: var(--font-title);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2.5px 7px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: normal;
  border: 1px solid transparent;
  width: fit-content;
  user-select: none;
  line-height: 1;
}

/* Seeker (Free) - Sleek, minimal slate pill */
.user-badge.seeker {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

:root[data-theme="light"] .user-badge.seeker {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* Flow Master (Pro) - Elegant glowing violet card badge */
.user-badge.flowmaster {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(23, 166, 228, 0.35);
  animation: none; /* Removed purple pulse */
}

:root[data-theme="light"] .user-badge.flowmaster {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px rgba(23, 166, 228, 0.25);
}

@keyframes badge-pulse {
  0% {
    box-shadow: 0 0 6px rgba(23, 166, 228, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
  }
  100% {
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.32);
    border-color: rgba(139, 92, 246, 0.65);
  }
}

/* Founder (Lifetime) - Shimmering Gold Accent Badge */
.user-badge.founder {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-color: rgba(251, 191, 36, 0.85);
  color: #1e1b4b; /* deep contrast navy text */
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
  position: relative;
  overflow: hidden;
  font-weight: 900;
}

:root[data-theme="light"] .user-badge.founder {
  color: #78350f; /* high contrast deep gold-brown text */
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #d97706;
}

/* Gold Shimmer effect */
.user-badge.founder::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 55%
  );
  transform: rotate(45deg);
  background-size: 200% 200%;
  animation: shimmer-gold 4s infinite linear;
  pointer-events: none;
}

@keyframes shimmer-gold {
  0% {
    transform: translate(-30%, -30%) rotate(25deg);
  }
  100% {
    transform: translate(30%, 30%) rotate(25deg);
  }
}

/* Premium locked state for soundscapes */
.ambient-sound-btn.locked {
  position: relative;
  opacity: 0.6;
}

.ambient-sound-btn.locked::after {
  content: 'PRO';
  position: absolute;
  top: 3px;
  right: 3px;
  font-family: var(--font-title);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 3px;
  border-radius: var(--radius-xs);
  background: rgba(23, 166, 228, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c084fc;
  line-height: 1;
}

:root[data-theme="light"] .ambient-sound-btn.locked::after {
  background: rgba(23, 166, 228, 0.08);
  border-color: rgba(23, 166, 228, 0.25);
  color: #4f46e5;
}


/* Custom Styled Select Dropdown Component */
.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

/* Compact custom select for timer project selection */
.timer-project-select .custom-select-wrapper {
  min-width: 180px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.timer-project-select .custom-select-trigger {
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
}

.timer-project-select .custom-select-options {
  font-size: 12px;
}

/* Focus history project filter custom select compact styling */
#focus-history-filter-project-custom-wrapper {
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}

#focus-history-filter-project-custom-wrapper .custom-select-trigger {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

#focus-history-filter-project-custom-wrapper .custom-select-options {
  font-size: 11px;
}

/* Kanban project filter custom select compact styling */
#kanban-project-filter-custom-wrapper {
  min-width: 160px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

#kanban-project-filter-custom-wrapper .custom-select-trigger {
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: var(--radius-md) !important;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-fast);
}

:root[data-theme="light"] .custom-select-trigger {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-main);
}

.custom-select-trigger:hover {
  border-color: rgba(23, 166, 228, 0.4);
}

.custom-select-arrow {
  color: var(--text-muted);
  transition: transform 0.2s ease;
  display: block;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background: rgba(15, 12, 35, 0.98);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  animation: dropdown-fade-in 0.2s ease;
  padding: 6px 0;
  overscroll-behavior: contain;
}

:root[data-theme="light"] .custom-select-options {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.custom-select-wrapper.open .custom-select-options {
  display: block;
}

/* Raise stacking context of parent containers when a custom select is open to prevent overlapping clipping */
.pomodoro-container:has(.custom-select-wrapper.open),
#walkthrough-timer-studio:has(.custom-select-wrapper.open),
.card:has(.custom-select-wrapper.open),
.glass:has(.custom-select-wrapper.open),
.tab-panel:has(.custom-select-wrapper.open) {
  z-index: 9999 !important;
}

.custom-select-wrapper.open {
  z-index: 10000 !important;
}

@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.custom-select-option:first-child {
  margin-top: 4px;
}

.custom-select-option:last-child {
  margin-bottom: 8px;
}

.custom-select-option span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

:root[data-theme="light"] .custom-select-option {
  color: #475569;
}

.custom-select-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

:root[data-theme="light"] .custom-select-option:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #0f172a;
}

.custom-select-option.selected {
  background: rgba(23, 166, 228, 0.15);
  color: var(--primary-light);
  font-weight: 600;
}

:root[data-theme="light"] .custom-select-option.selected {
  background: rgba(23, 166, 228, 0.08);
  color: #4f46e5;
}

.premium-badge-pill {
  font-family: var(--font-title);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(23, 166, 228, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c084fc;
  line-height: 1;
}

:root[data-theme="light"] .premium-badge-pill {
  background: rgba(23, 166, 228, 0.08);
  border-color: rgba(23, 166, 228, 0.25);
  color: #4f46e5;
}

/* Pricing & Plan Custom Cards in Modal */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 28px 0 12px 0;
  text-align: left;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
  }
}

.pricing-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg) 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-premium);
  position: relative;
}

.pricing-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(23, 166, 228, 0.35);
  transform: translateY(-3px);
}

.pricing-card.popular {
  background: var(--bg-glass);
  border: 1px solid var(--primary);
  box-shadow: 0 0 25px rgba(23, 166, 228, 0.15);
  position: relative;
}

.pricing-card.popular:hover {
  background: var(--bg-glass-hover);
  border-color: var(--secondary);
  box-shadow: 0 0 35px rgba(23, 166, 228, 0.25);
}

/* Premium glowing-gold masked border styles for founder tier */
.pricing-card.founder-tier {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04) 0%, rgba(13, 11, 34, 0.6) 100%);
  border: 1px solid transparent;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.15), 0 0 40px rgba(251, 191, 36, 0.04), inset 0 1px 0 rgba(251, 191, 36, 0.25);
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card.founder-tier::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #ffe082 0%, #fbbf24 35%, #f59e0b 70%, #d97706 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card.founder-tier:hover {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, rgba(13, 11, 34, 0.7) 100%);
  border-color: transparent;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 30px rgba(251, 191, 36, 0.3), 0 0 60px rgba(251, 191, 36, 0.12), inset 0 1px 0 rgba(251, 191, 36, 0.45);
  transform: translateY(-5px);
}

.pricing-card.founder-tier:hover::after {
  opacity: 1;
  background: linear-gradient(135deg, #fff3c4 0%, #fbbf24 30%, #f59e0b 60%, #ffe082 100%) border-box;
}

.pricing-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: var(--radius-md);
  line-height: 1;
}

.pricing-card-badge.popular-badge {
  background: var(--purple-grad);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-card-badge.founder-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e1b4b;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.pricing-card-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 3px;
}

.pricing-card-title.flowmaster-title-text {
  color: var(--primary);
}
:root[data-theme="light"] .pricing-card-title.flowmaster-title-text {
  color: var(--primary);
}

.pricing-card-title.founder-title-text {
  color: #fbbf24; /* bright gold in dark mode */
}
:root[data-theme="light"] .pricing-card-title.founder-title-text {
  color: #b45309; /* dark gold/amber in light mode for contrast */
}

.pricing-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.35;
}

.pricing-card-price {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 14px;
}

.pricing-card-price span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-card-features {
  list-style: none;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: 18px;
  padding: 0;
}

.pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-card-features li::before {
  content: "✓";
  color: var(--primary);
  font-weight: 700;
}

.seeker-plan-card .pricing-card-desc {
  max-width: 32ch;
  line-height: 1.5;
  margin-bottom: 10px;
}

.seeker-plan-card .pricing-card-price {
  margin-bottom: 16px !important;
}

.pricing-card-features .pricing-feature-stacked {
  align-items: flex-start;
}

.pricing-feature-stacked > span {
  display: grid;
  gap: 3px;
  line-height: 1.35;
}

.pricing-feature-stacked small {
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.45;
}

.pricing-card-features .seeker-capacity-row {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(23, 166, 228, 0.07);
  border: 1px solid rgba(23, 166, 228, 0.18);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.pricing-card-features .seeker-capacity-row::before {
  content: "◌";
}

.pricing-card-features.gated-features li::before {
  content: "✓";
  color: var(--primary);
}

.pricing-card-features.founder-features li::before {
  content: "✓";
  color: #fbbf24;
}

.founder-features li {
  align-items: flex-start;
  line-height: 1.38;
}

.founder-features li > span {
  display: block;
  min-width: 0;
  text-wrap: pretty;
}

.founder-features strong {
  color: color-mix(in srgb, var(--text-main) 84%, #b45309 16%);
  font-weight: 760;
  letter-spacing: -0.01em;
}

:root[data-theme="dark"] .founder-features strong {
  color: #f8fafc;
}

.pricing-btn {
  width: 100%;
  padding: 14px 28px;
  font-family: var(--font-title);
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 1px solid transparent;
}

.pricing-btn.btn-free {
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px dashed rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  cursor: default;
}

:root[data-theme="light"] .pricing-btn.btn-free {
  background: rgba(0, 0, 0, 0.02);
  border: 1.5px dashed rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.45);
}

.pricing-btn.btn-pro {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(23, 166, 228, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-btn.btn-pro:hover {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-glow) 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(23, 166, 228, 0.5), inset 0 1.5px 1px rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
}

.pricing-btn.btn-founder {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5);
  text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5);
}

.pricing-btn.btn-founder:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.55), inset 0 2px 1.5px rgba(255, 255, 255, 0.6);
  letter-spacing: 2px;
}

/* --- Plan Validity Badges --- */
.plan-validity-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  letter-spacing: 0.2px;
  border: none;
  line-height: normal;
  margin-top: 4px;
}

/* Free / Seeker Tier: Grey Color */
.plan-validity-badge.seeker {
  color: var(--text-muted);
  background: transparent;
  border: none;
  box-shadow: none;
}

:root[data-theme="light"] .plan-validity-badge.seeker {
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Flowmaster Tier: Gradient App Color */
.plan-validity-badge.flowmaster {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
  border: none;
  box-shadow: none;
  animation: none;
}

:root[data-theme="light"] .plan-validity-badge.flowmaster {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
  border: none;
  box-shadow: none;
}

/* Founder Tier: Yellow Color */
.plan-validity-badge.founder {
  color: #fbbf24;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: none;
}

:root[data-theme="light"] .plan-validity-badge.founder {
  color: #d97706;
  background: transparent;
  border: none;
  box-shadow: none;
}

@keyframes validity-glow-pulse {
  0% { box-shadow: 0 0 6px rgba(23, 166, 228, 0.05); border-color: rgba(23, 166, 228, 0.3); }
  100% { box-shadow: 0 0 14px rgba(23, 166, 228, 0.25); border-color: rgba(23, 166, 228, 0.6); }
}

@keyframes validity-glow-pulse-gold {
  0% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.03); border-color: rgba(251, 191, 36, 0.2); }
  100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.18); border-color: rgba(251, 191, 36, 0.4); }
}

/* --- High-Fidelity Celebratory Upgrade Screen --- */
.celebration-card {
  position: relative;
  width: 580px;
  max-width: 92%;
  padding: 44px 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  background: rgba(8, 7, 26, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 120px rgba(139, 92, 246, 0.22);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  animation: celebration-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes celebration-slide-up {
  0% { transform: translateY(60px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.celebration-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.26) 0%, rgba(23, 166, 228, 0.1) 30%, transparent 60%);
  pointer-events: none;
  animation: celebration-rotate-glow 25s linear infinite;
  z-index: 0;
}

@keyframes celebration-rotate-glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.celebration-content {
  position: relative;
  z-index: 2;
}

.celebration-badge-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.celebration-badge-wrapper::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(139, 92, 246, 0.35);
  animation: celebration-spin 20s linear infinite;
}

@keyframes celebration-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.celebration-icon-element {
  font-size: 46px;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
  animation: celebration-bounce 3s ease-in-out infinite alternate;
  display: inline-block;
  line-height: 1;
}

@keyframes celebration-bounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.04); }
}

.celebration-title {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
  line-height: 1.2;
}

.celebration-subtitle {
  font-family: var(--font-title);
  font-size: 14.5px;
  font-weight: 850;
  color: #c084fc;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.celebration-subtitle.founder {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
}

.celebration-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  margin: 0 auto 20px;
}

.celebration-note {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.celebration-btn {
  width: 100%;
  padding: 14px 32px;
  font-family: var(--font-title);
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

.celebration-btn.btn-pro {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(23, 166, 228, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(255, 255, 255, 0.2);
}

.celebration-btn.btn-pro:hover {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-glow) 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(23, 166, 228, 0.5), inset 0 1.5px 1px rgba(255, 255, 255, 0.45);
  letter-spacing: 3px;
}

.celebration-btn.btn-founder {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35), inset 0 1.5px 1px rgba(255, 255, 255, 0.55);
  text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5), 0 0 6px rgba(245, 158, 11, 0.2);
}

.celebration-btn.btn-founder:hover {
  background: linear-gradient(135deg, #fff 0%, #fbbf24 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.5), inset 0 2px 1px rgba(255, 255, 255, 0.65);
  letter-spacing: 3px;
}

/* Confetti particles */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: var(--radius-xs);
  opacity: 0.85;
  animation: confetti-fall 4.5s linear both;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(110%) rotate(720deg);
    opacity: 0;
  }
}

/* --- High-Fidelity Celebratory Upgrade Screen Theme Adaptations --- */
#modal-celebration {
  z-index: 10100;
  background: rgba(8, 6, 24, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] #modal-celebration {
  background: rgba(240, 242, 247, 0.82);
}

[data-theme="light"] .celebration-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(23, 166, 228, 0.2);
  box-shadow: 0 24px 64px rgba(23, 166, 228, 0.1), 0 0 100px rgba(23, 166, 228, 0.12);
}

[data-theme="light"] .celebration-glow {
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.14) 0%, rgba(23, 166, 228, 0.05) 30%, transparent 60%);
}

[data-theme="light"] .celebration-badge-wrapper {
  background: radial-gradient(circle, rgba(23, 166, 228, 0.12) 0%, transparent 70%);
}

[data-theme="light"] .celebration-badge-wrapper::after {
  border-color: rgba(23, 166, 228, 0.3);
}

[data-theme="light"] .celebration-title {
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .celebration-subtitle {
  color: #6d28d9;
  text-shadow: 0 0 10px rgba(109, 40, 217, 0.15);
}

[data-theme="light"] .celebration-subtitle.founder {
  color: #b45309 !important;
  text-shadow: 0 0 10px rgba(180, 83, 9, 0.15) !important;
}

[data-theme="light"] .celebration-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

[data-theme="light"] .celebration-note {
  color: rgba(30, 27, 75, 0.85);
  text-shadow: none;
}

/* --- Pricing Toggle & Refinements --- */
@keyframes logo-glow-pulse {
  0% { filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.75)); transform: scale(1.04); }
}

@keyframes pulse-promo {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.45; }
  100% { transform: scale(1); opacity: 1; }
}

.founder-price-amount {
  color: #fbbf24;
}
:root[data-theme="light"] .founder-price-amount {
  color: #b45309;
}

.founder-promo-label {
  color: #fbbf24;
}
:root[data-theme="light"] .founder-promo-label {
  color: #b45309;
}

.flowmaster-promo-label {
  color: var(--primary);
}
:root[data-theme="light"] .flowmaster-promo-label {
  color: var(--primary);
}

/* Premium Sliding Toggle Styles */
.pricing-toggle-container {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  padding: var(--space-xxs);
  border-radius: 99px;
  z-index: 1;
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="light"] .pricing-toggle-container {
  background: rgba(0, 0, 0, 0.02);
}

.pricing-toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 160px; /* Uniform width matching toggle buttons */
  height: calc(100% - 8px);
  background: var(--purple-grad);
  border-radius: 99px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.28);
}

.pricing-toggle-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 160px; /* Uniform width for mathematically perfect sliding */
  padding: var(--space-xs) 0;
  color: var(--text-muted) !important;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pricing-toggle-btn.active {
  color: white !important;
}

:root[data-theme="light"] .pricing-toggle-btn.active {
  color: white !important;
}

/* Billing alert banner */
.billing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 50%, rgba(245, 158, 11, 0.12) 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  gap: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(245, 158, 11, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  position: relative;
}

[data-theme="light"] .billing-banner {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.02) 50%, rgba(217, 119, 6, 0.08) 100%);
  border-bottom-color: rgba(217, 119, 6, 0.2);
}

.billing-banner .banner-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
  flex-shrink: 0;
}

.billing-banner .banner-warning-svg {
  width: 14px;
  height: 14px;
  color: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
  animation: banner-icon-pulse 2s infinite ease-in-out;
}

@keyframes banner-icon-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.3)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.3)); }
}

.billing-banner .banner-text {
  flex-grow: 1;
  line-height: 1.4;
}

.billing-grace-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
  margin: 0 4px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #fbbf24;
  border-radius: 50%;
  animation: banner-dot-pulse 1.5s infinite ease-in-out;
}

@keyframes banner-dot-pulse {
  0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.billing-banner .banner-actions {
  display: flex;
  gap: var(--space-sm);
}

.billing-banner .banner-btn {
  padding: 7px 18px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.billing-banner .banner-btn.primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0d0d0d;
  border: none;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

.billing-banner .banner-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.55);
  filter: brightness(1.1);
}

.billing-banner .banner-btn.secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-banner .banner-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.freeze-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass-light);
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 6px;
}

[data-theme="light"] .freeze-item-row {
  background: rgba(0, 0, 0, 0.01);
}

.freeze-item-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .freeze-item-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

.freeze-item-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Click Physics (Micro-interactions) */
.btn:active,
.ambient-sound-btn:active,
.mood-btn:active,
.control-btn:active,
.play-btn:active,
.preset-btn:active,
.checkbox-circle:active,
.icon-btn:active,
.sheet-close-btn:active,
.card-action-btn:active,
.nav-btn:active,
.btn-approve-agenda:active,
#btn-approve-agenda:active,
#btn-sync-refresh:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Custom Meditation Icon Asset styling */
.meditation-icon-img {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}












/* Theme-Aware Logo */
.theme-logo {
  content: url("auriem_logo_transparent.png");
}

:root[data-theme="light"] .theme-logo {
  content: url("auriem_logo_transparent_light.png");
}

/* Drag and Drop Project Cards Reordering */
.project-card.draggable-project {
  cursor: grab !important;
  user-select: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.project-card.dragging {
  opacity: 0.12 !important;
  border: 2.5px dashed var(--primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: grabbing !important;
  transform: scale(0.96) !important;
}




/* Subtask Expansion UI */
.task-list-item {
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
}

.task-list-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.task-subtasks-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, margin-top 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 36px; /* align with text */
}

.task-list-item.expanded .task-subtasks-container {
  max-height: 800px;
  opacity: 1;
  margin-top: 12px;
}

.task-subtask-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.task-subtask-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-glass-light);
}

.task-subtask-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--text-muted);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.task-subtask-checkbox.completed {
  background: var(--primary);
  border-color: var(--primary);
}

.task-subtask-checkbox.completed::after {
  content: '';
  width: 4px;
  height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translateY(-1px);
}

.task-subtask-text {
  font-size: 13px;
  color: var(--text-main);
  transition: color 0.2s ease;
  flex: 1;
}

.task-subtask-row.completed .task-subtask-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* --- Avatar Rings --- */
.avatar-ring-seeker {
  padding: 0px;
  border: 2px solid var(--text-muted) !important;
}
.avatar-ring-flowmaster {
  padding: 0px;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 0 8px var(--primary-glow) !important;
}
.avatar-ring-founder {
  padding: 0px;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

/* ==========================================================================
   PREMIUM CUSTOM CONFIRMATION DIALOG (DAY/NIGHT THEME ENHANCEMENTS)
   ========================================================================== */
#modal-custom-confirm {
  z-index: 99999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s ease;
}

:root[data-theme="dark"] #modal-custom-confirm {
  background: rgba(8, 10, 18, 0.78) !important;
}

:root[data-theme="light"] #modal-custom-confirm {
  background: rgba(15, 23, 42, 0.38) !important;
}

#modal-custom-confirm .confirm-modal-card {
  width: 420px;
  max-width: 92%;
  padding: 30px 26px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  animation: modal-bounce-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dark Mode Modal Box */
:root[data-theme="dark"] #modal-custom-confirm .confirm-modal-card {
  background: rgba(20, 24, 38, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  backdrop-filter: blur(24px);
}

/* Light Mode / Day Mode Modal Box - Clean Crisp Surface */
:root[data-theme="light"] #modal-custom-confirm .confirm-modal-card {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 0 #ffffff inset !important;
  backdrop-filter: blur(20px);
}

/* Typography Enhancements */
#confirm-modal-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

:root[data-theme="dark"] #confirm-modal-title {
  color: #f8fafc !important;
}

:root[data-theme="light"] #confirm-modal-title {
  color: #0f172a !important;
}

#confirm-modal-message {
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

:root[data-theme="dark"] #confirm-modal-message {
  color: #94a3b8 !important;
}

:root[data-theme="light"] #confirm-modal-message {
  color: #475569 !important;
  font-weight: 500;
}

#confirm-modal-details {
  width: min(100%, 360px);
  max-height: min(36vh, 290px);
  margin: -8px auto 18px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  text-align: left;
  scrollbar-gutter: stable;
}

#confirm-modal-details[hidden] {
  display: none;
}

.confirm-removal-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 8px;
}

.confirm-removal-item + .confirm-removal-item {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.confirm-removal-index {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.14);
  font-size: 10px;
  font-weight: 800;
}

.confirm-removal-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.confirm-removal-kind,
.confirm-removal-subtitle {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.35;
}

.confirm-removal-kind {
  color: #67e8f9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confirm-removal-title {
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
}

:root[data-theme="light"] #confirm-modal-details {
  border-color: rgba(100, 116, 139, 0.22);
  background: rgba(241, 245, 249, 0.82);
}

:root[data-theme="light"] .confirm-removal-item + .confirm-removal-item {
  border-top-color: rgba(100, 116, 139, 0.16);
}

:root[data-theme="light"] .confirm-removal-index {
  color: #334155;
  background: rgba(100, 116, 139, 0.12);
}

:root[data-theme="light"] .confirm-removal-kind {
  color: #0e7490;
}

:root[data-theme="light"] .confirm-removal-title {
  color: #0f172a;
}

:root[data-theme="light"] .confirm-removal-subtitle {
  color: #64748b;
}

/* Icon Container */
#confirm-modal-icon-wrap {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

:root[data-theme="dark"] #confirm-modal-icon-wrap.icon-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
}

:root[data-theme="light"] #confirm-modal-icon-wrap.icon-warning {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #d97706 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18) !important;
}

:root[data-theme="dark"] #confirm-modal-icon-wrap.icon-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

:root[data-theme="light"] #confirm-modal-icon-wrap.icon-danger {
  background: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18) !important;
}

:root[data-theme="dark"] #confirm-modal-icon-wrap.icon-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

:root[data-theme="light"] #confirm-modal-icon-wrap.icon-info {
  background: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18) !important;
}

/* Action Buttons Styling */
#confirm-modal-cancel {
  flex: 1;
  padding: 11px 18px;
  font-weight: 600;
  border-radius: 12px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

:root[data-theme="dark"] #confirm-modal-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

:root[data-theme="dark"] #confirm-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

:root[data-theme="light"] #confirm-modal-cancel {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #confirm-modal-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

#confirm-modal-ok {
  flex: 1;
  padding: 11px 18px;
  font-weight: 700;
  border-radius: 12px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#confirm-modal-actions.has-tertiary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px !important;
}

#confirm-modal-actions.has-tertiary #confirm-modal-tertiary {
  grid-column: 1 / -1;
}

#confirm-modal-tertiary {
  min-width: 0;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.billing-banner .banner-warning-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(217, 119, 6, 0.18));
}

.seeker-limit-card {
  width: 470px;
  max-width: 92%;
  padding: 30px 28px;
  border-radius: 20px;
  text-align: center;
  background: rgba(20, 24, 38, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.seeker-limit-card h3 {
  margin: 0 0 9px;
  color: var(--text-main);
  font-size: 20px;
  line-height: 1.3;
}

.seeker-limit-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: rgba(23, 166, 228, 0.13);
  border: 1px solid rgba(23, 166, 228, 0.32);
  box-shadow: 0 0 20px rgba(23, 166, 228, 0.18);
}

.seeker-limit-icon svg {
  width: 24px;
  height: 24px;
}

.seeker-limit-message,
.seeker-limit-price {
  max-width: 390px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.seeker-limit-price {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 11.5px;
}

.seeker-limit-card .confirm-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.seeker-limit-card .confirm-modal-actions .btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 12px;
}

#confirm-modal-message.seeker-limit-copy,
.seeker-limit-copy {
  max-width: 390px;
  text-align: left;
  display: grid;
  gap: 13px;
  margin-bottom: 24px;
}

.seeker-limit-copy span,
.seeker-limit-copy small {
  display: block;
}

.seeker-limit-copy strong {
  color: var(--text-main);
  font-weight: 750;
}

.seeker-limit-copy .seeker-limit-greeting {
  color: var(--text-main);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: -5px;
}

.seeker-limit-copy small {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

.seeker-thank-icon img,
.seeker-limit-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

#confirm-modal-icon-wrap.seeker-thank-icon,
.seeker-limit-icon {
  color: #fb7185 !important;
  background: rgba(251, 113, 133, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
  box-shadow: 0 0 20px rgba(251, 113, 133, 0.16) !important;
}

/* Custom Segmented Task / Pomodoro Toggle Switch (Option A) */
.customer-data-card {
  border-color: rgba(23, 166, 228, 0.22) !important;
}

#customer-data-download-card,
#settings-card-workday,
#settings-card-system-notifications {
  height: 100%;
  box-sizing: border-box;
}

#customer-data-download-card,
#settings-card-workday {
  display: flex;
  flex-direction: column;
}

#customer-data-download-card .customer-data-actions {
  margin-top: auto;
}

#settings-card-workday .settings-form {
  flex: 1;
}

#settings-card-workday #btn-save-workday-settings {
  margin-top: auto !important;
}

.customer-data-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.customer-data-heading h3,
.billing-recovery-dev-tools h4 {
  margin: 0 0 3px;
}

.customer-data-heading p,
.billing-recovery-dev-tools p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.customer-data-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  background: rgba(23, 166, 228, 0.1);
  border: 1px solid rgba(23, 166, 228, 0.25);
}

.customer-data-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
}

.customer-data-live-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 13px;
  background: rgba(23, 166, 228, 0.055);
  border-radius: 11px;
}

.customer-data-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 4px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.customer-data-live-summary strong {
  display: block;
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 750;
}

.customer-data-live-summary p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.customer-data-assurance {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--text-dim);
}

.customer-data-assurance > span {
  color: #22a66a;
  font-size: 11px;
  font-weight: 800;
}

.customer-data-assurance p {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
}

.customer-data-card > small {
  display: block;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.4;
}

.farewell-backup-setting {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  margin: 12px 0 14px;
  padding: 14px 15px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(23, 166, 228, 0.065), rgba(124, 92, 255, 0.055));
}

.farewell-setting-copy {
  min-width: 0;
}

.farewell-setting-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.farewell-setting-copy > strong {
  display: block;
  color: var(--text-main);
  font-size: 11.5px;
  line-height: 1.35;
}

.farewell-setting-copy > p {
  margin: 5px 0 7px;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.45;
}

.farewell-recipient {
  display: block;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.farewell-recipient b {
  color: var(--text-muted);
  font-weight: 700;
}

.farewell-toggle {
  align-self: start;
  cursor: pointer;
}

.farewell-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.farewell-toggle > span {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border: 1px solid rgba(128, 128, 145, 0.3);
  border-radius: 999px;
  background: rgba(128, 128, 145, 0.14);
  transition: background 160ms ease, border-color 160ms ease;
}

.farewell-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 24, 40, 0.2);
  transition: transform 160ms ease;
}

.farewell-toggle input:checked + span {
  border-color: rgba(23, 166, 228, 0.5);
  background: linear-gradient(135deg, #17a6e4, #5147ed);
}

.farewell-toggle input:checked + span::after {
  transform: translateX(16px);
}

.farewell-toggle input:focus-visible + span {
  outline: 3px solid rgba(23, 166, 228, 0.2);
  outline-offset: 2px;
}

.farewell-toggle input:disabled + span {
  cursor: not-allowed;
  opacity: 0.5;
}

.farewell-status {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 3px 7px;
  color: var(--text-dim);
  font-size: 8.5px;
  font-weight: 750;
  border-radius: 999px;
  background: rgba(128, 128, 145, 0.1);
}

.farewell-status.is-enabled {
  color: #16865a;
  background: rgba(34, 197, 94, 0.1);
}

.farewell-opt-out-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(245, 158, 11, 0.24);
}

.farewell-modal-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  place-items: center;
  color: #f59e0b;
  font-size: 20px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.08);
}

.farewell-opt-out-modal h2 {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: 21px;
}

.farewell-opt-out-modal > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
}

.farewell-modal-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.farewell-delete-choice {
  color: #c87070;
}

/* Compact customer-owned backup surface */
.customer-data-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 20px;
}

.customer-data-heading {
  align-items: center;
}

.customer-data-live-summary {
  margin-top: 12px;
  padding: 10px 12px;
}

.farewell-backup-setting {
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 5px 14px;
  margin: 10px 0 12px;
  padding: 11px 12px;
  border-color: rgba(23, 166, 228, 0.16);
  background: rgba(23, 166, 228, 0.045);
}

.farewell-setting-copy > strong {
  font-size: 11.5px;
}

.farewell-setting-copy > p {
  margin: 3px 0 4px;
  max-width: 42ch;
  font-size: 9.5px;
  line-height: 1.4;
}

.farewell-recipient {
  font-size: 8.8px;
}

.customer-data-toggle {
  align-self: center;
}

.customer-data-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.customer-data-toggle input:focus-visible + .toggle-slider {
  outline: 3px solid rgba(23, 166, 228, 0.24);
  outline-offset: 2px;
}

.customer-data-toggle input:disabled + .toggle-slider {
  cursor: wait;
  opacity: 0.55;
}

.farewell-status {
  grid-column: 1;
  margin-top: 1px;
}

.customer-data-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.customer-data-actions .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
}

.customer-data-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.customer-data-card > small {
  margin-top: 8px;
}

.customer-import-modal {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 28px;
  border-radius: 16px;
}

.customer-import-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.customer-import-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--primary);
  background: rgba(23, 166, 228, 0.1);
  font-size: 23px;
  font-weight: 800;
}

.customer-import-heading {
  padding-right: 44px;
}

.customer-import-heading > span,
.customer-import-file > span,
.customer-import-result > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.customer-import-heading h2 {
  margin: 4px 0 7px;
  color: var(--text-main);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.customer-import-heading p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
  text-wrap: pretty;
}

.customer-import-file,
.customer-import-result {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(23, 166, 228, 0.07);
}

.customer-import-file strong,
.customer-import-result strong {
  color: var(--text-main);
  font-size: 13px;
}

.customer-import-file b {
  overflow: hidden;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-import-file small {
  color: var(--success);
  font-size: 10px;
  font-weight: 650;
}

.customer-import-choice-heading {
  display: grid;
  gap: 3px;
  margin-top: 16px;
}

.customer-import-choice-heading strong {
  color: var(--text-main);
  font-size: 12.5px;
}

.customer-import-choice-heading span {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.customer-import-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.customer-import-modes button.customer-import-mode {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 118px;
  padding: 13px 14px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  color: var(--text-main);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.customer-import-mode-merge {
  border-color: rgba(23, 166, 228, 0.24) !important;
  background: rgba(23, 166, 228, 0.035) !important;
}

.customer-import-mode-replace {
  border-color: rgba(245, 158, 11, 0.34) !important;
  background: rgba(245, 158, 11, 0.045) !important;
}

.customer-import-modes button.customer-import-mode:hover {
  transform: translateY(-1px);
}

.customer-import-mode-merge:hover {
  border-color: rgba(23, 166, 228, 0.64) !important;
  background: rgba(23, 166, 228, 0.08) !important;
}

.customer-import-mode-replace:hover {
  border-color: rgba(245, 158, 11, 0.7) !important;
  background: rgba(245, 158, 11, 0.09) !important;
}

.customer-import-modes button.customer-import-mode:focus-visible {
  outline: 3px solid rgba(23, 166, 228, 0.3);
  outline-offset: 2px;
}

.customer-import-mode-replace:focus-visible {
  outline-color: rgba(245, 158, 11, 0.42) !important;
}

.customer-import-mode-merge.is-selected {
  border-color: var(--primary) !important;
  background: rgba(23, 166, 228, 0.13) !important;
  box-shadow: 0 0 0 2px rgba(23, 166, 228, 0.1);
}

.customer-import-mode-replace.is-selected {
  border-color: var(--warning) !important;
  background: rgba(245, 158, 11, 0.13) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.11);
}

:root[data-theme="light"] .customer-import-mode-replace,
:root[data-theme="light"] .customer-import-mode-replace:hover {
  border-color: rgba(180, 83, 9, 0.42) !important;
}

:root[data-theme="light"] .customer-import-mode-replace.is-selected {
  border-color: #b45309 !important;
}

:root[data-theme="light"] .customer-import-mode-replace:focus-visible {
  outline-color: rgba(180, 83, 9, 0.5) !important;
}

.customer-import-mode-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin-top: 1px;
  border: 1px solid rgba(23, 166, 228, 0.35);
  border-radius: 10px;
  color: var(--primary-light);
  background: rgba(23, 166, 228, 0.1);
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
}

.customer-import-mode-replace .customer-import-mode-icon {
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--warning);
  background: rgba(245, 158, 11, 0.12);
  font-size: 16px;
}

:root[data-theme="light"] .customer-import-mode-replace .customer-import-mode-icon,
:root[data-theme="light"] .customer-import-mode-replace .customer-import-mode-kicker {
  color: #b45309;
}

.customer-import-mode-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-import-mode-kicker {
  color: var(--primary-light);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.customer-import-mode-replace .customer-import-mode-kicker {
  color: var(--warning);
}

.customer-import-modes strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.customer-import-mode-description,
.customer-import-result p,
.customer-import-assurance {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.customer-import-result p {
  margin: 5px 0 0;
  color: #b66e18;
}

.customer-import-assurance {
  margin-top: 12px;
}

.customer-import-validation {
  margin: 10px 0 0;
  color: var(--warning);
  font-size: 10.5px;
  line-height: 1.45;
}

:root[data-theme="light"] .customer-import-validation {
  color: #b45309;
}

.customer-import-confirm.is-disabled,
.customer-import-confirm.is-disabled:hover {
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.12);
  cursor: not-allowed;
  opacity: 0.78;
  transform: none;
  box-shadow: none;
}

.customer-import-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  margin-top: 18px;
}

.recovery-vault-entry {
  position: relative;
  align-items: center;
  gap: 11px;
  min-width: 250px;
  min-height: 48px;
  padding: 10px 38px 10px 13px;
  color: #d99029;
  background: rgba(217, 119, 6, 0.075);
  border: 1px solid rgba(217, 119, 6, 0.32);
  box-shadow: none;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease, border-color 180ms ease;
}

.recovery-vault-entry:hover {
  transform: translateY(-1px);
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.5);
}

.recovery-vault-entry:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.75);
  outline-offset: 3px;
}

.recovery-vault-entry[hidden] {
  display: none !important;
}

.recovery-vault-entry > span:nth-child(2) {
  display: grid;
  gap: 4px;
  text-align: left;
  line-height: 1.15;
}

.recovery-vault-entry strong {
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

.recovery-vault-entry small {
  margin: 0;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.recovery-vault-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  font-size: 21px;
  opacity: 0.75;
}

.recovery-vault-entry.recovery-final,
.recovery-final .recovery-vault-modal {
  color: #c97b72;
  background: rgba(153, 72, 66, 0.11);
  border-color: rgba(184, 92, 82, 0.42);
}

.recovery-vault-modal {
  position: relative;
  width: 640px;
  max-width: 94%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px;
  color: var(--text-main);
  background: var(--card-bg);
  border: 1px solid rgba(217, 119, 6, 0.42);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(4, 8, 18, 0.26);
}

.recovery-vault-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #f59e0b, #f7c45f 55%, transparent);
  pointer-events: none;
}

.recovery-close {
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-glass-light);
}

.recovery-vault-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 24px;
  margin-bottom: 20px;
}

.recovery-vault-header h2 {
  margin: 0 0 5px;
  color: var(--text-main);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.recovery-vault-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  max-width: 54ch;
  text-wrap: pretty;
}

.recovery-vault-heading {
  min-width: 0;
}

.recovery-vault-label {
  display: block;
  margin-bottom: 5px;
  color: #e19a34;
  font-size: 11px;
  font-weight: 700;
}

.recovery-clock {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #f59e0b;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03));
  border: 1px solid rgba(245, 158, 11, 0.36);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.12);
}

.recovery-final .recovery-clock {
  color: #c97b72;
  background: rgba(153, 72, 66, 0.08);
  border-color: rgba(184, 92, 82, 0.4);
  box-shadow: none;
}

.recovery-clock strong {
  font-size: 24px;
  line-height: 1;
}

.recovery-clock span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.recovery-vault-assurance {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  color: var(--text-muted);
  background: rgba(245, 158, 11, 0.07);
  border-radius: 10px;
}

.recovery-vault-assurance > span {
  color: #f59e0b;
}

.recovery-vault-assurance p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.recovery-vault-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
}

.recovery-project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-glass-light);
}

.recovery-project-card > div {
  display: grid;
  gap: 4px;
}

.recovery-project-card strong {
  color: var(--text-main);
  font-size: 13px;
}

.recovery-project-card small,
.recovery-project-card > span {
  color: var(--text-muted);
  font-size: 10.5px;
}

.recovery-vault-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.recovery-vault-actions .btn {
  min-height: 40px;
  padding-inline: 18px;
}

.billing-recovery-dev-tools {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass-light);
}

.dev-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.dev-scenario-grid .btn {
  padding: 7px 8px;
  font-size: 10px;
}

.billing-grace-gentle {
  border-color: rgba(23, 166, 228, 0.26) !important;
  background: rgba(23, 166, 228, 0.065) !important;
}

.billing-read-only-banner {
  border-color: rgba(217, 119, 6, 0.3) !important;
  background: rgba(217, 119, 6, 0.07) !important;
}

.billing-banner {
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(3, 6, 14, 0.08);
}

.billing-banner .banner-text {
  display: grid;
  gap: 2px;
}

.billing-banner .banner-text strong {
  color: var(--text-main);
  font-size: 12.5px;
  line-height: 1.3;
}

.billing-grace-remaining {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 7px;
  color: #dc5f5f;
  background: rgba(220, 95, 95, 0.09);
  border: 1px solid rgba(220, 95, 95, 0.24);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="light"] .billing-grace-remaining {
  color: #b83f46;
  background: rgba(184, 63, 70, 0.07);
  border-color: rgba(184, 63, 70, 0.22);
}

.billing-banner .banner-text span {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.billing-banner .banner-text .billing-grace-remaining {
  color: #dc5f5f;
  font-size: 10px;
  line-height: 1.2;
}

.billing-banner .banner-btn {
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.billing-banner .banner-actions {
  align-items: center;
  gap: 8px;
}

.billing-banner .banner-btn.primary {
  color: #ffffff;
  background: var(--purple-grad);
  border: none;
  box-shadow: 0 4px 8px rgba(23, 166, 228, 0.22);
}

.billing-banner .banner-btn.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 5px 8px rgba(23, 166, 228, 0.28);
}

.billing-banner .banner-btn.secondary {
  color: var(--primary-light);
  background: rgba(23, 166, 228, 0.07);
  border: 1px solid rgba(23, 166, 228, 0.24);
  box-shadow: none;
}

[data-theme="light"] .billing-banner .banner-btn.secondary {
  color: var(--primary-dark);
  background: rgba(23, 166, 228, 0.055);
  border-color: rgba(11, 122, 168, 0.22);
}

.billing-banner .banner-btn.secondary:hover {
  color: var(--text-main);
  background: rgba(23, 166, 228, 0.12);
  border-color: rgba(23, 166, 228, 0.38);
  transform: translateY(-1px);
}

.billing-banner-dismiss {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.billing-banner-dismiss:hover {
  color: var(--text-main);
  background: rgba(217, 119, 6, 0.09);
  border-color: rgba(217, 119, 6, 0.2);
}

.billing-banner-dismiss:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.72);
  outline-offset: 2px;
}

.billing-banner.billing-banner-attention {
  animation: billing-banner-attention 2.1s ease both;
}

@keyframes billing-banner-attention {
  0%, 100% {
    box-shadow: var(--shadow-main);
  }
  18%, 58% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 16px 38px rgba(245, 158, 11, 0.18);
  }
}

.auriem-read-only [contenteditable="true"] {
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .customer-data-card {
    margin: 14px 0;
    padding: 14px;
  }

  .dev-scenario-grid {
    grid-template-columns: 1fr;
  }

  .recovery-vault-entry {
    width: 100%;
    margin: 10px 0;
  }

  .recovery-vault-header {
    align-items: flex-start;
    gap: 12px;
  }

  .recovery-vault-modal {
    width: calc(100% - 24px);
    max-width: none;
    padding: 22px 18px 18px;
  }

  .recovery-clock {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .recovery-vault-actions {
    flex-direction: column;
  }

  .customer-import-modal {
    padding: 22px 18px 18px;
  }

  .customer-import-modes {
    grid-template-columns: 1fr;
  }

  .customer-import-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recovery-vault-entry,
  .billing-banner,
  .billing-banner .banner-warning-svg,
  .customer-import-modes button {
    animation: none !important;
    transition: none !important;
  }
}

.custom-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: pointer;
}

.custom-toggle-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s ease, font-weight 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

.custom-toggle-label.active {
  color: var(--text-main);
  font-weight: 800;
}

.custom-toggle-track {
  position: relative;
  width: 56px;
  height: 28px;
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  padding: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

:root[data-theme="light"] .custom-toggle-track {
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid rgba(2, 132, 199, 0.35);
}

.custom-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-toggle-knob img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.custom-toggle-switch.pomo-active .custom-toggle-knob {
  transform: translateX(28px);
}

#task-detail-priority-select-custom-wrapper,
#task-detail-status-select-custom-wrapper {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 38px !important;
  display: block !important;
}

#task-detail-priority-select-custom-wrapper .custom-select-trigger,
#task-detail-status-select-custom-wrapper .custom-select-trigger,
#task-detail-due-input {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-glass-light) !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: normal !important;
}

:root[data-theme="light"] #task-detail-priority-select-custom-wrapper .custom-select-trigger,
:root[data-theme="light"] #task-detail-status-select-custom-wrapper .custom-select-trigger,
:root[data-theme="light"] #task-detail-due-input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--text-main) !important;
}

/* Position date picker icon to far right side */
#task-detail-due-input {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#task-detail-due-input::-webkit-datetime-edit {
  flex: 1 1 auto !important;
  width: 100% !important;
  display: inline-flex !important;
}

#task-detail-due-input::-webkit-calendar-picker-indicator {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  cursor: pointer !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

#task-detail-due-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ==========================================================================
   Desktop Sidebar — expanded by default, compact on demand
   ========================================================================== */
.sidebar-brand {
  position: relative;
  top: 8px;
}

.brand-name,
.sidebar-nav .nav-btn > span,
.sidebar-mascot .mascot-text,
.sidebar-mascot .mascot-rpg-hud,
.sidebar-profile .profile-info {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--sidebar-content-duration, 140ms) ease-out,
    translate var(--sidebar-motion-duration, 260ms) var(--sidebar-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    display var(--sidebar-content-duration, 140ms) ease-out;
  transition-behavior: allow-discrete;
}

@starting-style {
  html[data-sidebar-ready]:not([data-sidebar-state="collapsed"]) :is(
    .brand-name,
    .sidebar-nav .nav-btn > span,
    .sidebar-mascot .mascot-text,
    .sidebar-mascot .mascot-rpg-hud,
    .sidebar-profile .profile-info
  ) {
    opacity: 0;
    translate: -6px 0;
  }
}

.sidebar-logo-toggle {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateX(-50%);
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.sidebar-logo-toggle:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
}

.sidebar-toggle {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle:hover {
  color: var(--text-main);
}

.sidebar-toggle:active {
  transform: scale(0.96);
}

.sidebar-toggle:focus-visible,
.sidebar-profile:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
}

html[data-sidebar-state="collapsed"] .app-container,
.app-container[data-sidebar-state="collapsed"] {
  --sidebar-motion-duration: var(--sidebar-collapse-duration, 220ms);
  --sidebar-content-duration: 90ms;
  grid-template-columns: 82px minmax(0, 1fr);
}

html[data-sidebar-state="collapsed"] :is(
  .brand-name,
  .sidebar-nav .nav-btn > span,
  .sidebar-mascot .mascot-text,
  .sidebar-mascot .mascot-rpg-hud,
  .sidebar-profile .profile-info
),
.app-container[data-sidebar-state="collapsed"] :is(
  .brand-name,
  .sidebar-nav .nav-btn > span,
  .sidebar-mascot .mascot-text,
  .sidebar-mascot .mascot-rpg-hud,
  .sidebar-profile .profile-info
) {
  opacity: 0;
  translate: -6px 0;
}

html[data-sidebar-state="collapsed"] .sidebar,
.app-container[data-sidebar-state="collapsed"] .sidebar {
  z-index: 20;
  padding-inline: 10px;
  overflow: visible;
}

html[data-sidebar-state="collapsed"] .sidebar-brand,
.app-container[data-sidebar-state="collapsed"] .sidebar-brand {
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-left: 0;
}

html[data-sidebar-state="collapsed"] .brand-name,
.app-container[data-sidebar-state="collapsed"] .brand-name {
  display: none;
}

html[data-sidebar-state="collapsed"] .sidebar-logo-toggle,
.app-container[data-sidebar-state="collapsed"] .sidebar-logo-toggle {
  display: block;
}

html[data-sidebar-state="collapsed"] .sidebar-toggle,
.app-container[data-sidebar-state="collapsed"] .sidebar-toggle {
  display: none;
}

html[data-sidebar-state="collapsed"] .sidebar-nav,
.app-container[data-sidebar-state="collapsed"] .sidebar-nav {
  gap: var(--space-xs);
}

html[data-sidebar-state="collapsed"] .nav-btn,
.app-container[data-sidebar-state="collapsed"] .nav-btn {
  justify-content: center;
  gap: 0;
  min-height: 44px;
  padding: var(--space-sm) 0 12px;
  overflow: visible;
  transform: none;
}

html[data-sidebar-state="collapsed"] .nav-btn.active,
.app-container[data-sidebar-state="collapsed"] .nav-btn.active {
  min-height: 46px;
}

html[data-sidebar-state="collapsed"] .nav-btn:hover,
.app-container[data-sidebar-state="collapsed"] .nav-btn:hover {
  transform: none;
}

html[data-sidebar-state="collapsed"] .nav-btn span,
.app-container[data-sidebar-state="collapsed"] .nav-btn span {
  display: none;
}

html[data-sidebar-state="collapsed"] .nav-btn .shortcut-hint,
.app-container[data-sidebar-state="collapsed"] .nav-btn .shortcut-hint,
.compact-sidebar-rail .nav-btn .shortcut-hint {
  display: none;
}

html[data-sidebar-state="collapsed"] .nav-btn::after,
.app-container[data-sidebar-state="collapsed"] .nav-btn::after {
  content: attr(data-nav-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 30;
  padding: 7px 10px;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-glass);
  border-radius: 9px;
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

html[data-sidebar-state="collapsed"] .nav-btn:hover::after,
html[data-sidebar-state="collapsed"] .nav-btn:focus-visible::after,
.app-container[data-sidebar-state="collapsed"] .nav-btn:hover::after,
.app-container[data-sidebar-state="collapsed"] .nav-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

html[data-sidebar-state="collapsed"] .sidebar-mascot,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot {
  min-width: 0;
  width: 100%;
  padding: 10px 0 12px;
  gap: 12px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-sidebar-state="collapsed"] .mascot-avatar-stage,
.app-container[data-sidebar-state="collapsed"] .mascot-avatar-stage {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-bottom: 0;
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar.water-reminder),
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar.water-reminder) {
  padding-top: 10px;
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar.water-reminder)::before,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar.water-reminder)::before,
html[data-sidebar-state="collapsed"] .sidebar-mascot .mascot-rpg-hud,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot .mascot-rpg-hud {
  display: none;
}

html[data-sidebar-state="collapsed"] .mascot-avatar.water-reminder,
.app-container[data-sidebar-state="collapsed"] .mascot-avatar.water-reminder {
  position: absolute;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 44px;
  height: 44px;
  margin: 0;
  transform: translate(-50%, 0) !important;
  overflow: visible;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: auto;
  cursor: pointer;
}

html[data-sidebar-state="collapsed"] .sidebar-mascot .mascot-text,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot .mascot-text {
  display: block;
  position: absolute;
  top: 32px;
  left: calc(100% + 12px);
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  margin: 0;
  color: var(--text-main);
  text-align: left;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  box-shadow: var(--shadow-main);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  translate: -6px -50%;
}

html[data-sidebar-state="collapsed"] .mascot-avatar.water-reminder .mascot-3d-img,
.app-container[data-sidebar-state="collapsed"] .mascot-avatar.water-reminder .mascot-3d-img {
  object-fit: cover;
  -webkit-mask-image: none;
  mask-image: none;
  transform: translateY(-1px) scale(1.22);
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-text,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-text,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-text,
html[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-text,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-text,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-text,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-text,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-text {
  display: block;
  position: absolute;
  top: 32px;
  left: calc(100% + 12px);
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  margin: 0;
  color: var(--text-main);
  text-align: left;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  box-shadow: var(--shadow-main);
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  translate: 0 -50%;
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-text::before,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-text::before,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-text::before,
html[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-text::before,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-text::before,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-text::before,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-text::before,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--bg-card-solid);
  border-left: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  transform: translateY(-50%) rotate(45deg);
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-name,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-name,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-name,
html[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-name,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-name,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-name,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-name,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-name {
  display: none;
}

html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-bubble,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-bubble,
html[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-bubble,
html[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-bubble,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:hover) .mascot-bubble,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-text:hover) .mascot-bubble,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot:has(.mascot-avatar:focus-visible) .mascot-bubble,
.app-container[data-sidebar-state="collapsed"] .sidebar-mascot.collapsed-dialogue-open .mascot-bubble {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

html[data-sidebar-state="collapsed"] .sidebar-profile,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile {
  position: relative;
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  background: transparent;
}

html[data-sidebar-state="collapsed"] .sidebar-level-progress,
.app-container[data-sidebar-state="collapsed"] .sidebar-level-progress {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  overflow: visible;
}

html[data-sidebar-state="collapsed"] .sidebar-profile .profile-avatar-container,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile .profile-avatar-container {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
}

html[data-sidebar-state="collapsed"] .sidebar-level-progress .profile-level-value,
.app-container[data-sidebar-state="collapsed"] .sidebar-level-progress .profile-level-value {
  display: grid;
}

html[data-sidebar-state="collapsed"] .sidebar-profile:hover,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile:hover {
  background: var(--bg-glass);
}

html[data-sidebar-state="collapsed"] .sidebar-profile .profile-info,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile .profile-info {
  display: none !important;
  width: 0;
  min-width: 0;
}

html[data-sidebar-state="collapsed"] .sidebar-profile::after,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile::after {
  content: attr(data-nav-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 30;
  padding: 7px 10px;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-glass);
  border-radius: 9px;
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

html[data-sidebar-state="collapsed"] .sidebar-profile:hover::after,
html[data-sidebar-state="collapsed"] .sidebar-profile:focus-visible::after,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile:hover::after,
.app-container[data-sidebar-state="collapsed"] .sidebar-profile:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .app-container,
  .sidebar-mascot,
  .mascot-avatar-stage,
  .mascot-avatar.water-reminder,
  .mascot-avatar.water-reminder .mascot-3d-img,
  .sidebar-logo-toggle,
  .sidebar-toggle,
  .brand-name,
  .sidebar-nav .nav-btn > span,
  .sidebar-mascot .mascot-text,
  .sidebar-mascot .mascot-rpg-hud,
  .sidebar-profile .profile-info,
  html[data-sidebar-state="collapsed"] .nav-btn::after,
  .app-container[data-sidebar-state="collapsed"] .nav-btn::after,
  html[data-sidebar-state="collapsed"] .profile-level-ring-progress,
  .app-container[data-sidebar-state="collapsed"] .profile-level-ring-progress,
  html[data-sidebar-state="collapsed"] .sidebar-profile::after,
  .app-container[data-sidebar-state="collapsed"] .sidebar-profile::after {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-sidebar-state="collapsed"] .nav-btn::after,
  .app-container[data-sidebar-state="collapsed"] .nav-btn::after,
  html[data-sidebar-state="collapsed"] .sidebar-profile::after,
  .app-container[data-sidebar-state="collapsed"] .sidebar-profile::after {
    background: var(--bg-app);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Compact desktop windows: use the real window size instead of the
   full-screen zoom compensation used by the maximized shell. */
@media (max-width: 1180px) {
  html,
  body {
    /* Restored Chrome app windows can report collapsed dynamic viewport
       units. Percent sizing follows the real containing block instead. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  body {
    zoom: 1;
  }

  .app-container {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #backdrop-container {
    inset: 0;
    width: auto;
    height: auto;
  }

  .main-content {
    padding: clamp(18px, 3vw, 28px);
  }

  .header {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .header-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .digital-clock-container {
    font-size: 16px !important;
    margin-right: 0 !important;
  }

  .dashboard-focus-row,
  .analytics-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the wide desktop header balanced after the clock joins the welcome
   group in the DOM. */
@media (min-width: 1181px) {
  .app-container:not([data-sidebar-state="collapsed"]) {
    grid-template-columns: 234px minmax(0, 1fr);
  }

  .app-container:not([data-sidebar-state="collapsed"]) .sidebar,
  html[data-sidebar-state="collapsed"] .sidebar,
  .app-container[data-sidebar-state="collapsed"] .sidebar {
    width: calc(100% / 0.9);
    height: calc(100% / 0.9);
    transform: scale(0.9);
    transform-origin: top left;
  }

  /* Match the backup's normal desktop sizing without scaling the sidebar.
     Restored windows remain at full scale below 1181px. */
  .main-content {
    zoom: 0.9;
  }

  .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-lg);
  }

  .header-welcome {
    display: contents;
  }

  .header-welcome h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .header-welcome p {
    grid-column: 1;
    grid-row: 2;
  }

  .header-welcome .digital-clock-container {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-right: 0;
  }

  .header-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
  }
}

/* Keep the compact desktop header in one visual row without letting a long
   greeting displace its controls. */
@media (min-width: 720px) and (max-width: 1180px) {
  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .metric-card {
    padding: var(--space-md);
  }

  .metric-title {
    font-size: 13px;
  }

  .metric-body {
    gap: 8px;
  }

  .metric-info-text {
    min-width: 0;
  }

  .metric-sparkline-container {
    width: clamp(56px, 7vw, 78px);
    min-width: 56px;
    height: 40px;
  }

  .metric-sparkline-container > svg {
    width: 100% !important;
    height: 40px !important;
  }

  .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 14px;
  }

  .header-welcome {
    display: contents;
    min-width: 0;
  }

  .header-welcome h1 {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .header-welcome .digital-clock-container {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .header-welcome p {
    grid-column: 1;
    grid-row: 3;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    min-width: max-content;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .header-actions > * {
    flex: 0 0 auto;
  }

  .digital-clock-container {
    min-width: 0;
  }

  #header-location {
    min-width: 0;
    max-width: clamp(56px, 12vw, 112px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .streak-badge {
    white-space: nowrap;
  }
}

/* When the desktop sidebar is hidden, remove its persisted collapsed track
   as well so compact windows give the main content the full width. */
@media (max-width: 1180px) {
  .app-container,
  html[data-sidebar-state="collapsed"] .app-container,
  .app-container[data-sidebar-state="collapsed"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Restored desktop windows keep the full navigation available in a small,
   movable rail without changing the wide desktop or mobile sidebar. */
.compact-sidebar-grip,
.compact-sidebar-collapse,
.compact-sidebar-reveal {
  display: none;
}

@media (min-width: 720px) and (max-width: 1180px) {
  .compact-sidebar-rail {
    position: fixed;
    left: var(--compact-sidebar-left, 5px);
    top: var(--compact-sidebar-top, clamp(220px, 31vh, 320px));
    z-index: 1200;
    width: 52px;
    height: min(420px, calc(100vh - 160px));
    min-height: 326px;
    box-sizing: border-box;
    padding: 8px 5px 10px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow: visible;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    box-shadow: var(--shadow-main), var(--glass-highlight);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  /* A previously collapsed wide-sidebar preference must not move this
     restored-window rail behind the main surface or change its inset. */
  html[data-sidebar-state] .compact-sidebar-rail,
  .app-container[data-sidebar-state] .compact-sidebar-rail {
    z-index: 1200;
    padding: 8px 5px 10px;
  }

  .compact-sidebar-rail .sidebar-brand,
  .compact-sidebar-rail .sidebar-mascot {
    display: none !important;
  }

  .compact-sidebar-rail .compact-sidebar-grip {
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 100%;
    height: 18px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: grab;
    touch-action: none;
  }

  .compact-sidebar-rail .compact-sidebar-grip:active,
  .compact-sidebar-rail.is-dragging .compact-sidebar-grip {
    cursor: grabbing;
  }

  .compact-sidebar-rail .compact-sidebar-collapse,
  .compact-sidebar-rail .compact-sidebar-reveal {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 100%;
    height: 30px;
    margin: 2px 0 0;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }

  .compact-sidebar-rail .compact-sidebar-reveal {
    display: none;
  }

  .compact-sidebar-collapse:hover,
  .compact-sidebar-reveal:hover {
    color: var(--text-main);
    background: var(--bg-glass);
  }

  .compact-sidebar-collapse:focus-visible,
  .compact-sidebar-reveal:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
  }

  .compact-sidebar-collapse svg,
  .compact-sidebar-reveal svg {
    width: 17px;
    height: 17px;
    transition: transform 140ms ease;
  }

  .compact-sidebar-rail[data-compact-sidebar-edge="right"] .compact-sidebar-collapse svg,
  .compact-sidebar-rail[data-compact-sidebar-edge="right"] .compact-sidebar-reveal svg {
    transform: rotate(180deg);
  }

  .compact-sidebar-grip svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  .compact-sidebar-grip:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
  }

  .compact-sidebar-rail .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
    overflow: visible;
    justify-content: space-between;
  }

  .compact-sidebar-rail .nav-btn {
    flex: 0 0 38px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 0;
    justify-content: center;
    gap: 0;
    overflow: visible;
    transform: none;
  }

  .compact-sidebar-rail .nav-btn span {
    display: none;
  }

  .compact-sidebar-rail .nav-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .compact-sidebar-rail .nav-btn::after {
    content: attr(data-nav-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 30;
    padding: 7px 10px;
    color: var(--text-main);
    background: var(--bg-sidebar);
    border: 1px solid var(--border-glass);
    border-radius: 9px;
    box-shadow: var(--shadow-main);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .compact-sidebar-rail .nav-btn:hover::after,
  .compact-sidebar-rail .nav-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .compact-sidebar-rail.is-dragging {
    user-select: none;
  }

  .compact-sidebar-rail.is-retracted {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 180ms ease;
  }

  .compact-sidebar-rail.is-retracted[data-compact-sidebar-edge="left"] {
    transform: translateX(calc(-100% + 28px));
  }

  .compact-sidebar-rail.is-retracted[data-compact-sidebar-edge="right"] {
    transform: translateX(calc(100% - 28px));
  }

  .compact-sidebar-rail.is-retracted .compact-sidebar-grip,
  .compact-sidebar-rail.is-retracted .sidebar-nav,
  .compact-sidebar-rail.is-retracted .compact-sidebar-collapse {
    display: none !important;
  }

  .compact-sidebar-rail.is-retracted .compact-sidebar-reveal {
    position: absolute;
    bottom: 10px;
    display: grid;
    width: 28px;
    height: 32px;
    margin: 0;
    color: var(--text-muted);
    background: var(--bg-sidebar);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    box-shadow: var(--shadow-main);
  }

  .compact-sidebar-rail.is-retracted[data-compact-sidebar-edge="left"] .compact-sidebar-reveal {
    right: 0;
  }

  .compact-sidebar-rail.is-retracted[data-compact-sidebar-edge="right"] .compact-sidebar-reveal {
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-sidebar-rail,
  .compact-sidebar-rail .nav-btn::after,
  .compact-sidebar-collapse svg,
  .compact-sidebar-reveal svg,
  #tab-kanban .kanban-card {
    transition: none;
  }

  #tab-kanban .kanban-card:hover {
    transform: none;
  }
}

/* Restored Kanban windows keep all four stages visible while reducing the
   card chrome and content-based minimum widths that otherwise cause overflow. */
@media (min-width: 720px) and (max-width: 1180px) {
  #tab-kanban {
    min-width: 0;
  }

  #tab-kanban .tab-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
    margin-bottom: 14px;
  }

  #tab-kanban .tab-header-row > div:first-child {
    min-width: 0;
  }

  #tab-kanban .panel-main-title {
    font-size: 22px;
  }

  #tab-kanban .panel-subtitle {
    max-width: 260px;
    font-size: 12px;
    line-height: 1.35;
  }

  #tab-kanban .kanban-filters {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
  }

  #tab-kanban .kanban-search-toggle {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    padding: 7px;
  }

  #tab-kanban .kanban-search-field.is-open {
    width: 148px;
    max-width: 148px;
  }

  #tab-kanban .kanban-search-input {
    flex: 0 0 148px;
    width: 148px;
    padding: 8px 9px;
    font-size: 11px;
  }

  #tab-kanban #kanban-project-filter-custom-wrapper {
    width: 112px;
    min-width: 112px;
  }

  #tab-kanban #kanban-project-filter-custom-wrapper .custom-select-trigger {
    min-height: 34px;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #tab-kanban .kanban-filters > #btn-open-vault,
  #tab-kanban .kanban-filters > #btn-kanban-add-task {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 !important;
    gap: 0;
  }

  #tab-kanban .kanban-filters > #btn-open-vault span,
  #tab-kanban .kanban-filters > #btn-kanban-add-task span {
    display: none;
  }

  #tab-kanban .kanban-filters > #btn-open-vault .shortcut-hint,
  #tab-kanban .kanban-filters > #btn-kanban-add-task .shortcut-hint {
    display: none;
  }

  #tab-kanban .kanban-filters > #btn-open-vault svg,
  #tab-kanban .kanban-filters > #btn-kanban-add-task svg {
    width: 15px;
    height: 15px;
  }

  #tab-kanban .kanban-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin-top: 0;
  }

  #tab-kanban .kanban-column {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #tab-kanban .column-header {
    margin-bottom: 8px;
  }

  #tab-kanban .column-title {
    min-width: 0;
    gap: 6px;
  }

  #tab-kanban .column-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
  }

  #tab-kanban .column-title h3 {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tab-kanban .column-count {
    flex: 0 0 auto;
    padding: 2px 6px;
    font-size: 10px;
  }

  #tab-kanban .kanban-quick-add {
    margin: 0 0 8px !important;
  }

  #tab-kanban #kanban-todo-quick-add-btn {
    gap: 4px !important;
    padding: 6px 4px !important;
    border-width: 1px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #tab-kanban .kanban-cards {
    gap: 6px;
    padding: 4px 2px 10px;
    margin: -4px -2px 0;
  }

  #tab-kanban .kanban-card {
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(40, 33, 24, 0.06);
  }

  #tab-kanban .kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-main);
  }

  #tab-kanban .card-project-pill {
    max-width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tab-kanban .kanban-card h4 {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #tab-kanban .card-checklist-summary {
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
  }

  #tab-kanban .progress-mini-bar {
    width: clamp(28px, 40%, 58px);
    min-width: 28px;
    height: 3px;
  }

  #tab-kanban .card-footer {
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 7px;
    font-size: 10px;
  }

  #tab-kanban .card-due {
    flex: 1 1 52px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tab-kanban .card-actions {
    flex: 0 0 auto;
    gap: 1px;
  }

  #tab-kanban .card-action-btn {
    width: 24px;
    height: 24px;
    padding: 3px;
  }

  #tab-kanban .card-action-btn svg {
    width: 12px;
    height: 12px;
  }

  #tab-kanban .kanban-empty-placeholder {
    margin: 4px 0 !important;
    padding: 14px 6px !important;
  }
}

@media (max-width: 600px) {
  .main-content {
    padding: 18px 14px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 860px) {
  #auth-portal-overlay .modal-box.auth-day-split-card {
    background-image: none !important;
  }

  #auth-portal-overlay .auth-day-right-panel {
    background: #ffffff !important;
  }
}

/* --- Personal quote library customizer --- */
.quote-settings-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-glass-light);
}

.quote-settings-action h4,
.quote-customizer-time-card h4,
.quote-customizer-list-heading h4,
.quote-customizer-add h4 {
  margin: 0 0 4px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 750;
}

.quote-settings-action p,
.quote-customizer-time-card p,
.quote-customizer-list-heading p,
.quote-customizer-add p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.quote-customizer-overlay {
  z-index: 1200;
}

.quote-customizer-modal {
  width: min(760px, 94vw);
  max-width: 760px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
  background: var(--bg-card);
}

.quote-customizer-modal .modal-header {
  margin-bottom: 0;
}

.quote-customizer-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.quote-customizer-header h3 {
  margin: 0 0 5px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.quote-customizer-lede {
  max-width: 520px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.quote-customizer-time-card,
.quote-customizer-add {
  border: 1px solid var(--border-glass-light);
  border-radius: 14px;
  background: var(--bg-glass);
}

.quote-customizer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

#quote-customizer-countdown {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quote-customizer-time-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  padding: 14px;
}

.quote-customizer-time-control {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

#quote-rotation-seconds {
  width: 92px;
  height: 34px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid var(--border-glass);
  border-radius: 9px;
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
  text-align: right;
}

#quote-rotation-seconds.is-locked {
  opacity: 0.7;
}

.quote-customizer-pro-action.is-locked {
  position: relative;
  opacity: 0.78;
}

.quote-customizer-pro-action.is-locked::after {
  content: "PRO";
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  padding: 1px 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  opacity: 0.82;
}

#quote-rotation-seconds:focus,
.quote-customizer-field input:focus,
.quote-customizer-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 1px;
}

.quote-customizer-time-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.quote-customizer-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#quote-customizer-visible-count {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.quote-customizer-list {
  display: flex;
  min-height: 100px;
  max-height: 270px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
}

.quote-customizer-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-glass-light);
  border-radius: 12px;
  background: var(--bg-surface);
  transition: opacity 160ms ease, border-color 160ms ease;
}

.quote-customizer-row.is-current {
  border-color: var(--primary);
  background: rgba(23, 166, 228, 0.08);
  box-shadow: 0 0 0 1px rgba(23, 166, 228, 0.12);
}

.quote-customizer-row.is-disabled {
  opacity: 0.56;
}

.quote-customizer-toggle {
  margin-top: 3px;
  transform: scale(0.82);
  transform-origin: top left;
}

.quote-customizer-copy {
  min-width: 0;
}

.quote-customizer-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.quote-customizer-badge {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.quote-customizer-current-badge {
  padding: 2px 5px;
  border: 1px solid rgba(23, 166, 228, 0.22);
  border-radius: 999px;
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.quote-customizer-row-text {
  margin: 0;
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.42;
}

.quote-customizer-row-author {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
}

.quote-customizer-row-actions {
  min-width: 28px;
  text-align: right;
}

.quote-customizer-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.quote-customizer-delete svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-customizer-delete:hover,
.quote-customizer-delete:focus-visible {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.quote-customizer-delete:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 2px;
}

.quote-customizer-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.quote-customizer-add-heading {
  justify-content: flex-start;
}

.quote-customizer-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.quote-customizer-field em {
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.quote-customizer-field input,
.quote-customizer-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-glass);
  border-radius: 9px;
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}

.quote-customizer-field input::placeholder,
.quote-customizer-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.52;
}

.quote-customizer-field input {
  height: 34px;
  padding: 7px 9px;
}

.quote-customizer-field textarea {
  min-height: 70px;
  padding: 8px 9px;
  resize: vertical;
}

.quote-customizer-add-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

@media (max-width: 600px) {
  .quote-settings-action,
  .quote-customizer-summary,
  .quote-customizer-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-settings-action .btn {
    width: 100%;
  }

  .quote-customizer-modal {
    max-height: 92vh;
    padding: 18px;
  }

  .quote-customizer-time-card,
  .quote-customizer-add-footer {
    grid-template-columns: 1fr;
  }

  .quote-customizer-time-control {
    justify-content: space-between;
  }

  .quote-customizer-time-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-customizer-time-footer .btn,
  .quote-customizer-add-footer .btn {
    width: 100%;
  }

  .quote-customizer-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quote-customizer-row-actions {
    grid-column: 2;
    min-width: 0;
    text-align: right;
  }
}

/* Desktop developer access stays quiet until the server-backed session gate
   opens it. The dialog keeps native modal, Escape, and focus behavior. */
.developer-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-main);
  font-size: 11px;
}

.developer-preview-banner[hidden],
.developer-unlock-dialog[hidden] {
  display: none;
}

.developer-tools-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border-glass-light);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card-solid) 70%, transparent);
}

.developer-tools-toolbar-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.developer-unlock-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  position: fixed;
  inset: 0;
  height: fit-content;
  max-height: calc(100vh - 32px);
  margin: auto;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--bg-card-solid);
  color: var(--text-main);
  box-shadow: var(--shadow-main);
}

.developer-unlock-dialog::backdrop {
  background: rgba(3, 4, 6, 0.72);
}

.developer-unlock-dialog form {
  display: grid;
  gap: 12px;
}

.developer-unlock-dialog h2,
.developer-unlock-dialog p {
  margin: 0;
}

.developer-dialog-eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.developer-unlock-dialog h2 {
  font-size: 18px;
  line-height: 1.2;
}

.developer-unlock-dialog #developer-unlock-description {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.developer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.developer-dialog-actions button:focus-visible,
.developer-preview-banner button:focus-visible,
.developer-tools-toolbar button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 2px;
}

.developer-effect-note {
  display: block;
  margin: 4px 0 10px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .developer-preview-banner,
  .developer-unlock-dialog,
  .developer-unlock-dialog * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 600px) {
  .developer-tools-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}