/* System-wide base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: #C0C0C0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAA+UlEQVQ4y2NgGAXDFmzatMmKAQ38//9fgAHxX4IB+UxiYOQyZBOQyvD/538GBob/LLQwYQoGZgYmBmZGJiYGFmZmBhYWFgZWVlYGNjY2BnZ2dgYODg4GTk5OBi4uLgZubm4GHh4eBl5eXgY+Pj4Gfn5+BgEBAQZBQUEGISEhBmFhYQYREREGUVFRBjExMQZxcXEGCQkJCEhKSjJISUkxSEtLM8jIyDDIysoyyMnJMWhpaTFoa2sz6OrqMujp6THo6+szGBgYMBgaGjIYGRkxGBsbM5iYmDCYmZkxmJubM5ibmzNYWFgwWFpaMlhZWTFYW1sz2NjYMNja2jLY2dkx2NvbMzg4OAAA8JwhQln3XtUAAAAASUVORK5CYII=') repeat;
    font-family: 'Chicago', 'Geneva', sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    touch-action: none;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
    cursor: url('data:image/x-icon;base64,AAACAAEAICACAAAAAwEwAQAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA='), auto;
}
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .menu-bar {
        height: 24px !important;
        font-size: 12px !important;
    }
    .dock {
        height: 60px !important;
        padding: 6px 10px !important;
    }
    .dock-item {
        width: 48px !important;
        height: 48px !important;
    }
    .app-window {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
    }
}
.app-window {
    min-width: 300px;
    min-height: 200px;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: rgba(30,30,30,0.8);
    backdrop-filter: blur(10px);
}

.app-window[active] {
    border: 1px solid #555;
    background: rgba(40,40,40,0.95);
}
.dock-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: saturate(0.8);
}

.dock-item:hover {
    transform: scale(1.2) translateY(-10px);
    filter: saturate(1.2) brightness(1.1);
}
/* Adjust desktop icons */
.flex.flex-col.items-center.text-center.w-20.cursor-pointer {
    margin: 8px;
}

.flex.flex-col.items-center.text-center.w-20.cursor-pointer div {
    width: 48px;
    height: 48px;
}

/* Desktop icon hover effect */
.flex.flex-col.items-center.text-center.w-20.cursor-pointer:hover {
    background: rgba(45, 75, 171, 0.2);
    border-radius: 4px;
}
/* Window content styling */
.app-window > div {
    padding: 4px;
}

/* Ensure proper z-indexing for windows */
.app-window {
    z-index: 1;
    position: absolute;
}

.app-window[active] {
    z-index: 2;
}