@font-face {
  font-family: DOSVGA;
  src: url('/assets/fonts/dosvga.woff2') format('woff2');
  font-display: swap;
}

:root, [data-theme="luna-blue"] {
  --title-1: #0054e3;
  --title-2: #3a81ee;
  --title-3: #9db9eb;
  --inactive-1: #7a96df;
  --inactive-2: #a9c4f5;
  --border: #0831d9;
  --task: #245edc;
  --task-2: #1941a5;
  --start: #3c8a3c;
  --start-2: #2d6b2d;
  --client: #ece9d8;
  --sel: #316ac5;
  --xp-blue: #5a7edc;
}
[data-theme="luna-olive"] {
  --title-1: #3e5f2f; --title-2: #6d8e4e; --title-3: #c5d9a8;
  --inactive-1: #8aa574; --inactive-2: #c3d6ad; --border: #4f6d32;
  --task: #6d8e4e; --task-2: #3e5f2f; --start: #6b8e23; --start-2: #556b2f;
}
[data-theme="luna-silver"] {
  --title-1: #6d6d6d; --title-2: #9a9a9a; --title-3: #e0e0e0;
  --inactive-1: #a8a8a8; --inactive-2: #d0d0d0; --border: #6b6b6b;
  --task: #8a8a8a; --task-2: #5c5c5c; --start: #6b8e23; --start-2: #4e6b1a;
}
[data-theme="classic"] {
  --title-1: #000080; --title-2: #000080; --title-3: #000080;
  --inactive-1: #808080; --inactive-2: #808080; --border: #000080;
  --task: #c0c0c0; --task-2: #c0c0c0; --start: #c0c0c0; --start-2: #c0c0c0; --client: #c0c0c0;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
  font-size: 11px;
  color: #000;
  background: #000;
  overflow: hidden;
  user-select: none;
}
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

