:root {
    /* @tweakable Purple Aero Glass Theme for Windows */
    /* @tweakable The main background color for windows, should be semi-transparent. */
    --purple-aero-base: rgba(60, 50, 90, 0.6);
    /* @tweakable The blur radius for the aero glass effect on windows. */
    --aero-blur-radius: 15px;
    /* @tweakable The border color for windows. */
    --purple-aero-border: rgba(255, 255, 255, 0.25);
    /* @tweakable The starting color for the window header gradient. */
    --purple-aero-header-start: rgba(135, 120, 180, 0.8);
    /* @tweakable The ending color for the window header gradient. */
    --purple-aero-header-end: rgba(90, 80, 130, 0.7);
    /* @tweakable The color of the inner shine/highlight at the top of the window header. */
    --purple-aero-header-shine: rgba(255, 255, 255, 0.2);
    /* @tweakable The border color for the bottom of the window header. */
    --window-header-border: rgba(255, 255, 255, 0.2);
    /* @tweakable The background color for the main content area of a window. */
    --purple-aero-content-bg: rgba(230, 230, 245, 0.95);
    /* @tweakable Window control button styles */
    /* @tweakable Background color for window control buttons (minimize, maximize, close). */
    --window-control-bg: rgba(255, 255, 255, 0.1);
    /* @tweakable Background color for window control buttons on hover. */
    --window-control-hover-bg: rgba(255, 255, 255, 0.2);
    /* @tweakable Border color for window control buttons on hover. */
    --window-control-hover-border: rgba(255, 255, 255, 0.3);
    /* @tweakable Background color for the close button on hover. */
    --window-close-hover-bg: #E81123;
    /* @tweakable Border color for the close button on hover. */
    --window-close-hover-border: #F1707A;
    /* @tweakable Color of the icons (line, square, X) inside the window control buttons. */
    --window-icon-color: #ffffff;
    /* @tweakable Size of the icons inside the window control buttons (e.g., 10px). */
    --window-icon-size: 10px;
    /* @tweakable Glow color for window control icons on hover. */
    --window-icon-hover-glow-color: #ffffff;

    /* @tweakable CRT Filter Styles */
    /* @tweakable The color of the CRT scan lines. */
    --crt-scanline-color: rgba(10, 10, 10, 0.45); 
    /* @tweakable The height of each scanline stripe, controlling their visibility. */
    --crt-scanline-stripe-height: 5px; 
    /* @tweakable The opacity of the overall CRT flicker effect. Higher values mean more noticeable flicker. */
    --crt-flicker-opacity: 0.12; 
    /* @tweakable The intensity of the vignette (dark corners) effect. Higher value means darker/larger corners. */
    --crt-vignette-intensity: 180px; 
    /* @tweakable The color of the vignette effect. */
    --crt-vignette-color: rgba(0, 0, 0, 0.7); 
    /* @tweakable The duration of the CRT flicker animation. Shorter is faster. */
    --crt-flicker-duration: 0.1s; 
    /* @tweakable The height of the rolling scanline bar. */
    --crt-rolling-scanline-height: 60%; 
    /* @tweakable The duration of one full roll of the scanline from top to bottom. */
    --crt-rolling-scanline-duration: 6s; 
    /* @tweakable Opacity of the red component in chromatic aberration. */
    --crt-chromatic-red-opacity: 0.08; 
    /* @tweakable Opacity of the green component in chromatic aberration. */
    --crt-chromatic-green-opacity: 0.03; 
    /* @tweakable Opacity of the blue component in chromatic aberration. */
    --crt-chromatic-blue-opacity: 0.08; 
    /* @tweakable Background color of the rolling scanline bar (a subtle dark grey). */
    --crt-rolling-scanline-bg-color-start: rgba(20, 20, 30, 0.08); 
    /* @tweakable Background color of the rolling scanline bar at its peak opacity (a slightly lighter dark grey). */
    --crt-rolling-scanline-bg-color-peak: rgba(40, 40, 50, 0.15); 

    /* @tweakable STARTUP SCREEN STYLES */
    /* @tweakable Font size for the 'Starting Windows Vienna' text on the startup screen. */
    --startup-text-font-size: 1.5em;
    /* @tweakable Color of the 'Starting Windows Vienna' text on the startup screen. */
    --startup-text-color: #ffffff;
    /* @tweakable Bottom margin for the 'Starting Windows Vienna' text, creating space above the loading bar. */
    --startup-text-margin-bottom: 20px;
    /* @tweakable Duration in seconds for the 'Starting Windows Vienna' text fade-in animation. */
    --startup-text-fade-in-duration: 1.5s;
    /* @tweakable Delay in seconds before the 'Starting Windows Vienna' text starts to fade in. */
    --startup-text-fade-in-delay: 0.5s;
    /* @tweakable Text shadow for the 'Starting Windows Vienna' text to create a glow effect. */
    --startup-text-glow-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    /* @tweakable Start color of the radial gradient for the startup screen background. */
    --startup-screen-bg-start: #222;
    /* @tweakable End color of the radial gradient for the startup screen background. */
    --startup-screen-bg-end: #000;

    /* @tweakable STARTUP SCREEN LOADING BAR STYLES */
    /* @tweakable Width of the loading bar on the startup screen. */
    --loading-bar-width: 300px;
    /* @tweakable Height of the loading bar on the startup screen. */
    --loading-bar-height: 10px;
    /* @tweakable Background color of the loading bar's track. */
    --loading-bar-track-bg: rgba(255, 255, 255, 0.2);
    /* @tweakable The base color of the loading bar. */
    --loading-bar-base-color: #4B0082; 
    /* @tweakable The highlight color for the moving stripes on the loading bar. */
    --loading-bar-highlight-color: #9932CC; 
    /* @tweakable The border-radius of the loading bar. */
    --loading-bar-border-radius: 5px;

    /* @tweakable BOOTUP SCREEN SWIRL BACKGROUND ANIMATION */
    /* @tweakable Total duration for the swirl background animation on the bootup screen. Should generally match boot animation duration. */
    --boot-swirls-animation-duration: 6s;
    /* @tweakable Initial scale of the swirl background at the start of the animation. */
    --boot-swirls-initial-scale: 1.2;
    /* @tweakable Final scale of the swirl background at the end of the animation. */
    --boot-swirls-final-scale: 1.0;
    /* @tweakable Initial rotation of the swirl background in degrees. */
    --boot-swirls-initial-rotation-degrees: 10deg;
    /* @tweakable Final rotation of the swirl background in degrees. */
    --boot-swirls-final-rotation-degrees: -5deg;
    /* @tweakable Initial saturation level for the swirl background. (e.g., 1 is normal, 2 is double). */
    --boot-swirls-saturation-start: 1.5;
    /* @tweakable Final saturation level for the swirl background. */
    --boot-swirls-saturation-end: 1.0;
    /* @tweakable Initial blur radius for the swirl background in pixels. */
    --boot-swirls-blur-start: 10px;
    /* @tweakable Final blur radius for the swirl background in pixels. */
    --boot-swirls-blur-end: 2px;
    /* @tweakable Opacity of the swirl background when it starts to fade in. */
    --boot-swirls-fade-in-opacity: 0.9;
    /* @tweakable Initial X-axis translation for the swirl background in pixels. */
    --boot-swirls-translate-x-start: 0px;
    /* @tweakable Final X-axis translation for the swirl background in pixels. */
    --boot-swirls-translate-x-end: 15px;
    /* @tweakable Initial Y-axis translation for the swirl background in pixels. */
    --boot-swirls-translate-y-start: 0px;
    /* @tweakable Final Y-axis translation for the swirl background in pixels. */
    --boot-swirls-translate-y-end: 10px;
    /* @tweakable Initial hue rotation for the swirl background in degrees. */
    --boot-swirls-hue-rotate-start: 0deg;
    /* @tweakable Final hue rotation for the swirl background in degrees. */
    --boot-swirls-hue-rotate-end: 30deg;

    /* @tweakable BOOTUP SCREEN LOGO ANIMATION */
    /* @tweakable Total duration for the logo animation on the bootup screen. */
    --boot-logo-animation-duration: 5s;
    /* @tweakable Delay before the logo animation starts on the bootup screen. */
    --boot-logo-animation-delay: 0.5s;
    /* @tweakable Initial scale of the logo at the start of its animation. */
    --boot-logo-initial-scale: 3.0;
    /* @tweakable Final scale of the logo at the end of its animation. */
    --boot-logo-final-scale: 1.0;
    /* @tweakable Initial rotation of the logo in degrees. */
    --boot-logo-initial-rotation: -300deg;
    /* @tweakable Final rotation of the logo in degrees. */
    --boot-logo-final-rotation: 0deg;
    /* @tweakable Initial blur radius for the logo in pixels. */
    --boot-logo-blur-start: 35px;
    /* @tweakable Final blur radius for the logo in pixels. */
    --boot-logo-blur-end: 0px;
    /* @tweakable Drop shadow/glow effect for the boot logo. */
    --boot-logo-glow: drop-shadow(0 0 25px rgba(255, 255, 255, 0.6));
    /* @tweakable Initial Z-axis translation for logo animation (how much it 'pops out' initially). */
    --boot-logo-animation-translateZ-start: 0px;
    /* @tweakable Peak Z-axis translation during logo animation (how much it 'pops out' at its most forward point). */
    --boot-logo-animation-translateZ-peak: 80px;
    /* @tweakable Final Z-axis translation for logo animation (where it settles). */
    --boot-logo-animation-translateZ-end: 0px;

    /* @tweakable LOGO SHEEN EFFECT */
    /* @tweakable Delay before the logo sheen animation starts. Should be after the logo starts appearing. */
    --boot-logo-sheen-delay: 1.8s;
    /* @tweakable Duration of the logo sheen (light sweep) animation. */
    --boot-logo-sheen-duration: 1.5s;
    /* @tweakable Angle of the sheen effect in degrees. */
    --boot-logo-sheen-angle: -25deg;
    /* @tweakable Color of the sheen effect (a semi-transparent white is recommended). */
    --boot-logo-sheen-color: rgba(255, 255, 255, 0.45);
    /* @tweakable Multiplier for the sheen's width relative to the logo. Higher means a wider sweep. */
    --boot-logo-sheen-width-multiplier: 2.0;
    /* @tweakable Multiplier for the sheen's height relative to the logo. Higher means a taller sweep. */
    --boot-logo-sheen-height-multiplier: 2.0;
    /* @tweakable Initial opacity of the sheen. */
    --boot-logo-sheen-opacity-start: 0;
    /* @tweakable Peak opacity of the sheen during its sweep. */
    --boot-logo-sheen-opacity-peak: 1;
    /* @tweakable Final opacity of the sheen. */
    --boot-logo-sheen-opacity-end: 0;

    /* @tweakable BOOTUP LOGO 3D FLIP ANIMATION */
    /* @tweakable The delay before the 3D flip animation starts on the boot logo. */
    --boot-logo-flip-delay: 1.2s;
    /* @tweakable The duration of the 3D flip animation. */
    --boot-logo-flip-duration: 2.5s;
    /* @tweakable The perspective value for the boot logo's 3D container. Higher is less intense. */
    --boot-logo-perspective: 500px;
    /* @tweakable The number of full 3D rotations the logo will make. */
    --boot-logo-flip-rotations: 2;

    /* @tweakable BOOTUP SCREEN TEXT ANIMATION */
    /* @tweakable Delay before the text animation starts on the bootup screen. */
    --boot-text-animation-delay: 2.5s;
    /* @tweakable Duration of the text fade-in animation. */
    --boot-text-animation-duration: 2.8s;
    /* @tweakable Delay before the 'Windows Vienna' title animation starts on the bootup screen. */
    --boot-title-animation-delay: 2.5s;
    /* @tweakable Duration of the 'Windows Vienna' title fade-in animation. */
    --boot-title-animation-duration: 2.8s;
    /* @tweakable Delay before the slogan animation starts on the bootup screen. Should be slightly after the title. */
    --boot-slogan-animation-delay: 2.9s;
    /* @tweakable Duration of the slogan fade-in animation. */
    --boot-slogan-animation-duration: 2.8s;
    /* @tweakable Initial text shadow for the bootup OS name (like a faint glow). */
    --boot-os-name-glow-start: 0 0 0px rgba(255, 255, 255, 0);
    /* @tweakable Final text shadow for the bootup OS name (a stronger glow). */
    --boot-os-name-glow-end: 0 0 15px rgba(255, 255, 255, 0.7);
    /* @tweakable Initial text shadow for the bootup slogan. */
    --boot-slogan-glow-start: 0 0 0px rgba(255, 255, 255, 0);
    /* @tweakable Final text shadow for the bootup slogan. */
    --boot-slogan-glow-end: 0 0 8px rgba(255, 255, 255, 0.5);

    /* @tweakable Lighter, vibrant purple for accents */
    --vienna-purple-light: rgba(180, 80, 250, 0.7);
    /* @tweakable Deeper purple for accents */
    --vienna-purple-dark: rgba(120, 40, 180, 0.8);
    /* @tweakable Subtle blue for accents/glows */
    --vienna-blue-accent: rgba(135, 206, 250, 0.5);

    /* @tweakable Taskbar Variables */
    /* @tweakable The height of the taskbar. */
    --taskbar-height: 40px;
    /* @tweakable The size (width and height) of the circular Start Orb. */
    --start-orb-size: 70px;
    /* @tweakable The vertical offset of the Start Orb relative to the taskbar. Use a negative value to make it 'hang off' the taskbar upwards, or positive to push it down. */
    --start-orb-vertical-offset: 0px; 
    /* @tweakable The horizontal offset of the Start Orb from the left edge of the taskbar. */
    --start-orb-horizontal-offset: 10px;
    /* @tweakable The width of the outline around the Start Orb. */
    --start-orb-outline-width: 2px;
    /* @tweakable The color of the outline around the Start Orb. */
    --start-orb-outline-color: rgba(255, 255, 255, 0.4);

    /* Variables for the dark, Vista-like glass theme (for windows) */
    --dark-glass-base: rgba(50, 50, 50, 0.7);
    --dark-glass-light: rgba(100, 100, 100, 0.3);
    --dark-glass-border: rgba(255, 255, 255, 0.2);
    --dark-glass-item-bg: rgba(255, 255, 255, 0.1);
    --dark-glass-item-hover: rgba(255, 255, 255, 0.2);
    --dark-glass-item-active: rgba(255, 255, 255, 0.3);

    /* @tweakable Top lighter grey color for the taskbar gradient */
    --taskbar-top-gray: #555555; 
    /* @tweakable Bottom darker grey color for the taskbar gradient */
    --taskbar-bottom-gray: #222222;   
    /* @tweakable Border color for the taskbar */
    --taskbar-border: rgb(70, 70, 70);
    /* @tweakable Default background for taskbar items */
    --taskbar-item-default: rgb(40, 40, 40);
    /* @tweakable Background for taskbar items on hover */
    --taskbar-item-hover: rgb(60, 60, 60);
    /* @tweakable Background for active taskbar items */
    --taskbar-item-active-bg: rgb(80, 80, 80);

    /* @tweakable START MENU STYLES */
    /* @tweakable Vertical padding for start menu items. */
    --start-menu-item-vertical-padding: 6px;
    /* @tweakable Horizontal padding for start menu items. */
    --start-menu-item-horizontal-padding: 10px;
    /* @tweakable Margin at the bottom of each start menu item. */
    --start-menu-item-margin-bottom: 2px;
    /* @tweakable Top color of the overall start menu gradient for a glossy effect. */
    --start-menu-overall-gradient-top: var(--taskbar-top-gray); 
    /* @tweakable Bottom color of the overall start menu gradient for a glossy effect. */
    --start-menu-overall-gradient-bottom: var(--taskbar-bottom-gray); 
    /* @tweakable Border color for the start menu. */
    --start-menu-border-color: rgba(255, 255, 255, 0.4); 
    /* @tweakable Outer shadow color for the start menu. */
    --start-menu-box-shadow-color: rgba(0, 0, 0, 0.4); 
    /* @tweakable Inner shine color for the start menu gloss effect. */
    --start-menu-inner-shine-color: rgba(255, 255, 255, 0.4);

    /* @tweakable Background color for the programs list panel (the "white thing") in the start menu. */
    --start-menu-programs-panel-bg: rgba(255, 255, 255, 0.9);
    /* @tweakable Text color for items in the programs list panel. */
    --start-menu-programs-panel-text-color: #333333;
    /* @tweakable Background color for programs list items on hover. */
    --start-menu-programs-item-hover-bg: #E0EDFF;
    /* @tweakable Text color for programs list items on hover. */
    --start-menu-programs-item-hover-text: #333333;
    /* @tweakable Minimum width for the programs list panel. */
    --start-menu-programs-panel-min-width: 150px;
    /* @tweakable Flex ratio for the programs list panel in the start menu, affecting its width relative to the user panel. Higher value makes it wider. */
    --start-menu-programs-panel-flex: 4.0; 

    /* @tweakable Opacity of the user/main links panel overlay (the "black thing") in the start menu. */
    --start-menu-user-panel-overlay-opacity: 0.4;
    /* @tweakable Text color for regular links/text in the user/main links panel. */
    --start-menu-user-panel-text-color: #e0e0e0;
    /* @tweakable Text color for titles/headings in the user/main links panel. */
    --start-menu-user-panel-heading-color: #ffffff;
    /* @tweakable Background color for user/main link items on hover. */
    --start-menu-user-item-hover-bg: #89C7F7;
    /* @tweakable Text color for user/main link items on hover. */
    --start-menu-user-item-hover-text: #ffffff;
    /* @tweakable Color of the separator line within the user/main links panel. */
    --start-menu-user-panel-separator-color: rgba(255, 255, 255, 0.2); 
    /* @tweakable Minimum width for the user/main links panel. */
    --start-menu-user-panel-min-width: 250px;
    /* @tweakable Flex ratio for the user/main links panel in the start menu. Higher value makes it wider. */
    --start-menu-user-panel-flex: 0.5; 

    /* @tweakable Color of the vertical separator line between the two main start menu panels. */
    --start-menu-column-separator-color: rgba(0, 0, 0, 0.05); 
    /* @tweakable Background color for the search input field in the start menu. */
    --start-menu-search-input-bg: rgba(255, 255, 255, 0.9);

    /* @tweakable Height of the combined search and shutdown buttons footer in the start menu. */
    --start-menu-footer-height: 45px;
    /* @tweakable Gap between the search input and shutdown buttons in the start menu footer. */
    --start-menu-footer-gap: 10px;
    /* @tweakable Start color for shutdown button gradient. */
    --start-menu-shutdown-btn-bg-start: var(--taskbar-item-hover);
    /* @tweakable End color for shutdown button gradient. */
    --start-menu-shutdown-btn-bg-end: var(--taskbar-item-default);
    /* @tweakable Start color for shutdown button gradient on hover. */
    --start-menu-shutdown-btn-hover-bg-start: var(--taskbar-item-active-bg);
    /* @tweakable End color for shutdown button gradient on hover. */
    --start-menu-shutdown-btn-hover-bg-end: var(--taskbar-item-hover);

    /* @tweakable LOGIN SCREEN STYLES */
    /* @tweakable Background of the main login box. A semi-transparent color for the glass effect. */
    --login-box-bg: rgba(40, 40, 70, 0.45);
    /* @tweakable Blur radius for the login box's backdrop-filter property. */
    --login-box-blur: 15px;
    /* @tweakable Top margin for the login box, creating space from the top of the screen or logo. */
    --login-box-top-margin: 30px;
    /* @tweakable Outer box shadow for the login box. */
    --login-box-shadow-color: rgba(0, 0, 0, 0.5);
    /* @tweakable Inner shine color for the login box, to enhance the glass effect. */
    --login-box-shine-color: rgba(255, 255, 255, 0.1);
    /* @tweakable Border color for the login box. */
    --login-box-border-color: rgba(255, 255, 255, 0.2);
    /* @tweakable Size (width and height) of the user avatar image. */
    --login-avatar-size: 90px;
    /* @tweakable Border style for the user avatar image. */
    --login-avatar-border: 3px solid rgba(255, 255, 255, 0.3);
    /* @tweakable Font size for the username display. */
    --login-username-font-size: 1.8em;
    /* @tweakable Background color for the password input group. */
    --login-password-input-bg: rgba(0, 0, 0, 0.25);
    /* @tweakable Border color for the password input group when focused. */
    --login-password-focus-border: #87CEFA; 
    /* @tweakable Background color for the password input group when focused. */
    --login-password-focus-bg: rgba(0, 0, 0, 0.3);
    /* @tweakable Color of the placeholder text in the password input. */
    --login-password-placeholder-color: rgba(255, 255, 255, 0.5);
    /* @tweakable Size of the Vienna logo on the login screen. */
    --login-vienna-logo-size: 100px;
    /* @tweakable Drop shadow/glow effect for the Vienna logo on the login screen. */
    --login-vienna-logo-glow: drop-shadow(0 0 15px var(--vienna-purple-light)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    /* @tweakable Font size of the 'Windows Vienna' title on the login screen. */
    --login-os-title-font-size: 3em;
    /* @tweakable Font weight of the 'Windows Vienna' title on the login screen. */
    --login-os-title-font-weight: 300;
    /* @tweakable Color of the 'Windows Vienna' title on the login screen. */
    --login-os-title-color: #ffffff;
    /* @tweakable Text shadow for the 'Windows Vienna' title. */
    --login-os-title-shadow: 0 0 20px var(--vienna-purple-dark), 0 0 10px rgba(255, 255, 255, 0.6);
    /* @tweakable Background color tint for the login screen. Use rgba for transparency. */
    --login-screen-bg-tint: rgba(20, 10, 40, 0.3);
    /* @tweakable Transition duration for the login button's hover effects. */
    --login-button-transition-duration: 0.2s;
    /* @tweakable Background color for the login button on hover. */
    --login-button-hover-bg: rgba(255, 255, 255, 0.1);
    /* @tweakable Transform applied to the login arrow on hover. */
    --login-arrow-hover-transform: translateX(3px);
    /* @tweakable Transform applied to the login arrow when the button is active (pressed). */
    --login-arrow-active-transform: translateX(5px) scale(0.9);
    /* @tweakable Transition duration for the avatar's hover effects. */
    --login-avatar-hover-transition: 0.3s;
    /* @tweakable Transform applied to the avatar on hover (e.g., to make it slightly larger). */
    --login-avatar-hover-transform: scale(1.05);
    /* @tweakable Box shadow for the avatar on hover to create a glow effect. */
    --login-avatar-hover-shadow: 0 0 15px rgba(255, 255, 255, 0.4);

    /* @tweakable 3D Desktop Icon Effect */
    /* @tweakable The perspective value for the desktop container, affecting icon 3D effect. */
    --desktop-perspective: 900px;
    /* @tweakable The Z-axis translation for desktop icons on hover (how much it 'pops out'). */
    --icon-hover-translateZ: 35px;
    /* @tweakable The Y-axis rotation for desktop icons on hover. */
    --icon-hover-rotateY: -18deg;
    /* @tweakable The drop shadow for desktop icons on hover. */
    --icon-hover-shadow: drop-shadow(8px 15px 8px rgba(0,0,0,0.4));

    /* @tweakable Window 3D Dragging Effect */
    /* @tweakable The perspective value for the desktop container, affecting window 3D drag effect. */
    --desktop-window-perspective: 1500px;
    /* @tweakable The transition duration for the window's transform property, affecting how smoothly it returns to flat after dragging. */
    --window-drag-transition-duration: 0.3s;

    --text-color: #ffffff; 
    --shadow-color: rgba(0, 0, 0, 0.4); 
    --content-bg: #E8E8E8; 
    --content-text-color: #333333; 
    --window-header-gradient-start: rgba(135, 206, 250, 0.25); 
    --window-header-gradient-end: rgba(180, 80, 250, 0.15); 

    /* My Computer Specific Colors */
    /* @tweakable Background color for the My Computer top bar */
    --my-computer-top-bar-bg: #E3EFFF;
    /* @tweakable Background color for My Computer search box */
    --my-computer-search-bg: #F0F6FF;
    /* @tweakable Border color for My Computer elements */
    --my-computer-border: #BBCFE7;
    /* @tweakable Text color for My Computer path and toolbar */
    --my-computer-text-color: #333333;
    /* @tweakable Background color for My Computer sidebar */
    --my-computer-sidebar-bg: #F0F6FF;
    /* @tweakable Text color for "Folders" in My Computer sidebar */
    --my-computer-folders-text-color: #0066CC;
    /* @tweakable Background color for the My Computer ListView header */
    --my-computer-listview-header-bg: #E0EBF5;
    /* @tweakable Border color for My Computer ListView */
    --my-computer-listview-border: #CCDDEE;

    /* @tweakable Gadget Sidebar Styles */
    /* @tweakable The width of the gadget sidebar. */
    --gadget-sidebar-width: 250px;
    /* @tweakable The background color of the gadget sidebar. */
    --gadget-sidebar-bg: rgba(30, 30, 30, 0.7);
    /* @tweakable The blur radius for the gadget sidebar's glass effect. */
    --gadget-sidebar-blur-radius: 12px;
    /* @tweakable The border color for the gadget sidebar. */
    --gadget-sidebar-border: rgba(255, 255, 255, 0.2);
    /* @tweakable The box-shadow for the gadget sidebar. */
    --gadget-sidebar-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    /* @tweakable The duration of the gadget sidebar's slide-in/out animation. */
    --gadget-sidebar-transition-duration: 0.3s;
    /* @tweakable The background color of individual gadget items. */
    --gadget-item-bg: rgba(255, 255, 255, 0.05);
    /* @tweakable The padding inside each gadget item. */
    --gadget-item-padding: 10px;
    /* @tweakable The margin between gadget items. */
    --gadget-item-margin-bottom: 10px;
    /* @tweakable The border-radius of gadget items. */
    --gadget-item-border-radius: 5px;
    /* @tweakable The color of heading text within gadgets. */
    --gadget-item-heading-color: #ffffff;
    /* @tweakable The color of paragraph/body text within gadgets. */
    --gadget-item-text-color: #dddddd;

    /* @tweakable Analog Clock Gadget Styles */
    /* @tweakable Size of the analog clock in the gadget sidebar. */
    --analog-clock-size: 150px;
    /* @tweakable Background color of the analog clock face. */
    --analog-clock-bg: #282828;
    /* @tweakable Border of the analog clock. */
    --analog-clock-border: 4px solid #444;
    /* @tweakable Box shadow for the analog clock for a 3D effect. */
    --analog-clock-shadow: inset 0 0 10px #000, 0 0 5px #000;
    /* @tweakable Width of the hour hand. */
    --hour-hand-width: 4px;
    /* @tweakable Height (length) of the hour hand. */
    --hour-hand-height: 40px;
    /* @tweakable Color of the hour hand. */
    --hour-hand-color: #fff;
    /* @tweakable Width of the minute hand. */
    --minute-hand-width: 3px;
    /* @tweakable Height (length) of the minute hand. */
    --minute-hand-height: 60px;
    /* @tweakable Color of the minute hand. */
    --minute-hand-color: #fff;
    /* @tweakable Width of the second hand. */
    --second-hand-width: 2px;
    /* @tweakable Height (length) of the second hand. */
    --second-hand-height: 65px;
    /* @tweakable Color of the second hand. */
    --second-hand-color: var(--vienna-purple-light);
    /* @tweakable Size of the dot in the center of the clock. */
    --center-dot-size: 10px;
    /* @tweakable Color of the dot in the center of the clock. */
    --center-dot-color: #444;

    /* @tweakable Background color of the calendar gadget container. */
    --calendar-gadget-bg: rgba(10, 10, 10, 0.5);
    /* @tweakable Border color for the calendar gadget container. */
    --calendar-gadget-border: 1px solid rgba(255, 255, 255, 0.1);
    /* @tweakable Border radius for the calendar gadget container. */
    --calendar-gadget-border-radius: 5px;
    /* @tweakable Padding inside the calendar gadget container. */
    --calendar-gadget-padding: 8px;
    /* @tweakable Box shadow for the calendar gadget container. */
    --calendar-gadget-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);

    /* @tweakable Styling for the calendar header showing month and year. */
    --calendar-header-font-size: 0.9em;
    /* @tweakable Styling for the weekday names (S, M, T, etc.) row. */
    --calendar-weekdays-font-size: 0.75em;
    /* @tweakable The gap between individual day cells in the calendar grid. */
    --calendar-days-gap: 1px;

    /* @tweakable SHUTDOWN SCREEN STYLES */
    /* @tweakable Top gradient color for the shutdown screen background. */
    --shutdown-screen-bg-color1: #1a1a2a;
    /* @tweakable Bottom gradient color for the shutdown screen background. */
    --shutdown-screen-bg-color2: #0a0a10;
    /* @tweakable Color of the 'Shutting Down...' message. */
    --shutdown-message-color: #ffffff;
    /* @tweakable Font size of the 'Shutting Down...' message. */
    --shutdown-message-font-size: 1.5em;
    /* @tweakable Size (width) of the Windows logo on the shutdown screen. */
    --shutdown-logo-size: 100px;
    /* @tweakable Filter applied to the Windows logo on the shutdown screen for a subtle glow. */
    --shutdown-logo-filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
    /* @tweakable Duration of the subtle pulse animation for the shutdown logo. */
    --shutdown-logo-pulse-duration: 2s;

    /* @tweakable Background color for the 'It's now safe to turn off' screen. */
    --safe-screen-bg: #000080;
    /* @tweakable Text color for the 'It's now safe to turn off' message. */
    --safe-message-color: #ffffff;
    /* @tweakable Font size for the 'It's now safe to turn off' message. */
    --safe-message-font-size: 1.8em;

    /* @tweakable Context Menu Styles */
    /* @tweakable The background color of the context menu. */
    --context-menu-bg: rgba(240, 240, 245, 0.85);
    /* @tweakable The blur radius for the context menu's glass effect. */
    --context-menu-blur: 12px;
    /* @tweakable The border color for the context menu. */
    --context-menu-border: rgba(100, 100, 120, 0.4);
    /* @tweakable The box shadow for the context menu. */
    --context-menu-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    /* @tweakable The text color for context menu items. */
    --context-menu-text-color: #222;
    /* @tweakable The background color for a context menu item on hover. */
    --context-menu-hover-bg: #89C7F7;
    /* @tweakable The text color for a context menu item on hover. */
    --context-menu-hover-text: #000;
    /* @tweakable The border color for a context menu item on hover. */
    --context-menu-hover-border: #5DA4D5;
    /* @tweakable The color of the separator line in the context menu. */
    --context-menu-separator-color: rgba(0, 0, 0, 0.1);

    /* @tweakable Setup Screen Styles */
    /* @tweakable Background color 1 for the setup screen gradient. */
    --setup-screen-bg-color1: #4A0070;
    /* @tweakable Background color 2 for the setup screen gradient. */
    --setup-screen-bg-color2: #2A0040;
    /* @tweakable Size of the Windows logo on the setup screen. */
    --setup-logo-size: 120px;
    /* @tweakable Drop shadow/glow effect for the setup logo. */
    --setup-logo-filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    /* @tweakable Background color for the main setup content box. */
    --setup-box-bg: rgba(255, 255, 255, 0.95);
    /* @tweakable Border color for the setup content box. */
    --setup-box-border: #BBBBCC;
    /* @tweakable Box shadow for the setup content box. */
    --setup-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    /* @tweakable Text color for headings in the setup box. */
    --setup-heading-color: #333;
    /* @tweakable Text color for body text in the setup box. */
    --setup-text-color: #555;
    /* @tweakable Background color for setup buttons. */
    --setup-button-bg: #E0E0E0;
    /* @tweakable Border color for setup buttons. */
    --setup-button-border: #BBBBCC;
    /* @tweakable Text color for setup buttons. */
    --setup-button-text-color: #333;
    /* @tweakable Background color for primary setup buttons (e.g., Next). */
    --setup-button-primary-bg: #0078D7;
    /* @tweakable Border color for primary setup buttons. */
    --setup-button-primary-border: #005BB5;
    /* @tweakable Text color for primary setup buttons. */
    --setup-button-primary-text-color: #fff;
    /* @tweakable Background color for setup buttons on hover. */
    --setup-button-hover-bg: #D0D0D0;
    /* @tweakable Background color for primary setup buttons on hover. */
    --setup-button-primary-hover-bg: #005BB5;
    /* @tweakable Text color for AI generated messages in setup. */
    --setup-ai-message-color: #6A5ACD; 

    /* @tweakable Welcome Screen Styles */
    /* @tweakable Background color 1 for the welcome screen gradient. */
    --welcome-screen-bg-color1: #200030;
    /* @tweakable Background color 2 for the welcome screen gradient. */
    --welcome-screen-bg-color2: #000010;
    /* @tweakable Size of the Windows logo on the welcome screen. */
    --welcome-logo-size: 150px;
    /* @tweakable Filter for the welcome logo. */
    --welcome-logo-filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    /* @tweakable Color of the 'Welcome' message. */
    --welcome-message-color: #ffffff;
    /* @tweakable Font size of the 'Welcome' message. */
    --welcome-message-font-size: 4em;
    /* @tweakable Text shadow for the 'Welcome' message. */
    --welcome-message-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
    /* @tweakable Duration of the welcome screen fade-out animation before desktop appears. */
    --welcome-fade-out-duration: 0.8s;
    /* @tweakable Delay after welcome screen appears before it starts fading out. */
    --welcome-display-duration: 2s; 

    /* @tweakable Welcome Screen Animation Variables */
    /* @tweakable Duration of the welcome screen logo animation in seconds. */
    --welcome-logo-anim-duration: 1.2s;
    /* @tweakable Delay before the welcome screen logo animation starts in seconds. */
    --welcome-logo-anim-delay: 0.2s;
    /* @tweakable Starting vertical position for the welcome logo animation. */
    --welcome-logo-anim-start-y: 20px;
    /* @tweakable Ending vertical position for the welcome logo animation. */
    --welcome-logo-anim-end-y: 0px;
    /* @tweakable Duration of the welcome message animation in seconds. */
    --welcome-message-anim-duration: 1.2s;
    /* @tweakable Delay before the welcome message animation starts in seconds. */
    --welcome-message-anim-delay: 0.4s;
    /* @tweakable Starting vertical position for the welcome message animation. */
    --welcome-message-anim-start-y: 30px;
    /* @tweakable Ending vertical position for the welcome message animation. */
    --welcome-message-anim-end-y: 0px;

    /* @tweakable Radius for the overall screen curvature. Higher values make it more rounded. */
    --crt-screen-border-radius: 20px; 

    /* @tweakable Windows Media Center (WMC) Styles */
    /* @tweakable Main background color for Windows Media Center. */
    --wmc-bg-color: #1a0033;
    /* @tweakable Secondary background color for Media Center gradients. */
    --wmc-secondary-bg-color: #330066;
    /* @tweakable Color of the large "start" text in Media Center. */
    --wmc-start-text-color: #9933ff;
    /* @tweakable Drop shadow for the large "start" text in Media Center. */
    --wmc-start-text-shadow: 0 0 20px rgba(153, 51, 255, 0.8);
    /* @tweakable Color for category links in Media Center. */
    --wmc-link-color: #ffffff;
    /* @tweakable Color for category links on hover in Media Center. */
    --wmc-link-hover-color: #ff9900;
    /* @tweakable Background for selected/hovered category links in Media Center. */
    --wmc-link-hover-bg: rgba(255, 255, 255, 0.1);
    /* @tweakable Highlight color for interactive elements in Media Center. */
    --wmc-highlight-color: #ff9900;
    /* @tweakable Sub-text color for descriptions in Media Center. */
    --wmc-subtext-color: #cccccc;
    /* @tweakable Size of the main logo within the Media Center application. */
    --wmc-logo-size: 150px;

    /* @tweakable WMC Intro Animation Styles */
    /* @tweakable Duration of the WMC intro animation. */
    --wmc-intro-duration: 2s;
    /* @tweakable Initial scale of the WMC intro logo. */
    --wmc-intro-logo-start-scale: 0.5;
    /* @tweakable Final scale of the WMC intro logo. */
    --wmc-intro-logo-end-scale: 1;
    /* @tweakable Initial opacity of the WMC intro logo. */
    --wmc-intro-logo-start-opacity: 0;
    /* @tweakable Final opacity of the WMC intro logo. */
    --wmc-intro-logo-end-opacity: 1;
    /* @tweakable Filter applied to the WMC intro logo for glow effect. */
    --wmc-intro-logo-filter: drop-shadow(0 0 15px rgba(255,255,255,0.7));
    /* @tweakable Initial vertical position of the WMC intro title. */
    --wmc-intro-title-start-y: 20px;
    /* @tweakable Final vertical position of the WMC intro title. */
    --wmc-intro-title-end-y: 0px;
    /* @tweakable Initial opacity of the WMC intro title. */
    --wmc-intro-title-start-opacity: 0;
    /* @tweakable Final opacity of the WMC intro title. */
    --wmc-intro-title-end-opacity: 1;
    /* @tweakable Duration of the fade-out for the entire WMC intro. */
    --wmc-intro-fade-out-duration: 0.5s;
    /* @tweakable Delay before the WMC intro fades out. */
    --wmc-intro-fade-out-delay: 1.5s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-color);
}

