:root {
  --bg-blue: #8d8d8d;
  --panel-blue: #6f6f6f;
  --shadow-blue: #3f3f3f;
  --highlight: #d7d7d7;
  --text: #f2f2f2;
  --dark-text: #121212;
  --window-bg: #bcbcbc;
  --window-border: #242424;
  --accent: #d0d0d0;
  --canvas-bg: #111111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  background: linear-gradient(180deg, #2f2f2f 0%, #1f1f1f 100%);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.screen {
  position: relative;
  width: min(1200px, 95vw);
  height: min(750px, 92vh);
  border: 8px solid #2b2b2b;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #8b8b8b;
  background: var(--bg-blue);
  overflow: hidden;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.17) 0px,
    rgba(0, 0, 0, 0.17) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.35;
  pointer-events: none;
  z-index: 30;
}

.screen.no-scanlines::before {
  opacity: 0;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.18), transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 0.22s steps(3, end) infinite;
  z-index: 31;
}

.screen.no-flicker::after {
  animation: none;
  opacity: 0.18;
}

@keyframes flicker {
  0% { opacity: 0.22; }
  33% { opacity: 0.11; }
  66% { opacity: 0.2; }
  100% { opacity: 0.13; }
}

.top-bar {
  height: 48px;
  background: linear-gradient(180deg, #dcdcdc, #bcbcbc);
  color: var(--dark-text);
  border-bottom: 2px solid var(--window-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.8px;
}

.mg-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 18px;
  margin-right: 7px;
  border: 1px solid #111;
  background: #d9d9d9;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}

.menu {
  display: flex;
  gap: 6px;
}

.menu-item {
  border: 1px solid var(--window-border);
  background: #d7d7d7;
  color: var(--dark-text);
  font: inherit;
  padding: 3px 8px;
  cursor: pointer;
}

.menu-item.active {
  background: #a5a5a5;
  box-shadow: inset 0 0 0 2px #4a4a4a;
}

.clock {
  font-weight: 700;
  min-width: 84px;
  text-align: right;
}

.desktop {
  position: absolute;
  inset: 48px 0 0 0;
  padding: 10px;
  background: linear-gradient(180deg, var(--bg-blue), #2a5fab);
}

.workbench-desktop {
  background-color: #7c7c7c;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 14px 12px 12px 100px;
  position: relative;
}

.wb-icons {
  position: absolute;
  left: 10px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  background: transparent;
  border: 1px dashed transparent;
  color: var(--text);
  margin: 0 0 8px 0;
  padding: 6px 4px;
  cursor: pointer;
  font: inherit;
}

.icon:hover,
.icon:focus {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.12);
}

.icon-glyph {
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #e7e7e7;
  background: #4f4f4f;
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 4px;
}

.icon-dpaint {
  font-size: 10px;
  letter-spacing: -0.5px;
}

.icon-label {
  font-size: 11px;
  text-align: center;
  text-shadow: 1px 1px 0 #2f2f2f;
}

.window {
  position: absolute;
  min-width: 220px;
  max-width: min(96%, 1120px);
  border: 2px solid var(--window-border);
  background: var(--window-bg);
  color: var(--dark-text);
  box-shadow: 6px 6px 0 var(--shadow-blue);
  z-index: 10;
}

.window.active {
  z-index: 25;
}

.window.hidden {
  display: none;
}

.window-titlebar {
  height: 28px;
  background: linear-gradient(180deg, #d8d8d8, #b7b7b7);
  border-bottom: 2px solid var(--window-border);
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  cursor: move;
  user-select: none;
  padding: 0 4px;
  gap: 4px;
}

.window-titlebar h2 {
  margin: 0;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.3px;
}

.gadget {
  width: 18px;
  height: 18px;
  border: 1px solid var(--window-border);
  background: #dfdfdf;
  font: inherit;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
}

.window-content {
  padding: 10px 12px 12px;
  font-size: 13px;
}

.ram-content .hint {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 8px;
}

.disk-list {
  margin: 0;
  padding-left: 18px;
}

.disk-file-button {
  font: inherit;
  background: #d7d7d7;
  color: #111;
  border: 1px solid #343434;
  padding: 1px 6px;
  cursor: pointer;
}

.shell-content {
  background: #0f0f0f;
  color: #d9d9d9;
  min-height: 180px;
  font-size: 12px;
}

#shell-output {
  margin: 0 0 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}

#shell-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

#shell-input {
  background: #080808;
  color: #e6e6e6;
  border: 1px solid #777;
  padding: 4px 6px;
  font: inherit;
}

.dpaint-window {
  width: min(96%, 1040px);
}

.dpaint-window-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(92vh - 120px);
  overflow: auto;
}

