:root {
  --taskbar-height: 30px;
}

#desktop { outline: none; }
#desktop[data-wallpaper="stretch"] { background-size: 100% 100%; }
#desktop[data-wallpaper="center"] { background-size: auto; }
#desktop[data-wallpaper="tile"] {
  background-position: top left;
  background-repeat: repeat;
  background-size: 400px auto;
}

#icons { max-width: calc(100% - 16px); }
.dicon { touch-action: none; }
#icon-recycle { bottom: calc(var(--taskbar-height) + 12px); }
.win {
  min-width: min(260px, 100%);
  max-width: 100%;
  max-height: calc(100% - var(--taskbar-height));
  outline: none;
}
.win[data-max="1"] {
  inset: 0 0 auto !important;
  width: 100% !important;
  height: calc(100% - var(--taskbar-height)) !important;
  border-radius: 0;
}
.win[data-max="1"] .tbar { border-radius: 0; cursor: default; }
.win[data-max="1"] .win-edge { display: none; }
.tbar {
  flex: none;
  gap: 4px;
  min-height: 28px;
  touch-action: none;
  background: linear-gradient(#5b9afe 0%, #2264dd 9%, #0755df 47%, #0959e6 82%, #0045bb);
}
.tbar.inactive { background: linear-gradient(#adc4f5, #7b9de0 17%, #7d9ce3 89%, #6786d6); }
.tbar.inactive .tbtn { opacity: .76; }
.tbar .t { min-width: 0; }
.sbar, .mbar, .paint-tools { flex: none; }
.sbar span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wbody { min-height: 0; min-width: 0; overflow-wrap: anywhere; }
#w-help ul { padding: 4px 0 0 1.6em; }
#np-body { min-height: 0; flex: 1; }
#paint-c { flex: none; }
.win-sys, #show-desktop {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
}
.win-sys { width: 21px; height: 21px; }
.win-sys:hover, #show-desktop:hover { border-color: #afceff; }
.win-sys svg, .task svg, #show-desktop svg {
  width: 16px;
  height: 16px;
  flex: none;
  filter: drop-shadow(1px 1px 0 #173d86);
}
.win-edge { position: absolute; touch-action: none; z-index: 1; }
.win-edge[data-edge="n"], .win-edge[data-edge="s"] {
  height: 6px; left: 9px; right: 9px; cursor: ns-resize;
}
.win-edge[data-edge="e"], .win-edge[data-edge="w"] {
  width: 6px; top: 9px; bottom: 9px; cursor: ew-resize;
}
.win-edge[data-edge="n"] { top: -3px; }
.win-edge[data-edge="s"] { bottom: -3px; }
.win-edge[data-edge="e"] { right: -3px; }
.win-edge[data-edge="w"] { left: -3px; }
.win-edge[data-edge="nw"], .win-edge[data-edge="ne"],
.win-edge[data-edge="sw"], .win-edge[data-edge="se"] { width: 10px; height: 10px; }
.win-edge[data-edge="nw"] { top: -3px; left: -3px; cursor: nwse-resize; }
.win-edge[data-edge="ne"] { top: -3px; right: -3px; cursor: nesw-resize; }
.win-edge[data-edge="sw"] { bottom: -3px; left: -3px; cursor: nesw-resize; }
.win-edge[data-edge="se"] { bottom: -3px; right: -3px; cursor: nwse-resize; }
.win-edge[data-edge="se"]::after {
  content: "";
  position: absolute;
  inset: 0 3px 3px 0;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #636f8b 2px 3px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

#taskbar { height: var(--taskbar-height); }
#quick-launch {
  flex: none;
  padding: 0 5px 0 3px;
  border-right: 1px solid #113fae;
  box-shadow: 1px 0 0 #6199ef;
}
#show-desktop { width: 24px; height: 23px; }
#show-desktop[aria-pressed="true"] { background: #183e98; border-color: #5b91ee; }
#tasks { min-width: 0; overflow: auto hidden; scrollbar-width: none; }
.task {
  flex: 0 1 152px;
  min-width: 35px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  text-align: left;
}
.task > span { overflow: hidden; text-overflow: ellipsis; }
#tray {
  flex: none;
  height: 100%;
  background: linear-gradient(#20a6f3, #138fe4 13%, #1294e9 79%, #0b79cb);
  box-shadow: inset 1px 0 0 #6ccaff;
}

#smenu {
  width: min(388px, calc(100% - 8px));
  inset: auto auto var(--taskbar-height) 0;
  max-height: calc(100% - var(--taskbar-height));
  overflow: visible;
  border-radius: 7px 7px 0 0;
}
.sm-user { border-radius: 7px 7px 0 0; border-bottom: 2px solid #f0a14a; }
.sm-cols { min-height: 0; }
.sm-left, .sm-right { min-width: 0; }
.sm-left { background: #fff; }
.sm-cols button { display: flex; align-items: center; gap: 7px; min-height: 29px; padding: 4px 8px; }
.sm-cols button svg { width: 21px; height: 21px; flex: none; }
.sm-right .sep { border-top: 1px solid #aec7e7; margin: 5px 8px; }
#all-programs { font-weight: bold; justify-content: space-between; }
#all-programs span { font-size: 16px; color: #258e1b; }
#all-programs:hover span, #all-programs:focus-visible span { color: #fff; }
#program-list[hidden] { display: none; }
#program-list:not([hidden]) { display: block; }
.sm-fly { left: calc(100% - 1px); width: max-content; max-width: 44vw; }
.sm-fly button { white-space: nowrap; }
.menu { max-height: calc(100% - var(--taskbar-height) - 12px); overflow: auto; }
.menu button:disabled { color: #727272; background: none; cursor: default; }

#run-dlg {
  position: fixed;
  inset: auto auto calc(var(--taskbar-height) + 5px) 5px;
  margin: 0;
  width: min(365px, calc(100% - 10px));
  border: 2px solid var(--title);
  border-radius: 7px 7px 0 0;
  background: var(--face);
  box-shadow: 3px 3px 8px #0007;
}
#run-dlg::backdrop { background: transparent; }
#run-h {
  padding: 5px 8px;
  background: linear-gradient(#3989f6, #0058ee 22%, #045cec 80%, #0044bc);
  color: #fff;
  font-size: 13px;
}
.run-body { padding: 14px; font-size: 12px; }
.run-body > p:first-child { margin-bottom: 12px; }
#run-name { width: calc(100% - 47px); font: inherit; padding: 3px; }
#run-error { margin-top: 7px; color: #8c201a; overflow-wrap: anywhere; }
.run-body .pane-btns { justify-content: flex-end; }
#offback { margin-top: 16px; padding: 5px 12px; }

@media (max-width: 580px), (max-height: 470px) {
  #smenu .sm-cols { overflow: auto; }
  .sm-fly { position: static; width: auto; max-width: none; margin: 0 4px 4px; box-shadow: none; }
  .sm-fly button { white-space: normal; }
}

@media (pointer: coarse) {
  :root { --taskbar-height: 42px; }
  .tbar { min-height: 34px; }
  .tbtn { width: 28px; height: 28px; }
  .task, #show-desktop { height: 32px; }
  #show-desktop { width: 30px; }
  .sm-cols button { min-height: 35px; }
}