/* XP Classic: Luna blue, Bliss, the old glossy icons, and a green start button. */
html[data-look="xp"] {
  color-scheme: light;
  --bg: #3A6EA5;
  --surface: #ECE9D8;
  --surface-solid: #ECE9D8;
  --surface-raised: #FFFFFF;
  --surface-2: rgb(0 0 0 / 0.03);
  --surface-3: rgb(49 106 197 / 0.12);
  --surface-4: rgb(49 106 197 / 0.2);
  --line: #D4D0C8;
  --line-2: #ACA899;
  --scrim: rgb(0 0 0 / 0.25);
  --text: #000000;
  --text-2: #3B3B3B;
  --text-3: #6F6F6F;
  --text-on-wallpaper: #FFFFFF;
  --text-shadow-wallpaper: 1px 1px 1px #000, 0 0 2px #000;
  --accent: #316AC5;
  --on-accent: #FFFFFF;
  --info: #0033CC;
  --selection: #316AC5;
  --selection-line: #316AC5;
  --focus-ring: #316AC5;
  --focus: 0 0 0 1px #FFFFFF, 0 0 0 2px #316AC5;
  --font-ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --r-win: 8px;
  --r-ctl: 3px;
  --blur: 0px;
  --shadow-win: 2px 4px 14px rgb(0 0 0 / 0.45);
  --shadow-win-idle: 2px 3px 10px rgb(0 0 0 / 0.35);
  --shadow-pop: 2px 4px 10px rgb(0 0 0 / 0.45);
  --highlight: none;
  --titlebar-h: 30px;
  --taskbar-h: 40px;
  --tile-bg: transparent;
  --tile-line: transparent;
  --tile-glyph: #FFFFFF;
}

html[data-look="xp"] body { font-size: 12px; }
html[data-look="xp"] .wallpaper::after { display: none; }

