:root {
    --win-bg: #008080;
    --win-button-face: #c0c0c0;
    --win-text: #000;
    --win-title: #000080;
    --win-border: #808080;
    --win-highlight: #fff;
    --win-shadow: #808080;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    overflow: hidden;
}

.crt-boot {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}
.crt-boot.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.boot-post {
    position: absolute;
    inset: 20px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #33ff33;
    white-space: pre;
    overflow: hidden;
}
.boot-logo-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.boot-logo-screen.active { display: flex; }
.boot-corp-name {
    font-family: 'Courier New', monospace;
    font-size: 28px;
    font-weight: bold;
    color: #33ff33;
    letter-spacing: 0.4em;
}
.boot-bar-wrap {
    width: 300px;
    height: 20px;
    background: #000;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}
.boot-bar-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(90deg, #33ff33 0px, #33ff33 8px, #000 8px, #000 10px);
}
.boot-status-text {
    font-size: 11px;
    color: #22aa22;
    letter-spacing: 0.1em;
}

.start-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #080812;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.start-overlay.visible {
    display: flex;
}
.start-btn-main {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a3a5c 0%, #1a1a2e 100%);
    border: 3px solid #555;
    box-shadow: 0 0 30px rgba(100,100,200,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    color: #aaa;
}
.start-btn-main:hover {
    background: linear-gradient(135deg, #4a4a6c 0%, #2a2a3e 100%);
}

/* .waiting-start hides desktop until boot finishes */
body.waiting-start .desktop,
body.waiting-start .taskbar,
body.waiting-start button.start-button { display: none !important; visibility: hidden; }

.crt-monitor {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    position: relative;
}
.crt-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--win-bg);
    position: relative;
    overflow: hidden;
}

.desktop {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}
.desktop-icons {
    display: flex;
    gap: 16px;
    padding: 12px;
    flex-wrap: wrap;
    align-content: flex-start;
}
.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    padding: 4px;
    cursor: pointer;
    text-decoration: none;
    color: var(--win-text);
}
.desktop-icon:hover .icon-label {
    background: var(--win-title);
    color: #fff;
}
.icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}
.icon-label {
    font-size: 11px;
    text-align: center;
    padding: 2px 4px;
    word-break: break-word;
    line-height: 1.3;
}

.win-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    box-shadow: inset 1px 1px 0 var(--win-highlight), inset -1px -1px 0 var(--win-shadow);
    min-width: 250px;
    min-height: 150px;
}
.win-titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: move;
    user-select: none;
}
.win-titlebar-text {
    flex: 1;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.win-btn {
    width: 18px;
    height: 16px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.win-btn:active {
    border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow);
}
.win-content {
    padding: 8px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.taskbar {
    height: 32px;
    background: var(--win-button-face);
    border-top: 2px solid var(--win-highlight);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 9999;
}
.start-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
}
.start-button:active {
    border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow);
}
.taskbar-windows {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}
.taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    min-width: 100px;
    max-width: 150px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    cursor: pointer;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
}
.taskbar-item.active {
    border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow);
    background: #dfdfdf;
}
.taskbar-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.tray-clock {
    padding: 2px 10px;
    border: 2px solid;
    border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow);
    font-size: 11px;
    font-family: 'Segoe UI', sans-serif;
}

