:root {
    --xp-blue: linear-gradient(to bottom, #0058e6 0%, #3a83ff 100%);
    --xp-silver: #ece9d8;
    --vapor-pink: #ff71ce;
    --vapor-teal: #01cdfe;
    --desktop-bg: linear-gradient(135deg, #74b9ff, #a29bfe, #fab1a0);
}

body, html { margin: 0; padding: 0; height: 100%; font-family: "Tahoma", sans-serif; overflow: hidden; }

.scanlines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.05) 50%);
    background-size: 100% 4px; pointer-events: none; z-index: 9999;
}

.desktop { background: var(--desktop-bg); height: calc(100vh - 40px); padding: 30px; position: relative; }
.desktop-icons { display: flex; flex-direction: column; gap: 20px; flex-wrap: wrap; height: 100%; width: 100px; }
.icon { text-align: center; width: 85px; color: white; text-shadow: 1px 1px 2px black; font-size: 0.75rem; cursor: pointer; }
.icon-img { font-size: 2.2rem; margin-bottom: 5px; }

/* Overlays */
.full-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.shutdown-overlay { background: black; }

/* Retro Shutdown Text */
.shutdown-text { 
    color: #cc6600; 
    font-family: "Courier New", Courier, monospace; 
    font-size: 3rem; 
    text-align: center;
    max-width: 80%;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: -1px;
}

.lock-overlay { background: var(--desktop-bg); backdrop-filter: grayscale(1); }
.lock-window { width: 300px; border: 3px solid #0058e6; background: var(--xp-silver); }

/* WinBox Theme Overrides */
.winbox.xp-theme { background: var(--xp-blue); border: 3px solid #0058e6; border-radius: 8px 8px 0 0; }
.window-body { padding: 15px; background: white; height: 100%; box-sizing: border-box; overflow-y: auto; }
.vapor-text { font-size: 2rem; color: var(--vapor-pink); text-shadow: 2px 2px var(--vapor-teal); font-weight: 900; }

/* List Styles */
.app-list { list-style: none; padding: 0; }
.app-list li { margin-bottom: 8px; font-size: 0.9rem; }
.app-list a { color: #0058e6; text-decoration: none; font-weight: bold; }
.app-list a:hover { text-decoration: underline; }

/* Start Menu */
.start-menu-container {
    position: fixed; bottom: 40px; left: 0; width: 380px; background: #fff;
    border: 2px solid #245edb; border-top-right-radius: 8px; display: none; z-index: 2000; flex-direction: column;
}
.start-menu-header { background: linear-gradient(to bottom, #1941a5, #245edb); padding: 10px; color: white; display: flex; align-items: center; gap: 10px; }
.user-icon { font-size: 1.8rem; border: 2px solid #fff; border-radius: 4px; padding: 2px; }
.start-menu-body { display: flex; border-top: 1px solid #3a83ff; }
.start-pane-left { width: 55%; padding: 5px; background: white; }
.start-pane-right { width: 45%; padding: 5px; background: #d3e5fa; border-left: 1px solid #3a83ff; }

.menu-item { display: flex; align-items: center; padding: 6px 10px; text-decoration: none; color: #333; font-size: 0.8rem; cursor: pointer; }
.menu-item:hover { background: #316ac5; color: white; }
.menu-icon { margin-right: 8px; font-size: 1.1rem; }

.start-menu-footer { background: linear-gradient(to bottom, #245edb, #1941a5); padding: 5px; display: flex; justify-content: flex-end; gap: 10px; }
.footer-btn { color: white; font-size: 0.75rem; cursor: pointer; padding: 5px; }

/* Taskbar */
.taskbar {
    position: fixed; bottom: 0; width: 100%; height: 40px; z-index: 1000;
    background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #1941a5 100%);
    display: flex; align-items: center;
}
.start-button {
    background: linear-gradient(to bottom, #388e3c, #81c784); height: 100%; padding: 0 20px;
    color: white; font-weight: bold; font-style: italic; border-top-right-radius: 12px; border-bottom-right-radius: 12px;
    cursor: pointer; display: flex; align-items: center;
}
.system-tray { margin-left: auto; background: #0996f1; height: 100%; padding: 0 15px; display: flex; align-items: center; color: white; font-size: 0.8rem; border-left: 2px solid #1941a5; }

.xp-btn, .xp-btn-green { background: linear-gradient(to bottom, #52ad18, #317d10); color: white; border-radius: 4px; padding: 8px 20px; text-decoration: none; font-weight: bold; cursor: pointer; display: inline-block; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.photo-item img { width: 100%; height: 100px; object-fit: cover; border: 2px solid #eee; cursor: pointer; }
.photo-item img:hover { border-color: #0058e6; filter: brightness(1.1); transition: all 0.2s ease; }