/* --- OS VARIABLES & BASE STYLES --- */
:root {
    --win-teal: #008080; --win-gray: #c0c0c0; --win-darkgray: #808080;
    --win-navy: #000080; --win-blue: #0000FF; --win-white: #ffffff; --win-black: #000000;
}

body {
    background-color: var(--win-teal); color: var(--win-black);
    font-family: 'MS Sans Serif', 'Tahoma', 'Arial', sans-serif;
    margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden;
    user-select: none; -webkit-user-select: none; cursor: default;
}

body::after {
    content: " "; display: block; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; z-index: 99999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
}
* { cursor: url('https://cur.cursors-4u.net/windows/win-6/win547.cur'), auto !important; }

/* Utility */
.hidden { display: none !important; }
.minimized { display: none !important; }
.txt-yellow { color: yellow; } .text-center { text-align: center; } .fw-bold { font-weight: bold; } .p-0 { padding: 0 !important; }
button { font-family: inherit; border: none; background: none; }

/* Screens */
#power-screen, #bios-screen, #shutdown-screen, #reboot-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--win-black); z-index: 10000;
    display: flex; justify-content: center; align-items: center; color: var(--win-white);
}
#bios-screen { justify-content: flex-start; align-items: flex-start; padding: 20px; font-family: 'Courier New', monospace; flex-direction: column; }
#shutdown-screen, #reboot-screen { color: #ff8c00; font-family: 'Courier New', monospace; font-size: 24px; text-align: center; z-index: 11000; }
.power-btn {
    padding: 15px 30px; font-size: 20px; background: var(--win-gray);
    border-top: 3px solid var(--win-white); border-left: 3px solid var(--win-white); border-right: 3px solid var(--win-darkgray); border-bottom: 3px solid var(--win-darkgray); font-weight: bold; color: var(--win-black);
}
.power-btn:active { border-top: 3px solid var(--win-darkgray); border-left: 3px solid var(--win-darkgray); border-right: 3px solid var(--win-white); border-bottom: 3px solid var(--win-white); }

/* Desktop Icons */
.desktop-icons { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 25px; z-index: 10; }
.icon { text-align: center; color: var(--win-white); width: 80px; }
.icon-img { font-size: 30px; margin-bottom: 5px; }
.icon-text { background-color: var(--win-navy); padding: 2px; font-size: 12px; color: white; border: 1px dotted transparent;}
.icon:active .icon-text { border: 1px dotted var(--win-white); }
@keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.icon-attention { animation: icon-bounce 0.5s ease-in-out 3; }

/* WINDOWS (Now Resizable!) */
.window {
    position: absolute; background-color: var(--win-gray);
    border: 2px outset var(--win-white); box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    display: none; flex-direction: column; 
    resize: both; overflow: hidden;
    min-width: 250px; min-height: 150px;
}
.window.open { display: flex; }

.title-bar {
    background-color: var(--win-navy); color: var(--win-white);
    padding: 3px 5px; font-weight: bold; display: flex;
    justify-content: space-between; align-items: center; cursor: grab; font-size: 14px;
}
.title-bar:active { cursor: grabbing; }
.window-controls { display: flex; gap: 2px; }

.close-btn, .min-btn {
    background-color: var(--win-gray); color: var(--win-black);
    font-weight: bold; padding: 1px 6px; border: 2px outset var(--win-white); cursor: pointer;
}
.close-btn:active, .min-btn:active { border-style: inset; }

.window-content { padding: 10px; overflow: auto; flex: 1; display: flex; flex-direction: column;}
.flex-col { display: flex; flex-direction: column; height: 100%; }

