:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' 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");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' 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");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' 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");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' 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");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' 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");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' 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");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Google Sign-In Container */
.google-login {
  margin: var(--space-16) 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Google Sign-In Button - Sleek & Elegant Design */
.btn--google {
  background: linear-gradient(135deg, 
    #f8f9fa, 
    #e9ecef);
  color: #495057;
  border: 1px solid #dee2e6;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  gap: var(--space-12);
  padding: var(--space-12) var(--space-20);
  border-radius: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 200px;
  margin: 0 auto;
  font-size: var(--font-size-sm);
}

.btn--google::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.8), 
    transparent);
  transition: left 0.4s;
}

.btn--google svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.btn--google span {
  position: relative;
  z-index: 1;
}

.btn--google:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.05);
  border-color: #ced4da;
}

.btn--google:hover::before {
  left: 100%;
}

.btn--google:hover svg {
  transform: scale(1.05);
}

.btn--google:active {
  transform: translateY(0);
  box-shadow: 
    0 1px 4px rgba(0, 0, 0, 0.08),
    0 0.5px 2px rgba(0, 0, 0, 0.05);
}

.btn--google:disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Enhanced Primary Button - Sleek & Elegant */
.btn--primary {
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-primary-hover));
  color: white;
  border: none;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: var(--space-16) var(--space-24);
  border-radius: 28px;
  font-weight: 500;
  letter-spacing: 0.01em;
  width: auto;
  min-width: 220px;
  margin: 0 auto;
  display: block;
  font-size: var(--font-size-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.5s;
}

.btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--primary:hover::before {
  left: 100%;
}

.btn--primary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Enhanced Secondary Button - Sleek & Elegant */
.btn--secondary {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.08));
  color: var(--theme-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: var(--space-16) var(--space-24);
  border-radius: 28px;
  font-weight: 500;
  letter-spacing: 0.01em;
  width: auto;
  min-width: 220px;
  margin: 0 auto;
  display: block;
  font-size: var(--font-size-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent);
  transition: left 0.5s;
}

.btn--secondary:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--secondary:hover::before {
  left: 100%;
}

.btn--secondary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Enhanced Active State for Theme Selection */
.theme-option.active {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.15));
  border: 1px solid var(--theme-primary);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-option.active::after {
  content: '✓';
  position: absolute;
  right: var(--space-16);
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-primary);
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.theme-option.active .theme-preview {
  box-shadow: 0 0 0 3px var(--theme-primary);
  transform: scale(1.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Divider for login forms - Centered */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-16) 0;
  color: var(--color-text-secondary);
  position: relative;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.divider::before {
  margin-right: var(--space-12);
}

.divider::after {
  margin-left: var(--space-12);
}

.divider span {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 var(--space-8);
  background: transparent;
  position: relative;
  z-index: 1;
  color: var(--color-text-secondary);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-16) var(--space-20);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* --- FIXED CODE START --- */
  /* Combine both the SVG caret and the gradient into a single background property */
  background:
    /* Layer 1: SVG caret */
    var(--select-caret-light) no-repeat right var(--space-16) center / 16px,
    /* Layer 2: Gradient background */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.08) 0%, 
      rgba(255, 255, 255, 0.03) 100%);
  /* --- FIXED CODE END --- */

  padding-right: var(--space-40);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-size: var(--font-size-base);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

select.form-control:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.2),
    inset 0 2px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
}

select.form-control:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  transform: translateY(-2px);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

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

:focus-visible {
  outline: none;
  outline-offset: 0;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* Custom Theme Variables */
:root {
  /* Light Theme (Default) - Eye-friendly colors */
  --theme-primary: #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-primary-active: #1d4ed8;
  --theme-background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --theme-surface: rgba(248, 250, 252, 0.9);
  --theme-surface-hover: rgba(241, 245, 249, 0.95);
  --theme-text: #1e293b;
  --theme-text-secondary: #64748b;
  --theme-border: rgba(148, 163, 184, 0.3);
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-accent: #06b6d4;
  
  /* Eye-friendly fullscreen overlay colors for light mode */
  --theme-overlay-background: rgba(241, 245, 249, 0.98);
  --theme-overlay-surface: rgba(248, 250, 252, 0.95);
  --theme-overlay-surface-hover: rgba(241, 245, 249, 0.98);
}

/* Theme Variations */
.theme-dark {
  --theme-primary: #00d9ff;
  --theme-primary-hover: #00c4ea;
  --theme-primary-active: #00b0d5;
  --theme-background: linear-gradient(135deg, #1a365d 0%, #2d1b69 50%, #553c9a 100%);
  --theme-surface: rgba(30, 41, 59, 0.8);
  --theme-surface-hover: rgba(30, 41, 59, 0.9);
  --theme-text: #f1f5f9;
  --theme-text-secondary: #94a3b8;
  --theme-border: rgba(148, 163, 184, 0.2);
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-accent: #38bdf8;
  
  /* Dark mode overlay colors */
  --theme-overlay-background: rgba(30, 41, 59, 0.95);
  --theme-overlay-surface: rgba(30, 41, 59, 0.9);
  --theme-overlay-surface-hover: rgba(51, 65, 85, 0.95);
}

.theme-ocean {
  --theme-primary: #0ea5e9;
  --theme-primary-hover: #0284c7;
  --theme-primary-active: #0369a1;
  --theme-background: linear-gradient(135deg, #0c4a6e 0%, #155e75 50%, #164e63 100%);
  --theme-surface: rgba(14, 165, 233, 0.15);
  --theme-surface-hover: rgba(14, 165, 233, 0.25);
  --theme-text: #f0f9ff;
  --theme-text-secondary: #7dd3fc;
  --theme-border: rgba(56, 189, 248, 0.3);
  --theme-shadow: rgba(14, 165, 233, 0.2);
  --theme-accent: #0284c7;
  
  /* Ocean theme overlay colors */
  --theme-overlay-background: rgba(12, 74, 110, 0.95);
  --theme-overlay-surface: rgba(14, 165, 233, 0.2);
  --theme-overlay-surface-hover: rgba(14, 165, 233, 0.3);
}

.theme-forest {
  --theme-primary: #10b981;
  --theme-primary-hover: #059669;
  --theme-primary-active: #047857;
  --theme-background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
  --theme-surface: rgba(16, 185, 129, 0.15);
  --theme-surface-hover: rgba(16, 185, 129, 0.25);
  --theme-text: #f0fdf4;
  --theme-text-secondary: #6ee7b7;
  --theme-border: rgba(52, 211, 153, 0.3);
  --theme-shadow: rgba(16, 185, 129, 0.2);
  --theme-accent: #059669;
  
  /* Forest theme overlay colors */
  --theme-overlay-background: rgba(6, 78, 59, 0.95);
  --theme-overlay-surface: rgba(16, 185, 129, 0.2);
  --theme-overlay-surface-hover: rgba(16, 185, 129, 0.3);
}

.theme-sunset {
  --theme-primary: #f59e0b;
  --theme-primary-hover: #d97706;
  --theme-primary-active: #b45309;
  --theme-background: linear-gradient(135deg, #92400e 0%, #b45309 50%, #d97706 100%);
  --theme-surface: rgba(245, 158, 11, 0.15);
  --theme-surface-hover: rgba(245, 158, 11, 0.25);
  --theme-text: #fffbeb;
  --theme-text-secondary: #fbbf24;
  --theme-border: rgba(251, 191, 36, 0.3);
  --theme-shadow: rgba(245, 158, 11, 0.2);
  --theme-accent: #d97706;
  
  /* Sunset theme overlay colors */
  --theme-overlay-background: rgba(146, 64, 14, 0.95);
  --theme-overlay-surface: rgba(245, 158, 11, 0.2);
  --theme-overlay-surface-hover: rgba(245, 158, 11, 0.3);
}

.theme-purple {
  --theme-primary: #8b5cf6;
  --theme-primary-hover: #7c3aed;
  --theme-primary-active: #6d28d9;
  --theme-background: linear-gradient(135deg, #581c87 0%, #6b21a8 50%, #7c3aed 100%);
  --theme-surface: rgba(139, 92, 246, 0.15);
  --theme-surface-hover: rgba(139, 92, 246, 0.25);
  --theme-text: #faf5ff;
  --theme-text-secondary: #c4b5fd;
  --theme-border: rgba(196, 181, 253, 0.3);
  --theme-shadow: rgba(139, 92, 246, 0.2);
  --theme-accent: #7c3aed;
  
  /* Purple theme overlay colors */
  --theme-overlay-background: rgba(88, 28, 135, 0.95);
  --theme-overlay-surface: rgba(139, 92, 246, 0.2);
  --theme-overlay-surface-hover: rgba(139, 92, 246, 0.3);
}

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

body {
  font-family: 'Inter', var(--font-family-base);
  background: var(--theme-background);
  color: var(--theme-text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-primary);
  border-radius: 10px;
  transition: background var(--duration-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary-hover);
}

/* Glassmorphism Base Classes */
.glass-effect {
  background: var(--theme-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px var(--theme-shadow);
}

.glass-card {
  background: var(--theme-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px var(--theme-shadow);
  transition: all var(--duration-normal) var(--ease-standard);
}

.glass-card:hover {
  background: var(--theme-surface-hover);
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.glass-modal {
  background: var(--theme-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* App Layout */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header - FIXED VISIBILITY */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--theme-border);
  width: 100%;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.logo-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-text);
  margin: 0;
}

.logo-icon {
  font-size: var(--font-size-3xl);
}

.logo-badge {
  background: var(--theme-primary);
  color: white;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Header Controls - FIXED TO BE VISIBLE */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
}

/* Hamburger Menu Button */
.hamburger-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 40px;
  height: 40px;
  background: var(--theme-surface);
  border: 2px solid var(--theme-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px;
  z-index: 200;
  position: relative;
  transition: all 0.3s ease;
}

.hamburger-menu-btn:hover {
  background: var(--theme-surface-hover);
  border-color: var(--theme-primary);
}

.hamburger-menu-btn.active {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

.hamburger-menu-btn.active .hamburger-line {
  background: white;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: var(--theme-text);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger-menu-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Button Styles with Neumorphism */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border: none;
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 70%, transparent 100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  opacity: 0;
}

.btn:active::before {
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.btn span {
  position: relative;
  z-index: 1;
}

.btn--primary {
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--theme-primary-hover) 0%, var(--theme-primary-active) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn--secondary {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: var(--theme-surface-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--theme-shadow);
}

.btn--outline {
  background: transparent;
  color: var(--theme-primary);
  border: 2px solid var(--theme-primary);
}

.btn--outline:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateY(-1px);
}

/* Button Icon - MADE HIGHLY VISIBLE */
.btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  cursor: pointer !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
  border: 2px solid var(--theme-border) !important;
  font-size: var(--font-size-lg) !important;
  z-index: 10 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.btn-icon:hover {
  background: var(--theme-surface-hover) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px var(--theme-shadow) !important;
  border-color: var(--theme-primary) !important;
}

.btn-icon:active {
  transform: scale(0.95) !important;
}

/* Specific button fixes */
.theme-btn,
.focus-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Theme Switcher */
.theme-switcher {
  position: relative;
  display: flex !important;
}

.theme-dropdown {
  position: absolute;
  top: 60px;
  right: 0;
  min-width: 200px;
  padding: var(--space-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: 200;
  background: var(--theme-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.theme-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-options {
  display: grid;
  gap: var(--space-8);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  text-align: left;
  width: 100%;
}

.theme-option:hover {
  background: var(--theme-surface-hover);
  transform: translateX(4px);
}

.theme-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.light-preview { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.dark-preview { background: linear-gradient(135deg, #00d9ff, #553c9a); }
.ocean-preview { background: linear-gradient(135deg, #0ea5e9, #164e63); }
.forest-preview { background: linear-gradient(135deg, #10b981, #047857); }
.sunset-preview { background: linear-gradient(135deg, #f59e0b, #d97706); }
.purple-preview { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* Profile Section - FIXED TO BE CLICKABLE */
.user-profile {
  position: relative;
  display: flex !important;
}

.profile-avatar {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
}

.avatar-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--font-size-xl) !important;
  color: white !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  box-shadow: 0 4px 15px var(--theme-shadow) !important;
  cursor: pointer !important;
  border: 2px solid var(--theme-border) !important;
}

.avatar-circle:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 25px var(--theme-shadow) !important;
}

.profile-dropdown {
  position: absolute;
  top: 60px;
  right: 0;
  min-width: 280px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: 200;
  background: var(--theme-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.profile-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu {
  padding: var(--space-20);
}

.menu-header h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-8);
}

.menu-header p {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-20);
}

.guest-menu .btn {
  width: 100%;
}

.user-info {
  margin-bottom: var(--space-12);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}

.user-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  color: white;
}

.user-details h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

.user-details p {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-8);
  text-align: left;
}

.menu-item:hover {
  background: var(--theme-surface-hover);
  transform: translateX(4px);
}

/* Main Content Layout */
.main-content {
  display: flex;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Sidebar */
.sidebar {
  width: 280px;
  max-width: calc(100% - var(--space-24) - var(--space-24));
  min-height: calc(100vh - 120px);
  margin: var(--space-24);
  margin-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: sticky;
  top: 120px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile Sidebar Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-overlay-background);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
}

.sidebar-content {
  padding: var(--space-24);
  overflow-x: hidden;
  box-sizing: border-box;
}

.sidebar-nav {
  margin-bottom: var(--space-32);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-16);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  margin-bottom: var(--space-8);
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
}

.nav-item:hover {
  background: var(--theme-surface-hover);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  color: white;
  box-shadow: 0 4px 15px var(--theme-shadow);
}

.nav-icon {
  font-size: var(--font-size-lg);
}

/* Collapsible Sections */
.section {
  margin-bottom: var(--space-24);
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  font-weight: var(--font-weight-medium);
}

.section-header:hover {
  background: var(--theme-surface-hover);
}

.user-details p {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-8);
  text-align: left;
}

.menu-item:hover {
  background: var(--theme-surface-hover);
  transform: translateX(4px);
}


.section-content {
  padding: var(--space-16) 0;
  max-height: 300px;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-standard);
}

.section-content.collapsed {
  max-height: 0;
  padding: 0;
}

.collapse-arrow {
  margin-left: auto;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.section-header[aria-expanded="false"] .collapse-arrow {
  transform: rotate(-90deg);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--theme-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  text-align: left;
  box-sizing: border-box;
}

.quick-action:hover {
  background: var(--theme-surface-hover);
  color: var(--theme-text);
  transform: translateX(8px);
}

/* Shortcuts */
.shortcut-list {
  display: grid;
  gap: var(--space-8);
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}

.shortcut-key {
  background: var(--theme-surface);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  border: 1px solid var(--theme-border);
}

/* Content Area */
.content-area {
  flex: 1;
  padding: var(--space-24);
  min-height: calc(100vh - 120px);
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

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

.tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid transparent;
  background: linear-gradient(90deg, 
    rgba(59, 130, 246, 0.3), 
    rgba(147, 51, 234, 0.3)) bottom;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  position: relative;
  animation: fadeInUp 0.8s ease-out;
}

.tab-header::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent));
  transform: scaleX(0);
  animation: expandLine 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes expandLine {
  to {
    transform: scaleX(1);
  }
}

.tab-header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.tab-header h2 {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  background: linear-gradient(135deg, 
    var(--theme-text), 
    var(--theme-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.025em;
  animation: gradientShift 3s ease-in-out infinite;
}

.welcome-name {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.welcome-subtitle-header {
  font-size: 1.1rem;
  color: var(--theme-text-secondary);
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

/* Dashboard */
.welcome-section {
  margin-bottom: 4rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.welcome-hero {
  padding: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.08), 
    rgba(147, 51, 234, 0.08),
    rgba(16, 185, 129, 0.05)
  );
  border: 1px solid rgba(59, 130, 246, 0.15);
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

.welcome-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
  pointer-events: none;
}  

.welcome-hero-content {
  display: grid;
  align-items: center;
  /* This creates two columns: a flexible one on the left and a 320px one on the right */
  grid-template-columns: 1fr 320px; 
  gap: 3rem;
  padding: 2rem;
}

.welcome-text-section {
  grid-column: 1;
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  animation: bounceIn 0.8s ease-out 0.6s both;
}

.badge-icon {
  font-size: 1rem;
}

.welcome-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent), #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 4s ease-in-out infinite;
  line-height: 1.2;
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: var(--theme-text-secondary);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  opacity: 0.9;
}

.welcome-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.welcome-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.welcome-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.welcome-action-btn:hover::before {
  left: 100%;
}

.welcome-visual {
  grid-column: 2;
  grid-row: 1; /* Ensures it stays on the same row as the text */
}

.welcome-stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@keyframes statCardFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0) rotateY(0);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  25% {
    transform: translateY(-8px) rotateX(2deg) rotateY(-1deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    transform: translateY(-4px) rotateX(0) rotateY(2deg);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12), 
                0 0 0 1px rgba(255, 255, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  75% {
    transform: translateY(-6px) rotateX(-1deg) rotateY(-2deg);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.13), 
                0 0 0 1px rgba(255, 255, 255, 0.13),
                inset 0 1px 0 rgba(255, 255, 255, 0.23);
  }
}

/* Enhanced Dashboard Keyframes - New Animations */
@keyframes statIconFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-10px) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translateY(-5px) rotate(-3deg) scale(1.02);
  }
  75% {
    transform: translateY(-8px) rotate(3deg) scale(1.04);
  }
}

@keyframes statNumberPulse {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow: 0 6px 15px rgba(0, 0, 0, 0.2),
                 0 0 25px rgba(59, 130, 246, 0.3);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.3),
                 0 0 40px rgba(59, 130, 246, 0.6),
                 0 0 60px rgba(147, 51, 234, 0.3);
  }
}

@keyframes statLabelGlow {
  0%, 100% {
    opacity: 0.9;
    transform: translateY(0);
    background: linear-gradient(90deg, 
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
    background: linear-gradient(90deg, 
      rgba(59, 130, 246, 0.1) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(147, 51, 234, 0.1) 100%);
  }
}

@keyframes statCardIntro {
  0% {
    opacity: 0;
    transform: translateY(100px) rotateX(-40deg) scale(0.6);
    clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-20px) rotateX(15deg) scale(1.08);
    clip-path: polygon(5% 5%, 95% 5%, 90% 95%, 10% 95%);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
  }
}



.stat-card {
  padding: 1.5rem;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.8s ease-out;
}

/* --- Glassmorphism Effect --- */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 16px;
  z-index: 1;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* --- Card Color Variants --- */
.stat-card-primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.2);
  animation-delay: 0.8s;
}

.stat-card-secondary {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(147, 51, 234, 0.05));
  border: 1px solid rgba(147, 51, 234, 0.2);
  animation-delay: 1s;
}

.stat-card-accent {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.2);
  animation-delay: 1.2s;
}

.stat-card-info {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.2);
  animation-delay: 1.4s;
}

/* --- Inner Card Content --- */
.stat-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.stat-card-content {
  position: relative;
  z-index: 2;
}

.stat-card-number {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.stat-card-number.updated {
  animation: focusScorePulse 0.5s ease;
}

@keyframes focusScorePulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
}

.stat-card-label {
  font-size: 0.9rem;
  color: var(--theme-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-24);
}

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

.stat-number {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  margin-bottom: var(--space-8);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.features-section {
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.features-header {
  text-align: center;
  margin-bottom: 3rem;
}

.features-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.features-subtitle {
  font-size: 1.1rem;
  color: var(--theme-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  position: relative;
}

.feature-card {
  text-align: center;
  padding: 2.5rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: featureCardSlideIn 0.8s ease-out;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 20px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
  z-index: 2;
}

.feature-card-hover:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.feature-card-hover:hover::before {
  opacity: 1;
}

.feature-card-hover:hover::after {
  left: 100%;
}

@keyframes featureCardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.feature-badge {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-highlight {
  display: inline-block;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
  color: var(--theme-primary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.feature-card:hover .feature-highlight {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.feature-icon {
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  display: inline-block;
  position: relative;
  z-index: 3;
  animation: iconPulse 3s ease-in-out infinite;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.feature-card:hover .feature-icon {
  transform: scale(1.2) rotate(5deg);
  animation-play-state: paused;
  filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.5));
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--theme-text);
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.feature-card:hover h3 {
  color: var(--theme-primary);
  transform: translateY(-3px);
}

.feature-card p {
  color: var(--theme-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 3;
  transition: color 0.3s ease;
}

.feature-card:hover p {
  color: var(--theme-text);
}

/* Grids */
.playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-24);
}

/* Center empty states in grid containers */
.playlists-grid.has-empty-state,
.videos-grid.has-empty-state,
#videosGrid.has-empty-state,
#playlistsGrid.has-empty-state {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 400px !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

.videos-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 1.5rem !important;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary) transparent;
  width: 100% !important;
  min-width: 0;
  align-items: start;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-content: unset !important;
}

/* Analytics Dashboard */
.analytics-period-selector {
  display: flex;
  gap: 0.5rem;
  background: var(--theme-bg-secondary);
  padding: 0.25rem;
  border-radius: 12px;
}

.period-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--theme-text-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn.active {
  background: var(--theme-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.period-btn:hover:not(.active) {
  background: rgba(59, 130, 246, 0.1);
  color: var(--theme-primary);
}

.analytics-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Metrics Row */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.metric-card {
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.primary-metric::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.success-metric::before { background: linear-gradient(90deg, #10b981, #059669); }
.accent-metric::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.info-metric::before { background: linear-gradient(90deg, #f59e0b, #d97706); }

.metric-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: rgba(59, 130, 246, 0.1);
}

.primary-metric .metric-icon-wrapper { background: rgba(59, 130, 246, 0.1); }
.success-metric .metric-icon-wrapper { background: rgba(16, 185, 129, 0.1); }
.accent-metric .metric-icon-wrapper { background: rgba(139, 92, 246, 0.1); }
.info-metric .metric-icon-wrapper { background: rgba(245, 158, 11, 0.1); }

.metric-icon {
  font-size: 1.5rem;
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-value {
  font-size: 2rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.chart-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text);
}

/* Period selector for learning progress chart */
.period-selector {
  display: flex;
  gap: 0.5rem;
  background: var(--theme-bg-secondary);
  padding: 0.25rem;
  border-radius: 12px;
}

.period-selector .btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--theme-text-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-selector .btn.active {
  background: var(--theme-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.period-selector .btn:hover:not(.active) {
  background: rgba(59, 130, 246, 0.1);
  color: var(--theme-primary);
}

.chart-legend {
  display: flex;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.legend-color {
  width: 12px;

  font-weight: 700;
  color: var(--theme-text);
  line-height: 1;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  font-weight: 500;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.metric-trend.positive {
  color: #10b981;
}

.metric-trend.negative {
  color: #ef4444;
}

.metric-trend.neutral {
  color: var(--theme-text-secondary);
}

.trend-icon {
  font-size: 0.875rem;
}

.trend-value {
  font-weight: 600;
}

.trend-period {
  color: var(--theme-text-secondary);
}

/* Charts Row */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.chart-card {
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chart-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text);
}

.chart-legend {
  display: flex;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.videos {
  background: var(--theme-primary);
}

.legend-color.playlists {
  background: var(--theme-accent);
}

.chart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.chart-stats {
  display: flex;
  justify-content: space-around;
  gap: 1.25rem;
  margin-top: 1rem;
}

.chart-stat {
  flex: 1;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, var(--theme-bg-secondary), var(--theme-surface));
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--theme-card-border);
  transition: all 0.3s ease;
}

.chart-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--theme-primary);
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--theme-text-secondary);
  margin: 0;
}

/* Insights Panel */
.insights-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-card {
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.insight-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.insight-icon {
  font-size: 1.25rem;
}

.insight-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-text);
  margin: 0;
}

.insight-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.insight-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--theme-border);
}

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

.insight-label {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.insight-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text);
}

/* Goal Progress */
.goal-progress-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--theme-border);
}

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

.goal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goal-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.goal-progress-text {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

/* Premium inline percentage over the bar */
.progress-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  letter-spacing: 0.2px;
}


.goal-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--theme-bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Activity Row */
.activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.activity-card {
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.activity-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text);
  margin: 0;
}

.view-all-btn {
  background: none;
  border: none;
  color: var(--theme-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.view-all-btn:hover {
  color: var(--theme-accent);
}

/* Enhanced Compact Card Styles */
.compact-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-card-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.compact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--theme-primary), #4f46e5, #8b5cf6);
  opacity: 0.8;
}

.compact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.compact-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.compact-card .card-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.compact-card .card-header h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--theme-text);
  margin: 0;
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.compact-card .expand-btn {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  color: var(--theme-text-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.compact-card .expand-btn:hover {
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
  color: white;
  border-color: var(--theme-primary);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.compact-card .card-content {
  margin-bottom: 1rem;
}

.compact-card .expanded-content {
  display: none;
  padding-top: 1.5rem;
  border-top: 1px solid var(--theme-card-border-inner);
  margin-top: 1.5rem;
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-card.expanded .expanded-content {
  display: block;
}

.compact-card .expanded-description p {
  font-size: 0.95rem;
  color: var(--theme-text-secondary);
  margin: 0 0 1.25rem 0;
  line-height: 1.6;
}

.compact-card .expanded-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
}

.compact-card .stat-item {
  text-align: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--theme-bg-secondary), var(--theme-surface));
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--theme-card-border);
}

.compact-card .stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.compact-card .stat-label {
  font-size: 0.85rem;
  color: var(--theme-text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.compact-card .stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--theme-text);
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* Enhanced Chart Styles */
.chart-container {
  position: relative;
  height: 250px;
  margin-bottom: 1rem;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Enhanced Chart Container */
.chart-container {
  position: relative;
  height: 280px;
  margin-bottom: 1.25rem;
  background: var(--theme-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--theme-card-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  transition: all 0.3s ease;
}

.chart-container canvas:hover {
  transform: scale(1.02);
}

/* Enhanced Learning Progress Chart */
#progressChart, #watchedChart {
  background: var(--theme-surface);
  border-radius: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

#progressChart:hover, #watchedChart:hover {
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Enhanced Period selector */
.period-selector {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.period-selector .btn {
  padding: 0.35rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 20px;
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  color: var(--theme-text-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.period-selector .btn.active {
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
  color: white;
  border-color: var(--theme-primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  transform: translateY(-2px);
}

.period-selector .btn:hover:not(.active) {
  background: var(--theme-bg-secondary);
  color: var(--theme-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Enhanced Chart Legend */
.chart-legend {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  justify-content: center;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--theme-text);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.legend-item:hover {
  background: var(--theme-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-color.videos {
  background: linear-gradient(135deg, var(--theme-primary), #4f46e5);
}

.legend-color.playlists {
  background: linear-gradient(135deg, var(--theme-accent), #10b981);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .charts-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .compact-card .expanded-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .compact-card .expanded-stats {
    grid-template-columns: 1fr;
  }
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: rgba(59, 130, 246, 0.05);
  transform: translateX(4px);
}

.activity-icon {
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

.activity-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.activity-status.completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.activity-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* Time Tracking Card */
.time-tracking-card {
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.time-tracking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.time-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.time-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text);
  margin: 0;
}

.time-period {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  background: var(--theme-bg-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}

.time-metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.time-metric {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
}

.time-icon {
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
}

.time-content {
  flex: 1;
}

.time-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 0.25rem;
}

.time-label {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.time-chart {
  height: 150px;
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-24);
}

@media (max-width: 768px) {
  /* ===== MOBILE-ONLY STYLES - NO TABLET/DESKTOP CHANGES ===== */
  
  /* ===== HEADER LAYOUT ===== */
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
  }
  
  /* Hamburger menu on the left */
  .hamburger-menu-btn {
    display: flex !important;
    order: 1;
    flex-shrink: 0;
  }
  
  /* Logo in center */
  .logo-section {
    order: 2;
    flex: 1;
    text-align: center;
    margin: 0 8px;
  }
  
  .logo {
    font-size: var(--font-size-lg);
    margin: 0;
  }
  
  .logo-badge {
    display: none;
  }
  
  /* Header controls on the right */
  .header-controls {
    order: 3;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  
  /* ===== SIDEBAR - COMPLETELY HIDDEN ON MOBILE ===== */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important; /* Hidden off-screen */
    width: 280px !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 1000 !important;
    background: var(--theme-background) !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3) !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
  }
  
  /* Sidebar slides in when active */
  .sidebar.active {
    left: 0 !important;
    box-shadow: none !important;
  }
  
  /* ===== MAIN CONTENT - FULL WIDTH ON MOBILE ===== */
  .main-content {
    display: block !important; /* Not flex on mobile */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Content area takes full width */
  .content-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    min-height: calc(100vh - 120px);
  }
  
  /* ===== OVERLAY ===== */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-overlay-background);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .sidebar-overlay.active {
    display: block;
    opacity: 1;
  }
  
  /* ===== HAMBURGER ANIMATION ===== */
  .hamburger-line {
    width: 100%;
    height: 3px;
    background: var(--theme-text);
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .hamburger-menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .hamburger-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger-menu-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .analytics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.analytics-card {
  padding: var(--space-32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.analytics-card h3 {
  margin-bottom: var(--space-16);
  color: var(--theme-text);
  font-size: 1.1rem;
  font-weight: 600;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-base);
  font-size: var(--font-size-lg);
  color: var(--theme-text-secondary);
}

.focus-time-display {
  text-align: center;
}

.time-number {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  margin-bottom: var(--space-8);
}

.time-label {
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tools Dashboard */
.tools-quick-access {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scroll-indicator {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin-top: 1rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover)); /* Changed from var(--primary-color) */
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  animation: pulse 2s infinite;
}

.scroll-indicator-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover));
  color: white;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.025em;
  border: none;
  box-shadow: 
    0 4px 15px rgba(59, 130, 246, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 140px;
}

.quick-access-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent);
  transition: left 0.5s;
}

.quick-access-btn:hover::before {
  left: 100%;
}

.quick-access-btn:hover {
  background: linear-gradient(135deg, 
    var(--theme-primary-hover), 
    var(--theme-primary-active));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(59, 130, 246, 0.5),
    0 4px 15px rgba(0, 0, 0, 0.2);
}

.quick-access-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 
    0 2px 8px rgba(59, 130, 246, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.1);
}

.quick-access-btn:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.btn-icon {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.quick-access-btn:hover .btn-icon {
  transform: scale(1.1);
}

.tools-dashboard {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

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

/* Primary Tools Row */
.primary-tools-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  opacity: 0;
  animation: slideInStaggered 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

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

.tool-card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 100%;
  /* No animation by default - will be triggered by JavaScript */
}

/* Animation classes to be triggered by JavaScript */
.tool-card.animate-strip::before {
  animation: shimmer 3s ease-in-out 2;
}

.loading-shimmer.animate-strip {
  animation: shimmerEffect 1.5s ease-in-out 2;
}

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

@keyframes modalEntrance {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateX(15deg) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg) translateY(0);
  }
}

@keyframes modalOverlayEntrance {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(15px);
  }
}

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

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.tool-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(59, 130, 246, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(59, 130, 246, 0.3);
}

.focus-timer-card::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.streak-card::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.break-timer-card::before { background: linear-gradient(90deg, #10b981, #059669); }
.wellness-card::before { background: linear-gradient(90deg, #9333ea, #6b21a8); }
.goals-card::before { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.notes-card::before { background: linear-gradient(90deg, #22c55e, #15803d); }

.tool-card:hover::before {
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    rgba(147, 51, 234, 0.8));
  height: 4px;
}

.tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.tool-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.tool-expand-btn {
    background: linear-gradient(135deg, 
      rgba(59, 130, 246, 0.15), 
      rgba(147, 51, 234, 0.15));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Additional Premium Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes shimmerEffect {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

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

/* Apply animations to key elements */
.video-player-modal {
  animation: modalEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.playlist-header {
  animation: none;
}

.playlist-video-item {
  animation: none;
}

.playlist-video-item:nth-child(2n) {
  animation: none;
}

.playlist-video-item:nth-child(3n) {
  animation: none;
}

.playlist-video-item:hover {
  animation: none;
}

.video-info h3 {
  animation: none;
}


.tool-expand-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.2), 
      transparent);
    transition: left 0.5s;
}

.tool-expand-btn:hover {
    background: linear-gradient(135deg, 
      rgba(59, 130, 246, 0.25), 
      rgba(147, 51, 234, 0.25));
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
      0 8px 20px rgba(59, 130, 246, 0.3),
      0 4px 10px rgba(0, 0, 0, 0.1);
}

.tool-expand-btn:hover::before {
    left: 100%;
}

.tool-expand-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    opacity: 0.8;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.tool-expand-btn:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

.tool-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15), 
    rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: visible; /* Changed from hidden to visible to prevent cutting */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: bounce 3s infinite ease-in-out; /* Added bounce animation */
  transform-origin: center;
}

.tool-icon-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.3) 0%, 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tool-card:hover .tool-icon-wrapper::before {
  opacity: 1;
}

.focus-timer-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2), 
    rgba(29, 78, 216, 0.1));
  border-color: rgba(59, 130, 246, 0.3);
}
.streak-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.2), 
    rgba(217, 119, 6, 0.1));
  border-color: rgba(245, 158, 11, 0.3);
}
.break-timer-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.2), 
    rgba(5, 150, 105, 0.1));
  border-color: rgba(16, 185, 129, 0.3);
}
.wellness-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(147, 51, 234, 0.2), 
    rgba(107, 33, 168, 0.1));
  border-color: rgba(147, 51, 234, 0.3);
}
.goals-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.2), 
    rgba(185, 28, 28, 0.1));
  border-color: rgba(239, 68, 68, 0.3);
}
.notes-card .tool-icon-wrapper { 
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.2), 
    rgba(21, 128, 61, 0.1));
  border-color: rgba(34, 197, 94, 0.3);
}