/* 4-color flag (original mark) */
.xp-flag {
  width: 88px; height: 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  transform: rotate(-8deg);
  filter: drop-shadow(2px 3px 0 #0004);
}
.xp-flag span { border-radius: 3px 10px 3px 3px; }
.xp-flag span:nth-child(1) { background: #e81123; }
.xp-flag span:nth-child(2) { background: #7fba00; }
.xp-flag span:nth-child(3) { background: #00a4ef; }
.xp-flag span:nth-child(4) { background: #ffb900; }
.xp-flag.sm { width: 56px; height: 56px; }
.xp-flag.mini {
  width: 18px; height: 18px; gap: 1px; transform: rotate(-12deg); display: inline-grid; filter: none;
}
.xp-flag.mini span { border-radius: 1px; }

/* VGA / BIOS */
.vga-screen {
  position: fixed; inset: 0;
  background: #000;
  color: #c0c0c0;
  font-family: DOSVGA, 'Courier New', monospace;
  font-size: 16px;
  line-height: 18px;
  padding: 16px 24px;
  z-index: 80;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}
.vga-screen p { margin: 0 0 4px; }
.bios-top { display: flex; justify-content: space-between; color: #fff; }
.bios-body { margin-top: 28px; }
.bios-sp { margin-top: 16px; }
.bios-foot { position: absolute; bottom: 18px; left: 24px; color: #fff; }
.energy-star { width: 80px; height: 60px; }
.energy-star svg { width: 100%; height: 100%; }
#bios-mem { color: #fff; }
.boot-opt {
  display: inline-block;
  padding: 0 8px;
  margin: 2px 0;
  color: #fff;
}
.boot-opt.sel { background: #aaa; color: #000; }
.setup-blue { background: #0000aa; color: #fff; }
.center-line { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); color: #fff; }

/* Starting Windows — original CSS recreation of the XP Professional boot layout */
#stage-starting {
  position: fixed; inset: 0;
  background: #000;
  z-index: 70;
  overflow: hidden;
  color: #fff;
}
.starting-inner {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: min(92vw, 520px);
}
.boot-brand { text-align: center; }
.xp-boot-flag {
  width: 120px; height: 94px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  transform: perspective(320px) rotateY(-20deg) rotateZ(-7deg) skewX(-6deg);
  filter: drop-shadow(5px 7px 0 #000);
}
.xp-boot-flag span { border-radius: 4px 20px 5px 10px; }
.xp-boot-flag span:nth-child(1) { background: linear-gradient(160deg, #ff5a38, #d01010); }
.xp-boot-flag span:nth-child(2) { background: linear-gradient(160deg, #9ae01a, #4a9a00); transform: translateY(5px); }
.xp-boot-flag span:nth-child(3) { background: linear-gradient(160deg, #3ab4f4, #0070d0); }
.xp-boot-flag span:nth-child(4) { background: linear-gradient(160deg, #ffe14a, #e8a800); transform: translateY(3px); }
.boot-ms {
  margin: 0 0 4px;
  font: 600 16px/1.1 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif;
  letter-spacing: 0.03em;
}
.boot-win {
  margin: 0;
  font: 700 56px/0.95 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif;
  letter-spacing: -1px;
}
.boot-win span { font-style: normal; }
.boot-win em {
  font-style: normal;
  color: #f58220;
  font-size: 36px;
  margin-left: 6px;
  vertical-align: 1px;
  font-weight: 700;
}
.boot-sku {
  margin: 12px 0 0;
  font: 600 20px/1 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif;
}
.xp-loadbar {
  margin-top: 92px;
  width: 176px; height: 15px;
  border: 2px solid #a8a8a8;
  border-radius: 8px;
  padding: 2px 3px;
  overflow: hidden;
  background: #000;
  display: flex; gap: 2px;
}
.xp-loadbar i {
  flex: 0 0 11px;
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(to bottom, #a8bcff 0%, #5a7ef0 28%, #2a3cc8 70%, #1a28a0 100%);
  animation: xpbootbar 1.55s linear infinite;
}
@keyframes xpbootbar {
  from { transform: translateX(-42px); }
  to { transform: translateX(188px); }
}
.boot-copy {
  position: absolute;
  left: 32px; bottom: 28px;
  margin: 0;
  font-size: 13px;
  color: #f0f0f0;
  max-width: 46%;
  line-height: 1.35;
}
.boot-msmark {
  position: absolute;
  right: 36px; bottom: 26px;
  margin: 0;
  font: italic 800 22px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -0.4px;
}

/* Starting Windows */

/* XP welcome flash + logon */
.xpw-bar { height: 72px; background: #00309c; flex-shrink: 0; }
.xpw-bar.bot { background: linear-gradient(90deg, #3833ac, #00309c); }
.xpw-stripe { height: 3px; flex-shrink: 0; }
.xpw-stripe.cool { background: linear-gradient(90deg, #466dcd, #c7ddff, #5a7edc); }
.xpw-stripe.warm { background: linear-gradient(90deg, #003399, #f99736, #c2814d, #00309c); }
#stage-xpwelcome, #stage-welcome {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  z-index: 60;
}
.xpw-mid {
  flex: 1;
  background: radial-gradient(circle at 8% 8%, #91b1ef 0, #7698e6 10%, #5a7edc 22%);
  display: grid; place-items: center;
}
.xpw-mid span {
  color: #f4f8ff;
  font: italic 700 56px Tahoma, sans-serif;
  text-shadow: 2px 2px 0 #0003;
}
.logon-mid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  background: radial-gradient(circle at 8% 8%, #91b1ef 0, #7698e6 10%, #5a7edc 22%);
  color: #fff;
}
.logon-left {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  padding: 0 48px; gap: 18px;
}
.logon-hint { font-size: 18px; margin: 0; text-align: right; max-width: 260px; }
.logon-split { background: linear-gradient(#fff0, #fff8, #fff0); }
.logon-right {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 40px; gap: 8px;
}
.user-tile {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: #fff;
  text-align: left; padding: 8px; cursor: default;
  max-width: 340px;
}
.user-tile:hover, .user-tile:focus { background: #ffffff22; outline: 1px solid #fff6; }
.user-tile strong { display: block; font-size: 16px; text-shadow: 1px 1px #0005; }
.user-tile small { opacity: 0.85; }
.login-tile { align-items: flex-start; }
.login-fields { display: flex; flex-direction: column; gap: 4px; }
.login-fields input {
  width: 180px; border: 1px solid #003c74; padding: 2px 4px; font-size: 11px;
}
.login-fields .go {
  align-self: flex-start;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: #3c8a3c; color: #fff; font-size: 14px;
}
.err { color: #ffd54f; margin: 0; }
.avatar {
  width: 48px; height: 48px; flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 #0004;
  background: #8b1e1e center / cover;
}
.avatar.chess {
  background-color: #9b2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect fill='%239b2a2a' width='48' height='48'/%3E%3Cpath fill='%23f5e6c8' d='M24 8c2 0 4 2 4 5 0 2-1 3-2 4h6l-2 4h-4l2 16h-8l2-16h-4l-2-4h6c-1-1-2-2-2-4 0-3 2-5 4-5z'/%3E%3Cpath fill='%23111' d='M14 14l4 3-6 6 4 2-8 8h8l4-6 4 6h8l-8-8 4-2-6-6 4-3z'/%3E%3C/svg%3E");
}
.avatar.key { background: #3d5a9c; }
.avatar.bag { background: #c47a2c; }
.logon-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; color: #fff;
}
.logon-foot p { margin: 0; font-size: 11px; text-align: right; opacity: 0.9; }
#btn-welcome-off {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; color: #fff; font-size: 13px;
}
.pwr, .ico-off.pwr {
  width: 22px; height: 22px; border-radius: 4px;
  background: radial-gradient(circle at 40% 35%, #ff8a80, #c62828);
  box-shadow: inset 0 0 0 2px #fff6;
  display: inline-block;
}

/* Desktop */
#stage-desktop { position: fixed; inset: 0; }
#wallpaper { position: absolute; inset: 0 0 30px 0; }
#wallpaper[data-wallpaper="bliss"] { background: #5ea4e8 url('/assets/bliss.svg') center / cover no-repeat; }
#wallpaper[data-wallpaper="luna"] { background: linear-gradient(#3a6ea5, #0a246a); }
#wallpaper[data-wallpaper="noir"] { background: radial-gradient(circle at 30% 20%, #445, #111); }
#wallpaper[data-wallpaper="olive"] { background: linear-gradient(#8aa574, #3e5f2f); }
#wallpaper[data-wallpaper="solid-blue"] { background: #245edc; }
#wallpaper[data-wallpaper="solid-teal"] { background: #0d7377; }

#icons { position: absolute; inset: 0 0 30px 0; }
.xp-icon {
  position: absolute; width: 76px;
  background: none; border: 0; color: #fff;
  text-shadow: 1px 1px 2px #000;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px; cursor: default;
}
.xp-icon svg { width: 32px; height: 32px; filter: drop-shadow(1px 1px 1px #0008); }
.xp-icon span { font-size: 11px; text-align: center; line-height: 1.15; }
.xp-icon:focus { outline: 1px dotted #fff; background: #316ac544; }

#windows { position: absolute; inset: 0 0 30px 0; pointer-events: none; }
.xp-window {
  pointer-events: auto;
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--border);
  padding: 3px;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 3px 10px #0007, inset 0 0 0 1px #ffffff55;
  min-width: 220px; min-height: 140px;
}
.xp-window.min { display: none; }
.xp-window.max { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; padding: 3px 3px 0; }
.xp-title {
  height: 26px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 3px 0 5px;
  color: #fff; font: 700 12px Tahoma, sans-serif;
  background: linear-gradient(
    180deg,
    #0997ff 0%,
    #0058ee 8%,
    #0050ee 40%,
    #0190ff 88%,
    #0058ee 96%,
    #003dd7 100%
  );
  cursor: default;
  border-radius: 6px 6px 0 0;
}
.xp-window:not(.active) .xp-title {
  background: linear-gradient(180deg, #87a9e4 0%, #6d8ad8 12%, #5580c6 100%);
}
.xp-title-icon svg { width: 16px; height: 16px; display: block; }
.xp-title-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px #0005; }
.xp-title-btns { display: flex; gap: 1px; }
.xp-tb-btn {
  width: 21px; height: 21px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#33a0ff, #0060e0);
  box-shadow: inset 1px 1px 0 #fff6;
  position: relative; padding: 0; cursor: default;
}
.xp-tb-btn:hover { filter: brightness(1.12); }
.xp-tb-btn.close { background: linear-gradient(#e9786e, #c23b2a); }
.xp-tb-btn.min::before { content: ""; position: absolute; left: 4px; right: 9px; bottom: 5px; height: 2px; background: #fff; }
.xp-tb-btn.max::before { content: ""; position: absolute; inset: 4px 5px 6px 5px; border: 2px solid #fff; border-top-width: 3px; }
.xp-tb-btn.max.rest::before { inset: 6px 4px 3px 7px; }
.xp-tb-btn.max.rest::after {
  content: ""; position: absolute; inset: 3px 7px 8px 4px;
  border: 2px solid #fff; border-top-width: 3px;
}
.xp-tb-btn.close::before, .xp-tb-btn.close::after {
  content: ""; position: absolute; left: 9px; top: 4px; width: 2px; height: 12px; background: #fff;
}
.xp-tb-btn.close::before { transform: rotate(45deg); }
.xp-tb-btn.close::after { transform: rotate(-45deg); }
.xp-menubar { background: var(--client); border-bottom: 1px solid #aca899; padding: 2px 6px; }
.xp-window.noresize .xp-resize { display: none; }
.xp-window.selfsizing { height: auto !important; }
.xp-window.dialogbox { border-radius: 8px; }
appcontents { display: flex; flex: 1; min-height: 0; flex-direction: column; }
appcontentholder.xp-client, .xp-client { flex: 1; background: #fff; overflow: auto; position: relative; min-height: 0; }
appanimator { display: none; }
winbutton, winbutton btnopt, .xp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 74px; height: 23px;
  background: linear-gradient(#fff, #ece9d8 80%, #d4d0c8);
  border: 1px solid #003c74;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #aca899;
  padding: 0 12px; cursor: default; font: 11px Tahoma, sans-serif;
}
winbutton:active, .xp-btn:active { box-shadow: inset 1px 1px 2px #0004; }
winbutton btnopt { border: 0; background: none; min-width: 0; height: auto; padding: 0; box-shadow: none; }
.sdk-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.xp-run { padding: 16px; background: var(--client); height: 100%; }
.xp-run input { width: 100%; margin: 8px 0; }
.xp-status { background: var(--client); border-top: 1px solid #aca899; padding: 2px 6px; }
.xp-resize { position: absolute; inset: 0; width: auto; height: auto; pointer-events: none; cursor: default; }

/* Taskbar */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(180deg, #3168d5 0%, #245edb 12%, #245edb 88%, #1941a5 100%);
  display: flex; align-items: stretch;
  z-index: 30;
  box-shadow: inset 0 1px 0 #8bb1f0;
}
#btn-start {
  width: 98px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #5fbf5a 0%, #3c9a38 22%, #2d8a30 55%, #3c9a38 100%);
  box-shadow: inset 0 1px 0 #b6f0a8, 1px 0 0 #1a4cad;
  color: #fff;
  font: italic 700 19px 'Franklin Gothic Medium', Tahoma, sans-serif;
  text-shadow: 1px 1px 1px #0a4a0a;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: default;
  letter-spacing: 0.02em;
}
#btn-start.open { filter: brightness(0.9); box-shadow: inset 1px 1px 2px #0005; }
.ql {
  display: flex; align-items: center; gap: 3px;
  padding: 0 8px;
  border-right: 1px solid #163a8c;
  box-shadow: 1px 0 0 #5a8dee;
}
.ql button {
  width: 22px; height: 22px; border: 0; cursor: default;
  background: transparent;
}
#ql-desktop {
  background:
    linear-gradient(#fff 0 0) 4px 5px / 10px 7px no-repeat,
    linear-gradient(#c0c0c0 0 0) 7px 8px / 10px 7px no-repeat,
    linear-gradient(#316ac5 0 0) 7px 8px / 10px 2px no-repeat;
}
#ql-ie { background: #1565c0; border-radius: 2px; }
#task-buttons { flex: 1; display: flex; gap: 2px; padding: 3px 6px; overflow: hidden; }
.task-btn {
  max-width: 160px;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(#3f8cf3, #1d4fb8);
  border: 1px solid #0831d9;
  box-shadow: inset 1px 1px 0 #9ec4ff55;
  color: #fff; padding: 0 8px; overflow: hidden;
  border-radius: 2px;
}
.task-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.task-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-btn.active { background: linear-gradient(#1a4aad, #163b8c); box-shadow: inset 1px 1px 3px #0005; }
#tray {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 12px;
  background: linear-gradient(180deg, #19b9e8 0%, #0e97d2 40%, #0a7cbf 100%);
  color: #fff;
  min-width: 108px;
  justify-content: flex-end;
  box-shadow: inset 2px 0 0 #7ec8ee;
}
#tray-clock { font: 11px Tahoma, sans-serif; min-width: 52px; text-align: right; }
.shield {
  width: 14px; height: 16px;
  background: #f4c430;
  clip-path: polygon(50% 0, 100% 18%, 86% 100%, 14% 100%, 0 18%);
}

/* Start menu */
#start-menu {
  position: absolute; left: 0; bottom: 30px;
  width: 396px; height: 492px;
  display: flex; flex-direction: column;
  background: #245edc;
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 12px #0007;
  z-index: 35;
  overflow: visible;
}
.sm-gloss {
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff9 10%, #fff6 90%, transparent);
  border-radius: 8px 8px 0 0;
}
.sm-head {
  height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  color: #fff; font: 700 18px 'Trebuchet MS', Tahoma, sans-serif;
  text-shadow: 1px 1px #0006;
  background: linear-gradient(180deg, #3a7ade, #245edc);
}
.sm-head .avatar { width: 42px; height: 42px; border: 2px solid #fff; box-shadow: 1px 1px 0 #0005; }
.sm-orange {
  height: 2px;
  background: linear-gradient(90deg, #f8b636, #f97a0f 40%, #f8b636);
}
.sm-body { flex: 1; display: grid; grid-template-columns: 190px 1fr; min-height: 0; background: #fff; margin: 0 2px; }
.sm-left { display: flex; flex-direction: column; min-height: 0; }
#start-left { flex: 1; overflow: auto; padding: 6px 0; }
.sm-right { background: linear-gradient(#d6e6f9, #c0d9f5); padding: 6px 0; overflow: auto; }
.sm-item {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0;
  padding: 5px 10px;
  text-align: left; cursor: default;
}
.sm-item svg { width: 32px; height: 32px; flex-shrink: 0; }
.sm-right .sm-item svg { width: 24px; height: 24px; }
.sm-item.bold span { font-weight: 700; }
.sm-item:hover { background: #316ac5; color: #fff; }
.sm-all {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; font-weight: 700; border-top: 1px solid #e0e0e0;
}
.sm-all:hover, .sm-all:hover > span { background: #316ac5; color: #fff; }
.sm-all i {
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #2e7d32;
}
.sm-all:hover .all-flyout { display: block; }
.sm-item img { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.sm-sep { height: 1px; margin: 4px 10px; background: linear-gradient(90deg, transparent, #7ba2d4, transparent); }
.sm-header { padding: 6px 10px 2px; font-size: 10px; color: #245edb; font-weight: 700; text-transform: uppercase; }
.all-flyout {
  display: none;
  position: absolute; left: 100%; bottom: 0;
  width: 228px; max-height: 460px; overflow: auto; background: #fff;
  border: 1px solid #003c74;
  box-shadow: 3px 3px 8px #0004;
  z-index: 40;
  padding: 2px 0;
}
.sm-folder { position: relative; }
.sm-folder > .sm-item { width: 100%; }
.sm-arrow {
  margin-left: auto;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #000;
}
.sm-item:hover .sm-arrow { border-left-color: #fff; }
.sm-sub {
  display: none;
  position: absolute; left: 100%; top: 0;
  min-width: 200px; background: #fff;
  border: 1px solid #003c74;
  box-shadow: 3px 3px 8px #0004;
  z-index: 41;
  padding: 2px 0;
}
.sm-folder:hover > .sm-sub { display: block; }
.sm-foot {
  height: 42px;
  display: flex; justify-content: flex-end; gap: 10px; align-items: center;
  padding: 0 10px;
  background: linear-gradient(#4282d6, #0e60cb);
}
.sm-foot button {
  background: none; border: 0; color: #fff;
  display: flex; align-items: center; gap: 6px;
  cursor: default; padding: 4px 8px;
}
.sm-foot button:hover { background: #ffffff22; }
.ico-off.log {
  width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(#ffb74d, #ef6c00);
  display: inline-block;
}

/* Power / logoff dialogs */
.xp-modal {
  position: fixed; inset: 0;
  background: #5a7edccc;
  z-index: 90;
  display: grid; place-items: center;
}
.power-box {
  width: 420px;
  background: linear-gradient(#5a7edc, #3d5fbf);
  border: 2px solid #9eb9e2;
  padding: 16px;
  color: #fff;
  text-align: center;
}
.power-head { font-size: 16px; margin-bottom: 18px; text-align: left; }
.power-acts { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; }
.power-acts button {
  background: none; border: 0; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.power-acts span {
  width: 38px; height: 38px; border-radius: 8px;
  display: block;
}
.power-acts .stand { background: #43a047; }
.power-acts .off { background: #c62828; }
.power-acts .rst { background: #1565c0; }
.power-acts .sw { background: #7e57c2; }
.power-acts .log { background: #ef6c00; }

#stage-off {
  position: fixed; inset: 0;
  background: #000;
  color: #ffb000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  font: 22px Tahoma, sans-serif;
  z-index: 70;
}

/* Apps */
.xp-notepad { width: 100%; height: 100%; border: 0; resize: none; padding: 8px; font: 12px 'Lucida Console', Consolas, monospace; outline: none; }
.xp-calc { padding: 10px; background: var(--client); height: 100%; }
.xp-calc-out { width: 100%; text-align: right; font-size: 18px; padding: 6px; margin-bottom: 8px; }
.xp-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.xp-calc-grid button { padding: 8px 0; background: #fff; border: 1px solid #7a96df; }
.xp-paint { height: 100%; display: flex; flex-direction: column; background: var(--client); }
.xp-paint-tools { display: flex; gap: 8px; padding: 6px; align-items: center; }
.xp-paint canvas { flex: 1; background: #fff; cursor: crosshair; width: 100%; }
.xp-mine { padding: 8px; background: var(--client); }
.xp-mine-grid { display: grid; grid-template-columns: repeat(9, 22px); gap: 1px; margin-top: 8px; }
.xp-mine-grid button { width: 22px; height: 22px; background: #c0c0c0; border: 2px outset #eee; padding: 0; font-size: 11px; }
.xp-mine-grid button.open { border: 1px solid #999; background: #dedede; }
.xp-mine-grid button.flag { background: #f5d76e; }
.xp-mine-grid button.boom { background: #e53935; color: #fff; }
.xp-expl { height: 100%; display: flex; flex-direction: column; }
.xp-expl-addr { background: var(--client); padding: 4px 8px; border-bottom: 1px solid #aca899; }
.xp-expl-list { flex: 1; overflow: auto; padding: 6px; }
.xp-expl-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 4px 6px; text-align: left; }
.xp-expl-item svg { width: 20px; height: 20px; }
.xp-expl-item:hover, .xp-expl-item:focus { background: var(--sel); color: #fff; }
.xp-cmd { height: 100%; background: #000; color: #cfd8dc; display: flex; flex-direction: column; font: 12px Consolas, monospace; }
.xp-cmd-out { flex: 1; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; }
.xp-cmd-line { display: flex; gap: 6px; padding: 4px 8px; }
.xp-cmd-line input { flex: 1; background: #000; color: #cfd8dc; border: 0; outline: none; font: inherit; }
.xp-iframe-wrap { display: flex; flex-direction: column; height: 100%; }
.xp-ie-bar { display: flex; gap: 6px; align-items: center; padding: 4px 6px; background: var(--client); }
.xp-ie-bar .xp-addr { flex: 1; }
.xp-ie-go { color: #003c74; }
.xp-ie-note { margin: 0; padding: 4px 8px; background: #fff8dc; }
.xp-iframe-wrap iframe { flex: 1; border: 0; width: 100%; }
.xp-display, .xp-account, .xp-about, .xp-dialog { padding: 16px; background: var(--client); height: 100%; }
.xp-hint { color: #555; }
.xp-empty { padding: 16px; color: #666; }
.xp-btn { background: linear-gradient(#fff, #dce6f5); border: 1px solid #003c74; padding: 4px 14px; cursor: default; color: #000; }

.xp-market { height: 100%; display: flex; flex-direction: column; background: #ece9d8; }
.mkt-head { padding: 10px 12px; background: linear-gradient(#2a5ad7, #1d3f9a); color: #fff; }
.mkt-head span, .mkt-head a { color: #dbe7ff; font-size: 11px; }
.mkt-body { flex: 1; display: grid; grid-template-columns: 140px 1fr 220px; min-height: 0; }
.mkt-cats { background: #d6dff5; border-right: 1px solid #aca899; overflow: auto; }
.mkt-cat { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; }
.mkt-cat.on, .mkt-cat:hover { background: #316ac5; color: #fff; }
.mkt-list { overflow: auto; background: #fff; }
.mkt-item { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; align-items: center; }
.mkt-item:hover, .mkt-item:focus { background: #316ac5; color: #fff; }
.mkt-item small { display: block; color: inherit; opacity: 0.85; }
.mkt-item img { width: 32px; height: 32px; object-fit: contain; }
.mkt-detail { padding: 12px; background: #f0f0f0; border-left: 1px solid #aca899; overflow: auto; }
.mkt-icon { width: 48px; height: 48px; object-fit: contain; }
.mkt-meta { color: #555; font-size: 11px; }
.mkt-status { min-height: 1.2em; color: #003c74; }

.xp-resize { position: absolute; inset: 0; width: auto; height: auto; pointer-events: none; cursor: default; }
.xp-resize .r { position: absolute; pointer-events: auto; }
.xp-resize .n { top: 0; left: 8px; right: 8px; height: 5px; cursor: n-resize; }
.xp-resize .s { bottom: 0; left: 8px; right: 8px; height: 5px; cursor: s-resize; }
.xp-resize .e { right: 0; top: 8px; bottom: 8px; width: 5px; cursor: e-resize; }
.xp-resize .w { left: 0; top: 8px; bottom: 8px; width: 5px; cursor: w-resize; }
.xp-resize .ne { top: 0; right: 0; width: 10px; height: 10px; cursor: nesw-resize; }
.xp-resize .nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nwse-resize; }
.xp-resize .se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.xp-resize .sw { left: 0; bottom: 0; width: 10px; height: 10px; cursor: nesw-resize; }

.starting-inner {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: min(92vw, 520px);
  height: auto; gap: 0;
}
#boot-overlay {
  position: absolute; inset: 0; z-index: 2; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#boot-overlay .boot-media, #boot-overlay img, #boot-overlay video { max-width: 100%; max-height: 100%; }
#boot-overlay .fit-cover { width: 100%; height: 100%; object-fit: cover; }
#boot-overlay .fit-stretch, #boot-overlay .fit-fill { width: 100%; height: 100%; object-fit: fill; }
#boot-overlay .fit-center { object-fit: none; }
#boot-overlay .fit-contain { max-width: 100%; max-height: 100%; object-fit: contain; }

#ctx-menu {
  position: absolute; z-index: 80; min-width: 168px;
  background: #fff; border: 1px solid #aca899;
  box-shadow: 2px 2px 4px #0004; padding: 2px;
}
#ctx-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 4px 18px;
}
#ctx-menu button:hover { background: #316ac5; color: #fff; }
.ctx-sep { height: 1px; margin: 3px 4px; background: #aca899; }
#sel-box {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px dotted #fff; background: #316ac544;
}
#alt-tab {
  position: absolute; z-index: 85; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  background: #3d5c99ee; border: 1px solid #fff8;
  padding: 12px; display: flex; gap: 10px; color: #fff;
}
.at-item { width: 88px; text-align: center; padding: 6px; }
.at-item.on { outline: 1px dotted #fff; background: #ffffff22; }
.at-item svg { width: 32px; height: 32px; }
#cal-pop {
  position: absolute; right: 8px; bottom: 34px; z-index: 50;
  background: var(--client); border: 1px solid #003c74;
  padding: 10px 14px; min-width: 200px;
}

.tray-ico {
  width: 16px; height: 16px; border: 0; padding: 0; cursor: default;
}
.tray-ico.vol { background: linear-gradient(#eee, #888); clip-path: polygon(0 40%, 40% 40%, 100% 10%, 100% 90%, 40% 60%, 0 60%); }
.tray-ico.net { background: #7cfc00; border-radius: 2px; box-shadow: inset 0 0 0 2px #0a7cbf; }
#tray-clock { cursor: default; padding: 0 6px; }

#stage-bsod {
  position: fixed; inset: 0; z-index: 100;
  background: #0000aa; color: #fff;
  font: 16px 'Lucida Console', Consolas, monospace;
  padding: 48px;
  white-space: pre-wrap;
}

.xp-expl-tb { display: flex; gap: 4px; align-items: center; padding: 3px 6px; background: linear-gradient(#fff, #ece9d8); border-bottom: 1px solid #aca899; }
.xp-expl-tb button { background: linear-gradient(#fff, #dce6f5); border: 1px solid #003c74; padding: 2px 8px; }
.xp-expl-split { flex: 1; display: grid; grid-template-columns: 180px 1fr; min-height: 0; }
.xp-expl-side {
  background: linear-gradient(#7ba3e0 0%, #c5daf8 28%, #d6e6f9 100%);
  padding: 8px 8px 12px; overflow: auto;
}
.luna-pane {
  background: #fff;
  border: 1px solid #7ba2d4;
  margin-bottom: 10px;
  overflow: hidden;
}
.luna-pane h4 {
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  color: #0c4da2;
  background: linear-gradient(90deg, #f9fbfd, #c5daf8);
  border-bottom: 1px solid #b8d0f0;
}
.luna-pane.green h4 { color: #2e7d32; background: linear-gradient(90deg, #f4fbf4, #cde8cd); }
.xp-expl-side .xp-expl-item { padding: 3px 8px; }
.xp-expl-list { flex: 1; overflow: auto; padding: 8px; background: #fff; }
.xp-expl-foot { background: var(--client); border-top: 1px solid #aca899; padding: 2px 8px; color: #333; }
.xp-expl-side { background: linear-gradient(#7ba3e0, #d6e6f9); padding: 8px; overflow: auto; }
.xp-expl-side p { font-weight: 700; color: #003c74; margin: 0 0 8px; }
.xp-note-wrap { height: 100%; display: flex; flex-direction: column; }
.xp-note-wrap .xp-notepad { flex: 1; }
.xp-sysdm, .xp-taskmgr, .xp-filedlg { padding: 8px; background: var(--client); height: 100%; display: flex; flex-direction: column; }
.fd-list { flex: 1; overflow: auto; background: #fff; border: 1px inset #aca899; margin: 6px 0; }
.fd-name { margin: 4px 0; }
.fd-name input { width: 70%; }

.sdk-dialog { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.sdk-dialog .sdk-dialog-btns { grid-column: 1 / -1; }
.dlg-ico { width: 32px; height: 32px; border-radius: 50%; display: inline-block; }
.dlg-ico.info, .dlg-ico.question { background: #1565c0; }
.dlg-ico.error { background: #c62828; }
.dlg-ico.warning { background: #f9a825; }

appnavigation { display: block; background: var(--client); border-bottom: 1px solid #aca899; }
.appmenus { display: flex; list-style: none; margin: 0; padding: 0 4px; gap: 2px; }
.appmenus > li { position: relative; padding: 3px 8px; }
.appmenus > li:hover { background: var(--sel); color: #fff; }
.appmenus .submenu {
  display: none; position: absolute; left: 0; top: 100%;
  min-width: 140px; background: #fff; border: 1px solid #aca899;
  box-shadow: 2px 2px 4px #0003; z-index: 5; color: #000;
}
.appmenus > li:hover .submenu { display: block; }
.submenu li { list-style: none; padding: 3px 16px; }
.submenu li:hover { background: var(--sel); color: #fff; }
.submenu .divider { height: 1px; padding: 0; margin: 3px 8px; background: #aca899; }

tab_ui { display: flex; flex-direction: column; height: 100%; }
.tabs { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.tabs li { background: #d4d0c8; border: 1px solid #808080; border-bottom: 0; padding: 4px 12px; }
.tabs li.selected { background: var(--client); position: relative; top: 1px; }
tabcontent { display: none; flex: 1; border: 1px solid #808080; padding: 10px; background: var(--client); }
tabcontent.selected { display: block; }

grouper { display: block; border: 1px solid #aca899; margin: 8px 4px; padding: 12px 8px 8px; position: relative; }
grouperHeading { position: absolute; top: -8px; left: 8px; background: var(--client); padding: 0 4px; }

winbutton.default { box-shadow: inset 0 0 0 1px #003c74; }
winbutton.disabled { opacity: 0.5; pointer-events: none; }
wincheckbox, winradio { display: inline-block; width: 13px; height: 13px; border: 1px solid #003c74; background: #fff; vertical-align: middle; margin-left: 6px; }
winradio { border-radius: 50%; }

[data-theme="classic"] .xp-window { border-radius: 0; padding: 2px; background: #c0c0c0; border: 2px outset #fff; }
[data-theme="classic"] .xp-title { border-radius: 0; background: #000080; }
[data-theme="classic"] #taskbar { background: #c0c0c0; box-shadow: none; }
[data-theme="classic"] #btn-start { background: #c0c0c0; color: #000; border: 2px outset #fff; border-radius: 0; font-style: normal; }

.ctx-sub { position: relative; }
.ctx-parent { width: 100%; }
.ctx-fly {
  display: none; position: absolute; left: 100%; top: -2px; min-width: 200px;
  background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 4px #0004; padding: 2px; z-index: 81;
}
.ctx-sub:hover .ctx-fly, .ctx-sub:focus-within .ctx-fly { display: block; }
.drive-item span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.drive-item small { font-size: 11px; opacity: 0.8; font-weight: 400; }
.xp-preview {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: #111; overflow: hidden;
}
.xp-preview img, .xp-preview video { max-width: 100%; max-height: 100%; }
.xp-preview audio { width: 90%; }
#stage-desktop.drop-hover #wallpaper {
  outline: 3px dashed #fff; outline-offset: -10px;
}

.xp-ie-tb {
  display: flex; gap: 2px; align-items: center;
  padding: 3px 6px;
  background: linear-gradient(#fff, #ece9d8);
  border-bottom: 1px solid #aca899;
}
.xp-ie-tb button {
  border: 1px solid transparent;
  background: none;
  padding: 2px 8px;
}
.xp-ie-tb button:hover { border-color: #003c74; background: #fff; }
.xp-ie-bar { display: flex; gap: 6px; align-items: center; padding: 3px 6px; background: var(--client); }
.xp-ie-bar input { flex: 1; }
.xp-iframe-wrap { display: flex; flex-direction: column; height: 100%; }
.xp-iframe-wrap iframe { flex: 1; border: 0; width: 100%; background: #fff; }
.xp-cp { display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 12px; padding: 16px; background: #fff; height: 100%; align-content: start; }
.xp-cp button {
  background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; text-align: center;
}
.xp-cp button:hover, .xp-cp button:focus { outline: 1px dotted #000; background: #316ac533; }
.xp-cp svg { width: 32px; height: 32px; }
.xp-wordpad { height: 100%; display: flex; flex-direction: column; background: var(--client); }
.wp-tb { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #aca899; }
.wp-tb button { min-width: 24px; height: 22px; }
.wp-page {
  flex: 1; margin: 8px auto; width: min(92%, 640px);
  background: #fff; border: 1px solid #aca899; padding: 16px 20px;
  overflow: auto; outline: none; font: 12px 'Times New Roman', serif;
}
.xp-sol { height: 100%; background: #0b6b3a; padding: 8px; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.sol-top { display: flex; gap: 8px; }
.sol-pile { width: 72px; height: 96px; border: 1px dashed #ffffff55; border-radius: 4px; background: #0a5a32; position: relative; }
.sol-card {
  width: 70px; height: 94px; border-radius: 4px; background: #fff; color: #111;
  border: 1px solid #333; position: absolute; font: 700 12px Tahoma; padding: 4px;
  cursor: default; box-shadow: 1px 1px 2px #0005;
}
.sol-card.red { color: #c00; }
.sol-card.back { background: repeating-linear-gradient(45deg, #123a8c, #123a8c 4px, #1d4fb8 4px, #1d4fb8 8px); color: transparent; }
.sol-cols { display: flex; gap: 8px; flex: 1; }
.sol-col { flex: 1; min-height: 120px; position: relative; }
.sol-col .sol-card { left: 0; }

@media (max-width: 720px) {
  .logon-mid { grid-template-columns: 1fr; }
  .logon-split, .logon-left { display: none; }
  #start-menu { width: min(380px, 100%); }
}