/* Soft OS - Tactile Web Operating System */

:root {
    /* Her Movie Orange & Cream Palette */
    --primary-orange: #ff6b35;
    --soft-orange: #ff8c5a;
    --warm-orange: #ffa07a;
    --light-orange: #ffb899;
    --cream: #fdf6f0;
    --warm-cream: #f9f1e8;
    --light-cream: #ffffff;
    --peach: #ffeee6;
    --soft-beige: #f5ede4;
    --warm-gray: #8a7968;
    --dark-gray: #4a453e;
    --charcoal: #2d2a25;
    --soft-shadow: rgba(255, 107, 53, 0.15);
    --warm-shadow: rgba(255, 107, 53, 0.25);
    --deep-shadow: rgba(45, 42, 37, 0.3);
    --light-shadow: rgba(45, 42, 37, 0.08);
    
    /* Retro Typography */
    --font-system: "Neuton", "Geneva", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, serif;
    --font-mono: "Monaco", "Courier New", monospace;
    --font-classic: "Neuton", "Charcoal", "Chicago", system-ui, serif;
    --font-pixel: "Doto", monospace;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Modern Rounded Corners */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    
    /* Noise texture data URL */
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

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

body {
    font-family: var(--font-system);
    font-size: 14px;
    line-height: 1.5;
    color: var(--charcoal);
    background: 
        radial-gradient(circle at 20% 80%, var(--peach) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--warm-cream) 0%, transparent 50%),
        linear-gradient(135deg, var(--cream) 0%, var(--soft-beige) 100%);
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* kevOS Start Screen */
.kevos-start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        var(--charcoal) 0%, 
        #3d3a35 30%, 
        var(--dark-gray) 60%, 
        var(--warm-gray) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.start-content {
    text-align: center;
    color: var(--cream);
    position: relative;
    z-index: 2; /* Above video background */
    animation: startContentFloat 3s ease-in-out infinite alternate;
}

.start-logo {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 3rem;
}

.logo-ring-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border: 4px solid var(--primary-orange);
    border-radius: 50%;
    background: linear-gradient(135deg, 
        transparent 0%, 
        rgba(255, 107, 53, 0.1) 50%, 
        transparent 100%);
    box-shadow: 
        0 0 30px rgba(255, 107, 53, 0.4),
        inset 0 0 30px rgba(255, 107, 53, 0.1);
    animation: logoStaticGlow 2s ease-in-out infinite alternate;
}

.logo-center-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-classic);
    font-size: 36px;
    font-weight: 700;
    color: var(--cream);
    text-shadow: 0 2px 15px rgba(255, 107, 53, 0.6);
}

.kevos-title-large {
    font-family: var(--font-classic);
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, 
        var(--cream) 0%, 
        var(--light-orange) 50%, 
        var(--primary-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.start-subtitle {
    font-family: var(--font-system);
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--warm-cream);
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.start-description {
    font-family: var(--font-system);
    font-size: 1rem;
    color: var(--warm-cream);
    opacity: 0.7;
    margin-bottom: 3rem;
}

.start-button {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid transparent;
    background-clip: padding-box;
    padding: 1.5rem 3rem;
    font-family: var(--font-system);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
    pointer-events: auto;
    width: 250px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    clip-path: path("M250 37C250 66.2916 223.958 74 125 74C26.0416 74 0 66.2916 0 37C0 7.70834 26.0416 0 125 0C223.958 0 250 7.70834 250 37Z");
}

.start-button:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 0 30px rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.start-button:active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.start-button-text {
    position: relative;
    z-index: 2;
}

.start-button-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.start-button:hover .start-button-glow {
    left: 100%;
}

@keyframes startContentFloat {
    from { transform: translateY(0px); }
    to { transform: translateY(-10px); }
}

@keyframes logoStaticGlow {
    from { 
        box-shadow: 
            0 0 20px rgba(255, 107, 53, 0.3),
            inset 0 0 20px rgba(255, 107, 53, 0.1);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(255, 107, 53, 0.5),
            inset 0 0 30px rgba(255, 107, 53, 0.2);
    }
}

/* Start Screen Video Background */
.start-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.start-video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Allow clicks to pass through */
}

/* kevOS Launch Screen */
.kevos-launch-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: launchFadeIn 0.8s ease-out;
}

/* Launch Screen Video Background */
.launch-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.launch-video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Allow clicks to pass through */
}

.launch-content {
    text-align: center;
    color: var(--cream);
    position: relative;
    z-index: 2; /* Above video background */
    animation: launchContentSlideUp 1.2s ease-out 0.3s both;
}

.launch-logo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    animation: logoGlow 2s ease-in-out infinite alternate;
}

.logo-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 3px solid var(--primary-orange);
    border-radius: 50%;
    background: linear-gradient(135deg, 
        transparent 0%, 
        rgba(255, 107, 53, 0.1) 50%, 
        transparent 100%);
    animation: logoRotate 8s linear infinite;
    box-shadow: 
        0 0 20px rgba(255, 107, 53, 0.3),
        inset 0 0 20px rgba(255, 107, 53, 0.1);
}

.logo-ring::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--primary-orange);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.8);
}

.logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-classic);
    font-size: 28px;
    font-weight: 700;
    color: var(--cream);
    text-shadow: 0 2px 10px rgba(255, 107, 53, 0.5);
    animation: logoLetterSpacing 3s ease-in-out infinite alternate;
}

.kevos-title {
    font-family: var(--font-classic);
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, 
        var(--cream) 0%, 
        var(--light-orange) 50%, 
        var(--primary-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 2.5s ease-in-out infinite alternate;
}

.launch-subtitle {
    font-family: var(--font-system);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--warm-cream);
    opacity: 0.8;
    margin-bottom: 3rem;
    animation: subtitleFade 2s ease-in-out infinite alternate;
}

.launch-progress {
    width: 300px;
    margin: 0 auto;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--primary-orange) 0%, 
        var(--light-orange) 50%, 
        var(--primary-orange) 100%);
    border-radius: 2px;
    width: 0%;
    animation: progressFill 4s ease-in-out forwards;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
}

.launch-status {
    font-family: var(--font-system);
    font-size: 0.9rem;
    color: var(--warm-cream);
    opacity: 0.7;
    animation: statusPulse 2s ease-in-out infinite;
}

