:root {
    --primary-color: #00f0ff;
    --secondary-color: #ff00f0;
    --background-color: #0d0221;
    --window-bg: rgba(10, 2, 30, 0.85);
    --taskbar-bg: rgba(10, 2, 30, 0.9);
    --border-glow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color);
    --font-main: 'Roboto Mono', monospace;
    --font-title: 'Orbitron', sans-serif;
    --red-glow: 0 0 5px #ff1b1b, 0 0 10px #ff1b1b;
}

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

body {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-family: var(--font-main);
    overflow: hidden;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="%2300f0ff" d="M10 0 L14 14 L10 12 L6 14 Z"/></svg>') 10 0, auto;
}

#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

#boot-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease-out; }
#boot-logo { font-family: monospace; color: var(--primary-color); text-shadow: var(--border-glow); font-size: 1.2rem; line-height: 1.2; margin-bottom: 20px; }
#boot-text { letter-spacing: 2px; }
#progress-bar { width: 300px; height: 15px; border: 1px solid var(--primary-color); margin-top: 20px; padding: 2px; }
#progress-bar span { display: block; height: 100%; width: 0%; background: var(--primary-color); box-shadow: var(--border-glow); animation: boot-progress 2s linear forwards; }
@keyframes boot-progress { to { width: 100%; } }

