/* WinOops windows */
#windows { position: absolute; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  background: var(--surface); border: 4px solid var(--frame); border-top: 0; border-radius: var(--radius-window) var(--radius-window) 0 0;
  box-shadow: var(--shadow-win);
}
.win.max { border-radius: 0; box-shadow: none; border-width: 0 0 0 0; }
.win.inactive { border-color: var(--frame-inactive); box-shadow: 0 0 0 1px #5d6c9e, 2px 3px 7px rgba(0, 0, 0, .3); }
.win.minimized { display: none; }
.win .titlebar {
  height: var(--titlebar-h); flex: none; display: flex; align-items: center; padding: 0 3px 0 5px; margin: 0 -4px; gap: 5px;
  border-radius: var(--radius-window) var(--radius-window) 0 0; touch-action: none;
  background: var(--title-grad); color: #fff; font: bold var(--fs-title) var(--font-title); text-shadow: 1px 1px 0 var(--cobalt-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.win.max .titlebar { border-radius: 0; margin: 0; }
.win.inactive .titlebar { background: var(--title-grad-inactive); color: #ffffff; text-shadow: none; }
.win .titlebar .ttl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.win .tbtn {
  width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: var(--radius); flex: none; padding: 0; position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #e9ecf4 45%, #b8bfd2 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.win .tbtn:hover { background: linear-gradient(180deg, #fff8dc 0%, #ffe9a6 45%, #f3b83d 100%); }
.win .tbtn:active { background: linear-gradient(180deg, #b8bfd2, #e9ecf4); }
.win .tbtn.close { background: linear-gradient(180deg, #ffb9ae 0%, #e65a48 50%, #b72a1b 100%); }
.win .tbtn.close:hover { background: linear-gradient(180deg, #ffd0c8 0%, #f27a68 50%, #d13a2a 100%); }
.win.inactive .tbtn { opacity: .8; }
.win .tbtn::before, .win .tbtn::after { content: ""; position: absolute; }
.win .tbtn.min::before { left: 5px; bottom: 5px; width: 10px; height: 3px; background: var(--ink); }
.win .tbtn.max::before { left: 5px; top: 5px; width: 10px; height: 10px; border: 1px solid var(--ink); border-top-width: 3px; }
.win .tbtn.restore::before { left: 4px; top: 8px; width: 8px; height: 8px; border: 1px solid var(--ink); border-top-width: 2px; }
.win .tbtn.restore::after { left: 8px; top: 4px; width: 8px; height: 8px; border: 1px solid var(--ink); border-top-width: 2px; border-left: 0; border-bottom: 0; }
.win .tbtn.close::before, .win .tbtn.close::after { left: 9px; top: 4px; width: 2px; height: 12px; background: #fff; transform: rotate(45deg); }
.win .tbtn.close::after { transform: rotate(-45deg); }
.win .tbtn.help::before { content: "?"; left: 0; right: 0; top: 2px; text-align: center; font: bold 13px Verdana, Arial, sans-serif; color: var(--ink); }
.win.dialog .titlebar .ttl { padding-left: 4px; }
.win .wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.win .rz { position: absolute; z-index: 5; touch-action: none; }
.win .rz.n { top: -4px; left: 6px; right: 6px; height: 5px; cursor: ns-resize; }
.win .rz.s { bottom: -4px; left: 6px; right: 6px; height: 5px; cursor: ns-resize; }
.win .rz.e { right: -4px; top: 6px; bottom: 6px; width: 5px; cursor: ew-resize; }
.win .rz.w { left: -4px; top: 6px; bottom: 6px; width: 5px; cursor: ew-resize; }
.win .rz.ne { top: -4px; right: -4px; width: 9px; height: 9px; cursor: nesw-resize; }
.win .rz.nw { top: -4px; left: -4px; width: 9px; height: 9px; cursor: nwse-resize; }
.win .rz.se { bottom: -4px; right: -4px; width: 9px; height: 9px; cursor: nwse-resize; }
.win .rz.sw { bottom: -4px; left: -4px; width: 9px; height: 9px; cursor: nesw-resize; }
.win.max .rz { display: none; }
.win.flash .titlebar { animation: wo-flash .12s steps(1) 6; }
@keyframes wo-flash { 50% { filter: brightness(1.7) saturate(.4); } }
.modal-blocker { position: absolute; inset: 0; pointer-events: auto; }

.msgbox { padding: 14px 14px 10px; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); }
.msgbox .txt { padding-top: 4px; max-width: 340px; line-height: 1.35; -webkit-user-select: text; user-select: text; }
.btnrow { display: flex; justify-content: center; gap: 6px; padding: 4px 10px 12px; background: var(--surface); }
.btnrow.right { justify-content: flex-end; }