/* Launch Animations */
@keyframes launchFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes logoRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes logoGlow {
    from { 
        filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
    }
    to { 
        filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    }
}

@keyframes logoLetterSpacing {
    from { letter-spacing: 0.1em; }
    to { letter-spacing: 0.3em; }
}

@keyframes titleShimmer {
    from { 
        background-position: 0% 50%;
    }
    to { 
        background-position: 100% 50%;
    }
}

@keyframes subtitleFade {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@keyframes progressFill {
    0% { width: 0%; }
    20% { width: 15%; }
    40% { width: 35%; }
    60% { width: 60%; }
    80% { width: 85%; }
    100% { width: 100%; }
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes launchScreenFadeOut {
    from { 
        opacity: 1;
        transform: scale(1);
    }
    to { 
        opacity: 0;
        transform: scale(1.05);
    }
}

/* Subtle ambient glow */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 70%,
        rgba(255, 107, 53, 0.05) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.desktop {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Removed background image to allow WebGL to show through */
}

/* Video Animation Background Layer */
.webgl-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    background: #2a2722; /* Fallback color */
}

/* Ensure the video fills the entire background */
.webgl-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop content with semi-transparent wallpaper overlay */
.desktop-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Add semi-transparent wallpaper as pseudo-element */
.desktop-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/wallpapers/kevOS.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.9; /* 50% opacity for wallpaper only */
    z-index: -1; /* Behind desktop content but above WebGL */
    pointer-events: none;
}

/* Retro Physical Menu Bar */
.taskbar {
    height: 36px;
    background: 
        var(--noise-texture),
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.95) 0%,
            var(--platinum-light) 25%,
            var(--platinum) 75%,
            rgba(184, 179, 173, 0.8) 100%
        );
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid;
    border-bottom-color: rgba(184, 179, 173, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-lg);
    position: relative;
    z-index: 1000;
    box-shadow: 
        0 4px 12px rgba(45, 42, 37, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(184, 179, 173, 0.4);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    font-size: 13px;
    color: var(--charcoal);
}

.logo-icon {
    width: 20px;
    height: 20px;
    background: 
        radial-gradient(circle at 30% 30%, 
            rgba(255, 255, 255, 0.9) 0%,
            var(--primary-orange) 40%,
            var(--soft-orange) 100%
        );
    border-radius: var(--radius-sm);
    box-shadow: 
        0 4px 12px rgba(255, 107, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    position: relative;
}

.logo-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.logo-icon::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    border-radius: 50%;
}

.app-menu {
    display: flex;
    gap: var(--space-sm);
}

.menu-item {
    background: 
        linear-gradient(145deg, 
            rgba(255, 255, 255, 0.6) 0%,
            rgba(253, 246, 240, 0.4) 50%,
            rgba(245, 237, 228, 0.3) 100%
        );
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.7) rgba(184, 179, 173, 0.3) rgba(184, 179, 173, 0.4) rgba(255, 255, 255, 0.5);
    color: var(--charcoal);
    font-size: 12px;
    font-family: var(--font-system);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 2px 4px rgba(45, 42, 37, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(184, 179, 173, 0.3);
    transition: all 0.12s ease-out;
    transform: translateY(0);
}

.menu-item:hover {
    background: 
        linear-gradient(145deg, 
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 184, 140, 0.3) 50%,
            rgba(255, 107, 53, 0.2) 100%
        );
    color: var(--primary-orange);
    transform: translateY(-1px);
    box-shadow: 
        0 3px 6px rgba(45, 42, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(184, 179, 173, 0.2);
}

.menu-item:active {
    background: 
        linear-gradient(145deg, 
            rgba(184, 179, 173, 0.2) 0%,
            rgba(255, 107, 53, 0.3) 50%,
            rgba(255, 255, 255, 0.6) 100%
        );
    border-color: rgba(184, 179, 173, 0.4) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.7) rgba(184, 179, 173, 0.3);
    transform: translateY(1px);
    box-shadow: 
        0 1px 2px rgba(45, 42, 37, 0.3) inset,
        inset 0 -1px 0 rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(184, 179, 173, 0.4);
}

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

.system-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--warm-gray);
}

.time {
    font-variant-numeric: tabular-nums;
}

.battery {
    width: 20px;
    height: 10px;
    border: 1px solid var(--warm-gray);
    border-radius: 2px;
    position: relative;
    background: linear-gradient(90deg, var(--sage-green) 70%, transparent 70%);
}

.battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 2px;
    width: 2px;
    height: 6px;
    background: var(--warm-gray);
    border-radius: 0 1px 1px 0;
}

/* Dropdown Menus */
.menu-item-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: 
        var(--noise-texture),
        linear-gradient(145deg,
            rgba(250, 245, 240, 0.95) 0%,
            var(--warm-cream) 25%,
            var(--cream) 75%,
            rgba(245, 237, 228, 0.95) 100%
        );
    border: 1px solid rgba(184, 179, 173, 0.4);
    border-radius: var(--radius-md);
    box-shadow: 
        0 4px 12px rgba(45, 42, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    padding: 4px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.menu-item-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--charcoal);
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.dropdown-item:hover {
    background: rgba(255, 107, 53, 0.1);
    color: var(--primary-orange);
}

.dropdown-divider {
    height: 1px;
    background: rgba(184, 179, 173, 0.3);
    margin: 4px 0;
}


/* Desktop Icons */
.desktop-icons {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    z-index: 10;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    user-select: none;
    min-width: 80px;
}

.desktop-icon:hover {
    background: rgba(255, 107, 53, 0.1);
    /* Removed transform to keep entire icon static */
}

.desktop-icon:active {
    transform: translateY(0);
    background: rgba(255, 107, 53, 0.2);
}

.desktop-icon-image {
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-xs);
    position: relative;
    transition: all 0.2s ease;
}

/* =================================
   App Icon Button Component
   ================================= */

/* Base app icon button component */
.app-icon-button {
    position: relative;
    width: 60px;
    height: 60px;
    display: inline-block;
}