/* Windows */
html[data-look="xp"] .win { border: 0; border-radius: 8px 8px 0 0; box-shadow: var(--shadow-win-idle); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look="xp"] .win.is-focused { box-shadow: var(--shadow-win); }
html[data-look="xp"] .win-bar {
  padding: 0 4px 0 8px; border: 0;
  background: linear-gradient(180deg, #0997FF 0%, #0053EE 8%, #0050EE 40%, #06F 88%, #06F 93%, #005BFF 95%, #003DD7 96%, #003DD7 100%);
}
html[data-look="xp"] .win:not(.is-focused) .win-bar { background: linear-gradient(180deg, #7A96DF 0%, #9DB9EB 12%, #7A96DF 100%); }
html[data-look="xp"] .win-title,
html[data-look="xp"] .win.is-focused .win-title { color: #FFF; font-weight: 700; font-size: 13px; text-shadow: 1px 1px 0 #0F1089; }
html[data-look="xp"] .win-bar .glyph, html[data-look="xp"] .win.is-focused .win-bar .glyph { color: #FFF; }
html[data-look="xp"] .win-ctl { gap: 2px; }
html[data-look="xp"] .win-ctl button {
  width: 21px; height: 21px; border-radius: 3px; color: #FFF;
  border: 1px solid #FFF; background: linear-gradient(180deg, #3C8CF3, #1D5FE1);
}
html[data-look="xp"] .win-ctl button:hover { background: linear-gradient(180deg, #5CA3FF, #2E6FF5); color: #FFF; }
html[data-look="xp"] .win-ctl button.close { background: linear-gradient(180deg, #E0715A, #C7391B); }
html[data-look="xp"] .win-ctl button.close:hover { background: linear-gradient(180deg, #F38C77, #D8482A); }
html[data-look="xp"] .win-ctl .glyph { width: 12px; height: 12px; stroke-width: 3; }
html[data-look="xp"] .win-body { border: 3px solid #0053EE; border-top: 0; background: var(--surface); }
html[data-look="xp"] .win:not(.is-focused) .win-body { border-color: #7A96DF; }

/* Desktop icons: the original PNGs */
html[data-look="xp"] .tile { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: 0; background: transparent; }
html[data-look="xp"] .tile:has(img.xp-icon) .glyph { display: none; }
html[data-look="xp"] .tile img.xp-icon { display: block; }
html[data-look="xp"] .tile:not(:has(img.xp-icon)) { background: linear-gradient(180deg, #F8F8F8, #D8E4F8); border: 1px solid #7F9DB9; border-radius: 6px; color: #1D4FC1; }
html[data-look="xp"] .dicon[aria-selected="true"] { background: transparent; border-color: transparent; }
html[data-look="xp"] .dicon[aria-selected="true"] .label { background: #316AC5; text-shadow: none; }
html[data-look="xp"] .dicon .label { font-weight: 400; font-size: 11.5px; }
html[data-look="xp"] .dicon:hover .tile { transform: none; }

/* Taskbar and Start */
html[data-look="xp"] .taskbar {
  padding-left: 0; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  background: linear-gradient(180deg, #1F2F86 0, #3165C4 3%, #3682E5 6%, #4490E6 10%, #3883E5 12%, #2B71E0 15%, #2663DA 18%, #235BD6 20%, #2258D5 23%, #2157D6 38%, #245DDB 54%, #2562DF 86%, #245FDC 89%, #2158D4 92%, #1D4EC0 95%, #1941A5 98%);
}
html[data-look="xp"] .tb-launch {
  height: 100%; padding: 0 22px 0 10px; border-radius: 0 12px 12px 0; border: 0;
  background: radial-gradient(circle at 20% 10%, #6AB35B, #3C9A3C 40%, #2E7F2E);
  box-shadow: inset -2px 0 4px rgb(0 0 0 / 0.3);
}
html[data-look="xp"] .tb-launch:hover { filter: brightness(1.1); background: radial-gradient(circle at 20% 10%, #6AB35B, #3C9A3C 40%, #2E7F2E); }
html[data-look="xp"] .tb-launch .os-name { color: #FFF; font: italic 700 17px/1 "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 1px rgb(0 0 0 / 0.5); }
html[data-look="xp"] .tb-launch .mark { filter: drop-shadow(1px 1px 0 rgb(0 0 0 / 0.35)); }
html[data-look="xp"] .tb-sep { display: none; }
html[data-look="xp"] .tb-task { color: #FFF; height: 30px; border-radius: 3px; background: #3C81F3; border: 1px solid #1941A5; }
html[data-look="xp"] .tb-task.is-active { background: #1E52B7; color: #FFF; box-shadow: inset 0 0 4px rgb(0 0 0 / 0.4); }
html[data-look="xp"] .tb-task::after { display: none; }
html[data-look="xp"] .tb-tray { height: 100%; padding: 0 6px; background: linear-gradient(180deg, #0C59B9, #139EE9 5%, #18B5F2 10%, #139BEB 15%, #1290E8 50%, #0D8DEA 90%, #0F58B4); border-left: 1px solid #092E51; }
html[data-look="xp"] .tb-tray button { color: #FFF; height: 30px; }
html[data-look="xp"] .tb-clock .t, html[data-look="xp"] .tb-clock .d { color: #FFF; }

/* Popups */
html[data-look="xp"] .launcher,
html[data-look="xp"] .menu,
html[data-look="xp"] .palette,
html[data-look="xp"] .toast { backdrop-filter: none; -webkit-backdrop-filter: none; background: #FFFFFF; border: 1px solid #0053EE; }
html[data-look="xp"] .launcher { border-radius: 8px 8px 0 0; }
html[data-look="xp"] .launcher-head { background: linear-gradient(180deg, #1868CE, #0E60CB 12%, #0E60CB 80%, #0A4FB0); }
html[data-look="xp"] .launcher-foot { background: linear-gradient(180deg, #4282D6, #3B77CF 50%, #2F60BF); color: #FFF; }
html[data-look="xp"] .launcher-foot .launcher-who span { color: #DCE8FF; }
html[data-look="xp"] .launcher-foot .os-btn { color: #FFF; }
html[data-look="xp"] .os-btn { background: linear-gradient(180deg, #FFF, #ECEBE6 86%, #D6D0C5); border-color: #003C74; border-radius: 3px; color: #000; }
html[data-look="xp"] .os-btn.primary { background: linear-gradient(180deg, #FFF, #ECEBE6 86%, #D6D0C5); color: #000; font-weight: 700; }
/* XP keeps its own icons: no rendered art; glyph back where there is no XP icon. */
html[data-look="xp"] .tile img.art-icon { display: none; }
html[data-look="xp"] .tile.has-art:not(:has(img.xp-icon)) .glyph { display: block; }
html[data-look="xp"] .dhead { font: 700 12px/1.2 Tahoma, "Segoe UI", sans-serif; font-style: normal; opacity: 1; text-shadow: 1px 1px 1px #000; }