.tool-icon {
  font-size: 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: iconPulse 2s infinite ease-in-out; /* Added pulse animation */
}

.tool-card:hover .tool-icon {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  animation: none; /* Remove animation on hover for better control */
}

.tool-header h3 {
  flex: 1;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--theme-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, 
    var(--theme-text), 
    var(--theme-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.tool-card:hover .tool-header h3 {
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateX(4px);
}

/* Tool status styles - removed from HTML but kept for future use
.tool-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-status.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.tool-status.ready {
  background: rgba(59, 130, 246, 0.1);
  color: var(--theme-primary);
}

.tool-status.current {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
*/

.tool-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

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

.tool-card:nth-child(1) .tool-content { animation-delay: 0.1s; }
.tool-card:nth-child(2) .tool-content { animation-delay: 0.2s; }
.tool-card:nth-child(3) .tool-content { animation-delay: 0.3s; }
.tool-card:nth-child(4) .tool-content { animation-delay: 0.4s; }
.tool-card:nth-child(5) .tool-content { animation-delay: 0.5s; }
.tool-card:nth-child(6) .tool-content { animation-delay: 0.6s; }

/* Focus Timer */
.timer-display {
  display: flex;
  justify-content: center;
  align-items: center;
}

.timer-circle {
  position: relative;
  width: 120px;
  height: 120px;
}

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

.timer-bg {
  fill: none;
  stroke: var(--theme-bg-secondary);
  stroke-width: 8;
}

.timer-progress {
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 0.3s ease;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.timer-time {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-text);
  line-height: 1;
}

.timer-phase {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  margin-top: 0.25rem;
}

.timer-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.timer-customization,
.break-customization {
  margin-top: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.timer-customization::before,
.break-customization::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.customization-header {
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.customization-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customization-title::before {
  content: '⚙️';
  font-size: 1rem;
}

.customization-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.customization-inputs .input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.customization-inputs .input-group:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.customization-inputs label {
  font-size: 0.875rem;
  color: var(--theme-text);
  font-weight: 500;
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customization-inputs label::before {
  font-size: 1rem;
}

.customization-inputs label[for="focusTimeCompact"]::before {
  content: '🎯';
}

.customization-inputs label[for="breakTimeCompact"]::before {
  content: '⏰';
}

.customization-inputs label[for="customBreakTime"]::before {
  content: '⚡';
}

.timer-input {
  width: 70px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--theme-text);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.timer-input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  transform: scale(1.05);
}

.timer-input:hover {
  border-color: var(--theme-primary);
  transform: translateY(-1px);
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  letter-spacing: 0.025em;
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent);
  transition: left 0.5s;
}

.control-btn:hover::before {
  left: 100%;
}

.control-btn.primary {
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent));
  color: white;
  box-shadow: 
    0 4px 15px rgba(59, 130, 246, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-btn.primary:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(59, 130, 246, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.control-btn.secondary {
  background: linear-gradient(135deg, 
    rgba(148, 163, 184, 0.15), 
    rgba(148, 163, 184, 0.1));
  color: var(--theme-text);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.control-btn.secondary:hover {
  background: linear-gradient(135deg, 
    rgba(148, 163, 184, 0.25), 
    rgba(148, 163, 184, 0.2));
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.5);
}

.control-btn.outline {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  color: var(--theme-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-btn.outline:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    rgba(255, 255, 255, 0.15));
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.4);
}

/* FIXED: Learning Streak Normal View Layout */
/* Fix learning streak content visibility in light theme */
.tool-card.streak-card .tool-content,
.tool-card.streak-card .tool-content * {
    color: var(--theme-text) !important;
}

.tool-card.streak-card .streak-number,
.tool-card.streak-card .streak-label,
.tool-card.streak-card .streak-message {
    color: var(--theme-text) !important;
}

.tool-card.streak-card .calendar-day {
    color: var(--theme-text) !important;
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
}

.tool-card.streak-card .calendar-day.today {
    background: var(--theme-success) !important;
    color: white !important;
}

.tool-card.streak-card .calendar-day.login-day {
    background: var(--theme-primary) !important;
    color: white !important;
}

.tool-card.streak-card .calendar-day-header {
    color: var(--theme-text-secondary) !important;
    background: var(--theme-surface) !important;
}

/* Ensure all streak content is visible in light theme */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card.streak-card {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card.streak-card .tool-content {
    color: var(--theme-text) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card.streak-card .streak-number {
    color: var(--theme-primary) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card.streak-card .streak-label {
    color: var(--theme-text-secondary) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card.streak-card .streak-message {
    color: var(--theme-text) !important;
}

/* Fix fullscreen streak content visibility and styling */
#streakFullscreen {
    background: var(--theme-background) !important;
}

#streakFullscreen .tool-fullscreen-content {
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

#streakFullscreen .tool-content,
#streakFullscreen .tool-content *,
#streakFullscreen .enhanced-streak-content,
#streakFullscreen .enhanced-streak-content *,
#streakFullscreen .tool-fullscreen-body,
#streakFullscreen .tool-fullscreen-body * {
    color: var(--theme-text) !important;
}

#streakFullscreen .enhanced-streak-number {
    color: var(--theme-primary) !important;
    font-size: 4rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

#streakFullscreen .enhanced-streak-label,
#streakFullscreen .enhanced-streak-message {
    color: var(--theme-text) !important;
    text-align: center !important;
}

#streakFullscreen .enhanced-streak-label {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-top: 0.5rem !important;
}

#streakFullscreen .enhanced-streak-message {
    font-size: 1rem !important;
    margin-top: 1rem !important;
    opacity: 0.8 !important;
}

#streakFullscreen .calendar-day {
    color: var(--theme-text) !important;
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
}

#streakFullscreen .calendar-day.today {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover)) !important;
    color: #ffffff !important;
    border: 2px solid var(--theme-primary-hover) !important;
}

#streakFullscreen .calendar-day.login-day {
    background: var(--theme-primary) !important;
    color: white !important;
}

#streakFullscreen .calendar-day-header {
    color: var(--theme-text-secondary) !important;
    background: var(--theme-surface) !important;
    font-weight: 600 !important;
}

/* Streak Statistics Styling */
#streakFullscreen .streak-stats-enhanced {
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

#streakFullscreen .stat-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

#streakFullscreen .stat-item:last-child {
    border-bottom: none !important;
}

#streakFullscreen .stat-label {
    color: var(--theme-text-secondary) !important;
    font-weight: 500 !important;
}

#streakFullscreen .stat-value {
    color: var(--theme-primary) !important;
    font-weight: 700 !important;
}

/* Achievements Styling */
#streakFullscreen .achievements-list {
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

#streakFullscreen .achievement-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--theme-border) !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease !important;
}

#streakFullscreen .achievement-item:last-child {
    border-bottom: none !important;
}

#streakFullscreen .achievement-item.unlocked {
    opacity: 1 !important;
}

#streakFullscreen .achievement-icon {
    font-size: 1.5rem !important;
    margin-right: 1rem !important;
}

#streakFullscreen .achievement-text {
    color: var(--theme-text) !important;
    font-weight: 500 !important;
}

/* Enhanced Streak Display */
#streakFullscreen .enhanced-streak-display {
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* Calendar Container */
#streakFullscreen .enhanced-streak-calendar {
    background: var(--theme-background) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

/* Enhanced calendar header layout for expanded Learning Streak */
#streakFullscreen .enhanced-calendar-header {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

#streakFullscreen #enhancedCurrentMonth {
    margin: 0 !important;
    text-align: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--theme-text) !important;
}

#streakFullscreen .enhanced-calendar-header .calendar-nav-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
}

/* Sidebar Styling */
#streakFullscreen .tool-fullscreen-sidebar {
    background: var(--theme-surface) !important;
    border-left: 1px solid var(--theme-border) !important;
    padding: 2rem !important;
}

#streakFullscreen .tool-fullscreen-sidebar h3 {
    color: var(--theme-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px solid var(--theme-primary) !important;
    padding-bottom: 0.5rem !important;
}

/* Fix expanded Learning Streak layout: ensure calendar is fully visible and centered on the left */
#streakFullscreen .tool-fullscreen-main {
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

#streakFullscreen .enhanced-streak-calendar {
    margin: 0 auto !important;
}

/* Fix all productivity tool content visibility in light theme */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card .tool-content,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay .tool-content {
    color: var(--theme-text) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card .tool-content *,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay .tool-content * {
    color: inherit !important;
}

/* Ensure buttons are visible */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card button,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay button {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-card button:hover,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay button:hover {
    background: var(--theme-primary) !important;
    color: white !important;
}

.tool-card.streak-card .tool-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  gap: 0;
}

.streak-display {
  text-align: center;
  padding: 24px 20px 16px 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-success));
  margin: 0;
  border-radius: 16px 16px 0 0;
  color: white;
}

.streak-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.streak-label {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.95;
}

.streak-message {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 500;
}

.streak-calendar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: var(--theme-surface);
  margin: 0;
  border-radius: 0 0 16px 16px;
}

.calendar-header {
  text-align: center;
  margin-bottom: 1rem;
}

.calendar-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

/* Break Timer */
.break-timer-display {
  text-align: center;
  margin-bottom: 1rem;
}

.break-circle {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.break-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.break-bg {
  fill: none;
  stroke: var(--theme-border);
  stroke-width: 4;
}

.break-progress {
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 0.3s ease;
}

.break-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.break-time {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.break-label {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.break-presets {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--theme-text);
}

.preset-btn.active {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
}

.preset-btn:hover:not(.active) {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}

.preset-time {
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.preset-label {
  font-size: 0.75rem;
  opacity: 0.8;
  color: inherit;
}

.break-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Secondary Tools Row */
.secondary-tools-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  opacity: 0;
  animation: slideInStaggered 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* Wellness Card */
.wellness-card .tool-icon-wrapper {
  background: rgba(139, 92, 246, 0.1);
}

.wellness-card::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.wellness-timer {
  text-align: center;
  margin-bottom: 1rem;
}

.wellness-circle {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.wellness-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.wellness-bg {
  fill: none;
  stroke: var(--theme-border);
  stroke-width: 4;
}

.wellness-progress {
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 0.3s ease;
}

.wellness-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.wellness-display {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-primary);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.wellness-label {
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
}

.wellness-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.wellness-activities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wellness-activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wellness-activity:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: var(--theme-accent);
  transform: translateY(-2px);
}

.activity-icon {
  font-size: 1.5rem;
}

.activity-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.activity-duration {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

.wellness-tip {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 1rem;
}

.tip-content {
  font-size: 0.875rem;
  color: var(--theme-text);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.tip-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--theme-accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tip-btn:hover {
  background: var(--theme-primary);
  transform: translateY(-1px);
}

/* Notes Card */
.notes-card .tool-icon-wrapper {
  background: rgba(16, 185, 129, 0.1);
}

.notes-card::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

/* Removed tool-status from notes-card
.notes-card .tool-status {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
*/

.notes-editor {
  margin-bottom: 1rem;
}

.notes-textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--theme-text);
  resize: vertical;
  transition: border-color 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: var(--theme-primary);
}

.notes-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.primary {
  background: var(--theme-primary);
  color: white;
}

.action-btn.primary:hover {
  background: var(--theme-accent);
}

.action-btn.secondary {
  background: var(--theme-bg-secondary);
  color: var(--theme-text);
}

.action-btn.secondary:hover {
  background: var(--theme-border);
}

.action-btn.outline {
  background: transparent;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}

.action-btn.outline:hover {
  background: var(--theme-bg-secondary);
}

.notes-insights {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 1rem;
}

.insight-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.insight-icon {
  font-size: 1rem;
}

.insight-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text);
}

.insight-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.insight-bullet {
  color: var(--theme-primary);
  font-weight: 600;
  margin-top: 0.125rem;
}

.insight-text {
  font-size: 0.875rem;
  color: var(--theme-text);
  line-height: 1.4;
}

/* Goals Card */
.goals-card .tool-icon-wrapper {
  background: rgba(245, 158, 11, 0.1);
}

.goals-card::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.goals-card .tool-header {
  justify-content: space-between;
}

.add-goal-btn,
.add-goal-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.add-goal-btn:hover,
.add-goal-btn-large:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.add-goal-btn:active,
.add-goal-btn-large:active {
  transform: translateY(0) scale(0.99);
}

/* Full goals grid layout in tools > Goal Tracker */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

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

/* Compact goal item beautification */
.goals-card .goals-list .goal-progress-item {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

.goals-card .goals-list .goal-progress-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
  opacity: 0.85;
}

.goal-info .goal-name {
  font-weight: 700;
  color: var(--theme-text);
  font-size: 1.05rem;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-info .goal-progress-text {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,0.08);
  color: var(--theme-primary);
  font-weight: 600;
}

.goal-progress-bar {
  height: 8px;
  background: var(--theme-border);
  border-radius: 6px;
}

.goal-progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
}

