/* DeskMGR skins: desktop icons, taskbar, start menus and eleven shell looks */

/* ---------------- shared plumbing ---------------- */

/* #windows is position:fixed, so it makes its own stacking context and the whole
   layer sits at z-index auto. The icon layer must stay under it and must not eat
   clicks meant for the windows above it. */
#windows { pointer-events: none; z-index: 5; }
.win { pointer-events: auto; }

#desktop-icons {
  position: fixed;
  inset: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
  z-index: 2;
  pointer-events: none;
  --icw: 92px;
}
.dicon { pointer-events: auto; }
.dicon {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: #fff; cursor: default; text-shadow: 0 1px 3px rgba(0,0,0,.85);
  transition: background .1s, border-color .1s;
}
.dicon:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); }
.dicon.sel { background: rgba(53,132,228,.42); border-color: rgba(255,255,255,.55); }
.dicon.dragging { opacity: .75; z-index: 9; }
.dicon-img { width: calc(var(--icw) * .52); height: calc(var(--icw) * .52); border-radius: calc(var(--icw) * .14); }
.dicon-label { font-size: 12px; line-height: 1.25; text-align: center; word-break: break-word; max-height: 2.5em; overflow: hidden; }

/* ---------------- taskbar ---------------- */

#taskbar {
  position: fixed; z-index: 400; display: flex; align-items: center; gap: 4px;
  background: var(--tb-bg, #1f1f1f); color: var(--tb-fg, #fff);
  font-size: 12px; padding: 0 4px; border: 0 solid var(--tb-line, rgba(255,255,255,.12));
}
body[data-panel="bottom"] #taskbar { left: 0; right: 0; bottom: 0; height: var(--tb-size); border-top-width: 1px; }
body[data-panel="top"] #taskbar { left: 0; right: 0; top: 0; height: var(--tb-size); border-bottom-width: 1px; }
body[data-panel="left"] #taskbar { left: 0; top: 0; bottom: 0; width: var(--tb-size); flex-direction: column; padding: 4px 0; border-right-width: 1px; }
body[data-panel="right"] #taskbar { right: 0; top: 0; bottom: 0; width: var(--tb-size); flex-direction: column; padding: 4px 0; border-left-width: 1px; }

.start-btn {
  display: flex; align-items: center; gap: 7px; height: calc(var(--tb-size) - 6px);
  padding: 0 10px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--start-bg, rgba(255,255,255,.10)); color: var(--start-fg, #fff);
  font-weight: 700; flex: none;
}
.start-btn:hover { background: var(--start-bg-hover, rgba(255,255,255,.20)); }
.start-btn.on { background: var(--start-bg-hover, rgba(255,255,255,.26)); }
.start-glyph {
  width: 18px; height: 18px; flex: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 10px 0 / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 0 10px / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 10px 10px / 8px 8px no-repeat;
}
body[data-panel="left"] .start-text, body[data-panel="right"] .start-text { display: none; }
body[data-panel="left"] .start-btn, body[data-panel="right"] .start-btn { padding: 0; justify-content: center; width: calc(var(--tb-size) - 8px); height: calc(var(--tb-size) - 8px); }