body {
    overflow: hidden; 
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    cursor: default;
}

/* New container to enforce 4:3 aspect ratio */
#aspect-ratio-container {
    position: relative;
    aspect-ratio: 4 / 3;
    height: 100vh; 
    max-height: 100vh;
    max-width: calc(100vh * (4/3)); 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: url('/df8fxcq-854bac9e-f803-4cd6-bb81-bcfe951ce733 (1).png') no-repeat center center;
    background-size: cover;
    box-shadow: 0 0 30px rgba(120, 120, 180, 0.2), inset 0 0 50px rgba(0,0,0,0.5); 
    isolation: isolate; 
    border-radius: var(--crt-screen-border-radius); 
    transform: scale(0.99); 
}

/* Adjust width if viewport is taller than it is wide (portrait mode) */
@media (max-aspect-ratio: 4/3) {
    #aspect-ratio-container {
        width: 100vw;
        height: calc(100vw * (3/4));
        max-width: 100vw;
        max-height: 100vh;
        border-radius: var(--crt-screen-border-radius);
        transform: scale(0.99);
    }
}

/* CRT Filter Overlay */
#crt-overlay {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 9998; 
    background-size: 100% var(--crt-scanline-stripe-height); 
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 50%,
        var(--crt-scanline-color) 50%,
        var(--crt-scanline-color) 100%
    );
    opacity: var(--crt-flicker-opacity); 
    animation: crt-flicker var(--crt-flicker-duration) infinite alternate; 
    border-radius: var(--crt-screen-border-radius); 
}

#crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, 
                    rgba(255, 0, 0, var(--crt-chromatic-red-opacity)), 
                    rgba(0, 255, 255, var(--crt-chromatic-green-opacity)), 
                    rgba(0, 0, 255, var(--crt-chromatic-blue-opacity))
                );
    background-size: 200% 3px, 3px 200%;
    z-index: 1; 
    border-radius: var(--crt-screen-border-radius); 
}

#crt-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--crt-rolling-scanline-height); 
    background: linear-gradient(to bottom,
        var(--crt-rolling-scanline-bg-color-start) 0%,
        var(--crt-rolling-scanline-bg-color-peak) 50%,
        var(--crt-rolling-scanline-bg-color-start) 100%
    );
    animation: crt-roll var(--crt-rolling-scanline-duration) linear infinite; 
    z-index: 2; 
    border-radius: var(--crt-screen-border-radius); 
}

@keyframes crt-flicker {
    from { opacity: var(--crt-flicker-opacity); }
    to { opacity: calc(var(--crt-flicker-opacity) + 0.05); }
}

@keyframes crt-roll {
    from { transform: translateY(-100%); }
    to { transform: translateY(calc(100vh / (var(--crt-rolling-scanline-height) / 100))); } 
}

/* New styles for startup, bootup, login screens */
.full-screen-overlay {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: #000000; 
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column; 
    z-index: 2000; 
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none; 
}

