:root {
    --bg-gradient-from: #1a1c2c;
    --bg-gradient-to: #0a0a14;
    --widget-bg: rgba(255, 255, 255, 0.08); /* Enhanced: Increased from 0.05 to 0.08 for better visibility */
    --widget-border: rgba(255, 255, 255, 0.12); /* Enhanced: Increased from 0.1 for better definition */
    --widget-shadow-inset-color: rgba(255, 255, 255, 0.08);
    /* Enhanced: Professional layered shadows with better depth */
    --widget-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 
                     0 2px 4px -1px rgba(0, 0, 0, 0.1),
                     0 0 0 1px rgba(255, 255, 255, 0.08),
                     inset 0 1px 2px 0 var(--widget-shadow-inset-color);
    --header-bg: rgba(255, 255, 255, 0.08); /* Enhanced: Increased from 0.05 */
    --header-border: rgba(255, 255, 255, 0.12); /* Enhanced: Increased from 0.1 */
    --text-primary: #ffffff;
    --text-secondary: #e5e7eb; /* Enhanced: Lighter gray-200 for better contrast (was gray-300) */
    --text-tertiary: #9ca3af; /* gray-400 */
    --text-accent: #3b82f6; /* Enhanced: blue-500 for better contrast (was blue-400) */
    --text-accent-cyan: #67e8f9; /* cyan-300 */
    --slot-future-inactive-bg: rgba(255, 255, 255, 0.05);
    --slot-past-inactive-bg: rgba(255, 255, 255, 0.2);
    --heatmap-future-bg: rgba(255, 255, 255, 0.05); /* Default future heatmap block color */
    --glow-color-rgb: 59, 130, 246; /* Updated to match blue-500 */
    --progress-bar-bg: linear-gradient(to right, #3b82f6, #60a5fa, #a7f3d0); /* Enhanced: More refined gradient */
    --milestone-dot-inactive: rgba(255, 255, 255, 0.2); /* Inactive milestone subtask dot */
    
    /* Temporal Context Colors */
    --temporal-past-bg: rgba(156, 163, 175, 0.3); /* Muted gray for past */
    --temporal-past-border: rgba(156, 163, 175, 0.4);
    --temporal-present-bg: rgba(59, 130, 246, 0.9); /* Vibrant blue for present */
    --temporal-present-border: rgba(59, 130, 246, 1);
    --temporal-future-bg: rgba(34, 197, 94, 0.4); /* Bright green for future */
    --temporal-future-border: rgba(34, 197, 94, 0.6);
    
    /* NEW: Professional spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
  }

  /* NEW: Glow effect for Obsidian icon when file exists */
  .obsidian-icon-filled {
    position: relative;
  }
  .obsidian-icon-filled i {
    filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.8)); /* Purple glow */
    color: rgba(168, 85, 247, 0.9) !important; /* Purple color when file exists */
  }

  /* Goals widget milestone tab styling */
  .goals-milestone-tab {
    position: relative;
    cursor: pointer;
  }
  
  .goals-milestone-tab.active {
    color: var(--text-primary) !important;
    border-bottom-color: #3b82f6 !important;
  }
  
  .goals-milestone-tab:not(.active) {
    color: var(--text-secondary);
  }
  
  .goals-milestone-tab:not(.active):hover {
    color: var(--text-primary);
    border-bottom-color: var(--widget-border);
  }
  
  /* Milestone modal tab styling */
  .milestone-modal-tab {
    position: relative;
    cursor: pointer;
  }
  
  .milestone-modal-tab.active {
    color: var(--text-primary) !important;
    border-bottom-color: #3b82f6 !important;
  }
  
  .milestone-modal-tab:not(.active) {
    color: var(--text-secondary);
  }
  
  .milestone-modal-tab:not(.active):hover {
    color: var(--text-primary);
    border-bottom-color: var(--widget-border);
  }
  .obsidian-icon-filled:hover i {
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 1));
    color: rgba(192, 132, 252, 1) !important; /* Lighter purple on hover */
  }
  
  /* NEW: Static glow for completed milestone dots */
  .completed-dot-glow {
    box-shadow: 0 0 4px 0px rgba(var(--glow-color-rgb, 74, 222, 128), 0.6); /* MODIFIED: Reduced blur from 7px to 4px and spread from 1px to 0px */
  }

  body {
    font-family: 'Inter', 'sans-serif';
    background-color: var(--bg-gradient-to);
    background-image: linear-gradient(to bottom right, var(--bg-gradient-from), var(--bg-gradient-to));
    color: var(--text-primary);
  }
  /* Pulse for the 'present' block */
  @keyframes pulse {
    50% { opacity: 0.6; }
  }
  .animate-pulse-block {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  /* Current period indicator ring - visible in both light and dark mode */
  .current-period-ring {
    --ring-color: #ffffff; /* Default: white for dark mode */
    box-shadow: 0 0 0 2px var(--ring-color);
  }
  
  /* Light theme: black ring */
  html[data-theme="light"] .current-period-ring {
    --ring-color: #000000; /* Black for light mode */
  }
  
  /* Dark theme: white ring */
  html[data-theme="dark"] .current-period-ring {
    --ring-color: #ffffff; /* White for dark mode */
  }
  
  /* Fallback: use prefers-color-scheme if data-theme not set */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .current-period-ring {
      --ring-color: #ffffff; /* White for dark mode */
    }
  }
  
  @media (prefers-color-scheme: light) {
    html:not([data-theme]) .current-period-ring {
      --ring-color: #000000; /* Black for light mode */
    }
  }
  
  /* Obsidian file indicator - tiny circle dot (like milestone dots) */
  .has-obsidian-file {
    position: relative;
  }
  .has-obsidian-file::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    /* White for dark themes, black for light themes */
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  }
  
  /* Light theme - black dot */
  html[style*="--text-primary: #1f2937"] .has-obsidian-file::before,
  html[style*="--text-primary: #064e3b"] .has-obsidian-file::before,
  html[style*="--text-primary: #581c37"] .has-obsidian-file::before {
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
  }
  
  /* Pulse for hourglass icon */
  @keyframes icon-pulse {
    50% { transform: scale(1.1); opacity: 0.8; }
  }
  .animate-icon-pulse {
    animation: icon-pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Scrollbar styling */
  main::-webkit-scrollbar,
  .column-scrollbar::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  #todo-list-container::-webkit-scrollbar {
    width: 8px;
  }
  .column-scrollbar::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  #todo-list-container::-webkit-scrollbar {
    width: 6px;
  }
  main::-webkit-scrollbar-track,
  .column-scrollbar::-webkit-scrollbar-track,
  textarea::-webkit-scrollbar-track,
  #todo-list-container::-webkit-scrollbar-track {
    background: transparent;
  }
  main::-webkit-scrollbar-thumb,
  .column-scrollbar::-webkit-scrollbar-thumb,
  textarea::-webkit-scrollbar-thumb,
  #todo-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
  }
  #todo-list-container:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
  }
  #todo-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  main:hover::-webkit-scrollbar-thumb,
  .column-scrollbar:hover::-webkit-scrollbar-thumb,
  textarea:hover::-webkit-scrollbar-thumb {
    background: var(--widget-border);
  }
  main::-webkit-scrollbar-thumb:hover,
  .column-scrollbar:hover::-webkit-scrollbar-thumb,
  textarea:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
  }

  #theme-switcher button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    position: relative;
  }

  #theme-switcher button.active {
    color: #ffffff;
  }
  
  #theme-switcher button.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 16px;
    background-color: #2563eb;
    border-radius: 4px;
    z-index: 0;
  }
  
  #theme-switcher button i,
  #theme-switcher button svg {
    position: relative;
    z-index: 1;
  }

  /* Category pill colors */
  /* REMOVED: .pill-default, .pill-work, etc. These are now generated dynamically. */

  /* Key Result Input Focus */
  #subtask-input-container:focus-within {
    border-color: var(--text-accent);
  }

  /* SortableJS drag styles */
  .sortable-ghost {
    opacity: 0.4;
    background-color: rgba(96, 165, 250, 0.3);
  }
  .draggable-widget {
    cursor: grab;
  }
  .draggable-widget:active {
    cursor: grabbing;
  }

  /* Style for crossed-out time slots */
  .slot-past::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.3); /* Darker line for contrast */
    transform: translateY(-50%);
    opacity: 0.7;
  }
  /* Lighter line for dark themes */
  html[style*="--text-primary: #ffffff"] .slot-past::after,
  html[style*="--text-primary: #f0f0ff"] .slot-past::after, /* Cyberpunk */
  html[style*="--text-primary: #e0f7ff"] .slot-past::after, /* Ocean */
  html[style*="--text-primary: #ffedd5"] .slot-past::after, /* Sunset */
  html[style*="--text-primary: #e5e5e5"] .slot-past::after, /* Charcoal */
  html[style*="--text-primary: #00ff00"] .slot-past::after,  /* Matrix */
  html[style*="--text-primary: #f3e8ff"] .slot-past::after  /* Twilight */
    {
      background-color: rgba(255, 255, 255, 0.3); /* Lighter line for dark themes */
  }

  /* Improved Progress Bar Style */
  .progress-bar-fill {
    background: var(--progress-bar-bg, var(--text-accent)); /* Use gradient or fallback */
    transition: width 0.3s ease-out; /* Smooth transition */
    
    /* Add relative positioning for the shine effect */
    position: relative;
    overflow: hidden; /* Hide the shine element outside the bar */
    /* z-index: 1; */ /* REMOVED: This was placing it above the text. */
    /* By default, with position: relative, it has z-index: auto, */
    /* and the text span coming after it in the DOM will stack on top. */
  }

  /* NEW: Add a "shine" pseudo-element for a moving line effect */
  .progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start off-screen */
    bottom: 0;
    width: 80%; /* Width of the shine effect */
    
    /* A white, angled line */
    background: linear-gradient(
      to right, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0.4) 50%, /* The "line" */
      rgba(255, 255, 255, 0) 100%
    );
    
    /* Make it angled */
    transform: skewX(-25deg); 
    
    /* Apply the animation */
    animation: progress-shine 2s linear infinite;
  }


  /* NEW: Animation keyframes for the shine */
  @keyframes progress-shine {
    from {
      left: -100%;
    }
    to {
      left: 120%; /* Move it across the entire bar + its own width */
    }
  }

  /* NEW: Faster animation for the current slot progress bar */
  #slot-progress-bar-new::after {
    animation-duration: 0.8s; /* Make it faster than the default 2s */
  }

  /* Todo List Styles */
  #todo-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--widget-border);
    transition: background-color 0.2s;
    border-radius: 4px;
    margin-bottom: 2px;
  }
  #todo-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  #todo-list li:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  #todo-list li.group {
    position: relative;
  }
  #todo-list input[type="checkbox"] {
    flex-shrink: 0;
    appearance: none; /* Remove default */
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
  }
    #todo-list input[type="checkbox"]:checked {
      background-color: var(--text-accent);
      border-color: var(--text-accent);
    }
    #todo-list input[type="checkbox"]:checked::after { /* Checkmark */
      content: '';
      position: absolute;
      top: 2px;
      left: 5px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  #todo-list span {
    flex-grow: 1;
    transition: color 0.2s, text-decoration 0.2s;
  }
  #todo-list input[type="checkbox"]:checked + span {
    color: var(--text-tertiary);
    text-decoration: line-through;
    opacity: 0.7;
  }
  .todo-delete-btn {
      margin-left: 8px;
      color: var(--text-tertiary);
      opacity: 0.5;
      transition: opacity 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    #todo-list li:hover .todo-delete-btn {
      opacity: 1;
    }
    .todo-delete-btn:hover {
      color: #f87171; /* red-400 */
    }

  /* Onboarding Styles */
  #onboarding-highlight-frame {
    box-sizing: border-box; /* Include border in size */
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* Start hidden */
    pointer-events: none; /* Make sure it doesn't block interactions */
  }
  #onboarding-highlight-frame.visible {
     opacity: 1;
  }

  /* Style for the currently highlighted onboarding element */
  .onboarding-target-active {
    position: relative; /* Needed for z-index */
    z-index: 102; /* Above overlay, below popover/frame */
    transition: transform 0.3s ease-in-out; /* Optional: smooth scale effect */
  }

   /* Onboarding Step Indicators */
   #onboarding-steps {
      display: flex;
      gap: 6px; /* Space between dots */
      align-items: center;
      /* REMOVED: position: absolute, left: 50%, transform: translateX(-50%) */
      /* It is now centered using a flexbox parent */
   }
   .onboarding-step-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3); /* Inactive dot color */
      transition: background-color 0.3s ease;
   }
   .onboarding-step-dot.active {
      background-color: var(--text-accent); /* Active dot color */
   }

   /* NEW: Vertical Tab Button Styles */
  .settings-tab-btn {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    border-left: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
  }
  .settings-tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
  }
  .settings-tab-btn.active {
    color: var(--text-accent);
    border-left-color: var(--text-accent);
    background-color: rgba(99, 102, 241, 0.1);
  }
  
  /* Grid block tab buttons (for other modals) */
  .grid-block-tab-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .grid-block-tab-btn:hover {
    color: var(--text-primary);
  }
  .grid-block-tab-btn.active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
  }
  
  .grid-block-tab-panel {
    display: block;
  }
  .grid-block-tab-panel.hidden {
    display: none;
  }
  
  /* Settings Tab Panels */
  .settings-tab-panel {
    display: block;
  }
  .settings-tab-panel.hidden {
    display: none;
  }

  /* Professional Modal Animations */
  #milestone-modal.hidden {
    opacity: 0;
    pointer-events: none;
  }
  #milestone-modal:not(.hidden) {
    animation: fadeIn 0.3s ease-out;
  }
  #milestone-modal:not(.hidden) > div {
    animation: modalSlideUp 0.3s ease-out;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes modalSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Professional Input Focus States */
  input[type="text"]:focus,
  input[type="date"]:focus,
  textarea:focus,
  select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  /* Professional Select Dropdown Styling */
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  /* Enhanced Button Hover Effects */
  button:not(:disabled):hover {
    transform: translateY(-1px);
  }
  button:not(:disabled):active {
    transform: translateY(0);
  }

  /* Professional Card Hover Effects */
  .milestone-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .milestone-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 
                0 4px 6px -2px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  
  /* NEW: Enhanced Widget Card Styling */
  .widget-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .widget-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2),
                0 4px 6px -2px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  
  /* NEW: Professional Typography Scale */
  .text-display {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
  .text-headline {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }
  .text-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
  .text-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }
  .text-caption {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
  }
  
  /* NEW: Enhanced Input Styling */
  input[type="text"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
    transition: all 0.2s ease;
  }
  input[type="text"]:hover:not(:focus),
  input[type="date"]:hover:not(:focus),
  input[type="number"]:hover:not(:focus),
  textarea:hover:not(:focus),
  select:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.06);
  }
  
  /* NEW: Enhanced Button Styling */
  button {
    min-height: 40px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  button:not(:disabled):hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  /* Grid Block Popup Styles */
  .grid-block-popup {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out;
  }
  .grid-block-popup.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
  }
  .grid-block-popup:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .grid-popup-content {
    background: rgba(31, 41, 55, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 
                0 4px 6px -2px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 320px;
  }
  
  /* Light theme popup styles */
  html[data-theme="light"] .grid-popup-content {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
  }
  .grid-popup-header {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .grid-popup-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .grid-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #e5e7eb;
  }
  .grid-popup-row i {
    flex-shrink: 0;
  }
  .grid-popup-row strong {
    color: #ffffff;
    font-weight: 600;
  }
  
  /* Light theme popup styles */
  html[data-theme="light"] .grid-popup-content {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
  }
  html[data-theme="light"] .grid-popup-row {
    color: #374151;
  }
  html[data-theme="light"] .grid-popup-row strong {
    color: #1f2937;
  }
  
  /* Dark theme popup styles (default) */
  html[data-theme="dark"] .grid-popup-content,
  html:not([data-theme]) .grid-popup-content {
    background: rgba(31, 41, 55, 0.98);
    border-color: rgba(255, 255, 255, 0.2);
  }
  html[data-theme="dark"] .grid-popup-header,
  html:not([data-theme]) .grid-popup-header {
    color: #f9fafb;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  html[data-theme="dark"] .grid-popup-row,
  html:not([data-theme]) .grid-popup-row {
    color: #e5e7eb;
  }
  html[data-theme="dark"] .grid-popup-row strong,
  html:not([data-theme]) .grid-popup-row strong {
    color: #ffffff;
  }
  
  /* Dimming effect for grid blocks */
  [data-grid-type].dimmed {
    opacity: 0.3 !important;
    filter: brightness(0.6);
    transition: opacity 0.2s ease-out, filter 0.2s ease-out;
  }
  
  /* Ensure hovered block stays visible */
  [data-grid-type]:not(.dimmed) {
    opacity: 1 !important;
    filter: brightness(1);
  }
  
  /* Mobile responsive fixes for Current Age and Time Remaining widgets */
  #stat-age, #stat-remaining {
    overflow: hidden;
  }
  
  #stat-age .flex, #stat-remaining .flex {
    width: 100%;
    max-width: 100%;
  }
  
  /* Ensure widgets don't overflow on small screens */
  @media (max-width: 640px) {
    #stat-age .flex > div,
    #stat-remaining .flex > div {
      min-width: 0;
      flex-shrink: 1;
    }
  }