:root {
  --desktop: #008080;
  --panel: #c0c0c0;
  --light: #ffffff;
  --mid: #808080;
  --dark: #000000;
  --navy: #000080;
  --text: #000000;
  --font: "MS Sans Serif", Tahoma, Geneva, sans-serif;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  background:#000;
  color:var(--text);
  font-family:var(--font);
  font-size:12px;
  user-select:none;
}

button, input, textarea { font:inherit; }
button { cursor:pointer; }

.hidden { display:none !important; }

.system {
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#000;
}

.boot-screen {
  position:absolute;
  inset:0;
  z-index:10000;
  background:#000;
  color:#aaa;
  padding:32px;
  font-family:"Courier New", monospace;
  font-size:14px;
}
.boot-log { white-space:pre-wrap; line-height:1.45; min-height:330px; }
.boot-log .ok { color:#ddd; }
.boot-log .warn { color:#fff; }
.boot-log .danger { color:#fff; }
.boot-progress-wrap {
  width:min(680px, 90vw);
  height:18px;
  border:1px solid #666;
  background:#111;
  padding:2px;
}
.boot-progress {
  height:100%;
  width:0%;
  background:#aaa;
  transition:width .12s linear;
}
.boot-prompt { margin-top:18px; color:#fff; animation:blink 1s steps(2,end) infinite; }
.boot-skip {
  position:absolute;
  right:24px;
  bottom:20px;
  background:#111;
  border:1px solid #555;
  color:#777;
  padding:4px 8px;
}
@keyframes blink { 50% { opacity:0; } }

.desktop {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.045), transparent 24%),
    linear-gradient(#008080,#007777);
  overflow:hidden;
}

.desktop::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px);
}

.desktop-icons {
  position:absolute;
  inset:10px 10px 40px 10px;
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:4px 8px;
  pointer-events:none;
}
.desktop-icon {
  width:78px;
  min-height:72px;
  border:1px solid transparent;
  color:#fff;
  text-shadow:1px 1px #000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:4px 2px;
  pointer-events:auto;
}
.desktop-icon:hover, .desktop-icon.selected {
  border-color:#fff;
  background:rgba(0,0,128,.28);
}
.desktop-icon .icon {
  width:34px;
  height:34px;
  margin-bottom:4px;
  display:grid;
  place-items:center;
  font-size:26px;
  text-shadow:2px 2px #000;
}
.desktop-icon .label { text-align:center; line-height:14px; }

.window-layer { position:absolute; inset:0; pointer-events:none; }

.window {
  position:absolute;
  min-width:260px;
  min-height:150px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
  box-shadow:1px 1px #000;
  pointer-events:auto;
}
.window.maximized {
  inset:0 0 30px 0 !important;
  width:auto !important;
  height:auto !important;
}
.window.inactive .titlebar { background:#808080; }
.titlebar {
  height:22px;
  margin:2px 2px 0;
  padding:2px 3px;
  color:#fff;
  background:var(--navy);
  display:flex;
  align-items:center;
  gap:5px;
  cursor:default;
}
.titlebar .title { flex:1; font-weight:bold; overflow:hidden; white-space:nowrap; }
.titlebar button {
  width:17px; height:17px;
  padding:0;
  line-height:13px;
  border-top:1px solid var(--light);
  border-left:1px solid var(--light);
  border-right:1px solid var(--dark);
  border-bottom:1px solid var(--dark);
  background:var(--panel);
  color:#000;
  font-weight:bold;
}
.window-body {
  margin:3px;
  height:calc(100% - 27px);
  overflow:auto;
  background:#fff;
  border-top:1px solid #808080;
  border-left:1px solid #808080;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  padding:8px;
}
.statusbar {
  height:18px;
  padding:2px 5px;
  border-top:1px solid #808080;
  margin-top:3px;
  background:var(--panel);
}

.start-menu {
  position:absolute;
  left:2px;
  bottom:32px;
  width:265px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
  z-index:9000;
  box-shadow:2px 2px #000;
}
.start-header {
  background:linear-gradient(90deg,#000080,#1084d7);
  color:#fff;
  height:52px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:6px;
}
.start-logo { font-size:18px; font-weight:bold; transform:skew(-7deg); }
.start-logo span { font-size:11px; }
.start-user { font-size:10px; }
.start-body { padding:4px; }
.start-body button {
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:7px 8px;
}
.start-body button:hover { background:#000080; color:#fff; }
.start-separator { height:1px; background:#808080; border-bottom:1px solid #fff; margin:3px 0; }

.taskbar {
  position:absolute;
  left:0; right:0; bottom:0;
  height:30px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px;
  background:var(--panel);
  border-top:2px solid var(--light);
  z-index:9500;
}
.start-button {
  height:25px;
  min-width:72px;
  padding:2px 7px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
}
.start-button:active, .start-button.active {
  border-top:2px solid var(--dark);
  border-left:2px solid var(--dark);
  border-right:2px solid var(--light);
  border-bottom:2px solid var(--light);
}
.task-buttons { display:flex; flex:1; gap:3px; overflow:hidden; }
.task-button {
  height:24px;
  min-width:130px;
  max-width:180px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:left;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
}
.task-button.active {
  border-top:2px solid var(--dark);
  border-left:2px solid var(--dark);
  border-right:2px solid var(--light);
  border-bottom:2px solid var(--light);
  background:#b0b0b0;
}
.tray {
  height:24px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:2px 7px;
  border-top:1px solid #808080;
  border-left:1px solid #808080;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}
.tray-item { font-size:9px; color:#333; }
.tray-item i {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:#008000;
  box-shadow:0 0 2px #000;
}
.clock { min-width:62px; text-align:center; }

.app-about h2 { margin:0 0 10px; font-size:18px; }
.app-about p { line-height:1.5; }
.system-specs {
  border-collapse:collapse;
  width:100%;
}
.system-specs td { padding:3px 6px; border-bottom:1px dotted #aaa; }
.system-specs td:first-child { width:38%; color:#555; }

.file-list { width:100%; border-collapse:collapse; }
.file-list th, .file-list td { text-align:left; padding:4px; border-bottom:1px solid #ddd; }
.file-list tr:hover { background:#000080; color:#fff; }
.pathbar {
  width:100%;
  border:2px inset #ddd;
  padding:4px;
  margin-bottom:6px;
  background:#fff;
  font-family:"Courier New", monospace;
}
.terminal {
  background:#050505;
  color:#aaa;
  height:100%;
  margin:-8px;
  padding:9px;
  font:13px/1.4 "Courier New", monospace;
  overflow:auto;
  cursor:text;
}
.terminal-output { white-space:pre-wrap; }
.terminal-line { display:flex; }
.terminal-prompt { color:#aaa; white-space:pre; }
.terminal-input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#ddd;
  font:inherit;
}
.notepad {
  width:100%;
  height:100%;
  min-height:240px;
  resize:none;
  border:2px inset #eee;
  outline:none;
  font:13px/1.45 "Courier New", monospace;
  padding:7px;
}
.dialog {
  max-width:520px;
  line-height:1.45;
}
.dialog h3 { margin-top:0; }
.ok-button {
  padding:4px 18px;
  min-width:75px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
}

#crt {
  position:fixed;
  inset:0;
  z-index:20000;
  pointer-events:none;
  opacity:.0;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 3px);
  mix-blend-mode:multiply;
}
.crt-enabled #crt { opacity:.65; }

@media (max-width:700px) {
  .desktop-icons { flex-direction:row; align-content:flex-start; }
  .window { min-width:220px; }
  .task-button { min-width:70px; }
  .tray .tray-item { display:none; }
  .start-menu { width:230px; }
}


/* ---------- PHASE 2 ---------- */
.toast-layer {
  position:absolute;
  right:10px;
  bottom:38px;
  width:min(330px, calc(100vw - 20px));
  z-index:9800;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}
.toast {
  background:var(--panel);
  color:#000;
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
  padding:7px 9px;
  box-shadow:2px 2px #000;
  animation:toastIn .12s linear;
}
.toast .toast-title { font-weight:bold; margin-bottom:2px; }
.toast.error { color:#800000; }
@keyframes toastIn { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }

.explorer-toolbar {
  display:flex;
  gap:4px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.explorer-toolbar button,
.editor-toolbar button {
  padding:3px 8px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
}
.explorer-toolbar button:active,
.editor-toolbar button:active {
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.editor-toolbar {
  display:flex;
  gap:4px;
  padding-bottom:6px;
  flex-wrap:wrap;
}
.editor-toolbar .editor-path {
  flex:1;
  min-width:170px;
  border:2px inset #eee;
  padding:3px 5px;
  background:#fff;
  font-family:"Courier New",monospace;
}
.editor-status {
  margin-top:5px;
  padding:3px 5px;
  border-top:1px solid #808080;
  font-size:11px;
}
.context-menu {
  position:fixed;
  z-index:15000;
  width:170px;
  padding:3px;
  background:var(--panel);
  border-top:2px solid var(--light);
  border-left:2px solid var(--light);
  border-right:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
  box-shadow:2px 2px #000;
}
.context-menu button {
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:5px 7px;
}
.context-menu button:hover { background:#000080; color:#fff; }
.file-selected { background:#000080 !important; color:#fff; }

.recycle-empty {
  text-align:center;
  padding:30px 10px;
  color:#666;
}


/* ================= PHASE 3 MEDIA SUBSYSTEM ================= */
.toast-layer { position:fixed; right:12px; bottom:42px; z-index:20000; width:280px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { background:#c0c0c0; color:#000; border:2px solid #fff; box-shadow:2px 2px #000; padding:7px 9px; pointer-events:auto; }
.toast .toast-title { border-bottom:1px solid #808080; padding-bottom:3px; margin-bottom:4px; }
.media-shell,.gallery-shell,.viewer-shell { height:100%; display:flex; flex-direction:column; background:#c0c0c0; }
.media-top,.gallery-head,.viewer-toolbar { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:#000080; color:#fff; border:1px solid #000; }
.media-sub { color:#aaa; font-weight:normal; margin-left:7px; }
.media-led { color:#ddd; font-family:"Courier New",monospace; font-size:11px; }
.media-main { flex:1; min-height:0; display:grid; grid-template-columns:190px 1fr 190px; gap:6px; padding:6px; }
.media-library,.playlist-panel { border:2px inset #fff; background:#d0d0d0; display:flex; flex-direction:column; min-height:0; }
.media-section-title { padding:5px; background:#808080; color:#fff; font-weight:bold; letter-spacing:.5px; }
.media-search { margin:5px; border:2px inset #fff; padding:4px; }
.track-list { overflow:auto; flex:1; }
.track-row { width:100%; border:0; border-bottom:1px solid #999; background:#d0d0d0; text-align:left; padding:6px; display:grid; grid-template-columns:18px 1fr auto; gap:4px; }
.track-row:hover,.track-row.selected { background:#000080; color:#fff; }
.track-row small { display:block; font-size:10px; opacity:.7; }
.track-row time { font-size:10px; align-self:center; }
.media-actions,.queue-actions { display:flex; gap:4px; padding:5px; }
.media-actions button,.queue-actions button,.media-top button,.gallery-head button,.viewer-toolbar button { flex:1; padding:4px; }
.media-center { display:flex; flex-direction:column; min-width:0; padding:5px; }
.audio-visualizer { width:100%; height:180px; min-height:120px; background:#000; border:3px inset #fff; image-rendering:pixelated; }
.now-playing { display:flex; gap:10px; padding:10px 4px 6px; }
.cover-mini { width:54px; height:54px; background:#000; color:#fff; border:2px outset #fff; display:grid; place-items:center; font-size:28px; }
.track-title { font-size:18px; font-weight:bold; }
.track-meta { margin-top:4px; }
.track-genre { color:#555; margin-top:4px; font-size:10px; }
.seek { width:100%; }
.time-row { display:flex; justify-content:space-between; font-family:"Courier New",monospace; font-size:10px; }
.transport { display:flex; gap:4px; justify-content:center; padding:8px 0; }
.transport button { min-width:55px; padding:6px; }
.transport .play { min-width:90px; font-weight:bold; }
.volume-row { display:flex; gap:7px; align-items:center; }
.volume-row input { flex:1; }
.volume-row button { width:70px; }
.queue-row { display:flex; justify-content:space-between; border-bottom:1px solid #999; padding:5px; gap:4px; }
.queue-row button { border:0; background:transparent; text-align:left; flex:1; }
.queue-row button:hover { background:#000080; color:#fff; }
.queue-row span { font-size:10px; }
.empty { padding:10px; color:#666; }
.media-status,.gallery-foot { padding:4px 7px; border-top:1px solid #808080; color:#555; font-family:"Courier New",monospace; font-size:10px; }
.gallery-grid { flex:1; overflow:auto; padding:10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:9px; align-content:start; }
.gallery-card { border:2px outset #fff; background:#c0c0c0; text-align:left; padding:5px; }
.gallery-card:hover { background:#000080; color:#fff; }
.gallery-thumb { height:125px; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px inset #fff; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.gallery-card small { display:block; margin-top:3px; opacity:.7; }
.viewer-stage { flex:1; min-height:0; background:#111; display:flex; align-items:center; justify-content:center; padding:12px; }
.viewer-stage img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }
.viewer-status { padding:4px 7px; font-family:"Courier New",monospace; font-size:10px; color:#555; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
.settings-card { border:2px outset #fff; padding:9px; background:#d0d0d0; }
.settings-card h3 { margin:0 0 10px; background:#000080; color:#fff; padding:4px; }
.settings-card label { display:block; margin:10px 0; }
@media(max-width:760px){.media-main{grid-template-columns:1fr}.media-library,.playlist-panel{max-height:150px}.audio-visualizer{height:120px}.settings-grid{grid-template-columns:1fr}}