/* Buttons & Elements */
.btn {
    display: block; text-align: center; background-color: var(--win-gray);
    color: var(--win-black); padding: 8px; font-weight: bold;
    border: 2px outset var(--win-white); margin-bottom: 10px; width: 100%; box-sizing: border-box;
}
.btn:active { border-style: inset; }
.btn-gold { background-color: #ffd700; }
.link-btn { text-decoration: none; color: black; display: block; }
.mono-txt { font-family: monospace; font-size: 12px; }
.sys-msg { margin: 0 0 5px 0; font-weight: bold; font-size: 12px; }

/* Specific Windows */
#win-stream { width: 600px; height: 450px; top: 5%; left: 5%; display: block; z-index: 100; }
#win-links { width: 300px; height: 250px; top: 15%; left: 10%; }
#win-donate, #win-contact { width: 350px; height: 200px; top: 25%; left: 5%; }
#win-paint { width: 400px; height: 350px; top: 20%; left: 5%; }
.win-admin-style { width: 400px; border: 4px solid #ff0000; } .admin-title { background: #800000; }
.admin-queue-list { display: flex; flex-direction: column; gap: 10px; }
.win-photo-style { width: auto; max-width: 85vw; top: 10%; left: 10%; }
.photo-content { background: #000; text-align: center; padding: 5px; }
#photo-viewer-img { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border: 1px solid #808080; }
.win-chat-style { width: 320px; height: 480px; }
.chat-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.win-privacy-style { width: 400px; height: 400px; top: 15%; left: 30%; }
.privacy-content { background: white; color: black; font-family: 'Courier New', monospace; } .privacy-content pre { white-space: pre-wrap; margin: 0; font-size: 12px; }

/* Paint */
#paint-canvas { background: white; border: 2px inset gray; flex-grow: 1; cursor: crosshair; touch-action: none; width: 100%; }
.color-palette { display: flex; gap: 5px; margin-bottom: 10px; }
.color-btn { width: 25px; height: 25px; border: 2px inset gray; }
.clear-btn { margin-left: auto; font-size: 10px; padding: 2px 5px; border: 2px outset white; }
.submit-paint-btn { width: 100%; margin-top: 10px; background: #000080; color: white; font-weight: bold; padding: 5px; border: 2px outset white;}

/* Gallery, Mine, Winamp, Postit, Tos, Stream elements... (Kept identical to previous styles) */
.win-gallery-style { width: 450px; height: 350px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery-grid img { width: 100%; object-fit: contain; background: #ffffff; border: 2px inset #808080; margin-bottom: 5px; }
.win-postit-style { width: 200px; background: #ffff88; }
.postit-title { background: #cccc00; color: black; }
.postit-textarea { width: 100%; height: 120px; background: repeating-linear-gradient(#ffff88, #ffff88 24px, #e5e577 25px); border: none; line-height: 25px; font-family: 'Comic Sans MS', cursive; padding: 10px; box-sizing: border-box; resize: none; outline: none; color: #222; }
.win-mine-style { width: 285px; top: 10%; left: 20%; }
#mine-grid { display: grid; grid-template-columns: repeat(10, 25px); gap: 1px; background: #808080; border: 2px inset white; margin: 0 auto; }
.cell { width: 25px; height: 25px; background: #c0c0c0; border: 2px outset white; text-align: center; font-weight: bold; line-height: 25px; font-size: 14px; }
.cell.revealed { border: 1px solid #7b7b7b; background: #bdbdbd; } .cell.mine { background: red; }
.win-amp-style { width: 250px; top: 15%; left: 25%; }
.winamp-body { background: #222; color: #0f0; font-family: monospace; padding: 10px; border: 2px outset gray; }
.visualizer { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-bottom: 5px; }
.bar { width: 4px; background: #0f0; height: 10%; transition: height 0.1s; }
.win-tos-style { width: 380px; top: 20%; left: 10%; z-index: 10000; }
.tos-content { background: var(--win-gray); color: black; }
.tos-text-box { background: white; border: 2px inset var(--win-darkgray); padding: 5px; height: 150px; overflow-y: scroll; font-family: 'Courier New', monospace; font-size: 11px; margin-bottom: 15px; }
.tos-buttons { display: flex; justify-content: space-between; } .tos-buttons .btn { width: 45%; margin-bottom: 0; }
.bsod-box { background-color: var(--win-blue); color: var(--win-white); font-family: 'Courier New', monospace; padding: 15px; font-size: 14px; border: 2px inset var(--win-darkgray); min-height: 80px; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; border: 2px inset var(--win-darkgray); background: var(--win-black); margin-top: 10px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* TASKBAR & APPS */
.taskbar {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 35px;
    background-color: var(--win-gray); border-top: 2px solid white;
    display: flex; justify-content: space-between; align-items: center; padding: 0 5px; z-index: 9000; box-sizing: border-box;
}
.start-btn { font-weight: bold; font-style: italic; padding: 4px 10px; border: 2px outset white; display: flex; align-items: center; gap: 5px; }
.start-btn:active, .start-btn.active { border-style: inset; background: #e0e0e0; }

.taskbar-apps { display: flex; gap: 2px; margin-left: 10px; overflow-x: auto; }
.taskbar-app {
    padding: 3px 10px; border: 2px outset white; background: var(--win-gray);
    font-size: 12px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px;
    max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.taskbar-app.active { border-style: inset; background: #e0e0e0; }

.sys-tray { display: flex; align-items: center; gap: 10px; border: 2px inset gray; padding: 2px 10px; font-size: 12px; }

/* Start Menu & Clippy */
.start-menu { position: fixed; bottom: 35px; left: 0; width: 200px; background-color: var(--win-gray); border: 2px outset white; flex-direction: row; z-index: 8999; }
.start-sidebar { background: linear-gradient(to top, var(--win-navy), #1084d0); color: var(--win-white); width: 30px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.start-sidebar span { transform: rotate(-90deg); font-weight: bold; font-size: 18px; white-space: nowrap; margin-bottom: 40px; }
.start-items { flex-grow: 1; padding: 2px; display: flex; flex-direction: column; }
.start-item { padding: 10px; display: flex; align-items: center; gap: 10px; font-size: 14px; text-align: left; width: 100%; box-sizing: border-box; }
.start-item:hover { background-color: var(--win-navy); color: var(--win-white); }
.start-divider { border-top: 1px solid var(--win-darkgray); border-bottom: 1px solid var(--win-white); margin: 2px 5px; }

#clippy-container { position: fixed; bottom: 50px; right: 20px; z-index: 8900; align-items: flex-end; gap: 5px; }
.clippy-bubble { background-color: #ffffe1; border: 1px solid black; padding: 10px; font-size: 12px; max-width: 150px; border-radius: 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); color: black; position: relative; }
.clippy-bubble::after { content: ''; position: absolute; bottom: 10px; right: -10px; border-width: 5px 0 5px 10px; border-style: solid; border-color: transparent transparent transparent #ffffe1; }
.clippy-icon { font-size: 45px; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.3)); }

.flash-glitch { animation: flash 0.1s linear; filter: invert(100%); }
@keyframes flash { 0% { filter: invert(0%); } 50% { filter: invert(100%); } 100% { filter: invert(0%); } }

/* --- MOBILE SURVIVAL MODE --- */
@media (max-width: 768px) {
    .window {
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: calc(100vh - 35px) !important;
        resize: none !important; /* Disable resizing on phones */
    }
    .desktop-icons { flex-direction: row; flex-wrap: wrap; }
    .taskbar-app { max-width: 80px; font-size: 10px; }
}

/* --- THEME OVERRIDES --- */

/* Default Teal (Standard) */
body.theme-default {
    --win-teal: #008080; --win-gray: #c0c0c0; --win-navy: #000080; --win-white: #ffffff; --win-black: #000000;
}

/* High Contrast (Dark Mode) */
body.theme-high-contrast {
    --win-teal: #000000; --win-gray: #222222; --win-navy: #00ff00; --win-white: #00ff00; --win-black: #00ff00;
}
body.theme-high-contrast .window { border: 2px solid #00ff00; }
body.theme-high-contrast .icon-text { background: black; color: #00ff00; border: 1px solid #00ff00; }

/* Hotdog Stand (Yellow/Red - Warning: Eye-searing) */
body.theme-hotdog {
    --win-teal: #ff0000; --win-gray: #ffff00; --win-navy: #000000; --win-white: #ffffff; --win-black: #000000;
}
body.theme-hotdog .window { border: 2px solid #000; }

/* The Matrix (Green/Black) */
body.theme-matrix {
    --win-teal: #000000; --win-gray: #001100; --win-navy: #003300; --win-white: #00ff41; --win-black: #00ff41;
}
body.theme-matrix .window { border: 1px solid #00ff41; color: #00ff41; }
body.theme-matrix .btn { color: #00ff41; border-color: #00ff41; }

/* Vaporwave (Pink/Purple) */
body.theme-vaporwave {
    --win-teal: #ff71ce; --win-gray: #b967ff; --win-navy: #01cdfe; --win-white: #fffb96; --win-black: #05ffa1;
}
body.theme-vaporwave .icon-text { background: #ff71ce; }

/* Theme Selector Grid */
.theme-grid { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 10px; }
.theme-sel { margin-bottom: 0; font-size: 12px; }