.dpaint-window .dpaint-menu {
  flex-shrink: 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, #d9d9d9, #bababa);
  border-bottom: 2px solid var(--window-border);
  gap: 6px;
}

.dpaint-window .dpaint-layout {
  padding: 8px;
  flex: 1;
  min-height: 320px;
}

.dpaint-layout {
  display: grid;
  grid-template-columns: 145px 1fr 165px;
  gap: 10px;
}

.tool-panel,
.palette-panel {
  border: 2px solid var(--window-border);
  background: var(--window-bg);
  color: var(--dark-text);
  box-shadow: 4px 4px 0 var(--shadow-blue);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-panel h2,
.palette-panel h2 {
  margin: 0;
  font-size: 12px;
  background: #a3a3a3;
  border: 1px solid var(--window-border);
  padding: 3px 5px;
}

.tool,
.size {
  border: 1px solid var(--window-border);
  background: #d7d7d7;
  color: var(--dark-text);
  font: inherit;
  padding: 4px 6px;
  text-align: left;
  cursor: pointer;
}

.tool.active,
.size.active {
  background: #9e9e9e;
}

.size-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.canvas-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  border: 2px solid var(--window-border);
  background: var(--window-bg);
  box-shadow: 6px 6px 0 var(--shadow-blue);
  padding: 8px;
  min-height: 0;
}

.canvas-title {
  border: 1px solid var(--window-border);
  background: linear-gradient(180deg, #d5d5d5, #b5b5b5);
  color: var(--dark-text);
  font-weight: 700;
  padding: 4px 8px;
}

#paint-canvas {
  width: 100%;
  height: 100%;
  border: 2px solid #001122;
  background: var(--canvas-bg);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

.status-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.status-bar span {
  border: 1px solid var(--window-border);
  background: #d1d1d1;
  color: var(--dark-text);
  font-size: 12px;
  padding: 3px 5px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.swatch {
  border: 2px solid #3d3d3d;
  min-height: 30px;
  cursor: pointer;
}

.swatch.active {
  border-color: #f0f0f0;
  box-shadow: 0 0 0 2px #676767 inset;
}

fieldset {
  border: 2px solid var(--window-border);
  padding: 8px;
  margin-bottom: 12px;
}

label {
  display: block;
  margin: 6px 0;
}

.retro-button {
  border: 2px solid #343434;
  background: #cecece;
  color: #101010;
  font: inherit;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.boot-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(1, 9, 24, 0.92);
  z-index: 40;
  transition: opacity 300ms ease;
}

.boot-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.boot-box {
  width: min(380px, 80vw);
  border: 2px solid #949494;
  background: #2e2e2e;
  padding: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #0a2f66 inset;
}

.boot-box h1 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 28px;
  color: #f2f2f2;
  letter-spacing: 2px;
}

.boot-line {
  margin: 6px 0 0 0;
  color: #dddddd;
  font-size: 14px;
}

.boot-line-dim {
  opacity: 0.75;
  font-size: 12px;
}

.requester-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 45;
  display: grid;
  place-items: center;
}

.requester-overlay.hidden {
  display: none;
}

.requester-box {
  width: min(480px, 88vw);
  border: 2px solid #1f1f1f;
  background: #bdbdbd;
  color: #111;
  box-shadow: 8px 8px 0 #3d3d3d;
  padding: 10px;
}

.requester-title {
  background: #8f8f8f;
  border: 1px solid #2b2b2b;
  font-weight: 700;
  padding: 4px 6px;
  margin-bottom: 8px;
}

.requester-message {
  margin: 0 0 8px 0;
  font-size: 12px;
}

.requester-input {
  width: 100%;
  background: #eeeeee;
  border: 1px solid #2c2c2c;
  font: inherit;
  color: #111;
  padding: 4px 6px;
  margin-bottom: 8px;
}

.requester-list {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid #2e2e2e;
  background: #d9d9d9;
  padding: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}

.requester-item {
  border: 1px solid transparent;
  padding: 2px 4px;
  cursor: pointer;
}

.requester-item:hover {
  border-color: #4d4d4d;
  background: #c6c6c6;
}

.requester-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}