:root {
    --color-close-hover: #ff4d4d;
    --color-minimize-hover: #ffc700;
    --color-maximize-hover: #00ff87;
    --theme-primary: #00ffff;
    --theme-secondary: #0099ff;
    --bg-dark: #0d111b;
}

.window-buttons {
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;
    gap: 12px;
    perspective: 500px;
    margin-left: auto;
  }

.window-buttons button {
    position: relative;
    background: transparent;
    border: none;
    outline: none;
    
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    
    border-radius: 14px;
    transform-style: preserve-3d;
    transition: 
        all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.3s ease;
    
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.05);
    
    backdrop-filter: blur(15px) saturate(200%);
    background: 
        linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0.05), 
            rgba(255, 255, 255, 0.02)
        );
    
    border: 1px solid transparent;
    border-image: 
        linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0.1), 
            rgba(255, 255, 255, 0.02)
        ) 1;
    
    overflow: hidden;
}

.window-buttons button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(
            circle at center, 
            rgba(var(--theme-primary-rgb, 0, 255, 255), 0.1) 0%, 
            transparent 70%
        );
    opacity: 0;
    transition: opacity 0.4s ease;
    transform: rotate(0deg);
    pointer-events: none;
}

.window-buttons button:hover {
    transform: 
        scale(1.1) 
        rotateX(10deg) 
        rotateY(-10deg) 
        translateZ(20px);
    
    color: white;
    
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 5px 15px rgba(var(--theme-primary-rgb, 0, 255, 255), 0.2);
    
    border-image: 
        linear-gradient(
            135deg, 
            rgba(var(--theme-primary-rgb, 0, 255, 255), 0.5), 
            rgba(var(--theme-secondary-rgb, 0, 153, 255), 0.5)
        ) 1;
}

.window-buttons button:hover::before {
    opacity: 1;
    transform: rotate(180deg);
}

.window-buttons button:active {
    transform: 
        scale(0.95) 
        rotateX(5deg) 
        rotateY(-5deg) 
        translateZ(10px);
    
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
    
    background: 
        linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0.1), 
            rgba(255, 255, 255, 0.05)
        );
}

#close:hover {
    background: color-mix(in srgb, var(--color-close-hover) 15%, transparent);
    color: var(--color-close-hover);
    box-shadow: 
        0 0 25px rgba(255, 77, 77, 0.4),
        inset 0 0 0 1px rgba(255, 77, 77, 0.3);
}

#minimize:hover {
    background: color-mix(in srgb, var(--color-minimize-hover) 15%, transparent);
    color: var(--color-minimize-hover);
    box-shadow: 
        0 0 25px rgba(255, 199, 0, 0.4),
        inset 0 0 0 1px rgba(255, 199, 0, 0.3);
}

#maximize:hover {
    background: color-mix(in srgb, var(--color-maximize-hover) 15%, transparent);
    color: var(--color-maximize-hover);
    box-shadow: 
        0 0 25px rgba(0, 255, 135, 0.4),
        inset 0 0 0 1px rgba(0, 255, 135, 0.3);
}

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

.window-buttons button::after {
    content: '✦';
    position: absolute;
    color: rgba(var(--theme-primary-rgb, 0, 255, 255), 0.5);
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
}

.window-buttons button:hover::after {
    animation: sparkle 0.6s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--delay, 0));
}

@property --theme-primary-rgb {
    syntax: '<color>';
    inherits: false;
    initial-value: 0, 255, 255;
}

@property --theme-secondary-rgb {
    syntax: '<color>';
    inherits: false;
    initial-value: 0, 153, 255;
}

@media (max-width: 600px) {
    .window-buttons {
        gap: 8px;
    }
    
    .window-buttons button {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}