.full-screen-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

#bootup-animation-screen {
    background-color: #000;
    overflow: hidden; 
}

/* Swirl background - positioned absolutely to not interfere with centering */
.boot-swirls {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; 
    height: 150%;
    object-fit: cover;
    z-index: 1; 
    opacity: 0;
    animation: bootSwirlsAnimation var(--boot-swirls-animation-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* New container for logo animation and sheen effect */
.boot-logo-container {
    position: relative;
    z-index: 2;
    filter: var(--boot-logo-glow);
    animation: bootLogoAnimation var(--boot-logo-animation-duration) cubic-bezier(0.19, 1, 0.22, 1) var(--boot-logo-animation-delay) forwards;
    opacity: 0;
    transform: scale(var(--boot-logo-initial-scale)) rotate(var(--boot-logo-initial-rotation));
    perspective: var(--boot-logo-perspective); 
}

/* New wrapper to handle the 3D flip animation */
.logo-flipper {
    transform-style: preserve-3d;
    animation: bootLogoFlip var(--boot-logo-flip-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955) var(--boot-logo-flip-delay) forwards;
}

.boot-logo-container::after {
    content: '';
    position: absolute;
    top: calc(50% - (var(--boot-logo-sheen-height-multiplier) * 50%)); 
    left: calc(50% - (var(--boot-logo-sheen-width-multiplier) * 50%)); 
    width: calc(100% * var(--boot-logo-sheen-width-multiplier)); 
    height: calc(100% * var(--boot-logo-sheen-height-multiplier)); 
    background: linear-gradient(
        135deg, 
        transparent 35%,
        var(--boot-logo-sheen-color) 48%,
        var(--boot-logo-sheen-color) 52%,
        transparent 65%
    );
    transform: translateX(-150%) translateY(-150%) rotate(var(--boot-logo-sheen-angle));
    animation: bootLogoSheen var(--boot-logo-sheen-duration) ease-in-out var(--boot-logo-sheen-delay) forwards;
    opacity: 0;
}

.boot-logo {
    width: 150px; 
    height: 150px;
    display: block; 
}

.bootup-text-container {
    z-index: 2;
    text-align: center;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    margin-top: 20px; 
}

.boot-os-name {
    font-size: 2.5em;
    font-weight: 300;
    opacity: 0;
    animation: bootTextAnimation var(--boot-title-animation-duration) cubic-bezier(0.23, 1, 0.32, 1) var(--boot-title-animation-delay) forwards;
}

.boot-slogan {
    font-size: 1.2em;
    margin-top: 5px;
    font-style: italic;
    color: #e0e0e0;
    opacity: 0;
    animation: bootTextAnimation var(--boot-slogan-animation-duration) cubic-bezier(0.23, 1, 0.32, 1) var(--boot-slogan-animation-delay) forwards;
    animation-name: bootSloganTextAnimation; 
}

/* Keyframes for bootup screen animations */
@keyframes bootSwirlsAnimation {
    0% {
        transform: translate(-50%, -50%) scale(var(--boot-swirls-initial-scale)) rotate(var(--boot-swirls-initial-rotation-degrees)) translateX(var(--boot-swirls-translate-x-start)) translateY(var(--boot-swirls-translate-y-start));
        filter: saturate(var(--boot-swirls-saturation-start)) blur(var(--boot-swirls-blur-start)) hue-rotate(var(--boot-swirls-hue-rotate-start));
        opacity: 0;
    }
    15% {
        opacity: var(--boot-swirls-fade-in-opacity);
    }
    100% {
        transform: translate(-50%, -50%) scale(var(--boot-swirls-final-scale)) rotate(var(--boot-swirls-final-rotation-degrees)) translateX(var(--boot-swirls-translate-x-end)) translateY(var(--boot-swirls-translate-y-end));
        filter: saturate(var(--boot-swirls-saturation-end)) blur(var(--boot-swirls-blur-end)) hue-rotate(var(--boot-swirls-hue-rotate-end));
        opacity: var(--boot-swirls-fade-in-opacity);
    }
}

@keyframes bootLogoAnimation {
    0% {
        opacity: 0;
        transform: scale(var(--boot-logo-initial-scale)) rotate(var(--boot-logo-initial-rotation)) translateZ(var(--boot-logo-animation-translateZ-start));
        filter: blur(var(--boot-logo-blur-start)) var(--boot-logo-glow);
    }
    50% {
        transform: scale(calc(var(--boot-logo-initial-scale) * 0.7)) rotate(calc(var(--boot-logo-initial-rotation) * 0.5)) translateZ(var(--boot-logo-animation-translateZ-peak));
    }
    100% {
        opacity: 1;
        transform: scale(var(--boot-logo-final-scale)) rotate(var(--boot-logo-final-rotation)) translateZ(var(--boot-logo-animation-translateZ-end));
        filter: blur(var(--boot-logo-blur-end)) var(--boot-logo-glow);
    }
}

@keyframes bootTextAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
        text-shadow: none; 
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: var(--boot-os-name-glow-end); 
    }
}

.boot-slogan {
    animation: bootTextAnimation var(--boot-slogan-animation-duration) cubic-bezier(0.23, 1, 0.32, 1) var(--boot-slogan-animation-delay) forwards;
    animation-name: bootSloganTextAnimation; 
}

@keyframes bootSloganTextAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
        text-shadow: var(--boot-slogan-glow-start); 
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: var(--boot-slogan-glow-end); 
    }
}