.start-menu {
    position: absolute;
    bottom: 32px;
    left: 4px;
    width: 200px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    display: none;
    z-index: 10000;
}
.start-menu.open { display: block; }
.start-menu-banner {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 12px;
}
.start-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--win-text);
    text-decoration: none;
}
.start-menu-item:hover { background: #000080; color: #fff; }
.start-menu-icon { width: 16px; height: 16px; }
.start-menu-divider { height: 1px; background: #808080; margin: 2px 0; }

.profile-header { display: flex; gap: 12px; align-items: center; }
.profile-avatar { width: 64px; height: 64px; border: 2px solid var(--win-border); image-rendering: pixelated; }
.profile-info h2 { font-size: 14px; margin-bottom: 4px; }
.profile-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.status-led { width: 8px; height: 8px; background: #00ff00; border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

.music-display {
  background: #000;
  color: #33ff33;
  padding: 8px;
  font-family: 'Courier New', monospace;
  border: 2px inset var(--win-shadow);
  margin-bottom: 6px;
}
.music-track-name {
  font-size: 11px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-bars-display {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
}
.music-bar-viz {
  width: 4px;
  background: #33ff33;
  transition: height 0.05s;
}
.music-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.music-btn {
  width: 24px;
  height: 20px;
  background: var(--win-button-face);
  border: 2px solid;
  border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.music-btn:active { border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow); }
.music-btn svg { width: 10px; height: 10px; }
.volume-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.volume-mini input[type="range"] {
  width: 50px;
  height: 16px;
  -webkit-appearance: none;
  background: var(--win-button-face);
  border: 1px solid var(--win-shadow);
}
.volume-mini input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 14px;
  background: var(--win-button-face);
  border: 1px solid;
  border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow);
  cursor: pointer;
}
.music-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
}
.progress-label {
  font-family: 'Courier New', monospace;
  color: #000;
  min-width: 32px;
}
.progress-track {
  flex: 1;
  height: 12px;
  background: #fff;
  border: 1px inset var(--win-shadow);
  position: relative;
}
.progress-fill {
  height: 100%;
  background: #000080;
  width: 0%;
}

.notepad-textarea {
    width: 100%;
    height: 200px;
    border: 2px inset var(--win-shadow);
    background: #fff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    resize: none;
    padding: 4px;
}

.settings-group { margin-bottom: 16px; }
.settings-group-header { font-weight: bold; margin-bottom: 8px; border-bottom: 1px solid var(--win-border); padding-bottom: 4px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.settings-label { display: flex; align-items: center; gap: 8px; }
.toggle-switch { position: relative; width: 36px; height: 16px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #808080;
    border: 1px solid var(--win-shadow);
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--win-highlight);
    border: 1px solid var(--win-shadow);
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); background-color: #000080; }

.about-content { text-align: center; }
.about-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.about-header svg { width: 32px; height: 32px; }
.about-body { color: #666; line-height: 1.5; }
.ok-btn {
    padding: 4px 24px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    cursor: pointer;
    margin-top: 12px;
}
.ok-btn:active { border-color: var(--win-shadow) var(--win-highlight) var(--win-highlight) var(--win-shadow); }

.resize-handle { position: absolute; z-index: 10; }
.resize-n { top: 0; left: 8px; right: 8px; height: 4px; cursor: n-resize; }
.resize-s { bottom: 0; left: 8px; right: 8px; height: 4px; cursor: s-resize; }
.resize-e { right: 0; top: 8px; bottom: 8px; width: 4px; cursor: e-resize; }
.resize-w { left: 0; top: 8px; bottom: 8px; width: 4px; cursor: w-resize; }
.resize-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.resize-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
.resize-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.resize-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }

/* --- TERMINAL WINDOW --- */
.terminal-wrap {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #33ff33;
    background: #0a0a0a;
    border: 2px inset #808080;
    padding: 4px;
}
.terminal-wrap::-webkit-scrollbar { width: 8px; }
.terminal-wrap::-webkit-scrollbar-track { background: #000; }
.terminal-wrap::-webkit-scrollbar-thumb { background: #33ff33; }
.terminal-line { white-space: pre-wrap; word-break: break-word; }
.terminal-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #33ff33;
    background: #0a0a0a;
    border: 2px inset #808080;
    border-top: none;
    padding: 2px 4px;
}
.terminal-input-wrap span { flex-shrink: 0; }
.terminal-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #33ff33;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    outline: none;
    padding: 0;
    margin: 0;
    caret-color: #33ff33;
}

.easter-egg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.easter-egg-overlay.active { display: flex; }
.easter-egg-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: var(--win-button-face);
    border: 2px solid;
    border-color: var(--win-highlight) var(--win-shadow) var(--win-shadow) var(--win-highlight);
    cursor: pointer;
}
#easterEggVideo { max-width: 90vw; max-height: 90vh; }

body:not(.crt-off) .crt-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 10001;
}