/* ============================================================
   Windows 3.11 Retro UI Theme
   使用方式: <link rel="stylesheet" href="win311.css">
   ============================================================ */

/* === CSS Variables === */
:root {
  /* --- Colors --- */
  --win-bg:              #fff;
  --win-fg:              #000;
  --win-grey:            #c0c0c0;
  --win-grey-light:      #dfdfdf;
  --win-grey-dark:       #808080;
  --win-grey-hover:      #b0b0b0;
  --win-title-active:    #000080;
  --win-title-inactive:  #c0c0c0;
  --win-select-bg:       #000080;
  --win-progress-color:  #000080;

  /* --- Desktop background --- */
  --win-desktop-bg: linear-gradient(180deg, #06061e 0%, #0e0e3a 20%, #1a1a54 40%, #2a3a72 60%, #3a5a90 80%, #4a7ab0 100%);

  /* --- Typography --- */
  --win-font-family: 'Fixedsys', 'Terminal', 'Courier New', monospace;
  --win-font-size:   15px;

  /* --- Window --- */
  --win-window-border-width: 3px;
  --win-window-padding:      10px 12px;

  /* --- Titlebar --- */
  --win-title-height:   22px;
  --win-title-font-size: 15px;
  --win-title-padding:   2px 4px;
  --win-title-btn-width:  20px;
  --win-title-btn-height: 18px;

  /* --- System menu --- */
  --win-sysmenu-width: 20px;
  --win-sysmenu-height: 18px;

  /* --- Menu bar --- */
  --win-menu-padding: 2px 9px;

  /* --- GroupBox --- */
  --win-groupbox-padding: 16px 12px 10px;
  --win-groupbox-margin:  12px 0;

  /* --- Button --- */
  --win-btn-padding:   4px 14px;
  --win-btn-min-width: 80px;

  /* --- Checkbox / Radio --- */
  --win-check-size: 13px;
  --win-check-gap:  6px;

  /* --- Scrollbar --- */
  --win-scrollbar-size: 17px;
  --win-scrollbar-thumb-border: 2px;
  --win-scrollbar-min-thumb: 20px;

  /* --- Progress --- */
  --win-progress-height: 18px;

  /* --- Slider --- */
  --win-slider-track-width: 120px;
  --win-slider-thumb-width: 11px;
  --win-slider-thumb-height: 20px;

  /* --- Table --- */
  --win-table-cell-padding: 3px 6px;

  /* --- Statusbar --- */
  --win-statusbar-padding: 2px 4px;

  /* --- Form layout --- */
  --win-form-row-gap:       7px;
  --win-form-row-margin:    6px;
  --win-form-label-width:   60px;
  --win-dialog-btn-gap:     7px;
  --win-dialog-btn-margin:  10px;

  /* --- 3D border colors (raised / sunken) --- */
  --win-raised-light: var(--win-grey-light);
  --win-raised-dark:  var(--win-grey-dark);
  --win-sunken-light: var(--win-grey-light);
  --win-sunken-dark:  var(--win-grey-dark);
}

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--win-desktop-bg);
  font-family: var(--win-font-family);
  font-size: var(--win-font-size);
  color: var(--win-fg);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* === Window === */
.win-window {
  position: absolute;
  background: var(--win-bg);
  border-style: solid;
  border-width: var(--win-window-border-width);
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  box-shadow: inset 1px 1px 0 var(--win-bg), inset -1px -1px 0 var(--win-grey-dark), 1px 1px 0 var(--win-fg);
}

/* === Titlebar === */
.win-titlebar {
  background: var(--win-title-active);
  color: var(--win-bg);
  font-size: var(--win-title-font-size);
  padding: var(--win-title-padding);
  display: flex;
  align-items: center;
  height: var(--win-title-height);
  cursor: default;
}
.win-titlebar.inactive {
  background: var(--win-title-inactive);
  color: var(--win-fg);
}

/* === System menu box - FLAT grey button on left === */
.win-sysmenu {
  width: var(--win-sysmenu-width);
  height: var(--win-sysmenu-height);
  background: var(--win-grey);
  border: 1px solid var(--win-fg);
  cursor: pointer;
  margin-right: 4px;
  flex-shrink: 0;
  position: relative;
}
.win-sysmenu::after {
  content: '';
  position: absolute;
  top: 50%; left: 3px;
  transform: translateY(-50%);
  width: 12px; height: 2px;
  background: var(--win-fg);
}