/* @tweakable Keyframes for the boot logo's 3D flip animation. */
@keyframes bootLogoFlip {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(calc(360deg * var(--boot-logo-flip-rotations)));
    }
}

/* @tweakable Keyframes for the boot logo's light sweep (sheen) effect. */
@keyframes bootLogoSheen {
    0% {
        transform: translateX(calc(-100% * var(--boot-logo-sheen-width-multiplier))) translateY(calc(-100% * var(--boot-logo-sheen-height-multiplier))) rotate(var(--boot-logo-sheen-angle));
        opacity: var(--boot-logo-sheen-opacity-start);
    }
    20% {
        opacity: var(--boot-logo-sheen-opacity-peak);
    }
    80% {
        opacity: var(--boot-logo-sheen-opacity-peak);
    }
    100% {
        transform: translateX(calc(100% * var(--boot-logo-sheen-width-multiplier))) translateY(calc(100% * var(--boot-logo-sheen-height-multiplier))) rotate(var(--boot-logo-sheen-angle));
        opacity: var(--boot-logo-sheen-opacity-end);
    }
}

/* New element for screen curvature effect */
#crt-curvature {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; 
    border-radius: 10px; 
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0.3) 100%);
    box-shadow: inset 0 0 var(--crt-vignette-intensity) var(--crt-vignette-color);
}

/* New styles for startup screen */
#startup-screen {
    justify-content: flex-end; 
    padding-bottom: 10vh;
    background: radial-gradient(circle, var(--startup-screen-bg-start), var(--startup-screen-bg-end));
}

#startup-screen .startup-text {
    font-size: var(--startup-text-font-size);
    color: var(--startup-text-color);
    margin-bottom: var(--startup-text-margin-bottom);
    opacity: 0;
    animation: fadeInAndGlow var(--startup-text-fade-in-duration) ease-in-out var(--startup-text-fade-in-delay) forwards,
               subtlePulse 4s ease-in-out infinite 2s; 
}

/* @tweakable Keyframes for the "Starting Windows Vienna" text to fade in, move slightly, and glow. */
@keyframes fadeInAndGlow {
    0% {
        opacity: 0;
        transform: translateY(20px);
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: var(--startup-text-glow-shadow);
    }
}

/* @tweakable Keyframes for a subtle pulsing glow effect on the startup text. */
@keyframes subtlePulse {
    0%, 100% {
        text-shadow: var(--startup-text-glow-shadow);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); 
    }
}

/* @tweakable Styles for the loading bar container on the startup screen. */
.loading-bar-container {
    width: var(--loading-bar-width);
    height: var(--loading-bar-height);
    background-color: var(--loading-bar-track-bg);
    border-radius: var(--loading-bar-border-radius);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* @tweakable Styles for the animated fill of the loading bar. */
.loading-bar-fill {
    width: 0%;
    height: 100%;
    background-color: var(--loading-bar-base-color);
    background-image: linear-gradient(
        45deg,
        var(--loading-bar-highlight-color) 25%,
        transparent 25%,
        transparent 50%,
        var(--loading-bar-highlight-color) 50%,
        var(--loading-bar-highlight-color) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    border-radius: var(--loading-bar-border-radius);
    animation: loadingBarProgress ease-in-out forwards,
               loadingBarStripes 1s linear infinite;
    animation-play-state: running;
}

/* @tweakable Animation keyframes for the loading bar filling up. */
@keyframes loadingBarProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* @tweakable Animation keyframes for the moving stripes on the loading bar. */
@keyframes loadingBarStripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

/* New Shimmer Effect for Loading Bar - REMOVED AS IT IS REPLACED BY MOVING STRIPES */
.loading-bar-fill::after {
    content: none; 
}

/* @tweakable The animation for the login screen background, creating a slow pan effect. */
@keyframes loginBgPan {
    from { background-position: 0% 50%; background-size: 110% auto; }
    to { background-position: 100% 50%; background-size: 120% auto; }
}

#login-screen {
    background: url('/maxresdefault (1) (1).png') no-repeat center center fixed;
    background-size: cover;
    background-color: var(--login-screen-bg-tint);
    background-blend-mode: multiply;
    animation: loginBgPan 30s ease-in-out infinite alternate;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.login-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: fadeInDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    opacity: 0;
    margin-bottom: 20px; 
}

.login-vienna-logo {
    width: var(--login-vienna-logo-size);
    height: var(--login-vienna-logo-size);
    filter: var(--login-vienna-logo-glow);
}

.login-os-title {
    color: var(--login-os-title-color);
    font-size: var(--login-os-title-font-size);
    font-weight: var(--login-os-title-font-weight);
    text-shadow: var(--login-os-title-shadow);
}

.login-box {
    background: var(--login-box-bg);
    backdrop-filter: blur(var(--login-box-blur));
    border-radius: 15px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; 
    box-shadow: 0 10px 40px var(--login-box-shadow-color), inset 0 1px 1px var(--login-box-shine-color);
    border: 1px solid var(--login-box-border-color);
    color: white;
    text-align: center;
    width: 380px; 
    margin-top: 0; 
    animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
    opacity: 0;
}

.login-avatar {
    width: var(--login-avatar-size);
    height: var(--login-avatar-size);
    border-radius: 50%;
    border: var(--login-avatar-border);
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform var(--login-avatar-hover-transition) ease, box-shadow var(--login-avatar-hover-transition) ease;
}

.login-avatar:hover {
    transform: var(--login-avatar-hover-transform);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), var(--login-avatar-hover-shadow);
}

#login-username-display {
    font-size: var(--login-username-font-size);
    font-weight: 300; 
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    margin-bottom: 10px; 
}

.password-group {
    display: flex;
    width: 100%;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px; 
    overflow: hidden; 
    background: var(--login-password-input-bg);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.password-group:focus-within {
    border-color: var(--login-password-focus-border);
    background: var(--login-password-focus-bg);
    box-shadow: 0 0 10px rgba(135, 206, 250, 0.3);
}

#password {
    flex-grow: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: white;
    font-size: 1.1em;
    outline: none;
}

#password::placeholder {
    color: var(--login-password-placeholder-color);
    font-weight: 300;
}

#login-button {
    background: transparent; 
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform var(--login-button-transition-duration) ease;
}

#login-button:hover {
    background-color: var(--login-button-hover-bg);
}

#login-button img {
    width: 24px;
    height: 24px;
    transition: transform var(--login-button-transition-duration) ease;
}

#login-button:hover img {
    transform: var(--login-arrow-hover-transform);
}

#login-button:active img {
    transform: var(--login-arrow-active-transform);
}

.error-message {
    color: #ffcccc;
    font-size: 0.9em;
    margin-top: 10px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    height: 1.2em; 
}

.login-options {
    margin-top: 20px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

.login-options a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

.login-options a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.login-options span {
    margin: 0 10px;
    opacity: 0.7;
}

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

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

#desktop {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding: 20px;
    perspective: var(--desktop-window-perspective);
    transform-style: preserve-3d;
}

#desktop-icons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform-style: preserve-3d;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; 
    cursor: pointer;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.15s ease, transform 0.3s ease;
}

.desktop-icon:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateZ(var(--icon-hover-translateZ)) rotateY(var(--icon-hover-rotateY));
}

.desktop-icon:active {
    background-color: rgba(255, 255, 255, 0.25);
}

.desktop-icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4));
    transition: filter 0.3s ease;
}

.desktop-icon:hover img {
    filter: var(--icon-hover-shadow);
}

.desktop-icon span {
    color: white;
    font-size: 0.9em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    word-wrap: break-word;
    width: 100%;
}

#taskbar {
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--taskbar-height); 
    background: linear-gradient(to top, var(--taskbar-bottom-gray), var(--taskbar-top-gray)); 
    backdrop-filter: none; 
    border-top: 1px solid var(--taskbar-border); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px var(--shadow-color); 
    display: flex;
    align-items: center; 
    padding: 0 5px;
    z-index: 1000;
}

#start-button {
    position: relative; 
    left: var(--start-orb-horizontal-offset); 
    width: var(--start-orb-size); 
    height: var(--start-orb-size); 
    cursor: pointer;
    transition: transform 0.1s ease;
    margin-right: 0; 
    display: flex; 
    justify-content: center;
    align-items: center;
    border: var(--start-orb-outline-width) solid var(--start-orb-outline-color); 
    border-radius: 50%; 
    box-shadow: inset 0 0 5px rgba(255,255,255,0.1),
                0 0 0 var(--start-orb-outline-width) var(--start-orb-outline-color); 
    flex-shrink: 0; 
    transform: translateY(var(--start-orb-vertical-offset)); 
}

#start-button img {
    width: calc(var(--start-orb-size) - 8px); 
    height: calc(var(--start-orb-size) - 8px);
    transition: filter 0.2s ease; 
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); 
    transform: none; 
}

#start-button:hover img {
    filter: drop-shadow(0 0 10px var(--vienna-blue-accent)) drop-shadow(0 0 2px rgba(0,0,0,0.5)); 
}

#start-button:active img {
    transform: scale(0.95); 
    filter: drop-shadow(0 0 5px var(--vienna-blue-accent)) drop-shadow(0 0 2px rgba(0,0,0,0.5)); 
}

#taskbar-center {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    margin-left: calc(var(--start-orb-size) / 2); 
}

.taskbar-item {
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--taskbar-item-default); 
    border: 1px solid var(--taskbar-border); 
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 100px;
    max-width: 150px;
}

.taskbar-item.active {
    background: var(--taskbar-item-active-bg); 
    border: 1px solid rgba(135, 206, 250, 0.5); 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 8px rgba(135, 206, 250, 0.3); 
}

.taskbar-item:hover {
    background: var(--taskbar-item-hover); 
    box-shadow: 0 0 5px rgba(135, 206, 250, 0.2); 
}

.taskbar-item span {
    font-size: 0.9em;
}

#system-tray {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 10px;
    gap: 8px; 
}

#system-tray .system-tray-button {
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    border-radius: 3px;
}

#system-tray .system-tray-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#system-tray .system-tray-button img {
    width: 24px; 
    height: 24px;
    filter: invert(100%); 
}

/* Start Menu */
#start-menu {
    position: absolute; 
    bottom: var(--taskbar-height); 
    left: 5px;
    width: 480px;
    height: 600px;
    background: linear-gradient(to bottom, var(--start-menu-overall-gradient-top), var(--start-menu-overall-gradient-bottom)); 
    backdrop-filter: none; 
    border: 1px solid var(--start-menu-border-color); 
    border-radius: 10px; 
    box-shadow: 0 5px 30px var(--start-menu-box-shadow-color), inset 0 1px 0 var(--start-menu-inner-shine-color); 
    display: flex;
    flex-direction: column;
    padding: 10px; 
    gap: 0; 
    z-index: 1001; 
    transition: all 0.3s ease-out;
    transform: translateY(100%); 
    opacity: 0; 
    pointer-events: none; 
}

#start-menu.show {
    transform: translateY(0); 
    opacity: 1; 
    pointer-events: auto;
}

.start-menu-main-content {
    display: flex;
    flex-grow: 1; 
    gap: 0; 
    border-radius: 8px; 
    overflow: hidden; 
}

/* New start menu footer for search and shutdown buttons */
.start-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px; 
    height: var(--start-menu-footer-height);
    margin-top: 10px; 
}

.start-menu-search {
    flex-grow: 1;
    margin-top: 0;
    padding: 0;
}

