/* ==========================================================================
   MICROSOFT WINDOWS 3.1 AUTHENTIC STYLESHEET (1992)
   Features Program Manager (PROGMAN.EXE), MDI Program Groups,
   Desktop Minimized Icons, Control Panel Themes (Default, Hot Dog Stand,
   Emerald, Ocean), and authentic 16-bit 3D beveled windows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & Color Schemes
   -------------------------------------------------------------------------- */
:root {
  /* Default Windows 3.1 Theme */
  --win-desktop: #008080;         /* Classic Teal */
  --win-bg: #c0c0c0;              /* 3D Face Gray */
  --win-fg: #000000;              /* Window Text */
  --win-title-active: #000080;     /* Active Title Bar Navy */
  --win-title-active-text: #ffffff;
  --win-title-inactive: #ffffff;   /* Inactive Title Bar White/Light Gray */
  --win-title-inactive-text: #000000;
  --win-frame: #c0c0c0;
  --win-border-dark: #000000;
  --win-border-light: #ffffff;
  --win-border-shadow: #808080;
  --win-highlight: #000080;
  --win-highlight-text: #ffffff;
  --win-font: 'MS Sans Serif', Arial, Helvetica, sans-serif;
  --win-font-mono: 'Courier New', Courier, monospace;
}

/* Theme: Hot Dog Stand (Legendary high-contrast yellow & red) */
body.theme-hotdog {
  --win-desktop: #ffff00;         /* Brilliant Mustard Yellow */
  --win-bg: #ff0000;              /* Ketchup Red Frame */
  --win-fg: #000000;
  --win-title-active: #000000;
  --win-title-active-text: #ffffff;
  --win-title-inactive: #ffffff;
  --win-title-inactive-text: #000000;
  --win-highlight: #000000;
  --win-highlight-text: #ffff00;
}

/* Theme: Emerald */
body.theme-emerald {
  --win-desktop: #005522;         /* Deep Forest Green */
  --win-bg: #c0c0c0;
  --win-title-active: #006633;
  --win-title-active-text: #ffffff;
}

/* Theme: Ocean */
body.theme-ocean {
  --win-desktop: #004060;         /* Deep Ocean Cyan */
  --win-bg: #c0c0c0;
  --win-title-active: #002b49;
  --win-title-active-text: #00ffff;
}

/* --------------------------------------------------------------------------
   2. Reset & Desktop Shell
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--win-desktop);
  font-family: var(--win-font);
  font-size: 11px;
  color: var(--win-fg);
  cursor: default;
}

#desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--win-desktop);
  overflow: hidden;
}

/* Minimized desktop applications row along bottom */
#desktop-minimized-tray {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 50;
}

.desktop-min-icon {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  text-align: center;
  cursor: pointer;
}

.desktop-min-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-bottom: 2px;
}