/* Compact actions row inside compact progress list */
.goal-actions-compact {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.5rem;
}

.goal-actions-compact .goal-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: var(--theme-bg-secondary);
  color: var(--theme-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.goal-actions-compact .progress-btn { color: var(--theme-primary); border-color: rgba(59,130,246,0.3); }
.goal-actions-compact .complete-btn { color: #10b981; border-color: rgba(16,185,129,0.35); }
.goal-actions-compact .delete-btn { color: #ef4444; border-color: rgba(239,68,68,0.35); }

.goal-actions-compact .goal-action-btn:hover {
  transform: translateY(-1px) scale(1.05);
  background: white;
}

/* Compact completed badge */
.goal-completed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: #10b981;
  color: white;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(16,185,129,0.35);
}

/* Keep add-goal button visible in compact card */
.add-goal-btn { margin-left: auto; }

.goals-summary {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

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

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.goals-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.goal-item {
  background: var(--theme-bg-secondary);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.goal-item:hover {
  background: rgba(245, 158, 11, 0.05);
  transform: translateX(4px);
}

.goal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.goal-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.goal-progress {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

.goal-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--theme-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.goal-actions {
  display: flex;
  gap: 0.5rem;
}

.goal-btn {
  padding: 0.25rem 0.75rem;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--theme-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.goal-btn:hover {
  background: var(--theme-border);
}

.goal-btn.complete {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
}

.goal-btn.complete:hover {
  background: var(--theme-accent);
}

/* Quick Actions Panel */
.quick-actions-panel {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2.5rem 1.5rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  transition: all 0.3s ease;
}

.quick-actions-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 20%, 
    rgba(59, 130, 246, 0.08) 0%, 
    transparent 60%);
  pointer-events: none;
}

.quick-actions-panel:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 16px 40px rgba(59, 130, 246, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
}

.panel-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.panel-header h3 {
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, 
    var(--theme-text), 
    var(--theme-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.025em;
}

.panel-subtitle {
  font-size: 0.95rem;
  color: var(--theme-text-secondary);
  opacity: 0.8;
  letter-spacing: 0.025em;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}

.quick-action-btn {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--theme-text);
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
  transition: left 0.5s;
}

.quick-action-btn:hover::before {
  left: 100%;
}

.quick-action-btn:hover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15), 
    rgba(147, 51, 234, 0.1));
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 12px 30px rgba(59, 130, 246, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.1);
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-action-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.action-icon {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
}

.action-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
  text-align: center;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-24);
}

@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  
  .pomodoro-settings {
    grid-template-columns: 1fr;
  }
  
  .analytics-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .wellness-activities {
    grid-template-columns: 1fr;
  }
  
  .notes-actions {
    flex-direction: column;
  }
  
  .goals-summary {
    flex-direction: column;
    gap: var(--space-16);
  }
}

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

.tool-icon {
  font-size: 3rem;
  margin-bottom: var(--space-16);
}

/* Streak Display Styles */
.streak-display {
  text-align: center;
  margin: var(--space-24) 0;
  padding: var(--space-20);
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-success));
  border-radius: var(--radius-lg);
  color: white;
  position: relative;
  overflow: hidden;
}

/* Removed shimmer animation from streak display */

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.streak-number {
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-bottom: var(--space-8);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.streak-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: 0.9;
}

.streak-subtitle {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Calendar Styles */
.calendar-container {
  margin: var(--space-24) 0;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16);
  background: var(--theme-background);
  border-bottom: 1px solid var(--theme-border);
}

.calendar-header h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.calendar-nav {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--theme-text);
  cursor: pointer;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.calendar-nav:hover {
  background: var(--theme-primary);
  color: white;
  transform: scale(1.1);
}

/* Enhanced Calendar Grid Styles */
.calendar-grid,
.calendar-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 12px;
  background: var(--theme-surface);
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-background);
  font-size: 12px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  min-height: 32px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* Learning Streak Calendar Specific Styles */
.streak-calendar {
  margin-top: 16px;
  padding: 0;
}

.streak-calendar .calendar-header {
  text-align: center;
  margin-bottom: 12px;
  padding: 8px 0;
}

.streak-calendar .calendar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text);
  background: var(--theme-surface);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--theme-border);
  display: inline-block;
}

/* Mini calendar in normal view */
#calendarMini {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  background: var(--theme-surface);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--theme-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#calendarMini .calendar-day {
  min-height: 32px;
  font-size: 11px;
  border-radius: 4px;
}

/* Enhanced calendar in expanded view */
#enhancedStreakCalendar,
#calendarFull {
  max-width: 400px;
  margin: 20px auto;
  background: var(--theme-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--theme-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.enhanced-streak-display {
display: none;
}

.tool-fullscreen-main {
  padding: 30px;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#enhancedStreakCalendar .calendar-day,
#calendarFull .calendar-day {
  min-height: 40px;
  font-size: 14px;
  border-radius: 8px;
  font-weight: 600;
}

.calendar-day:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.calendar-day.today {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
  border: 2px solid #34d399 !important;
  position: relative;
}

.calendar-day.today::after {
  content: '🎯';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 8px;
  background: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day.login-day {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
  border: 2px solid #60a5fa !important;
  position: relative;
}

.calendar-day.login-day::after {
  content: '🔥';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 8px;
  background: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day.missed-day {
  background: var(--theme-background) !important;
  color: var(--theme-text-secondary) !important;
  opacity: 0.5 !important;
  border: 1px dashed var(--theme-border) !important;
  position: relative;
}

.calendar-day.future-day {
  background: var(--theme-background) !important;
  color: var(--theme-text-secondary) !important;
  opacity: 0.7 !important;
  border: 1px solid var(--theme-border) !important;
}

.calendar-day.empty {
  background: transparent !important;
  opacity: 0.2 !important;
  cursor: default !important;
  border: none !important;
}

/* Calendar day header styling */
.calendar-day-header {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-surface);
  font-size: 10px;
  font-weight: bold;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  min-height: 32px;
}

/* Enhanced calendar navigation */
.calendar-header-full {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--theme-surface);
  border-radius: 12px;
  border: 1px solid var(--theme-border);
}

.calendar-nav-btn {
  background: var(--theme-primary);
  color: white;
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: bold;
}

.calendar-nav-btn:hover {
  background: var(--theme-primary-dark);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#currentMonth {
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-text);
  margin: 0;
  text-align: center;
  flex: 1;
}

/* Menu Item with Enhanced Hover Effects */
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-16) var(--space-20);
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: var(--space-8);
  text-align: left;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
  transition: left 0.5s;
}

.menu-item:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.1),
    0 3px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-item:hover::before {
  left: 100%;
}

.menu-item:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Theme Option with Enhanced Hover Effects */
.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--space-8);
}

.theme-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
  transition: left 0.5s;
}

.theme-option:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.1),
    0 3px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-option:hover::before {
  left: 100%;
}

.theme-option:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.calendar-day {
  font-weight: var(--font-weight-medium);
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  position: relative;
  border-radius: var(--radius-sm);
}

.calendar-day:hover {
  background: var(--theme-primary);
  color: white;
  transform: scale(1.05);
}

.calendar-day.other-month {
  color: var(--theme-text-secondary);
  opacity: 0.5;
}

.calendar-day.today {
  background: var(--theme-primary);
  color: white;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.calendar-day.logged-in {
  background: linear-gradient(135deg, var(--theme-success), var(--theme-primary));
  color: white;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(var(--color-success-rgb), 0.4);
  position: relative;
}

.calendar-day.logged-in::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--theme-success);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.calendar-day.current-streak {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
  animation: pulse 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shine-effect {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200% 100%;
  animation: shine 1s ease-in-out;
}

.control-btn.running {
  background: var(--theme-error) !important;
  color: white !important;
}

.control-btn.running:hover {
  background: var(--theme-error-hover) !important;
}

.calendar-day-header {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-background);
  font-size: 12px;
  font-weight: bold;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  min-height: 35px;
}

/* Streak Stats */
.streak-stats {
  display: flex;
  justify-content: space-around;
  margin-top: var(--space-20);
  padding: var(--space-16);
  background: var(--theme-background);
  border-radius: var(--radius-lg);
  border: 1px solid var(--theme-border);
}

.streak-stats .stat-item {
  text-align: center;
}

.streak-stats .stat-number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  margin-bottom: var(--space-4);
}

.streak-stats .stat-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pomodoro Timer Styles */
.pomodoro-display {
  text-align: center;
  margin: var(--space-20) 0;
}

.pomodoro-phase {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-primary);
  margin-bottom: var(--space-8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pomodoro-time {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--theme-text);
  margin-bottom: var(--space-16);
}

.pomodoro-progress {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-20);
}

.progress-ring {
  position: relative;
  display: inline-block;
}

.progress-ring-svg {
  transform: rotate(-90deg);
}

.progress-ring-circle-bg {
  fill: none;
  stroke: var(--theme-border);
  stroke-width: 4;
}

.progress-ring-circle {
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.pomodoro-controls {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  margin-bottom: var(--space-20);
}

.pomodoro-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

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

.setting-group label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  margin-bottom: var(--space-4);
}

.setting-group input {
  width: 100%;
  text-align: center;
}

/* Analytics Widget Styles */
.analytics-widget {
  margin: var(--space-20) 0;
}

.analytics-chart {
  margin-bottom: var(--space-20);
  text-align: center;
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}

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

.metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  margin-bottom: var(--space-4);
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Music Player Styles */
.music-player {
  margin: var(--space-20) 0;
}

.music-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.music-btn {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--theme-text);
  cursor: pointer;
  padding: var(--space-8);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-standard);
}

.music-btn:hover {
  background: var(--theme-primary);
  color: white;
  transform: scale(1.1);
}

.music-btn--play {
  font-size: var(--font-size-2xl);
}

.music-info {
  text-align: center;
  margin-bottom: var(--space-16);
}

.track-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
  margin-bottom: var(--space-4);
}

.track-artist {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

.music-progress {
  margin-bottom: var(--space-16);
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  margin-top: var(--space-4);
}

.playlist-selector {
  margin-bottom: var(--space-16);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.volume-slider {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--theme-border);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--theme-primary);
  cursor: pointer;
}

/* Wellness Widget Styles */
.wellness-widget {
  margin: var(--space-20) 0;
}

.wellness-timer {
  text-align: center;
  margin-bottom: var(--space-20);
}

.wellness-display {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--theme-success);
  margin-bottom: var(--space-4);
}

.wellness-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wellness-activities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  margin-bottom: var(--space-20);
}

.wellness-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12);
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.wellness-btn:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.wellness-btn span:first-child {
  font-size: var(--font-size-xl);
}

.wellness-btn span:last-child {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.wellness-tips {
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}

.wellness-tips-full {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px var(--theme-shadow);
  min-height: 200px;
  overflow-y: auto;
  max-height: 400px;
}

.wellness-tips h4 {
  margin: 0 0 var(--space-12) 0;
  font-size: var(--font-size-lg);
  color: var(--theme-text);
}

.tip-content {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  margin-bottom: var(--space-12);
  line-height: 1.5;
}

.tips-carousel {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.tip-card {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(59, 130, 246, 0.2);
  width: 100%;
}

.tip-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.tip-content h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  color: var(--theme-text);
}

.tip-content p {
  margin: 0;
  color: var(--theme-text-secondary);
  line-height: 1.6;
}

.tip-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  background: var(--theme-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tip-nav-btn:hover {
  background: var(--theme-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Smart Notes Styles */
.notes-widget {
  margin: var(--space-20) 0;
}

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

.notes-header h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--theme-text);
}

.notes-textarea {
  margin-bottom: var(--space-16);
  resize: vertical;
  min-height: 120px;
}

.notes-actions {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.notes-insights {
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}

.insight-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.insight-icon {
  font-size: var(--font-size-lg);
}

.insight-text {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

/* Goal Tracker Styles */
.goals-widget {
  margin: var(--space-20) 0;
}

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

.goals-header h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--theme-text);
}

.goals-list {
  margin-bottom: var(--space-20);
}

.goal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-12);
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.goal-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  transform: scaleX(0);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.goal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--theme-primary);
}

.goal-item:hover::before {
  transform: scaleX(1);
}

.goal-item.completed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.05));
  border-color: rgba(16, 185, 129, 0.3);
}

.goal-item.completed::before {
  background: linear-gradient(90deg, #10b981, #059669);
  transform: scaleX(1);
}

.goal-item.progress-updated {
  animation: goalPulse 1s ease-in-out;
}

@keyframes goalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.goal-content {
  flex: 1;
  min-width: 0;
}

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

.goal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--theme-text);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-status {
  flex-shrink: 0;
  margin-left: var(--space-12);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--theme-primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-badge.completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.goal-progress-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.goal-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  font-weight: var(--font-weight-medium);
}

.progress-percentage {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  background: rgba(59, 130, 246, 0.1);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.goal-progress-bar {
  width: 100%;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: var(--theme-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

.progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
  border-radius: var(--radius-full);
  animation: progressGlow 1.5s ease-in-out infinite;
}

@keyframes progressShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

@keyframes progressGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.goal-item.completed .progress-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}

.goal-item.completed .progress-percentage {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

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

.goal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.goal-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 70%, transparent 100%);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  opacity: 0;
}

.goal-btn:hover::before {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.goal-btn .btn-icon {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.goal-btn:hover .btn-icon {
  transform: scale(1.1);
}

.goal-btn.progress-btn {
  color: var(--theme-primary);
  border-color: rgba(59, 130, 246, 0.3);
}

.goal-btn.progress-btn:hover {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.goal-btn.complete-btn {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.goal-btn.complete-btn:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.goal-btn.edit-btn {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.goal-btn.edit-btn:hover {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.goal-btn.delete-btn {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.goal-btn.delete-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.goal-btn.add-btn {
  color: var(--theme-primary);
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}

.goal-btn.add-btn:hover {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.goals-summary {
  display: flex;
  justify-content: space-around;
  padding: var(--space-20);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}

.goals-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.summary-item {
  text-align: center;
  position: relative;
  z-index: 1;
}

.summary-number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.summary-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-medium);
}

/* Empty state styling */
.goal-item.empty-state {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
  border: 2px dashed rgba(59, 130, 246, 0.3);
  text-align: center;
  padding: var(--space-24);
}

.goal-item.empty-state:hover {
  border-color: var(--theme-primary);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

.empty-goal-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.empty-icon {
  font-size: 3rem;
  opacity: 0.7;
  animation: goalBounce 2s ease-in-out infinite;
}

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

.empty-goal-message p {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.timer-display {
  margin-top: var(--space-24);
}

.timer-time {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-primary);
  margin-bottom: var(--space-16);
  font-family: var(--font-family-mono);
}

.timer-controls {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
}

/* Break Timer */
.break-timer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-overlay-background);
  backdrop-filter: blur(20px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-standard);
}

/* Theme-specific overlay adjustments removed - using theme variables instead */

.break-timer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.break-timer-content {
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.break-timer-header h2 {
  color: var(--theme-text);
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

.break-timer-exit {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  backdrop-filter: blur(10px);
}

.break-timer-exit:hover {
  background: var(--theme-primary) !important;
  color: white !important;
  transform: scale(1.05);
}

.break-timer-body {
  display: flex;
  gap: var(--space-32);
  flex: 1;
  min-height: 500px;
  overflow: hidden;
}

.break-timer-main {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.break-timer-display-large {
  text-align: center;
  margin-bottom: var(--space-32);
}

.timer-time-large {
  font-size: 6rem;
  font-weight: 700;
  color: var(--theme-text);
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.3);
  margin-bottom: var(--space-16);
  position: relative;
  transition: all var(--duration-fast) var(--ease-standard);
  animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.timer-time-large::before {
  content: attr(data-time);
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 1;
}

.timer-status {
  font-size: var(--font-size-lg);
  color: var(--theme-text-secondary);
  font-weight: 500;
  text-align: center;
}

.break-timer-controls-large {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 500px;
  align-items: center;
}

.timer-presets-large {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
}

.timer-presets-large .btn {
  min-width: 80px;
  font-size: var(--font-size-sm);
}

.manual-timer-input {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  justify-content: center;
  margin: var(--space-16) 0;
  padding: var(--space-16);
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.input-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.input-group input {
  width: 60px;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 600;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-surface);
  color: var(--theme-text);
}

.input-group input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
}

.input-label {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  font-weight: 500;
  min-width: 30px;
}

.timer-controls-large {
  display: flex;
  gap: var(--space-16);
  justify-content: center;
}

.timer-controls-large .btn {
  min-width: 120px;
  font-size: var(--font-size-lg);
  padding: var(--space-16) var(--space-24);
}

.break-timer-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 280px;
  max-width: 320px;
  overflow: hidden;
}

.break-options,
.break-suggestions {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.break-options h3,
.break-suggestions h3 {
  color: var(--theme-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-16);
  font-weight: 600;
}

.option-group {
  margin-bottom: var(--space-16);
}

.option-group:last-child {
  margin-bottom: 0;
}

.option-group .form-label {
  color: var(--theme-text);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-8);
  display: block;
  font-weight: 500;
}

.option-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-height: 200px;
  overflow-y: auto;
  padding-right: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary) transparent;
}

.suggestion-list::-webkit-scrollbar {
  width: 6px;
}

.suggestion-list::-webkit-scrollbar-track {
  background: transparent;
}

.suggestion-list::-webkit-scrollbar-thumb {
  background: var(--theme-primary);
  border-radius: 3px;
}

.suggestion-list::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary-hover);
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10);
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  color: var(--theme-text);
  font-size: var(--font-size-sm);
  transition: all var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-item:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}

.suggestion-item span:first-child {
  font-size: var(--font-size-lg);
  min-width: 24px;
  flex-shrink: 0;
}

.suggestion-item span:last-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Break Timer in Tools Tab */
.break-timer-display {
  text-align: center;
  margin-top: var(--space-16);
}

.timer-presets {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
}

.timer-presets .btn {
  font-size: var(--font-size-xs);
  padding: var(--space-6) var(--space-12);
  min-width: 60px;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-overlay-background);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  perspective: 1000px;
  animation: modalOverlayEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.8) rotateX(15deg);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow: 
    0 50px 100px rgba(0, 0, 0, 0.25),
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  animation: modalEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: 0.1s;
}

.modal-overlay.active .modal {
  animation: float 6s ease-in-out infinite;
}

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

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%),
    radial-gradient(circle at 80% 80%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.modal-overlay.active .modal {
  transform: scale(1) rotateX(0deg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-32) var(--space-32) 0;
  position: relative;
  z-index: 2;
}

.modal-header h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--theme-text), var(--theme-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.02em;
}

.modal-close {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--theme-text);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.modal-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.5s;
}

.modal-close:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Enhanced Glass Modal for Dropdowns */
.glass-modal {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.glass-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.glass-modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%),
    radial-gradient(circle at 80% 80%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%);
  pointer-events: none;
  z-index: 1;
}

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

/* Compact Layout for Theme Selection Dropdown - Opaque */
.theme-dropdown {
  position: absolute;
  top: 60px;
  right: 0;
  min-width: 200px;
  padding: var(--space-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

/* Compact Theme Options */
.theme-options {
  display: grid;
  gap: var(--space-6);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16);
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

.theme-option:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-option {
  animation: shimmer 3s ease-in-out infinite;
}

.theme-dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%),
    radial-gradient(circle at 80% 80%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.theme-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Profile Dropdown - Opaque */
.profile-dropdown {
  position: absolute;
  top: 60px;
  right: 0;
  min-width: 220px;
  max-width: 260px;
  padding: var(--space-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: 200;
  background: var(--theme-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  overflow: hidden;
}

/* Remove decorative bar on profile dropdown for opaque look */
.profile-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.profile-dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%),
    radial-gradient(circle at 80% 80%, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.profile-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Force theme dropdown opaque */
.theme-dropdown {
  background: var(--theme-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2) !important;
}

.modal-close:hover::before {
  left: 100%;
}

.modal-body {
  padding: var(--space-32);
  position: relative;
  z-index: 2;
}

/* Default: hide desktop-aside on mobile to keep mobile UI unchanged */
.modal-aside { display: none; }

/* Desktop-enhanced modal grid for Add Video / Create Playlist */
@media (min-width: 900px) {
  /* Make modal larger on desktop but keep mobile as-is */
  .modal-overlay#addVideoModal .modal,
  .modal-overlay#createPlaylistModal .modal {
    max-width: 980px;
  }

  .modal-overlay#addVideoModal .modal-body,
  .modal-overlay#createPlaylistModal .modal-body {
    padding-top: var(--space-24);
  }

  .modal-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: start;
  }

  .modal-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .modal-aside-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  }

  .aside-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text);
  }

  .preview-box {
    position: relative;
    border-radius: 12px;
    border: 1px dashed var(--theme-border);
    background: rgba(0,0,0,0.04);
    overflow: hidden;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .preview-box.playlist { min-height: 120px; }

  .preview-box img {
    width: 100%;
    height: auto;
    display: block;
  }

  .preview-placeholder {
    text-align: center;
    color: var(--theme-text-secondary);
    padding: 20px;
  }

  .placeholder-icon { font-size: 28px; margin-bottom: 8px; }
  .placeholder-text { font-size: 13px; }

  .aside-actions { margin-top: 12px; display: flex; gap: 8px; }

  .tip-list {
    margin: 0;
    padding-left: 18px;
    color: var(--theme-text-secondary);
    font-size: 13px;
    display: grid;
    gap: 6px;
  }

  .tip-list li { line-height: 1.4; }

  .playlist-preview-details {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: rgba(0,0,0,0.04);
    border-top: 1px solid var(--theme-border);
  }

  .detail-row { display: flex; gap: 8px; font-size: 13px; }
  .detail-label { color: var(--theme-text-secondary); min-width: 90px; }
  .detail-value { color: var(--theme-text); font-weight: 500; }
  .detail-value.status { color: var(--theme-primary); }

  .import-note { margin-top: 8px; font-size: 12px; color: var(--theme-text-secondary); }
}