.start-menu-search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 5px;
    background: var(--start-menu-search-input-bg); 
    color: var(--content-text-color); 
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.start-menu-search input::placeholder {
    color: #888888; 
}

.start-menu-search input:focus {
    border-color: var(--vienna-blue-accent);
    background: white; 
}

#start-menu .start-menu-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* New Left Panel (Programs list - the "white thing") */
#start-menu .programs-panel {
    background: var(--start-menu-programs-panel-bg); 
    padding: 15px 15px 10px 15px;
    border-radius: 0; 
    box-shadow: 2px 0 5px var(--start-menu-column-separator-color); 
    min-width: var(--start-menu-programs-panel-min-width);
    flex: var(--start-menu-programs-panel-flex); 
    border-right: 1px solid var(--start-menu-column-separator-color); 
}

.programs-panel .utility-links {
    list-style: none;
    flex-grow: 1;
}

.programs-panel .utility-links li {
    margin-bottom: var(--start-menu-item-margin-bottom);
}

.programs-panel .utility-links a {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: var(--start-menu-item-vertical-padding) var(--start-menu-item-horizontal-padding);
    text-decoration: none;
    color: var(--start-menu-programs-panel-text-color); 
    border-radius: 3px;
    transition: background 0.2s ease, color 0.2s ease;
}

.programs-panel .utility-links a:hover {
    background: var(--start-menu-programs-item-hover-bg); 
    color: var(--start-menu-programs-item-hover-text); 
}

.programs-panel .utility-links .right-arrow-icon {
    width: 12px; 
    height: 12px;
    filter: none; 
}

/* New Right Panel (User and main links - the "black thing") */
#start-menu .user-panel {
    position: relative;
    background-color: transparent; 
    padding: 15px 15px 10px 15px; 
    border-radius: 0; 
    min-width: var(--start-menu-user-panel-min-width);
    flex: var(--start-menu-user-panel-flex); 
}

.user-panel .user-section {
    margin-bottom: 10px;
}

.user-panel h3 {
    color: var(--start-menu-user-panel-heading-color); 
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6); 
    margin-bottom: 5px;
}

.user-panel .main-links {
    list-style: none;
    flex-grow: 1;
}

.user-panel .main-links li {
    margin-bottom: var(--start-menu-item-margin-bottom); 
}

.user-panel .main-links a {
    display: flex; 
    align-items: center;
    padding: var(--start-menu-item-vertical-padding) var(--start-menu-item-horizontal-padding); 
    text-decoration: none;
    color: var(--start-menu-user-panel-text-color); 
    border-radius: 3px;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-panel .main-links a:hover {
    background: var(--start-menu-user-item-hover-bg); 
    color: var(--start-menu-user-item-hover-text); 
    box-shadow: 0 0 8px rgba(0, 102, 204, 0.3); 
}

.user-panel .section-separator {
    border: none;
    border-top: 1px solid var(--start-menu-user-panel-separator-color); 
    margin: 10px 0; 
}

.shutdown-options {
    display: flex;
    gap: var(--start-menu-footer-gap); 
    margin-left: auto; 
    padding-top: 0; 
    border-top: none; 
}

.shutdown-options button {
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 5px;
    background: linear-gradient(to bottom,
        var(--start-menu-shutdown-btn-bg-start) 0%,
        var(--start-menu-shutdown-btn-bg-end) 100%);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    font-size: 0.9em; 
}

.shutdown-options button:hover {
    background: linear-gradient(to bottom,
        var(--start-menu-shutdown-btn-hover-bg-start) 0%,
        var(--start-menu-shutdown-btn-hover-bg-end) 100%);
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.shutdown-options button:active {
    transform: scale(0.98);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); 
}

/* Gadget Sidebar Styles */
.gadgets-sidebar {
    position: absolute; 
    top: 0;
    right: 0;
    width: var(--gadget-sidebar-width);
    height: calc(100% - var(--taskbar-height)); 
    background: var(--gadget-sidebar-bg);
    backdrop-filter: blur(var(--gadget-sidebar-blur-radius)); 
    border-left: 1px solid var(--gadget-sidebar-border);
    box-shadow: var(--gadget-sidebar-shadow);
    z-index: 900; 
    display: flex;
    flex-direction: column;
    padding: 10px;
    transition: transform var(--gadget-sidebar-transition-duration) ease-out, opacity var(--gadget-sidebar-transition-duration) ease-out;
    transform: translateX(100%); 
    opacity: 0;
    pointer-events: none; 
}

.gadgets-sidebar.visible {
    transform: translateX(0); 
    opacity: 1;
    pointer-events: auto;
}

.gadgets-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gadgets-header h3 {
    font-size: 1.1em;
    color: var(--gadget-item-heading-color);
    font-weight: normal;
    margin-bottom: 15px;
}

.gadgets-header .close-gadgets {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.gadgets-header .close-gadgets:hover {
    background-color: #bb3344;
    color: white;
}

.gadgets-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gadget-item-margin-bottom);
    overflow-y: auto; 
    padding-right: 5px; 
}

.gadget-item {
    background: var(--gadget-item-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gadget-item-border-radius);
    padding: var(--gadget-item-padding);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    color: var(--gadget-item-text-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gadget-item h4 {
    font-size: 1em;
    margin-bottom: 5px;
    color: var(--gadget-item-heading-color);
}

.gadget-item p {
    font-size: 0.9em;
    color: var(--gadget-item-text-color);
    line-height: 1.4;
}

/* New CPU Meter Gadget Styles */
.cpu-meter-gadget {
    width: 120px;
    height: 120px;
    padding: 10px;
}
.cpu-meter-dial {
    width: 100%;
    height: 100%;
    border: 2px solid #555;
    border-radius: 50%;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
}
.cpu-meter-usage-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0; /* Updated by JS */
    background: linear-gradient(to top, #4CAF50, #ccff8a);
    transition: height 0.5s linear;
}
.cpu-meter-text {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

/* New Sticky Note Gadget Styles */
.sticky-note-gadget {
    width: 100%;
    height: 180px;
}
.sticky-note-gadget textarea {
    width: 100%;
    height: 100%;
    background: #FFFFAA;
    border: none;
    border-radius: 3px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9em;
    color: #333;
    padding: 10px;
    resize: none;
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* New Slideshow Gadget Styles */
.slideshow-gadget {
    width: 100%;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.slideshow-gadget img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease-in-out;
}
.slideshow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.slideshow-gadget:hover .slideshow-controls {
    opacity: 1;
}
.slideshow-controls button {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
}

#gadget-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.9em;
    line-height: 1.3;
    width: 100%;
}

#gadget-weather .weather-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

#gadget-weather .weather-temp {
    font-size: 1.5em;
    font-weight: bold;
}

#gadget-weather .weather-location {
    font-weight: bold;
    font-size: 1.1em;
}

#gadget-weather .weather-desc {
    text-transform: capitalize;
}

/* Analog Clock Gadget Styles */
.analog-clock {
    position: relative;
    width: var(--analog-clock-size);
    height: var(--analog-clock-size);
    background-color: var(--analog-clock-bg);
    border: var(--analog-clock-border);
    border-radius: 50%;
    box-shadow: var(--analog-clock-shadow);
    margin-top: 10px;
}

.analog-clock .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border-radius: 50% 50% 0 0;
    transition: transform 0.5s ease-in-out;
}

.analog-clock .hour-hand {
    width: var(--hour-hand-width);
    height: var(--hour-hand-height);
    background-color: var(--hour-hand-color);
    transform: rotate(0deg);
}

.analog-clock .minute-hand {
    width: var(--minute-hand-width);
    height: var(--minute-hand-height);
    background-color: var(--minute-hand-color);
    transform: rotate(0deg);
}

.analog-clock .second-hand {
    width: var(--second-hand-width);
    height: var(--second-hand-height);
    background-color: var(--second-hand-color);
    transform: rotate(0deg);
    transition: transform 0.2s linear;
}

.analog-clock .center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--center-dot-size);
    height: var(--center-dot-size);
    background-color: var(--center-dot-color);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* @tweakable Background color of the calendar gadget container. */
.calendar-gadget {
    width: 100%;
    background: var(--calendar-gadget-bg);
    border: var(--calendar-gadget-border);
    border-radius: var(--calendar-gadget-border-radius);
    padding: var(--calendar-gadget-padding);
    box-shadow: var(--calendar-gadget-box-shadow);
    color: #fff;
    overflow: hidden; 
}

/* @tweakable Styling for the calendar header showing month and year. */
.calendar-header {
    text-align: center;
    font-size: var(--calendar-header-font-size);
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0; 
}

/* @tweakable Styling for the weekday names (S, M, T, etc.) row. */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: var(--calendar-weekdays-font-size);
    font-weight: bold;
    color: #bbb; 
    padding-bottom: 4px;
    text-align: center; 
    gap: var(--calendar-days-gap);
}

.calendar-weekdays div {
    text-align: center;
}

/* @tweakable Styling for the grid containing the days of the month. */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--calendar-days-gap);
}

/* @tweakable Styling for each individual day cell in the calendar. */
.calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 3px;
    transition: background-color 0.1s ease;
}

.calendar-day:not(.empty):hover {
    background-color: rgba(255, 255, 255, 0.1); 
}

/* @tweakable Background color for the cell highlighting the current day. */
.calendar-day.today {
    background-color: var(--vienna-purple-light); 
    font-weight: bold;
    color: #fff; 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

/* Window Styles */
.window {
    position: absolute;
    background: var(--purple-aero-base); 
    backdrop-filter: blur(var(--aero-blur-radius)); 
    border: 1px solid var(--purple-aero-border); 
    border-radius: 10px;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.1),
        0 10px 40px var(--shadow-color),
        inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
    min-width: 300px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 100; 
    opacity: 0;
    transition: 
        opacity 0.3s ease, 
        transform var(--window-drag-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        top 0.3s ease, 
        left 0.3s ease, 
        width 0.3s ease, 
        height 0.3s ease;
    pointer-events: none; 
    transform-style: preserve-3d; 
}

/* @tweakable Add a pseudo-element for a thicker glass border effect */
.window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.2), 
        inset 0 1px 2px 2px rgba(0, 0, 0, 0.2);
    pointer-events: none; 
    z-index: 1; 
}

.window.dragging {
    transition: transform 0.1s linear, box-shadow 0.2s ease-out;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 15px 15px rgba(0,0,0,0.2);
}

.window.visible {
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(0px); 
    pointer-events: auto;
}

.window.minimized {
    opacity: 0;
    transform: scale(0.2) translate(-250%, -250%); 
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* @tweakable Keyframes for the window closing animation. */
@keyframes windowCloseAnimation {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0);
    }
}

.window.closing {
    transform-origin: center;
    animation: windowCloseAnimation 0.2s ease-in forwards;
}

/* Remove fixed maximized styles from CSS, will be set by JS dynamically */
.window.maximized {
    border-radius: 0;
    box-shadow: none;
    resize: none; 
}

.window.maximized .window-header {
    border-radius: 0; 
    cursor: default; 
}

