:root {
  --dos-blue: #0000aa;
  --dos-blue-lt: #0000cc;
  --dos-gray: #aaaaaa;
  --dos-white: #ffffff;
  --dos-yellow: #ffff55;
  --dos-cyan: #55ffff;
  --dos-red: #ff5555;
  --dos-green: #55ff55;
  --dos-ltgreen: #55ff55;
  --dos-lightgray: #c6c6c6;
  --dos-darkgray: #555555;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #000;
  font-family: 'VT323', 'JetBrains Mono', monospace;
  color: var(--dos-white);
  overflow: hidden;
  height: 100%;
}

.dos-root {
  position: fixed;
  inset: 0;
  background: var(--dos-blue);
  display: flex;
  flex-direction: column;
  font-size: 20px;
  line-height: 1.15;
  padding: 2px;
}

/* ---------- CRT overlays ---------- */
.crt-scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 999;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
}
.crt-vignette {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 998;
  box-shadow: inset 0 0 180px rgba(0,0,0,0.6);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.02), transparent 70%);
}
.crt .dos-workspace, .crt .mono-out { text-shadow: 0 0 3px rgba(150,255,150,0.15); }

/* ---------- Menu bar ---------- */
.dos-menubar {
  background: var(--dos-lightgray);
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  height: 26px;
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
}
.dos-menu-item {
  padding: 0 10px;
  cursor: pointer;
  height: 26px;
  display: flex; align-items: center;
}
.dos-menu-item:hover { background: var(--dos-blue); color: #fff; }
.dos-menu-item .text-red-500 { color: #cc0000; }
.dos-menu-item:hover .text-red-500 { color: var(--dos-yellow); }
.dos-clock { color: #000; font-size: 18px; }

.dos-scrim { position: fixed; inset: 0; z-index: 20; }
.dos-dd-wrap { position: absolute; top: 26px; z-index: 40; }
.dos-dropdown {
  background: var(--dos-lightgray);
  color: #000;
  border: 2px solid #fff;
  border-right-color: #000; border-bottom-color: #000;
  min-width: 190px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
  padding: 2px 0;
}
.dos-drop-item { padding: 2px 14px; cursor: pointer; white-space: pre; }
.dos-drop-item:hover { background: var(--dos-blue); color: #fff; }
.dos-sep { height: 0; border-top: 1px solid #777; margin: 3px 6px; }

/* ---------- Workspace ---------- */
.dos-workspace {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  padding: 3px;
  min-height: 0;
}

/* ---------- Windows with double borders ---------- */
.dos-window {
  border: 2px solid var(--dos-cyan);
  background: var(--dos-blue-lt);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.edit-win { flex: 1 1 50%; }
.out-win { flex: 1 1 50%; }

.dos-titlebar {
  background: var(--dos-cyan);
  color: #000;
  padding: 0 6px;
  display: flex;
  justify-content: space-between;
  height: 24px;
  align-items: center;
  flex: 0 0 auto;
}
.dos-close { color: #000; }

/* ---------- Editor ---------- */
.editor-body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.editor-gutter {
  margin: 0; padding: 4px 6px 4px 4px;
  background: rgba(0,0,0,0.25);
  color: var(--dos-gray);
  text-align: right;
  min-width: 40px;
  font-size: 17px;
  line-height: 20px;
  user-select: none;
  overflow: hidden;
  white-space: pre;
}
.editor-stack { position: relative; flex: 1 1 auto; min-width: 0; }
.editor-highlight, .editor-textarea {
  margin: 0;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  line-height: 20px;
  white-space: pre;
  overflow: auto;
  tab-size: 4;
  position: absolute;
  inset: 0;
  border: none;
}
.editor-highlight {
  color: var(--dos-white);
  pointer-events: none;
  z-index: 1;
}
.editor-textarea {
  background: transparent;
  color: transparent;
  caret-color: var(--dos-yellow);
  z-index: 2;
  resize: none;
  outline: none;
}
.editor-textarea::selection { background: rgba(85,255,255,0.35); }
.hl-kw { color: var(--dos-yellow); font-weight: bold; }
.hl-str { color: var(--dos-cyan); }
.hl-char { color: #ffaa55; }
.hl-num { color: var(--dos-green); }
.hl-com { color: var(--dos-gray); font-style: italic; }
.hl-pp { color: var(--dos-red); }
.hl-fn { color: #ffb0ff; }
.editor-errline {
  position: absolute; left: 0; right: 0; height: 20px;
  background: rgba(255,85,85,0.35);
  border-top: 1px solid var(--dos-red);
  border-bottom: 1px solid var(--dos-red);
  pointer-events: none; z-index: 0;
}

/* ---------- DOS buttons ---------- */
.edit-buttons {
  flex: 0 0 auto;
  display: flex; gap: 6px; padding: 5px;
  background: rgba(0,0,0,0.2);
  flex-wrap: wrap;
}
.dos-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  background: var(--dos-lightgray);
  color: #000;
  border: 2px solid #fff;
  border-right-color: #555; border-bottom-color: #555;
  padding: 4px 10px;
  cursor: pointer;
}
.dos-btn:active { border-color: #555; border-right-color: #fff; border-bottom-color: #fff; }
.dos-btn.accent { background: var(--dos-yellow); }
.dos-btn:hover { background: #ddd; }
.dos-btn.accent:hover { background: #ffff99; }

/* ---------- Output tabs ---------- */
.dos-tabs { display: flex; flex: 0 0 auto; background: rgba(0,0,0,0.3); }
.dos-tab {
  padding: 3px 16px; cursor: pointer;
  color: var(--dos-gray);
  border-right: 1px solid rgba(255,255,255,0.15);
  font-size: 17px;
}
.dos-tab.active { background: var(--dos-blue-lt); color: var(--dos-yellow); border-bottom: 2px solid var(--dos-yellow); }
.dos-tab:hover { color: #fff; }
.out-content { flex: 1 1 auto; overflow: auto; min-height: 0; }
.mono-out {
  margin: 0; padding: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dos-cyan);
  white-space: pre;
}

/* ---------- Info tab ---------- */
.info-grid { padding: 12px; }
.info-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted rgba(255,255,255,0.15); font-size: 18px; }
.info-k { color: var(--dos-gray); }
.info-v { color: var(--dos-yellow); }
.info-note { margin-top: 14px; color: var(--dos-green); font-size: 16px; }

/* ---------- Console (RUN tab) ---------- */
.dos-console-tab { background: #000; height: 100%; }
.console-text {
  margin: 0; padding: 8px;
  color: var(--dos-lightgray);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  min-height: 100%;
}

/* ---------- Log window ---------- */
.log-win { flex: 0 0 130px; margin: 0 3px 3px; }
.log-body { flex: 1 1 auto; overflow: auto; padding: 4px 8px; background: var(--dos-blue-lt); }
.log-line { font-size: 17px; white-space: pre-wrap; }
.log-line.prog { color: var(--dos-yellow); }
.c-gray { color: var(--dos-gray); }
.c-white { color: var(--dos-white); }
.c-cyan { color: var(--dos-cyan); }
.c-green { color: var(--dos-green); }
.c-yellow { color: var(--dos-yellow); }
.c-red { color: var(--dos-red); }

/* ---------- Status bar ---------- */
.dos-statusbar {
  flex: 0 0 auto;
  background: var(--dos-lightgray);
  color: #000;
  display: flex; justify-content: space-between;
  padding: 0 8px; height: 24px; align-items: center;
  font-size: 16px;
}
.status-item { margin-right: 4px; }
.status-key { color: #cc0000; font-weight: bold; }
.status-right { color: #000; }

.dos-footer { flex: 0 0 auto; text-align: center; background: var(--dos-blue); padding: 2px; }
.dos-footer a { color: var(--dos-cyan); font-size: 15px; text-decoration: none; }
.dos-footer a:hover { color: var(--dos-yellow); text-decoration: underline; }

/* ---------- Dialogs ---------- */
.dos-modal-scrim, .dos-scrim { }
.dos-modal-scrim {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.dos-dialog {
  background: var(--dos-lightgray);
  color: #000;
  border: 2px solid #fff;
  border-right-color: #000; border-bottom-color: #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
  min-width: 300px;
}
.dos-dialog .dos-titlebar { background: var(--dos-blue); color: #fff; }
.dialog-body { padding: 14px 18px; font-size: 18px; }
.dialog-body .c-yellow { color: #aa5500; }
.dialog-body .c-gray { color: #444; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .font-bold { font-weight: bold; }

/* ---------- BSOD ---------- */
.bsod {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--dos-blue);
  color: #fff;
  padding: 60px 40px;
  font-size: 20px;
  cursor: pointer;
}
.bsod-title { background: var(--dos-lightgray); color: var(--dos-blue); display: inline-block; padding: 0 8px; font-weight: bold; }

/* ---------- Responsive: stack on mobile ---------- */
@media (max-width: 760px) {
  .dos-root { font-size: 17px; }
  .dos-workspace { flex-direction: column; overflow: auto; }
  .edit-win, .out-win { flex: none; height: 320px; }
  .dos-clock { font-size: 14px; }
  .dos-menu-item { padding: 0 6px; }
  .log-win { flex: 0 0 110px; }
  .mono-out { font-size: 11px; }
  .status-item { display: none; }
  .status-item:first-child, .dos-statusbar .status-right { display: inline; }
}
</parameter>
</invoke>