#desktop { position: relative; width: 100vw; height: calc(100vh - 40px); }
.desktop-icon { position: absolute; display: flex; flex-direction: column; align-items: center; width: 120px; text-align: center; cursor: grab; padding: 10px; border-radius: 5px; transition: background-color 0.2s, transform 0.1s linear; user-select: none; }
.desktop-icon:hover { background-color: rgba(0, 240, 255, 0.1); }
.desktop-icon.dragging { cursor: grabbing; background-color: rgba(0, 240, 255, 0.2); z-index: 100; transition: none; }
.desktop-icon img { width: 64px; height: 64px; margin-bottom: 5px; pointer-events: none; }
.desktop-icon span { font-size: 0.9rem; text-shadow: 1px 1px 2px #000; word-break: break-all; }
#trash-icon.droppable { background-color: rgba(255, 27, 27, 0.5); box-shadow: 0 0 15px #ff1b1b; transform: scale(1.1); }
.deleting { animation: delete-animation 0.5s forwards; }
@keyframes delete-animation {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.window { position: absolute; min-width: 450px; min-height: 300px; background: var(--window-bg); border: 1px solid var(--primary-color); box-shadow: var(--border-glow), 0 0 20px rgba(0,0,0,0.5); border-radius: 5px; display: flex; flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); resize: both; overflow: auto; transition: opacity 0.3s, transform 0.3s; }
.window.minimized { opacity: 0; transform: scale(0); pointer-events: none; }
.window.active { z-index: 10; }
.window-header { background: var(--primary-color); color: var(--background-color); padding: 5px 10px; font-family: var(--font-title); cursor: move; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.window-controls button { background: none; border: none; color: var(--background-color); font-family: monospace; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-left: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center;}
.window-controls button:hover { background-color: var(--secondary-color); color: #fff;}
.window-body { padding: 15px; flex-grow: 1; overflow-y: auto; line-height: 1.6; }
.window-body h2 { color: var(--secondary-color); font-family: var(--font-title); margin-bottom: 15px; text-shadow: 0 0 5px var(--secondary-color); }

.team-cards-container { display: flex; justify-content: space-around; align-items: center; height: 100%; gap: 20px; }
.team-card { background: rgba(0,0,0,0.3); padding: 20px; border-radius: 5px; border: 1px solid transparent; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.team-card:hover { transform: scale(1.05); border-color: var(--secondary-color); box-shadow: 0 0 15px var(--secondary-color); }
.team-card h3 { font-family: var(--font-title); color: var(--secondary-color); margin-bottom: 5px; }

.roomcore-window-body { background: #111; color: #eee; text-align: center; }
.roomcore-logo { font-family: var(--font-title); font-size: 3rem; color: #ff1b1b; text-shadow: var(--red-glow); animation: glitch 1.5s infinite; }
@keyframes glitch { 0%, 100% { text-shadow: var(--red-glow); transform: skewX(0); } 50% { text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff; transform: skewX(2deg); } }
.roomcore-status { background: #ff1b1b; color: #fff; padding: 5px 10px; border-radius: 5px; display: inline-block; margin: 15px 0; font-family: var(--font-title); }
.roadmap { text-align: left; margin-top: 20px; padding: 0 20px; }
.roadmap h4 { color: #ff1b1b; }

.sys-info-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; align-items: center;}
.sys-info-bar { width: 100%; height: 20px; background: #333; border-radius: 5px; }
.sys-info-level { height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 5px; animation: load-bar 2s ease-in-out infinite alternate; }
@keyframes load-bar { from { width: 30%; } to { width: 90%; } }

.terminal { background: #000; }
.terminal-output { padding-bottom: 10px; white-space: pre-wrap; }
.terminal-input-line { display: flex; }
.terminal-prompt { color: var(--secondary-color); margin-right: 10px; }
#terminal-input { flex-grow: 1; background: none; border: none; color: #fff; font-family: inherit; font-size: 1rem; }
#terminal-input:focus { outline: none; }

#taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; background: var(--taskbar-bg); border-top: 1px solid var(--primary-color); box-shadow: var(--border-glow); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
#taskbar-apps { display: flex; height: 100%; }
.taskbar-item { background: rgba(0, 240, 255, 0.1); border: 1px solid transparent; color: #fff; padding: 0 15px; height: 100%; display: flex; align-items: center; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.taskbar-item:hover { background: rgba(0, 240, 255, 0.2); }
.taskbar-item.active { background: var(--primary-color); color: var(--background-color); font-weight: bold; }
#system-tray { display: flex; align-items: center; gap: 15px; }
#clock { font-family: var(--font-title); text-shadow: 0 0 5px var(--primary-color); }
#sound-control { cursor: pointer; font-size: 1.2rem; }

#context-menu { position: absolute; min-width: 250px; background: var(--taskbar-bg); border: 1px solid var(--primary-color); padding: 5px; border-radius: 5px; z-index: 200; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: none; }
.context-menu-item { padding: 8px 12px; cursor: pointer; }
.context-menu-item:hover { background: var(--primary-color); color: var(--background-color); }
#context-menu hr { border: none; height: 1px; background: var(--primary-color); opacity: 0.5; margin: 5px 0; }

#modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 500; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); transition: opacity 0.3s; }
#modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { width: 80%; max-width: 900px; height: 80vh; background: var(--window-bg); border: 1px solid var(--primary-color); border-radius: 5px; box-shadow: var(--border-glow), 0 0 50px rgba(0,0,0,0.8); display: flex; flex-direction: column; animation: modal-appear 0.3s ease-out; }
@keyframes modal-appear { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { padding: 10px 15px; font-family: var(--font-title); font-size: 1.5rem; text-align: center; border-bottom: 1px solid var(--primary-color); position: relative; }
.modal-body { flex-grow: 1; display: flex; flex-direction: column; padding: 15px; overflow: hidden; }
.modal-tabs { display: flex; border-bottom: 1px solid #333; }
.tab-button { background: none; border: none; color: #888; padding: 10px 15px; cursor: pointer; font-size: 1rem; }
.tab-button.active { color: var(--secondary-color); border-bottom: 2px solid var(--secondary-color); }
.tab-content { flex-grow: 1; padding-top: 15px; overflow-y: auto; display: none; }
.tab-content.active { display: block; }
.modal-close-btn { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

.contact-links { margin-top: 20px; }
.contact-links a { margin: 0 10px; display: inline-block; transition: transform 0.2s; }
.contact-links a:hover { transform: scale(1.2); }
.tech-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tech-badge { background: #333; padding: 5px 10px; border-radius: 5px; font-size: 0.9rem; }
.stats-container { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 10px; }
.stats-container img { max-width: 100%; border-radius: 5px; background: rgba(0,0,0,0.2); padding: 10px; filter: drop-shadow(0 0 5px var(--primary-color)); }

#bsod { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00008B; color: #fff; z-index: 9999; display: none; justify-content: center; align-items: center; font-family: 'Courier New', Courier, monospace; }
.bsod-content { text-align: center; max-width: 80%; }
.bsod-content h1 { font-size: 8rem; margin: 0; }
.bsod-content p { font-size: 1.2rem; }
.error-code { margin-top: 30px; font-size: 1rem; }