.window-header {
    background: linear-gradient(to bottom, var(--purple-aero-header-start), var(--purple-aero-header-end)); 
    padding: 8px 12px;
    border-bottom: 1px solid var(--window-header-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    border-radius: 9px 9px 0 0;
    box-shadow: inset 0 1px 0 var(--purple-aero-header-shine); 
    position: relative;
    z-index: 2; 
}

.window-header.maximized {
    border-radius: 0; 
    cursor: default; 
}

.window-title {
    font-weight: bold;
    font-size: 0.95em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
    flex-grow: 1;
}

.window-controls {
    display: flex; 
    align-items: center;
}

.window-controls button {
    background: var(--window-control-bg);
    border: 1px solid transparent; 
    width: var(--window-icon-size);
    height: var(--window-icon-size);
    margin-left: 2px; 
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease-out; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; 
}

.window-controls button span {
    display: inline-block;
    position: relative;
    width: var(--window-icon-size);
    height: var(--window-icon-size);
    transition: filter 0.15s ease-out;
}

.window-controls button:hover span {
    filter: drop-shadow(0 0 2px var(--window-icon-hover-glow-color));
}

/* --- CSS-drawn Icons --- */
/* Minimize Icon (a line) */
.minimize-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--window-icon-color);
    transform: translateY(-50%);
}

/* Maximize Icon (a square) */
.maximize-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--window-icon-size);
    height: var(--window-icon-size);
    border: 1px solid var(--window-icon-color);
    box-sizing: border-box;
}

/* Close Icon (an 'X') */
.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--window-icon-color);
}
.close-icon::before {
    transform: rotate(45deg);
}
.close-icon::after {
    transform: rotate(-45deg);
}

.window-controls button:hover {
    background: var(--window-control-hover-bg);
    border: 1px solid var(--window-control-hover-border);
}

.window-controls .close-button:hover {
    background-color: var(--window-close-hover-bg);
    border-color: var(--window-close-hover-border);
}

.window-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.window-toolbar .nav-button {
    background-color: #F0F6FF;
    border: 1px solid var(--my-computer-border);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.window-toolbar .nav-button:hover {
    background-color: #E2ECF7;
    border-color: #A3BFD9;
}

.window-toolbar .nav-button img {
    width: 14px;
    height: 14px;
    filter: none;
}

.address-bar {
    flex-grow: 1;
    background-color: #fff;
    border: 1px solid var(--my-computer-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    height: 28px;
    color: var(--my-computer-text-color);
    font-size: 0.9em;
    position: relative;
    overflow: hidden;
}

.address-bar .address-text {
    color: var(--my-computer-text-color);
    white-space: nowrap;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--my-computer-search-bg);
    border: 1px solid var(--my-computer-border);
    border-radius: 3px;
    padding: 0 5px;
    height: 28px;
    width: 150px; 
    flex-shrink: 0;
    margin-left: auto; 
}

.search-box input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9em;
    color: var(--my-computer-text-color);
    padding-right: 5px;
}

.search-box input::placeholder {
    color: #999;
}

.search-box span {
    font-size: 0.85em;
    color: #777;
    white-space: nowrap;
}

.window-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 5px;
    color: var(--my-computer-text-color);
}

.my-computer-toolbar-actions .toolbar-group {
    display: flex;
    gap: 5px;
}

.my-computer-toolbar-actions .toolbar-item {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.9em;
    color: var(--my-computer-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.my-computer-toolbar-actions .toolbar-item:hover {
    background-color: #E6F0FF;
    border-color: #A3BFD9;
}
.my-computer-toolbar-actions .toolbar-item:active {
    background-color: #CDE3F7;
    border-color: #7DAECC;
}

.window-content {
    flex-grow: 1;
    padding: 10px;
    color: var(--content-text-color); 
    background: var(--purple-aero-content-bg); 
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-radius: 0 0 9px 9px;
    position: relative;
    z-index: 2; 
}

.window.maximized .window-content {
    border-radius: 0; 
    padding: 0; 
}

/* Specific App Styles */
#my-computer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; 
    background-color: white; 
}

.my-computer-top-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-computer-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 5px;
    color: var(--my-computer-text-color);
}

.my-computer-toolbar-actions .toolbar-group {
    display: flex;
    gap: 5px;
}

.my-computer-toolbar-actions .toolbar-item {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.9em;
    color: var(--my-computer-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.my-computer-toolbar-actions .toolbar-item:hover {
    background-color: #E6F0FF;
    border-color: #A3BFD9;
}
.my-computer-toolbar-actions .toolbar-item:active {
    background-color: #CDE3F7;
    border-color: #7DAECC;
}

.my-computer-main-area {
    display: flex;
    flex-grow: 1;
    overflow: hidden; 
}

.my-computer-sidebar {
    width: 180px; 
    background-color: var(--my-computer-sidebar-bg);
    border-right: 1px solid var(--my-computer-border);
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; 
}

.favorite-links-heading {
    color: var(--my-computer-text-color);
    font-size: 1em;
    margin-bottom: 5px;
    font-weight: bold;
}

.sidebar-top-line {
    border: none;
    border-top: 1px solid var(--my-computer-border);
    margin-bottom: 10px;
}

.my-computer-sidebar .sidebar-link {
    text-decoration: none;
    color: var(--my-computer-text-color);
    padding: 4px 6px;
    border-radius: 3px;
    margin-bottom: 2px;
    font-size: 0.9em;
}

.my-computer-sidebar .sidebar-link:hover {
    background-color: #E6F0FF;
}

.my-computer-content-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: white; 
    position: relative;
    overflow: hidden;
}

.listview-header {
    display: flex;
    background-color: var(--my-computer-listview-header-bg);
    border-bottom: 1px solid var(--my-computer-listview-border);
    padding: 8px 10px;
    font-weight: bold;
    color: var(--my-computer-text-color);
    flex-shrink: 0; 
}

.listview-col {
    flex: 1;
    padding: 0 5px;
    color: var(--my-computer-text-color);
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listview-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: default;
}

.listview-item:hover {
    background-color: #E6F0FF;
}

.listview-item .listview-col {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}

.listview-item img {
    width: 32px; 
    height: 32px;
    filter: none;
}

.nothing-here {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #999;
    font-size: 0.85em;
    opacity: 0.7;
}

/* General hidden utility class */
.hidden {
    display: none !important;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Z-index management */
.window.active-window {
    z-index: 200; 
}

#notepad-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#notepad-textarea {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    resize: none;
    font-family: 'Consolas', monospace;
    font-size: 1em;
    padding: 10px;
    background: #fdfdfd;
    color: #333;
    outline: none;
    border-radius: 5px; 
}

#calculator-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #F5F5F5; 
    padding: 10px;
    border-radius: 5px;
}

#calculator-display {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 2em;
    text-align: right;
    border-radius: 5px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex-grow: 1;
}

.calculator-buttons button {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); 
    border: 1px solid #999;
    border-radius: 5px;
    font-size: 1.5em;
    padding: 15px 0;
    cursor: pointer;
    transition: background 0.1s ease, transform 0.05s ease;
    color: var(--text-color); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calculator-buttons button:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); 
}

.calculator-buttons button:active {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)); 
    transform: translateY(1px);
    box-shadow: 0 0 2px rgba(0,0,0,0.2) inset;
}

.calculator-buttons button.operator {
    background-color: var(--vienna-purple-dark); 
    color: white;
}

.calculator-buttons button.operator:hover {
    background-color: var(--vienna-purple-light); 
}

.calculator-buttons button.operator:active {
    background-color: color-mix(in srgb, var(--vienna-purple-dark) 80%, black); 
}

.calculator-buttons button.equals {
    background-color: var(--vienna-purple-light); 
    color: white;
}

.calculator-buttons button.equals:hover {
    background-color: var(--vienna-purple-dark); 
}

.calculator-buttons button.equals:active {
    background-color: color-mix(in srgb, var(--vienna-purple-light) 80%, black); 
}

.calculator-buttons button.clear {
    background-color: #FF6347; 
    color: white;
}

.calculator-buttons button.clear:hover {
    background-color: #E05030;
}

.calculator-buttons button.clear:active {
    background-color: #C04020;
}

/* Shutdown Screen Styles */
#shutdown-screen {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    background: radial-gradient(circle,
                var(--shutdown-screen-bg-color1) 0%,
                var(--shutdown-screen-bg-color2) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2000; 
    color: var(--shutdown-message-color);
    transition: opacity 0.5s ease-in-out;
    opacity: 0; 
    pointer-events: none; 
}

#shutdown-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

.shutdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 50px; 
}

.shutdown-logo {
    width: var(--shutdown-logo-size);
    filter: var(--shutdown-logo-filter);
    animation: pulse var(--shutdown-logo-pulse-duration) infinite alternate; 
}

@keyframes pulse {
    from {
        opacity: 0.8;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

.shutdown-message {
    font-size: var(--shutdown-message-font-size);
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.8);
}

/* "It's now safe to turn off" Screen Styles */
#safe-to-turn-off-screen {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: var(--safe-screen-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; 
    opacity: 0; 
    transition: opacity 1s ease-in-out;
    pointer-events: none; 
}

#safe-to-turn-off-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

.safe-message {
    color: var(--safe-message-color);
    font-size: var(--safe-message-font-size);
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* Context Menu Styles */
.context-menu {
    position: absolute;
    z-index: 3000; 
    background: var(--context-menu-bg);
    backdrop-filter: blur(var(--context-menu-blur));
    border: 1px solid var(--context-menu-border);
    border-radius: 5px;
    box-shadow: var(--context-menu-shadow), inset 0 0 0 1px rgba(255,255,255,0.3);
    padding: 4px;
    min-width: 180px;
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li {
    padding: 6px 12px 6px 25px; 
    color: var(--context-menu-text-color);
    cursor: default;
    font-size: 0.9em;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    user-select: none;
}

.context-menu li:not(.separator):hover {
    background-color: var(--context-menu-hover-bg);
    color: var(--context-menu-hover-text);
    border-color: var(--context-menu-hover-border);
}

.context-menu li.separator {
    height: 1px;
    background-color: var(--context-menu-separator-color);
    margin: 4px 1px;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.7); 
}

/* Screensaver Styles */
.screensaver-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 5000;
    cursor: none; /* Hide cursor during screensaver */
}

#screensaver-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Paint App Styles */
#paint-toolbar {
    display: flex;
    gap: 15px;
    padding: 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    align-items: center;
}
#paint-toolbar label {
    font-size: 0.9em;
    color: #333;
}
#paint-toolbar input[type="color"] {
    border: 1px solid #ccc;
    padding: 0;
    width: 30px;
    height: 30px;
}
#paint-toolbar input[type="range"] {
   width: 80px;
}
#paint-canvas {
    cursor: crosshair;
    background: #fff;
    display: block; /* remove extra space under canvas */
}

/* Games App Styles */
#game-container {
    padding: 20px;
    text-align: center;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    height: 100%;
    justify-content: center;
}
#game-container input {
    padding: 8px;
    font-size: 1.1em;
    width: 100px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
}
#game-container button {
    padding: 8px 15px;
    font-size: 1em;
    border: 1px solid #999;
    border-radius: 4px;
    background: #e0e0e0;
    cursor: pointer;
    color: #333;
}
#game-container button:hover {
    background: #d0d0d0;
}
#game-message {
    font-weight: bold;
    min-height: 20px;
}

