/* CloseEase looks. Classic 98 is style.css. body[data-theme="xp"] is the only look now (the 98 base in style.css sits underneath).
   Both are original takes on their eras: no Microsoft artwork, fonts or wallpapers. */

/* =========================== CloseEase XP =========================== */
body[data-theme=xp]{--face:#ece9d8;--title1:#0a52e0;--title2:#3a8cff;--titleOff1:#7d97d8;--titleOff2:#a9bdf0;--font:Tahoma,Verdana,"Segoe UI",sans-serif}
[data-theme=xp] #desktop{background:
  radial-gradient(ellipse 120% 55% at 28% 112%,#6cc03f 0 54%,#4a9a2a 62%,transparent 63%),
  radial-gradient(ellipse 90% 40% at 85% 118%,#5bb236 0 55%,transparent 56%),
  radial-gradient(ellipse 30% 9% at 22% 22%,#ffffffd0,transparent 70%),radial-gradient(ellipse 22% 7% at 70% 14%,#ffffffb8,transparent 70%),radial-gradient(ellipse 26% 8% at 52% 36%,#ffffff90,transparent 70%),
  linear-gradient(#1f6fd8,#5aa8f0 45%,#bfe2ff 80%)}
[data-theme=xp] .icon .lbl{text-shadow:1px 1px 2px #000,0 0 3px #000}
[data-theme=xp] .icon.sel .lbl{background:#316ac5;outline:none}
[data-theme=xp] .win{padding:0 3px 3px;border-radius:8px 8px 0 0;background:var(--face);box-shadow:inset 0 0 0 1px #0831d9,0 0 0 1px #00138c,4px 4px 12px #0005;border:0}
[data-theme=xp] .win:not(.active){box-shadow:inset 0 0 0 1px #7a96df,0 0 0 1px #7a96df,3px 3px 8px #0003}
[data-theme=xp] .titlebar{height:29px;margin:0 -3px;padding:0 5px 0 7px;border-radius:7px 7px 0 0;font:bold 13px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px #0a1f6a;
  background:linear-gradient(#9db9eb,#7a96df 10%,#7c98df 80%,#6f88cf)}
[data-theme=xp] .win.active .titlebar{background:linear-gradient(#3d95ff,#0a5ef0 8%,#0058ee 40%,#0a5ef0 88%,#0040c0)}
[data-theme=xp] .titlebar .ti svg{width:16px;height:16px}
[data-theme=xp] .titlebar .tb{width:21px;height:21px;border-radius:3px;border:1px solid #fff;box-shadow:none;background:linear-gradient(135deg,#7fb0ff,#2a6bf0 60%,#1a50d0)}
[data-theme=xp] .titlebar .tb i{filter:invert(1);transform:scale(1.15)}
[data-theme=xp] .titlebar .tb.x{background:linear-gradient(135deg,#f3a07c,#e0532a 60%,#c0381a)}
[data-theme=xp] .titlebar .tb:active{padding:0;filter:brightness(.85)}
[data-theme=xp] .menubar{background:var(--face);border-bottom:1px solid #fff}
[data-theme=xp] .menubar span:hover{background:#316ac5}
[data-theme=xp] .wbody.pad{background:#fff;box-shadow:inset 0 0 0 1px #7f9db9}
[data-theme=xp] .sunken{box-shadow:inset 0 0 0 1px #7f9db9}
[data-theme=xp] .raised{box-shadow:inset 0 0 0 1px #b9b5a5}
[data-theme=xp] .btn{border-radius:3px;border:1px solid #003c74;background:linear-gradient(#fff,#ece9d8 85%,#d6d0bc);box-shadow:inset 0 -1px #d6d0bc}
[data-theme=xp] .btn:hover{box-shadow:inset 0 0 0 2px #f8b636}
[data-theme=xp] .btn:active,[data-theme=xp] .btn.on{background:linear-gradient(#e3e0d0,#f4f3ee);padding:4px 12px;box-shadow:none}
[data-theme=xp] input[type=text],[data-theme=xp] input[type=email],[data-theme=xp] input[type=password],[data-theme=xp] textarea,[data-theme=xp] select{box-shadow:none;border:1px solid #7f9db9}
[data-theme=xp] .statusbar div{box-shadow:inset 1px 0 #fff,inset -1px 0 #b9b5a5}
[data-theme=xp] #taskbar{height:30px;padding:0 0 0 0;background:linear-gradient(#3f8cf3,#245edb 9%,#245edb 85%,#1941a5);box-shadow:inset 0 1px #6aa2ff}
[data-theme=xp] #startBtn{height:30px;padding:0 22px 0 8px;border-radius:0 12px 12px 0;border:0;background:linear-gradient(#4cb04c,#3c9a3c 12%,#35a035 50%,#2f8a2f 88%,#2a7a2a);box-shadow:inset -2px 0 4px #0003,inset 0 1px #8fd88f;gap:6px}
[data-theme=xp] #startBtn .sl{font:italic bold 19px "Trebuchet MS",Tahoma,sans-serif;color:#fff;text-shadow:1px 1px 2px #0006;text-transform:lowercase}
[data-theme=xp] #startBtn .sflag{width:20px;height:20px;filter:drop-shadow(1px 1px 1px #0006)}
[data-theme=xp] #startBtn:hover{filter:brightness(1.08)}
[data-theme=xp] #startBtn.on,[data-theme=xp] #startBtn:active{filter:brightness(.88);padding:0 22px 0 8px}
[data-theme=xp] #quick{border:0;box-shadow:none;height:30px}
[data-theme=xp] #quick .ql:hover{box-shadow:none;background:#ffffff22;border-radius:2px}
[data-theme=xp] #tasks{border:0;box-shadow:none;padding:2px 0 0 4px}
[data-theme=xp] .task{height:25px;border-radius:3px;border:0;color:#fff;background:linear-gradient(#5aa0ff,#3c81f3);box-shadow:inset 0 0 0 1px #1c4fc0,inset 1px 1px #8fbfff}
[data-theme=xp] .task.on{background:linear-gradient(#1e52b7,#2a62d0);box-shadow:inset 0 0 0 1px #10308a,inset 1px 1px 2px #0005;font-weight:normal}
[data-theme=xp] #tray{height:30px;color:#fff;padding:0 10px;background:linear-gradient(#18a8f0,#0b8ae0 10%,#0f8bf0 85%,#0a6cc8);box-shadow:inset 1px 0 #0a4aa8,inset 2px 0 #4bc0ff}
[data-theme=xp] .trayb{color:#fff;filter:drop-shadow(0 0 1px #0008)}
[data-theme=xp] #startMenu{bottom:30px;left:0;width:300px;padding:0;border-radius:8px 8px 0 0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #0831d9,4px 4px 12px #0006;flex-direction:column}
[data-theme=xp] #startMenu.open{display:flex}
[data-theme=xp] #startMenu .side{display:flex;writing-mode:horizontal-tb;transform:none;width:auto;height:54px;align-items:center;gap:0;padding:0 12px;font:bold 15px "Trebuchet MS",Tahoma,sans-serif;color:#fff;background:linear-gradient(#1868e8,#3a8cff 15%,#1660e0 80%,#0c48c0);text-shadow:1px 1px #0005}
[data-theme=xp] #startMenu .side::before{content:"";width:38px;height:38px;border:2px solid #fff;border-radius:4px;margin-right:10px;background:#fff url(assets/logo.svg) center/30px no-repeat;box-shadow:1px 1px 3px #0006}
[data-theme=xp] #startMenu .side b{color:#fff}
[data-theme=xp] #startMenu ul{padding:6px;border-top:2px solid #f39a2a;max-height:calc(100vh - 110px);overflow:auto}
[data-theme=xp] #startMenu li{border-radius:2px;height:30px}
[data-theme=xp] #startMenu li:hover,[data-theme=xp] #startMenu li:focus{background:#316ac5}
[data-theme=xp] #startMenu hr{border-top-color:#d6d0bc;border-bottom:0}
[data-theme=xp] .ctx{background:#fff;box-shadow:0 0 0 1px #aca899,2px 2px 4px #0004}
[data-theme=xp] .ctx li:hover{background:#316ac5}
[data-theme=xp] .toast{border-color:#000;border-radius:8px;background:#ffffe1;box-shadow:2px 2px 6px #0004}
[data-theme=xp] .im-head{background:linear-gradient(#fff,#d9e6fb)}

/* =====================================================================================
   CloseEase XP, full Luna pass: every surface drawn in the 2001 blue-and-green style.
   All art is original CSS/SVG; the only logo is CloseEase's own.
   ===================================================================================== */
.xpm{display:none}
[data-theme=xp]{--xp-blue:#0a46d8;--xp-hl:#316ac5}
[data-theme=xp] #desktop{background:#4c93ea url(assets/xp-hills.svg) center bottom/cover no-repeat}
[data-theme=xp] .icon svg{shape-rendering:geometricPrecision;filter:drop-shadow(2px 2px 1px #0005)}
[data-theme=xp] .icon .lbl{color:#fff;font:11px Tahoma,Verdana,sans-serif;text-shadow:1px 1px 1px #000,1px 1px 3px #000}
[data-theme=xp] .icon.sel .lbl,[data-theme=xp] .icon:focus .lbl{background:#0b61ff;text-shadow:none}
[data-theme=xp] .icon.sel svg{filter:drop-shadow(2px 2px 1px #0005) brightness(.75) sepia(1) hue-rotate(180deg) saturate(3)}
[data-theme=xp] svg{shape-rendering:geometricPrecision}

/* windows: blue frame on three sides, rounded top, glossy title bar */
[data-theme=xp] .win{padding:0;border:solid #0842d6;border-width:0 3px 3px;border-radius:8px 8px 0 0;background:var(--face);
  box-shadow:0 0 0 1px #001b8a,inset 0 0 0 1px #3d7bf0,4px 6px 16px #0006}
[data-theme=xp] .win:not(.active){border-color:#7b9be6;box-shadow:0 0 0 1px #5a78c8,3px 4px 10px #0003}
[data-theme=xp] .titlebar{height:30px;margin:0 -3px;padding:0 5px 0 8px;gap:5px;border-radius:7px 7px 0 0;color:#fff;
  font:bold 13px "Trebuchet MS",Tahoma,sans-serif;letter-spacing:.2px;text-shadow:1px 1px #0f1089;
  background:linear-gradient(#7d9ae8,#90abf0 10%,#86a3ee 45%,#7d9ae8 90%,#6f8de0)}
[data-theme=xp] .win.active .titlebar{background:linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
  box-shadow:inset 1px 1px #3d95ff,inset -1px 0 #0034c2}
[data-theme=xp] .win:not(.active) .titlebar .tt{color:#e3ebfb;text-shadow:none}
[data-theme=xp] .titlebar .tb{width:21px;height:21px;margin:0 0 0 2px;padding:0;border:1px solid #fff;border-radius:3px;
  background:#2563ee center/21px 21px no-repeat;box-shadow:inset -1px -1px 2px #0b2fa8,inset 1px 1px 2px #8fbaff}
[data-theme=xp] .titlebar .tb i{display:none}
[data-theme=xp] .titlebar .tb.mn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='5' y='13' width='7' height='3' fill='white'/%3E%3C/svg%3E")}
[data-theme=xp] .titlebar .tb.mx{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='5.5' y='5.5' width='10' height='10' fill='none' stroke='white'/%3E%3Crect x='5' y='5' width='11' height='3' fill='white'/%3E%3C/svg%3E")}
[data-theme=xp] .win.max .titlebar .tb.mx{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M8 5h8v8' fill='none' stroke='white'/%3E%3Crect x='8' y='4.5' width='8' height='2' fill='white'/%3E%3Crect x='4.5' y='8.5' width='8' height='8' fill='none' stroke='white'/%3E%3Crect x='4.5' y='8' width='8' height='2.5' fill='white'/%3E%3C/svg%3E")}
[data-theme=xp] .titlebar .tb.x{background-color:#e0532a;box-shadow:inset -1px -1px 2px #a01e00,inset 1px 1px 2px #ffb59a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 6l9 9M15 6l-9 9' stroke='white' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-theme=xp] .titlebar .tb:hover{filter:brightness(1.18)}
[data-theme=xp] .titlebar .tb:active{filter:brightness(.82);padding:0}
[data-theme=xp] .win:not(.active) .titlebar .tb{opacity:.75}
[data-theme=xp] .wbody{margin-top:0}
[data-theme=xp] .wbody.pad{background:#fff;box-shadow:none;border-top:1px solid #d6d0bc}
[data-theme=xp] .wbody a{color:#0b4fd8}

/* menus, toolbars, status bars, group boxes */
[data-theme=xp] .menubar{background:var(--face);border-bottom:1px solid #d6d0bc;box-shadow:inset 0 -1px #fff}
[data-theme=xp] .menubar span:hover,[data-theme=xp] .menubar span:focus{background:var(--xp-hl);color:#fff}
[data-theme=xp] .statusbar{background:var(--face);border-top:1px solid #d6d0bc}
[data-theme=xp] fieldset{border:1px solid #d0d0bf;border-radius:4px}
[data-theme=xp] legend{color:#0046d5}
[data-theme=xp] input[type=checkbox],[data-theme=xp] input[type=radio],[data-theme=xp] input[type=range]{accent-color:#21a121}
[data-theme=xp] .progress{padding:2px;background:#fff;border:1px solid #686868;border-radius:3px;box-shadow:none}
[data-theme=xp] .progress i{border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 1px,#2fd02f 1px 8px,transparent 8px 10px),linear-gradient(#acedad,#7be47d 14%,#4cda50 28%,#2ed330 42%,#42d845 57%,#76e275 71%,#8fe791 85%,#fff);background-blend-mode:normal;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px);mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px)}

/* push buttons: the cream XP button with the orange hover glow and blue focus ring */
[data-theme=xp] .btn{border:1px solid #003c74;border-radius:3px;color:#000;background:linear-gradient(180deg,#fff,#ecebe6 86%,#d6d0c5);box-shadow:none;font-family:Tahoma,Verdana,sans-serif}
[data-theme=xp] .btn:hover{box-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a}
[data-theme=xp] .btn:focus-visible{outline:1px dotted #000;outline-offset:-4px;box-shadow:inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 1px -1px #89ade4,inset 2px -2px #89ade4}
[data-theme=xp] .btn:active,[data-theme=xp] .btn.on{background:linear-gradient(180deg,#cdcac3,#e3e3db 8%,#e5e5de 94%,#f2f2f1);box-shadow:none}
[data-theme=xp] .btn:disabled{color:#aca899;border-color:#c9c7ba;background:#f5f4ea}

/* taskbar */
[data-theme=xp] #taskbar{height:30px;background:linear-gradient(#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%);box-shadow:none;border:0}
[data-theme=xp] #startBtn{height:30px;padding:0 24px 0 9px;gap:5px;border:0;border-radius:0 11px 11px 0;
  background:linear-gradient(#3c9e3c,#47b247 8%,#3fae3f 20%,#36a336 40%,#2f9a2f 70%,#2a8c2a 88%,#22762a);box-shadow:inset 0 1px 2px #8de08d,inset -2px 0 3px #0004,2px 0 3px #0003}
[data-theme=xp] #startBtn .sflag{width:20px;height:20px;border-radius:3px;box-shadow:0 0 0 1px #fff8,1px 1px 2px #0006}
[data-theme=xp] #startBtn .sl{font:italic bold 19px "Trebuchet MS",Tahoma,sans-serif;color:#fff;text-transform:lowercase;text-shadow:1px 1px 2px #0008;letter-spacing:.3px}
[data-theme=xp] #startBtn.on,[data-theme=xp] #startBtn:active{background:linear-gradient(#22762a,#2a8c2a 15%,#2f9a2f 60%,#36a336);padding:0 24px 0 9px}
[data-theme=xp] #quick{padding:0 6px;gap:2px;border-right:1px solid #1941a5;box-shadow:1px 0 #3d80e8}
[data-theme=xp] .task{height:24px;margin-top:1px;border:0;border-radius:3px;color:#fff;font:11px Tahoma,Verdana,sans-serif;
  background:linear-gradient(#3c81f3,#3c81f3 85%,#2f6ad8);box-shadow:inset -1px -1px #00000040,inset 1px 1px #ffffff55}
[data-theme=xp] .task:hover{background:linear-gradient(#53a3ff,#4590f8)}
[data-theme=xp] .task.on{font-weight:normal;background:#1e52b7;box-shadow:inset 1px 1px 2px #00000080,inset -1px -1px #ffffff20}
[data-theme=xp] .task.flash{animation:xpFlash 1.2s steps(1) 6 forwards}
@keyframes xpFlash{0%{background:#f7a21b;color:#000}50%{background:#3c81f3;color:#fff}}
[data-theme=xp] #tray{height:30px;gap:6px;padding:0 10px;color:#fff;border-left:1px solid #1042af;
  background:linear-gradient(#0c59b9 1%,#139ee9 6%,#18b5f2 10%,#139beb 14%,#1290e8 19%,#0d8dea 63%,#0d9ff1 81%,#0f9eed 88%,#119be9 91%,#1392e2 94%,#137ed7 97%,#095bc9);box-shadow:inset 1px 0 #18bbff}
[data-theme=xp] #clock{font:11px Tahoma,Verdana,sans-serif;color:#fff}
[data-theme=xp] .tray-xp{border-color:#ffffffb0;color:#fff}

/* Start menu */
[data-theme=xp] #startMenu{bottom:30px;left:0;width:380px;padding:0;border:0;border-radius:7px 7px 0 0;overflow:visible;background:transparent;box-shadow:none;flex-direction:column}
[data-theme=xp] #startMenu .side,[data-theme=xp] #startMenu #startList{display:none}
[data-theme=xp] #startMenu .xpm{display:flex;flex-direction:column;position:relative;border-radius:7px 7px 0 0;background:#fff;box-shadow:0 0 0 1px #0a246a,4px 4px 10px #0007;font:11px Tahoma,Verdana,sans-serif}
.xpm-head{display:flex;align-items:center;gap:10px;height:62px;padding:0 10px;border-radius:7px 7px 0 0;color:#fff;font:bold 15px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px 2px #0a1f6a;
  background:linear-gradient(#1868ce,#0e60cb 12%,#0e60cb 20%,#1164cf 32%,#1667cf 33%,#1b6cd3 47%,#1e70d9 54%,#2476dc 60%,#297ae0 65%,#3482e3 77%,#3786e5 79%,#428ee9 90%,#4791eb)}
.xpm-pic{width:46px;height:46px;border:2px solid #fff;border-radius:4px;overflow:hidden;box-shadow:1px 1px 3px #0007;background:#021e59}
.xpm-pic img{display:block;width:100%;height:100%}
.xpm-cols{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #e8964a;box-shadow:inset 0 1px #ffc58a}
.xpm-left{padding:6px 4px;display:flex;flex-direction:column;background:#fff}
.xpm-right{padding:6px 4px;display:flex;flex-direction:column;background:#d3e5fa;border-left:1px solid #95bdee}
.xpm hr{border:0;height:1px;margin:4px 6px;background:linear-gradient(90deg,transparent,#c6c3b7,transparent)}
.xpm-i{display:flex;align-items:center;gap:7px;width:100%;padding:3px 6px;border:0;border-radius:0;background:none;text-align:left;font:inherit;color:#000;cursor:default}
.xpm-i .xpm-ic svg{width:24px;height:24px;display:block}
.xpm-i.pin .xpm-ic svg{width:32px;height:32px}
.xpm-t{display:flex;flex-direction:column;min-width:0}
.xpm-t b{font-weight:normal}.xpm-i.pin b{font-weight:bold}
.xpm-t small{color:#6d6d6d}
.xpm-right .xpm-t b{font-weight:bold;color:#00136b}
.xpm-i:hover,.xpm-i:focus-visible{background:#316ac5;color:#fff;outline:none}
.xpm-i:hover small,.xpm-i:focus-visible small,.xpm-right .xpm-i:hover b,.xpm-right .xpm-i:focus-visible b{color:#fff}
.xpm-allw{margin-top:auto;padding-top:4px;border-top:1px solid #e0dfe3}
.xpm-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:5px;border:0;background:none;font:bold 11px Tahoma,sans-serif;color:#000;cursor:default}
.xpm-all i{width:18px;height:18px;border-radius:3px;background:#2fae32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 4l6 5-6 5z' fill='white'/%3E%3C/svg%3E") center no-repeat;box-shadow:inset 0 0 0 1px #1b7a1d}
.xpm-all:hover,.xpm-all:focus-visible,.xpm-all[aria-expanded=true]{background:#316ac5;color:#fff;outline:none}
.xpm-foot{display:flex;justify-content:flex-end;gap:4px;padding:6px 8px;background:linear-gradient(#4282d6,#3c81f3 30%,#2d6fe0 70%,#1d5ac8)}
.xpm-off{display:flex;align-items:center;gap:5px;padding:3px 6px;border:0;border-radius:3px;background:none;color:#fff;font:11px Tahoma,sans-serif;cursor:default}
.xpm-off:hover,.xpm-off:focus-visible{background:#ffffff26;outline:none}
.xpm-off i{width:22px;height:22px;border-radius:3px;border:1px solid #fff;box-shadow:1px 1px 2px #0005}
.xpm-off i.k{background:#e8a33a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='8' cy='11' r='3.5' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M11.5 11H18v3M15.5 11v2.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center no-repeat}
.xpm-off i.p{background:#d9411e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.6 7.4a5.6 5.6 0 1 0 6.8 0' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 4.5v6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat}
.xpm-allp{position:absolute;left:calc(50% - 6px);bottom:40px;width:230px;max-height:70vh;overflow:auto;padding:2px;background:#fff;border:1px solid #6b85b8;box-shadow:3px 3px 6px #0005;z-index:2}
.xpm-allp .xpm-i .xpm-ic svg{width:16px;height:16px}

/* context menus */
[data-theme=xp] .ctx{background:#fff;border:0;box-shadow:0 0 0 1px #aca899,2px 2px 4px #0004;font:11px Tahoma,sans-serif}
[data-theme=xp] .ctx li:hover,[data-theme=xp] .ctx li:focus{background:var(--xp-hl);color:#fff}

/* notification balloon pointing at the tray */
[data-theme=xp] .toast:not(.msn){border:1px solid #000;border-radius:8px;background:#ffffe1;box-shadow:2px 2px 5px #0004;font:11px Tahoma,sans-serif}
[data-theme=xp] .toast:not(.msn)::after{content:"";position:absolute;right:40px;bottom:-16px;border:8px solid transparent;border-top:8px solid #ffffe1;border-right-width:16px;filter:drop-shadow(0 1px 0 #000)}
[data-theme=xp] .toast:not(.msn) .tbody b{font-size:11px}

/* scrollbars */
[data-theme=xp] ::-webkit-scrollbar{width:17px;height:17px;background:#fafaf6}
[data-theme=xp] ::-webkit-scrollbar-track{background:linear-gradient(90deg,#f3f1ec,#fefefb)}
[data-theme=xp] ::-webkit-scrollbar-thumb{border:1px solid #fff;border-radius:3px;background:#c8d6fb linear-gradient(90deg,#c9d7fc,#b7cafb 50%,#a9c0f8);box-shadow:inset 0 0 0 1px #9cb4f2}
[data-theme=xp] ::-webkit-scrollbar-button:single-button{display:block;height:17px;width:17px;border:1px solid #fff;border-radius:3px;background:#c8d6fb linear-gradient(#d6e2fd,#b4c8f8);box-shadow:inset 0 0 0 1px #9cb4f2}


/* readability: icons inside folder windows use dark labels (only desktop icons sit on the wallpaper),
   and light text on the bright blue taskbar gets a dark halo so it stays legible */
[data-theme=xp] .win .icon .lbl{color:#000;text-shadow:none;font:11px Tahoma,Verdana,sans-serif}
[data-theme=xp] .win .icon.sel .lbl,[data-theme=xp] .win .icon:focus .lbl{background:#316ac5;color:#fff}
[data-theme=xp] .win .icon svg{filter:none}
[data-theme=xp] #tray,[data-theme=xp] #tray .trayb,[data-theme=xp] #clock,[data-theme=xp] .task{text-shadow:0 0 2px #0a2a8a,1px 1px 1px #0a2a8a}
[data-theme=xp] .win:not(.active) .titlebar{background:linear-gradient(#6d8bdd,#7d99e6 10%,#7593e2 45%,#6d8bdd 90%,#6283d8)}
[data-theme=xp] .win:not(.active) .titlebar .tt{color:#fff;text-shadow:1px 1px #3c58a8}
[data-theme=modern] .statusbar div,[data-theme=modern] .statusbar{color:#19172CC0}
/* the pinball scoreboard keeps its dark arcade panel in every look */
[data-theme] .pb-panel .sunken{background:#05060c;border-radius:4px;box-shadow:inset 0 0 0 1px #3a4060}

/* note.txt and other text files open in an XP Notepad window: white page, Lucida Console, no decoration */
.np-paper{height:100%;overflow:auto;box-sizing:border-box;padding:6px 8px;background:#fff;color:#000;font:13px/1.45 "Lucida Console","Courier New",monospace;border:1px solid #7f9db9;outline:none}
.np-paper p{margin:0 0 1.1em;max-width:62ch}
.np-paper h1{margin:0 0 1.1em;font:bold 15px/1.4 "Lucida Console","Courier New",monospace;max-width:52ch}
.np-paper .np-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:4px}
.np-paper .st-login{color:#0645ad}
.rb-cp .rb-code b{display:inline-block;padding:4px 10px;border:1px dashed #000;letter-spacing:2px;font-size:16px}

/* note.txt hero (October 20): who it's for, the one button, three signposts, and the way out to the regular website */
.np-paper{padding:10px 12px}
.np-paper .np-eye{color:#444}
.np-paper h1{font-size:17px;line-height:1.35}
.np-paper .np-steps{font-weight:bold}
.np-paper .np-acts .st-cta{font:bold 12px Tahoma,Verdana,sans-serif;padding:5px 14px;min-height:30px;border-color:#003c74;box-shadow:inset 0 0 0 1px #8fb2f0,inset -1px -1px 0 1px #5a86d6}
.np-paper .np-start a{white-space:nowrap}
.np-paper .np-who{color:#333}
.np-paper .np-start a,.np-paper .np-plain a{color:#0645ad;text-decoration:underline;cursor:pointer}
.np-paper .np-start a:hover,.np-paper .np-plain a:hover{color:#c00}
.np-paper .np-plain{margin-top:-2px;font-size:12px}
.mail-status a{color:#0645ad}

/* CloseEase CRM: an XP-style setup wizard (original drawing: navy banner, gold rings) */
.wizard{display:flex;flex-direction:column;height:100%;background:#fff;color:#000;font:12px/1.5 Tahoma,Verdana,sans-serif}
.wz-page{flex:1;min-height:0;overflow:auto}
.wz-welcome{display:flex;min-height:100%}
.wz-side{flex:none;width:164px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:20px 16px;color:#fff;background:linear-gradient(165deg,#021E59 0%,#0a3591 55%,#2a64d6 100%)}
.wz-side img{width:70px;height:auto;position:relative}
.wz-side b{position:relative;font:bold 21px/1.1 "Trebuchet MS",Tahoma,sans-serif;letter-spacing:-.3px}
.wz-side i{position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;border:16px solid #E2B74055;box-shadow:0 0 0 22px #E2B74022,0 0 0 46px #ffffff10}
.wz-main{flex:1;padding:18px 20px 10px}
.wz-main h2{margin:0 0 14px;font:bold 17px/1.3 Verdana,Tahoma,sans-serif;color:#000}
.wz-main p,.wz-body p{margin:0 0 10px}
.wz-client{color:#333}
.wz-client a,.wz-demo{color:#0645ad;text-decoration:underline;cursor:pointer}
.wz-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 10px 18px;background:#fff;border-bottom:1px solid #aca899}
.wz-head b{display:block;font-weight:bold}
.wz-head small{display:block;padding-left:14px;color:#333;font-size:12px}
.wz-hic svg{width:42px;height:42px;display:block}
.wz-body{padding:12px 22px 6px;background:#ece9d8;min-height:calc(100% - 66px);box-sizing:border-box}
.wz-comp{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.wz-list{list-style:none;margin:0;padding:2px;background:#fff;border:1px solid #7f9db9;min-height:112px}
.wz-list li{display:flex;align-items:center;gap:7px;padding:4px 5px;cursor:default;outline:none}
.wz-list li[aria-selected=true]{background:#316ac5;color:#fff}
.wz-list li:focus-visible{outline:1px dotted #000;outline-offset:-2px}
.wz-chk{flex:none;display:inline-grid;place-items:center;width:13px;height:13px;border:1px solid #1c5180;background:#fff;color:#21a121;font:bold 10px/1 Tahoma,sans-serif}
.wz-desc{margin:0;padding:6px 10px 10px;border:1px solid #d0d0bf;border-radius:3px;min-height:96px}
.wz-desc legend{color:#0046d5;padding:0 3px}
.wz-desc p{margin:0 0 8px}
.wz-space{margin-top:12px!important;color:#333}
.wz-go{margin:14px 0!important}
.wz-go .wz-ask{font:bold 12px Tahoma,Verdana,sans-serif;padding:6px 18px;min-height:32px}
.wz-foot{display:flex;justify-content:flex-end;gap:6px;padding:10px 12px;border-top:1px solid #aca899;background:#ece9d8;box-shadow:inset 0 1px #fff}
.wz-foot .btn{min-width:78px;min-height:24px}
.wz-foot .wz-cancel{margin-left:8px}

/* start-up: the welcome screen with a loading bar (original take on the XP welcome: navy bands, a gold rule, a big italic welcome) */
#boot{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#4f74d6;transition:opacity .4s ease;cursor:default;user-select:none}
#boot[hidden]{display:none}
#boot.out{opacity:0}
#boot .wl-top,#boot .wl-bot{flex:0 0 13vh;background:#00287f;position:relative}
#boot .wl-top::after,#boot .wl-bot::before{content:"";position:absolute;left:0;right:0;height:2px}
#boot .wl-top::after{bottom:0;background:linear-gradient(90deg,transparent,#c9d8ff 30%,#ffffff 50%,transparent 90%)}
#boot .wl-bot::before{top:0;background:linear-gradient(90deg,transparent 5%,#E2B740 35%,#f5d77a 50%,transparent 85%)}
#boot .wl-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);background:radial-gradient(ellipse at 18% 22%,#86a5ee 0,#5b80dd 38%,#3f63c9 100%)}
#boot .wl-brand{display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:#fff}
#boot .wl-brand img{width:84px;height:auto;margin-bottom:6px;filter:drop-shadow(0 2px 3px #0b2a7a80)}
#boot .wl-brand b{font:bold 36px/1 "Trebuchet MS",Tahoma,sans-serif;letter-spacing:-.5px;text-shadow:1px 2px 3px #0b2a7a80}

#boot .wl-brand small{margin-top:6px;font:italic 15px "Trebuchet MS",Tahoma,sans-serif;opacity:.9}
#boot .wl-div{width:2px;height:38%;background:linear-gradient(transparent,#ffffffd0,transparent)}
#boot .wl-word{margin:0;font:italic bold clamp(44px,6vw,72px)/1 "Trebuchet MS",Tahoma,sans-serif;color:#fff;letter-spacing:-1px;text-shadow:2px 3px 5px #0b2a7a90}
#boot .wl-right{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#boot .wl-load{width:clamp(180px,22vw,260px);height:16px;padding:2px;border:1px solid #ffffffb8;border-radius:4px;background:#0b2a7a66;box-shadow:inset 0 1px 2px #00143f80;overflow:hidden}
#boot .wl-load i{display:block;height:100%;width:0;border-radius:2px;background:repeating-linear-gradient(90deg,#f5d77a 0,#E2B740 9px,transparent 9px 12px);transition:width .14s linear}
#boot .wl-status{font:italic 14px "Trebuchet MS",Tahoma,sans-serif;color:#fff;opacity:.9}
#boot .wl-bot{display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(16px,4vw,48px)}
#boot .wl-hint{font:12px Tahoma,sans-serif;color:#c9d8ff;opacity:.8}
@media (prefers-reduced-motion:reduce){#boot,#boot .wl-load i{transition:none}}

/* the welcome video's end screen replaces the explainer's last line */
.vph.ended .vph-line,.vph.ended .vph-bar{visibility:hidden}

/* the mail window gets a second, obvious Send next to the reply promise */
.mail-foot{display:flex;align-items:center;gap:10px;padding:2px 4px 4px}
.mail-foot .mail-status{flex:1;padding:2px 2px}
.mail-foot .send2{font:bold 12px Tahoma,Verdana,sans-serif;padding:5px 16px;min-height:30px;border-color:#003c74;box-shadow:inset 0 0 0 1px #8fb2f0,inset -1px -1px 0 1px #5a86d6}
.mail-sent{height:100%;box-sizing:border-box;overflow:auto;padding:18px 20px;background:#fff;color:#000;font:12px/1.55 Tahoma,Verdana,sans-serif;outline:none}
.mail-sent .ms-head{display:flex;gap:12px;align-items:center;padding:12px 14px;background:linear-gradient(#f3f8ff,#e1ecfb);border:1px solid #9db9eb;border-radius:4px}
.mail-sent .ms-tick{flex:none;width:30px;height:30px;border-radius:50%;background:#2f9a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M8.5 15.5l4.3 4.3 8.7-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.mail-sent .ms-head b{display:block;font-size:15px;color:#021E59}
.mail-sent .ms-head span{color:#333}
.mail-sent .ms-h{margin:18px 0 6px;font-weight:bold;color:#021E59}
.mail-sent .ms-steps{margin:0 0 18px;padding-left:20px}
.mail-sent .ms-steps li{margin:0 0 6px}
.mail-sent .ms-acts{display:flex;gap:8px;flex-wrap:wrap}
.mail-sent .ms-acts .btn{font:12px Tahoma,Verdana,sans-serif;padding:5px 14px;min-height:30px}
.mail-sent .ms-find{font-weight:bold!important;border-color:#003c74;box-shadow:inset 0 0 0 1px #8fb2f0,inset -1px -1px 0 1px #5a86d6}
/* Workflow check: the brand's navy and gold, not the green "scanning" bar people know from antivirus */
[data-theme=xp] .scan .progress i{background:repeating-linear-gradient(90deg,transparent 0 1px,#E2B740 1px 8px,transparent 8px 10px),linear-gradient(#f7e3a3,#E2B740 45%,#c99a22)}
.scan .scan-list li.ok{color:#021E59}
/* note.txt on big monitors (the window itself opens at 660px wide there, see apps.js) */
@media (min-width:1600px){
  .np-paper{font-size:15.5px;padding:14px 18px}
  .np-paper h1{font-size:23px;line-height:1.3}
  .np-paper .np-plain{font-size:13.5px}
  .np-paper .np-acts .st-cta{font-size:14px;padding:7px 18px;min-height:34px}
}
/* the video end screen: "Watch again" in the brand gold so it reads on navy */
.vend a.vreplay,.vend a.vreplay:visited{color:#E2B740!important;text-decoration:underline;text-underline-offset:3px;font-weight:bold}
.wz-go{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wz-go .wz-sign{display:inline-flex;align-items:center;font:bold 12px Tahoma,Verdana,sans-serif;padding:6px 18px;min-height:32px;text-decoration:none;color:#000;box-sizing:border-box}
.msn-c .sys .chat-go{display:inline-flex;align-items:center;margin:4px 0 2px;padding:5px 14px;min-height:28px;font:bold 12px Tahoma,Verdana,sans-serif;text-decoration:none;color:#000;box-sizing:border-box}