/* ============================================================
   Windows 98 recreation — complete stylesheet
   Palette: face #C0C0C0, light #DFDFDF, white #FFFFFF,
   shadow #808080, dark #0A0A0A, teal desktop #008080,
   active caption #000080 -> #1084D0
   ============================================================ */
:root{
  --face:#C0C0C0; --light:#DFDFDF; --white:#FFFFFF;
  --shadow:#808080; --dark:#0A0A0A; --darkshadow:#404040;
  --cap-a1:#000080; --cap-a2:#1084D0;
  --cap-i1:#808080; --cap-i2:#B5B5B5;
  --sel:#000080; --seltext:#FFFFFF;
  --desk:#008080; --windowbg:#FFFFFF;
  --win-font:"MS Sans Serif","Pixelated MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:#000;}
body{
  font-family:var(--win-font); font-size:11px; color:#000;
  -webkit-user-select:none; user-select:none;
  -webkit-font-smoothing:none; font-smooth:never;
  cursor:default; touch-action:none;
}
img{pointer-events:none;}
input,textarea,[contenteditable]{-webkit-user-select:text; user-select:text; touch-action:auto;}
button{font-family:var(--win-font); font-size:11px; color:#000;}

/* ---------- generic 3D bevels ---------- */
.bevel-out{box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.bevel-in{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
.bevel-thin-out{box-shadow:inset -1px -1px var(--shadow), inset 1px 1px var(--white);}
.bevel-thin-in{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.bevel-field{
  background:var(--windowbg);
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow),
             inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);
}
.bevel-well{ /* groupboxes / sunken panels on face */
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow),
             inset -2px -2px var(--light), inset 2px 2px var(--shadow);
}

/* ---------- buttons / controls ---------- */
.btn{
  position:relative; background:var(--face); border:0; min-width:23px;
  padding:4px 12px; font-size:11px; color:#000; cursor:default;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
}
.btn:active,.btn.pressed{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
.btn:active>.btn-in,.btn.pressed>.btn-in{transform:translate(1px,1px);}
.btn.disabled,.btn:disabled{color:var(--shadow); text-shadow:1px 1px 0 var(--white); pointer-events:none;}
.btn.default::before{content:""; position:absolute; inset:0; border:1px solid #000; pointer-events:none;}
.btn.focused::after{content:""; position:absolute; inset:4px; border:1px dotted #000; pointer-events:none;}
.btn:focus{outline:none;}

.check,.radio{display:flex; align-items:center; gap:4px; padding:1px 2px; cursor:default;}
.check input,.radio input{display:none;}
.check .box{width:13px; height:13px; flex:none; background:#fff;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);
  position:relative;}
.check.on .box::after{content:""; position:absolute; left:2px; top:0px; width:7px; height:8px;
  border-left:2px solid #000; border-bottom:2px solid #000; transform:rotate(-45deg) translate(-1px,-1px);}
.radio .box{width:12px; height:12px; flex:none; border-radius:50%; background:#fff; position:relative;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.radio.on .box::after{content:""; position:absolute; left:3px; top:3px; width:4px; height:4px; border-radius:50%; background:#000;}
.check.disabled,.radio.disabled{color:var(--shadow); text-shadow:1px 1px 0 var(--white); pointer-events:none;}
.check.focused .lbl,.radio.focused .lbl{outline:1px dotted #000; outline-offset:1px;}

input[type=text],input[type=password],textarea{
  font-family:var(--win-font); font-size:11px; border:0; outline:none; padding:2px 3px;
  background:#fff;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);
}
textarea{resize:none; line-height:1.25;}

.groupbox{position:relative; border:0; padding:10px 8px 8px; margin:0;
  box-shadow:inset 1px 1px var(--shadow), inset -1px -1px var(--white), inset 2px 2px var(--light), inset -2px -2px var(--light);
  background:var(--face);}
.groupbox>.gtitle{position:absolute; top:-6px; left:8px; background:var(--face); padding:0 3px;}

/* combobox */
.combo{display:flex; align-items:stretch; background:#fff; height:20px;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.combo .combo-text{flex:1; min-width:0; border:0; outline:none; padding:1px 3px; font-family:var(--win-font); font-size:11px; background:transparent;}
.combo .combo-btn{width:17px; flex:none; background:var(--face); position:relative;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.combo .combo-btn::after{content:""; position:absolute; left:5px; top:6px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #000;}
.combo .combo-btn:active{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
.combo-list{position:fixed; z-index:10002; background:#fff; border:1px solid #000; max-height:170px; overflow:auto; font-size:11px;}
.combo-list .opt{padding:2px 4px; white-space:nowrap;}
.combo-list .opt.sel,.combo-list .opt:hover{background:var(--sel); color:#fff;}

/* listbox */
.listbox{background:#fff; overflow:auto;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.listbox .opt{padding:1px 4px; white-space:nowrap; display:flex; gap:5px; align-items:center;}
.listbox .opt.sel{background:var(--sel); color:#fff;}
.listbox .opt .dot{width:3px; height:3px;}

/* slider (updown + track) */
.updown{display:inline-flex; flex-direction:column; width:15px; height:20px;}
.updown>button{flex:1; background:var(--face); border:0; position:relative;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -1px -1px var(--shadow);}
.updown .up::after{content:""; position:absolute; left:3px; top:4px; border:3px solid transparent; border-bottom:4px solid #000;}
.updown .dn::after{content:""; position:absolute; left:3px; top:5px; border:3px solid transparent; border-top:4px solid #000;}
.slider{position:relative; height:21px; min-width:90px; background:transparent;}
.slider::before{content:""; position:absolute; left:0; right:0; top:9px; height:3px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.slider .sfill{position:absolute; left:0; top:9px; height:3px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow); background:transparent;}
.slider .sthumb{position:absolute; top:3px; left:0; width:11px; height:16px; background:var(--face);
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{width:16px; height:16px;}
::-webkit-scrollbar-track{
  background-image:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%);
  background-size:2px 2px;}
::-webkit-scrollbar-thumb{background:var(--face);
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
::-webkit-scrollbar-button{background:var(--face); width:16px; height:16px;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  background-repeat:no-repeat; background-position:center;}
::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:var(--sb-up);}
::-webkit-scrollbar-button:single-button:vertical:increment{background-image:var(--sb-dn);}
::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:var(--sb-lt);}
::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:var(--sb-rt);}
::-webkit-scrollbar-corner{background:var(--face);}
*{scrollbar-width:thin; scrollbar-color:var(--face) var(--face);}

/* ---------- boot ---------- */
#boot-layer{position:fixed; inset:0; z-index:20000; background:#000; color:#C0C0C0;
  font-family:"Lucida Console","Courier New",monospace; font-size:12px; overflow:hidden;}
#boot-layer .bios{position:absolute; inset:0; padding:18px 24px; white-space:pre; line-height:1.45;}
#boot-layer .bios-text{white-space:pre-wrap; color:#C0C0C0; font-family:"Lucida Console","Courier New",monospace;
  font-size:13px; line-height:1.45; margin:0;}
#boot-layer .bios .epa{position:absolute; top:14px; right:26px; text-align:center; font-size:9px; line-height:1.15; color:#fff;}
#boot-layer canvas.splash{position:absolute; inset:0; width:100%; height:100%; image-rendering:auto;}
#boot-layer .splash{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(#000 0 4%, transparent 4%);}
#boot-layer .splash-logo{display:flex; align-items:center; justify-content:center; flex:1;}
#boot-layer .splash-logo canvas{max-width:82vmin; max-height:60vmin; image-rendering:auto;}
#boot-layer .splash-bar{position:absolute; left:0; right:0; bottom:0; height:10px; overflow:hidden; background:#7A97B8;}
#boot-layer .splash-bar .splash-bar-in{height:100%; width:0%;
  background-image:repeating-linear-gradient(90deg, #FFD46B 0 10px, #E8A83C 10px 20px);}
#boot-layer .safe-off{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
#boot-layer .safe-off-text{color:#C0C0C0; font-family:"Lucida Console",monospace; font-size:14px;}
#boot-layer .safe-off-orange{color:#FF8000; font-family:var(--win-font); font-weight:bold; font-size:30px;
  text-align:center; line-height:1.3; letter-spacing:1px;}
#boot-layer .safe-off-hint{color:#404040; font-family:"Lucida Console",monospace; font-size:11px; margin-top:24px;}
#boot-layer .dos-cursor{display:inline-block; width:9px; height:14px; background:#C0C0C0; vertical-align:-2px;}
#boot-layer .safeoff{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;}
#boot-layer .safeoff .msg{color:#FF7A00; font-family:var(--win-font); font-weight:bold; font-size:29px; text-align:center; line-height:1.25;}
#boot-layer .dosfull{position:absolute; inset:0; background:#000; color:#C0C0C0; font-family:"Lucida Console",monospace; font-size:14px; padding:4px 8px; white-space:pre-wrap;}

/* ---------- screen / desktop ---------- */
#os{position:fixed; inset:0; background:#000; overflow:hidden;}
#screen{position:absolute; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column;
  transform-origin:0 0; overflow:hidden;}
#desktop{position:relative; flex:1; overflow:hidden; background:var(--desk);}
#wallpaper{position:absolute; inset:0; background-repeat:repeat; background-position:center;}
#desk-icons{position:absolute; inset:0; overflow:hidden;}
.dicon{position:absolute; width:76px; padding:4px 2px 2px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:default;}
.dicon img{width:32px; height:32px; image-rendering:pixelated;}
.dicon .lbl{color:#fff; font-size:11px; line-height:1.15; text-align:center; max-width:74px;
  padding:1px 3px; word-wrap:break-word; text-shadow:none;}
.dicon.sel .lbl{background:var(--sel); outline:1px dotted #FFFF80; color:#fff;}
.dicon.cut img{opacity:.55;}
.dicon.focused .lbl{outline:1px dotted #fff;}
#marquee{position:absolute; border:1px dotted #fff; mix-blend-mode:difference; z-index:5; pointer-events:none;}

/* ---------- taskbar ---------- */
#taskbar{position:relative; height:30px; flex:none; background:var(--face); display:flex; align-items:center;
  padding:3px 2px 2px; gap:2px; z-index:9000;
  box-shadow:inset 0 1px var(--light), inset 0 2px var(--white);}
#taskbar.autohide{position:absolute; left:0; right:0; bottom:0; transform:translateY(28px); transition:transform .12s;}
#taskbar.autohide:hover,#taskbar.autohide.peek{transform:translateY(0);}
#start-btn{display:flex; align-items:center; gap:4px; height:23px; padding:0 7px 0 4px; border:0; background:var(--face);
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
#start-btn .start-flag{width:20px; height:18px; background:center/contain no-repeat;}
#start-btn b{font-size:11px;}
#start-btn.open,#start-btn:active{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
#start-btn.open>*,#start-btn:active>*{transform:translate(1px,1px);}
.taskbar-sep{width:3px; height:23px; flex:none; box-shadow:inset 1px 0 var(--shadow), inset 2px 0 var(--white); margin:0 2px;}
#task-btns{flex:1; display:flex; gap:3px; overflow:hidden; height:23px;}
.tbtn{display:flex; align-items:center; gap:4px; min-width:36px; max-width:160px; flex:1 1 160px; height:23px;
  padding:0 5px; background:var(--face); border:0; overflow:hidden; white-space:nowrap; text-align:left;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.tbtn img{width:16px; height:16px; flex:none; image-rendering:pixelated;}
.tbtn .tt{overflow:hidden; text-overflow:ellipsis;}
.tbtn.active{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  background-image:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%); background-size:2px 2px; font-weight:bold;}
.tbtn.active .tt{transform:translate(1px,1px); font-weight:bold;}
.tbtn.min .tt{color:#5a5a5a;}
#tray{flex:none; display:flex; align-items:center; gap:5px; height:23px; padding:0 8px 0 6px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
#tray-icons{display:flex; align-items:center; gap:4px;}
#tray-icons img{width:16px; height:16px; image-rendering:pixelated;}
#tray-icons .tray-icon:hover{outline:1px dotted #000;}
#clock{padding:0 2px;}

/* ---------- windows ---------- */
#win-layer{position:absolute; inset:0; pointer-events:none;}
.window{position:absolute; background:var(--face); padding:3px; display:flex; flex-direction:column;
  pointer-events:auto;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  min-width:120px; min-height:60px;}
.window.minimized{display:none;}
.titlebar{height:18px; flex:none; display:flex; align-items:center; gap:3px; padding:0 2px 0 3px;
  background:linear-gradient(to right, var(--cap-i1), var(--cap-i2)); color:#C8C8C8;}
.window.active .titlebar{background:linear-gradient(to right, var(--cap-a1), var(--cap-a2)); color:#fff;}
.titlebar .ticon{width:16px; height:16px; flex:none; image-rendering:pixelated;}
.titlebar .ttext{flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:bold; font-size:11px; line-height:18px;}
.tb-btns{display:flex; gap:2px; flex:none;}
.tb-btn{width:16px; height:14px; border:0; background:var(--face); position:relative; padding:0;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.tb-btn:active{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
.tb-btn:active::after{transform:translate(1px,1px);}
.tb-btn::after{content:""; position:absolute; inset:0; background:center/11px 10px no-repeat; image-rendering:pixelated;}
.tb-btn.min::after{background-image:var(--glyph-min);}
.tb-btn.max::after{background-image:var(--glyph-max);}
.tb-btn.restore::after{background-image:var(--glyph-res);}
.tb-btn.close::after{background-image:var(--glyph-close);}
.tb-btn.help::after{background-image:var(--glyph-q);}
.tb-btn:disabled{opacity:.9;}
.tb-btn:disabled::after{filter:grayscale(1) opacity(.5);}
.window-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative;}
.wclient{flex:1; min-height:0; overflow:auto; position:relative;}

/* menubar */
.menubar{display:flex; flex:none; height:20px; align-items:stretch; background:var(--face); padding:1px 1px 0;}
.menubar .mitem{padding:2px 7px 3px; line-height:15px; position:relative;}
.menubar .mitem.open,.menubar .mitem:hover{background:var(--sel); color:#fff;}
.menubar .mitem kbd{text-decoration:none;}
.mitem .u,.mi .u,.btn-in .u,.check .lbl .u,.radio .lbl .u,.field-label .u,label .u,.gtitle .u{text-decoration:underline;}
body.hide-acc .mitem .u,body.hide-acc .mi .u{text-decoration:none;}

/* statusbar */
.statusbar{display:flex; flex:none; height:20px; align-items:center; gap:0; padding:2px 2px 0 0;}
.statusbar .sec{height:16px; padding:1px 6px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.statusbar .sec.grow{flex:1;}

/* toolbar */
.toolbar{display:flex; flex:none; align-items:center; gap:1px; padding:2px; background:var(--face); flex-wrap:wrap;}
.tl-btn{display:flex; align-items:center; gap:3px; padding:2px 4px; border:0; background:transparent; height:24px;}
.tl-btn img{width:20px; height:20px; image-rendering:pixelated;}
.tl-btn:hover:not(.disabled){box-shadow:inset -1px -1px var(--shadow), inset 1px 1px var(--white);}
.tl-btn:active:not(.disabled),.tl-btn.down{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow); background-image:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%); background-size:2px 2px;}
.tl-btn.disabled{opacity:.45; pointer-events:none;}
.tl-sep{width:3px; align-self:stretch; margin:0 2px; box-shadow:inset 1px 0 var(--shadow), inset 2px 0 var(--white);}
.address-row{display:flex; flex:none; align-items:center; gap:5px; padding:2px 3px; background:var(--face);}
.address-row .lbl{padding:0 2px;}

/* ---------- popup menus ---------- */
.menu{position:fixed; z-index:10001; min-width:150px; background:var(--face); padding:2px;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.mi{display:flex; align-items:center; height:20px; padding:0 2px; gap:0; position:relative; white-space:nowrap;}
.mi .chk{width:20px; flex:none; text-align:center; font-size:12px; line-height:1;}
.mi .chk img{width:16px; height:16px; image-rendering:pixelated; vertical-align:-3px;}
.mi .mlabel{flex:1; padding-right:14px; overflow:hidden;}
.mi .macc{color:inherit; padding-right:6px; font-size:11px;}
.mi .sub{flex:none; width:12px; text-align:right; font-size:9px;}
.mi:hover:not(.disabled),.mi.hl{background:var(--sel); color:#fff;}
.mi.disabled{color:var(--shadow); text-shadow:1px 1px 0 var(--light);}
.mi.disabled:hover{background:transparent; color:var(--shadow);}
.msep{height:2px; margin:3px 2px; box-shadow:inset 0 1px var(--shadow), inset 0 2px var(--white);}
.menu.big .mi{height:24px;}
.menu.big .mi .chk{width:26px;}
.menu.big .mi .chk img{width:20px; height:20px;}

/* start menu */
#start-menu{display:flex; padding:2px; min-width:0;}
#start-menu .banner{width:38px; flex:none; position:relative; overflow:hidden;
  background:linear-gradient(to top, #000080 0%, #1084D0 75%, #4FC3F7 100%);}
#start-menu .banner span{position:absolute; left:50%; bottom:6px; transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-weight:bold; font-size:21px; letter-spacing:1px; color:#fff; white-space:nowrap;
  font-family:Tahoma, var(--win-font);}
#start-menu .banner span i{font-style:normal; color:#FFC950;}
#start-menu .items{flex:1; min-width:160px;}
#start-menu .mi{height:30px;}
#start-menu .mi .chk{width:30px;}
#start-menu .mi .chk img{width:24px; height:24px;}
#start-menu .mi .mlabel{font-size:11px;}

/* ---------- dialogs ---------- */
.dlg .wclient,.dlg-body{padding:10px; background:var(--face);}
.dlg-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.dlg-btns{display:flex; justify-content:flex-end; gap:6px; padding:0 10px 10px;}
.dlg-btns .btn{min-width:70px;}
.msgbox-body{display:flex; gap:14px; align-items:flex-start; padding:14px 14px 10px;}
.msgbox-body img{width:32px; height:32px; flex:none; image-rendering:pixelated;}
.msgbox-body .msg-text{line-height:1.4; padding-top:4px; white-space:pre-line;}

/* tabs */
.tabs{display:flex; padding:4px 4px 0; gap:0; flex:none; position:relative; z-index:2;}
.tab{padding:3px 10px 4px; background:var(--face); margin-right:-1px; position:relative; top:2px;
  box-shadow:inset 1px 1px var(--white), inset -1px 0 var(--dark), inset 2px 2px var(--light), inset -2px 0 var(--shadow);
  border-radius:2px 3px 0 0;}
.tab.sel{top:0; padding:5px 12px 5px; z-index:3;
  box-shadow:inset 1px 1px var(--white), inset -1px 1px var(--dark), inset 2px 2px var(--light), inset -2px 2px var(--shadow);}
.tabpage{flex:1; min-height:0; margin-top:-1px; padding:12px 10px; position:relative; overflow:auto;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}

/* ---------- tooltip ---------- */
#tooltip{position:fixed; z-index:10003; background:#FFFFE1; border:1px solid #000; padding:2px 5px;
  font-size:11px; pointer-events:none; max-width:280px; box-shadow:2px 2px 3px rgba(0,0,0,.25);}

/* ---------- drag outline (XOR) ---------- */
#drag-outline{position:fixed; z-index:10000; pointer-events:none;}
#drag-outline .inner{position:absolute; inset:0; border:3px dashed #fff; mix-blend-mode:difference;}
#drag-outline.t2 .inner{border-style:dotted;}

/* alt-tab */
#alttab{position:fixed; z-index:10004; left:50%; top:42%; transform:translateX(-50%);
  background:var(--face); padding:8px 10px 6px; min-width:280px;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light), 4px 4px 8px rgba(0,0,0,.5);}
#alttab .icons{display:flex; gap:4px;}
#alttab .at{width:52px; height:44px; display:flex; align-items:center; justify-content:center;}
#alttab .at img{width:32px; height:32px; image-rendering:pixelated;}
#alttab .at.sel{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow), 0 0 0 1px #fff;}
#alttab .at.sel{background:repeating-conic-gradient(var(--face) 0 25%, var(--light) 0 50%); background-size:2px 2px;}
#alttab .cap{margin-top:7px; padding:4px 6px; color:#fff; background:var(--sel); font-weight:bold; min-height:20px;}

/* ---------- app-specific ---------- */
/* notepad */
.notepad-ta{flex:1; width:100%; border:0; outline:none; padding:1px 2px; background:#fff;
  font-family:"Fixedsys","Lucida Console","Courier New",monospace; font-size:12px; line-height:1.2; white-space:pre; overflow:auto;}
.notepad-ta.wrap{white-space:pre-wrap; word-break:break-all; overflow-x:hidden;}

/* dos */
.dos-screen{flex:1; background:#000; color:#C0C0C0; padding:2px 4px; overflow:auto;
  font-family:"Lucida Console","Courier New",monospace; font-size:12px; line-height:1.2; white-space:pre-wrap; word-break:break-all;}
.dos-screen .cur{display:inline-block; width:8px; height:13px; background:#C0C0C0; vertical-align:-2px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* minesweeper */
.mine-head{display:flex; align-items:center; justify-content:space-between; padding:4px; margin-bottom:4px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.lcd{background:#000; display:flex; height:22px; padding:1px;}
.lcd canvas{display:block;}
.mine-face{width:26px; height:26px; padding:0; position:relative; background:var(--face); border:0;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.mine-face:active{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);}
.mine-face canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.mine-field{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--darkshadow), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  display:inline-block; line-height:0; align-self:center;}
.mine-field canvas{display:block; image-rendering:pixelated;}
.mine-wrap{padding:5px; display:flex; flex-direction:column;}

/* calculator */
.calc-body{padding:6px; display:flex; flex-direction:column; gap:4px;}
.calc-disp{height:24px; text-align:right; padding:3px 5px; font-family:"Lucida Console",monospace; font-size:15px; overflow:hidden;}
.calc-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:3px;}
.calc-grid .btn{min-width:0; padding:3px 0; height:23px;}
.calc-grid .btn.red{color:#A00000;}
.calc-grid .btn.blue{color:#0000FF;}
.calc-mem{height:20px; display:flex; align-items:center; padding:0 4px;}
.calc-mem .m{width:20px; height:14px; border:0; background:transparent; font-weight:bold;}

/* explorer */
.expl{display:flex; flex:1; min-height:0; gap:0;}
.expl-tree{width:170px; flex:none; overflow:auto; background:#fff;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.expl-list{flex:1; overflow:auto; background:#fff; position:relative; margin-left:3px;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.tnode{white-space:nowrap; padding:1px 2px; display:flex; align-items:center; gap:3px; cursor:default;}
.tnode .tw{width:9px; height:9px; flex:none; border:1px solid #000; background:#fff; font-size:8px; line-height:7px; text-align:center; margin-left:2px;}
.tnode .tw.leaf{border:0; background:none;}
.tnode img{width:16px; height:16px; image-rendering:pixelated;}
.tnode.sel .tn{background:var(--sel); color:#fff;}
.tnode .tn{padding:0 2px;}
.fitem{position:absolute; display:flex; flex-direction:column; align-items:center; gap:3px; width:74px; padding:3px 1px; cursor:default;}
.fitem img{width:32px; height:32px; image-rendering:pixelated;}
.fitem .fl{text-align:center; font-size:11px; line-height:1.1; max-width:72px; padding:0 2px; word-wrap:break-word;}
.fitem.sel .fl{background:var(--sel); color:#fff; outline:1px dotted #fff;}
.fitem.sel img{filter:grayscale(.4) brightness(.85);}
.expl-list.list .fitem{flex-direction:row; width:auto; height:20px; padding:0 4px; gap:5px;}
.expl-list.list .fitem img{width:16px; height:16px;}
.expl-list.list .fitem .fl{text-align:left; white-space:nowrap; max-width:none;}
.dthead{display:flex; height:19px; position:sticky; top:0; z-index:2; background:var(--face);}
.dthead .col{padding:3px 6px; flex:none; overflow:hidden; white-space:nowrap;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.drow{display:flex; height:18px; align-items:center;}
.drow .col{flex:none; padding:1px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:flex; align-items:center; gap:4px;}
.drow img{width:16px; height:16px; image-rendering:pixelated;}
.drow.sel .col{background:var(--sel); color:#fff;}
.expl-list.details{overflow:auto;}
.det-grid{position:relative;}

/* recycle bin / file lists reuse explorer styles */

/* IE */
.ie-page{flex:1; overflow:auto; background:#fff; position:relative;}
.ie-page .pp{padding:0;}
.ie-status-prog{width:90px; height:14px; overflow:hidden;}
.ie-status-prog .bar{height:100%; width:0%; background:var(--sel);}
a{color:#0000EE; text-decoration:underline; cursor:pointer;}
a:visited{color:#551A8B;}

/* paint */
.paint-body{display:flex; flex:1; min-height:0;}
.paint-tools{width:52px; flex:none; display:flex; flex-direction:column; gap:2px; padding:2px;}
.pt-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
.ptool{height:23px; display:flex; align-items:center; justify-content:center; border:0; background:transparent;}
.ptool img{width:20px; height:20px; image-rendering:pixelated;}
.ptool:hover{box-shadow:inset -1px -1px var(--shadow), inset 1px 1px var(--white);}
.ptool.sel{box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);
  background-image:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%); background-size:2px 2px;}
.paint-opts{flex:1; margin-top:2px; padding:3px; min-height:60px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.paint-main{flex:1; min-width:0; display:flex; flex-direction:column; padding:2px 0 0 2px;}
.paint-colors{display:flex; align-items:center; gap:4px; padding:2px 0 3px;}
.curcols{width:28px; height:28px; position:relative; flex:none;}
.curcols .fg,.curcols .bg{position:absolute; width:16px; height:16px;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), 1px 1px 0 var(--shadow);}
.curcols .bg{right:0; bottom:0;}
.curcols .fg{left:0; top:0;}
.colgrid{display:grid; grid-template-columns:repeat(14,14px); grid-auto-rows:14px; gap:0;}
.colcell{width:14px; height:14px;
  box-shadow:inset -1px -1px var(--white), inset 1px 1px var(--shadow);}
.colcell:hover{outline:1px solid #000;}
.paint-canvas-wrap{flex:1; min-height:0; overflow:auto; position:relative;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow); background:var(--shadow);}
.paint-canvas-wrap canvas{display:block; image-rendering:pixelated; background:#fff;}
.paint-sel{position:absolute; border:1px dashed #000; mix-blend-mode:difference; border-color:#fff; pointer-events:none; display:none;}

/* solitaire */
.sol-table{flex:1; position:relative; overflow:hidden;}
.sol-table canvas{position:absolute; inset:0; display:block;}

/* desktop display properties */
.dd-preview{height:130px; display:flex; align-items:center; justify-content:center;}
.dd-monitor{width:180px; height:130px; position:relative; background:var(--face); padding:6px 6px 16px;
  box-shadow:inset -1px -1px var(--dark), inset 1px 1px var(--white), inset -2px -2px var(--shadow), inset 2px 2px var(--light);}
.dd-monitor .scr{position:absolute; left:8px; top:7px; right:8px; bottom:20px; overflow:hidden;
  box-shadow:inset 1px 1px var(--darkshadow), inset -1px -1px var(--light); background:var(--desk);}
.dd-monitor .stand{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:60px; height:10px;
  background:var(--face); box-shadow:inset -1px -1px var(--shadow), inset 1px 1px var(--white);}
.dd-monitor .led{position:absolute; right:14px; bottom:5px; width:4px; height:4px; background:#00A000; border-radius:50%;}

/* tree/list split bar */
.splitter{width:4px; flex:none; cursor:ew-resize; background:var(--face);}

/* progress bar */
.pbar{height:16px; background:#fff; position:relative; overflow:hidden;
  box-shadow:inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--white), inset 2px 2px var(--darkshadow);}
.pbar .fill{position:absolute; inset:1px auto 1px 1px; width:0%;
  background-image:repeating-linear-gradient(90deg, var(--sel) 0 8px, transparent 8px 10px);}

/* hourglass overlay cursor handled via body.cursor */

/* screensaver */
#saver-layer{position:fixed; inset:0; z-index:15000; background:#000; cursor:none;}
#saver-layer canvas{position:absolute; inset:0; width:100%; height:100%;}

/* misc */
.center{display:flex; align-items:center; justify-content:center;}
.row{display:flex; align-items:center; gap:6px;}
.col{display:flex; flex-direction:column; gap:6px;}
.grow{flex:1; min-width:0; min-height:0;}
.hr{height:2px; margin:4px 0; box-shadow:inset 0 1px var(--shadow), inset 0 2px var(--white);}
.small{font-size:10px;}
.monospace{font-family:"Lucida Console",monospace;}
.field-label{min-width:60px;}

/* caret/focus rect for keyboard nav on desktop items */
kbd{font-family:inherit;}

/* shake/anim helpers */
.fadein{animation:fadein .4s;}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}