/* css/system.css */

/* Fonts & Theme Variables */
:root {
  --win-teal: #008080;
  --win-gray: #c0c0c0;
  --win-light: #ffffff;
  --win-dark: #808080;
  --win-black: #000000;
  --win-navy: #000080;
  --win-font: 'MS Sans Serif', 'Microsoft Sans Serif', 'W95FA', Tahoma, sans-serif;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  color: var(--win-black);
}

html, body {
  margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden;
  background-color: #000000; font-family: var(--win-font); font-size: 11px;
}

/* The Virtual Graphics Card */
#screen-container {
  position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: var(--win-teal); overflow: hidden; transform-origin: top left;
}

/* Classic 3D Bevels */
.bevel-outset {
  border: 2px solid; border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light);
  box-shadow: inset 1px 1px 0px #dfdfdf, inset -1px -1px 0px var(--win-dark); background-color: var(--win-gray);
}

.bevel-inset {
  border: 2px solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  box-shadow: inset 1px 1px 0px var(--win-black), inset -1px -1px 0px #dfdfdf; background-color: var(--win-light);
}

/* Universal Buttons */
.win-button {
  font-family: var(--win-font); font-size: 11px; padding: 2px 12px; border: 2px solid;
  border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light);
  box-shadow: inset 1px 1px 0px var(--win-light), inset -1px -1px 0px var(--win-dark);
  background-color: var(--win-gray); cursor: pointer; min-width: 68px; min-height: 22px;
}
.win-button:active:not(:disabled) {
  border-color: var(--win-black) var(--win-light) var(--win-light) var(--win-black);
  box-shadow: inset 1px 1px 0px var(--win-dark); padding: 3px 11px 1px 13px;
}
.win-button:disabled { color: var(--win-dark); text-shadow: 1px 1px 0px var(--win-light); cursor: default; }

.ns-btn {
  font-family: var(--win-font); font-size: 9px; padding: 2px 4px;
  border: 2px solid; border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light);
  background-color: var(--win-gray); cursor: pointer; text-align: center; line-height: 1.2;
}
.ns-btn:active { border-color: var(--win-black) var(--win-light) var(--win-light) var(--win-black); padding: 3px 3px 1px 5px; }