body[data-theme="winxp"] {
  background:
    url("https://i.imgur.com/Zk6TR5k.jpeg") center/cover no-repeat,
    linear-gradient(180deg, #5b9bd5, #6dbb40);
  font-family: "Tahoma", "Geneva", sans-serif;
  color: #000;
  overflow: hidden;
  height: 100vh;
}
body[data-theme="winxp"] .profile-root,
body[data-theme="winxp"] .back-link { display: none; }

.xp-desktop {
  position: fixed; inset: 0; padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  grid-auto-rows: 96px;
  gap: 8px;
  align-content: start;
}
.xp-icon {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; padding: 6px; border-radius: 4px;
  user-select: none;
}
.xp-icon:hover { background: rgba(0,80,200,.25); }
.xp-icon.selected { background: rgba(0,80,200,.5); outline: 1px dotted #fff; }
.xp-icon .ico {
  font-size: 36px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}
.xp-icon .lbl {
  color: white; font-size: 11px; text-align: center; margin-top: 4px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.9);
  word-break: break-word; line-height: 1.1;
}

.xp-profile-tile {
  position: fixed; right: 16px; top: 16px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, #ece9d8, #d4d0c8);
  border: 2px solid #0054e3;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.3);
  width: 240px;
  text-align: center;
}
.xp-profile-tile img.avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #0054e3; }
.xp-profile-tile h2 { font-size: 14px; margin: 8px 0 2px; }
.xp-profile-tile .uname { font-size: 11px; color: #555; }
.xp-profile-tile .badges { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:8px; }
.xp-profile-tile .badges .bicon { width: 24px; height: 24px; }
.xp-profile-tile .badge { font-size: 9px; padding: 2px 5px; }

.xp-window {
  position: fixed;
  background: #ece9d8;
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,.4);
  min-width: 320px; min-height: 200px;
  display: flex; flex-direction: column;
  z-index: 100;
}
.xp-window .titlebar {
  background: linear-gradient(180deg, #0058e3 0%, #1a6bd9 50%, #1659c4 100%);
  color: white; padding: 4px 6px;
  display: flex; align-items: center; gap: 6px;
  font-weight: bold; font-size: 12px;
  border-radius: 6px 6px 0 0;
  cursor: move;
  user-select: none;
}
.xp-window .titlebar .title { flex: 1; }
.xp-window .titlebar button {
  width: 22px; height: 20px; padding: 0;
  border: 1px solid #fff; background: linear-gradient(180deg, #f87b7b, #c80000);
  color: white; font-weight: bold; font-size: 12px; line-height: 1;
  border-radius: 3px; cursor: pointer;
}
.xp-window .content { flex: 1; padding: 8px; overflow: auto; background: #fff; font-size: 12px; }

.xp-taskbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(180deg, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #1941a5 100%);
  display: flex; align-items: center; padding: 0;
  z-index: 1000;
  border-top: 1px solid #0831d9;
}
.xp-start {
  background: linear-gradient(180deg, #3c873c, #57a957 50%, #3c873c);
  color: white; font-weight: bold; font-style: italic;
  padding: 4px 22px 4px 38px;
  border: none; height: 100%;
  border-radius: 0 14px 14px 0;
  cursor: pointer; font-size: 14px;
  position: relative;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.xp-start .xp-flag {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
}
.xp-start:hover { filter: brightness(1.15); }
.xp-start:active { filter: brightness(.9); }
.xp-tasks { flex: 1; display: flex; gap: 4px; padding: 0 8px; overflow: hidden; }
.xp-task {
  background: linear-gradient(180deg, #3f8cf3, #245edb);
  color: white; padding: 4px 12px; font-size: 11px;
  border: 1px solid rgba(0,0,0,.3); border-radius: 3px;
  cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xp-task.active { background: linear-gradient(180deg, #1941a5, #2452ba); }
.xp-clock {
  background: linear-gradient(180deg, #0c59c3, #1180e9);
  color: white; padding: 0 12px; height: 100%;
  display: flex; align-items: center; font-size: 11px;
  border-left: 1px solid rgba(0,0,0,.3);
}

/* terminal */
.xp-terminal { background: #000; color: #c0c0c0; font-family: "Consolas", monospace; padding: 8px; height: 100%; }
.xp-terminal .out { white-space: pre-wrap; word-break: break-word; }
.xp-terminal .input-line { display: flex; }
.xp-terminal .input-line .prompt { color: #c0c0c0; }
.xp-terminal input {
  flex: 1; background: transparent; border: none; color: #c0c0c0;
  font-family: inherit; font-size: inherit; outline: none;
}

/* minesweeper */
.ms-board { display: inline-block; background: #c0c0c0; padding: 6px; border: 2px outset #fff; }
.ms-row { display: flex; }
.ms-cell {
  width: 22px; height: 22px;
  background: #c0c0c0; border: 2px outset #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 12px; cursor: pointer; user-select: none;
}
.ms-cell.open { border: 1px solid #888; background: #d4d4d4; cursor: default; }
.ms-cell.flag { color: red; }
.ms-cell.mine { background: red; }
.ms-cell .n1 { color: #0000ff; }
.ms-cell .n2 { color: #008000; }
.ms-cell .n3 { color: #ff0000; }
.ms-cell .n4 { color: #000080; }
.ms-cell .n5 { color: #800000; }
.ms-cell .n6 { color: #008080; }
.ms-cell .n7 { color: #000; }
.ms-cell .n8 { color: #808080; }
.ms-status { padding: 8px; font-family: "Consolas", monospace; }
.ms-status button { margin-left: 8px; }

/* notepad */
.xp-notepad textarea {
  width: 100%; height: 100%; min-height: 250px;
  border: none; outline: none; resize: none;
  font-family: "Lucida Console", monospace; font-size: 13px;
}

/* doom placeholder */
.xp-doom { background:#000; color:#fff; padding:16px; height:100%; font-family:monospace; }
.xp-doom code { background:#222; padding:2px 6px; border-radius:3px; }

/* audio visualizer (XP-style) */
.xp-visualizer {
  position: fixed; left: 16px; bottom: 38px;
  width: 200px; height: 60px;
  background: rgba(0,0,0,.6);
  border: 2px solid #0058e3;
  border-radius: 4px;
  padding: 4px;
  display: flex; align-items: flex-end; gap: 2px;
  z-index: 50;
}
.xp-visualizer .bar {
  flex: 1; background: linear-gradient(180deg, #57a957, #0058e3);
  min-height: 2px;
  transition: height .05s linear;
}
.xp-profile-tile {
  transform: scale(calc(1 + 0.04 * var(--beat, 0)));
  transition: transform .08s linear;
  box-shadow: 4px 4px 0 rgba(0,0,0,.3), 0 0 calc(40px * var(--bass, 0)) rgba(0,128,255,.6);
}