.desktop-min-icon span {
  font-size: 10px;
  color: #000000;
  background: var(--win-bg);
  border: 1px solid #000000;
  padding: 1px 4px;
  white-space: nowrap;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-min-icon:hover span,
.desktop-min-icon.selected span {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

/* --------------------------------------------------------------------------
   3. Windows 3.1 Window Chrome
   -------------------------------------------------------------------------- */
.win31-window {
  position: absolute;
  background-color: var(--win-bg);
  border: 1px solid var(--win-border-dark);
  box-shadow: inset 1px 1px 0 var(--win-border-light), 
              inset -1px -1px 0 var(--win-border-shadow),
              2px 2px 0 rgba(0, 0, 0, 0.4);
  padding: 3px;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.win31-window.active {
  z-index: 500;
}

.win31-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  box-shadow: none;
}

/* Title Bar */
.win31-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 19px;
  background-color: var(--win-title-inactive);
  color: var(--win-title-inactive-text);
  padding: 1px 2px;
  font-weight: bold;
  font-size: 11px;
  cursor: move;
  border-bottom: 1px solid var(--win-border-dark);
}

.win31-window.active .win31-titlebar {
  background-color: var(--win-title-active);
  color: var(--win-title-active-text);
}

.win31-title-text {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
  pointer-events: none;
}

/* System Menu Square Button [-] */
.win31-sysmenu-btn {
  width: 18px;
  height: 15px;
  background: var(--win-bg);
  border-top: 1px solid var(--win-border-light);
  border-left: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 2px;
}

.win31-sysmenu-dash {
  width: 10px;
  height: 3px;
  background: #000000;
  border: 1px solid #808080;
}

.win31-sysmenu-btn:active {
  border-top: 1px solid var(--win-border-dark);
  border-left: 1px solid var(--win-border-dark);
  border-right: 1px solid var(--win-border-light);
  border-bottom: 1px solid var(--win-border-light);
}

/* Minimize & Maximize Buttons */
.win31-btn-group {
  display: flex;
  gap: 1px;
}

.win31-btn {
  width: 16px;
  height: 15px;
  background: var(--win-bg);
  border-top: 1px solid var(--win-border-light);
  border-left: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
}

.win31-btn:active {
  border-top: 1px solid var(--win-border-dark);
  border-left: 1px solid var(--win-border-dark);
  border-right: 1px solid var(--win-border-light);
  border-bottom: 1px solid var(--win-border-light);
}

/* Menu Bar */
.win31-menubar {
  display: flex;
  background: var(--win-bg);
  border-bottom: 1px solid var(--win-border-dark);
  padding: 1px 4px;
}

.win31-menu-item {
  padding: 2px 6px;
  cursor: pointer;
  position: relative;
}

.win31-menu-item:hover, .win31-menu-item.active {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

/* Dropdown Menu */
.win31-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: var(--win-bg);
  border: 1px solid var(--win-border-dark);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  padding: 1px 0;
  z-index: 1000;
}

.win31-dropdown.open {
  display: flex;
}

.win31-dropdown-item {
  padding: 3px 12px;
  color: #000000;
  cursor: pointer;
  display: block;
  white-space: nowrap;
  clear: both;
}

.win31-dropdown-item span {
  float: right;
  padding-left: 24px;
}

.win31-dropdown-item:hover {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

.win31-dropdown-sep {
  height: 1px;
  background: var(--win-border-shadow);
  border-bottom: 1px solid var(--win-border-light);
  margin: 2px 1px;
}

/* Window Client Content */
.win31-content {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--win-border-shadow);
  overflow: auto;
  position: relative;
}

/* --------------------------------------------------------------------------
   4. Program Manager (PROGMAN.EXE) Client Area
   -------------------------------------------------------------------------- */
.progman-client {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* MDI Sub-Windows inside Program Manager */
.progman-group-window {
  position: absolute;
  background: var(--win-bg);
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #808080;
  display: flex;
  flex-direction: column;
  padding: 2px;
  z-index: 10;
}

.progman-group-window.active {
  z-index: 20;
}

.progman-group-window.active .win31-titlebar {
  background-color: var(--win-title-active);
  color: var(--win-title-active-text);
}

.progman-group-content {
  flex: 1;
  background: #ffffff;
  border: 1px solid #808080;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
  align-content: flex-start;
  overflow: hidden;
}

#grp-win-main .progman-group-content,
#grp-win-portfolio .progman-group-content {
  grid-template-columns: repeat(4, 1fr);
}

#grp-win-games .progman-group-content {
  grid-template-columns: repeat(3, 1fr);
}

#grp-win-accessories .progman-group-content {
  grid-template-columns: repeat(3, 1fr);
}

#grp-win-themes .progman-group-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  padding: 6px 4px;
  overflow: hidden;
}

#grp-win-themes .progman-item {
  flex: 1;
  max-width: 95px;
}


/* Program Item Icon in Group */
.progman-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 4px 2px;
}

.progman-item img, .progman-item svg {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-bottom: 2px;
}

.progman-item span {
  font-size: 11px;
  color: #000000;
  padding: 1px 3px;
  line-height: 1.1;
  word-break: break-word;
}

.progman-item:hover span, .progman-item.selected span {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

/* Minimized MDI Group Icons inside Program Manager */
.progman-minimized-tray {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  display: flex;
  gap: 12px;
  pointer-events: none;
}

.progman-group-min-icon {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 65px;
  text-align: center;
}

.progman-group-min-icon img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}

.progman-group-min-icon span {
  font-size: 10px;
  padding: 0 3px;
  color: #000000;
  background: #ffffff;
  border: 1px solid #808080;
  white-space: nowrap;
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progman-group-min-icon:hover span,
.progman-group-min-icon.selected span {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

/* --------------------------------------------------------------------------
   5. Classic Windows 3.1 Minesweeper (WINMINE.EXE)
   -------------------------------------------------------------------------- */
.minesweeper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--win-bg);
  padding: 6px;
  border: 3px solid var(--win-bg);
}

.minesweeper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--win-bg);
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  padding: 4px 6px;
  margin-bottom: 6px;
}