/* Shell layer - always visible */
.app-icon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/buttons/App Icon/Shell.png');
    background-size: 100% 100%; /* Fill entire container */
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Default state icon - centered in shell */
.app-icon-button::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    width: 100%;
    height: 100%;
    background-image: url('assets/buttons/App Icon/Default.png');
    background-size: 52px 52px; /* Proper size for default/clicked states */
    background-repeat: no-repeat;
    background-position: center center; /* Ensure absolute centering */
    z-index: 2;
    transition: background-image 0.1s ease;
}

/* Clicked state */
.app-icon-button:active::after,
.app-icon-button.clicked::after {
    background-image: url('assets/buttons/App Icon/Clicked.png');
}

/* Hover effect - only scale the icon content slightly */
.app-icon-button:hover::after {
    background-size: 56px 56px; /* 10% larger than base size */
}

/* Dock size variant - smaller for dock icons */
.app-icon-button.dock-size {
    width: 48px;
    height: 48px;
}

/* Dock size shell and content sizing */
.app-icon-button.dock-size::before {
    background-size: 48px 48px;
}

.app-icon-button.dock-size::after {
    background-size: 48px 48px;
}

/* Dock size hover effect */
.app-icon-button.dock-size:hover::after {
    background-size: 53px 53px; /* 10% larger than dock base size */
}

/* Old desktop icon styles - no longer needed with app-icon-button component */

.desktop-icon-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--charcoal);
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    max-width: 72px;
    line-height: 1.2;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(253, 246, 240, 0.9);
    border: 1px solid rgba(184, 179, 173, 0.3);
    margin-top: 8px;
}

/* Retro Physical Dock */
.dock {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    z-index: 100;  /* Ensure dock is above other elements */
    background: 
        var(--noise-texture),
        linear-gradient(145deg,
            rgba(250, 248, 245, 0.9) 0%,
            var(--platinum-light) 25%,
            var(--platinum) 75%,
            rgba(184, 179, 173, 0.8) 100%
        );
    border: 1px solid rgba(184, 179, 173, 0.5);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 4px 16px rgba(45, 42, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.dock-item {
    width: 48px;
    height: 48px;
    cursor: pointer;
    position: relative;
    /* Removed transition and transform - using app-icon-button component only */
}

/* Dock item hover/active states removed - using app-icon-button component hover only */

/* Old dock-icon styles replaced by app-icon-button component */

/* Finder icon now uses shell design */
.finder-icon {
    position: relative;
    /* Shell inherited from .dock-icon */
}

/* Old finder icon styling disabled */
/* .finder-icon::before styles disabled to use shell */

/* Old finder icon ::after disabled to use shell */

/* Notes icon now uses shell design */
.notes-icon {
    position: relative;
    /* Shell inherited from .dock-icon */
}

/* Old notes icon ::before disabled */

/* Old notes icon ::after disabled */

/* Calc icon now uses shell design */
.calc-icon {
    position: relative;
    /* Shell inherited from .dock-icon */
}

/* Old calc icon ::before disabled */

/* Old calc icon ::after disabled */

/* Settings icon now uses shell design */
.settings-icon {
    position: relative;
    /* Shell inherited from .dock-icon */
}

/* MP3 icon now uses shell design like other app icons */
.mp3-icon {
    position: relative;
    /* Shell and content styling inherited from .desktop-icon-image */
}

/* MP3 dock icon - no emoji, just shell */

.settings-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: 
        conic-gradient(from 0deg, 
            transparent 30deg, rgba(255, 255, 255, 0.6) 45deg,
            transparent 60deg, rgba(255, 255, 255, 0.6) 75deg,
            transparent 90deg, rgba(255, 255, 255, 0.6) 105deg,
            transparent 120deg, rgba(255, 255, 255, 0.6) 135deg,
            transparent 150deg, rgba(255, 255, 255, 0.6) 165deg,
            transparent 180deg, rgba(255, 255, 255, 0.6) 195deg,
            transparent 210deg, rgba(255, 255, 255, 0.6) 225deg,
            transparent 240deg, rgba(255, 255, 255, 0.6) 255deg,
            transparent 270deg, rgba(255, 255, 255, 0.6) 285deg,
            transparent 300deg, rgba(255, 255, 255, 0.6) 315deg,
            transparent 330deg);
    border-radius: 50%;
}

.settings-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--warm-orange);
}

.soundboard-icon {
    /* Disabled old styling to use new shell design */
    /* background: linear-gradient(135deg, var(--soft-orange) 0%, var(--primary-orange) 100%); */
    position: relative;
}

/* Removed conflicting soundboard-icon::before rule to allow shell to show */

/* Old soundboard-icon::after styles moved up to line 826 and disabled there */

/* MP3 player icon now uses shell design like other app icons */
.mp3player-icon {
    position: relative;
    /* Shell and content styling inherited from .desktop-icon-image */
}

/* MP3 player desktop icon - no emoji, just shell */

