/* ---------- taskbar ---------- */
#taskbar { position:absolute; left:0; right:0; bottom:0; height:28px; background:var(--face);
  box-shadow: inset 0 1px var(--light), inset 0 2px var(--hi); display:flex; align-items:center;
  gap:3px; padding:2px 3px; z-index:15000; }
#startbtn { height:22px; padding:0 5px 0 3px; display:flex; align-items:center; gap:3px;
  font-weight:bold; font-size:11px; }
#startbtn img { width:16px; height:16px; }
#startbtn.on { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); }
#tb-divider { width:2px; height:20px; box-shadow: inset 1px 0 var(--shadow), inset -1px 0 var(--light); margin:0 2px; }
#tb-win { flex:1; display:flex; gap:3px; overflow:hidden; align-items:center; }
.tbbtn { height:22px; min-width:0; flex:0 1 160px; display:flex; align-items:center; gap:4px;
  padding:0 6px; font-size:11px; white-space:nowrap; overflow:hidden; }
.tbbtn img { width:16px; height:16px; flex:0 0 16px; }
.tbbtn.active { font-weight:bold;
  background:repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0/4px 4px; }
.tbbtn span { overflow:hidden; text-overflow:ellipsis; }
#tb-tray { height:22px; display:flex; align-items:center; gap:5px; padding:1px 6px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); }
#tb-tray .ti { position:relative; width:16px; height:16px; }
#tb-tray .ti img { width:16px; height:16px; position:absolute; left:0; top:0; }
#tb-tray .ti .fillbar { position:absolute; left:3px; bottom:2px; width:10px; height:2px; background:#000; }
#tb-tray .ti .fillbar i { display:block; height:100%; background:#20c020; }
#tb-clock { font-size:11px; min-width:52px; text-align:center; }
/* ---------- start menu ---------- */
#startmenu { position:absolute; left:2px; bottom:28px; width:196px; background:var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  display:none; z-index:16000; padding:3px; }
#startmenu.show { display:flex; }
#startmenu .side { width:24px; background:linear-gradient(180deg,#1084d0,#000080);
  color:#fff; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:16px; font-weight:bold; letter-spacing:1px; padding:8px 3px; text-align:left; }
#startmenu .items { flex:1; }
.smenu { position:relative; }
.smenu .row, .sitem { display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:12px; }
.sitem img { width:24px; height:24px; }
.sitem:hover, .smenu.open .row { background:var(--navy); color:#fff; }
.smenu .arrow { margin-left:auto; font-size:10px; }
.smenu .sub { display:none; position:absolute; left:100%; top:-3px; min-width:170px; background:var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--hi); padding:2px; z-index:1; }
.smenu.open .sub { display:block; }
.smenu hr { border:none; border-top:1px solid var(--shadow); border-bottom:1px solid var(--light); margin:2px 1px; }
/* ---------- windows ---------- */
.window { position:absolute; background:var(--face); padding:3px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hi),
              inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  display:flex; flex-direction:column; min-width:120px; min-height:60px; }
.window.min { display:none; }
.titlebar { height:18px; margin:1px; display:flex; align-items:center; gap:3px;
  background:linear-gradient(90deg,var(--navy),#1084d0); padding:0 2px 0 2px; flex:0 0 18px; }
.window.inactive .titlebar { background:linear-gradient(90deg,#808080,#b5b5b5); }
.titlebar img { width:16px; height:16px; }
.titlebar .t { color:#fff; font-weight:bold; font-size:11px; flex:1; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; }
.window.inactive .titlebar .t { color:#dfdfdf; }
.tbtns { display:flex; gap:0; }
.tbtn { width:16px; height:14px; background:var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  margin-left:1px; position:relative; }
.tbtn:active { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); }
.tbtn.dis { opacity:.45; }
.tbtn i { position:absolute; background:#000; }
.tbtn.min i { width:6px; height:2px; left:3px; bottom:3px; box-shadow:1px 1px #fff; }
.tbtn.max i { width:10px; height:8px; left:2px; top:2px; border:1px solid #000; border-top-width:2px; box-shadow:1px 1px #fff; }
.tbtn.close::before, .tbtn.close::after { content:''; position:absolute; left:2px; top:6px; width:11px; height:2px; background:#000; box-shadow:1px 1px #fff; }
.tbtn.close::before { transform:rotate(45deg); }
.tbtn.close::after { transform:rotate(-45deg); }
.wbody { flex:1; margin:1px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.rgrip { position:absolute; right:3px; bottom:3px; width:14px; height:14px; cursor:nwse-resize; z-index:5; }
.window.shake { animation:shake .25s; }
@keyframes shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-4px,0)} 75%{transform:translate(4px,0)} }
/* ---------- statusbar ---------- */
.statusbar { display:flex; gap:2px; padding:2px 0 0; flex:0 0 auto; }
.statusbar .sf { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow);
  padding:2px 5px; font-size:11px; white-space:nowrap; overflow:hidden; }
.statusbar .sf.grow { flex:1; }