.tb-quick { display: flex; gap: 2px; align-items: center; flex: none; }
.tb-quick-btn { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
.tb-quick-btn:hover { background: rgba(255,255,255,.18); }
.tb-quick-btn .app-ico { width: 22px; height: 22px; border-radius: 5px; }
body[data-panel="left"] .tb-quick, body[data-panel="right"] .tb-quick { flex-direction: column; }

.tb-tasks { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; align-items: center; }
body[data-panel="left"] .tb-tasks, body[data-panel="right"] .tb-tasks { flex-direction: column; width: 100%; }
.tb-task {
  display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 180px;
  height: calc(var(--tb-size) - 8px); padding: 0 9px; cursor: pointer;
  background: var(--task-bg, rgba(255,255,255,.08)); color: inherit;
  border: 1px solid transparent; border-radius: 4px;
}
.tb-task .app-ico { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.tb-task .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-task:hover { background: var(--task-hover, rgba(255,255,255,.18)); border-color: rgba(255,255,255,.2); }
.tb-task.on { background: var(--task-on, rgba(255,255,255,.26)); }
.tb-task.min { opacity: .72; }
body[data-panel="left"] .tb-task, body[data-panel="right"] .tb-task { width: calc(var(--tb-size) - 8px); padding: 0; justify-content: center; max-width: none; }
body[data-panel="left"] .tb-task .lbl, body[data-panel="right"] .tb-task .lbl { display: none; }

.tb-tray { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 6px; }
body[data-panel="left"] .tb-tray, body[data-panel="right"] .tb-tray { flex-direction: column; padding: 6px 0 0; margin-top: auto; }
.tray-icons { display: flex; gap: 4px; align-items: center; }
body[data-panel="left"] .tray-icons, body[data-panel="right"] .tray-icons { flex-direction: column; }
.tray-ico { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 3px 5px; border-radius: 4px; display: grid; place-items: center; }
.tray-ico:hover { background: rgba(255,255,255,.18); }
.tray-ico svg { width: 14px; height: 14px; fill: currentColor; }
.tray-cpu { font-variant-numeric: tabular-nums; font-size: 11px; }
.tray-clock {
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 3px 8px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.25; font-size: 11.5px;
}
.tray-clock:hover { background: rgba(255,255,255,.16); }
#tbDate { opacity: .85; font-size: 10.5px; }
body[data-panel="left"] .tray-clock, body[data-panel="right"] .tray-clock { font-size: 10px; padding: 3px 2px; width: 100%; }
body[data-panel="left"] #tbDate, body[data-panel="right"] #tbDate { display: none; }
body[data-panel="left"] .tray-ico, body[data-panel="right"] .tray-ico { padding: 3px 2px; }
.show-desktop { width: 8px; align-self: stretch; border: 0; border-left: 1px solid rgba(255,255,255,.25); background: transparent; cursor: pointer; }
.show-desktop:hover { background: rgba(255,255,255,.18); }
body[data-panel="left"] .show-desktop, body[data-panel="right"] .show-desktop { width: auto; height: 8px; border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }

/* popovers follow the panel instead of the GNOME top bar */
body[data-bar="taskbar"] .popover { top: auto; left: auto; transform: none; }
body[data-bar="taskbar"][data-panel="bottom"] .popover { bottom: calc(var(--tb-size) + 6px); right: 8px; }
body[data-bar="taskbar"][data-panel="top"] .popover { top: calc(var(--tb-size) + 6px); right: 8px; }
body[data-bar="taskbar"][data-panel="left"] .popover { bottom: 8px; left: calc(var(--tb-size) + 6px); }
body[data-bar="taskbar"][data-panel="right"] .popover { bottom: 8px; right: calc(var(--tb-size) + 6px); }

/* ---------------- start menu, shared ---------------- */

.sm {
  position: fixed; z-index: 420; overflow: hidden;
  background: var(--sm-bg, #232323); color: var(--sm-fg, #fff);
  border: 1px solid var(--sm-line, rgba(0,0,0,.5));
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  animation: smin .14s var(--ease);
}
@keyframes smin { from { opacity: 0; transform: translateY(8px); } }
.sm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
  background: transparent; border: 1px solid transparent; cursor: pointer; text-align: left;
  font-size: 13px; color: inherit;
}
.sm-item:hover { background: var(--sm-hover, rgba(255,255,255,.14)); }
.sm-item .app-ico { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.sm-item > svg { width: 18px; height: 18px; fill: currentColor; flex: none; opacity: .85; }
.sm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sep { height: 1px; background: var(--sm-line, rgba(128,128,128,.4)); margin: 5px 8px; }
.sm-search {
  width: 100%; padding: 7px 10px; border-radius: 4px; outline: none;
  border: 1px solid rgba(0,0,0,.25); background: #fff; color: #111; font-size: 13px;
}
.sm-body { padding: 4px; max-height: 62vh; overflow: auto; }
.sm-tile {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  width: 96px; height: 96px; padding: 8px; border: 0; cursor: pointer; color: #fff; text-align: left; font-size: 11.5px;
}
.sm-tile.wide { width: 198px; }
.sm-tile svg { width: 22px; height: 22px; fill: #fff; }
.sm-tile:hover { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }

/* classic (2000 and ME) */
.sm-classic { width: 240px; display: flex; --sm-bg: #d4d0c8; --sm-fg: #000; padding-left: 26px; }
.sm-classic .sm-banner {
  position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  background: linear-gradient(180deg, #0a246a, #a6caf0);
  display: flex; align-items: flex-end; justify-content: center;
}
.sm-classic .sm-banner span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  color: #fff; font-size: 15px; padding: 12px 0 14px; letter-spacing: .02em;
}
.sm-classic .sm-banner b { font-weight: 700; }
.sm-classic .sm-item { padding: 5px 12px 5px 6px; }
.sm-classic .sm-item:hover { background: #0a246a; color: #fff; }

/* Windows XP */
.sm-xp {
  width: 400px; --sm-bg: #fff; --sm-fg: #000;
  border: 0; border-radius: 8px 8px 0 0; padding-bottom: 0;
  box-shadow: 0 0 0 1px #0b3ea8, 0 22px 50px rgba(0,0,0,.5);
}
.xp-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(180deg, #1e63d4 0%, #2f7ae5 45%, #1a56bd 100%);
  color: #fff; font-weight: 700; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #fbc12e;
}
.xp-avatar { width: 34px; height: 34px; border-radius: 5px; background: linear-gradient(150deg, #ffd479, #e39c22); border: 2px solid #fff; flex: none; }
.xp-cols { display: flex; background: #fff; }
.xp-left { flex: 1; padding: 6px; border-right: 1px solid #d3e5fa; }
.xp-right { width: 168px; padding: 6px; background: #d3e5fa; }
.sm-xp .sm-item:hover { background: #2f7ae5; color: #fff; }
.sm-xp .all-programs { font-weight: 700; }
.sm-xp .all-programs b { margin-left: auto; color: #2f7ae5; }
.sm-xp .all-programs:hover b { color: #fff; }
.xp-foot {
  display: flex; justify-content: flex-end; gap: 14px; padding: 7px 14px;
  background: linear-gradient(180deg, #2f7ae5, #1a56bd); color: #fff;
}
.xp-foot-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 12px; }
.xp-foot-btn svg { width: 16px; height: 16px; fill: #fff; background: #c1443c; border-radius: 3px; padding: 2px; }
.xp-foot-btn:hover { text-decoration: underline; }

/* Windows 7 */
.sm-win7 {
  width: 500px; border-radius: 6px; --sm-fg: #1b1b1b;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(230,240,252,.94));
  backdrop-filter: blur(18px); border: 1px solid rgba(120,150,190,.7);
}
.w7-cols { display: flex; }
.w7-left { width: 300px; padding: 8px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgba(120,150,190,.4); }
.w7-apps { max-height: 46vh; overflow: auto; }
.w7-right { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, rgba(222,235,250,.8), rgba(206,225,246,.8)); }
.w7-user { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.w7-user .xp-avatar { width: 46px; height: 46px; border-radius: 6px; }
.w7-place { background: transparent; border: 0; text-align: left; padding: 5px 8px; cursor: pointer; border-radius: 3px; font-size: 12.5px; color: #123; }
.w7-place:hover { background: rgba(120,170,230,.35); }
.w7-shutdown { margin-top: auto; padding: 7px 10px; cursor: pointer; font-size: 12.5px; border-radius: 4px; border: 1px solid #9bb4d0; background: linear-gradient(180deg, #f4f8fd, #dbe6f4); color: #123; }
.w7-shutdown:hover { background: linear-gradient(180deg, #fff, #e8f0fb); }
.sm-win7 .sm-item:hover { background: rgba(120,170,230,.35); border-color: rgba(90,140,210,.5); border-radius: 3px; }

/* Windows 8 start screen */
.sm-win8 { --sm-bg: #1f4e79; background: #1f4e79; border: 0; padding: 40px 60px; overflow: auto; }
.w8-head { display: flex; align-items: baseline; gap: 14px; color: #fff; font-size: 34px; font-weight: 300; margin-bottom: 26px; }
.w8-user { font-size: 15px; opacity: .85; }
.w8-tiles { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.sm-win8 .sm-tile { border-radius: 0; }

/* Windows 10 */
.sm-win10 { width: 640px; --sm-bg: rgba(28,32,38,.96); --sm-fg: #fff; border: 1px solid rgba(255,255,255,.12); }
.w10-cols { display: flex; height: 460px; }
.w10-rail { width: 48px; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: rgba(0,0,0,.25); }
.w10-rail-btn { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 8px; border-radius: 4px; }
.w10-rail-btn:hover { background: rgba(255,255,255,.16); }
.w10-rail-btn svg { width: 16px; height: 16px; fill: currentColor; }
.w10-list { width: 260px; overflow: auto; padding: 8px; }
.w10-tiles { flex: 1; padding: 12px; background: rgba(255,255,255,.04); overflow: auto; }
.w10-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 4px 8px 8px; }
.w10-tile-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* Windows 11 */
.sm-win11 {
  width: 560px; border-radius: 10px; padding: 20px 22px 0;
  --sm-bg: rgba(243,243,243,.92); --sm-fg: #1a1a1a; --sm-hover: rgba(0,0,0,.06);
  background: var(--sm-bg); backdrop-filter: blur(30px); border: 1px solid rgba(0,0,0,.12);
}
.w11-head { font-size: 12px; font-weight: 700; margin: 16px 2px 10px; }
.w11-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 300px; overflow: auto; }
.w11-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-size: 11px; color: inherit; text-align: center; }
.w11-app:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.08); }
.w11-app .app-ico { width: 32px; height: 32px; border-radius: 8px; }
.w11-foot { display: flex; align-items: center; justify-content: space-between; margin: 16px -22px 0; padding: 12px 22px; background: rgba(0,0,0,.05); }
.w11-user { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.w11-user .xp-avatar { width: 26px; height: 26px; border-radius: 50%; }
.w11-power { border: 1px solid transparent; background: transparent; cursor: pointer; padding: 7px; border-radius: 6px; }
.w11-power:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.1); }
.w11-power svg { width: 16px; height: 16px; fill: #1a1a1a; }

/* Linux Mint */
.sm-mint { width: 560px; --sm-bg: #2f2f2f; --sm-fg: #e8e8e8; border: 1px solid #1c1c1c; }
.mint-cols { display: flex; height: 420px; }
.mint-side { width: 190px; padding: 10px 8px; background: #272727; border-right: 1px solid #1c1c1c; }
.mint-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mint-apps { flex: 1; overflow: auto; }
.mint-head { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #8ac36c; margin: 8px 6px 6px; }
.sm-mint .sm-item:hover { background: #3f7f2f; }
.sm-mint .sm-search { background: #1f1f1f; color: #eee; border-color: #4a4a4a; }

/* macOS Launchpad */
.sm-launchpad { background: rgba(20,20,25,.55); backdrop-filter: blur(26px); border: 0; }
.lp-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 60px 40px; }
.sm-launchpad .sm-search { max-width: 320px; text-align: center; border-radius: 8px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px; width: 100%; max-width: 900px; overflow: auto; }
.lp-app { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lp-app .app-ico { width: 60px; height: 60px; border-radius: 14px; }
.lp-app:hover .app-ico { transform: scale(1.06); }

/* ---------------- skin: GNOME (default, nothing to override) ---------------- */

/* ---------------- skin: Ubuntu ---------------- */
body[data-skin="ubuntu"] {
  --font: Ubuntu, "DejaVu Sans", -apple-system, sans-serif;
  --radius: 10px;
}
body[data-skin="ubuntu"][data-theme="dark"] {
  --hb-bg: #2c2c2c;
  --win-bg: #1e1c1c;
}
body[data-skin="ubuntu"] #topbar { background: rgba(20,15,18,.92); }
body[data-skin="ubuntu"] .dash-inner { background: rgba(30,24,28,.82); border-radius: 0; border-color: rgba(255,255,255,.1); padding: 8px 6px; }
body[data-skin="ubuntu"][data-panel="left"] .dash-inner,
body[data-skin="ubuntu"][data-panel="right"] .dash-inner { border-radius: 0; height: 100vh; padding-top: 40px; justify-content: flex-start; }
body[data-skin="ubuntu"][data-panel="left"] #dash { left: 0; top: 0; bottom: 0; transform: none; }
body[data-skin="ubuntu"][data-panel="right"] #dash { right: 0; top: 0; bottom: 0; transform: none; }
body[data-skin="ubuntu"][data-panel="bottom"] #dash { bottom: 0; }
body[data-skin="ubuntu"][data-panel="bottom"] .dash-inner { border-radius: 0; width: 100vw; justify-content: center; }
body[data-skin="ubuntu"] .dash-app { border-radius: 10px; }
body[data-skin="ubuntu"] .dash-app.running .run { background: #e95420; width: 4px; height: 4px; }

/* ---------------- skin: Linux Mint ---------------- */
body[data-skin="mint"] {
  --font: "Noto Sans", Ubuntu, sans-serif;
  --radius: 6px; --hb-h: 34px;
  --tb-bg: #2f2f2f; --tb-fg: #e8e8e8;
  --start-bg: #3f7f2f; --start-bg-hover: #4d9a39;
  --task-bg: rgba(255,255,255,.06); --task-on: #3f7f2f;
}
body[data-skin="mint"][data-theme="dark"] {
  --win-bg: #333; --hb-bg: #3c3c3c; --card: #3a3a3a; --card-hi: #444;
}
body[data-skin="mint"] .start-glyph {
  background: radial-gradient(circle at 50% 50%, #8ac36c 0 45%, transparent 46%),
    linear-gradient(#fff, #fff) 4px 4px / 10px 10px no-repeat;
  border-radius: 3px;
}
body[data-skin="mint"] .headerbar { background: linear-gradient(180deg, #454545, #383838); color: #e9e9e9; }
body[data-skin="mint"] .headerbar .wbtn svg { fill: #e9e9e9; }
body[data-skin="mint"] .wbtn { border-radius: 3px; }

/* ---------------- skin: macOS ---------------- */
body[data-skin="macos"] {
  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 10px; --hb-h: 38px; --bar-h: 28px;
}
body[data-skin="macos"] #topbar {
  background: rgba(255,255,255,.62); backdrop-filter: blur(24px) saturate(180%);
  color: #111; font-size: 13px; font-weight: 600;
}
body[data-skin="macos"][data-theme="dark"] #topbar { background: rgba(28,28,30,.7); color: #fff; }
body[data-skin="macos"] #topbar .topbar-item { color: inherit; }
body[data-skin="macos"] #topbar .topbar-item:hover { background: rgba(120,120,120,.22); }
body[data-skin="macos"] #activities.apple-menu { padding: 0 10px; }
body[data-skin="macos"] .apple { width: 15px; height: 15px; fill: currentColor; }
body[data-skin="macos"] #clock { position: static; transform: none; margin-left: auto; order: 9; }
body[data-skin="macos"] .topbar-right { margin-left: 0; order: 8; }
body[data-skin="macos"] .dash-inner { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.45); border-radius: 20px; }
body[data-skin="macos"][data-theme="dark"] .dash-inner { background: rgba(40,40,45,.5); }
body[data-skin="macos"] .dash-app { transition: transform .16s var(--ease); }
body[data-skin="macos"] .dash-app:hover { transform: translateY(-10px) scale(1.28); }
body[data-skin="macos"] .dash-app .app-ico { border-radius: 12px; }
body[data-skin="macos"] .dash-app.running .run { background: #444; width: 4px; height: 4px; }
/* traffic lights on the left */
body[data-skin="macos"] .headerbar { background: linear-gradient(180deg, #f6f6f6, #e6e6e6); border-bottom: 1px solid rgba(0,0,0,.16); }
body[data-skin="macos"][data-theme="dark"] .headerbar { background: linear-gradient(180deg, #3a3a3c, #2c2c2e); }
body[data-skin="macos"] .headerbar { position: relative; padding-left: 14px; }
body[data-skin="macos"] .hb-actions { order: -1; margin-right: 10px; gap: 8px; }
body[data-skin="macos"] .hb-icon { order: 1; }
body[data-skin="macos"] .hb-title {
  order: 2; position: absolute; left: 90px; right: 90px; align-items: center; text-align: center;
  pointer-events: none; font-size: 13px;
}
body[data-skin="macos"] .hb-spacer { order: 3; }
body[data-skin="macos"] .hb-extra { order: 4; }
body[data-skin="macos"] .wbtn { width: 13px; height: 13px; border: 0; }
/* the glyph sits inside the light and stays on, a finger has no hover to reveal it with */
body[data-skin="macos"] .wbtn svg { display: block; width: 8px; height: 8px; fill: rgba(0,0,0,.66); opacity: 1; }
/* the markup order is minimise, maximise, close; macOS reads red, amber, green */
body[data-skin="macos"] .wbtn.close { background: #ff5f57; order: 1; }
body[data-skin="macos"] .wbtn.min { background: #febc2e; order: 2; }
body[data-skin="macos"] .wbtn.maxb { background: #28c840; order: 3; }
body[data-skin="macos"] .wbtn:hover { filter: brightness(1.08); }
/* the shared rule turns close red with a white glyph, which the light already is */
body[data-skin="macos"] .wbtn.close:hover { background: #ff5f57; border-color: transparent; }
body[data-skin="macos"] .wbtn.close:hover svg { fill: rgba(0,0,0,.66); }
body[data-skin="macos"] .win:not(.active) .wbtn { background: #c8c8c8; }
body[data-skin="macos"] .win:not(.active) .wbtn svg { fill: rgba(0,0,0,.3); }
body[data-skin="macos"] .win { box-shadow: 0 30px 70px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.12); }

/* ---------------- skin: Windows 11 ---------------- */
body[data-skin="win11"] {
  --font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --radius: 8px; --hb-h: 40px;
  --tb-bg: rgba(243,243,243,.85); --tb-fg: #1a1a1a; --tb-line: rgba(0,0,0,.08);
  --start-bg: transparent; --start-bg-hover: rgba(0,0,0,.06);
  --task-bg: transparent; --task-hover: rgba(0,0,0,.06); --task-on: rgba(0,0,0,.08);
}
body[data-skin="win11"] #taskbar { backdrop-filter: blur(26px) saturate(160%); justify-content: center; gap: 3px; }
body[data-skin="win11"][data-panel="left"] #taskbar,
body[data-skin="win11"][data-panel="right"] #taskbar { justify-content: flex-start; }
body[data-skin="win11"] .tb-tasks { flex: 0 1 auto; }
body[data-skin="win11"] .tb-tray { position: absolute; right: 8px; }
body[data-skin="win11"][data-panel="left"] .tb-tray,
body[data-skin="win11"][data-panel="right"] .tb-tray { position: static; margin-top: auto; }
body[data-skin="win11"] .start-glyph {
  background:
    linear-gradient(#0067c0, #0067c0) 0 0 / 8px 8px no-repeat,
    linear-gradient(#0067c0, #0067c0) 10px 0 / 8px 8px no-repeat,
    linear-gradient(#0067c0, #0067c0) 0 10px / 8px 8px no-repeat,
    linear-gradient(#0067c0, #0067c0) 10px 10px / 8px 8px no-repeat;
}
body[data-skin="win11"] .tb-task.on { box-shadow: inset 0 -2px 0 #0067c0; }
body[data-skin="win11"] .headerbar { background: #f3f3f3; border-bottom: 1px solid rgba(0,0,0,.08); }
body[data-skin="win11"][data-theme="dark"] .headerbar { background: #2b2b2b; }
body[data-skin="win11"] .wbtn { width: 34px; height: 30px; border-radius: 0; background: transparent; }
body[data-skin="win11"] .wbtn:hover { background: rgba(0,0,0,.08); }
body[data-skin="win11"] .wbtn.close:hover { background: #c42b1c; }
body[data-skin="win11"] .win { border-radius: 8px; }

/* ---------------- skin: Windows 10 ---------------- */
body[data-skin="win10"] {
  --font: "Segoe UI", system-ui, sans-serif;
  --radius: 0px; --hb-h: 34px;
  --tb-bg: #1f1f1f; --tb-fg: #fff;
  --start-bg: transparent; --start-bg-hover: rgba(255,255,255,.14);
  --task-bg: transparent; --task-hover: rgba(255,255,255,.12); --task-on: rgba(255,255,255,.2);
}
body[data-skin="win10"] .start-btn { border-radius: 0; }
body[data-skin="win10"] .tb-task { border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
body[data-skin="win10"] .tb-task.on { box-shadow: inset 0 -2px 0 #0078d7; background: rgba(255,255,255,.16); }
body[data-skin="win10"] .headerbar { background: #ffffff; border-bottom: 1px solid #d6d6d6; }
body[data-skin="win10"][data-theme="dark"] .headerbar { background: #2b2b2b; border-bottom-color: #3d3d3d; }
body[data-skin="win10"] .win { border-radius: 0; border: 1px solid #0078d7; }
body[data-skin="win10"] .win:not(.active) { border-color: rgba(120,120,120,.5); }
body[data-skin="win10"] .wbtn { width: 40px; height: 28px; border-radius: 0; background: transparent; }
body[data-skin="win10"] .wbtn:hover { background: rgba(128,128,128,.25); }
body[data-skin="win10"] .wbtn.close:hover { background: #e81123; }

/* ---------------- skin: Windows 8 ---------------- */
body[data-skin="win8"] {
  --font: "Segoe UI", system-ui, sans-serif;
  --radius: 0px; --hb-h: 32px;
  --tb-bg: #2c2c2c; --tb-fg: #fff;
  --start-bg: #1f4e79; --start-bg-hover: #2a6ba5;
  --task-bg: rgba(255,255,255,.07); --task-on: rgba(255,255,255,.2);
}
body[data-skin="win8"] .start-btn, body[data-skin="win8"] .tb-task { border-radius: 0; }
body[data-skin="win8"] .headerbar { background: #1f4e79; color: #fff; border-bottom: 0; }
body[data-skin="win8"] .headerbar .hb-title small { color: rgba(255,255,255,.75); }
body[data-skin="win8"] .win:not(.active) .headerbar { background: #7a8a99; }
body[data-skin="win8"] .win { border-radius: 0; border: 1px solid #1f4e79; }
body[data-skin="win8"] .wbtn { width: 38px; height: 26px; border-radius: 0; background: transparent; }
body[data-skin="win8"] .wbtn svg { fill: #fff; }
body[data-skin="win8"] .wbtn:hover { background: rgba(255,255,255,.25); }
body[data-skin="win8"] .wbtn.close:hover { background: #e81123; }

/* ---------------- skin: Windows 7 ---------------- */
body[data-skin="win7"] {
  --font: "Segoe UI", Tahoma, sans-serif;
  --radius: 8px; --hb-h: 38px;
  --tb-bg: linear-gradient(180deg, rgba(40,60,90,.86), rgba(14,22,40,.9));
  --tb-fg: #fff; --tb-line: rgba(255,255,255,.25);
  --start-bg: transparent; --start-bg-hover: rgba(255,255,255,.12);
  --task-bg: rgba(255,255,255,.10); --task-hover: rgba(255,255,255,.24); --task-on: rgba(255,255,255,.3);
}
body[data-skin="win7"] #taskbar { backdrop-filter: blur(12px); }
body[data-skin="win7"] .start-btn {
  width: 46px; height: 46px; padding: 0; margin: 0 4px 0 -2px; border-radius: 50%; justify-content: center;
  background: radial-gradient(circle at 38% 32%, #cfe8ff 0%, #4ba3e8 42%, #0d63b0 70%, #073d73 100%);
  box-shadow: 0 0 10px rgba(90,180,255,.6), inset 0 0 6px rgba(255,255,255,.5);
}
body[data-skin="win7"] .start-btn:hover { filter: brightness(1.2); }
body[data-skin="win7"] .start-glyph { width: 20px; height: 20px; transform: perspective(20px) rotateY(-6deg); }
body[data-skin="win7"] .tb-task { border: 1px solid rgba(255,255,255,.25); border-radius: 3px; }
body[data-skin="win7"] .headerbar {
  background: linear-gradient(180deg, rgba(235,244,255,.96), rgba(190,215,240,.92));
  border-bottom: 1px solid rgba(120,150,190,.7);
  color: #10243c;   /* Aero glass is always light, so pin the text or dark mode turns it white */
}
body[data-skin="win7"] .headerbar .wbtn svg { fill: #10243c; }
body[data-skin="win7"] .win {
  border: 1px solid rgba(140,175,215,.85); border-radius: 8px;
  box-shadow: 0 0 22px rgba(90,150,220,.35), 0 24px 60px rgba(0,0,0,.45);
}
body[data-skin="win7"] .wbtn { width: 30px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #f7fbff, #cddff1); border: 1px solid #93b4d4; }
body[data-skin="win7"] .wbtn:hover { background: linear-gradient(180deg, #ffffff, #dceaf8); }
body[data-skin="win7"] .wbtn.close { width: 44px; background: linear-gradient(180deg, #fdd3d0, #e8817a); border-color: #b95c56; }
body[data-skin="win7"] .wbtn.close:hover { background: linear-gradient(180deg, #ff9b93, #d0403a); }
body[data-skin="win7"] .wbtn svg { fill: #123; }

/* ---------------- skin: Windows XP ---------------- */
body[data-skin="winxp"] {
  --font: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  --radius: 8px; --hb-h: 30px;
  --tb-bg: linear-gradient(180deg, #3f8bea 0%, #245edb 9%, #245edb 88%, #1941a5 100%);
  --tb-fg: #fff; --tb-line: #1941a5;
  --task-bg: linear-gradient(180deg, #4a90ec, #2b64d8); --task-hover: linear-gradient(180deg, #6aa8f5, #3a74e0);
  --task-on: linear-gradient(180deg, #1c4fb5, #2f6ddb);
  --hb-bg: #0a246a;
}
/* Window surfaces only apply in the theme the skin was drawn for. Left unguarded they beat
   [data-theme=...] on specificity, so dark mode put white text on the XP beige. */
body[data-skin="winxp"][data-theme="light"] {
  --win-bg: #ece9d8; --card: #fff; --card-hi: #f4f2ea;
  --line: rgba(0,0,0,.14); --line-strong: rgba(0,0,0,.24);
}
body[data-skin="winxp"] .start-btn {
  height: calc(var(--tb-size) - 2px); margin-left: -4px; padding: 0 22px 0 10px;
  background: linear-gradient(180deg, #63bd47 0%, #43a12b 45%, #2e8a1c 60%, #56b23c 100%);
  border-radius: 0 12px 12px 0; font-style: italic; font-size: 15px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-skin="winxp"] .start-btn:hover { filter: brightness(1.12); }
body[data-skin="winxp"] .start-glyph {
  background:
    linear-gradient(#f45a4b, #f45a4b) 0 0 / 8px 8px no-repeat,
    linear-gradient(#7ac943, #7ac943) 10px 0 / 8px 8px no-repeat,
    linear-gradient(#4a9ee8, #4a9ee8) 0 10px / 8px 8px no-repeat,
    linear-gradient(#ffcf3f, #ffcf3f) 10px 10px / 8px 8px no-repeat;
  transform: perspective(24px) rotateY(-14deg);
}
body[data-skin="winxp"] .tb-task { border-radius: 3px; border: 1px solid #1941a5; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
body[data-skin="winxp"] .tb-tray { background: linear-gradient(180deg, #22a5e2, #14a2e0 40%, #0b8bc9 100%); align-self: stretch; padding: 0 8px; margin-left: 4px; }
body[data-skin="winxp"][data-panel="left"] .tb-tray, body[data-skin="winxp"][data-panel="right"] .tb-tray { align-self: auto; padding: 6px 0; }
body[data-skin="winxp"] .headerbar {
  background: linear-gradient(180deg, #3f8bea 0%, #145dd6 12%, #1a5fd8 78%, #0b3fa8 100%);
  color: #fff; border-bottom: 0; padding-left: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-skin="winxp"] .win:not(.active) .headerbar { background: linear-gradient(180deg, #9db9e8, #7a9ad4); color: #eef3fb; }
body[data-skin="winxp"] .hb-title { font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,.45); }
body[data-skin="winxp"] .hb-title small { color: rgba(255,255,255,.8); }
body[data-skin="winxp"] .win { border: 3px solid #0b3fa8; border-top: 0; border-radius: 8px 8px 2px 2px; }
body[data-skin="winxp"] .wbtn {
  width: 22px; height: 20px; border-radius: 4px; border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(180deg, #6ea9f0, #2f6ddb);
}
body[data-skin="winxp"] .wbtn svg { fill: #fff; }
body[data-skin="winxp"] .wbtn.close { background: linear-gradient(180deg, #f08a70, #d9391b); border-color: rgba(255,255,255,.7); }
body[data-skin="winxp"] .wbtn.close:hover { background: linear-gradient(180deg, #ffae96, #f2542f); }

/* ---------------- skins: Windows 2000 and ME (classic chrome) ---------------- */
body[data-skin="win2000"], body[data-skin="winme"] {
  --font: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  --radius: 0px; --hb-h: 26px;
  --tb-bg: #d4d0c8; --tb-fg: #000; --tb-line: #808080;
  --start-bg: #d4d0c8; --start-bg-hover: #dfdcd4;
  --task-bg: #d4d0c8; --task-hover: #dfdcd4; --task-on: #c0bcb4;
  --hb-bg: #0a246a;
}
body[data-skin="win2000"][data-theme="light"], body[data-skin="winme"][data-theme="light"] {
  --win-bg: #d4d0c8; --win-fg: #000; --card: #fff; --card-hi: #efefef; --sunken: #fff;
  --line: #a0a0a0; --line-strong: #808080;
  --btn: #d4d0c8; --btn-hover: #dfdcd4; --dim: #333; --dimmer: #666;
}
body[data-skin="win2000"] #taskbar, body[data-skin="winme"] #taskbar {
  box-shadow: inset 0 1px 0 #fff, inset 0 2px 0 #dfdcd4; gap: 3px;
}
body[data-skin="win2000"] .start-btn, body[data-skin="winme"] .start-btn,
body[data-skin="win2000"] .tb-task, body[data-skin="winme"] .tb-task,
body[data-skin="win2000"] .tray-ico, body[data-skin="winme"] .tray-ico {
  color: #000;
  border-radius: 0; font-weight: 700; font-size: 11px;
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdcd4;
}
body[data-skin="win2000"] .tb-task, body[data-skin="winme"] .tb-task { font-weight: 400; }
body[data-skin="win2000"] .tb-task.on, body[data-skin="winme"] .tb-task.on {
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdcd4;
  background: repeating-linear-gradient(45deg, #c0bcb4 0 2px, #d4d0c8 2px 4px);
}
body[data-skin="win2000"] .start-glyph, body[data-skin="winme"] .start-glyph {
  width: 16px; height: 16px;
  background:
    linear-gradient(#f45a4b, #f45a4b) 0 0 / 7px 7px no-repeat,
    linear-gradient(#7ac943, #7ac943) 9px 0 / 7px 7px no-repeat,
    linear-gradient(#4a9ee8, #4a9ee8) 0 9px / 7px 7px no-repeat,
    linear-gradient(#ffcf3f, #ffcf3f) 9px 9px / 7px 7px no-repeat;
}
body[data-skin="win2000"] .tray-clock, body[data-skin="winme"] .tray-clock {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; border-radius: 0; font-size: 11px;
}
body[data-skin="win2000"] #tbDate, body[data-skin="winme"] #tbDate { display: none; }
body[data-skin="win2000"] .headerbar, body[data-skin="winme"] .headerbar {
  background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; border-bottom: 0; padding: 0 3px 0 4px;
}
body[data-skin="winme"] .headerbar { background: linear-gradient(90deg, #0a246a, #3a6ea5); }
body[data-skin="win2000"] .win:not(.active) .headerbar, body[data-skin="winme"] .win:not(.active) .headerbar {
  background: linear-gradient(90deg, #808080, #b5b5b5); color: #e8e8e8;
}
body[data-skin="win2000"] .hb-title, body[data-skin="winme"] .hb-title { font-weight: 700; font-size: 12px; }
body[data-skin="win2000"] .win, body[data-skin="winme"] .win {
  border: 0; border-radius: 0; padding: 3px; background: #d4d0c8;
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdcd4, 4px 4px 10px rgba(0,0,0,.35);
}
body[data-skin="win2000"] .win-body, body[data-skin="winme"] .win-body { border: 1px solid #808080; background: var(--win-bg); }
body[data-skin="win2000"] .wbtn, body[data-skin="winme"] .wbtn {
  width: 19px; height: 17px; border-radius: 0; background: #d4d0c8;
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdcd4;
}
body[data-skin="win2000"] .wbtn svg, body[data-skin="winme"] .wbtn svg { fill: #000; width: 8px; height: 8px; }
body[data-skin="win2000"] .wbtn:hover, body[data-skin="winme"] .wbtn:hover { background: #dfdcd4; }
body[data-skin="win2000"] .wbtn.close:hover, body[data-skin="winme"] .wbtn.close:hover { background: #e0554b; }
body[data-skin="win2000"] .btn, body[data-skin="winme"] .btn {
  border-radius: 0; border: 1px solid #808080; background: #d4d0c8; color: #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
}
body[data-skin="win2000"] .btn:hover, body[data-skin="winme"] .btn:hover { background: #dfdcd4; }
body[data-skin="win2000"] .input, body[data-skin="winme"] .input,
body[data-skin="win2000"] .search, body[data-skin="winme"] .search {
  /* the classic field is always white, so it carries its own text colour or dark mode
     inherits white on white and you cannot see what you are typing */
  border-radius: 0; background: #fff; color: #000; border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #404040;
}
body[data-skin="win2000"] .list, body[data-skin="winme"] .list,
body[data-skin="win2000"] .stat, body[data-skin="winme"] .stat,
body[data-skin="win2000"] .chart-card, body[data-skin="winme"] .chart-card,
body[data-skin="win2000"] .settings-group, body[data-skin="winme"] .settings-group { border-radius: 0; border-color: #808080; }
body[data-skin="win2000"] .row.sel, body[data-skin="winme"] .row.sel { background: #0a246a; color: #fff; }
body[data-skin="win2000"] .side-item.on, body[data-skin="winme"] .side-item.on { background: #0a246a; border-radius: 0; }
body[data-skin="win2000"] .chip, body[data-skin="winme"] .chip { border-radius: 0; border: 1px solid #808080; }

/* window chrome tweaks shared by every Windows skin */
body[data-skin^="win"] .hb-title { font-size: 13px; }
body[data-skin^="win"] .headerbar { cursor: default; }
body[data-skin^="win"] .wbtn:active { transform: translateY(1px); }

/* ---------------- uploaded avatar ---------------- */

body.has-avatar .lock-avatar,
body.has-avatar .xp-avatar,
body.has-avatar .w11-user .xp-avatar,
body.has-avatar .w7-user .xp-avatar {
  background-image: var(--avatar);
  background-size: cover;
  background-position: center;
}
body.has-avatar .lock-avatar::after { display: none; }

/* ---------------- extra wallpapers ---------------- */

/* an uploaded picture */
[data-wallpaper="custom"] .wp, [data-wallpaper="custom"] #lock,
.wall-prev[data-wallpaper="custom"] .wp {
  background-image: var(--wall-image);
  background-size: cover;
  background-position: center;
  background-color: #0d0f13;
}

[data-wallpaper="nebula"] .wp, [data-wallpaper="nebula"] #lock,
.wall-prev[data-wallpaper="nebula"] .wp {
  background:
    radial-gradient(50% 55% at 70% 25%, #7b3fe4 0%, transparent 60%),
    radial-gradient(60% 60% at 25% 70%, #2b6fe8 0%, transparent 62%),
    radial-gradient(35% 40% at 55% 45%, #e05aa6 0%, transparent 60%),
    linear-gradient(160deg, #070a1e 0%, #120b2e 55%, #04040f 100%);
}
[data-wallpaper="ember"] .wp, [data-wallpaper="ember"] #lock,
.wall-prev[data-wallpaper="ember"] .wp {
  background:
    radial-gradient(70% 60% at 50% 100%, #ff6b1a 0%, transparent 62%),
    radial-gradient(50% 50% at 20% 30%, #b3202a 0%, transparent 60%),
    linear-gradient(165deg, #1b0705 0%, #300d0a 55%, #0d0403 100%);
}
[data-wallpaper="ocean"] .wp, [data-wallpaper="ocean"] #lock,
.wall-prev[data-wallpaper="ocean"] .wp {
  background:
    radial-gradient(70% 60% at 30% 20%, #0f8bd8 0%, transparent 60%),
    radial-gradient(60% 70% at 80% 85%, #063f6b 0%, transparent 62%),
    linear-gradient(170deg, #021425 0%, #04304f 60%, #010b15 100%);
}
[data-wallpaper="lagoon"] .wp, [data-wallpaper="lagoon"] #lock,
.wall-prev[data-wallpaper="lagoon"] .wp {
  background:
    radial-gradient(60% 60% at 25% 25%, #16d4c2 0%, transparent 58%),
    radial-gradient(60% 60% at 80% 70%, #1a7fd4 0%, transparent 60%),
    linear-gradient(160deg, #032a2c 0%, #05363f 55%, #01181c 100%);
}
[data-wallpaper="sakura"] .wp, [data-wallpaper="sakura"] #lock,
.wall-prev[data-wallpaper="sakura"] .wp {
  background:
    radial-gradient(60% 60% at 25% 20%, #ffd6e6 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 60%, #ffb3d1 0%, transparent 60%),
    linear-gradient(160deg, #fff4f8 0%, #ffe3ee 55%, #f6cfe0 100%);
}
[data-wallpaper="dune"] .wp, [data-wallpaper="dune"] #lock,
.wall-prev[data-wallpaper="dune"] .wp {
  background:
    radial-gradient(70% 50% at 50% 95%, #d99a4e 0%, transparent 62%),
    radial-gradient(50% 50% at 75% 20%, #f2c777 0%, transparent 60%),
    linear-gradient(165deg, #4a2c15 0%, #7a4d22 55%, #2a1809 100%);
}
[data-wallpaper="vapor"] .wp, [data-wallpaper="vapor"] #lock,
.wall-prev[data-wallpaper="vapor"] .wp {
  background:
    linear-gradient(transparent 68%, rgba(255,255,255,.16) 68.4%, transparent 69%),
    repeating-linear-gradient(180deg, transparent 0 6%, rgba(255,110,220,.16) 6% 6.4%),
    radial-gradient(35% 24% at 50% 68%, #ffcf3f 0%, #ff4d9d 55%, transparent 70%),
    linear-gradient(180deg, #1b0736 0%, #3a1060 55%, #6b1b6b 100%);
}
[data-wallpaper="matrix"] .wp, [data-wallpaper="matrix"] #lock,
.wall-prev[data-wallpaper="matrix"] .wp {
  background:
    repeating-linear-gradient(90deg, rgba(0,255,120,.05) 0 2px, transparent 2px 8px),
    radial-gradient(60% 60% at 50% 40%, rgba(0,255,120,.18) 0%, transparent 65%),
    linear-gradient(160deg, #000804 0%, #021a0c 60%, #000402 100%);
}
[data-wallpaper="cosmos"] .wp, [data-wallpaper="cosmos"] #lock,
.wall-prev[data-wallpaper="cosmos"] .wp {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 45% 75%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(55% 55% at 65% 35%, #3b2a7a 0%, transparent 62%),
    linear-gradient(160deg, #05060f 0%, #0b0a1c 60%, #020208 100%);
}
[data-wallpaper="midnight"] .wp, [data-wallpaper="midnight"] #lock,
.wall-prev[data-wallpaper="midnight"] .wp {
  background:
    radial-gradient(60% 55% at 50% 15%, #16243f 0%, transparent 62%),
    linear-gradient(170deg, #070b14 0%, #0d1422 60%, #04060b 100%);
}
[data-wallpaper="paper"] .wp, [data-wallpaper="paper"] #lock,
.wall-prev[data-wallpaper="paper"] .wp {
  background:
    radial-gradient(60% 60% at 25% 20%, #ffffff 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 80%, #f0ece3 0%, transparent 60%),
    linear-gradient(160deg, #faf7f0 0%, #efe9dd 60%, #e4ddcd 100%);
}
[data-wallpaper="mono"] .wp, [data-wallpaper="mono"] #lock,
.wall-prev[data-wallpaper="mono"] .wp {
  background:
    radial-gradient(60% 60% at 30% 25%, #ffffff 0%, transparent 62%),
    linear-gradient(160deg, #e9ecf0 0%, #d6dbe2 60%, #c3c9d2 100%);
}

[data-wallpaper="bliss"] .wp, [data-wallpaper="bliss"] #lock,
.wall-prev[data-wallpaper="bliss"] .wp {
  background:
    radial-gradient(60% 26% at 22% 30%, rgba(255,255,255,.85) 0%, transparent 60%),
    radial-gradient(40% 18% at 68% 20%, rgba(255,255,255,.7) 0%, transparent 60%),
    radial-gradient(120% 42% at 50% 104%, #6ab04c 0%, #4e9c37 42%, transparent 72%),
    linear-gradient(180deg, #1b5fb0 0%, #3d8ede 38%, #8fc2e8 60%, #cfe3f2 68%, #7ab648 69%, #47892a 100%);
}
[data-wallpaper="win2000"] .wp, [data-wallpaper="win2000"] #lock,
.wall-prev[data-wallpaper="win2000"] .wp { background: #3a6ea5; }
[data-wallpaper="winme"] .wp, [data-wallpaper="winme"] #lock,
.wall-prev[data-wallpaper="winme"] .wp {
  background: radial-gradient(90% 70% at 50% 30%, #9fd3f0 0%, #4a86b8 60%, #1e4d73 100%);
}
[data-wallpaper="win7"] .wp, [data-wallpaper="win7"] #lock,
.wall-prev[data-wallpaper="win7"] .wp {
  background:
    radial-gradient(90% 60% at 50% 92%, rgba(120,200,255,.55) 0%, transparent 62%),
    radial-gradient(60% 50% at 22% 20%, rgba(90,180,255,.4) 0%, transparent 60%),
    linear-gradient(160deg, #06192e 0%, #0b3c66 45%, #041524 100%);
}
[data-wallpaper="win8"] .wp, [data-wallpaper="win8"] #lock,
.wall-prev[data-wallpaper="win8"] .wp {
  background: linear-gradient(140deg, #1f4e79 0%, #2a6ba5 55%, #16405f 100%);
}
[data-wallpaper="win10"] .wp, [data-wallpaper="win10"] #lock,
.wall-prev[data-wallpaper="win10"] .wp {
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(80,160,255,.5) 0%, transparent 65%),
    conic-gradient(from 210deg at 50% 55%, #0b3c73, #0a2748, #145da8, #0b3c73),
    linear-gradient(160deg, #041224, #0a2038);
}
[data-wallpaper="win11"] .wp, [data-wallpaper="win11"] #lock,
.wall-prev[data-wallpaper="win11"] .wp {
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(120,190,255,.75) 0%, transparent 62%),
    conic-gradient(from 40deg at 50% 48%, #1b4ea8, #2f7fd6, #7b4fd0, #1b4ea8),
    linear-gradient(160deg, #071b3a, #0d2c56);
}
[data-wallpaper="macos"] .wp, [data-wallpaper="macos"] #lock,
.wall-prev[data-wallpaper="macos"] .wp {
  background:
    radial-gradient(70% 60% at 30% 20%, #ff7a59 0%, transparent 60%),
    radial-gradient(70% 60% at 78% 40%, #b14bd6 0%, transparent 62%),
    radial-gradient(80% 70% at 50% 100%, #1c4fd8 0%, transparent 65%),
    linear-gradient(160deg, #2a1150 0%, #16265e 60%, #08122e 100%);
}
[data-wallpaper="ubuntu"] .wp, [data-wallpaper="ubuntu"] #lock,
.wall-prev[data-wallpaper="ubuntu"] .wp {
  background:
    radial-gradient(80% 60% at 70% 25%, #e95420 0%, transparent 58%),
    radial-gradient(70% 60% at 20% 80%, #772953 0%, transparent 60%),
    linear-gradient(160deg, #2c001e 0%, #46102f 55%, #1b0012 100%);
}
[data-wallpaper="mint"] .wp, [data-wallpaper="mint"] #lock,
.wall-prev[data-wallpaper="mint"] .wp {
  background:
    radial-gradient(80% 60% at 30% 25%, #8ac36c 0%, transparent 58%),
    radial-gradient(70% 60% at 78% 78%, #2f6b3a 0%, transparent 60%),
    linear-gradient(160deg, #10261a 0%, #17381f 55%, #08170e 100%);
}

/* small screens: the taskbar keeps its labels only when there is room */
@media (max-width: 760px) {
  .tb-task .lbl { display: none; }
  .sm-win10, .sm-win11, .sm-win7, .sm-mint { width: calc(100vw - 24px) !important; }
}

/* ---------------- Windows XP colour schemes ----------------
   XP shipped three (Luna Blue, Olive Green, Silver) and the black and orange
   one arrived later with the Zune. Luna is the default and stays exactly as the
   rules above leave it; each block here restates only what actually changes, so
   the default cannot be broken by editing a variant. Selected with data-xp on
   body, which outranks the plain [data-skin] rules on specificity. */

/* Olive Green */
body[data-skin="winxp"][data-xp="olive"] {
  --tb-bg: linear-gradient(180deg, #8ca552 0%, #7c9743 9%, #7c9743 88%, #56682c 100%);
  --tb-line: #56682c;
  --task-bg: linear-gradient(180deg, #93ac59, #6f8a3a); --task-hover: linear-gradient(180deg, #a8c06d, #829c48);
  --task-on: linear-gradient(180deg, #566b2b, #7d9944);
  --hb-bg: #3c4a1c;
}
body[data-skin="winxp"][data-xp="olive"] .start-btn {
  background: linear-gradient(180deg, #a6c05e 0%, #86a340 45%, #6d8a2c 60%, #93b04c 100%);
}
body[data-skin="winxp"][data-xp="olive"] .tb-task { border-color: #56682c; }
body[data-skin="winxp"][data-xp="olive"] .tb-tray { background: linear-gradient(180deg, #9cb566, #8aa354 40%, #6d8437 100%); }
body[data-skin="winxp"][data-xp="olive"] .headerbar {
  background: linear-gradient(180deg, #9cb566 0%, #7d9944 12%, #829e48 78%, #5c7330 100%);
}
body[data-skin="winxp"][data-xp="olive"] .win:not(.active) .headerbar { background: linear-gradient(180deg, #c2cfa4, #a5b487); }
body[data-skin="winxp"][data-xp="olive"] .win { border-color: #5c7330; }
body[data-skin="winxp"][data-xp="olive"] .wbtn { background: linear-gradient(180deg, #a5bd6b, #7d9944); }

/* Silver. The one scheme with a light bar, so the taskbar text has to flip dark
   or it vanishes into the chrome. */
body[data-skin="winxp"][data-xp="silver"] {
  --tb-bg: linear-gradient(180deg, #f0f0f4 0%, #d3d3de 9%, #c3c3d1 88%, #8f8fa3 100%);
  --tb-fg: #16161c; --tb-line: #8f8fa3;
  --task-bg: linear-gradient(180deg, #fbfbfd, #d0d0dc); --task-hover: linear-gradient(180deg, #fff, #e2e2ec);
  --task-on: linear-gradient(180deg, #a9a9bb, #cfcfdd);
  --hb-bg: #6d6d80;
}
body[data-skin="winxp"][data-xp="silver"] .start-btn {
  background: linear-gradient(180deg, #b9c9a8 0%, #93a97f 45%, #7b9366 60%, #a3b892 100%);
  color: #16240c;
}
body[data-skin="winxp"][data-xp="silver"] .tb-task { border-color: #8f8fa3; color: #16161c; }
body[data-skin="winxp"][data-xp="silver"] .tb-tray { background: linear-gradient(180deg, #e6e6ee, #d0d0dc 40%, #b4b4c4 100%); color: #16161c; }
body[data-skin="winxp"][data-xp="silver"] .trayClock, body[data-skin="winxp"][data-xp="silver"] .tray-ico { color: #16161c; }
body[data-skin="winxp"][data-xp="silver"] .headerbar {
  background: linear-gradient(180deg, #fbfbfd 0%, #d8d8e4 12%, #cdcddb 78%, #9a9aae 100%);
  color: #16161c; text-shadow: none;
}
body[data-skin="winxp"][data-xp="silver"] .hb-title { text-shadow: none; color: #16161c; }
body[data-skin="winxp"][data-xp="silver"] .hb-title small { color: rgba(0,0,0,.55); }
body[data-skin="winxp"][data-xp="silver"] .win:not(.active) .headerbar { background: linear-gradient(180deg, #eaeaf0, #cfcfdb); color: #4a4a58; }
body[data-skin="winxp"][data-xp="silver"] .win { border-color: #9a9aae; }
body[data-skin="winxp"][data-xp="silver"] .wbtn { background: linear-gradient(180deg, #fdfdff, #c6c6d4); border-color: rgba(0,0,0,.25); }
body[data-skin="winxp"][data-xp="silver"] .wbtn svg { fill: #16161c; }

/* Black and orange, the Zune scheme */
body[data-skin="winxp"][data-xp="zune"] {
  --tb-bg: linear-gradient(180deg, #3a3a3a 0%, #212121 9%, #191919 88%, #000 100%);
  --tb-fg: #f2f2f2; --tb-line: #000;
  --task-bg: linear-gradient(180deg, #3d3d3d, #262626); --task-hover: linear-gradient(180deg, #565656, #333);
  --task-on: linear-gradient(180deg, #c2620f, #e8862a);
  --hb-bg: #1a1a1a;
}
body[data-skin="winxp"][data-xp="zune"] .start-btn {
  background: linear-gradient(180deg, #f5ab3c 0%, #ef8f22 45%, #cf6f10 60%, #f09b2e 100%);
  color: #201200;
  text-shadow: 1px 1px 2px rgba(255,255,255,.35);
}
body[data-skin="winxp"][data-xp="zune"] .tb-task { border-color: #000; }
body[data-skin="winxp"][data-xp="zune"] .tb-tray { background: linear-gradient(180deg, #333, #222 40%, #111 100%); }
body[data-skin="winxp"][data-xp="zune"] .headerbar {
  background: linear-gradient(180deg, #4a4a4a 0%, #262626 12%, #1f1f1f 78%, #0a0a0a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 #e8862a;
}
body[data-skin="winxp"][data-xp="zune"] .win:not(.active) .headerbar { background: linear-gradient(180deg, #5a5a5a, #3a3a3a); color: #cfcfcf; box-shadow: none; }
body[data-skin="winxp"][data-xp="zune"] .win { border-color: #0a0a0a; }
body[data-skin="winxp"][data-xp="zune"] .wbtn { background: linear-gradient(180deg, #4f4f4f, #2a2a2a); border-color: rgba(255,255,255,.35); }
body[data-skin="winxp"][data-xp="zune"] .wbtn.close { background: linear-gradient(180deg, #f5ab3c, #cf6f10); }
body[data-skin="winxp"][data-xp="zune"] .wbtn.close:hover { background: linear-gradient(180deg, #ffc266, #e8862a); }

/* The start menu is the most recognisable part of a scheme, so it has to follow
   the taskbar rather than staying Luna blue underneath a black taskbar. */
body[data-xp="olive"] .xp-head { background: linear-gradient(180deg, #6d8a2c 0%, #86a340 45%, #5c7330 100%); border-bottom-color: #d8e08a; }
body[data-xp="olive"] .xp-right { background: #e3e9cd; }
body[data-xp="olive"] .xp-left { border-right-color: #e3e9cd; }
body[data-xp="olive"] .sm-xp .sm-item:hover { background: #86a340; }
body[data-xp="olive"] .sm-xp .all-programs b { color: #6d8a2c; }
body[data-xp="olive"] .xp-foot { background: linear-gradient(180deg, #86a340, #5c7330); }

body[data-xp="silver"] .xp-head { background: linear-gradient(180deg, #b6b6c6 0%, #d8d8e4 45%, #9a9aae 100%); color: #16161c; border-bottom-color: #7e7e92; }
body[data-xp="silver"] .xp-right { background: #e8e8ef; }
body[data-xp="silver"] .xp-left { border-right-color: #e8e8ef; }
body[data-xp="silver"] .sm-xp .sm-item:hover { background: #9a9aae; color: #fff; }
body[data-xp="silver"] .sm-xp .all-programs b { color: #6d6d80; }
body[data-xp="silver"] .xp-foot { background: linear-gradient(180deg, #d8d8e4, #9a9aae); color: #16161c; }
body[data-xp="silver"] .xp-foot-btn { color: #16161c; }
body[data-xp="silver"] .xp-foot-btn svg { fill: #fff; background: #8a8a9c; }

body[data-xp="zune"] .xp-head { background: linear-gradient(180deg, #3a3a3a 0%, #262626 45%, #101010 100%); border-bottom-color: #e8862a; }
body[data-xp="zune"] .xp-avatar { background: linear-gradient(150deg, #f5ab3c, #cf6f10); border-color: #3a3a3a; }
body[data-xp="zune"] .xp-cols { background: #f4f4f4; }
body[data-xp="zune"] .xp-right { background: #e2e2e2; }
body[data-xp="zune"] .xp-left { border-right-color: #d8d8d8; }
body[data-xp="zune"] .sm-xp .sm-item:hover { background: #e8862a; color: #201200; }
body[data-xp="zune"] .sm-xp .all-programs b { color: #cf6f10; }
body[data-xp="zune"] .sm-xp .all-programs:hover b { color: #201200; }
body[data-xp="zune"] .xp-foot { background: linear-gradient(180deg, #2a2a2a, #0d0d0d); }
body[data-xp="zune"] .xp-foot-btn svg { background: #cf6f10; }

/* macOS traffic lights.
   The shared SVG glyphs were landing 3.5px right of centre inside a 13px
   circle, and the maximise one is a window square, which macOS has never used.
   At this size it is less trouble to draw the three marks than to fight a
   viewBox, and they are then centred by construction. Real macOS also hides
   them until the pointer is over the window; this does not, because a touch
   screen has no pointer to hover with. */
body[data-skin="macos"] .wbtn { position: relative; }
body[data-skin="macos"] .wbtn svg { display: none; }
body[data-skin="macos"] .wbtn::before,
body[data-skin="macos"] .wbtn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  /* Always on, never hover gated: a finger has no hover to reveal them with,
     which is why the SVG version stayed visible too. */
  background: rgba(0,0,0,.62);
}
body[data-skin="macos"] .win:not(.active) .wbtn::before,
body[data-skin="macos"] .win:not(.active) .wbtn::after { background: rgba(0,0,0,.28); }

body[data-skin="macos"] .wbtn.close::before,
body[data-skin="macos"] .wbtn.close::after {
  width: 7px; height: 1.1px; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
body[data-skin="macos"] .wbtn.close::after { transform: translate(-50%, -50%) rotate(-45deg); }

body[data-skin="macos"] .wbtn.min::before {
  width: 7px; height: 1.1px; border-radius: 1px; transform: translate(-50%, -50%);
}
body[data-skin="macos"] .wbtn.min::after { content: none; }

/* zoom: two filled corners pointing away from each other */
/* The zoom mark. Two CSS border triangles were invisible at 13px, so this is a
   plus: same construction as the close cross without the rotation, which means
   it is centred by the same maths and cannot vanish. */
body[data-skin="macos"] .wbtn.maxb::before,
body[data-skin="macos"] .wbtn.maxb::after {
  width: 7px; height: 1.1px; border-radius: 1px;
  transform: translate(-50%, -50%);
}
body[data-skin="macos"] .wbtn.maxb::after { transform: translate(-50%, -50%) rotate(90deg); }