/* Forms */
.auth-form,
.video-form,
.playlist-form {
  display: grid;
  gap: var(--space-24);
}

.form-group {
  display: grid;
  gap: var(--space-8);
  position: relative;
}

.form-label {
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.form-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-primary);
}

.form-control {
  padding: var(--space-16) var(--space-20);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-size: var(--font-size-base);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-control:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.2),
    inset 0 2px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
}

.form-control:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  transform: translateY(-2px);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
  border-radius: 16px;
}

.auth-footer {
  text-align: center;
  margin-top: var(--space-24);
  padding: var(--space-24) var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.form-hint {
  color: var(--theme-text-secondary);
  font-size: 12px;
  margin-top: 4px;
  display: block;
  font-style: italic;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  position: relative;
  padding-left: 16px;
}

.form-hint::before {
  content: 'ℹ️';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}

.form-hint:hover {
  opacity: 1;
}

.auth-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--theme-primary), 
    transparent);
}

.auth-link {
  background: none;
  border: none;
  color: var(--theme-primary);
  cursor: pointer;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  position: relative;
  padding: var(--space-4) 0;
  transition: all 0.3s ease;
}

.auth-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--theme-primary);
  transition: width 0.3s ease;
}

.auth-link:hover {
  color: var(--theme-primary-hover);
}

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

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: var(--space-32);
  right: var(--space-32);
  z-index: 100;
}

.fab-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  border: none;
  color: white;
  font-size: var(--font-size-2xl);
  cursor: pointer;
  box-shadow: 0 8px 32px var(--theme-shadow);
  transition: all var(--duration-normal) var(--ease-standard);
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px var(--theme-shadow);
}

.fab-menu {
  position: absolute;
  bottom: 80px;
  right: 0;
  min-width: 200px;
  padding: var(--space-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all var(--duration-normal) var(--ease-standard);
}

.fab-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.fab-action {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-8);
  text-align: left;
}

.fab-action:hover {
  background: var(--theme-surface-hover);
  transform: translateX(-4px);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.toast {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: var(--space-20) var(--space-24);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-width: 300px;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 400px;
  position: relative;
  overflow: hidden;
}

.toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--theme-primary);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.toast-message {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
}

.toast-close {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--theme-text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.toast-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.5s;
}

.toast-close:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.toast-close:hover::before {
  left: 100%;
}

.toast--success::before {
  background: var(--theme-success);
}

.toast--error::before {
  background: var(--theme-error);
}

.toast--warning::before {
  background: var(--theme-warning);
}

.toast--info::before {
  background: var(--theme-primary);
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-overlay-background);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  perspective: 1000px;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-content {
  background: linear-gradient(135deg, 
    var(--theme-overlay-surface) 0%, 
    var(--theme-overlay-background) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--theme-border);
  border-radius: 24px;
  box-shadow: 
    0 50px 100px var(--theme-shadow-heavy),
    0 20px 40px var(--theme-shadow-medium),
    0 8px 16px var(--theme-shadow-light),
    inset 0 1px 0 var(--theme-glass-highlight);
  padding: var(--space-32);
  text-align: center;
  transform: scale(0.8) rotateX(15deg);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  max-width: 400px;
  width: 90%;
}

.loading-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.loading-overlay.active .loading-content {
  transform: scale(1) rotateX(0deg);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--theme-border-light);
  border-top: 4px solid var(--theme-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-24);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Floating animation for Google button */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Spinner animation for loading states */
.spinner {
  animation: rotate 1s linear infinite;
}

.spinner circle {
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

.loading-text {
  color: var(--theme-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.loading-message {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  margin-top: var(--space-12);
  max-width: 300px;
  line-height: 1.4;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

.btn--full-width {
  width: 100%;
}

.btn--sm {
  padding: var(--space-6) var(--space-12);
  font-size: var(--font-size-sm);
}

/* Content Cards */
.empty-state {
  text-align: center;
  padding: var(--space-32);
  color: var(--theme-text-secondary);
  background: var(--theme-surface);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--theme-border);
  margin: 2rem auto;
  max-width: 500px;
  transition: all 0.3s ease;
  /* Simple centering for grid containers */
  grid-column: 1 / -1;
  justify-self: center;
}

.empty-state:hover {
  border-color: var(--theme-primary);
  background: var(--theme-surface-hover);
  transform: translateY(-2px);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-16);
  opacity: 0.7;
}

.empty-state h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-12);
  color: var(--theme-text);
}

.empty-state p {
  margin-bottom: var(--space-24);
  font-size: var(--font-size-lg);
}

.playlist-card, .video-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateZ(0);
  will-change: transform;
  /* Remove padding from the main card */
  padding: 0; 
  /* Add overflow hidden to contain the child elements */
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  /* Enhanced 3D effect */
  transform-style: preserve-3d;
  perspective: 1000px;
}

.playlist-card::before,
.video-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  border-radius: 16px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.playlist-card:hover::before,
.video-card:hover::before {
  opacity: 1;
}

.playlist-card .playlist-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  /* Remove the margin that creates the gap */
  margin-bottom: 0; 
  position: relative;
  background: transparent;
  /* Add padding here instead of the parent card */
  padding: var(--space-24); 
  padding-bottom: var(--space-16); /* This controls the space above the thumbnail */
  z-index: 2;
}

.playlist-card .playlist-header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--theme-text);
  transition: all 0.3s ease;
}

.playlist-card:hover .playlist-header h3 {
  color: var(--theme-primary);
  transform: translateX(5px);
}

.playlist-header-actions .btn {
  padding: var(--space-6) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-base);
}

.playlist-actions {
  display: flex;
  gap: var(--space-8);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  align-self: flex-end;
  z-index: 2;
  width: 100%;
  justify-content: center;
}

.playlist-card:hover .playlist-actions,
.video-card:hover .video-actions {
  opacity: 1;
}

/* Ensure action buttons are visible by default */
.playlist-actions,
.video-actions {
  opacity: 1 !important;
}

.playlist-description {
  color: var(--theme-text-secondary);
  margin-bottom: var(--space-20);
  font-size: var(--font-size-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: var(--space-20);
  z-index: 2;
  opacity: 0.8;
}

.playlist-card:hover .playlist-description {
  opacity: 1;
  transform: translateY(-3px);
}

.playlist-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 var(--space-24) var(--space-24) var(--space-24);
  z-index: 2;
  opacity: 0.8;
}

.playlist-card:hover .playlist-stats {
  opacity: 1;
  transform: translateY(-3px);
  color: var(--theme-text);
}

.video-card {
  overflow: visible;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--theme-surface);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 0;
}

.video-thumbnail img {
  width: 100%;
  height: 200px; /* Increased from 120px */
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  background: var(--theme-overlay-background);
  color: var(--theme-text);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-mono);
}

.video-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  z-index: 2;
  padding: var(--space-24);
  padding-top: var(--space-16);
  position: relative;
  background: transparent;
}

.video-info h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-12);
  line-height: 1.4;
  animation: none;
  flex-grow: 1;
  transition: all 0.3s ease;
  color: var(--theme-text);
}

.video-card:hover .video-info h3 {
  color: var(--theme-primary);
  transform: translateX(5px);
}

.video-actions {
  display: flex;
  gap: var(--space-8);
  opacity: 1 !important;
  transition: opacity var(--duration-fast) var(--ease-standard);
  z-index: 2;
  width: 100%;
  justify-content: center;
  overflow: visible;
  position: relative;
}

.video-card.glass-card:hover,
.video-card:hover {
  cursor: pointer;
  transform: translateY(-8px) scale(1.02) rotateX(3deg);
  box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(59, 130, 246, 0.05),
              0 0 0 2px var(--theme-primary);
  background: var(--theme-surface-hover);
  border-color: var(--theme-primary);
  z-index: 10;
  /* Subtle glow effect */
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.15));
}

.playlist-card.glass-card:hover,
.playlist-card:hover {
  transform: translateY(-8px) scale(1.02) rotateX(3deg);
  box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(59, 130, 246, 0.05),
              0 0 0 2px var(--theme-primary);
  background: var(--theme-surface-hover);
  border-color: var(--theme-primary);
  z-index: 10;
  /* Subtle glow effect */
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.15));
}

.playlist-card:hover .playlist-description,
.playlist-card:hover .playlist-stats {
  color: var(--theme-text);
}

/* Enhanced hover effects for elegant pop-out animation */
.playlist-card:hover,
.video-card:hover {
  transform: translateY(-8px) scale(1.02) rotateX(3deg);
  box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(59, 130, 246, 0.05),
              0 0 0 2px var(--theme-primary);
  z-index: 10;
  /* Subtle glow effect */
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.15));
}

.playlist-card::after,
.video-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.playlist-card:hover::after,
.video-card:hover::after {
  opacity: 0.7;
  animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
  }
  50% {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
  }
  100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
  }
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--theme-surface);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateZ(0);
  margin-bottom: 0;
}

.video-card:hover .video-thumbnail {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.video-thumbnail img {
  width: 100%;
  height: 200px; /* Increased from 120px */
  object-fit: cover;
  display: block;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: var(--radius-base);
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.1);
  filter: brightness(1.05) saturate(1.1);
  border-radius: var(--radius-lg);
}

/* AI Features Section */
.ai-features {
  display: flex;
  gap: var(--space-8);
  margin: var(--space-12) 0;
  justify-content: center;
  flex-wrap: wrap;
}

.ai-feature-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.ai-feature-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--theme-primary);
  z-index: 2;
}

.ai-feature-btn:active {
  transform: translateY(0) scale(0.98);
}

.ai-feature-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.ai-feature-btn:hover::before {
  opacity: 1;
}

.ai-icon {
  font-size: var(--font-size-base);
  transition: transform 0.3s ease;
}

.ai-feature-btn:hover .ai-icon {
  transform: scale(1.2) rotate(10deg);
}

.ai-label {
  transition: all 0.3s ease;
}

/* Specific styles for different AI feature buttons */
.notes-btn {
  --btn-color: #3b82f6; /* Blue */
  color: var(--btn-color);
  border-color: rgba(59, 130, 246, 0.3);
}

.notes-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--btn-color);
}

.quiz-btn {
  --btn-color: #10b981; /* Green */
  color: var(--btn-color);
  border-color: rgba(16, 185, 129, 0.3);
}

.quiz-btn:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--btn-color);
}

.summary-btn {
  --btn-color: #8b5cf6; /* Purple */
  color: var(--btn-color);
  border-color: rgba(139, 92, 246, 0.3);
}

.summary-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--btn-color);
}

.theme-option.active {
  background: var(--theme-surface-hover);
  transform: translateX(4px);
}

.theme-option.active .theme-preview {
  box-shadow: 0 0 0 3px var(--theme-primary);
}

/* Responsive Design for AI Features */
@media (max-width: 768px) {
  .ai-features {
    gap: var(--space-6);
  }
  
  .ai-feature-btn {
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-size-xs);
  }
  
  .ai-icon {
    font-size: var(--font-size-sm);
  }
}

/* AI Features Container */
.ai-features-container {
  margin: var(--space-16) 0;
  padding: var(--space-12);
  background: var(--theme-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-sm);
}

/* AI Features Section in Video Player */
.ai-features {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Make AI buttons obviously visible on desktop under the player */
@media (min-width: 769px) {
  .video-player-main .ai-features { justify-content: center; gap: 12px; }
}

/* AI Features in Video Cards */
.video-card .ai-features {
  gap: var(--space-8);
  margin: var(--space-12) 0;
  justify-content: center;
}

.video-card .svg-button {
  width: 40px;
  height: 40px;
  padding: var(--space-8);
}

/* SVG Buttons */
.svg-button {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  padding: var(--space-12);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.svg-button:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: var(--shadow-md);
  border-color: var(--theme-primary);
  z-index: 2;
}

.svg-button:active {
  transform: translateY(0) scale(0.98);
}

.svg-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.svg-button:hover::before {
  opacity: 1;
}

.svg-path {
  stroke: var(--theme-text);
  transition: all 0.3s ease;
  stroke-width: 1.5;
  fill: none;
}

.svg-button:hover .svg-path {
  stroke-width: 2;
  stroke: var(--theme-primary);
}

/* Specific styles for different AI feature buttons */
.notes-btn .svg-path {
  stroke: #3b82f6; /* Blue for Notes */
}

.notes-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.quiz-btn .svg-path {
  stroke: #10b981; /* Green for Quiz */
}

.quiz-btn:hover {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
}

.summary-btn .svg-path {
  stroke: #8b5cf6; /* Purple for Summary */
}

.summary-btn:hover {
  background-color: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
}

/* Responsive Design for SVG Buttons */
@media (max-width: 768px) {
  .svg-button {
    padding: var(--space-10);
    width: 45px;
    height: 45px;
  }
  
  .ai-features {
    gap: var(--space-8);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .charts-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .activity-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .primary-tools-row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .secondary-tools-row {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .header {
    padding: var(--space-12) var(--space-16);
  }
  
  .header-content {
    gap: var(--space-12);
  }
  
  .logo {
    font-size: var(--font-size-xl);
  }
  
  .header-controls {
    gap: var(--space-8);
  }
  
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    margin: var(--space-16);
    position: static;
    min-height: auto;
  }
  
  .content-area {
    padding: var(--space-16);
  }
  
  .tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  /* Mobile: make playlists layout consistent with Videos tab (2 columns) */
  .playlists-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .videos-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .fab {
    bottom: var(--space-20);
    right: var(--space-20);
  }
  
  .fab-button {
    width: 56px;
    height: 56px;
  }
  
  /* Mobile-specific dropdown positioning to prevent cutoff */
  .theme-dropdown,
  .profile-dropdown {
    position: fixed !important;
    top: 80px !important;
    bottom: auto !important;
    left: auto !important;
    right: 15px !important;
    transform: none !important;
    width: 75% !important;
    max-width: 320px !important;
    min-width: 250px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 10px 20px rgba(0, 0, 0, 0.2) !important;
    background: var(--theme-overlay-surface, var(--theme-surface)) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid var(--theme-border) !important;
    z-index: 1000 !important;
  }
  
  /* Dark mode mobile dropdowns */
  [data-color-scheme="dark"] .theme-dropdown,
  [data-color-scheme="dark"] .profile-dropdown {
    background: linear-gradient(135deg, 
      rgba(30, 41, 59, 0.95) 0%, 
      rgba(30, 41, 59, 0.9) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
  }
  
  /* Ensure dropdowns are properly visible when active */
  .theme-dropdown.active,
  .profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
    animation: mobileDropdownSlideInFromRight 0.3s ease-out !important;
  }
  
  /* Mobile dropdown slide-in animation from right */
  @keyframes mobileDropdownSlideInFromRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Mobile theme options styling */
  .theme-dropdown .theme-options {
    gap: var(--space-8) !important;
    padding: var(--space-12) !important;
  }
  
  .theme-dropdown .theme-option {
    padding: var(--space-16) var(--space-20) !important;
    border-radius: 16px !important;
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--space-8) !important;
    background: var(--theme-overlay-surface, var(--theme-surface)) !important;
    border: 1px solid var(--theme-border) !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .theme-dropdown .theme-option:hover,
  .theme-dropdown .theme-option:active {
    background: var(--theme-overlay-surface-hover, var(--theme-surface-hover)) !important;
    border: 1px solid var(--theme-border) !important;
    transform: scale(1.02) !important;
  }
  
  /* Mobile profile dropdown styling */
  .profile-dropdown .profile-menu {
    padding: var(--space-20) !important;
  }
  
  .profile-dropdown .menu-item {
    padding: var(--space-16) var(--space-20) !important;
    border-radius: 16px !important;
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--space-8) !important;
    background: var(--theme-overlay-surface, var(--theme-surface)) !important;
    border: 1px solid var(--theme-border) !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .profile-dropdown .menu-item:hover,
  .profile-dropdown .menu-item:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.02) !important;
  }
  
  /* Ensure proper spacing and readability on mobile */
  .profile-dropdown .user-info {
    margin-bottom: var(--space-20) !important;
    padding-bottom: var(--space-16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  
  .profile-dropdown .user-avatar-large {
    width: 50px !important;
    height: 50px !important;
    font-size: var(--font-size-xl) !important;
  }
  
  .profile-dropdown .user-details h3 {
    font-size: var(--font-size-base) !important;
  }
  
  .profile-dropdown .user-details p {
    font-size: var(--font-size-sm) !important;
  }
  
  /* Ensure dropdowns don't interfere with other mobile elements */
  .theme-dropdown::before,
  .theme-dropdown::after,
  .profile-dropdown::before,
  .profile-dropdown::after {
    display: none !important;
  }
  
  /* Add backdrop overlay for mobile dropdowns */
  .theme-dropdown.active::before,
  .profile-dropdown.active::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    z-index: -1 !important;
    display: block !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    animation: backdropFadeIn 0.3s ease-out !important;
  }
  
  /* Backdrop fade-in animation */
  @keyframes backdropFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Guest CTA styling - stacked, sleek, compact, both blue */
.guest-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
}

.guest-auth-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  padding: 10px 14px !important;
  font-weight: 700;
}

/* Slightly tighter layout inside the profile dropdown for guest CTAs */
.profile-dropdown .guest-cta .btn {
  margin: 0;
}

/* Profile Dropdown Header - Avatar + Name + Email */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--theme-border);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

.profile-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  color: #fff;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  box-shadow: 0 6px 18px var(--theme-shadow);
  border: 2px solid var(--theme-border);
  flex: 0 0 56px;
}

.profile-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow text ellipsis */
}

.profile-user-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--theme-text);
  line-height: 1.2;
}

.profile-user-email {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Premium lock tooltip */
.lock-tooltip {
  position: relative;
}
.lock-tooltip[data-tooltip]:hover::before,
.lock-tooltip[data-tooltip]:hover::after {
  opacity: 1;
  pointer-events: none; /* Tooltip should never block clicks */
}
.lock-tooltip::before {
  pointer-events: none !important;
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 30;
}
.lock-tooltip::after {
  pointer-events: none !important;
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--theme-border) transparent;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 29;
}

/* Lock styles for premium nav items */
.nav-item.locked {
  position: relative;
  opacity: 0.7;
  cursor: not-allowed;
}
.nav-item.locked::after {
  content: '🔒';
  position: absolute;
  right: 12px;
  font-size: 14px;
}

/* AI features PRO lock treatment */
.ai-features.pro-locked { position: relative; }
.ai-features.pro-locked .svg-button { opacity: .5; pointer-events: none; filter: grayscale(0.15); }
.ai-features.pro-locked::after { content: '🔒'; position: absolute; top: -6px; right: -6px; font-size: 12px; opacity: .9; }

/* Upgrade banner - consistent styling */
.upgrade-banner {
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  border-radius: 12px;
  padding: 20px;
}

/* Pricing Page Styles */
/* Layout helpers for pricing */
.pricing-grid { align-items: stretch; }
.pricing-card .cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;        /* Center the grid within the card */
  justify-items: center;          /* Center items inside their grid cells */
}
@media (max-width: 520px) {
  .pricing-card .cta-row { grid-template-columns: 1fr; }
}

/* Ensure CTA buttons are centered and not clipped */
.pricing-card .cta-row .btn {
  width: auto !important;         /* Avoid stretching edge-to-edge */
  max-width: 100%;
  justify-self: center;           /* Center each button in its cell */
}

/* Allow button shadows/overlays to render fully */
.pricing-card.featured { overflow: visible; }

/* Make hero convertible to grid item */
.card-wide { grid-column: 1 / -1; }