/* New Run Dialog Styles */
.run-dialog-content {
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f0f0f0;
    color: #333;
}
.run-dialog-content p {
    line-height: 1.4;
    font-size: 0.9em;
}
.run-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.run-input-group label {
    font-weight: bold;
}
#run-input {
    flex-grow: 1;
    padding: 5px;
    color: #333;
    border: 1px solid #999;
}
.run-buttons {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.run-buttons button {
    min-width: 80px;
    padding: 5px 0;
}

/* New Command Prompt Styles */
.command-prompt-content {
    background-color: #000;
    color: #c0c0c0;
    font-family: 'Consolas', 'Lucida Console', monospace;
    font-size: 0.9em;
    padding: 5px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.command-output {
    flex-grow: 1;
    white-space: pre-wrap;
    word-break: break-all;
}
.command-input-line {
    display: flex;
    align-items: center;
}
.prompt-path {
    color: #c0c0c0;
}
.command-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #c0c0c0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 5px;
}

/* New Task Manager Styles */
.task-manager-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f0f0f0;
    color: #333;
}
.tm-header {
    display: flex;
    font-weight: bold;
    padding: 8px 10px;
    background: #e0e0e0;
    border-bottom: 1px solid #ccc;
}
.tm-header div {
    flex: 1;
}
.tm-process-list {
    flex-grow: 1;
    overflow-y: auto;
    background: #fff;
}
.tm-process-item {
    display: flex;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    cursor: default;
}
.tm-process-item:hover {
    background: #e6f0ff;
}
.tm-process-item.selected {
    background: #cde3f7;
}
.tm-process-item div {
    flex: 1;
}
.tm-footer {
    padding: 10px;
    background: #f0f0f0;
    text-align: right;
    border-top: 1px solid #ccc;
}
.tm-footer button {
    padding: 5px 15px;
}

/* New Snipping Tool Styles */
.snipping-tool-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    color: #333;
    height: 100%;
}
#new-snip-btn {
    padding: 8px 20px;
}
#snip-message {
    color: #006400;
    font-weight: bold;
}

/* New Sound Recorder Styles */
.sound-recorder-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    height: 100%;
    color: #333;
    background: #f5f5f5;
}
.sr-status {
    font-weight: bold;
}
.sr-timer {
    font-size: 2em;
    font-family: 'Consolas', monospace;
}
.sr-controls button {
    padding: 10px 20px;
    font-size: 1.1em;
    cursor: pointer;
}
#sr-record-btn {
    background-color: #d9534f;
    color: white;
    border: 1px solid #c9302c;
}
#sr-stop-btn {
    background-color: #5bc0de;
    color: white;
    border: 1px solid #46b8da;
}
#sr-playback {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
#sr-playback audio {
    width: 100%;
}

/* New Welcome Screen Styles */
#welcome-screen {
    background: linear-gradient(135deg, var(--welcome-screen-bg-color1), var(--welcome-screen-bg-color2));
    justify-content: center;
    align-items: center;
    text-align: center;
}

.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 1; 
}

/* Keyframes for welcome screen elements */
@keyframes welcomeLogoAnimation {
    0% {
        opacity: 0;
        transform: translateY(var(--welcome-logo-anim-start-y)) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(var(--welcome-logo-anim-end-y)) scale(1);
    }
}

@keyframes welcomeMessageAnimation {
    0% {
        opacity: 0;
        transform: translateY(var(--welcome-message-anim-start-y));
    }
    100% {
        opacity: 1;
        transform: translateY(var(--welcome-message-anim-end-y));
    }
}

.welcome-logo {
    width: var(--welcome-logo-size);
    height: var(--welcome-logo-size);
    filter: var(--welcome-logo-filter);
    opacity: 0; 
    animation: welcomeLogoAnimation var(--welcome-logo-anim-duration) ease-out var(--welcome-logo-anim-delay) forwards;
}

.welcome-message {
    font-size: var(--welcome-message-font-size);
    font-weight: 300;
    color: var(--welcome-message-color);
    text-shadow: var(--welcome-message-shadow);
    letter-spacing: 2px;
    opacity: 0; 
    animation: welcomeMessageAnimation var(--welcome-message-anim-duration) ease-out var(--welcome-message-anim-delay) forwards;
}

/* Add new style for setup form groups for better alignment */
.setup-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    align-items: flex-start; 
    width: 100%; 
}

.setup-form-group label {
    font-size: 1em;
    color: var(--setup-text-color);
    margin-bottom: 5px;
    font-weight: 600; 
}

.setup-form-group input[type="text"],
.setup-form-group input[type="password"],
.setup-form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--setup-box-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--setup-heading-color);
    background-color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.setup-form-group input[type="text"]:focus,
.setup-form-group input[type="password"]:focus,
.setup-form-group select:focus {
    border-color: var(--setup-button-primary-bg);
    box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.2);
    outline: none;
}

.setup-form-group input::placeholder {
    color: #999;
    font-style: italic;
}

/* Ensure error messages are styled correctly below forms */
.error-message {
    color: #E81123; 
    font-size: 0.9em;
    margin-top: -5px; 
    margin-bottom: 10px;
    height: auto; 
    min-height: 1.2em; 
}

/* New style for installation status text */
.installation-status {
    margin-top: 15px;
    font-size: 0.9em;
    color: var(--setup-text-color);
    text-align: center;
    min-height: 1.2em;
}

/* New Control Panel Styles */
.control-panel-container {
    padding: 20px;
    height: 100%;
    color: #333;
    background-color: #fff;
}
.control-panel-container h2 {
    font-size: 1.5em;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.control-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.cp-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cp-item:hover {
    background-color: #f0f8ff;
    border-color: #a0c8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cp-item.disabled {
    cursor: not-allowed;
    background-color: #f5f5f5;
}
.cp-item.disabled span,
.cp-item.disabled p,
.cp-item.disabled img {
    opacity: 0.6;
}
.cp-item img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}
.cp-item span {
    font-size: 1.1em;
    font-weight: 600;
    color: #005a9e;
}
.cp-item p {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    line-height: 1.3;
}

/* New System Info Styles */
.system-info-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f0f0f0;
    padding: 15px;
}
.system-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}
.system-info-header img {
    width: 50px;
    height: 50px;
}
.system-info-header h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
}
.system-info-body {
    flex-grow: 1;
    padding: 20px 0;
    color: #333;
    line-height: 1.8;
}
.system-info-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid #ccc;
}
.system-info-footer .ok-button, .winver-footer .ok-button {
    padding: 8px 25px;
    font-size: 1em;
    border: 1px solid #999;
    border-radius: 4px;
    background: #e0e0e0;
    cursor: pointer;
    color: #333;
}
.system-info-footer .ok-button:hover, .winver-footer .ok-button:hover {
    background-color: #d0d0d0;
}

/* New Winver Styles */
.winver-container {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}
.winver-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 10px;
}
.winver-header img {
    width: 64px;
    height: 64px;
}
.winver-header h2 {
    font-size: 2em;
    font-weight: 200;
    color: #333;
}
.winver-content {
    flex-grow: 1;
    padding: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
    line-height: 1.6;
}
.winver-content p {
    color: #333;
    font-size: 0.9em;
    margin-bottom: 10px;
}
#winver-version-text, #winver-copyright-text {
    font-weight: bold;
}
.winver-footer {
    padding-top: 15px;
    text-align: center;
}

/* --- Windows Media Center Styles --- */
.wmc-app-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--wmc-bg-color), var(--wmc-secondary-bg-color));
    overflow: hidden;
}

.wmc-intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* Solid black for intro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity var(--wmc-intro-fade-out-duration) ease-out var(--wmc-intro-fade-out-delay);
    z-index: 10; /* Ensure it's on top during intro */
}

.wmc-intro-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.wmc-intro-logo-app {
    width: var(--wmc-logo-size);
    height: var(--wmc-logo-size);
    object-fit: contain;
    filter: var(--wmc-intro-logo-filter);
    opacity: 0;
    animation: wmcIntroLogoAnim var(--wmc-intro-duration) ease-out forwards;
}

.wmc-intro-title-app {
    font-size: 2.5em;
    font-weight: 300;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    margin-top: 15px;
    opacity: 0;
    animation: wmcIntroTextAnim var(--wmc-intro-duration) ease-out forwards;
    animation-delay: 0.5s;
}

.wmc-intro-slogan-app {
    font-size: 1.2em;
    color: #ccc;
    margin-top: 5px;
    opacity: 0;
    animation: wmcIntroTextAnim var(--wmc-intro-duration) ease-out forwards;
    animation-delay: 1s;
}

@keyframes wmcIntroLogoAnim {
    0% { transform: scale(var(--wmc-intro-logo-start-scale)); opacity: var(--wmc-intro-logo-start-opacity); }
    100% { transform: scale(var(--wmc-intro-logo-end-scale)); opacity: var(--wmc-intro-logo-end-opacity); }
}

@keyframes wmcIntroTextAnim {
    0% { transform: translateY(var(--wmc-intro-title-start-y)); opacity: var(--wmc-intro-title-start-opacity); }
    100% { transform: translateY(var(--wmc-intro-title-end-y)); opacity: var(--wmc-intro-title-end-opacity); }
}

/* --- Windows Media Player Styles --- */
#media-player-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #1e1e1e, #333333);
    color: white;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
}

.mp-now-playing {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
}

#mp-album-art {
    /* @tweakable Size of the album art in Windows Media Player. */
    width: 100px;
    /* @tweakable Size of the album art in Windows Media Player. */
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.mp-track-info {
    text-align: left;
    flex-grow: 1;
    max-width: calc(100% - 115px); /* Album art width + gap */
}

.mp-title {
    /* @tweakable Font size for the track title in Windows Media Player. */
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-artist {
    /* @tweakable Font size for the artist name in Windows Media Player. */
    font-size: 1em;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.mp-button {
    background: linear-gradient(to bottom, #444, #222);
    border: 1px solid #555;
    /* @tweakable Border radius for Media Player control buttons. */
    border-radius: 5px;
    color: white;
    /* @tweakable Font size for Media Player control button icons (play/pause, next/prev). */
    font-size: 1.5em;
    /* @tweakable Width of Media Player control buttons. */
    width: 45px;
    /* @tweakable Height of Media Player control buttons. */
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.mp-button:hover {
    background: linear-gradient(to bottom, #555, #333);
    border-color: #777;
}

.mp-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.mp-volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    justify-content: flex-end;
}

#mp-volume-slider {
    /* @tweakable Width of the volume slider in Windows Media Player. */
    width: 120px;
    -webkit-appearance: none;
    height: 6px;
    background: #555;
    border-radius: 3px;
    outline: none;
    transition: background 0.2s;
}

#mp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0078D7;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #fff;
}

#mp-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0078D7;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #fff;
}

#mp-volume-icon {
    font-size: 1.2em;
    color: #fff;
    width: 20px;
}

.mp-seek-bar-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#mp-seek-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 6px;
    background: #555;
    border-radius: 3px;
    outline: none;
    transition: background 0.2s;
}

#mp-seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* @tweakable Color of the seek slider thumb in Windows Media Player. */
    background: #FF9900;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #fff;
}

#mp-seek-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FF9900;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #fff;
}

.mp-time {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.8em;
    color: #aaa;
}

.mp-playlist-toggle {
    margin-top: 15px;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

#mp-toggle-playlist-btn {
    background: #555;
    border: 1px solid #777;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s, border-color 0.2s;
}

#mp-toggle-playlist-btn:hover {
    background: #777;
    border-color: #999;
}

.mp-playlist-view {
    width: 100%;
    /* @tweakable Height of the playlist view in Windows Media Player. */
    height: 150px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    margin-top: 10px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.1);
}

#mp-playlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mp-playlist-list li {
    padding: 8px 10px;
    font-size: 0.9em;
    color: #eee;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background-color 0.1s;
}

#mp-playlist-list li:hover {
    background-color: rgba(255,255,255,0.1);
}

#mp-playlist-list li.active-track {
    background-color: rgba(0, 120, 215, 0.5);
    color: white;
    font-weight: bold;
}