/* ===== Windows 95 chrome: bevels, windows, taskbar, menus ===== */
:root {
  --face: #c0c0c0; --face-hi: #dfdfdf; --face-lo: #808080; --edge-hi: #ffffff; --edge-lo: #000000;
  --title-a: #000080; --title-b: #1084d0; --title-ina: #7b7b7b;
  --ui-font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--ui-font); font-size: 11px; background: #008080; color: #000;
  -webkit-font-smoothing: none; user-select: none; }
img { -webkit-user-drag: none; }
button, input, select, textarea { font-family: var(--ui-font); font-size: 11px; }

/* ---- bevel primitives ---- */
.bevel-out { border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); }
.bevel-in { border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--edge-lo), inset -1px -1px var(--face-hi); }
.groove { border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo); }

.btn { background: var(--face); padding: 3px 10px; cursor: default; min-width: 44px; text-align: center;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); }
.btn:active, .btn.pressed { border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  box-shadow: inset 1px 1px var(--face-lo), inset -1px -1px var(--face-hi); }
.btn:active > *, .btn.pressed > * { transform: translate(1px, 1px); }
.btn.disabled { color: #808080; text-shadow: 1px 1px #fff; pointer-events: none; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* ---- desktop ---- */
#desktop { position: absolute; inset: 0 0 28px 0; overflow: hidden;
  background: #008080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23008080'/%3E%3Crect width='2' height='2' fill='%23007878'/%3E%3C/svg%3E"); }
.desk-icon { position: absolute; width: 74px; text-align: center; cursor: default; padding: 4px 2px; }
.desk-icon .icn { width: 32px; height: 32px; margin: 0 auto 3px; }
.desk-icon .lbl { color: #fff; font-size: 11px; line-height: 1.15; padding: 1px 2px; display: inline-block; }
.desk-icon.selected .lbl { background: #000080; }
.desk-icon.selected .icn { filter: drop-shadow(0 0 0 #000080); opacity: .8; }

/* ---- taskbar ---- */
#taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: var(--face);
  border-top: 1px solid var(--edge-hi); display: flex; align-items: center; padding: 2px 3px; gap: 3px; z-index: 9000; }
#start-btn { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; font-weight: bold; }
#start-btn .flag { width: 18px; height: 14px; }
#taskbtns { flex: 1; display: flex; gap: 3px; overflow: hidden; }
.taskbtn { display: flex; align-items: center; gap: 5px; padding: 2px 8px; max-width: 180px; min-width: 110px;
  background: var(--face); border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); cursor: default;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskbtn.active { border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  box-shadow: inset 1px 1px var(--face-lo), inset -1px -1px var(--face-hi); font-weight: bold;
  background: repeating-linear-gradient(45deg, var(--face), var(--face) 3px, #d4d4d4 3px, #d4d4d4 4px); }
.taskbtn .tic { width: 16px; height: 16px; flex: none; }
#clock { padding: 2px 10px; border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--edge-lo), inset -1px -1px var(--face-hi); margin-left: auto; }

/* ---- start menu ---- */
#startmenu { position: absolute; left: 0; bottom: 28px; width: 200px; background: var(--face); z-index: 9500;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo), 3px 3px 6px rgba(0,0,0,.35);
  display: flex; }
#startmenu .side { width: 22px; background: linear-gradient(#000080, #1084d0); writing-mode: vertical-rl;
  transform: rotate(180deg); color: #e8e8e8; font-weight: bold; font-size: 14px; padding: 8px 3px;
  letter-spacing: 1px; }
#startmenu .items { flex: 1; padding: 3px 0; }
.sm-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; }
.sm-item:hover { background: #000080; color: #fff; }
.sm-item .sic { width: 20px; height: 20px; flex: none; }
.sm-sep { border-top: 1px solid var(--face-lo); border-bottom: 1px solid var(--edge-hi); margin: 3px 2px; }

/* ---- windows ---- */
.win { position: absolute; background: var(--face); display: flex; flex-direction: column; min-width: 200px; min-height: 120px;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo), 2px 2px 0 rgba(0,0,0,.4); }
.win.inactive .titlebar { background: linear-gradient(90deg, var(--title-ina), #a8a8a8); }
.win.inactive .titlebar .titletext { color: #d8d8d8; }
.titlebar { display: flex; align-items: center; height: 20px; padding: 2px 2px 2px 3px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: #fff; cursor: default; flex: none; }
.titlebar .tic { width: 16px; height: 16px; margin-right: 3px; flex: none; }
.titlebar .titletext { flex: 1; font-weight: bold; font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; letter-spacing: .2px; }
.titlebar .tbtns { display: flex; gap: 2px; }
.tbtn { width: 16px; height: 14px; background: var(--face); display: flex; align-items: center; justify-content: center;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); }
.tbtn:active { border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  box-shadow: inset 1px 1px var(--face-lo); }
.tbtn svg { width: 10px; height: 10px; }
.winbody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.resize-se, .resize-s, .resize-e { position: absolute; z-index: 5; }
.resize-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.resize-s { left: 6px; right: 6px; bottom: 0; height: 5px; cursor: ns-resize; }
.resize-e { top: 6px; bottom: 6px; right: 0; width: 5px; cursor: ew-resize; }

/* ---- menus ---- */
.menubar { display: flex; padding: 1px 2px; background: var(--face); flex: none; }
.menu-title { padding: 3px 7px; }
.menu-title:hover, .menu-title.open { background: #000080; color: #fff; }
.menu-popup { position: fixed; z-index: 9800; background: var(--face); min-width: 170px; padding: 2px;
  border: 1px solid; border-color: var(--face-hi) var(--edge-lo) var(--edge-lo) var(--face-hi);
  box-shadow: inset 1px 1px var(--edge-hi), inset -1px -1px var(--face-lo), 3px 3px 6px rgba(0,0,0,.3); }
.mi { display: flex; align-items: center; gap: 6px; padding: 4px 22px 4px 8px; position: relative; }
.mi:hover { background: #000080; color: #fff; }
.mi.disabled { color: #808080; text-shadow: 1px 1px var(--face-hi); }
.mi.disabled:hover { background: none; color: #808080; }
.mi .ck { width: 12px; }
.mi .sc { margin-left: auto; color: inherit; opacity: .7; }
.mi-sep { border-top: 1px solid var(--face-lo); border-bottom: 1px solid var(--edge-hi); margin: 2px 2px; }

/* ---- dialogs ---- */
.dlg-veil { position: fixed; inset: 0; z-index: 9700; }
.dialog { background: var(--face); padding: 2px;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo), 3px 3px 8px rgba(0,0,0,.4); }
.dlg-content { padding: 12px 14px; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px 10px; }

/* ---- status bar ---- */
.statusbar { display: flex; gap: 2px; padding: 2px; background: var(--face); flex: none; }
.statusbar .cell { border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--edge-lo), inset -1px -1px var(--face-hi);
  padding: 1px 7px; min-height: 16px; display: flex; align-items: center; }
.statusbar .cell.grow { flex: 1; }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #d6d3ce url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23c0c0c0'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-thumb { background: var(--face);
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); }
::-webkit-scrollbar-button { background: var(--face); width: 16px; height: 16px;
  border: 1px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  box-shadow: inset 1px 1px var(--face-hi), inset -1px -1px var(--face-lo); }

/* ---- misc ---- */
input[type=text], textarea, .sunken { background: #fff; color: #000;
  border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--edge-lo), inset -1px -1px var(--face-hi); padding: 2px 4px; }
input[type=text]:focus { outline: none; }
.progress { height: 16px; background: #fff; padding: 2px;
  border: 1px solid; border-color: var(--face-lo) var(--edge-hi) var(--edge-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--edge-lo), inset -1px -1px var(--face-hi); }
.progress > .bar { height: 100%; background: repeating-linear-gradient(90deg, #000080 0 8px, #000080 8px, #000080 9px, transparent 9px, transparent 11px); width: 0%; }
.tooltip { position: fixed; z-index: 9900; background: #ffffe1; border: 1px solid #000; padding: 2px 6px;
  font-size: 11px; pointer-events: none; }
.hidden { display: none !important; }