/* Elegant CTA pill buttons */
.btn--elegant,
.btn--primary.btn--elegant,
.btn--secondary.btn--elegant {
  border-radius: 999px !important;
  padding: 10px 16px !important;
  height: auto !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
/* Slightly smaller visual footprint for pricing CTAs */
.plan-cta.btn--elegant { font-weight: 700; padding: 8px 12px !important; min-height: 38px; font-size: 0.95rem; }

/* Ensure anchor buttons render like buttons inside cards */
.pricing-card a.btn { width: 100%; box-sizing: border-box; text-decoration: none; }

/* Comparison CTA alignment */
.comparison-cta { display: flex; justify-content: center; margin-top: 16px; }
.comparison-cta .btn { max-width: 320px; width: 100%; }

/* Better spacing for pricing hero */
.pricing-hero.card-wide { margin-top: 4px; }

/* Refinements for price rows */
.pro-card .plan-price.multi { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.pro-card .divider { width: 1px; height: 36px; background: var(--theme-border); }
.pro-card .price-row { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.pro-card .price-meta { display: flex; align-items: center; gap: 8px; justify-content: center; }
.pro-card .price-original { text-decoration: line-through; color: var(--theme-text-secondary); font-size: 0.9rem; }
.save-chip { background: rgba(16,185,129,0.1); color: #0f5132; border: 1px solid rgba(16,185,129,0.35); padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }

/* Pill utility class for other CTAs */
.pill { border-radius: 999px !important; }
/* Elegant CTA/button treatment reused across purchase buttons and comparison CTA */
.btn--elegant {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--elegant:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.btn--elegant::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.btn--elegant:hover::after { left: 120%; }

/* Make sure buttons adapt to theme */
.theme-light .btn--elegant { color: #0f172a; }
.theme-dark .btn--elegant { color: #e2e8f0; }

/* FAQ accordion + pricing hero theme-aware text */
.pricing-hero {
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(59,130,246,0.08), transparent), var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 20px;
}
.pricing-hero h3 {
  margin: 0 0 8px 0;
  font-size: 1.35rem;
}
.pricing-hero p { color: var(--theme-text-secondary); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.pricing-card {
  padding: 22px;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}
.pricing-card.featured {
  background: linear-gradient(180deg, rgba(59,130,246,0.10), transparent), var(--theme-surface);
  border-color: rgba(59,130,246,0.30);
}
.free-card .plan-title { color: var(--theme-text); }
.pro-card .plan-title { color: var(--theme-primary); }

.pricing-card-header { text-align: center; margin-bottom: 18px; }
.pricing-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--theme-background);
  border: 1px solid var(--theme-border);
  color: var(--theme-text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}
.pricing-badge.popular {
  background: #0ea5e9;
  color: white;
  border: none;
}
.plan-title { font-size: 1.35rem; margin: 8px 0; letter-spacing: 0.2px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.plan-price.multi { justify-content: space-between; gap: 12px; padding: 10px; border-radius: 12px; background: var(--theme-background); border: 1px dashed var(--theme-border); }
.price-option { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.price-row { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.price-meta { display: flex; align-items: center; gap: 8px; justify-content: center; }
.price-original { color: var(--theme-text-secondary); text-decoration: line-through; font-size: 0.9rem; }
.save-chip { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.3); padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.divider { width: 1px; background: var(--theme-border); }

.price-amount { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--theme-primary), #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.price-period { color: var(--theme-text-secondary); }
.plan-subtitle { color: var(--theme-text-secondary); margin-top: 6px; }

.feature-list { list-style: none; padding: 0; margin: 16px 0; }
.feature-list li { padding: 9px 0; border-bottom: 1px dashed var(--theme-border); color: var(--theme-text); display: flex; align-items: center; gap: 8px; }
.feature-list li:last-child { border-bottom: none; }
.feature-list .not-included { color: var(--theme-text-secondary); opacity: 0.8; }

.plan-cta { width: 100%; margin-top: 10px; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 520px) { .cta-row { grid-template-columns: 1fr; } }

/* Comparison */
.comparison-section { margin-top: 26px; border-radius: 20px; }
.comparison-title { margin: 0 0 14px 0; }
.comparison-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; column-gap: 0; row-gap: 10px; align-items: stretch; }
.comparison-head { font-weight: 700; color: var(--theme-text-secondary); padding: 10px; border-bottom: 1px solid var(--theme-border); }
.comparison-head.pro { color: var(--theme-primary); }
.comparison-row { color: var(--theme-text); padding: 10px; border-bottom: 1px dashed var(--theme-border); }
.comparison-cell { color: var(--theme-text-secondary); padding: 10px; border-bottom: 1px dashed var(--theme-border); }
.comparison-cell.pro { color: var(--theme-primary); font-weight: 600; }
.check { color: #10b981; font-weight: 700; }
.cross { color: #ef4444; font-weight: 700; }
.comparison-cta { text-align: center; margin-top: 24px; padding-bottom: 8px; }

.pricing-faq { margin-top: 24px; padding: 20px; border-radius: 16px; border: 1px solid var(--theme-border); background: var(--theme-surface); }
.pricing-faq h3 { margin-top: 0; color: var(--theme-text); }

/* Hero title/subtitle made theme-aware and legible */
.pricing-hero-title { color: var(--theme-text); margin: 0 0 8px 0; }
.pricing-hero-subtitle { color: var(--theme-text-secondary); margin: 0; }

/* Elegant purchase buttons in Pro card and comparison CTA */
.pro-card .plan-cta.btn--elegant.btn--primary {
  background: linear-gradient(135deg, var(--theme-primary), #60a5fa);
  color: #fff !important;
  border: none;
}
.pro-card .plan-cta.btn--elegant.btn--secondary {
  background: var(--theme-background);
  color: var(--theme-primary);
  border: 1px solid var(--theme-border);
}
.comparison-cta .btn--elegant {
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--theme-primary), #60a5fa);
  color: #fff !important;
  border: none;
}

/* Premium compact plan CTAs - elegant + compact redesign */
.pricing-card .plan-cta.btn--elegant {
  min-height: 36px !important;
  padding: 8px 14px !important;
  font-size: 0.92rem;
  border-radius: 12px !important;
  gap: 8px;
}

/* Shared icon/text layout */
.plan-cta .cta-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease;
}
.plan-cta .cta-label { letter-spacing: 0.2px; }

/* Monthly button: soft glass surface with theme border */
.plan-cta--monthly {
  background: linear-gradient(180deg, var(--theme-background), rgba(255,255,255,0.02));
  border: 1px solid var(--theme-border);
  color: var(--theme-primary);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.plan-cta--monthly:hover {
  transform: translateY(-1px);
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.plan-cta--monthly:focus-visible {
  outline: 2px solid rgba(59,130,246,0.45);
  outline-offset: 2px;
}

/* Yearly button: premium gradient with subtle gloss */
.plan-cta--yearly {
  background: linear-gradient(135deg, var(--theme-primary), #60a5fa);
  color: #fff !important;
  border: none;
  position: relative;
  box-shadow: 0 10px 22px rgba(59,130,246,0.28);
}
.plan-cta--yearly::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.plan-cta--yearly:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 14px 32px rgba(59,130,246,0.35);
}
.plan-cta--yearly:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

/* Micro-interaction for icons */
.plan-cta:hover .cta-icon { transform: translateY(-1px); }

/* Respect themes: ensure contrast for dark theme monthly button */
.theme-dark .plan-cta--monthly { color: var(--theme-text); }

/* FAQ accordion styles */
.faq-title { color: var(--theme-text); margin: 0 0 10px 0; }
.faq-accordion { display: grid; gap: 10px; }
.faq-accordion details {
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-surface);
  padding: 8px 12px;
}
.faq-accordion summary {
  list-style: none;
  cursor: pointer;
  color: var(--theme-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
  content: '▸';
  color: var(--theme-text-secondary);
  transition: transform .2s ease;
}
.faq-accordion details[open] summary::after { transform: rotate(90deg); }
.faq-accordion .faq-answer { color: var(--theme-text-secondary); padding: 8px 2px 2px; }
.faq-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.faq-item h4 { margin: 0 0 6px 0; }
.faq-item p { margin: 0; color: var(--theme-text-secondary); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* Additional mobile breakpoint for very small screens */
@media (max-width: 480px) {
  /* Even more compact spacing for small mobile screens */
  .theme-dropdown,
  .profile-dropdown {
    top: 70px !important;
    bottom: auto !important;
    left: auto !important;
    right: 10px !important;
    width: 80% !important;
    max-width: 280px !important;
    min-width: 220px !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 100px) !important;
  }
  
  .theme-dropdown .theme-option,
  .profile-dropdown .menu-item {
    padding: var(--space-12) var(--space-16) !important;
    font-size: var(--font-size-sm) !important;
  }
  
  .profile-dropdown .user-avatar-large {
    width: 40px !important;
    height: 40px !important;
    font-size: var(--font-size-lg) !important;
  }
  
  .profile-dropdown .user-details h3 {
    font-size: var(--font-size-sm) !important;
  }
  
  .profile-dropdown .user-details p {
    font-size: var(--font-size-xs) !important;
  }
  
  /* Analytics Responsive */
  .analytics-period-selector {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .period-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .metrics-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .metric-card {
    padding: 1rem;
  }
  
  .metric-value {
    font-size: 1.5rem;
  }
  
  .chart-card {
    padding: 1rem;
  }
  
  .chart-content {
    height: 200px;
  }
  
  .chart-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .insights-panel {
    gap: 0.75rem;
  }
  
  .insight-card {
    padding: 0.75rem;
  }
  
  .activity-card {
    padding: 1rem;
  }
  
  .activity-item {
    padding: 0.75rem;
  }
  
  .time-tracking-card {
    padding: 1rem;
  }
  
  .time-metrics {
    gap: 0.75rem;
  }
  
  .time-metric {
    padding: 0.75rem;
  }
  
  /* Tools Responsive */
  .tools-quick-access {
    justify-content: space-between;
    gap: 0.5rem;
  }
  
  .quick-access-btn {
    justify-content: center;
  }
  
  .primary-tools-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .secondary-tools-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .tool-card {
    padding: 1rem;
  }
  
  .tool-header {
    margin-bottom: 1rem;
  }
  
  .tool-content {
    gap: 1rem;
  }
  
  .timer-circle {
    width: 100px;
    height: 100px;
  }
  
  .timer-time {
    font-size: 1.25rem;
  }
  
  .streak-number {
    font-size: 2.5rem;
  }
  
  .break-time {
    font-size: 2rem;
  }
  
  .break-presets {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .preset-btn {
    padding: 0.5rem;
  }
  
  .wellness-activities {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .wellness-activity {
    padding: 0.75rem;
  }
  
  .notes-textarea {
    min-height: 100px;
  }
  
  .notes-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .goals-summary {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .goal-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .quick-action-btn {
    padding: 1rem 0.75rem;
  }
  
  .action-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    margin: var(--space-8);
  }
  
  .content-area {
    padding: var(--space-8);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .welcome-stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important; /* Added !important */
  gap: 1.5rem;
}
  
  .timer-controls {
    flex-direction: column;
  }
  
  .wellness-controls {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .customization-inputs .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  
  .customization-inputs label {
    min-width: auto;
    text-align: center;
  }
  
  .timer-input {
    width: 100%;
  }
  
  .wellness-circle {
    margin-bottom: 0.75rem;
  }
  
  .wellness-svg {
    width: 100px;
    height: 100px;
  }
  
  .wellness-display {
    font-size: 1.25rem;
  }
  
  .break-circle {
    margin-bottom: 0.75rem;
  }
  
  .break-svg {
    width: 100px;
    height: 100px;
  }
  
  .break-time {
    font-size: 1.25rem;
  }
  
  .modal {
    width: 95%;
    margin: var(--space-16);
  }
  
  /* Analytics Mobile */
  .tab-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .analytics-period-selector {
    width: 100%;
    justify-content: center;
  }
  
  .metric-card {
    padding: 0.75rem;
  }
  
  .metric-icon-wrapper {
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
  }
  
  .metric-icon {
    font-size: 1.25rem;
  }
  
  .metric-value {
    font-size: 1.25rem;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .chart-legend {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .chart-content {
    height: 150px;
  }
  
  .activity-item {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .activity-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .time-metric {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .time-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  /* Tools Mobile */
  .tools-quick-access {
    width: 100%;
  }
  
  .quick-access-btn {
    width: 100%;
  }
  
  .tool-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .tool-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  .tool-icon {
    font-size: 1.25rem;
  }
  
  .timer-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .control-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .break-presets {
    justify-content: center;
  }
  
  .preset-btn {
    min-width: 60px;
  }
  
  .wellness-activities {
    grid-template-columns: 1fr;
  }
  
  .notes-actions {
    flex-direction: column;
  }
  
  .action-btn {
    justify-content: center;
  }
  
  .goals-summary {
    gap: 0.5rem;
  }
  
  .goal-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .goal-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-action-btn {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 1rem;
  }
  
  .action-icon {
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
  }
  
  .playlist-actions,
  .video-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .mark-complete-btn,
  .video-actions .btn--secondary,
  .playlist-actions .btn--secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Force light text color on Dashboard feature cards/titles in dark mode */
[data-color-scheme="dark"] .feature-card,
.theme-dark .feature-card,
[data-color-scheme="dark"] .feature-card h3,
.theme-dark .feature-card h3,
[data-color-scheme="dark"] .feature-card p,
.theme-dark .feature-card p {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.24);
}

/* Ensure preset button text is visible in all themes */
[data-color-scheme="dark"] .preset-btn,
.theme-dark .preset-btn,
.theme-ocean .preset-btn,
.theme-forest .preset-btn,
.theme-sunset .preset-btn,
.theme-purple .preset-btn {
  color: #fff !important;
}

[data-color-scheme="dark"] .preset-btn:hover:not(.active),
.theme-dark .preset-btn:hover:not(.active),
.theme-ocean .preset-btn:hover:not(.active),
.theme-forest .preset-btn:hover:not(.active),
.theme-sunset .preset-btn:hover:not(.active),
.theme-purple .preset-btn:hover:not(.active) {
  color: var(--theme-primary) !important;
}

[data-color-scheme="dark"] .preset-time,
.theme-dark .preset-time,
.theme-ocean .preset-time,
.theme-forest .preset-time,
.theme-sunset .preset-time,
.theme-purple .preset-time,
[data-color-scheme="dark"] .preset-label,
.theme-dark .preset-label,
.theme-ocean .preset-label,
.theme-forest .preset-label,
.theme-sunset .preset-label,
.theme-purple .preset-label {
  color: inherit !important;
}

/* Always visible text in feature cards, regardless of theme */
.theme-dark .feature-card,
.theme-dark .feature-card h3,
.theme-dark .feature-card p,
.theme-ocean .feature-card,
.theme-ocean .feature-card h3,
.theme-ocean .feature-card p,
.theme-forest .feature-card,
.theme-forest .feature-card h3,
.theme-forest .feature-card p,
.theme-sunset .feature-card,
.theme-sunset .feature-card h3,
.theme-sunset .feature-card p,
.theme-purple .feature-card,
.theme-purple .feature-card h3,
.theme-purple .feature-card p {
  color: #fff !important; /* You can use another color for subtitle, e.g. #cbd5e1 for paragraphs */
  text-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

/* If you want paragraph text to be slightly dimmed (like subtitle) for better readability: */
.theme-dark .feature-card p,
.theme-ocean .feature-card p,
.theme-forest .feature-card p,
.theme-sunset .feature-card p,
.theme-purple .feature-card p {
  color: #e5e7eb !important;
}

/* Make close button (focus-exit) visible in light/white theme */
.theme-light .focus-exit,
[data-color-scheme="light"] .focus-exit {
  color: #23272e !important;  /* very dark, visible on light bg */
  background: rgba(255,255,255,0.8) !important;
  border: 1.5px solid #dde2e8 !important;
}

.theme-dark .focus-exit,
.theme-forest .focus-exit,
.theme-ocean .focus-exit,
.theme-sunset .focus-exit,
.theme-purple .focus-exit,
[data-color-scheme="dark"] .focus-exit {
  color: #fff !important;
  background: rgba(57,57,57,0.25) !important;
  border: 1.5px solid #444850 !important;
}

.focus-exit {
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ----- FIX: Always visible modal headings in all dark/colored themes ----- */
.theme-dark .modal-header h2,
.theme-dark .modal-header h3,
.theme-dark .modal-header h4,
.theme-forest .modal-header h2,
.theme-forest .modal-header h3,
.theme-forest .modal-header h4,
.theme-ocean .modal-header h2,
.theme-ocean .modal-header h3,
.theme-ocean .modal-header h4,
.theme-sunset .modal-header h2,
.theme-sunset .modal-header h3,
.theme-sunset .modal-header h4,
.theme-purple .modal-header h2,
.theme-purple .modal-header h3,
.theme-purple .modal-header h4,
[data-color-scheme="dark"] .modal-header h2,
[data-color-scheme="dark"] .modal-header h3,
[data-color-scheme="dark"] .modal-header h4 {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.16);
}

/* Optional: if some modals use `.modal-title` class for heading (rare, but helpful): */
.theme-dark .modal-title,
.theme-forest .modal-title,
.theme-ocean .modal-title,
.theme-sunset .modal-title,
.theme-purple .modal-title,
[data-color-scheme="dark"] .modal-title {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}

/* ------------------------------
DARK THEME HEADINGS UNIVERSAL FIX
------------------------------- */

/* Card/Section Headings + Any h2/h3 direct child in main column/content */
.theme-dark h2, .theme-dark h3, .theme-dark h4,
.theme-ocean h2, .theme-ocean h3, .theme-ocean h4,
.theme-forest h2, .theme-forest h3, .theme-forest h4,
.theme-sunset h2, .theme-sunset h3, .theme-sunset h4,
.theme-purple h2, .theme-purple h3, .theme-purple h4,
[data-color-scheme="dark"] h2, [data-color-scheme="dark"] h3, [data-color-scheme="dark"] h4 {
  color: #fff !important;
  text-shadow: 0 2px 11px rgba(0,0,0,0.12);
}

/* Also for headings inside popovers/dropdowns (profile, menus) */
.theme-dark .popover-header,
.theme-dark .profile-dropdown h3, .theme-dark .profile-dropdown h2,
.theme-ocean .popover-header,
.theme-ocean .profile-dropdown h3, .theme-ocean .profile-dropdown h2,
.theme-forest .popover-header,
.theme-forest .profile-dropdown h3, .theme-forest .profile-dropdown h2,
.theme-sunset .popover-header,
.theme-sunset .profile-dropdown h3, .theme-sunset .profile-dropdown h2,
.theme-purple .popover-header,
.theme-purple .profile-dropdown h3, .theme-purple .profile-dropdown h2,
[data-color-scheme="dark"] .popover-header,
[data-color-scheme="dark"] .profile-dropdown h3, [data-color-scheme="dark"] .profile-dropdown h2 {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.20);
}

/* Specific: Profile greeting if it's like .profile-menu .menu-header h3 etc */
.theme-dark .menu-header h3,
.theme-ocean .menu-header h3,
.theme-forest .menu-header h3,
.theme-sunset .menu-header h3,
.theme-purple .menu-header h3,
[data-color-scheme="dark"] .menu-header h3 {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.24);
}

/* ========================================
   VIDEO PLAYER MODAL - PREMIUM ELEGANT DESIGN
   ======================================== */

.video-player-modal {
  max-width: 96vw !important;
  max-height: 96vh !important;
  width: 96vw;
  height: 96vh;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2) 0%, 
    rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 28px;
  box-shadow: 
    0 50px 100px rgba(0, 0, 0, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  animation: modalEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-player-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.video-player-body {
  padding: 0 !important;
  height: calc(100% - 60px);
  overflow: hidden;
}

.video-player-layout {
  display: flex;
  height: 100%;
  gap: 0;
}

/* Main Video Player Section */
.video-player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--theme-surface);
  border-radius: 0 0 0 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.1);
}

.video-container {
  flex: 1;
  width: 100%;
  height: auto; /* Let flexbox control the height */
  padding-bottom: 0; /* Remove aspect-ratio padding */
  position: relative;
  background: linear-gradient(135deg, #000 0%, #111 100%);
  border-radius: 0 0 0 16px;
  box-shadow: 
    inset 0 0 40px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

.video-container:hover {
  box-shadow: 
    inset 0 0 50px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(0, 0, 0, 0.4);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 0 16px;
}

.video-info {
  padding: 24px;
  background: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* Only show this below-player info on non-mobile; hidden on mobile to keep existing UX */
[data-visibility="desktop-only"] { display: none; }
@media (min-width: 769px) {
  [data-visibility="desktop-only"] { display: block; }
}

.video-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

.progress-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-primary);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.video-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    var(--theme-primary), 
    var(--theme-accent));
  opacity: 0.7;
}

.video-info h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--theme-text);
  line-height: 1.3;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  letter-spacing: -0.2px;
}

/* Ensure video title is always visible across themes */
#currentVideoTitle {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure video title visibility across all themes */
[data-color-scheme="light"] #currentVideoTitle,
[data-color-scheme="dark"] #currentVideoTitle {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

@media (prefers-color-scheme: dark) {
  #currentVideoTitle {
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
}

@media (prefers-color-scheme: light) {
  #currentVideoTitle {
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
}

.video-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--theme-text-secondary);
  font-weight: 500;
  padding-top: 4px;
  position: relative;
  z-index: 2;
}

/* Improve duration contrast across themes */
.video-duration-meta { color: var(--theme-text); font-weight: 600; opacity: 0.9; }

/* Desktop: compact AI buttons just under the title/meta */
@media (min-width: 769px) {
  /* Fill left column: Title (modal header) - Player (90%) - AI buttons (10%) */
  .video-player-main { display: flex; flex-direction: column; min-height: 0; }
  .video-player-main .video-container { flex: 0 0 90%; height: 90%; }
  .video-player-main .video-info { 
    flex: 0 0 10%;
    padding: 8px 16px !important;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Hide duplicate title and duration below the player on desktop */
  .video-player-main .video-info .video-title-row,
  .video-player-main .video-info .video-meta { display: none !important; }

  /* Keep only compact AI buttons visible */
  #aiFeaturesContainer { 
    margin: 0 !important; 
    padding: 0 !important; 
    background: transparent !important; 
    border: 0 !important; 
    box-shadow: none !important; 
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .video-player-main .ai-features { justify-content: center; gap: 10px; margin-top: 0; }
  .video-player-main .svg-button { width: 40px; height: 40px; padding: 8px; border-radius: 12px; }
}

/* Hide the % watched text under the video permanently */
#currentVideoProgress { display: none !important; }

/* Desktop: Hide playlist sidebar by default for single video mode to prevent flash/flicker
   Only applies to the Video Player modal and non-mobile screens */
@media (min-width: 769px) {
  #videoPlayerModal:not(.playlist-mode) #playlistSidebar {
    display: none !important;
  }
}

/* Premium Gradient Effects */
.premium-gradient {
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 200%;
  animation: none;
}

/* Enhanced Video Thumbnail with Gradient Border */
.video-thumbnail {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.video-thumbnail::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent),
    var(--theme-primary));
  background-size: 200% 200%;
  animation: none;
  border-radius: 10px;
  z-index: -1;
  opacity: 0;
}

/* Enhanced Text Contrast for Dropdowns */

/* Desktop parity for profile dropdown (match mobile mobile overlay and opaque look)
   Apply a desktop-only overlay and hide decorative ::after; keep content/layout same */
@media (min-width: 769px) {
  /* Hide decorative top shimmer bar and background speckles for parity with mobile */
  .profile-dropdown::before,
  .profile-dropdown::after { display: none !important; }

  /* Adopt mobile card sizing on desktop */
  .profile-dropdown {
    min-width: 280px !important;
    max-width: 320px !important;
    padding: 0 !important; /* header + inner paddings handle spacing */
    border-radius: 16px !important;
    border: 1px solid var(--theme-border) !important;
    background: var(--theme-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Show backdrop overlay behind dropdown when active (same as mobile) */
  .profile-dropdown.active::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    z-index: -1 !important;
    display: block !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    animation: backdropFadeIn 0.3s ease-out !important;
  }
}

.profile-dropdown,
.theme-dropdown {
  color: var(--theme-text);
}

.profile-dropdown .menu-item,
.theme-dropdown .theme-option {
  color: var(--theme-text);
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.1);
}

/* Dark mode specific text enhancement */
@media (prefers-color-scheme: dark) {
  .profile-dropdown .menu-item,
  .theme-dropdown .theme-option {
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 0 1px rgba(255, 255, 255, 0.1);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] .profile-dropdown .menu-item,
[data-color-scheme="dark"] .theme-dropdown .theme-option {
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 1px rgba(255, 255, 255, 0.1);
}

[data-color-scheme="light"] .profile-dropdown .menu-item,
[data-color-scheme="light"] .theme-dropdown .theme-option {
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.1);
}

/* Ensure text readability on gradient backgrounds */
.menu-header h3,
.menu-header p {
  color: var(--theme-text);
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.1);
}

.user-details h3,
.user-details p {
  color: var(--theme-text);
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.1);
}

.playlist-video-item:hover .video-thumbnail::after {
  opacity: 0.7;
}

.playlist-video-item.active .video-thumbnail::after {
  opacity: 0.9;
}

/* Progress Bar Enhancement */
.progress-bar {
  position: relative;
  overflow: visible;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent));
  border-radius: 5px;
  z-index: -1;
  opacity: 0.3;
}

.progress-fill {
  position: relative;
  overflow: visible;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.5) 0%, 
    transparent 100%);
  border-radius: 6px;
  z-index: -1;
  opacity: 0.6;
}

/* Playlist Sidebar - Enhanced Premium Design */
.playlist-sidebar {
  width: 450px;
  background: var(--theme-surface);
  border-left: 1px solid var(--theme-border);
  border-radius: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 
    -4px 0 15px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: none;
}

.playlist-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Ensure sidebar is visible when it should be */
.playlist-sidebar[style*="display: flex"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 450px !important;
  min-width: 450px !important;
}

.playlist-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--theme-surface);
  color: var(--theme-text);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.playlist-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2) 0%, 
    transparent 100%);
  pointer-events: none;
}