/* Custom window styling */
.custom-window {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Soundboard Device Styles */
.soundboard-device-standalone {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, 
        #f8f7f5 0%,
        #f2f0ee 15%,
        #eeecea 30%,
        #e8e6e3 50%,
        #e2dfd9 70%,
        #ddd9d5 85%,
        #d6d2ce 100%);
    border-radius: 28px;
    padding: 0;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.soundboard-window-controls {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%,
        rgba(184, 179, 173, 0.1) 100%);
    border-bottom: 1px solid rgba(184, 179, 173, 0.2);
}

.soundboard-control-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.soundboard-close {
    background: linear-gradient(145deg, #b8432a, #892A13, #6b1f0f);
    border: 0.5px solid rgba(137, 42, 19, 0.4);
}

.soundboard-minimize {
    background: linear-gradient(145deg, #e5886f, #CC6D55, #a55641);
    border: 0.5px solid rgba(204, 109, 85, 0.4);
}

.soundboard-maximize {
    background: linear-gradient(145deg, #dc6541, #C54424, #9e351c);
    border: 0.5px solid rgba(197, 68, 36, 0.4);
}

.soundboard-control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

.soundboard-control-btn:active {
    transform: translateY(1px);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.2);
}

.soundboard-close:active {
    background: linear-gradient(145deg, #6b1f0f, #892A13, #b8432a);
}

.soundboard-minimize:active {
    background: linear-gradient(145deg, #a55641, #CC6D55, #e5886f);
}

.soundboard-maximize:active {
    background: linear-gradient(145deg, #9e351c, #C54424, #dc6541);
}

.soundboard-brand {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--warm-gray);
    letter-spacing: 1px;
    opacity: 0.7;
}

.soundboard-controls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%,
        rgba(184, 179, 173, 0.05) 100%);
    border-bottom: 1px solid rgba(184, 179, 173, 0.15);
}

.soundboard-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--charcoal);
    letter-spacing: 1.5px;
}

.soundboard-status-lights {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.power-light.active {
    background: radial-gradient(circle, #4ade80, #22c55e);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.ready-light.active {
    background: radial-gradient(circle, #60a5fa, #3b82f6);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.status-text {
    font-size: 9px;
    font-weight: 600;
    color: var(--warm-gray);
    letter-spacing: 0.5px;
}

.soundboard-volume-section {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 2rem;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(184, 179, 173, 0.05) 100%);
    border-bottom: 1px solid rgba(184, 179, 173, 0.15);
}

/* Shared Volume Knob Styles (used by both MP3 player and soundboard) */
.mp3-volume-knob-large {
    width: 80px;
    height: 80px;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.knob-outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.knob-marking {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 2px;
    height: 8px;
    background: rgba(184, 179, 173, 0.6);
    border-radius: 1px;
    transform-origin: center 36px;
    margin-left: -1px;
}

.mp3-knob-body {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, 
        rgba(250, 245, 240, 0.95) 0%,
        var(--cream) 30%,
        var(--warm-cream) 70%,
        rgba(184, 179, 173, 0.4) 100%);
    box-shadow: 
        4px 4px 12px rgba(184, 179, 173, 0.4),
        -2px -2px 8px rgba(255, 255, 255, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
    transition: all 0.1s ease;
}

.mp3-knob-body:hover {
    box-shadow: 
        4px 4px 14px rgba(184, 179, 173, 0.5),
        -2px -2px 10px rgba(255, 255, 255, 0.7),
        inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.mp3-knob-indicator {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, var(--primary-orange), var(--soft-orange));
    border-radius: 1.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform-origin: center 24px;
    transition: transform 0.15s ease;
}

.mp3-knob-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, 
        rgba(248, 243, 238, 0.95) 0%,
        var(--warm-cream) 50%,
        rgba(184, 179, 173, 0.3) 100%);
    box-shadow: 
        inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px rgba(184, 179, 173, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.knob-texture-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.texture-line {
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(184, 179, 173, 0.4) 50%,
        transparent 100%);
}

.volume-display {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-mono);
    color: var(--warm-gray);
}

.volume-value {
    font-size: 16px;
    font-weight: 600;
}

.volume-unit {
    font-size: 11px;
    opacity: 0.7;
}

.device-btn {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.95) 0%,
        var(--light-cream) 50%,
        rgba(184, 179, 173, 0.3) 100%);
    border: none;
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 
        3px 3px 8px rgba(184, 179, 173, 0.4),
        -2px -2px 6px rgba(255, 255, 255, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.device-btn:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.98) 0%,
        var(--cream) 50%,
        rgba(184, 179, 173, 0.35) 100%);
    transform: translateY(-1px);
}

.device-btn:active {
    box-shadow: 
        inset 2px 2px 4px rgba(184, 179, 173, 0.5),
        inset -1px -1px 3px rgba(255, 255, 255, 0.3);
    transform: translateY(1px);
}

.btn-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--warm-gray);
    letter-spacing: 0.5px;
}

.soundboard-grid-section {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.soundboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    height: 100%;
}

.loading-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--warm-gray);
    text-align: center;
    padding: 2rem;
}

.loading-icon {
    font-size: 48px;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.loading-text {
    font-size: 14px;
    margin-bottom: 0.5rem;
}

.loading-subtext {
    font-size: 11px;
    opacity: 0.7;
}

.sound-button {
    aspect-ratio: 1;
    border: none;
    border-radius: 12px;
    background: linear-gradient(145deg, 
        #f2f1ef 0%,
        #eeecea 30%,
        #e8e6e3 70%,
        #ddd9d5 100%);
    cursor: pointer;
    transition: all 0.15s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--charcoal);
    text-align: center;
    padding: 0.75rem;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.5),
        inset -1px 0 0 rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.12);
    position: relative;
}

