* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif; font-size: 11px;
  user-select: none; -webkit-user-select: none; background: #000;
}
button { font-family: inherit; }

/* ---------------- Desktop ---------------- */
#desktop { position: fixed; inset: 0 0 30px 0; background: #3a6ea5 url(assets/bliss.jpg) center / cover no-repeat; overflow: hidden; }
#icons { position: absolute; inset: 0; }
#windows { position: absolute; inset: 0; pointer-events: none; }
#windows > * { pointer-events: auto; }

.dicon { position: absolute; width: 76px; display: flex; flex-direction: column; align-items: center; padding: 2px; cursor: default; outline: none; }
.dicon.dragging { opacity: .75; z-index: 5; }
.marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px solid #316ac5; background: rgba(49, 106, 197, .28); }
.dicon-img { width: 32px; height: 32px; position: relative; }
.dicon-img img.dicon-arrow { position: absolute; left: 0; top: 0; image-rendering: pixelated; } /* shell32.dll icon 30 */
.dicon-img img { width: 32px; height: 32px; display: block; }
.dicon.pixel img { image-rendering: pixelated; }
.dicon-label {
  color: #fff; text-align: center; margin-top: 4px; padding: 0 2px 1px; line-height: 13px; max-width: 76px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.6); overflow-wrap: anywhere;
}
.dicon.selected .dicon-img img { filter: brightness(.72) sepia(.6) hue-rotate(180deg) saturate(3.2); }
.dicon.selected .dicon-label { background: #316ac5; text-shadow: none; }
.dicon.selected:focus .dicon-label { outline: 1px dotted #fcc; outline-offset: 0; }

/* ---------------- Windows ---------------- */
.xpwin { position: absolute; display: flex; flex-direction: column; min-width: 120px; }
.xpwin.minimized { display: none; }
.xpwin.topmost { z-index: 99999 !important; }
.xpwin .title-bar { flex: 0 0 auto; cursor: default; user-select: none; height: 30px; padding: 0 5px 0 7px; align-items: center; }
.xpwin .title-bar-text { padding-left: 0; }
.xpwin .title-bar-controls { gap: 1px; }
.xpwin .title-bar-text { display: flex; align-items: center; min-width: 0; flex: 1; margin-right: 8px; overflow: hidden; }
.xpwin .tb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpwin .tb-icon { width: 16px; height: 16px; margin-right: 6px; flex: 0 0 auto; }
.xpwin .window-body { margin: 0 3px; flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.xpwin.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.xpwin.maximized .title-bar { border-radius: 0; }

.xpwin.inactive .title-bar {
  background: linear-gradient(180deg, #7697e7, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3);
  border-color: #7a96df; text-shadow: none;
}
.xpwin.inactive .title-bar-text { color: #d8e4f8; }
.xpwin.inactive { box-shadow: inset -1px -1px #7a96df, inset 1px 1px #7a96df, inset -2px -2px #8ba7e6, inset 2px 2px #8ba7e6, inset -3px -3px #9fb5ea, inset 3px 3px #9fb5ea; }
.xpwin.inactive .title-bar-controls button { filter: saturate(.55) brightness(1.12); }

.title-bar-controls button.fs {
  display: grid; place-items: center; padding: 0; width: 21px; height: 21px;
  border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e3 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
}
.title-bar-controls button.fs:hover { background: radial-gradient(circle at 90% 90%, #1d6af2 0%, #3a7cf0 55%, #5a90f5 70%, #b8ccf5 90%, #fff 100%); }
.title-bar-controls button.fs:active { background: radial-gradient(circle at 10% 10%, #003fb3 0%, #0048c8 55%, #2b63d1 80%, #8fa9e0 100%); }
.title-bar-controls button.fs svg { width: 21px; height: 21px; display: block; }

.rz { position: absolute; z-index: 2; }
.rz-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.rz-s { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: s-resize; }
.rz-e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: e-resize; }
.rz-w { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: w-resize; }
.rz-ne { right: -3px; top: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.rz-nw { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.rz-se { right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: se-resize; }
.rz-sw { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: sw-resize; }
.xpwin.maximized .rz { display: none; }
body.wm-dragging iframe { pointer-events: none; }
body.wm-dragging { cursor: default; }
.xpwin.wm-moving { will-change: transform; }

/* Iframe (game / IE) windows */
.frame-win .window-body { background: #000; }
.frame-win iframe { border: 0; width: 100%; height: 100%; flex: 1; display: block; background: #000; }
.frame-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #ccc; pointer-events: none; }
.frame-loading img { width: 32px; height: 32px; image-rendering: pixelated; }

/* Dialogs */
.dialog .window-body { padding: 12px 12px 10px; background: #ece9d8; }
.dlg-row { display: flex; gap: 14px; align-items: flex-start; }
.dlg-icon svg { width: 32px; height: 32px; display: block; }
.dlg-text { line-height: 1.45; padding-top: 2px; user-select: text; -webkit-user-select: text; }
.dlg-btns { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dlg-prompt label { display: block; margin-bottom: 8px; line-height: 1.4; }
.dlg-prompt input { width: 100%; }
.xp-btn {
  font: 11px Tahoma, sans-serif; min-width: 75px; height: 23px; padding: 0 10px; color: #000;
  border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
  box-shadow: inset -1px -1px #d6d0c5;
}
.xp-btn:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
.xp-btn:focus-visible, .xp-btn:focus { 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; }
.xp-btn:active { background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); }
.xp-input { font: 11px Tahoma, sans-serif; height: 21px; padding: 2px 3px; border: 1px solid #7f9db9; outline: none; background: #fff; user-select: text; -webkit-user-select: text; }

/* ---------------- Taskbar ---------------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: stretch; z-index: 100000;
  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%);
}
#start-btn {
  display: flex; align-items: center; gap: 4px; padding: 0 20px 0 8px; margin: 0; border: 0; cursor: default;
  border-radius: 0 10px 10px 0; color: #fff;
  font: italic bold 19px "Trebuchet MS", "Franklin Gothic Medium", Tahoma, sans-serif; letter-spacing: .5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.55);
  background: radial-gradient(ellipse at 50% -40%, #8bd27d 0%, transparent 60%), linear-gradient(180deg, #3c9d3a 0%, #4ab546 10%, #3a9a37 45%, #2f8b2d 80%, #2a7e28 100%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.45), inset -1px -2px 2px rgba(0,0,0,.35), 2px 0 3px rgba(0,0,0,.35);
}
#start-btn:hover { filter: brightness(1.1); }
#start-btn.pressed { background: linear-gradient(180deg, #2a7e28 0%, #2e8a2c 40%, #257423 100%); box-shadow: inset 2px 2px 3px rgba(0,0,0,.5); }
#start-btn img { width: 22px; height: 22px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); }
#start-btn span { margin-top: -2px; }

#task-buttons { flex: 1; display: flex; gap: 3px; padding: 0 6px 0 8px; align-items: center; overflow: hidden; min-width: 0; }
.task-btn {
  flex: 0 1 160px; min-width: 36px; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 8px;
  border: 0; border-radius: 3px; color: #fff; font: 11px Tahoma, sans-serif; text-align: left; cursor: default;
  background: linear-gradient(180deg, #3c81f3 0%, #3f86f5 10%, #3c80f1 50%, #3577ea 90%, #2f6ee0 100%);
  box-shadow: inset -1px -1px rgba(0,0,0,.3), inset 1px 1px rgba(255,255,255,.25), 1px 1px 1px rgba(0,0,0,.15);
}
.task-btn:hover { background: linear-gradient(180deg, #53a1ff, #4d95fb 50%, #4388f5); }
.task-btn.active { background: linear-gradient(180deg, #1c4bb3, #1e52b7 20%, #1d50b4); box-shadow: inset 1px 1px 2px rgba(0,0,0,.5), inset -1px -1px rgba(255,255,255,.1); }
.task-btn img { width: 16px; height: 16px; flex: 0 0 auto; }
.task-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-btn.flash { animation: flash 1s steps(1) infinite; }
@keyframes flash { 0%, 100% { background: linear-gradient(180deg, #ffb55a, #fa9a2c 50%, #e8841a); } 50% { background: linear-gradient(180deg, #3c81f3, #3577ea); } }

#tray {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 12px; color: #fff; font-size: 11px; white-space: nowrap;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9);
  border-left: 1px solid #1042af; box-shadow: inset 1px 0 1px #18bbff;
}
#tray-msn { width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: default; }
#tray-msn img { width: 16px; height: 16px; display: block; }

/* ---------------- Start menu ---------------- */
#start-menu {
  position: fixed; left: 0; bottom: 30px; width: 390px; height: 470px; z-index: 100001;
  display: flex; flex-direction: column; border-radius: 7px 7px 0 0; overflow: hidden;
  background: #fff; border: 1px solid #1b50c4; box-shadow: 3px 3px 8px rgba(0,0,0,.5);
}
#start-menu[hidden], #all-programs[hidden] { display: none; }
.sm-head {
  height: 60px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; position: relative;
  color: #fff; font: bold 14px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #1868ce 0, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
}
.sm-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #da884a 30%, #da884a 70%, transparent); }
.sm-head img { width: 46px; height: 46px; object-fit: cover; border: 2px solid rgba(255,255,255,.85); border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.4); }
.sm-body { flex: 1; display: flex; min-height: 0; border-left: 1px solid #1b50c4; border-right: 1px solid #1b50c4; }
.sm-left { flex: 1; display: flex; flex-direction: column; padding: 6px 0; background: #fff; min-width: 0; }
.sm-right { width: 180px; flex: 0 0 auto; padding: 6px 0; background: #d3e5fa; border-left: 1px solid #95bdee; display: flex; flex-direction: column; }
.sm-item { display: flex; align-items: center; gap: 7px; padding: 4px 8px; margin: 0 2px; background: none; border: 0; text-align: left; color: #000; font-size: 11px; cursor: default; }
.sm-item img { width: 32px; height: 32px; flex: 0 0 auto; }
.sm-item img.pixel { image-rendering: pixelated; }
.sm-item b { display: block; }
.sm-item small { display: block; color: #7a7a7a; font-size: 11px; }
.sm-item:hover, .sm-ritem:hover, .sm-all:hover, #all-programs button:hover { background: #316ac5; color: #fff; }
.sm-item:hover small { color: #fff; }
.sm-sep { height: 1px; margin: 5px 10px; background: linear-gradient(90deg, transparent, #c5c5c5 20%, #c5c5c5 80%, transparent); flex: 0 0 auto; }
.sm-right .sm-sep { background: linear-gradient(90deg, transparent, #9dbde8 20%, #9dbde8 80%, transparent); }
.sm-spacer { flex: 1; }
.sm-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; margin: 0 2px; border: 0; background: none; font: bold 11px Tahoma, sans-serif; cursor: default; }
.sm-all svg { display: block; }
.sm-ritem { display: flex; align-items: center; gap: 6px; padding: 3px 8px; margin: 0 2px; border: 0; background: none; color: #0a246a; font-size: 11px; text-align: left; cursor: default; }
.sm-ritem.bold { font-weight: bold; }
.sm-ritem svg, .sm-ritem img { width: 22px; height: 22px; flex: 0 0 auto; }
.sm-foot {
  height: 40px; flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 0 8px;
  background: linear-gradient(180deg, #4282d6 0%, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%, #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d6 75%, #1165d4 83%, #0f61cb 88%);
}
.sm-foot button { display: flex; align-items: center; gap: 5px; padding: 3px 6px; background: none; border: 0; color: #fff; font-size: 11px; border-radius: 3px; cursor: default; }
.sm-foot button img { width: 22px; height: 22px; }
.sm-foot button:hover { background: rgba(255,255,255,.18); }
#all-programs { position: fixed; z-index: 100002; background: #fff; border: 1px solid #7a96df; box-shadow: 2px 2px 5px rgba(0,0,0,.4); padding: 2px 0; min-width: 220px; display: flex; flex-direction: column; }
#all-programs button { display: flex; align-items: center; gap: 6px; padding: 4px 16px 4px 6px; border: 0; background: none; font-size: 11px; text-align: left; cursor: default; }
#all-programs img { width: 16px; height: 16px; }

/* ---------------- Welcome screen ---------------- */
#welcome { position: fixed; inset: 0; z-index: 300000; display: flex; flex-direction: column; color: #fff; background: #5a7edc; transition: opacity .6s; }
#welcome.gone { opacity: 0; pointer-events: none; }
.wl-top { height: 12%; min-height: 60px; background: #00309c; position: relative; }
.wl-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, #466fdc, #fff 35%, #aac2f3 65%, #466fdc); }
.wl-mid { flex: 1; display: flex; align-items: center; background: radial-gradient(circle at 8% 10%, #9ab8f3 0, #7897e6 12%, #5a7edc 32%); position: relative; }
.wl-left { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 36px; text-align: right; }
.wl-logo { display: flex; align-items: flex-end; gap: 8px; }
.wl-logo img { width: 76px; height: 76px; filter: drop-shadow(2px 2px 2px rgba(0,0,0,.35)); }
.wl-logo-text { font-family: "Franklin Gothic Medium", "Trebuchet MS", Arial, sans-serif; line-height: 1; text-align: left; position: relative; }
.wl-ms { display: block; font-size: 15px; font-weight: bold; }
.wl-win { font-size: 44px; font-weight: bold; letter-spacing: -1px; }
.wl-xp { font-size: 28px; color: #f78a24; font-style: italic; font-weight: bold; vertical-align: top; position: relative; top: -8px; margin-left: 2px; }
.wl-hint { margin-top: 36px; font-size: 16px; }
.wl-divider { width: 1px; align-self: stretch; margin: 8% 0; background: linear-gradient(transparent, rgba(255,255,255,.85) 30%, rgba(255,255,255,.85) 70%, transparent); }
.wl-right { flex: 1; padding-left: 26px; }
.wl-user { display: flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; font: 20px Tahoma, sans-serif; padding: 8px 60px 8px 8px; border-radius: 8px 0 0 8px; cursor: pointer; text-align: left; }
.wl-user:hover { background: linear-gradient(90deg, #0d3ea5, rgba(90,126,220,0)); }
.wl-user img { width: 60px; height: 60px; object-fit: cover; border: 3px solid rgba(255,255,255,.85); border-radius: 6px; }
.wl-user:hover img { border-color: #ffcc47; }
.wl-bottom { height: 12%; min-height: 60px; background: #00309c; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 3%; }
.wl-bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: linear-gradient(90deg, #466fdc, #f99736 40%, #f99736 60%, #466fdc); }
.wl-off { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wl-off-icon svg, .wl-off-icon img { width: 26px; height: 26px; display: block; }
.wl-note { font-size: 11px; line-height: 1.5; text-align: right; }
.wl-welcome-text { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font: italic bold 64px "Franklin Gothic Medium", "Trebuchet MS", Arial, sans-serif; text-shadow: 3px 3px 4px rgba(0,0,0,.35); pointer-events: none; }
#welcome.welcoming .wl-mid > *, #welcome.welcoming .wl-bottom > * { visibility: hidden; }
#welcome.welcoming .wl-welcome-text { display: flex; }

/* ---------------- Toasts / shutdown ---------------- */
#toasts { position: fixed; right: 6px; bottom: 34px; z-index: 100003; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.toast {
  width: 200px; font-size: 11px; cursor: pointer; animation: toastIn .35s ease-out; transition: opacity .35s, transform .35s;
  background: linear-gradient(180deg, #fff, #dce8fb); border: 1px solid #6d8fc9; box-shadow: 1px 1px 5px rgba(0,0,0,.35);
}
.toast.out { opacity: 0; transform: translateY(16px); }
@keyframes toastIn { from { transform: translateY(40px); opacity: 0; } }
.toast-head { display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: linear-gradient(180deg, #e9f0fc, #c3d5f5); border-bottom: 1px solid #9fb6e1; color: #1d3f8a; font-weight: bold; }
.toast-head span { flex: 1; }
.toast-head button { border: 0; background: none; font-size: 14px; line-height: 12px; padding: 0 2px; color: #1d3f8a; cursor: pointer; }
.toast-body { display: flex; gap: 8px; padding: 10px 8px 12px; color: #000; line-height: 1.35; overflow-wrap: anywhere; }
.toast-body img { width: 32px; height: 32px; flex: 0 0 auto; }

#shutdown { position: fixed; inset: 0; z-index: 400000; background: #000; color: #ff8c00; display: flex; flex-direction: column; align-items: center; justify-content: center; font: bold 30px Arial, sans-serif; text-align: center; line-height: 1.3; cursor: default; }
#shutdown[hidden] { display: none; }
#shutdown small { color: #444; font: 12px Tahoma, sans-serif; margin-top: 30px; }

/* ---------------- Full screen tip balloon ---------------- */
#fs-tip {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100005;
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 26px 8px 9px; max-width: 360px;
  background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 7px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.35); font-size: 11px; line-height: 1.4; cursor: pointer;
  animation: fsTipIn .4s ease-out;
}
#fs-tip[hidden] { display: none; }
#fs-tip:hover { background: #fffff0; }
.fs-tip-icon svg { width: 20px; height: 20px; display: block; margin-top: 1px; }
#fs-tip kbd { font: bold 10px Tahoma, sans-serif; padding: 0 3px; border: 1px solid #999; border-radius: 2px; background: #fff; }
.fs-tip-x { position: absolute; top: 3px; right: 4px; width: 15px; height: 15px; padding: 0; line-height: 12px; font-size: 13px; border: 1px solid transparent; border-radius: 2px; background: none; cursor: pointer; color: #333; }
.fs-tip-x:hover { border-color: #888; background: #fff; }
@keyframes fsTipIn { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------------- Desktop context menu ---------------- */
.xp-ctx { position: fixed; z-index: 100010; min-width: 180px; padding: 2px; background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 3px rgba(0,0,0,.35); font-size: 11px; }
.xp-ctx-item { display: flex; align-items: center; padding: 3px 18px 3px 2px; cursor: default; white-space: nowrap; }
.xp-ctx-item:hover { background: #316ac5; color: #fff; }
.xp-ctx-check { width: 18px; text-align: center; }
.xp-ctx-sep { height: 1px; margin: 3px 2px; background: #aca899; }

/* Webamp (Winamp) */
#webamp-host { position: fixed; inset: 0 0 30px 0; pointer-events: none; }