/* 7-Segment Digital LED Display */
.minesweeper-led {
  background: #000000;
  border: 1px solid #808080;
  color: #ff0000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 1px 4px;
  min-width: 44px;
  text-align: right;
  line-height: 1;
}

/* Yellow Smiley Face Button */
.minesweeper-face-btn {
  width: 26px;
  height: 26px;
  background: var(--win-bg);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.minesweeper-face-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* Grid Board */
.minesweeper-grid {
  display: grid;
  border-top: 3px solid #808080;
  border-left: 3px solid #808080;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  background: #808080;
  gap: 0;
}

.mine-cell {
  width: 18px;
  height: 18px;
  background: var(--win-bg);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.mine-cell.revealed {
  border: 1px solid #7b7b7b;
  background: #c0c0c0;
}

.mine-cell.mine-hit {
  background: #ff0000;
}

/* Number Colors */
.mine-cell.n1 { color: #0000ff; }
.mine-cell.n2 { color: #008000; }
.mine-cell.n3 { color: #ff0000; }
.mine-cell.n4 { color: #000080; }
.mine-cell.n5 { color: #800000; }
.mine-cell.n6 { color: #008080; }
.mine-cell.n7 { color: #000000; }
.mine-cell.n8 { color: #808080; }

/* --------------------------------------------------------------------------
   6. SkiFree (SKIFREE.EXE)
   -------------------------------------------------------------------------- */
.skifree-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

.skifree-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.skifree-hud {
  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: space-between;
  background: rgba(192, 192, 192, 0.85);
  border: 1px solid #000000;
  padding: 2px 8px;
  font-family: var(--win-font-mono);
  font-size: 11px;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   7. WinWeb / NCSA Mosaic 1.0 Retro 16-Bit Browser
   -------------------------------------------------------------------------- */
.mosaic-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
}

.mosaic-toolbar {
  display: flex;
  align-items: center;
  background: var(--win-bg);
  border-bottom: 1px solid #808080;
  padding: 3px 6px;
  gap: 6px;
}

.mosaic-btn {
  padding: 2px 8px;
  background: var(--win-bg);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  cursor: pointer;
  font-size: 11px;
}

.mosaic-btn:active {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.mosaic-url-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--win-bg);
  padding: 2px 6px;
  border-bottom: 1px solid #808080;
}

.mosaic-url-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 2px 4px;
  font-family: var(--win-font-mono);
  font-size: 11px;
  outline: none;
}

.mosaic-page {
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: #ffffff;
  color: #000000;
  font-family: 'Times New Roman', Times, serif;
}

.mosaic-page h1, .mosaic-page h2, .mosaic-page h3 {
  font-family: Arial, sans-serif;
  color: #0000aa;
  border-bottom: 1px solid #0000aa;
  padding-bottom: 2px;
  margin: 12px 0 6px 0;
}

/* --------------------------------------------------------------------------
   8. File Manager (WINFILE.EXE)
   -------------------------------------------------------------------------- */
.fileman-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fileman-drive-bar {
  display: flex;
  gap: 6px;
  background: var(--win-bg);
  border-bottom: 1px solid #808080;
  padding: 3px 6px;
}

.fileman-drive-btn {
  padding: 1px 6px;
  background: var(--win-bg);
  border: 1px solid #808080;
  cursor: pointer;
  font-family: var(--win-font-mono);
  font-size: 11px;
}

.fileman-drive-btn.active {
  border: 1px solid #000000;
  background: #ffffff;
}

.fileman-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fileman-tree {
  width: 40%;
  border-right: 1px solid #808080;
  background: #ffffff;
  overflow: auto;
  padding: 6px;
  font-family: var(--win-font-mono);
  font-size: 11px;
}

.fileman-list {
  flex: 1;
  background: #ffffff;
  overflow: auto;
  padding: 6px;
  font-family: var(--win-font-mono);
  font-size: 11px;
}

.fileman-tree-item, .fileman-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 3px;
  cursor: pointer;
}

.fileman-tree-item:hover, .fileman-list-item:hover,
.fileman-tree-item.selected, .fileman-list-item.selected {
  background: var(--win-highlight);
  color: var(--win-highlight-text);
}

/* --------------------------------------------------------------------------
   9. Dialog Windows & Message Boxes
   -------------------------------------------------------------------------- */
.win31-dialog-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--win-bg);
}

.win31-button {
  min-width: 65px;
  padding: 4px 10px;
  background: var(--win-bg);
  border-top: 1px solid var(--win-border-light);
  border-left: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  font-family: var(--win-font);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}

.win31-button:active {
  border-top: 1px solid var(--win-border-dark);
  border-left: 1px solid var(--win-border-dark);
  border-right: 1px solid var(--win-border-light);
  border-bottom: 1px solid var(--win-border-light);
}

.win31-button.default {
  border-top: 2px solid var(--win-border-light);
  border-left: 2px solid var(--win-border-light);
  border-right: 2px solid var(--win-border-dark);
  border-bottom: 2px solid var(--win-border-dark);
  font-weight: bold;
  outline: 1px dotted #000000;
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   10. Windows 3.1 Themed Notifications & Message Boxes
   -------------------------------------------------------------------------- */
.win31-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.win31-message-box {
  background: var(--win-bg);
  border-top: 2px solid var(--win-border-light);
  border-left: 2px solid var(--win-border-light);
  border-right: 2px solid var(--win-border-dark);
  border-bottom: 2px solid var(--win-border-dark);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6);
  min-width: 320px;
  max-width: 460px;
  width: auto;
  display: flex;
  flex-direction: column;
  animation: win31DialogPop 0.05s ease-out;
}

@keyframes win31DialogPop {
  0% { transform: scale(0.98); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.win31-message-box .win31-titlebar {
  background: var(--win-title-active);
  color: var(--win-title-active-text);
  font-weight: bold;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.win31-message-box .win31-title-text {
  flex: 1;
  font-size: 11px;
  font-weight: bold;
  padding-left: 4px;
}

.win31-message-box-body {
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--win-bg);
  min-height: 56px;
}

.win31-message-box-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.win31-message-box-text {
  flex: 1;
  font-family: var(--win-font);
  font-size: 11px;
  line-height: 1.45;
  color: var(--win-fg);
  white-space: pre-wrap;
  user-select: text;
}

.win31-message-box-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 4px 16px 14px 16px;
  background: var(--win-bg);
}

/* --------------------------------------------------------------------------
   11. Authentic Windows 3.1 Calculator (CALC.EXE) Styles
   -------------------------------------------------------------------------- */
.calc-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--win-bg);
  padding: 6px 8px 8px 8px;
  gap: 6px;
  user-select: none;
  overflow: hidden;
}

.calc-display-box {
  background: #ffffff;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #808080;
  padding: 2px 6px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.calc-display-text {
  font-family: var(--win-font-mono);
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
}

.calc-ctrl-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.calc-mem-box {
  width: 32px;
  height: 25px;
  background: var(--win-bg);
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--win-font);
  font-size: 12px;
  font-weight: bold;
  color: #c00000;
  flex-shrink: 0;
}

.calc-btn-ctrl {
  flex: 1;
  height: 25px;
  min-width: 0 !important;
  padding: 0 !important;
  background: var(--win-bg);
  border-top: 1px solid var(--win-border-light);
  border-left: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  box-shadow: 1px 1px 0 var(--win-border-shadow);
  font-family: var(--win-font);
  font-size: 11px;
  font-weight: bold;
  color: #800000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-btn-ctrl:active, .calc-btn:active {
  border-top: 1px solid var(--win-border-dark);
  border-left: 1px solid var(--win-border-dark);
  border-right: 1px solid var(--win-border-light);
  border-bottom: 1px solid var(--win-border-light);
  box-shadow: none;
}

.calc-main-body {
  display: flex;
  gap: 5px;
  flex: 1;
}

.calc-mem-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 32px;
  flex-shrink: 0;
}

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

.calc-btn {
  height: 25px;
  min-width: 0 !important;
  padding: 0 !important;
  background: var(--win-bg);
  border-top: 1px solid var(--win-border-light);
  border-left: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  box-shadow: 1px 1px 0 var(--win-border-shadow);
  font-family: var(--win-font);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-btn.num {
  color: #0000ff; /* Authentic Windows 3.1 Blue Numbers */
}

.calc-btn.op {
  color: #c00000; /* Authentic Windows 3.1 Red Operators */
}

.calc-btn.fn {
  color: #0000ff; /* Blue Functions */
}

.calc-btn.mem {
  color: #c00000; /* Red Memory Buttons */
}

.calc-btn.default {
  border-top: 2px solid var(--win-border-light);
  border-left: 2px solid var(--win-border-light);
  border-right: 2px solid var(--win-border-dark);
  border-bottom: 2px solid var(--win-border-dark);
  outline: 1px dotted #000000;
  outline-offset: -3px;
}