.sound-button:hover {
    background: linear-gradient(145deg, 
        #f5f4f2 0%,
        #f0efec 30%,
        #ebe9e6 70%,
        #e2dfd9 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        inset 1px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px 0 0 rgba(0, 0, 0, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.18),
        0 2px 3px rgba(0, 0, 0, 0.12);
    transform: translateY(-0.5px);
}

.sound-button:active {
    background: linear-gradient(145deg, 
        #ddd9d5 0%,
        #e2dfd9 30%,
        #e8e6e3 70%,
        #eeecea 100%);
    transform: translateY(1px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 2px 0 4px rgba(0, 0, 0, 0.1),
        inset -2px 0 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.sound-button .icon {
    font-size: 24px;
    margin-bottom: 0.5rem;
    line-height: 1;
}

/* Soundboard Window Positioning */
.soundboard-window {
    position: fixed !important;
    top: 80px !important;
    right: 40px !important;
    transform: none !important;
}

/* Modern Windows Container */
.windows-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-xl);
}

.window {
    position: absolute;
    width: 480px;
    height: 320px;
    border: none;
    border-radius: 28px;
    background: transparent;
    animation: windowAppear 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#welcome-window {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hidden initially */
}

#welcome-window .app-window-content p {
    margin-bottom: 2rem;
}

@keyframes windowAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.window.show {
    opacity: 1;
}

.window-header {
    display: none; /* Hide old window headers in favor of new app-window-header */
}

.window-controls {
    display: none; /* Hide old window controls in favor of new app-control-btn */
}

/* Hide minimize and maximize buttons in soundboard window */
.soundboard-window .control-btn.minimize,
.soundboard-window .control-btn.maximize {
    display: none;
}

/* Adjust window header for larger button */
.soundboard-window .window-header {
    padding: 8px 16px;
}

/* Sophisticated Multi-Layer Close Button - Based on Figma Design Reference */
/* Sophisticated close button matching Figma design */
.control-btn {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    margin-right: 0;
    padding: 0;
    background: 
        linear-gradient(145deg, #f4f2f0 0%, #e6e0d8 25%, #d0c6ba 50%, #b8aa9c 75%, #9d8d7f 100%);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove the old pseudo-elements that were causing conflicts */
.control-btn.close::before {
    display: none;
}

.control-btn.close::after {
    display: none;
}

/* Recessed middle layer */
.control-btn.close .center-button {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: 
        linear-gradient(145deg, #f8f6f4 0%, #ece8e2 25%, #ddd5cb 50%, #ccc0b2 75%, #b8a898 100%);
    border: 2px solid #3a332b;
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(255, 255, 255, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    pointer-events: none;
}

.control-btn.close .center-button::before {
    display: none;
}

/* Inner orange/red button */
.control-btn.close .center-button::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: 
        linear-gradient(145deg, #b8432a 0%, #892A13 25%, #6b1f0f 50%, #5a1a0c 75%, #4a150a 100%);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.control-btn.close .center-button .texture-lines {
    display: none;
}

/* Hover State Enhancements */
.control-btn.close:hover::before {
    background: linear-gradient(
        145deg,
        rgba(70, 70, 70, 0.35) 0%,
        rgba(50, 50, 50, 0.45) 30%,
        rgba(30, 30, 30, 0.55) 70%,
        rgba(10, 10, 10, 0.65) 100%
    );
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.control-btn.close:hover::after {
    background: linear-gradient(
        145deg,
        rgba(190, 180, 170, 0.98) 0%,
        rgba(170, 160, 150, 0.95) 15%,
        rgba(130, 120, 110, 0.9) 35%,
        rgba(90, 80, 70, 0.95) 65%,
        rgba(150, 140, 130, 0.9) 85%,
        rgba(210, 200, 190, 0.95) 100%
    );
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 3px 0 4px rgba(255, 255, 255, 0.4),
        inset -3px 0 4px rgba(0, 0, 0, 0.2);
}

.control-btn.close:hover .center-button {
    background: linear-gradient(
        145deg,
        rgba(255, 253, 250, 1) 0%,
        rgba(248, 243, 238, 0.98) 20%,
        rgba(228, 223, 218, 0.95) 50%,
        rgba(208, 203, 198, 0.9) 80%,
        rgba(243, 238, 233, 0.95) 100%
    );
    box-shadow: 
        inset 0 4px 10px rgba(0, 0, 0, 0.2),
        inset 0 -2px 6px rgba(255, 255, 255, 0.7),
        inset 4px 0 8px rgba(0, 0, 0, 0.15),
        inset -4px 0 8px rgba(255, 255, 255, 0.4);
}

.control-btn.close:hover .center-button::after {
    background: linear-gradient(
        145deg,
        rgba(255, 150, 110, 0.98) 0%,
        rgba(245, 125, 85, 0.95) 20%,
        rgba(225, 105, 65, 0.9) 40%,
        rgba(205, 85, 55, 0.95) 60%,
        rgba(185, 70, 45, 0.9) 80%,
        rgba(230, 110, 70, 0.95) 100%
    );
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(140, 50, 30, 0.5),
        inset 0 3px 6px rgba(255, 190, 150, 0.7),
        inset 0 -2px 4px rgba(130, 45, 30, 0.6),
        inset 3px 0 4px rgba(255, 170, 130, 0.5),
        inset -3px 0 4px rgba(150, 55, 35, 0.4);
    transform: scale(1.05);
}

/* Active State */
.control-btn.close:active {
    transform: scale(0.96);
}

.control-btn.close:active::before {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.5);
}

.control-btn.close:active::after {
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.4),
        inset 3px 0 6px rgba(0, 0, 0, 0.25),
        inset -3px 0 6px rgba(255, 255, 255, 0.2);
}

.control-btn.close:active .center-button::after {
    transform: scale(0.9);
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 -1px 3px rgba(255, 255, 255, 0.3),
        inset 3px 0 6px rgba(0, 0, 0, 0.4),
        inset -3px 0 6px rgba(255, 255, 255, 0.2);
}

/* Minimize button styles */
.control-btn.minimize .center-button {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: 
        linear-gradient(145deg, #f8f6f4 0%, #ece8e2 25%, #ddd5cb 50%, #ccc0b2 75%, #b8a898 100%);
    border: 2px solid #3a332b;
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(255, 255, 255, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    pointer-events: none;
}

.control-btn.minimize .center-button::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: 
        linear-gradient(145deg, #e5886f 0%, #CC6D55 25%, #a55641 50%, #944c37 75%, #83422d 100%);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Maximize button styles */
.control-btn.maximize .center-button {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: 
        linear-gradient(145deg, #f8f6f4 0%, #ece8e2 25%, #ddd5cb 50%, #ccc0b2 75%, #b8a898 100%);
    border: 2px solid #3a332b;
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(255, 255, 255, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    pointer-events: none;
}

.control-btn.maximize .center-button::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: 
        linear-gradient(145deg, #dc6541 0%, #C54424 25%, #9e351c 50%, #8d2e18 75%, #7c2614 100%);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Reusable App Window Components */
.app-window-container {
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top left, #faf9f7 0%, transparent 50%),
        radial-gradient(ellipse at top right, #f5f4f2 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, #f0efec 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, #ebe9e6 0%, transparent 50%),
        linear-gradient(135deg, #eeecea 0%, #e6e4e1 25%, #e0ddd9 50%, #dbd8d4 75%, #d6d2ce 100%);
    border-radius: 28px;
    padding: 0;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-window-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.4) 0%, 
            rgba(238, 236, 234, 0.2) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.app-brand {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--warm-gray);
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
}

.app-window-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background: transparent;
}

.drag-grip {
    margin-left: 8px;
    color: var(--warm-gray);
    opacity: 0.3;
    font-size: 14px;
    letter-spacing: -2px;
    user-select: none;
    cursor: grab;
}

.drag-grip:active {
    cursor: grabbing;
}

/* MP3 Player Styles (using reusable components) */
.mp3-player-standalone {
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top left, #faf9f7 0%, transparent 50%),
        radial-gradient(ellipse at top right, #f5f4f2 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, #f0efec 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, #ebe9e6 0%, transparent 50%),
        linear-gradient(135deg, #eeecea 0%, #e6e4e1 25%, #e0ddd9 50%, #dbd8d4 75%, #d6d2ce 100%);
    border-radius: 28px;
    padding: 0;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* MP3 Window Controls - Now using app-window-header */

/* Reusable App Window Control Buttons */
.app-control-btn {
    width: 14px;
    height: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    /* Perfect squircle shape matching Figma design */
    border-radius: 35%;
    /* Enhanced skeuomorphic shadows */
    box-shadow: 
        0 0 0 0.5px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.3),
        inset -1px 0 0 rgba(0, 0, 0, 0.05);
}

.app-control-btn.close {
    background: 
        radial-gradient(ellipse at 30% 30%, #d4967a 0%, transparent 70%),
        radial-gradient(ellipse at 70% 70%, #5a1a0c 0%, transparent 70%),
        linear-gradient(145deg, #b8432a 0%, #892A13 50%, #6b1f0f 100%);
}

.app-control-btn.minimize {
    background: 
        radial-gradient(ellipse at 30% 30%, #f2a085 0%, transparent 70%),
        radial-gradient(ellipse at 70% 70%, #83422d 0%, transparent 70%),
        linear-gradient(145deg, #e5886f 0%, #CC6D55 50%, #a55641 100%);
}

.app-control-btn.maximize {
    background: 
        radial-gradient(ellipse at 30% 30%, #e87a58 0%, transparent 70%),
        radial-gradient(ellipse at 70% 70%, #7c2614 0%, transparent 70%),
        linear-gradient(145deg, #dc6541 0%, #C54424 50%, #9e351c 100%);
}

.app-control-btn:hover {
    transform: translateY(-0.5px);
    box-shadow: 
        0 0 0 0.5px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset -1px 0 0 rgba(0, 0, 0, 0.06);
}

.app-control-btn:active {
    transform: translateY(0.5px);
    box-shadow: 
        0 0 0 0.5px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        inset 2px 0 3px rgba(0, 0, 0, 0.2),
        inset -2px 0 3px rgba(0, 0, 0, 0.2),
        inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

/* MP3 Player Control Buttons - Now using app-control-btn */

/* Generic hover/active states for other control buttons (not used in soundboard) */
.control-btn:not(.close):hover {
    opacity: 0.8;
}

.control-btn:not(.close):active {
    opacity: 0.6;
}



.window-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    font-size: 14px;
    color: var(--charcoal);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.window-title::before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--primary-orange);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Specific window title icons */
.window[id*="finder"] .window-title::before {
    background: 
        linear-gradient(135deg, var(--soft-orange) 0%, var(--primary-orange) 100%);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window[id*="notes"] .window-title::before {
    background: var(--peach);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 2 2h8l6-6V4c0-1.1-.9-2-2-2zm4 18l-6 6V14h6v6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window[id*="calculator"] .window-title::before {
    background: var(--dark-gray);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-2h2v2zm0-4H7v-2h2v2zm0-4H7V7h2v2zm4 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2zm4 8h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window[id*="settings"] .window-title::before {
    background: var(--warm-orange);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window[id*="welcome"] .window-title::before {
    background: 
        radial-gradient(circle at 30% 30%, 
            rgba(255, 255, 255, 0.9) 0%,
            var(--primary-orange) 40%,
            var(--soft-orange) 100%);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window[id*="tour"] .window-title::before {
    background: 
        linear-gradient(45deg, var(--primary-orange), var(--light-orange), var(--warm-orange), var(--soft-orange));
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2l3.09,6.26L22,9.27l-5,4.87L18.18,22L12,18.77L5.82,22L7,14.14L2,9.27l6.91-1.01L12,2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.window-content {
    padding: var(--space-xl);
    height: calc(100% - 36px);
    overflow-y: auto;
}

.window-content h2 {
    font-size: 24px;
    font-weight: 300;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.window-content p {
    color: var(--warm-gray);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

/* Retro Physical Buttons */
.soft-button {
    background: 
        linear-gradient(145deg, 
            rgba(255, 255, 255, 0.9) 0%,
            var(--warm-cream) 25%,
            var(--cream) 75%,
            rgba(184, 179, 173, 0.3) 100%
        );
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.8) rgba(184, 179, 173, 0.6) rgba(184, 179, 173, 0.8) rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-family: var(--font-system);
    font-size: 13px;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    box-shadow: 
        /* Outer shadow for depth */
        0 6px 12px rgba(45, 42, 37, 0.3),
        /* Inner highlights */
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(184, 179, 173, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.7),
        inset -1px 0 0 rgba(184, 179, 173, 0.3);
    transition: all 0.15s ease-out;
    position: relative;
    transform: translateY(0);
}

.soft-button:hover {
    background: 
        linear-gradient(145deg, 
            rgba(255, 255, 255, 1) 0%,
            var(--light-cream) 25%,
            var(--warm-cream) 75%,
            rgba(184, 179, 173, 0.2) 100%
        );
    transform: translateY(-1px);
    box-shadow: 
        0 8px 16px rgba(45, 42, 37, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(184, 179, 173, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.8),
        inset -1px 0 0 rgba(184, 179, 173, 0.3);
}

.soft-button:active {
    background: 
        linear-gradient(145deg, 
            rgba(184, 179, 173, 0.2) 0%,
            var(--cream) 25%,
            var(--warm-cream) 75%,
            rgba(255, 255, 255, 0.8) 100%
        );
    border-color: rgba(184, 179, 173, 0.8) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.8) rgba(184, 179, 173, 0.6);
    transform: translateY(2px);
    box-shadow: 
        /* Pressed down shadow */
        0 2px 4px rgba(45, 42, 37, 0.4) inset,
        /* Inverted highlights */
        inset 0 -1px 0 rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(184, 179, 173, 0.5),
        inset -1px 0 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(184, 179, 173, 0.4);
}

.soft-button.primary {
    background: 
        linear-gradient(145deg, 
            rgba(255, 200, 150, 0.9) 0%,
            var(--soft-orange) 25%,
            var(--primary-orange) 75%,
            rgba(200, 80, 40, 0.8) 100%
        );
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 200, 150, 0.8) rgba(200, 80, 40, 0.8) rgba(200, 80, 40, 0.9) rgba(255, 200, 150, 0.6);
    box-shadow: 
        0 6px 12px rgba(255, 107, 53, 0.4),
        inset 0 1px 0 rgba(255, 200, 150, 0.8),
        inset 0 -1px 0 rgba(200, 80, 40, 0.6),
        inset 1px 0 0 rgba(255, 200, 150, 0.6),
        inset -1px 0 0 rgba(200, 80, 40, 0.5);
}

.soft-button.primary:hover {
    background: 
        linear-gradient(145deg, 
            rgba(255, 220, 180, 0.95) 0%,
            var(--light-orange) 25%,
            var(--soft-orange) 75%,
            rgba(200, 80, 40, 0.7) 100%
        );
    box-shadow: 
        0 8px 16px rgba(255, 107, 53, 0.5),
        inset 0 1px 0 rgba(255, 220, 180, 0.9),
        inset 0 -1px 0 rgba(200, 80, 40, 0.6),
        inset 1px 0 0 rgba(255, 220, 180, 0.7),
        inset -1px 0 0 rgba(200, 80, 40, 0.5);
}

.soft-button.primary:active {
    background: 
        linear-gradient(145deg, 
            rgba(200, 80, 40, 0.6) 0%,
            var(--primary-orange) 25%,
            var(--soft-orange) 75%,
            rgba(255, 200, 150, 0.7) 100%
        );
    border-color: rgba(200, 80, 40, 0.9) rgba(255, 200, 150, 0.6) rgba(255, 200, 150, 0.8) rgba(200, 80, 40, 0.7);
    box-shadow: 
        0 2px 4px rgba(200, 80, 40, 0.5) inset,
        inset 0 -1px 0 rgba(255, 200, 150, 0.5),
        inset 0 1px 0 rgba(200, 80, 40, 0.7),
        inset -1px 0 0 rgba(255, 200, 150, 0.4),
        inset 1px 0 0 rgba(200, 80, 40, 0.6);
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--warm-gray);
    border-radius: 4px;
    opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--charcoal);
    opacity: 0.7;
}

/* Physical Volume Knob Control */
.volume-knob {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 35% 35%,
            #ffffff 0%,
            #f8f7f5 15%,
            #eeecea 30%,
            #e5e3e0 50%,
            #d8d5d1 70%,
            #c7c3be 85%,
            #b5b0aa 100%
        );
    border: none;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 8px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-out;
}

.volume-knob::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5px;
    height: 9px;
    background: linear-gradient(180deg, #666 0%, #333 100%);
    border-radius: 1.5px;
    box-shadow: 
        0 0 0 0.5px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

.volume-knob:hover {
    background: 
        radial-gradient(circle at 35% 35%,
            #ffffff 0%,
            #fafaf9 15%,
            #f0efec 30%,
            #e7e5e2 50%,
            #dbd8d4 70%,
            #cac6c1 85%,
            #b8b3ad 100%
        );
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 5px 10px rgba(0, 0, 0, 0.3),
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 3px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.5px);
}

.volume-knob:active {
    background: 
        radial-gradient(circle at 35% 35%,
            #e8e6e3 0%,
            #e0ddd9 15%,
            #d8d5d1 30%,
            #d0ccc7 50%,
            #c5c1bb 70%,
            #b7b2ac 85%,
            #a8a39d 100%
        );
    transform: translateY(1px);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Physical Toggle Switch */
.toggle-switch {
    width: 40px;
    height: 20px;
    background: 
        linear-gradient(145deg,
            rgba(138, 121, 104, 0.8) 0%,
            rgba(74, 70, 66, 0.9) 100%
        );
    border: 2px solid;
    border-color: rgba(138, 121, 104, 0.6) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.6) rgba(138, 121, 104, 0.4);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-out;
    box-shadow: 
        0 2px 4px rgba(45, 42, 37, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(138, 121, 104, 0.6);
}

.toggle-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: 
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.95) 0%,
            var(--platinum-light) 40%,
            var(--platinum) 100%
        );
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.8) rgba(138, 121, 104, 0.5) rgba(138, 121, 104, 0.6) rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: all 0.2s ease-out;
    box-shadow: 
        0 2px 4px rgba(45, 42, 37, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.toggle-switch.active::before {
    transform: translateX(18px);
    background: 
        radial-gradient(circle at 30% 30%,
            rgba(255, 200, 150, 0.95) 0%,
            var(--soft-orange) 40%,
            var(--primary-orange) 100%
        );
}

.toggle-switch:active::before {
    transform: scale(0.95);
    box-shadow: 
        0 1px 2px rgba(45, 42, 37, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(138, 121, 104, 0.4);
}

/* ===== EQUALIZER STYLES ===== */

.eq-content {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        var(--noise-texture);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.eq-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
    border: 2px inset #333;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.eq-brand {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    letter-spacing: 2px;
}

.eq-led-indicator {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ff4444, #cc0000);
    border-radius: 50%;
    box-shadow: 
        0 0 8px #ff4444,
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

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

.eq-bands {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin: 20px 0;
    padding: 20px 10px;
    background: linear-gradient(145deg, #333, #222);
    border-radius: 8px;
    border: 1px inset #444;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.freq-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #ccc;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 4px;
}

.eq-slider-container {
    position: relative;
    width: 24px;
    height: 180px;
    background: linear-gradient(0deg, #1a1a1a, #2a2a2a);
    border: 2px inset #333;
    border-radius: 12px;
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.eq-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    width: 180px;
    height: 20px;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    -webkit-appearance: none;
    appearance: none;
}

.eq-slider-track {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 164px;
    background: linear-gradient(0deg, #ff6b35, #ffb899, #ff6b35);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.eq-slider-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 16px;
    background: linear-gradient(145deg, #e0e0e0, #b0b0b0);
    border: 1px solid #888;
    border-radius: 4px;
    cursor: grab;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
    top: 82px; /* Center position */
}

.eq-slider:active + .eq-slider-track + .eq-slider-handle {
    cursor: grabbing;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.freq-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #00ff00;
    text-shadow: 0 0 4px #00ff00;
    font-weight: bold;
    margin-top: 8px;
    min-width: 32px;
    text-align: center;
}

.eq-controls {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 8px;
    border: 1px inset #333;
}

.eq-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.eq-control-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #ccc;
    font-weight: bold;
    text-transform: uppercase;
}

.effect-slider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #333, #555);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.effect-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: linear-gradient(145deg, #e0e0e0, #b0b0b0);
    border: 1px solid #888;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.eq-control-value {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #00ff00;
    text-shadow: 0 0 4px #00ff00;
    min-width: 28px;
    text-align: center;
}

.eq-presets {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
}

.eq-preset-btn {
    flex: 1;
    padding: 8px 12px;
    background: linear-gradient(145deg, #333, #222);
    border: 1px solid #444;
    border-radius: 6px;
    color: #ccc;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.eq-preset-btn:hover {
    background: linear-gradient(145deg, #444, #333);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.eq-preset-btn.active {
    background: linear-gradient(145deg, #ff6b35, #e55a2b);
    color: white;
    border-color: #ff6b35;
    box-shadow: 
        0 0 8px rgba(255, 107, 53, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.eq-preset-btn:active {
    transform: translateY(1px);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* ===== TERMINAL WINDOW STYLES ===== */

.terminal-window {
    width: 600px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: terminalAppear 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes terminalAppear {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-controls {
    display: flex;
    gap: 8px;
}

.terminal-control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.terminal-control.close {
    background: linear-gradient(145deg, #ff5f56, #ff3b30);
}

.terminal-control.minimize {
    background: linear-gradient(145deg, #ffbd2e, #ff9500);
}

.terminal-control.maximize {
    background: linear-gradient(145deg, #27ca3f, #28cd41);
}

.terminal-title {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}

.terminal-content {
    padding: 0;
    height: calc(100% - 36px);
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.terminal-output {
    font-family: var(--font-pixel);
    font-size: 14px;
    line-height: 1.4;
    color: white;
    white-space: pre-wrap;
    word-wrap: break-word;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 40px 10px;
    box-sizing: border-box;
}

.terminal-cursor {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: white;
    animation: cursorBlink 1s infinite;
    display: inline;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===== DESKTOP TIME DISPLAY ===== */

.desktop-time-display {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    text-align: right;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 16px rgba(45, 42, 37, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.desktop-date {
    font-family: var(--font-pixel);
    font-size: 12px;
    font-weight: 400;
    color: var(--warm-gray);
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(45, 42, 37, 0.3);
}

.desktop-time {
    font-family: var(--font-pixel);
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-orange);
    text-shadow: 0 1px 2px rgba(45, 42, 37, 0.3);
    letter-spacing: 1px;
}

/* ===== TASK CHECKLIST STYLES ===== */

.task-checklist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 237, 228, 0.9));
    border: 2px solid;
    border-color: rgba(184, 179, 173, 0.4) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.8) rgba(184, 179, 173, 0.6);
    border-radius: 12px;
    box-shadow: 
        0 2px 8px rgba(45, 42, 37, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(184, 179, 173, 0.3);
    transition: all 0.3s ease;
}

.task-item:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(45, 42, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(184, 179, 173, 0.4);
}

.task-item.completed {
    background: linear-gradient(145deg, rgba(255, 235, 220, 0.95), rgba(255, 184, 153, 0.8));
    border-color: rgba(255, 107, 53, 0.4) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.8) rgba(255, 107, 53, 0.6);
}

.task-checkbox {
    position: relative;
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 235, 230, 0.8));
    border: 2px solid;
    border-color: rgba(138, 121, 104, 0.6) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.6) rgba(138, 121, 104, 0.4);
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        inset 0 2px 4px rgba(45, 42, 37, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.5);
}

.task-checkbox:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 245, 240, 0.9));
    border-color: rgba(255, 107, 53, 0.4) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.8) rgba(255, 107, 53, 0.6);
}

.checkbox-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 8px;
    border: 2px solid var(--primary-orange);
    border-top: none;
    border-right: none;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
}

.task-item.completed .checkbox-mark {
    transform: translate(-50%, -60%) rotate(-45deg) scale(1);
    opacity: 1;
}

.task-item.completed .task-checkbox {
    background: linear-gradient(145deg, rgba(255, 200, 150, 0.9), rgba(255, 107, 53, 0.7));
    border-color: rgba(255, 107, 53, 0.8) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.6) rgba(255, 107, 53, 0.4);
    box-shadow: 
        inset 0 2px 4px rgba(255, 107, 53, 0.3),
        0 0 8px rgba(255, 107, 53, 0.2);
}

.task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-title {
    font-family: var(--font-system);
    font-size: 15px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
}

.task-description {
    font-family: var(--font-system);
    font-size: 13px;
    color: var(--warm-gray);
    line-height: 1.4;
    opacity: 0.85;
}

.task-item.completed .task-title {
    color: var(--primary-orange);
}

.task-item.completed .task-description {
    color: rgba(255, 107, 53, 0.7);
}

/* ===== ACHIEVEMENT POPUP STYLES ===== */

.achievement-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 235, 220, 0.9));
    border: 2px solid;
    border-color: rgba(255, 107, 53, 0.4) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.8) rgba(255, 107, 53, 0.6);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 
        0 8px 32px rgba(45, 42, 37, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 107, 53, 0.2);
    transform: translateX(320px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10000;
    cursor: pointer;
}

.achievement-popup.show {
    transform: translateX(0);
}

.achievement-popup.hide {
    transform: translateX(320px);
    opacity: 0;
}

.achievement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.achievement-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(145deg, var(--primary-orange), var(--soft-orange));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 
        0 2px 8px rgba(255, 107, 53, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.achievement-title {
    font-family: var(--font-system);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-orange);
    margin: 0;
}

.achievement-subtitle {
    font-family: var(--font-system);
    font-size: 11px;
    font-weight: 500;
    color: var(--warm-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.achievement-description {
    font-family: var(--font-system);
    font-size: 13px;
    color: var(--charcoal);
    line-height: 1.4;
    margin: 0;
}