.playlist-header h4 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--theme-text);
  position: relative;
  z-index: 2;
  letter-spacing: -0.3px;
}

.playlist-header-actions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: flex-end;
}

.playlist-stats {
  font-size: 14px;
  color: var(--theme-text-secondary);
  position: relative;
  z-index: 2;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: var(--space-20);
  margin: 0;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.playlist-videos {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  position: relative;
}

/* Playlist Card Thumbnail - Enhanced */
.playlist-thumbnail {
  margin: var(--space-16) 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--theme-border), rgba(0,0,0,0.15));
  box-shadow: 
    0 12px 30px rgba(0,0,0,0.2),
    inset 0 0 15px rgba(255,255,255,0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
   margin-bottom: 0;
}

.playlist-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 100%);
  pointer-events: none;
}

.playlist-thumbnail:hover {
  transform: scale(1.02);
  box-shadow: 
    0 16px 35px rgba(0,0,0,0.25),
    inset 0 0 20px rgba(255,255,255,0.25);
}

.playlist-thumbnail img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 16px;
}

.playlist-thumbnail:hover img {
  transform: scale(1.05);
}

/* Individual Playlist Video Item - Premium Design */
.playlist-video-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--theme-border);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--theme-surface);
  margin: 0 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 1px solid var(--theme-border);
  position: relative;
  overflow: hidden;
  animation: none;
}

.video-card {
  cursor: pointer;
}

.playlist-card {
  cursor: pointer;
}

.playlist-video-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.playlist-video-item:hover::before {
  opacity: 1;
}

.playlist-video-item:hover {
  background: var(--theme-surface-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--theme-primary);
}

.playlist-video-item.active {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  animation: none;
}

.playlist-video-item.active .video-thumbnail {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.playlist-video-item.active .video-title,
.playlist-video-item.active .video-progress {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Fix for video duration visibility in light mode */
[data-color-scheme="light"] .playlist-video-item.active .video-duration {
  color: var(--color-slate-900);
  text-shadow: none;
}

/* Fix for video duration visibility in dark mode */
@media (prefers-color-scheme: dark) {
  .playlist-video-item.active .video-duration {
    color: var(--color-gray-200);
  }
}

[data-color-scheme="dark"] .playlist-video-item.active .video-duration {
  color: var(--color-gray-200);
}

.playlist-video-item .video-thumbnail {
  width: 120px;
  height: 67.5px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 12px;
  flex-shrink: 0;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  position: relative;
  overflow: hidden;
}

/* Percentage pill inside each playlist item (right side) */
.playlist-video-item .progress-pill {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-text);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--theme-border);
  padding: 4px 8px;
  border-radius: 999px;
}

.playlist-video-item .video-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 100%);
  pointer-events: none;
}

.video-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 6px;
}

.video-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--theme-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
  letter-spacing: -0.1px;
  animation: none;
}

.video-duration {
  font-size: 12px;
  color: var(--theme-text);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.video-progress {
  font-size: 11px;
  color: var(--theme-text-secondary);
}

.playlist-created {
  font-size: 12px;
  color: var(--theme-text-secondary);
  margin-top: 8px;
  padding: var(--space-20);
}

.video-title {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--theme-border);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.3) 0%, 
    transparent 100%);
  pointer-events: none;
}

/* Desktop playlist item title size */
.playlist-video-item .video-title {
  font-size: 16px;
  line-height: 1.4;
}

/* Enhanced Responsive Design for Video Player */
@media (max-width: 1200px) {
  /* Keep desktop/tablet in side-by-side layout; do not force column here */
  .video-player-modal {
    width: 95%;
    height: 90%;
  }
  .video-player-main {
  flex: 3 1 0;
    min-height: 0;
  }
  .video-container {
    flex: 1;
    height: auto;
    padding-bottom: 0; /* remove legacy aspect padding */
  }
}

/* Tablet-specific fixes (iPad, etc.) */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Restore side-by-side layout for tablets */
  .video-player-layout { flex-direction: row; }
  .playlist-sidebar {
  width: 450px !important;
  min-width: 450px !important;
  max-width: 450px !important;
    height: auto;
    max-height: none;
    border-left: 1px solid var(--theme-border) !important;
    border-top: none !important;
    border-radius: 0 0 16px 0;
    overflow-y: auto;
  }
  .playlist-videos { padding: 0; }
  .playlist-video-item { margin: 0 8px 8px 8px; padding: 12px 16px; }
  .video-thumbnail { width: 85px; height: 48px; }
  .video-title { font-size: 15px; line-height: 1.3; }
  /* Ensure AI buttons are visible on tablets */
  .ai-features { display: flex !important; gap: 12px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
  .ai-feature-btn, .svg-button { display: flex !important; visibility: visible !important; opacity: 1 !important; }
}

@media (max-width: 768px) {
  /* Compact below-player AI actions on mobile */
  #mobileAIFeatures.ai-features-container { 
    margin: 0 !important; 
    padding: 0 !important; 
    background: transparent !important; 
    border: 0 !important; 
    box-shadow: none !important; 
  }
  #mobileAIFeatures .ai-features { 
    gap: 8px !important; 
    justify-content: center !important; 
    margin: 0 !important; 
    padding: 0 !important; 
  }
  #mobileAIFeatures .svg-button { width: 44px !important; height: 44px !important; padding: 10px !important; border-radius: 12px !important; }
  /* Remove any vertical gaps between player and AI buttons */
  .video-player-main { gap: 0 !important; }
  .video-player-main .video-container { margin-bottom: 0 !important; }
  #mobileAIFeatures .ai-features { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* Flatten playlist section corners on mobile */
  .playlist-sidebar,
  .playlist-header,
  .playlist-videos {
    border-radius: 0 !important;
  }
  /* Remove curved corners for video player and AI area on mobile only */
  .video-player-modal,
  .video-player-layout,
  .video-player-main,
  .video-player-main .video-container,
  .video-player-main .video-container iframe,
  #mobileAIFeatures.ai-features-container,
  #mobileAIFeatures .ai-features {
    border-radius: 0 !important;
  }

  .video-player-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: none;
    max-height: none;
  }
  
  .video-player-layout { flex-direction: column; height: 100%; }
  .video-player-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .video-container { flex: 1; height: auto; padding-bottom: 0; flex-shrink: 0; }
  .video-info { padding: 16px; flex-shrink: 0; }
  /* Hide desktop-only info area on mobile */
  [data-visibility="desktop-only"] { display: none !important; }
  
  /* Sidebar below the player only on mobile */
  .playlist-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    height: 40vh;
    min-height: 250px;
    max-height: 400px;
    border-left: none;
    border-top: 1px solid var(--theme-border);
    border-radius: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  
  .playlist-header { padding: 16px; flex-shrink: 0; }
  .playlist-videos { flex: 1; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; }
  .playlist-video-item { margin: 0 12px 8px 12px; padding: 12px; border-radius: 8px; }
  .playlist-video-item .video-thumbnail { width: 100px; height: 56px; }
  .video-title { font-size: 15px; line-height: 1.4; -webkit-line-clamp: 2; line-clamp: 2; }
  .video-duration { font-size: 11px; }
  .video-progress { font-size: 10px; }
  /* Keep mobile UI unchanged: hide desktop-only progress pill/bar inside playlist items */
  .playlist-video-item .progress-pill,
  .playlist-video-item .progress-bar { display: none !important; }
  
  /* Mobile AI Features - Always visible and properly spaced */
  .ai-features { display: flex !important; gap: 10px; justify-content: center; margin: 4px 0; flex-wrap: wrap; padding: 0 8px; }
  .ai-feature-btn, .svg-button { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
  .ai-feature-btn .ai-icon, .svg-button .svg-path { font-size: 16px; }
  
  /* Ensure modal header is properly sized on mobile */
  .modal-header { padding: 16px; flex-shrink: 0; }
  .modal-header h2 { font-size: 18px; margin: 0; }
  .modal-close { width: 32px; height: 32px; font-size: 18px; }
}

/* Mobile-only overrides for playlist title visibility and overlay clipping fixes */
@media (max-width: 768px) {
  /* Prevent video player overlay/layout from cutting off on mobile */
  .video-player-modal { overflow: hidden; }
  .video-player-layout { width: 100%; }
  .playlist-sidebar { max-width: 100%; }
  /* Force override when inline display:flex is present */
  .playlist-sidebar[style*="display: flex"] { width: 100% !important; min-width: 100% !important; }
  .playlist-videos { padding: 8px 12px; overflow-x: hidden; }
  .playlist-video-item { margin: 0 0 8px 0; width: 100%; box-sizing: border-box; }

  /* Ensure AI buttons are always visible on mobile */
  .ai-features { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .ai-feature-btn, .svg-button { display: flex !important; visibility: visible !important; opacity: 1 !important; }

  /* Hide playlist title and stats in sidebar header; show compact AI buttons instead */
  .playlist-header h4, .playlist-header .playlist-stats { display: none !important; }
  #playlistAIActions, .playlist-ai-actions { display: none !important; }
  #playlistAIActions .svg-button, .playlist-ai-actions .svg-button { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
  /* Reduce vertical spacing in playlist modal header around AI buttons */
  .playlist-header { padding-top: 6px !important; padding-bottom: 6px !important; gap: 6px !important; }
  .playlist-header .ai-features { margin: 2px 0 !important; }
  #playlistAIActions, .playlist-ai-actions { margin: 2px 0 !important; padding: 0 !important; }

  /* Hide playlist name (title under thumbnail) on playlist cards only, to save space */
  .playlists-grid .playlist-card .video-info h3 { display: block !important; }

  /* Videos tab: remove internal scroll containers; allow full-page scroll */
  .videos-grid { max-height: none !important; overflow: visible !important; height: auto !important; }
  .videos-grid::after { display: none !important; content: none !important; }
  .videos-container { overflow: visible !important; }
  #videosTab { height: auto !important; }
}

/* Hide AI buttons in videos list on mobile only */
@media (max-width: 768px) {
  /* In the Videos tab cards (grid), hide the three AI buttons below the title */
  #videosTab .video-card .ai-features,
  #videosTab .video-card .ai-feature-btn,
  #videosTab .video-card .svg-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Prevent background scroll when video modal is open (mobile only) */
@media (max-width: 768px) {
  body.modal-open {
    position: fixed;
    overflow: hidden;
    width: 100%;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .playlist-sidebar {
    height: 35vh;
    min-height: 220px;
  }
  
  .playlist-video-item {
    margin: 0 8px 6px 8px;
    padding: 10px;
  }
  
  .playlist-video-item .video-thumbnail {
    width: 70px;
    height: 39px;
  }
  
  .video-title {
    font-size: 13px;
  }
  
  .ai-features {
    gap: 8px;
    padding: 0 12px;
  }
  
  .ai-feature-btn,
  .svg-button {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}

/* Enhanced shimmer animation for premium effect */
@keyframes shimmer {
  0%, 100% { 
    background-position: 200% 0; 
    opacity: 0.9;
  }
  50% { 
    background-position: -200% 0; 
    opacity: 1;
  }
}

/* Enhanced Action Buttons - Bottom Corner Positioning */
.playlist-actions,
.video-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-standard);
  position: absolute;
  bottom: var(--space-16);
  right: var(--space-16);
  width: auto;
  padding: 0;
  margin: 0;
}

.playlist-card:hover .playlist-actions,
.video-card:hover .video-actions {
  opacity: 1;
}

/* Improved button spacing and layout */
.playlist-header,
.video-info,
.playlist-card,
.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  position: relative; /* Required for absolute positioning of action buttons */
}

.playlist-header {
  padding: var(--space-24);
  padding-bottom: var(--space-16);
}

.video-info {
  padding: 0 var(--space-24) var(--space-24) var(--space-24);
}

.playlist-header h3,
.video-info h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.playlist-description {
  padding: 0 var(--space-24);
}

.playlist-stats {
  padding: 0 var(--space-24) var(--space-24) var(--space-24);
  margin: 0;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive adjustments for larger thumbnails */
@media (max-width: 1024px) {
  .break-timer-sidebar {
    min-width: 250px;
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .video-thumbnail {
    height: 200px; /* Slightly smaller on mobile but still larger than original */
  }
  
  .playlist-thumbnail img {
    height: 160px; /* Slightly smaller on mobile but still larger than original */
  }
  
  .playlist-actions,
  .video-actions {
    opacity: 1; /* Always visible on mobile for better UX */
    flex-direction: row;
    gap: var(--space-4);
    position: absolute;
    bottom: var(--space-16);
    right: var(--space-16);
    width: auto;
    padding: 0;
    margin: 0;
  }
  
  .mark-complete-btn,
  .video-actions .btn--secondary,
  .playlist-actions .btn--secondary {
    font-size: var(--font-size-sm);
    padding: var(--space-6) var(--space-12) !important;
  }

  .video-actions .btn--secondary,
  .playlist-actions .btn--secondary {
    margin-top: var(--space-4); /* Slightly below the mark complete button */
  }

  /* Break Timer Mobile Styles */
  .break-timer-body {
    flex-direction: column;
    gap: var(--space-16);
  }

  .break-timer-main {
    padding: var(--space-16);
  }

  .timer-time-large {
    font-size: 4rem;
  }

  .timer-presets-large {
    gap: var(--space-8);
  }

  .timer-presets-large .btn {
    min-width: 60px;
    font-size: var(--font-size-xs);
  }

  .timer-controls-large {
    flex-direction: column;
    gap: var(--space-12);
  }

  .timer-controls-large .btn {
    min-width: 100px;
    font-size: var(--font-size-md);
    padding: var(--space-12) var(--space-16);
  }

  .break-timer-sidebar {
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  .break-options,
  .break-suggestions {
    padding: var(--space-16);
  }

  .suggestion-list {
    max-height: 150px;
  }

  .suggestion-item {
    padding: var(--space-8);
    gap: var(--space-8);
  }

  .manual-timer-input {
    flex-direction: column;
    gap: var(--space-8);
  }

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

  .input-group input {
    width: 80px;
    font-size: var(--font-size-md);
  }
}

@media (max-width: 480px) {
  .break-timer-content {
    width: 98%;
    padding: var(--space-16);
    max-height: 95vh;
  }
  
  .break-timer-body {
    min-height: 400px;
  }
  
  .timer-time-large {
    font-size: 3rem;
  }
  
  .suggestion-list {
    max-height: 120px;
  }
  
  .break-timer-sidebar {
    gap: var(--space-16);
  }
  
  .break-options,
  .break-suggestions {
    padding: var(--space-12);
  }
}

/* Modern Mark Complete Button Styling */
.mark-complete-btn {
  /* Reset default button styles to match animated buttons */
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible;
}

.mark-complete-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 204, 242, 0.6) 0%, rgba(47, 128, 237, 0.4) 50%, transparent 100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.mark-complete-btn:hover {
  background: linear-gradient(135deg, var(--theme-primary-hover) 0%, var(--theme-primary-active) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3) !important;
}

.mark-complete-btn:active::before {
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.mark-complete-btn span {
  position: relative;
  z-index: 1;
}

/* Animated Action Buttons */
.action-buttons {
  display: flex;
  position: relative;
  gap: 25px;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  padding: 20px 0;
  margin-bottom: 10px;
  overflow: visible;
}

.action-button {
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  background: white;
  /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);*/
  border-radius: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border: none;
  padding: 0;
  margin: 0;
}

.action-button:hover {
  width: 180px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}

.action-button ion-icon {
  color: #777;
  font-size: 1.75em;
  transition: 0.5s;
  transition-delay: 0.25s;
  position: relative;
  z-index: 2;
}

.action-button:hover ion-icon {
  transform: scale(0);
  color: #fff;
  transition-delay: 0s;
}

.action-button span {
  position: absolute;
  z-index: 2;
}

.action-button .title {
  color: #fff;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  white-space: nowrap;
}

.action-button:hover .title {
  transform: scale(1);
  transition-delay: 0.25s;
}

/* Delete Button Styling */
.video-actions .btn--secondary,
.playlist-actions .btn--secondary {
  background: rgba(var(--color-gray-400-rgb), 0.1) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  position: relative !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-12) !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-sm) !important;
  min-width: auto !important;
  width: auto !important;
  height: 32px !important;
  margin-top: var(--space-4); /* Slightly below the mark complete button */
}

.video-actions .btn--secondary:hover,
.playlist-actions .btn--secondary:hover {
  background: rgba(var(--color-gray-400-rgb), 0.15) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(var(--color-gray-400-rgb), 0.3) !important;
}

.video-actions .btn--secondary::before,
.playlist-actions .btn--secondary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 94, 98, 0.6) 0%, rgba(255, 153, 102, 0.4) 50%, transparent 100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.video-actions .btn--secondary:active::before,
.playlist-actions .btn--secondary:active::before {
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.video-actions .btn--secondary span,
.playlist-actions .btn--secondary span {
  position: relative;
  z-index: 1;
}

/* Enhanced Ripple Effect Animations */
@keyframes ripple-splash {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes particle-splash {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Enhanced Action Button Ripple Effects */
.action-button {
    position: relative;
    overflow: visible;
}

.action-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.action-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 60px;
    background: linear-gradient(45deg, var(--i), var(--j));
    opacity: 0;
    transition: 0.5s;
    z-index: 0;
}

.action-button:hover::before {
    opacity: 0;
}

.action-button:hover::after {
    opacity: 1;
}

.action-button:active::before {
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Completed Button Styling */
.video-actions .btn--secondary:disabled,
.playlist-actions .btn--secondary:disabled,
.video-actions .btn--secondary[disabled],
.playlist-actions .btn--secondary[disabled] {
  background: rgba(var(--color-gray-400-rgb), 0.08) !important;
  color: var(--theme-text-secondary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-12) !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-sm) !important;
  border: 1px solid rgba(var(--color-gray-400-rgb), 0.15) !important;
  height: 32px !important;
}

.video-actions .btn--secondary:disabled span,
.playlist-actions .btn--secondary:disabled span,
.video-actions .btn--secondary[disabled] span,
.playlist-actions .btn--secondary[disabled] span {
  position: relative;
  z-index: 1;
}

/* Completion Status Styling */
.completion-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  margin-bottom: var(--space-8);
}

.completion-overlay {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  z-index: 2;
}

/* Completed Card States */
.playlist-card.completed,
.video-card.completed {
  opacity: 0.8;
  position: relative;
}

.playlist-card.completed::before,
.video-card.completed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 1;
}

.playlist-card.completed .playlist-thumbnail img,
.video-card.completed .video-thumbnail img {
  filter: grayscale(20%);
}

/* Disabled button styling */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--theme-surface) !important;
  color: var(--theme-text-secondary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Enhanced Action Buttons */
/* --- Animation --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Responsive Styles --- */
/* Mobile-specific responsive overrides by Rovo Dev */
@media (max-width: 768px) {
  /* Dashboard hero: stack into single column */
  .welcome-hero-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .welcome-text-section,
  .welcome-visual {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  
  /* Fix alignment of welcome action buttons on mobile */
  .welcome-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  
  /* Make buttons full width on mobile and left-aligned */
  .welcome-actions .btn {
    width: auto !important;
    max-width: 300px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
  }
}

@media (max-width: 1024px) {
  .welcome-stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .welcome-stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .welcome-stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    padding: 1rem;
  }
  .stat-card-number {
    font-size: 1.8rem;
  }
}

/* Elegant Bulk Delete Functionality */
.bulk-actions-bar {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  animation: slideDown 0.3s ease-out;
}

.bulk-actions-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
  min-width: 300px;
}

.bulk-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bulk-count {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.bulk-clear-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.bulk-clear-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.bulk-actions {
  display: flex;
  gap: 0.75rem;
}

.bulk-actions .btn {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
}

.btn--danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Video Selection Overlay */
.video-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Only show selection overlay when hovering over the checkbox itself */
.video-select-indicator:hover .video-select-overlay {
  opacity: 1;
}

.video-select-indicator {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  pointer-events: auto;
}

.video-select-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  appearance: none;
  position: relative;
}

.video-select-checkbox:checked {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  transform: scale(1.1);
}

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

.video-select-checkbox:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Video Card Selection State */
.video-card.selected {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  ;
}

.video-card.selected .video-select-overlay {
  background: rgba(59, 130, 246, 0.05);
  opacity: 1;
}

/* Beautiful Videos Container */
.videos-container {
  background: var(--theme-surface);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 1rem;
  border: 1px solid var(--theme-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  overflow: hidden;
}
/* Videos Grid - FORCED 2-Column Layout */
.videos-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 1.5rem !important;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary) transparent;
  width: 100% !important;
  min-width: 0;
  align-items: stretch;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-content: unset !important;
}

/* Remove scrollbar when videos grid has empty state */
.videos-grid:has(.empty-state) {
  max-height: none;
  overflow: visible;
}

/* Override any existing grid or flex styles */
#videosGrid.videos-grid,
.videos-container .videos-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 1.5rem !important;
  width: 100% !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-content: unset !important;
}

/* Custom Scrollbars - ENHANCED for better consistency */
::-webkit-scrollbar {
  width: 12px; /* Increased width for better visibility */
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent; /* Removed grey background */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-primary); /* Use primary theme color */
  border-radius: 6px;
  border: 2px solid transparent; /* Added border for better visibility */
  background-clip: padding-box;
  transition: background var(--duration-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary-hover); /* Enhanced hover effect */
  border-width: 1px;
}

/* Firefox scrollbar */
:root {
  scrollbar-color: var(--theme-primary) transparent;
  scrollbar-width: thin;
}

/* Beautiful Custom Scrollbar - ENHANCED for Videos Section */
.videos-grid::-webkit-scrollbar {
  width: 12px; /* Increased width for better visibility */
}

.videos-grid::-webkit-scrollbar-track {
  background: transparent; /* Removed grey background */
  border-radius: 6px;
}

.videos-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-primary-hover)); /* Enhanced blue gradient */
  border-radius: 6px;
  border: 2px solid transparent; /* Added border for better visibility */
  background-clip: padding-box;
  transition: all 0.3s ease;
}

.videos-grid::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary-hover);
  border-width: 1px;
}

/* Firefox scrollbar */
.videos-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary) transparent;
}

/* Scroll indicator */
.videos-grid::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, var(--color-surface));
  pointer-events: none;
}

/* Suggestion List Scrollbar - FIXED to use theme variables */
.suggestion-list::-webkit-scrollbar {
  width: 12px;
}

.suggestion-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 6px;
}

.suggestion-list::-webkit-scrollbar-thumb {
  background: var(--theme-primary);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

.suggestion-list::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary-hover);
  border-width: 1px;
}

.suggestion-list {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary) transparent;
}

.videos-grid::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.videos-grid:hover::after {
  opacity: 1;
}

