/* Windows 98 Web Desktop — EN Neon theme */
:root{
  --bg: #0b1b25;
  --win: #c0c0c0;
  --face: #d4d0c8;
  --shadow: #808080;
  --highlight: #ffffff;
  --dark: #000000;
  --menu: #f0f0f0;
  --text: #000;
  --term: #00ff00;
  --black: #0b0b0b;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

.desktop{
  position: relative;
  height: 100%;
  width: 100%;
  padding-bottom: 28px;
  background: radial-gradient(1000px 600px at 20% 30%, rgba(0,255,255,0.12), transparent 60%),
              radial-gradient(800px 500px at 80% 20%, rgba(0,150,255,0.10), transparent 60%),
              linear-gradient(135deg, #08131a, #0f2a3c 60%, #0b1b25);
  overflow: hidden;
}

/* Brand watermark */
.brand-layer{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; user-select:none; }
.brand{
  margin:0; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: clamp(36px, 8vw, 120px);
  letter-spacing: 1px; color:#8af6ff;
  text-shadow: 0 0 14px rgba(72, 255, 255, 0.5), 0 0 40px rgba(72, 255, 255, 0.2);
  opacity:.9;
}
.coming-soon{ margin-top: 40px; font-size: clamp(10px, 1.2vw, 16px); color: rgba(255,255,255,0.7); letter-spacing: .4em; }

/* Icons */
.icon{
  width: 140px; background: transparent; border: none; color: #fff; text-align: center;
  position: absolute; left: 16px; padding: 6px 2px; cursor: default;
}
.icon img{ width:40px; height:40px; image-rendering: pixelated; }
.icon span{ display:block; margin-top:4px; text-shadow:1px 1px #000; font-size:12px; }
.icon:focus{ outline: 1px dotted #fff; }

/* Grid-like positions */
.icon:nth-of-type(1){ top: 24px; }
.icon:nth-of-type(2){ top: 112px; }
.icon:nth-of-type(3){ top: 200px; }
.icon:nth-of-type(4){ top: 288px; }
.icon:nth-of-type(5){ top: 376px; }
.icon:nth-of-type(6){ top: 464px; }
.icon:nth-of-type(7){ top: 552px; }

/* Windows */
.window{
  position:absolute; top: 80px; left: 160px;
  width: 720px; height: 460px;
  min-width: 280px; min-height: 220px;
  background: var(--win);
  border: 2px solid var(--dark);
  box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--highlight), inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--face);
  display: none;
}
.window.active{ z-index: 5; }
.window.maximized{ top:0 !important; left:0 !important; width:100% !important; height: calc(100% - 28px) !important; }

.titlebar{ height: 24px; display:flex; align-items:center; justify-content:space-between; color:#fff; background: linear-gradient(180deg, #000080, #1084d0); padding:2px 2px 2px 6px; cursor: move; }
.titlebar .title{ display:flex; align-items:center; gap:6px; font-weight:bold; }
.titlebar .title img{ width:16px; height:16px; image-rendering: pixelated; }

.controls{ display:flex; gap:2px; }
.win-btn{ width:22px; height:20px; border:1px solid var(--dark); box-shadow: inset -1px -1px 0 var(--highlight), inset 1px 1px 0 var(--shadow); background: var(--face); font-family: monospace; line-height:16px; cursor:pointer; }
.win-btn:active{ box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--highlight); }
.win-btn.danger{ color:#900; }

.statusbar95{ background: var(--menu); border-top: 2px solid var(--highlight); border-left: 2px solid var(--highlight); border-right: 2px solid var(--shadow); border-bottom: 2px solid var(--shadow); padding: 2px 6px; display:flex; gap:10px; font-size:12px; }

.terminal-wrap{ height: calc(100% - 24px - 22px); padding: 8px; background: var(--black); }
.terminal{ color: var(--term); font-family: "Lucida Console", Monaco, monospace; font-size: 14px; margin: 0; white-space: pre-wrap; word-break: break-word; }

.window-content{ height: calc(100% - 24px - 24px); overflow:auto; padding: 10px; }
.window-content.center{ display:flex; justify-content:center; align-items:center; }
.window-content.pad{ padding: 16px; }
.window-content img.fit{ max-width: 100%; max-height: 100%; object-fit: contain; }

/* Taskbar */
.taskbar{ position:absolute; bottom:0; left:0; right:0; height:28px; background: var(--face); border-top: 2px solid var(--highlight); display:flex; align-items:center; gap:6px; padding: 2px 4px; z-index: 100; }
.start-btn{ display:flex; align-items:center; gap:6px; height:24px; padding: 0 8px; border: 2px outset var(--face); background: var(--face); cursor:pointer; }
.start-btn:active{ border: 2px inset var(--face); }
.start-btn img{ width:18px; height:18px; }
.task-buttons{ flex:1; display:flex; gap:6px; overflow:auto; }
.task-btn{ min-width: 120px; height:24px; padding: 0 8px; display:flex; align-items:center; gap:6px; border: 2px outset var(--face); background: var(--face); white-space: nowrap; }
.task-btn.active{ border: 2px inset var(--face); background:#e0e0e0; }
.tray{ display:flex; align-items:center; margin-left:auto; }
.clock{ padding: 2px 6px; border: 2px inset var(--face); background:#e0e0e0; font-size:12px; }

/* Start menu */
.start-menu{ position:absolute; bottom: 28px; left: 2px; width: 300px; height: 360px; display:flex; background: var(--menu); border: 2px outset var(--face); z-index: 1000; }
.hidden{ display:none !important; }
.start-banner{ width: 56px; background: linear-gradient(180deg,#000080,#1084d0); color:#fff; display:flex; align-items:flex-end; justify-content:center; padding:6px; }
.start-banner img{ width:26px; height:26px; margin-bottom: 6px; }
.start-banner span{ writing-mode: vertical-rl; transform: rotate(180deg); font-weight:bold; letter-spacing: 1px; }
.start-banner .ver{ font-size: 14px; }
.start-items{ flex:1; padding: 8px; display:flex; flex-direction:column; gap:6px; }
.start-item{ display:flex; align-items:center; gap:8px; padding: 4px 6px; }
.start-item:hover{ background:#000080; color:#fff; cursor:pointer; }
.start-item img{ width:16px; height:16px; image-rendering: pixelated; }

/* Error panel */
.error95{ border:2px solid var(--dark); background:#fff; box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--highlight); padding:10px; }
.error95 .error-title{ font-weight:bold; margin-bottom:6px; }
.error95 .error-body{ margin-bottom:10px; }
.error95 .error-actions{ display:flex; justify-content:flex-end; }

@media (max-width: 768px){
  .icon{ width: 130px; left: 8px; }
  .icon img{ width:32px; height:32px; }
  .window{ width: 96vw; height: 58vh; left: 2vw; top: 10vh; }
}