@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'MS-SansSerif';
  src: url('Font/ms-sans-serif-1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body {
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  background: #000;
  user-select: none;
}


#sim {
  position: absolute;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  transform-origin: top left;
  left: 0; top: 0;
}


#boot-screen {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.boot-loading-icon {
  width: 320px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.boot-text-bar {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #c0c0c0;
  letter-spacing: 1px;
  white-space: pre;
}


#desktop {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 28px;
  background: #020030;
  display: none;
  overflow: hidden;
}
#desktop.visible { display: block; }


.icon {
  position: absolute;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 2px;
  cursor: pointer;
}
.icon-img {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-img img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  pointer-events: none;
}
.icon-label {
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  word-break: break-word;
  line-height: 1.25;
  padding: 1px 3px;
  max-width: 74px;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}
.icon.selected .icon-label {
  background: #000080;
  outline: 1px dotted #c0c0c0;
  text-shadow: none;
}


.pwin {
  position: absolute;
  width: 162px;
  box-shadow: 3px 4px 8px rgba(0,0,0,0.5);
  z-index: 10;
}
.pwin-bar {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2px;
  gap: 1px;
  cursor: move;
}
.pwin-btn {
  width: 11px;
  height: 9px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  color: #000;
  font-size: 7px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: Arial, sans-serif;
}
.pwin-btn:active { border-color: #404040 #ffffff #ffffff #404040; }
.pwin-body {
  padding: 7px 9px 12px;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  line-height: 1.5;
}


#taskbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  display: flex;
  align-items: center;
  padding: 2px 3px;
  gap: 3px;
  z-index: 9000;
}
#start-btn {
  height: 22px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  white-space: nowrap;
  outline: none;
}
#start-btn img { width: 16px; height: 16px; image-rendering: pixelated; }
#start-btn:active, #start-btn.active {
  border-color: #404040 #ffffff #ffffff #404040;
  padding-top: 1px;
}
.sep {
  width: 4px;
  height: 20px;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  flex-shrink: 0;
}
#tray-windows {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  height: 24px;
}
.tray-btn {
  height: 20px;
  min-width: 110px;
  max-width: 150px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-size: 10px;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tray-btn.active { border-color: #808080 #ffffff #ffffff #808080; background: #b0b0b0; }
#sys-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
#clock { font-size: 11px; }


#start-menu {
  display: none;
  position: absolute;
  bottom: 28px;
  left: 0;
  width: 210px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  z-index: 9500;
  flex-direction: row;
}
#start-menu.open { display: flex; }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px 0; }
.si {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.si:hover { background: #000080; color: #ffffff; }
.si-txt { font-size: 11px; flex: 1; }
.si-arr::after { content: '▶'; font-size: 7px; position: absolute; right: 6px; }
.si-sep { height: 1px; background: #808080; box-shadow: 0 1px 0 #ffffff; margin: 3px 6px; }


.tdlg {
  position: absolute;
  background: #000000;
  border: 2px solid #c0c0c0;
  display: none;
  min-width: 260px;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
}
.tdlg.open { display: block; }
.tdlg-bar {
  background: #000080;
  color: #ffffff;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  padding: 3px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  height: 22px;
}
.tdlg-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tdlg-btns { display: flex; gap: 2px; flex-shrink: 0; }
.tdlg-btn {
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  width: 16px;
  height: 14px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: Arial, sans-serif;
}
.tdlg-btn:active { border-color: #808080 #ffffff #ffffff #808080; }
.tdlg-body {
  background: #000000;
  padding: 6px 8px 10px;
}
.tdlg-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.tdlg-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  image-rendering: pixelated;
  margin-top: 1px;
}
.tdlg-msg {
  color: #c0c0c0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  flex: 1;
}
.tdlg-actions { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
.tdlg-ok {
  min-width: 60px;
  height: 20px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #000000;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
  padding: 0 10px;
}
.tdlg-ok:active { border-color: #808080 #ffffff #ffffff #808080; }
.tdlg-select {
  width: 100%;
  height: 22px;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  background: #000;
  color: #c0c0c0;
  border: 1px solid #c0c0c0;
  outline: none;
}


.w98win {
  position: absolute;
  background: #000;
  border: 2px solid #c0c0c0;
  display: none;
  flex-direction: column;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
}
.w98win.open { display: flex; }

.w98bar {
  background: #000080;
  color: #fff;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 2px 0 4px;
  cursor: move;
  flex-shrink: 0;
  gap: 3px;
}
.w98bar-title { flex: 1; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w98bar-btns  { display: flex; gap: 2px; flex-shrink: 0; }
.w98bar-btn {
  width: 16px; height: 14px;
  background: #c0c0c0; color: #000;
  border: 1px solid; border-color: #fff #808080 #808080 #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 10px; font-family: Arial, sans-serif;
}
.w98bar-btn:active { border-color: #808080 #fff #fff #808080; }

.w98menu { background: #000; border-bottom: 1px solid #c0c0c0; display: flex; padding: 1px 2px; flex-shrink: 0; }
.w98mi { padding: 2px 6px; cursor: pointer; font-size: 11px; white-space: nowrap; color: #c0c0c0; }
.w98mi:hover { background: #000080; color: #fff; }

.w98addr {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 4px; border-bottom: 1px solid #c0c0c0;
  flex-shrink: 0; background: #000; color: #c0c0c0;
}
.w98addr input {
  flex: 1; height: 18px;
  border: 1px solid #c0c0c0;
  background: #000; color: #c0c0c0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; padding: 0 3px; outline: none;
}

.w98explorer {
  flex: 1; background: #000;
  border: 1px solid #c0c0c0;
  overflow: auto; display: flex; flex-wrap: wrap;
  align-content: flex-start; padding: 6px; gap: 4px; margin: 3px;
}
.w98file { width: 80px; display: flex; flex-direction: column; align-items: center; padding: 4px 2px; cursor: pointer; gap: 3px; }
.w98file:hover, .w98file.sel { background: #000080; }
.w98file img  { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.w98file span { font-size: 10px; text-align: center; word-break: break-word; line-height: 1.2; pointer-events: none; color: #c0c0c0; }

.w98status { display: flex; border-top: 1px solid #c0c0c0; padding: 2px 3px; gap: 3px; flex-shrink: 0; background: #000; }
.w98sp { border: 1px solid #c0c0c0; padding: 0 4px; font-size: 10px; color: #c0c0c0; }


#win-notepad   { width: 520px; height: 400px; }
#win-fileviewer { width: 580px; height: 460px; }
#fileviewer-text { font-family: 'Courier New', Courier, monospace; font-size: 11px; }
.notepad-area {
  flex: 1; background: #000; color: #c0c0c0;
  border: 1px solid #c0c0c0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 12px; resize: none; outline: none;
  padding: 4px; margin: 3px; width: calc(100% - 6px);
  user-select: text; caret-color: #c0c0c0;
}


#win-regedit { width: 620px; height: 440px; }
.regedit-wrap { flex: 1; display: flex; overflow: hidden; margin: 3px; gap: 2px; }
.regedit-tree {
  width: 220px; flex-shrink: 0;
  border: 1px solid #c0c0c0;
  background: #000; color: #c0c0c0; overflow: auto; padding: 2px;
  font-size: 11px; cursor: default;
}
.regedit-vals {
  flex: 1;
  border: 1px solid #c0c0c0;
  background: #000; overflow: auto;
}
.reg-node { display: flex; align-items: center; gap: 2px; padding: 1px 2px; white-space: nowrap; user-select: none; color: #c0c0c0; }
.reg-node:hover { background: #000080; color: #fff; }
.reg-node.sel  { background: #000080; color: #fff; }
.reg-tog  { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; font-size: 9px; cursor: pointer; flex-shrink: 0; }
.reg-ico  { font-size: 12px; flex-shrink: 0; }
.reg-children { padding-left: 14px; display: none; }
.reg-children.open { display: block; }
.reg-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.reg-table th { background: #0d0d0d; color: #c0c0c0; border: 1px solid #c0c0c0; padding: 2px 8px; text-align: left; font-weight: bold; position: sticky; top: 0; white-space: nowrap; }
.reg-table td { border-bottom: 1px solid #1a1a1a; padding: 1px 8px; white-space: nowrap; color: #c0c0c0; }
.reg-table tr:hover td { background: #000080; color: #fff; }


#win-cmd { width: 580px; height: 400px; }
.cmd-wrap {
  flex: 1; background: #000;
  overflow-y: auto; padding: 4px 6px;
  display: flex; flex-direction: column;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 13px; color: #c0c0c0;
}
.cmd-out  { white-space: pre-wrap; word-break: break-all; line-height: 1.45; }
.cmd-row  { display: flex; align-items: center; }
#cmd-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #c0c0c0; font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 13px; caret-color: #c0c0c0; line-height: 1.45;
  user-select: text;
}


#win-mycomputer { width: 460px; height: 320px; }
#win-mydocs     { width: 460px; height: 320px; }


#win-paint { width: 660px; height: 500px; }
.paint-layout { flex: 1; display: flex; overflow: hidden; }
.paint-tools {
  display: flex; flex-direction: column; flex-shrink: 0;
  background: #000; border-right: 1px solid #c0c0c0;
  padding: 2px; gap: 2px; width: 36px;
}
.paint-tool-btn {
  width: 28px; height: 28px; background: #ffffff;
  border: 1px solid #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.paint-tool-btn.active { background: #000080; }
.paint-tool-btn img { width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; display: block; }
#paint-line { color: #000000; }
#paint-text-input {
  position: absolute;
  display: none;
  border: 1px dashed #808080;
  outline: none;
  background: transparent;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 14px;
  min-width: 60px;
  padding: 0 2px;
  user-select: text;
}
.paint-canvas-area { flex: 1; background: #404040; overflow: auto; padding: 6px; display: flex; align-items: flex-start; }
#paint-canvas { cursor: crosshair; display: block; }
.paint-bottom {
  display: flex; align-items: center;
  border-top: 1px solid #c0c0c0; background: #000;
  padding: 3px 4px; flex-shrink: 0; gap: 6px;
}
.paint-cur { position: relative; width: 34px; height: 26px; flex-shrink: 0; }
.paint-cfg { position: absolute; width: 20px; height: 20px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.paint-cfg.fg { top: 0; left: 0; z-index: 2; }
.paint-cfg.bg { bottom: 0; right: 0; z-index: 1; }
.paint-palette { display: flex; flex-wrap: wrap; gap: 1px; }
.paint-swatch { width: 14px; height: 14px; border: 1px solid; border-color: #808080 #fff #fff #808080; cursor: pointer; flex-shrink: 0; }
.paint-swatch:hover { border-color: #fff #808080 #808080 #fff; }


#win-wmp { width: 380px; height: 260px; }
.wmp-wrap { flex: 1; background: #1a1a2e; display: flex; flex-direction: column; padding: 4px; gap: 3px; }
.wmp-display {
  flex: 1; background: #000; border: 2px solid #333;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #006600; font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif; font-size: 11px; text-align: center; line-height: 1.6;
}
.wmp-controls { display: flex; align-items: center; gap: 3px; background: #252540; padding: 4px; border: 1px solid #333; }
.wmp-btn {
  background: #2a2a4a; color: #a0a0c0;
  border: 1px solid; border-color: #555 #222 #222 #555;
  width: 26px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 10px;
}
.wmp-btn:active { border-color: #222 #555 #555 #222; }
.wmp-seek { flex: 1; height: 8px; background: #0a0a1a; border: 1px solid #333; }
.wmp-vol-row { display: flex; align-items: center; gap: 4px; background: #252540; padding: 2px 4px; border: 1px solid #333; }
.wmp-vol-lbl { color: #606080; font-size: 10px; font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif; }
.wmp-vol-bar { flex: 1; height: 6px; background: #0a0a1a; border: 1px solid #333; }
.wmp-vol-fill { height: 100%; width: 70%; background: #005500; }


#win-puppetlink { width: 520px; max-height: 600px; }
.pl-body { padding: 14px 18px 12px; display: flex; flex-direction: column; background: #000; gap: 10px; overflow-y: auto; max-height: 560px; }
.pl-section { display: flex; flex-direction: column; gap: 8px; }
.pl-section2 { display: none; }
.pl-section-label { color: #c0c0c0; font-size: 11px; }
.pl-input {
  width: 100%; background: #000; border: 1px solid #c0c0c0;
  color: #c0c0c0; font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; padding: 3px 6px; outline: none; user-select: text; caret-color: #c0c0c0;
}
.pl-input:focus { border-color: #fff; }
.pl-btn-row { display: flex; gap: 8px; align-items: center; }
.pl-submit, .pl-retrieve {
  background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff;
  color: #000; font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; padding: 3px 16px; cursor: pointer; outline: none; white-space: nowrap;
}
.pl-submit:active, .pl-retrieve:active { border-color: #404040 #fff #fff #404040; }
.pl-denied { color: #c00000; font-size: 10px; letter-spacing: 1px; display: none; }
.pl-log {
  width: 100%; height: 140px; background: #000; border: 1px solid #c0c0c0;
  color: #c0c0c0; font-family: 'Courier New', monospace; font-size: 10px;
  padding: 6px 8px; resize: none; outline: none; line-height: 1.6;
}
.pl-paste {
  width: 100%; height: 200px; background: #000; border: 1px solid #c0c0c0;
  color: #c0c0c0; font-family: 'Courier New', monospace; font-size: 10px;
  padding: 6px 8px; resize: vertical; outline: none; line-height: 1.6; user-select: text;
}
.pl-paste::placeholder { color: #444; }
.pl-result { display: none; color: #c0c0c0; font-size: 10px; }
#win-puzzle-board { width: 1024px; height: 740px; }
.pl-board-label { color: #c0c0c0; font-size: 11px; letter-spacing: 2px; margin-bottom: 8px; }
.pl-board-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pl-slot { width: 160px; height: 160px; border: 2px solid #444; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: default; }
.pl-slot.locked { border-color: #444; background: #0a0a0a; }
.pl-slot.unlocked { border-color: #c0c0c0; background: #111; }
.pl-slot-img { width: 80px; height: 80px; image-rendering: pixelated; }
.pl-slot-label { font-size: 10px; color: #666; letter-spacing: 1px; }
.pl-board-answer { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }


#win-recycle { width: 500px; height: 340px; }
.w98listview { flex: 1; background: #000; border: 1px solid #c0c0c0; overflow: auto; margin: 3px; }
.lv-table { width: 100%; border-collapse: collapse; }
.lv-table th { background: #0d0d0d; color: #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; padding: 2px 8px; text-align: left; font-size: 11px; font-weight: bold; white-space: nowrap; position: sticky; top: 0; }
.lv-table td { padding: 2px 8px; font-size: 11px; border-bottom: 1px solid #1a1a1a; white-space: nowrap; color: #c0c0c0; }
.lv-table tr:hover td { background: #000080; color: #fff; }


#ctx-menu {
  position: absolute; background: #c0c0c0;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  display: none; z-index: 99999; min-width: 140px; padding: 2px 0; font-size: 11px;
}
#ctx-menu.open { display: block; }
.ctx-item { padding: 3px 24px 3px 10px; cursor: pointer; white-space: nowrap; }
.ctx-item:hover { background: #000080; color: #fff; }
.ctx-sep  { height: 1px; background: #808080; box-shadow: 0 1px 0 #fff; margin: 3px 4px; }


.w98dropdown {
  position: absolute;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  display: none;
  z-index: 99998;
  min-width: 120px;
  padding: 2px 0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px;
}
.w98dropdown.open { display: block; }
.w98dd-item { padding: 3px 24px 3px 10px; cursor: pointer; color: #000; white-space: nowrap; }
.w98dd-item:hover { background: #000080; color: #fff; }
.w98dd-sep  { height: 1px; background: #808080; box-shadow: 0 1px 0 #fff; margin: 3px 4px; }


#dlg-file-open { width: 480px; height: 360px; }
.fo-lookbar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-bottom: 1px solid #c0c0c0;
  flex-shrink: 0; color: #c0c0c0; font-size: 11px;
}
.fo-lookbar select {
  background: #000; color: #c0c0c0; border: 1px solid #c0c0c0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; flex: 1; outline: none; height: 20px;
}
.fo-list {
  flex: 1; background: #000; border: 1px solid #c0c0c0;
  margin: 4px 6px; overflow: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start;
  padding: 4px; gap: 2px;
}
.fo-file-item { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; cursor: pointer; }
.fo-file-item:hover, .fo-file-item.sel { background: #000080; }
.fo-file-item img  { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.fo-file-item span { font-size: 10px; color: #c0c0c0; text-align: center; word-break: break-word; pointer-events: none; }
.fo-namebar { display: flex; align-items: center; gap: 6px; padding: 2px 6px; flex-shrink: 0; }
.fo-namebar label { font-size: 11px; color: #c0c0c0; width: 72px; flex-shrink: 0; }
.fo-namebar input {
  flex: 1; background: #000; color: #c0c0c0; border: 1px solid #c0c0c0;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; padding: 2px 4px; outline: none; height: 20px; user-select: text;
}
.fo-namebar button {
  background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font-family: 'MS-SansSerif', 'MS Sans Serif', 'Tahoma', Arial, sans-serif;
  font-size: 11px; padding: 2px 14px; cursor: pointer; height: 22px; white-space: nowrap;
}
.fo-namebar button:active { border-color: #404040 #fff #fff #404040; }


.win-folder { width: 460px; height: 320px; }


::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#c0c0c0 0% 25%, #ffffff 0% 50%) 0 0 / 4px 4px;
}
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: inset 1px 1px 0 #dfdfdf;
}
::-webkit-scrollbar-button {
  background: #c0c0c0;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #808080;
  border-bottom: 2px solid #808080;
  width: 17px; height: 17px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='4,1 8,8 0,8' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='4,8 0,1 8,1' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='1,4 8,0 8,8' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='8,4 1,0 1,8' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-corner { background: #c0c0c0; }