.win-title-text {
  flex: 1;
  padding-left: 3px;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
}

/* === Min/Max buttons === */
.win-title-btns { display: flex; gap: 2px; margin-left: 4px; }
.win-title-min, .win-title-max {
  width: var(--win-title-btn-width);
  height: var(--win-title-btn-height);
  background: var(--win-grey);
  border-style: solid;
  border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.win-title-min::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -30%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--win-fg);
}
.win-title-max::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -70%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--win-fg);
}

/* === Menu bar === */
.win-menubar {
  background: var(--win-bg);
  padding: 0;
  display: flex;
}
.win-menu-item {
  padding: var(--win-menu-padding);
  cursor: pointer;
  font-size: var(--win-font-size);
}
.win-menu-item:hover { background: var(--win-select-bg); color: var(--win-bg); }

/* === Window body === */
.win-body { padding: var(--win-window-padding); overflow: auto; }

/* === Scrollbar (shared mixin via .win-scroll) === */
.win-scroll::-webkit-scrollbar { width: var(--win-scrollbar-size); height: var(--win-scrollbar-size); }
.win-scroll::-webkit-scrollbar-track {
  background: var(--win-grey);
  border-left: 1px solid var(--win-grey-dark);
  border-top: 1px solid var(--win-grey-dark);
}
.win-scroll::-webkit-scrollbar-thumb {
  background: var(--win-grey);
  border-style: solid; border-width: var(--win-scrollbar-thumb-border);
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  min-height: var(--win-scrollbar-min-thumb); min-width: var(--win-scrollbar-min-thumb);
}
.win-scroll::-webkit-scrollbar-thumb:hover { background: var(--win-grey-hover); }
.win-scroll::-webkit-scrollbar-button {
  display: block; height: var(--win-scrollbar-size); width: var(--win-scrollbar-size);
  background-color: var(--win-grey);
  background-repeat: no-repeat;
  background-position: center center;
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
}
.win-scroll::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,0 7,5 0,5' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-scroll::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,5 0,0 7,0' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-scroll::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7'%3E%3Cpolygon points='0,3.5 5,0 5,7' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-scroll::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7'%3E%3Cpolygon points='5,3.5 0,0 0,7' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-scroll::-webkit-scrollbar-button:vertical:decrement:active,
.win-scroll::-webkit-scrollbar-button:vertical:increment:active,
.win-scroll::-webkit-scrollbar-button:horizontal:decrement:active,
.win-scroll::-webkit-scrollbar-button:horizontal:increment:active {
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
}
.win-scroll::-webkit-scrollbar-corner { background: var(--win-grey); border-style: solid; border-width: 1px; border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light); }
.win-scroll::-webkit-scrollbar-button:vertical:start:increment,
.win-scroll::-webkit-scrollbar-button:vertical:end:decrement,
.win-scroll::-webkit-scrollbar-button:horizontal:start:increment,
.win-scroll::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

/* Apply scrollbar to win-body and win-listbox */
.win-body::-webkit-scrollbar { width: var(--win-scrollbar-size); height: var(--win-scrollbar-size); }
.win-body::-webkit-scrollbar-track {
  background: var(--win-grey);
  border-left: 1px solid var(--win-grey-dark);
  border-top: 1px solid var(--win-grey-dark);
}
.win-body::-webkit-scrollbar-thumb {
  background: var(--win-grey);
  border-style: solid; border-width: var(--win-scrollbar-thumb-border);
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  min-height: var(--win-scrollbar-min-thumb); min-width: var(--win-scrollbar-min-thumb);
}
.win-body::-webkit-scrollbar-thumb:hover { background: var(--win-grey-hover); }
.win-body::-webkit-scrollbar-button {
  display: block; height: var(--win-scrollbar-size); width: var(--win-scrollbar-size);
  background-color: var(--win-grey); background-repeat: no-repeat; background-position: center center;
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
}
.win-body::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,0 7,5 0,5' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-body::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,5 0,0 7,0' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-body::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7'%3E%3Cpolygon points='0,3.5 5,0 5,7' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-body::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7'%3E%3Cpolygon points='5,3.5 0,0 0,7' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-body::-webkit-scrollbar-button:vertical:decrement:active,
.win-body::-webkit-scrollbar-button:vertical:increment:active,
.win-body::-webkit-scrollbar-button:horizontal:decrement:active,
.win-body::-webkit-scrollbar-button:horizontal:increment:active {
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
}
.win-body::-webkit-scrollbar-corner { background: var(--win-grey); border-style: solid; border-width: 1px; border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light); }
.win-body::-webkit-scrollbar-button:vertical:start:increment,
.win-body::-webkit-scrollbar-button:vertical:end:decrement,
.win-body::-webkit-scrollbar-button:horizontal:start:increment,
.win-body::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }

/* === GroupBox === */
.win-groupbox {
  border: 1px solid var(--win-grey-dark);
  padding: var(--win-groupbox-padding);
  margin: var(--win-groupbox-margin);
  position: relative;
}
.win-groupbox-title {
  position: absolute;
  top: -8px; left: 10px;
  background: var(--win-bg);
  padding: 0 5px;
  font-size: var(--win-font-size);
}

/* === Label === */
.win-label { font-size: var(--win-font-size); display: inline-block; vertical-align: middle; }

/* === TextBox === */
.win-textbox {
  background: var(--win-bg);
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 2px 5px;
  font-size: var(--win-font-size);
  font-family: inherit;
  outline: none;
  color: var(--win-fg);
}
.win-textarea {
  background: var(--win-bg);
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 3px 5px;
  font-size: var(--win-font-size);
  font-family: inherit;
  outline: none;
  resize: none;
  color: var(--win-fg);
}

/* === Button === */
.win-btn {
  background: var(--win-grey);
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  padding: var(--win-btn-padding);
  font-size: var(--win-font-size);
  font-family: inherit;
  cursor: pointer;
  color: var(--win-fg);
  min-width: var(--win-btn-min-width);
  text-align: center;
}
.win-btn:active {
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 5px 13px 3px 15px;
}
.win-btn.default-btn {
  border-width: 2px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  padding: 3px 13px;
}
.win-btn.default-btn:active {
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
}
.win-btn.disabled { color: var(--win-grey-dark); cursor: default; text-shadow: 1px 1px 0 var(--win-bg); }