/* Scroll indicator for many videos */
.scroll-indicator {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin-top: 1rem;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover)); /* Changed from var(--primary-color) */
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  animation: pulse 2s infinite;
}

.scroll-indicator-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}



/* Enhanced Video Cards - Static Design */
.video-card {
  position: relative !important;
  overflow: visible;
  transition: none; /* Removed animation */
  border-radius: 16px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  width: 100% !important;
  height: fit-content !important;
  /* Removed animation: fadeInUp 0.5s ease-out; */
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  flex: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  transform: none !important; /* Removed transform effects */
}

.video-card:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--theme-primary);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--theme-border);
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Removed transition: transform 0.3s ease; */
  transition: none;
}

.video-card:hover .video-thumbnail img {
  /* Removed scaling effect */
  transform: none;
}

.video-info {
  padding: 1.25rem;
}

.video-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.video-channel {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.video-actions {
  display: flex;
  gap: 0.75rem;
  /* Removed opacity animations */
  opacity: 1;
  transition: none;
}

.video-card:hover .video-actions {
  /* Removed opacity changes */
  opacity: 1;
}

/* Enhanced Playlist Cards - Static Design */
.playlist-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  transition: none; /* Removed animations */
  /* Removed animation effects */
  transform: none !important;
}

.playlist-card:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--theme-primary);
}

.playlist-thumbnail {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateZ(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.playlist-card:hover .playlist-thumbnail {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.playlist-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: var(--radius-base);
}

.playlist-card:hover .playlist-thumbnail img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.playlist-info {
  padding: 1.25rem;
}

.playlist-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.playlist-actions {
  display: flex;
  gap: 0.75rem;
  /* Removed opacity animations */
  opacity: 1;
  transition: none;
}

.playlist-card:hover .playlist-actions {
  /* Removed opacity changes */
  opacity: 1;
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark Theme Adjustments */
[data-color-scheme="dark"] .video-select-checkbox {
  background: var(--theme-overlay-background);
  border-color: rgba(255, 255, 255, 0.3);
}

[data-color-scheme="dark"] .video-select-checkbox:checked {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

[data-color-scheme="dark"] .bulk-actions-bar {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Responsive Design for Beautiful 2-Column Layout */
@media (max-width: 1400px) {
  .videos-grid {
    max-height: 550px;
  }
}

@media (max-width: 1200px) {
  .videos-grid {
    max-height: 500px;
    gap: 1.25rem;
  }
}

@media (max-width: 992px) {
  .videos-grid {
    max-height: 450px;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    top: 70px;
    left: 1rem;
    right: 1rem;
    transform: none;
    min-width: auto;
  }
  
  .bulk-actions-content {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .bulk-info {
    justify-content: space-between;
    width: 100%;
  }
  
  .bulk-actions {
    width: 100%;
    justify-content: center;
  }
  
  .videos-container {
    padding: 1.5rem;
    margin-top: 0.5rem;
  }
  
  .videos-grid {
    grid-template-columns: 1fr 1fr !important;
    max-height: 400px;
    gap: 1rem;
  }
  
  .video-select-indicator {
    top: 0.75rem;
    left: 0.75rem;
  }
  
  .video-select-checkbox {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .videos-container {
    padding: 1rem;
  }
  
  .videos-grid {
    max-height: 350px;
    gap: 0.75rem;
  }
  
  .select-all-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
  
  .videos-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* FINAL OVERRIDE - Force 2-column layout */
.videos-container .videos-grid,
#videosGrid.videos-grid,
.videos-container .videos-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 1.5rem !important;
  width: 100% !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-content: unset !important;
}

/* Custom Scrollbars - ENHANCED for better consistency */
/* Fullscreen Tool Overlays */

/* Fullscreen Tool Overlays */
/* Premium Fullscreen Tool Overlays */
.tool-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-background);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-fullscreen-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, 
    rgba(59, 130, 246, 0.1) 0%, 
    transparent 50%),
    radial-gradient(circle at 80% 80%, 
    rgba(147, 51, 234, 0.1) 0%, 
    transparent 50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.tool-fullscreen-overlay.active {
  opacity: 1;
  visibility: visible;
}

.tool-fullscreen-overlay.active::before {
  opacity: 1;
}

.tool-fullscreen-content {
  background: var(--theme-surface);
  backdrop-filter: blur(30px) saturate(120%);
  -webkit-backdrop-filter: blur(30px) saturate(120%);
  border: 1px solid var(--theme-border);
  border-radius: 28px;
  box-shadow: 
    0 50px 100px var(--theme-shadow),
    0 20px 40px var(--theme-shadow),
    0 8px 16px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 96%;
  max-width: 1400px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.8);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tool-fullscreen-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--theme-primary);
  border-radius: 16px 16px 0 0;
}

.tool-fullscreen-overlay.active .tool-fullscreen-content {
  transform: scale(1);
}

.tool-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 3rem;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-hover);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.tool-fullscreen-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.02) 50%, 
    transparent 70%);
  pointer-events: none;
}

.tool-fullscreen-title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.tool-fullscreen-icon {
  font-size: 2.5rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary);
  backdrop-filter: blur(15px);
  border: 2px solid var(--theme-border);
  border-radius: 24px;
  color: var(--theme-text);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-fullscreen-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.tool-fullscreen-icon:hover::before {
  transform: translateX(100%);
}

.tool-fullscreen-title h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0;
  color: var(--theme-text);
  text-shadow: 0 2px 8px var(--theme-shadow);
  letter-spacing: -0.02em;
  position: relative;
}

.tool-fullscreen-title h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60%;
  height: 3px;
  background: var(--theme-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: titleUnderline 1s ease-out 0.5s forwards;
}

@keyframes titleUnderline {
  to { transform: scaleX(1); }
}

.tool-fullscreen-close {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.15), 
    rgba(220, 38, 38, 0.15));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.tool-fullscreen-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.2), 
    rgba(220, 38, 38, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tool-fullscreen-close:hover {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.25), 
    rgba(220, 38, 38, 0.25));
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.05) rotate(90deg);
  box-shadow: 
    0 8px 25px rgba(239, 68, 68, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

.tool-fullscreen-close:hover::before {
  opacity: 1;
}

.tool-fullscreen-close svg {
  width: 24px;
  height: 24px;
  fill: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.tool-fullscreen-close:hover svg {
  fill: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.tool-fullscreen-body {
  flex: 1;
  display: flex;
  overflow-y: auto;
  position: relative;
}

.tool-fullscreen-enhanced {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.tool-fullscreen-main {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  overflow-y: hidden;
  background: var(--theme-background);
  position: relative;
}

.tool-fullscreen-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, 
    rgba(59, 130, 246, 0.05) 0%, 
    transparent 50%),
    radial-gradient(circle at 70% 70%, 
    rgba(147, 51, 234, 0.05) 0%, 
    transparent 50%);
  pointer-events: none;
  opacity: 0;
  /* Removed distracting animation: animation: mainBackgroundGlow 6s ease-in-out infinite; */
}

/* Removed distracting background animation keyframes
@keyframes mainBackgroundGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
} */

/* Enhanced Sidebar Styles */
.tool-fullscreen-sidebar {
  width: 380px;
  background: var(--theme-surface-hover);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--theme-border);
  padding: 2rem;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tool-fullscreen-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent 0%, 
    var(--theme-primary) 50%, 
    transparent 100%);
  border-radius: 2px;
}

.tool-fullscreen-sidebar h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--theme-text);
  border-bottom: 2px solid var(--theme-primary);
  padding-bottom: 0.75rem;
  position: relative;
  text-shadow: 0 2px 8px var(--theme-shadow);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tool-fullscreen-sidebar h3::before {
  content: '📊';
  font-size: 1.2rem;
  opacity: 0.8;
}

.tool-fullscreen-sidebar h3::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--theme-primary);
  border-radius: 1px;
  animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 50%;
    opacity: 1;
  }
}

/* Subtle Enhanced Timer Styles */
.enhanced-timer-display,
.enhanced-break-display,
.enhanced-wellness-display {
  text-align: center;
  position: relative;
}

.enhanced-timer-circle,
.enhanced-break-circle,
.enhanced-wellness-circle {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 0 auto 3rem;
  background: var(--theme-surface);
  backdrop-filter: blur(20px);
  border-radius: 50%;
  border: 2px solid var(--theme-border);
  box-shadow: 
    0 20px 60px var(--theme-shadow),
    0 8px 24px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}



.enhanced-timer-circle:hover,
.enhanced-break-circle:hover,
.enhanced-wellness-circle:hover {
  transform: scale(1.02);
  box-shadow: 
    0 30px 80px var(--theme-shadow),
    0 12px 32px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.enhanced-timer-svg,
.enhanced-break-svg,
.enhanced-wellness-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 4px 8px var(--theme-shadow));
}

.enhanced-timer-bg,
.enhanced-break-bg,
.enhanced-wellness-bg {
  fill: none;
  stroke: var(--theme-border);
  stroke-width: 12;
  stroke-linecap: round;
}

.enhanced-timer-progress,
.enhanced-break-progress,
.enhanced-wellness-progress {
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.enhanced-timer-text,
.enhanced-break-text,
.enhanced-wellness-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.enhanced-timer-time,
.enhanced-break-time,
.enhanced-wellness-time {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--theme-text);
  margin-bottom: 0.5rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  text-shadow: 0 4px 12px var(--theme-shadow);
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
}

.enhanced-timer-phase,
.enhanced-break-label,
.enhanced-wellness-label {
  font-size: 1.4rem;
  color: var(--theme-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 6px var(--theme-shadow);
}

.enhanced-timer-controls,
.enhanced-break-controls,
.enhanced-wellness-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.enhanced-break-presets {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.enhanced-break-presets .preset-btn {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: var(--theme-text);
}

.enhanced-break-presets .preset-btn:hover,
.enhanced-break-presets .preset-btn.active {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
  transform: translateY(-2px);
}

.enhanced-wellness-presets {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.wellness-activities-full {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

.enhanced-wellness-presets .preset-btn {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: var(--theme-text);
}

.enhanced-wellness-presets .preset-btn:hover,
.enhanced-wellness-presets .preset-btn.active {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
  transform: translateY(-2px);
}

.wellness-activity-option {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border);
  border-radius: 15px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.wellness-activity-option:hover {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.wellness-activity-option .activity-icon {
  font-size: 2rem;
}

.wellness-activity-option .activity-name {
  font-weight: 600;
  font-size: 1rem;
}

.wellness-activity-option .activity-duration {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* Enhanced Streak Styles */
.updated {
    animation: updatePulse 1s ease-in-out;
}

@keyframes updatePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: var(--theme-primary); }
    100% { transform: scale(1); }
}

/* Detailed Calendar Styles */
.detailed-streak-calendar {
    transition: all 0.3s ease;
}

.detailed-streak-calendar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.detailed-calendar-grid [class*="day"]:hover {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

/* Enhanced Streak Styles */
.enhanced-streak-display {
  text-align: center;
  margin-bottom: 3rem;
}

.enhanced-streak-number {
  font-size: 6rem;
  font-weight: 900;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  text-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.enhanced-streak-label {
  font-size: 1.5rem;
  color: var(--theme-text-secondary);
  font-weight: 500;
  margin-bottom: 1rem;
}

.enhanced-streak-message {
  font-size: 1.25rem;
  color: var(--theme-text);
  font-weight: 600;
}

.enhanced-streak-calendar {
  background: var(--theme-surface);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid var(--theme-border);
}

/* Enhanced Notes Styles */
.enhanced-notes-editor {
  width: 100%;
  height: 400px;
  margin-bottom: 2rem;
}

.enhanced-notes-textarea {
  width: 100%;
  height: 100%;
  background: var(--theme-surface);
  border: 2px solid var(--theme-border);
  border-radius: 15px;
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--theme-text);
  resize: none;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.enhanced-notes-textarea:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.enhanced-notes-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Enhanced Goals Styles */
.enhanced-goals-list {
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 2rem;
}

.enhanced-goals-actions {
  display: flex;
}

.modal-content-scrollable {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
}

.markdown-content {
  line-height: 1.6;
  color: var(--theme-text);
}

.markdown-content h1 {
  font-size: 1.8rem;
  margin: 1.5rem 0 1rem 0;
  color: var(--theme-primary);
}

.markdown-content h2 {
  font-size: 1.5rem;
  margin: 1.3rem 0 0.9rem 0;
  color: var(--theme-primary);
}

.markdown-content h3 {
  font-size: 1.3rem;
  margin: 1.1rem 0 0.7rem 0;
  color: var(--theme-primary);
}

.markdown-content p {
  margin: 0.8rem 0;
}

.markdown-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.markdown-content li {
  margin: 0.3rem 0;
}

.markdown-content strong {
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--theme-border);
}

.modal-actions .btn {
  min-width: 120px;
}

.modal-content-scrollable {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
}

.markdown-content {
  line-height: 1.6;
  color: var(--theme-text);
}

.markdown-content h1 {
  font-size: 1.8rem;
  margin: 1.5rem 0 1rem 0;
  color: var(--theme-primary);
}

.markdown-content h2 {
  font-size: 1.5rem;
  margin: 1.3rem 0 0.9rem 0;
  color: var(--theme-primary);
}

.markdown-content h3 {
  font-size: 1.3rem;
  margin: 1.1rem 0 0.7rem 0;
  color: var(--theme-primary);
}

.markdown-content p {
  margin: 0.8rem 0;
}

.markdown-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.markdown-content li {
  margin: 0.3rem 0;
}

.markdown-content strong {
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--theme-border);
}

.modal-actions .btn {
  min-width: 120px;
}

/* Enhanced Settings */
.enhanced-settings {
  margin-bottom: 2rem;
}

/* Enhanced Settings */
.enhanced-settings {
  margin-bottom: 2rem;
}

.setting-group {
  margin-bottom: 2rem;
  position: relative;
}

.setting-group label {
  display: block;
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.setting-group label::before {
  content: '⚙️';
  font-size: 0.9rem;
  opacity: 0.8;
}

.setting-group input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.setting-group input:focus {
  outline: none;
  border-color: var(--theme-primary);
  background: var(--theme-surface-hover);
  transform: scale(1.02);
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.15),
    0 8px 25px var(--theme-shadow);
}

.setting-group input:hover:not(:focus) {
  border-color: var(--theme-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

/* Enhanced Stats */
.enhanced-stats,
.break-stats,
.wellness-stats,
.notes-stats,
.goals-stats-enhanced,
.streak-stats-enhanced {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.3s forwards;
}

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

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--theme-surface);
  border-radius: 16px;
  border: 1px solid var(--theme-border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--theme-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.stat-item:hover {
  background: var(--theme-surface-hover);
  border-color: var(--theme-primary);
  transform: translateX(6px) scale(1.02);
  box-shadow: 
    0 8px 25px var(--theme-shadow),
    0 4px 12px rgba(59, 130, 246, 0.15);
}

.stat-item:hover::before {
  transform: scaleY(1);
}

.stat-label {
  font-weight: 600;
  color: var(--theme-text-secondary);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-label::before {
  content: '📊';
  font-size: 0.9rem;
  opacity: 0.7;
}

.stat-value {
  font-weight: 700;
  color: var(--theme-text);
  font-size: 1.3rem;
  text-shadow: 0 2px 4px var(--theme-shadow);
  transition: all 0.3s ease;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.stat-item:hover .stat-value {
  color: var(--theme-primary);
  transform: scale(1.05);
}

/* Enhanced Break Activities */
.break-activities {
  margin-bottom: 2rem;
}

.activity-suggestion {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--theme-surface);
  border-radius: 16px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--theme-border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.activity-suggestion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--theme-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.activity-suggestion:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateX(8px) scale(1.02);
  box-shadow: 
    0 8px 25px var(--theme-shadow),
    0 4px 12px rgba(59, 130, 246, 0.2);
}

.activity-suggestion:hover::before {
  transform: scaleY(1);
  background: rgba(255, 255, 255, 0.3);
}

.activity-suggestion .activity-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.activity-suggestion:hover .activity-icon {
  transform: scale(1.2) rotate(5deg);
}

.activity-suggestion .activity-text {
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.activity-suggestion:hover .activity-text {
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Loading shimmer effects and animations */
.loading-shimmer {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.0) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.0) 100%);
  background-size: 200% 100%;
  /* No animation by default - will be triggered by JavaScript when needed */
  border-radius: 4px;
}

/* Animation class to be triggered by JavaScript */
.loading-shimmer.animate-strip {
  animation: shimmerEffect 1.5s ease-in-out 2;
}

@keyframes shimmerEffect {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Statistics value animations */
.stat-number,
.stat-value,
.overview-value,
.metric-value {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.stat-number:hover,
.stat-value:hover,
.overview-value:hover,
.metric-value:hover {
  transform: scale(1.05);
  color: var(--theme-primary);
}

/* Pulse animation for updating values */
@keyframes pulseUpdate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.updating-value {
  animation: pulseUpdate 0.6s ease-in-out;
}

/* Enhanced goal statistics */
.goal-stat {
  text-align: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.goal-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, 
    rgba(59, 130, 246, 0.08) 0%, 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.goal-stat:hover::before {
  opacity: 1;
}

.goal-stat:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 12px 30px rgba(59, 130, 246, 0.15),
    0 6px 15px rgba(0, 0, 0, 0.1);
}

.goal-stat .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.goal-stat .stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* Enhanced overview cards for analytics */
.overview-card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, 
    rgba(59, 130, 246, 0.08) 0%, 
    transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overview-card:hover::before {
  opacity: 1;
}

.overview-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 16px 40px rgba(59, 130, 246, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
}

.overview-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.overview-card:hover .overview-icon {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.overview-content h5 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.overview-stats {
  position: relative;
  z-index: 1;
}

.overview-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
  display: block;
}

.overview-label {
  font-size: 0.85rem;
  color: var(--theme-text-secondary);
  font-weight: 500;
}

.activity-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
}

.activity-text {
  font-weight: 500;
}

/* Achievements */
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--theme-surface);
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  transition: all 0.2s ease;
  opacity: 0.5;
}

.achievement-item.achieved {
  opacity: 1;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
  border-color: #f59e0b;
}

.achievement-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
}

.achievement-text {
  font-weight: 500;
  color: var(--theme-text);
}

/* Quick Actions */
.quick-goals-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.quick-action-btn:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateX(5px);
}

.action-icon {
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 6px;
}

.action-text {
  font-weight: 500;
}

/* Enhanced Sidebar Sections */
.sidebar-section {
  margin-bottom: 2.5rem;
  position: relative;
}

/* Removed blue strip at bottom of sidebar sections */

/* Enhanced Wellness Tips */
.wellness-tips-enhanced {
  background: var(--theme-surface);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--theme-border);
  margin-bottom: 2rem;
  font-style: italic;
  color: var(--theme-text-secondary);
  line-height: 1.6;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 2px 8px var(--theme-shadow);
  min-height: 200px;
  max-height: 300px;
}

.wellness-tips-enhanced::before {
  content: '💡';
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  opacity: 0.6;
}

/* Enhanced Notes Insights */
.notes-insights-enhanced {
  background: var(--theme-surface);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--theme-border);
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--theme-surface-hover);
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  transition: all 0.3s ease;
}

.insight-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

.insight-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
}

.insight-text {
  font-weight: 500;
  color: var(--theme-text);
}

/* Quick Actions Enhancement */
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  text-align: left;
  color: var(--theme-text);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--theme-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.quick-action-btn:hover {
  background: var(--theme-primary);
  color: white;
  transform: translateX(8px) scale(1.02);
  box-shadow: 
    0 8px 25px var(--theme-shadow),
    0 4px 12px rgba(59, 130, 246, 0.2);
}

.quick-action-btn:hover::before {
  transform: scaleY(1);
  background: rgba(255, 255, 255, 0.3);
}

.action-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.quick-action-btn:hover .action-icon {
  transform: scale(1.2) rotate(5deg);
}

.action-text {
  font-weight: 600;
  transition: all 0.3s ease;
}

.quick-action-btn:hover .action-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  .tool-fullscreen-enhanced {
    flex-direction: column;
  }
  
  .tool-fullscreen-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--theme-border);
  }
  
  .enhanced-timer-circle,
  .enhanced-break-circle,
  .enhanced-wellness-circle {
    width: 250px;
    height: 250px;
  }
  
  .enhanced-timer-time,
  .enhanced-break-time,
  .enhanced-wellness-time {
    font-size: 2.5rem;
  }
  
  .enhanced-streak-number {
    font-size: 4rem;
  }
  
  .enhanced-wellness-activities {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .tool-fullscreen-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  
  .tool-fullscreen-header {
    padding: 1rem;
  }
  
  .tool-fullscreen-main {
    padding: 0.5rem;
    overflow-y: hidden; /* Added to ensure consistency on mobile */
  }
  
  .tool-fullscreen-sidebar {
    padding: 1rem;
    overflow-y: auto; /* Ensure sidebar is scrollable on mobile */
  }
  
  .enhanced-timer-circle,
  .enhanced-break-circle,
  .enhanced-wellness-circle {
    width: 200px;
    height: 200px;
  }
  
  .enhanced-timer-time,
  .enhanced-break-time,
  .enhanced-wellness-time {
    font-size: 2rem;
  }
  
  .enhanced-streak-number {
    font-size: 3rem;
  }
  
  .enhanced-timer-controls,
  .enhanced-break-controls,
  .enhanced-wellness-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .enhanced-break-presets {
    flex-direction: column;
  }
  
  .enhanced-wellness-presets {
    flex-direction: column; /* Make single column on mobile */
  }
  
  .wellness-activities-full {
    grid-template-columns: 1fr; /* Make single column on mobile */
    max-height: none; /* Remove height restriction on mobile */
  }
}

/* ========================================
   THEME-AWARE FULLSCREEN ENHANCEMENTS
   ======================================== */

/* Theme-Aware Premium Fullscreen Overlay Styles - Eye-friendly for light mode */
.tool-fullscreen-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--theme-overlay-background, var(--theme-background)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

.tool-fullscreen-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Theme-Aware Premium Content Styles - Eye-friendly backgrounds */
.tool-fullscreen-content {
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 20px 40px var(--theme-shadow),
    0 8px 16px var(--theme-shadow) !important;
  width: 95% !important;
  max-width: 1200px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(1) !important;
  transition: all 0.4s ease !important;
  position: relative !important;
}

.tool-fullscreen-overlay.active .tool-fullscreen-content {
  transform: scale(1) !important;
}

/* Theme-Aware Premium Header Styles - Eye-friendly colors */
.tool-fullscreen-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2rem !important;
  border-bottom: 1px solid var(--theme-border) !important;
  background: var(--theme-overlay-surface-hover, var(--theme-surface-hover)) !important;
  position: relative !important;
}

.tool-fullscreen-icon {
  font-size: 2rem !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, 
    var(--theme-primary), 
    var(--theme-accent)) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  color: var(--theme-btn-primary-text) !important;
  transition: all 0.2s ease !important;
}

