/* ========================================= */
/* DESIGN SYSTEM - CONSOLIDATED             */
/* ========================================= */

/* ========================================= */
/* TYPOGRAPHY SYSTEM                        */
/* ========================================= */
html {
    font-size: 100%;
  }

/* Font Family Variables */
:root {
  /* Primary font stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  --font-serif: 'Source Serif 4', serif;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Font sizes - using rem for accessibility */
  --font-size-xs: 0.625rem;     /* 10px */
  --font-size-sm: 0.75rem;      /* 12px */
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-md: 1rem;          /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* Disable transitions during initial load */
html.loading,
html.loading *,
html.loading *::before,
html.loading *::after {
  transition: none !important;
  animation: none !important;
}
  
  :root {
    /* ========================================= */
    /* SPACING SYSTEM                           */
    /* ========================================= */
    
    /* Base spacing scale - consistent across the app */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 1.75rem;   /* 28px */
    --space-8: 2rem;      /* 32px */
    --space-9: 2.25rem;   /* 36px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-14: 3.5rem;   /* 56px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-28: 7rem;     /* 112px */
    --space-32: 8rem;     /* 128px */
    
    /* Common spacing patterns */
    --padding-xs: var(--space-2);
    --padding-sm: var(--space-3);
    --padding-base: var(--space-4);
    --padding-md: var(--space-6);
    --padding-lg: var(--space-8);
    --padding-xl: var(--space-12);
    
    --margin-xs: var(--space-2);
    --margin-sm: var(--space-3);
    --margin-base: var(--space-4);
    --margin-md: var(--space-6);
    --margin-lg: var(--space-8);
    --margin-xl: var(--space-12);
    
    --gap-xs: var(--space-2);
    --gap-sm: var(--space-3);
    --gap-base: var(--space-4);
    --gap-md: var(--space-6);
    --gap-lg: var(--space-8);
    --gap-xl: var(--space-12);
    
    /* Core brand colors */
    --brand: #D9714E;      
    --brand-dark: #B75B3E; 
    --brand-light: #E48A61; 
    
    /* Grayscale palette */
    --slate-000: #FFFFFF;       
    --slate-050: #F8FAFC;    
    --slate-100: #F1F5F9;
    --slate-150: #EDF0F5;     
    --slate-200: #E2E8F0;
    --slate-250: #D9E0E8;    
    --slate-300: #CBD5E1;     
    --slate-400: #94A3B8;     
    --slate-500: #64748B;      
    --slate-600: #475569;     
    --slate-700: #334155;
    --slate-750: #293244;     
    --slate-800: #1E293B;
    --slate-850: #131C2E;     
    --slate-900: #0F172A;
    --slate-950: #0A0D16;      
    
    /* State colors */
    --success: #1F7A39;      
    --info: #3B82F6;         
    --warning: #F59E0B;      
    --error: #F03E3E;
    
    /* Accent Colors */
    --accent-main-000: #AF503B;
    --accent-main-100: #BD5940;
    --accent-main-200: #C96146;
    --accent-main-900: #F2D6CF;
    
    --accent-pro-000: #4E3E80;
    --accent-pro-100: #5F4BA9;
    --accent-pro-200: #9C85DF;
    --accent-pro-900: #E6E0F5;
    
    --accent-secondary-000: #306CB1;
    --accent-secondary-100: #3B82F6;
    --accent-secondary-200: #5193FF;
    --accent-secondary-900: #D8E6FD;
    
    /* Danger Colors */
    --danger-000: #A3160F;
    --danger-100: #C12C26;
    --danger-200: #E26762;
    --danger-900: #FADEDE;
    
    /* On-color Text */
    --oncolor-100: #FFFFFF;
    --oncolor-200: #F8F8F5;
    --oncolor-300: #F8F8F5;
    
    /* Text Colors */
    --text-000: #100E0D;
    --text-100: #241F1A;
    --text-200: #342F2A;
    --text-300: #4D4940;
    --text-400: #5E5A53;
    --text-500: #6D6A60; 
    
    /* Utility Classes */
  --color-1: #3a3a3a;
  --color-2: #232322;
  --color-3: #2b2b2b;
  --color-4: #272727;
  --color-5: #949494;
  --color-6: #e7e7e7;
  --color-7: #f5f5f5;
  --color-8: #6c6968;
  --color-9: #f5f5dc;
  --color-10: #c1c1c1;
  
  /* Scrollbar Colors */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
  
  /* Dark Mode Scrollbar Colors */
  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.3);
  
  }
  
  /* ========================================= */
  /* LIGHT MODE THEME                         */
  /* ========================================= */
  
  :root, 
  [data-theme="light"] {
    /* Map semantic color variables to our constants */
    
    /* Brand colors */
    --color-primary: var(--brand);
    --color-primary-dark: var(--brand-dark);
    --color-secondary: var(--brand-light);
    
    /* Text colors */
    --color-text: var(--slate-800);
    --color-text-light: var(--color-8);
    
    /* Background colors */
    --color-background: var(--color-7);
    --color-background-alt: var(--color-7);
    --color-white: var(--slate-000);
    
    /* Border colors */
    --color-border:var(--color-6);
    
    /* State colors */
    --color-success: var(--success);
    --color-info: var(--info);
    --color-warning: var(--warning);
    --color-error: var(--error);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Border Radius - Enhanced System */
    --border-radius-none: 0;
    --border-radius-sm: 0.25rem;    /* 4px */
    --border-radius-base: 0.375rem; /* 6px */
    --border-radius-md: 0.375rem;   /* 6px - keeping for compatibility */
    --border-radius-lg: 0.5rem;     /* 8px */
    --border-radius-xl: 0.75rem;    /* 12px */
    --border-radius-2xl: 1rem;      /* 16px */
    --border-radius-3xl: 1.5rem;    /* 24px */
    --border-radius-full: 9999px;   /* Full circle */
    --border-radius-pill: 9999px;   /* Pill shape alias */
    
    /* Animation & Layout */
    --transition-speed: 300ms;
    --sidebar-width: 22rem;
    --sidebar-width-xl: 22rem;
    
    /* Claude-inspired theme variables */
    --accent-brand: var(--brand);
    
    /* Accent colors */
    --accent-main-000: #AF503B;
    --accent-main-100: #BD5940;
    --accent-main-200: #C96146;
    --accent-main-900: #F2D6CF;
    
    --accent-pro-000: #4E3E80;
    --accent-pro-100: #5F4BA9;
    --accent-pro-200: #9C85DF;
    --accent-pro-900: #E6E0F5;
    
    --accent-secondary-000: #306CB1;
    --accent-secondary-100: #3B82F6;
    --accent-secondary-200: #5193FF;
    --accent-secondary-900: #D8E6FD;
    
    /* Background colors */
    --bg-000: var(--slate-000);
    --bg-100: var(--slate-050);
    --bg-200: var(--slate-150);
    --bg-300: var(--slate-200);
    --bg-400: var(--slate-250);
    --bg-500: var(--slate-300);
    
    /* Border colors */
    --border-100: var(--slate-500);
    --border-200: var(--slate-500);
    --border-300: var(--slate-500);
    --border-400: var(--slate-500);
    
    /* Danger colors */
    --danger-000: #A3160F;
    --danger-100: #C12C26;
    --danger-200: #E26762;
    --danger-900: #FADEDE;
    
    /* On-color text */
    --oncolor-100: var(--slate-000);
    --oncolor-200: #F8F8F5;
    --oncolor-300: #F8F8F5;
    
    /* Text colors */
    --text-000: #100E0D;
    --text-100: #241F1A;
    --text-200: #342F2A;
    --text-300: #4D4940;
    --text-400: #5E5A53;
    --text-500: #6D6A60;
  }
  
  /* ========================================= */
  /* DARK MODE THEME                          */
  /* ========================================= */
  
  [data-theme="dark"] {
    /* Brand colors - keeping your brand palette */
    --color-primary: var(--brand);
    --color-primary-dark: var(--brand-dark);
    --color-secondary: var(--brand-light);
    
    /* Text colors - inverted for dark mode */
    --color-text: var(--slate-050);
    --color-text-light: var(--color-10);
    
    /* Background colors - dark palette */
    --color-background: var(--color-4);     
    --color-background-alt: var(--color-3);  
    --color-white: var(--color-2);          
    
    /* Border colors */
    --color-border: var(--color-1);   
    
    /* State colors - brighter for dark mode */
    --color-success: #4ADE80;
    --color-info: #60A5FA;
    --color-warning: #FBBF24;
    --color-error: #F87171;
    
    /* Shadow adjustments for dark mode - removed */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    
    /* Claude-inspired theme variables for dark mode */
    --accent-brand: var(--brand);
    
    /* Accent colors */
    --accent-main-000: #C06C52;
    --accent-main-100: #AA5842;
    --accent-main-200: #9E5038;
    --accent-main-900: #2D1F1B;
    
    --accent-pro-000: #A48EED;
    --accent-pro-100: #6D5DC7;
    --accent-pro-200: #5F4BA9;
    --accent-pro-900: #1A1631;
    
    --accent-secondary-000: #5193FF;
    --accent-secondary-100: #3B82F6;
    --accent-secondary-200: #306CB1;
    --accent-secondary-900: #16222E;
    
    /* Background colors */
    --bg-000: var(--slate-700);
    --bg-100: var(--slate-750);
    --bg-200: var(--slate-800);
    --bg-300: var(--slate-850);
    --bg-400: var(--slate-900);
    --bg-500: var(--slate-950);
    
    /* Border colors */
    --border-100: var(--slate-600);
    --border-200: var(--slate-600);
    --border-300: var(--slate-600);
    --border-400: var(--slate-600);
    
    /* Danger colors */
    --danger-000: #F48B88;
    --danger-100: #F26E6B;
    --danger-200: #AC3731;
    --danger-900: #2C1413;
    
    /* On-color text */
    --oncolor-100: var(--slate-000);
    --oncolor-200: #F8F8F5;
    --oncolor-300: #F8F8F5;
    
    /* Text colors */
    --text-000: #F8F8F5;
    --text-100: #F3F2EE;
    --text-200: #F2F1EC;
    --text-300: #CAC6BE;
    --text-400: #B3AEA0;
    --text-500: #A09A8C;
  }
  
  /* ========================================= */
  /* GLOBAL RESET                             */
  /* ========================================= */
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    background: var(--color-background);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  button {
    cursor: pointer;
    font-family: inherit;
  }
  
  input, select, textarea {
    font-family: inherit;
  }
  
  .hidden {
    display: none;
  }
  
  /* ========================================= */
  /* MODAL OVERLAY DESIGN SYSTEM             */
  /* ========================================= */
  
  /* Base modal overlay - unified across all modals */
  .modal-overlay,
  .login-modal-overlay,
  .upgrade-modal-overlay,
  .contrast-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  }
  
  /* Dark theme overlay adjustments */
  [data-theme="dark"] .modal-overlay,
  [data-theme="dark"] .login-modal-overlay,
  [data-theme="dark"] .upgrade-modal-overlay,
  [data-theme="dark"] .contrast-modal {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  /* Hidden state for all modals */
  .modal-overlay.hidden,
  .login-modal-overlay.login-modal-hidden,
  .upgrade-modal-overlay.hidden,
  .contrast-modal:not(.show) {
    opacity: 0;
    pointer-events: none;
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .login-modal-overlay,
    .upgrade-modal-overlay,
    .contrast-modal {
      transition: none;
    }
  }
  
  /* ========================================= */
  /* COMPONENTS                               */
  /* ========================================= */
  
  /* Icon-only buttons */
  .btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: var(--color-background-alt);
    border: none;
    border-radius: var(--border-radius-lg);
    transition: background-color 0.2s;
  }
  
  .btn-icon-only:hover {
    background-color: var(--color-border);
  }
  
  .btn-icon-only svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-light);
  }
  
  /* Small buttons */
  .btn-small {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: background-color 0.2s;
  }
  
  .btn-small:hover {
    background-color: var(--color-background-alt);
  }
  
  .btn-small:first-child {
    border-top-left-radius: var(--border-radius-md);
    border-bottom-left-radius: var(--border-radius-md);
  }
  
  .btn-small:last-child {
    border-top-right-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
  }
  
  .btn-icon {
    width: 0.75rem;
    height: 0.75rem;
  }
  
  /* Form controls */
  .select-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
  }
  
  .select-input:focus {
    outline: none;
    ring: 1px var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .text-input {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-top-right-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
    background-color: var(--color-white);
    color: var(--color-text);
  }
  
  .text-input:focus {
    outline: none;
    ring: 1px var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .text-area {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    min-height: 4rem;
    resize: vertical;
    background-color: var(--color-white);
    color: var(--color-text);
  }
  
  .text-area:focus {
    outline: none;
    ring: 1px var(--color-primary);
    border-color: var(--color-primary);
  }
  
  /* Badges and labels */
  .value-badge {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    background-color: rgba(217, 113, 78, 0.1);
    color: var(--color-primary);
    padding: calc(var(--space-1) / 2) calc(var(--space-2) * 0.75);
    border-radius: var(--border-radius-md);
  }
  
  .setting-label {
    font-size: calc(var(--font-size-base) * 0.9);
    color: var(--color-text-light);
  }
  
  .hint-text {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
  }
  
  .control-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--space-1);
    font-weight: var(--font-weight-normal);
  }
  
  /* Keyboard key styling */
  kbd {
    background-color: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.125rem 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
  }
  
  .section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    margin-bottom: var(--margin-md);
  }
  
  /* Toggle switch */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.25rem;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .toggle-switch label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: .4s;
    border-radius: 34px;
  }
  
  .toggle-switch label:before {
    position: absolute;
    content: "";
    height: 0.875rem;
    width: 0.875rem;
    left: 0.25rem;
    bottom: 0.1875rem;
    background-color: var(--color-white);
    transition: .4s;
    border-radius: 50%;
  }
  
  .toggle-switch input:checked + label {
    background-color: var(--color-primary);
  }
  
  .toggle-switch input:checked + label:before {
    transform: translateX(1.125rem);
  }
  
  /* Theme toggle styles */
  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: var(--color-background-alt);
    border: none;
    border-radius: var(--border-radius-lg);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .theme-toggle:hover {
    background-color: var(--color-border);
  }
  
  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* ========================================= */
  /* ANIMATIONS FOR THEME TOGGLE              */
  /* ========================================= */
  
  @import "https://unpkg.com/open-props/easings.min.css";
  
  /* Sun and Moon icon animation styles */
  .sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
  }
  
  .sun-and-moon > :is(.moon, .sun) {
    fill: var(--color-text);
  }
  
  .theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
    fill: var(--color-primary);
  }
  
  .sun-and-moon > .sun-beams {
    stroke: var(--color-text);
    stroke-width: 2px;
  }
  
  .theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
    stroke: var(--color-primary);
  }
  
  [data-theme="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
  }
  
  [data-theme="dark"] .sun-and-moon > .sun-beams {
    opacity: 0;
  }
  
  [data-theme="dark"] .sun-and-moon > .moon > circle {
    transform: translateX(-7px);
  }
  
  @supports (cx: 1) {
    [data-theme="dark"] .sun-and-moon > .moon > circle {
      cx: 17;
      transform: translateX(0);
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .sun-and-moon > .sun {
      transition: transform .5s var(--ease-elastic-3);
    }
    
    .sun-and-moon > .sun-beams {
      transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }
    
    .sun-and-moon .moon > circle {
      transition: transform .25s var(--ease-out-5);
    }
    
    @supports (cx: 1) {
      .sun-and-moon .moon > circle {
        transition: cx .25s var(--ease-out-5);
      }
    }
    
    [data-theme="dark"] .sun-and-moon > .sun {
      transition-timing-function: var(--ease-3);
      transition-duration: .25s;
      transform: scale(1.75);
    }
    
    [data-theme="dark"] .sun-and-moon > .sun-beams {
      transition-duration: .15s;
      transform: rotateZ(-25deg);
    }
    
    [data-theme="dark"] .sun-and-moon > .moon > circle {
      transition-duration: .5s;
      transition-delay: .25s;
    }
  }
  
  [data-theme="dark"] .size-row {
    background-color: #323232;}
  
  [data-theme="dark"] .scale-preset-btn {color: #949494;}
  
  [data-theme="dark"] .select-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(229, 231, 235, 0.7)' 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");
  }
  
  [data-theme="dark"] .brickser-text-wrapper {
    color: var(--color-text);
  }
  
  [data-theme="dark"] .viewport-badge {
    color: var(--brand-light);
  }
  
  [data-theme="dark"] .viewport-range-control {
    background: rgba(40, 40, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
  }
  
  /* Custom Scrollbar Styles - 30% Thinner */
  :root {
    /* Scrollbar Colors */
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
    
    /* Dark Mode Scrollbar Colors */
    --scrollbar-thumb-dark: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.3);
  }
  
  /* For Webkit browsers (Chrome, Safari, newer Edge) */
  ::-webkit-scrollbar {
    width: 2px; 
    height: 2px; 
  }
  
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 2px; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
  
  /* Dark mode scrollbar adjustments */
  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-dark);
  }
  
  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-dark);
  }
  
  /* Specifically target the sidebar scrollbar to make it even thinner */
  .sidebar-controls::-webkit-scrollbar {
    width: 1px; 
  }
  
  /* For Firefox */
  * {
    scrollbar-width: thin; 
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
  
  [data-theme="dark"] * {
    scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track);
  }
  
  /* For Internet Explorer and Edge (older versions) */
  * {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  
  /* Ensure other scrollable areas have consistent styling */
  .preview-scrollable,
  .content-view,
  .controls-content {
    scrollbar-width: thin;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /* ========================================= */
/* NOTIFICATION SYSTEM - ORIGINAL DESIGN    */
/* ========================================= */

/* Updated notification toast styling with better centering behavior */
.notification {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  z-index: 1000;
  max-width: 320px;
  width: auto;
  transition: all 0.3s ease;
  animation: notification-float-in 0.4s forwards;
  background: linear-gradient(
    135deg, 
    rgba(35, 35, 34, 0.5) 0%,
    rgba(43, 43, 43, 0.55) 30%,
    rgba(39, 39, 39, 0.6) 70%,
    rgba(58, 58, 58, 0.55) 100%
  ) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid var(--color-border);
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Notification text styling */
.notification .notify-text {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: inherit !important;
}

/* Hide notification */
.notification.hidden {
  display: none;
}

.notification.show {
  display: flex;
}

/* Animation for toast notification */
@keyframes notification-float-in {
  0% {
    transform: translateY(1rem) translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}

@keyframes notification-float-out {
  0% {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateY(1rem) translateX(-50%);
    opacity: 0;
  }
}

.notification.fade-out {
  animation: notification-float-out 0.3s forwards;
}

/* Improved alignment that adjusts based on sidebar state */
@media (min-width: 1024px) {
  /* When sidebar is visible */
  body:not(.controls-hidden) .notification {
    left: calc(50% + (var(--sidebar-width, 300px) / 2));
    transform: translateX(-50%);
  }

  /* When sidebar is collapsed/hidden */
  body.controls-hidden .notification {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .notification {
    max-width: 90%;
    padding: 0.625rem 0.875rem;
  }
  
  .notification .notify-text {
    font-size: 0.875rem;
  }
}

/* Responsive utility classes */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}