/* === Checkbox === */
.win-checkbox {
  display: inline-flex; align-items: center;
  gap: var(--win-check-gap); cursor: pointer;
  font-size: var(--win-font-size); vertical-align: middle;
}
.win-checkbox input { display: none; }
.win-checkbox .box {
  width: var(--win-check-size); height: var(--win-check-size);
  background: var(--win-bg); border: 1px solid var(--win-fg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.win-checkbox input:checked + .box::after {
  content: 'X'; font-size: 11px; font-weight: bold; font-family: 'Courier New', monospace;
}
.win-checkbox.disabled { color: var(--win-grey-dark); cursor: default; text-shadow: 1px 1px 0 var(--win-bg); }
.win-checkbox.disabled .box { background: var(--win-grey); }

/* === Radio === */
.win-radio {
  display: inline-flex; align-items: center;
  gap: var(--win-check-gap); cursor: pointer;
  font-size: var(--win-font-size); vertical-align: middle;
}
.win-radio input { display: none; }
.win-radio .dot {
  width: var(--win-check-size); height: var(--win-check-size);
  background: var(--win-bg); border: 1px solid var(--win-fg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.win-radio input:checked + .dot::after {
  content: ''; width: 7px; height: 7px; background: var(--win-fg);
}
.win-radio.disabled { color: var(--win-grey-dark); cursor: default; text-shadow: 1px 1px 0 var(--win-bg); }
.win-radio.disabled .dot { background: var(--win-grey); }

/* === Dropdown === */
.win-select-wrap { display: inline-block; position: relative; vertical-align: middle; }
.win-select {
  background: var(--win-bg);
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 1px 20px 1px 4px;
  font-size: var(--win-font-size); font-family: inherit;
  outline: none; appearance: none; -webkit-appearance: none;
  cursor: pointer; color: var(--win-fg);
}
.win-select-arrow {
  position: absolute; right: 1px; top: 1px;
  width: 18px; height: calc(100% - 2px);
  background: var(--win-grey);
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: 9px;
}

/* === ListBox === */
.win-listbox {
  background: var(--win-bg);
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 0;
  font-size: var(--win-font-size); font-family: inherit;
  outline: none; overflow-y: auto;
}
.win-listbox-item { padding: 1px 4px; cursor: pointer; line-height: 1.5; }
.win-listbox-item:hover { background: var(--win-select-bg); color: var(--win-bg); }
.win-listbox-item.selected { background: var(--win-select-bg); color: var(--win-bg); }
.win-listbox::-webkit-scrollbar { width: var(--win-scrollbar-size); }
.win-listbox::-webkit-scrollbar-track { background: var(--win-grey); border-left: 1px solid var(--win-grey-dark); }
.win-listbox::-webkit-scrollbar-thumb {
  background: var(--win-grey); border-style: solid; border-width: var(--win-scrollbar-thumb-border);
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  min-height: var(--win-scrollbar-min-thumb);
}
.win-listbox::-webkit-scrollbar-thumb:hover { background: var(--win-grey-hover); }
.win-listbox::-webkit-scrollbar-button {
  display: block; height: var(--win-scrollbar-size); width: var(--win-scrollbar-size);
  background-color: var(--win-grey); background-repeat: no-repeat; background-position: center center;
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
}
.win-listbox::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,0 7,5 0,5' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-listbox::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpolygon points='3.5,5 0,0 7,0' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-color: var(--win-grey);
}
.win-listbox::-webkit-scrollbar-button:vertical:decrement:active,
.win-listbox::-webkit-scrollbar-button:vertical:increment:active {
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
}
.win-listbox::-webkit-scrollbar-corner { background: var(--win-grey); }
.win-listbox::-webkit-scrollbar-button:vertical:start:increment,
.win-listbox::-webkit-scrollbar-button:vertical:end:decrement { display: none; }

/* === Progress === */
.win-progress-wrap {
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  height: var(--win-progress-height); background: var(--win-grey); overflow: hidden;
}
.win-progress-bar { height: 100%; background: var(--win-progress-color); }

/* === Slider === */
.win-slider-track {
  height: 3px; background: var(--win-fg);
  width: var(--win-slider-track-width); position: relative;
  display: inline-block; vertical-align: middle;
}
.win-slider-thumb {
  width: var(--win-slider-thumb-width);
  height: var(--win-slider-thumb-height);
  background: var(--win-grey);
  border-style: solid; border-width: 1px;
  border-color: var(--win-raised-light) var(--win-raised-dark) var(--win-raised-dark) var(--win-raised-light);
  position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer;
}

/* === Table === */
.win-table {
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  background: var(--win-bg); border-collapse: collapse;
  font-size: var(--win-font-size); width: 100%;
}
.win-table th {
  background: var(--win-grey); border: 1px solid var(--win-grey-dark);
  padding: var(--win-table-cell-padding); text-align: left; font-weight: bold;
}
.win-table td { border: 1px solid var(--win-grey-dark); padding: var(--win-table-cell-padding); }
.win-table tr:hover td { background: var(--win-select-bg); color: var(--win-bg); }

/* === Status bar === */
.win-statusbar {
  border-top: 1px solid var(--win-grey-dark);
  padding: var(--win-statusbar-padding); display: flex; gap: 4px; font-size: var(--win-font-size);
}
.win-statusbar-cell {
  border-style: solid; border-width: 1px;
  border-color: var(--win-grey-dark) var(--win-grey-light) var(--win-grey-light) var(--win-grey-dark);
  padding: 1px 4px; flex: 1;
}

/* === Separator === */
.win-separator {
  height: 0; border-top: 1px solid var(--win-grey-dark);
  border-bottom: 1px solid var(--win-grey-light); margin: 7px 0;
}

/* === Form layout helpers === */
.form-row { display: flex; align-items: center; gap: var(--win-form-row-gap); margin-bottom: var(--win-form-row-margin); flex-wrap: wrap; }
.form-row label { min-width: var(--win-form-label-width); text-align: right; }
.form-col { display: flex; flex-direction: column; gap: 3px; }
.dialog-btns { display: flex; justify-content: center; gap: var(--win-dialog-btn-gap); margin-top: var(--win-dialog-btn-margin); }