.tool-fullscreen-icon:hover {
  background: linear-gradient(135deg, 
    var(--theme-primary-hover), 
    var(--theme-accent)) !important;
  transform: scale(1.02) !important;
}

.tool-fullscreen-title h2 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--theme-text) !important;
  letter-spacing: -0.01em !important;
}

.tool-fullscreen-close {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 12px !important;
  padding: 0.8rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  color: var(--theme-text) !important;
}

.tool-fullscreen-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: scale(1.05) !important;
}

/* Theme-Aware Enhanced Timer Circle Styles - Comfortable backgrounds */
.enhanced-timer-circle,
.enhanced-break-circle,
.enhanced-wellness-circle {
  position: relative !important;
  width: 300px !important;
  height: 300px !important;
  margin: 0 auto 2rem !important;
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  border-radius: 50% !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: 
    0 8px 32px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

.enhanced-timer-circle:hover,
.enhanced-break-circle:hover,
.enhanced-wellness-circle:hover {
  transform: scale(1.01) !important;
  box-shadow: 
    0 12px 48px var(--theme-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.enhanced-timer-time,
.enhanced-break-time,
.enhanced-wellness-time {
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--theme-text) !important;
  margin-bottom: 0.5rem !important;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
  text-shadow: 0 2px 8px var(--theme-shadow) !important;
  letter-spacing: -0.01em !important;
}

.enhanced-timer-phase,
.enhanced-break-label,
.enhanced-wellness-label {
  font-size: 1.1rem !important;
  color: var(--theme-text-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Theme-Aware Progress Circles */
.enhanced-timer-svg,
.enhanced-break-svg,
.enhanced-wellness-svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
}

.enhanced-timer-bg,
.enhanced-break-bg,
.enhanced-wellness-bg {
  fill: none !important;
  stroke: var(--theme-border) !important;
  stroke-width: 12 !important;
  stroke-linecap: round !important;
}

.enhanced-timer-progress,
.enhanced-break-progress,
.enhanced-wellness-progress {
  fill: none !important;
  stroke-width: 12 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 565.48 !important;
  stroke-dashoffset: 565.48 !important;
  transition: stroke-dashoffset 0.6s ease !important;
}

/* Theme-Aware Sidebar Styles - Comfortable for eyes */
.tool-fullscreen-sidebar {
  width: 320px !important;
  background: var(--theme-overlay-surface-hover, var(--theme-surface-hover)) !important;
  border-left: 1px solid var(--theme-border) !important;
  padding: 2rem !important;
  overflow-y: auto !important;
  max-height: 100% !important;
}

.tool-fullscreen-sidebar h3 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin: 0 0 1.5rem 0 !important;
  color: var(--theme-text) !important;
  border-bottom: 2px solid var(--theme-primary) !important;
  padding-bottom: 0.75rem !important;
}

.tool-fullscreen-sidebar .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem !important;
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 12px !important;
  margin-bottom: 1rem !important;
  transition: all 0.2s ease !important;
}

.tool-fullscreen-sidebar .stat-item:hover {
  background: var(--theme-overlay-surface-hover, var(--theme-surface-hover)) !important;
  border-color: var(--theme-primary) !important;
  transform: translateY(-1px) !important;
}

.tool-fullscreen-sidebar .stat-label {
  font-weight: 500 !important;
  color: var(--theme-text-secondary) !important;
  font-size: 0.9rem !important;
}

.tool-fullscreen-sidebar .stat-value {
  font-weight: 600 !important;
  color: var(--theme-text) !important;
  font-size: 1.1rem !important;
}

/* PRO lock for premium theme options */
.theme-option .pro-lock {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--theme-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.theme-option.pro-locked {
  position: relative;
}
.theme-option.pro-locked::after {
  content: '🔒';
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 12px;
  opacity: .9;
}
.theme-option.pro-locked:hover {
  cursor: not-allowed;
}

/* Theme-Aware Control Buttons */
.tool-fullscreen-main .control-btn {
  padding: 0.9rem 1.8rem !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.tool-fullscreen-main .control-btn.primary {
  background: var(--theme-primary) !important;
  color: var(--theme-btn-primary-text) !important;
}

.tool-fullscreen-main .control-btn.primary:hover {
  background: var(--theme-primary-hover) !important;
  transform: translateY(-1px) !important;
}

.tool-fullscreen-main .control-btn.secondary {
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  color: var(--theme-text) !important;
}

.tool-fullscreen-main .control-btn.secondary:hover {
  background: var(--theme-overlay-surface-hover, var(--theme-surface-hover)) !important;
  transform: translateY(-1px) !important;
}

.tool-fullscreen-main .control-btn.outline {
  background: transparent !important;
  color: var(--theme-text-secondary) !important;
}

.tool-fullscreen-main .control-btn.outline:hover {
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  color: var(--theme-text) !important;
  transform: translateY(-1px) !important;
}

/* Theme-Aware Main Content - Eye-friendly background */
.tool-fullscreen-main {
  flex: 1 !important;
  padding: 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3rem !important;
  overflow-y: hidden !important;
  background: var(--theme-overlay-surface, var(--theme-surface)) !important;
  position: relative !important;
}

/* Premium Enhanced Statistics Override */
.enhanced-stats,
.break-stats,
.wellness-stats,
.notes-stats,
.goals-stats-enhanced,
.streak-stats-enhanced {
  display: flex;
  flex-direction: column;
  gap: 1.5rem !important;
  opacity: 0;
  animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Eye-Comfort Enhancements for Light Mode Fullscreen Tools Only */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay {
  /* Softer background with warm grey tint for reduced eye strain - LIGHT MODE ONLY */
  background: linear-gradient(135deg, 
    rgba(248, 250, 252, 0.98) 0%, 
    rgba(241, 245, 249, 0.98) 50%,
    rgba(226, 232, 240, 0.98) 100%) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-content {
  /* Slightly warmer greyish-white background - LIGHT MODE ONLY */
  background: rgba(248, 250, 252, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.04) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-header {
  /* Warmer header background - LIGHT MODE ONLY */
  background: rgba(241, 245, 249, 0.98) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-main {
  /* Main content with gentle greyish-white background - LIGHT MODE ONLY */
  background: rgba(248, 250, 252, 0.96) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-sidebar {
  /* Sidebar with slightly darker comfortable grey - LIGHT MODE ONLY */
  background: rgba(241, 245, 249, 0.98) !important;
  border-left: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .enhanced-timer-circle,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .enhanced-break-circle,
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .enhanced-wellness-circle {
  /* Timer circles with comfortable greyish background - LIGHT MODE ONLY */
  background: rgba(248, 250, 252, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-sidebar .stat-item {
  /* Stat items with gentle background - LIGHT MODE ONLY */
  background: rgba(248, 250, 252, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-sidebar .stat-item:hover {
  /* Subtle hover effect - LIGHT MODE ONLY */
  background: rgba(241, 245, 249, 1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Reduce harsh white backgrounds in light mode control buttons */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-main .control-btn.secondary {
  background: rgba(248, 250, 252, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-main .control-btn.secondary:hover {
  background: rgba(241, 245, 249, 1) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-close {
  background: rgba(248, 250, 252, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* Eye-Comfort Enhancements for Light Mode Fullscreen Tools Only */
body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-overlay {
  /* Softer background with warm grey tint for reduced eye strain - LIGHT MODE ONLY */
  background: linear-gradient(135deg, 
    rgba(248, 250, 252, 0.98) 0%, 
    rgba(241, 245, 249, 0.98) 50%,
    rgba(226, 232, 240, 0.98) 100%) !important;
}

body:not(.theme-dark):not(.theme-ocean):not(.theme-forest):not(.theme-sunset):not(.theme-purple) .tool-fullscreen-content {
  /* Slightly warmer greyish-white background - LIGHT MODE ONLY */
  background: rgba(248, 250, 252, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* ========================================
   ELEGANT GOAL TRACKER STYLES
======================================== */

/* Beautiful Goal Modal */
.goal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.goal-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.goal-modal-container {
  background: var(--theme-surface);
  border-radius: 20px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--theme-border);
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.goal-modal-overlay.active .goal-modal-container {
  transform: scale(1) translateY(0);
}

.goal-modal-header {
  display: flex;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-background);
}

.goal-modal-icon {
  font-size: 24px;
  margin-right: 12px;
}

.goal-modal-header h2 {
  margin: 0;
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: var(--theme-text);
}

.goal-modal-close {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  color: var(--theme-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.goal-modal-close:hover {
  background: var(--theme-border);
  color: var(--theme-text);
}

.goal-modal-body {
  padding: 28px;
}

.goal-input-group {
  margin-bottom: 24px;
}

.goal-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--theme-text);
  font-size: 14px;
}

.goal-input-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 16px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.goal-input-group input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.goal-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.goal-btn {
  padding: 14px 28px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 120px !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  outline: none !important;
}

.goal-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.goal-btn:hover::before {
  left: 100%;
}

.goal-btn-cancel {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #64748b;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.goal-btn-cancel:hover {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.goal-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.goal-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
}

.goal-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Theme-specific button colors */
.theme-dark .goal-btn-cancel {
  background: linear-gradient(135deg, #374151, #4b5563);
  color: #d1d5db;
  border-color: #4b5563;
}

.theme-dark .goal-btn-cancel:hover {
  background: linear-gradient(135deg, #4b5563, #6b7280);
  color: #f3f4f6;
}

.theme-ocean .goal-btn-primary {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  border-color: #06b6d4;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}

.theme-forest .goal-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.theme-sunset .goal-btn-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.theme-purple .goal-btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #8b5cf6;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

/* Elegant Goal Items */
.elegant-goal-item {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.elegant-goal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--theme-primary);
}

.elegant-goal-item.completed {
  background: var(--theme-success-bg);
  border-color: var(--theme-success);
}

.goal-content {
  position: relative;
  z-index: 2;
}

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

.goal-title {
  font-weight: 700;
  color: var(--theme-text);
  font-size: 15px;
  flex: 1;
  margin-right: 12px;
}

.goal-title.completed-text {
  text-decoration: line-through;
  color: var(--theme-text-secondary);
}

.goal-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.goal-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--theme-border);
  color: var(--theme-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.goal-action-btn:hover {
  transform: scale(1.1);
}

.progress-btn:hover {
  background: var(--theme-primary);
  color: white;
}

.complete-btn:hover {
  background: var(--theme-success);
  color: white;
}

.delete-btn:hover {
  background: var(--theme-danger);
  color: white;
}

.goal-completed-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--theme-success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goal-progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goal-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--theme-border);
  border-radius: 3px;
  overflow: hidden;
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-light));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.goal-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-text-secondary);
  min-width: 35px;
  text-align: right;
}

/* Empty State */
.goals-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--theme-text-secondary);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-subtitle {
  font-size: 14px;
  margin-top: 8px;
  opacity: 0.7;
}

/* Show More Button */
.goals-show-more {
  text-align: center;
  margin-top: 16px;
}

.show-more-btn {
  background: var(--theme-border);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--theme-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.show-more-btn:hover {
  background: var(--theme-primary);
  color: white;
}

/* Celebration Animation */
.goal-completed-celebration {
  animation: goalCelebration 2s ease-in-out;
}

@keyframes goalCelebration {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.05); }
  50% { transform: scale(1.1); }
  75% { transform: scale(1.05); }
}

/* Theme-specific adjustments */
.theme-dark .goal-progress-fill {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

.theme-ocean .goal-progress-fill {
  background: linear-gradient(90deg, #06b6d4, #67e8f9);
}

.theme-forest .goal-progress-fill {
  background: linear-gradient(90deg, #10b981, #6ee7b7);
}

.theme-sunset .goal-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.theme-purple .goal-progress-fill {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

/* Premium Responsive Design */

/* Premium Goals Visuals */
.elegant-goal-item,
.goals-card .goals-list .goal-progress-item {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.04) 100%) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  position: relative;
}

.elegant-goal-item::after,
.goals-card .goals-list .goal-progress-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1200px 400px at -10% -20%, rgba(59,130,246,0.16) 0%, transparent 60%),
              radial-gradient(800px 300px at 120% 120%, rgba(147,51,234,0.14) 0%, transparent 60%);
  opacity: 0.9;
}

.elegant-goal-item:hover,
.goals-card .goals-list .goal-progress-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 18px 45px rgba(59,130,246,0.18),
    0 6px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border-color: rgba(59,130,246,0.35) !important;
}

/* Premium goal header and title */
.elegant-goal-item .goal-title,
.goals-card .goals-list .goal-info .goal-name {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--theme-text), var(--theme-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium progress bar */
.elegant-goal-item .goal-progress-fill,
.goals-card .goal-progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), #8b5cf6);
  position: relative;
}

.elegant-goal-item .goal-progress-fill::after,
.goals-card .goal-progress-bar .progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: progressSheen 2.2s ease-in-out infinite;
}

@keyframes progressSheen {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* Premium action buttons */
.elegant-goal-item .goal-action-btn,
.goal-actions-compact .goal-action-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.elegant-goal-item .goal-action-btn:hover,
.goal-actions-compact .goal-action-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 24px rgba(59,130,246,0.25);
}

/* Premium completed badge */
.elegant-goal-item.completed .goal-completed-badge,
.goals-card .goal-completed-badge {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 10px 24px rgba(16,185,129,0.3) !important;
}

/* Premium add goal buttons */
.add-goal-btn,
.add-goal-btn-large {
  border: 1px solid rgba(255,255,255,0.25) !important;
}

.add-goal-btn::after,
.add-goal-btn-large::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.add-goal-btn:hover::after,
.add-goal-btn-large:hover::after {
  transform: translateX(100%);
}

/* Premium goals summary tiles */
.goals-summary .goal-stat {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.1) !important;
}

@media (max-width: 1024px) {
  .tool-fullscreen-enhanced {
    flex-direction: column;
  }
  
  .tool-fullscreen-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 40vh;
  }
  
  .enhanced-timer-circle,
  .enhanced-break-circle,
  .enhanced-wellness-circle {
    width: 280px;
    height: 280px;
  }
  
  .enhanced-timer-time,
  .enhanced-break-time,
  .enhanced-wellness-time {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .tool-fullscreen-content {
    width: 98%;
    height: 96%;
    border-radius: 20px;
  }
  
  .tool-fullscreen-header {
    padding: 2rem;
  }
  
  .tool-fullscreen-main {
    padding: 2rem;
  }
  
  .enhanced-timer-circle,
  .enhanced-break-circle,
  .enhanced-wellness-circle {
    width: 240px;
    height: 240px;
  }
  
  .enhanced-timer-time,
  .enhanced-break-time,
  .enhanced-wellness-time {
    font-size: 2.4rem;
  }
  
  .enhanced-streak-number {
    font-size: 5rem !important;
  }
}

.goals-stats-enhanced .stat-item::before,
.goals-stats-enhanced .stat-item::after {
    content: none !important;
    display: none !important;
}

/* Videos & Playlists improvements: normal borders, clean hover, proper spacing, no scrollbar shade */

/* Remove hover scroll shadow/indicator in Videos grid */
.videos-grid::after,
.videos-grid:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* When Videos tab is active we hide the main scrollbar; the grid has its own scroll */
body.no-main-scroll {
  overflow-y: hidden !important;
}
.playlist-card,
.video-card {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important; /* contain thumbnail pop-out */
}

/* Subtle hover on cards (no blue outline, no heavy shadows) */

/* YouTube-style Playlist Sidebar Overrides - Rovo Dev */
:root {
  /* local palette for playlist */
}

/* Sidebar container */
.playlist-sidebar,
.playlist-sidebar[style*="display: flex"] {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  background: #0f0f0f !important;
  border-left: 1px solid #303030 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.playlist-sidebar::before { content: none !important; }

/* Header */
.playlist-header {
  padding: 16px !important;
  border-bottom: 1px solid #303030 !important;
  background: #0f0f0f !important;
  color: #f1f1f1 !important;
  box-shadow: none !important;
  gap: 6px !important;
}
.playlist-header::before { content: none !important; }
.playlist-header h4 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #f1f1f1 !important;
}
.playlist-stats {
  font-size: 13px !important;
  color: #aaaaaa !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

/* Videos scroll area */
.playlist-videos {
  background: #0f0f0f !important;
  padding: 8px !important;
}

/* Items */
.playlist-video-item {
  display: flex !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  background: #1a1a1a !important;
  margin: 4px 0 !important;
  border: none !important;
  border-radius: 6px !important;
  position: relative !important;
  gap: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.playlist-video-item::before { content: none !important; }
.playlist-video-item:hover {
  background: #2a2a2a !important;
}
/* Active */
.playlist-video-item.active {
  background: #16222a !important; /* subtle cyan-tinted */
  border-left: 4px solid #00e1ff !important;
  padding-left: 8px !important;
}

/* Thumbnail */
.playlist-video-item .video-thumbnail-wrapper { position: relative !important; flex-shrink: 0 !important; }
.playlist-video-item .video-thumbnail {
  width: 160px !important;
  height: 90px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background: transparent !important;
  margin: 0 !important;
  border: none !important;
}
.playlist-video-item .video-thumbnail::before { content: none !important; }

/* Duration badge */
.video-duration-badge {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  padding: 2px 4px !important;
  border-radius: 2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Content area */
.video-content { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding-right: 0 !important; }
.video-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #f1f1f1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.video-progress-text {
  font-size: 12px !important;
  color: #aaaaaa !important;
  margin: 0 !important;
}

/* Remove old decorative/gradient/progress elements in playlist */
.playlist-video-item .progress-bar,
.playlist-video-item .progress-fill,
.playlist-video-item .progress-pill { display: none !important; }

.playlist-video-item .video-thumbnail::after { content: none !important; }

/* Mobile width override keeps 100% width */
@media (max-width: 768px) {
  .playlist-sidebar,
  .playlist-sidebar[style*="display: flex"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #303030 !important;
    background: #0f0f0f !important;
  }
  .playlist-header h4,
  .playlist-header .playlist-stats { display: block !important; }
  #playlistAIActions, .playlist-ai-actions { display: none !important; }
}

.playlist-card:hover,
.video-card:hover {
  background: var(--theme-surface-hover) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  transform: none !important;
  filter: none !important;
  z-index: auto !important;
}

/* Neutralize older heavy hover rules */
.video-card.glass-card:hover,
.playlist-card.glass-card:hover {
  background: var(--theme-surface-hover) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  transform: none !important;
  filter: none !important;
  z-index: auto !important;
}

/* Keep the thumbnail pop-out contained and elegant */
.video-card .video-thumbnail,
.playlist-card .video-thumbnail {
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
}

.video-card:hover .video-thumbnail,
.playlist-card:hover .video-thumbnail {
  transform: scale(1.03) !important;
  box-shadow: none !important;
}

.video-card .video-thumbnail img,
.playlist-card .video-thumbnail img {
  transition: transform 0.3s ease !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.video-card:hover .video-thumbnail img,
.playlist-card:hover .video-thumbnail img {
  transform: scale(1.06) !important;
}

/* Add comfortable spacing between thumbnail and title (like playlists) */
.video-info {
  padding: var(--space-24) !important;
  padding-top: var(--space-20) !important;
  border-top: 1px solid var(--theme-border) !important;
}

/* Match playlists grid feel and avoid colored scrollbar shade */
.videos-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: var(--space-24) !important;
  scrollbar-color: auto !important; /* reset any custom scrollbar tint */
}

/* ====================================================== */
/* == UNIFORM VIDEO CARD HEIGHT & SUBTLE BUTTONS FIX   == */
/* ====================================================== */

/* 1. Ensure uniform card height and correct internal layout */
.videos-grid {
    align-items: stretch !important;
}

.playlist-card,
.video-card {
    gap: 0 !important;
}

.playlist-card,
.video-card  {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.video-card .video-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.video-card .video-info h3 {
    flex-grow: 0;
    color: var(--theme-text) !important; /* Use existing theme text color */
}
.video-card .video-info .video-channel {
    color: var(--theme-text-secondary) !important; /* Use existing secondary text color */
}
.video-card .video-info .action-buttons {
    margin-top: auto;
    display: flex !important; /* Ensure visibility */
}

/* 2. Style the animated action buttons to be subtle */
.video-card .action-button {
    background: transparent !important; /* Make background transparent */
    border: 1px solid var(--theme-border) !important; /* Subtle border from your theme */
    color: var(--theme-text) !important; /* Inherit text color from theme */
    box-shadow: none !important; /* Remove any strong shadows */
}

/* 3. Style the icons within the buttons */
.video-card .action-button ion-icon {
    color: var(--theme-text) !important; /* Use theme text color for icons */
}

/* 4. Ensure the static action buttons (like mark complete checkbox) are visible */
/* This ensures the checkmark and trash icons in playlists are also visible */
.action-buttons .animated-action-button,
.action-buttons .action-button {
    background: transparent !important; /* Transparent background */
    border: 0px solid var(--theme-border) !important; /* Subtle border */
    color: var(--theme-text) !important; /* Use theme text color */
}
.action-buttons .animated-action-button ion-icon,
.action-buttons .action-button ion-icon {
    color: var(--theme-text) !important; /* Use theme text color for icons */
}

/* Adjust general action button spacing if needed - ensure proper display */
.action-buttons {
    gap: 20px; /* Adjust spacing between buttons if they look too close */
    justify-content: center;
    padding: 10px 0; /* Add some vertical padding above/below buttons */
}

.video-card .action-button ion-icon,
.playlist-card .action-button ion-icon {
    color: var(--theme-text-secondary) !important;
}

#calendarMini .calendar-grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Subscription Dropdown - Similar to Profile Dropdown */
/* Embedded subscription panel (inside profile dropdown) */
.subscription-dropdown { display:none; animation: fadeSlideIn .25s ease; max-height:380px; overflow:auto; }
.subscription-dropdown.active { display:block; }
.subscription-header { display:flex; align-items:center; gap:8px; }
.subscription-back-btn { background:transparent; border:1px solid rgba(255,255,255,0.25); border-radius:8px; padding:4px 10px; cursor:pointer; }
.subscription-back-btn:hover { background:rgba(255,255,255,0.1); }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

.subscription-menu {
  position: relative;
  z-index: 2;
}

.subscription-info {
  margin: var(--space-16) 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-8) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.info-label {
  font-weight: 500;
  color: var(--theme-text-secondary);
  font-size: 14px;
}

.info-value {
  font-weight: 600;
  color: var(--theme-text);
  font-size: 14px;
}

.subscription-actions {
  margin-top: var(--space-20);
  display: flex;
  justify-content: center;
}

.subscription-cancel-btn {
  min-width: 200px;
  justify-content: center;
}

.subscription-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.subscription-cancel-btn:hover span:first-child {
  filter: brightness(1.2);
}

/* Make manage subscription button relative for dropdown positioning */
#manageSubscriptionBtn {
  position: relative;
}