/* ==========================================================================
   MICROSOFT WINDOWS XP (LUNA BLUE EDITION) DESIGN SYSTEM
   Authentic 2001 Windows XP Professional Desktop Environment
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Tokens & Fonts
   -------------------------------------------------------------------------- */
:root {
  /* Luna Blue Palette (Default XP) */
  --xp-blue-primary: #0055ea;
  --xp-blue-dark: #002d96;
  --xp-blue-taskbar-top: #245edb;
  --xp-blue-taskbar-bot: #1941a5;
  --xp-blue-tray: #092881;
  --xp-blue-sidebar-head: #215dc6;
  --xp-blue-sidebar-body: #d6dff7;
  --xp-blue-sidebar-border: #6b94e7;
  --xp-start-green-top: #388e3c;
  --xp-start-green-bot: #1b5e20;
  --xp-start-green-glow: #66bb6a;
  --xp-red-close: #d7452a;
  --xp-red-close-hover: #e05638;
  --xp-window-bg: #ece9d8;
  --xp-window-border: #0055ea;
  --xp-menu-right: #d3e5fa;
  --xp-highlight: #316ac5;
  --xp-highlight-text: #ffffff;

  /* Theme Dynamic Variables (Default Luna Blue) */
  --xp-taskbar-bg: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #1941a5 92%, #1941a5 100%);
  --xp-taskbar-border: #458bf6;
  --xp-start-bg: linear-gradient(to bottom, #43a047 0%, #66bb6a 12%, #43a047 25%, #2e7d32 85%, #1b5e20 100%);
  --xp-start-hover: linear-gradient(to bottom, #4caf50 0%, #81c784 12%, #4caf50 25%, #388e3c 85%, #2e7d32 100%);
  --xp-start-active: linear-gradient(to bottom, #1b5e20 0%, #2e7d32 40%, #43a047 100%);
  --xp-tray-bg: linear-gradient(to bottom, #0c329b 0%, #1240b5 18%, #1749c4 40%, #0d35a1 100%);
  --xp-tray-border: #133ea3;
  --xp-win-border: #0055ea;
  --xp-win-border-inactive: #7697d9;
  --xp-titlebar-bg: linear-gradient(to bottom, #0058ee 0%, #3593ff 4%, #288eff 6%, #127dff 8%, #036ffc 10%, #0262ee 14%, #0057e5 20%, #0054e3 40%, #0055e7 60%, #004bdc 80%, #003dd2 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #7697d9 0%, #8eafe8 10%, #7697d9 100%);
  --xp-titlebar-color: #ffffff;
  --xp-titlebar-inactive-color: #d6e2f7;
  --xp-titlebar-shadow: #001f66;
  --xp-menu-header-bg: linear-gradient(to bottom, #1d5bd6 0%, #2f73ed 15%, #1c5cd8 75%, #1852c4 100%);
  --xp-menu-header-border: #e58b19;
  --xp-menu-right-bg: #d3e5fa;
  --xp-menu-right-border: #9bbfe6;
  --xp-taskbtn-bg: linear-gradient(to bottom, #3c81f0 0%, #2264d8 50%, #1a51ba 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #5495fa 0%, #3075e8 50%, #2061cc 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #163d91 0%, #1e4ea8 50%, #2a61c4 100%);
  --xp-taskbtn-border: #103c94;

  /* System Typography */
  --xp-font: 'Segoe UI', Tahoma, 'Trebuchet MS', Arial, sans-serif;
  --xp-font-bold: 'Segoe UI Bold', Tahoma, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Theme Presets (Dynamic Live Hover Switching)
   -------------------------------------------------------------------------- */

/* Theme 1: Luna Blue */
body.theme-luna {
  --xp-taskbar-bg: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #1941a5 92%, #1941a5 100%);
  --xp-taskbar-border: #458bf6;
  --xp-start-bg: linear-gradient(to bottom, #43a047 0%, #66bb6a 12%, #43a047 25%, #2e7d32 85%, #1b5e20 100%);
  --xp-start-hover: linear-gradient(to bottom, #4caf50 0%, #81c784 12%, #4caf50 25%, #388e3c 85%, #2e7d32 100%);
  --xp-start-active: linear-gradient(to bottom, #1b5e20 0%, #2e7d32 40%, #43a047 100%);
  --xp-tray-bg: linear-gradient(to bottom, #0c329b 0%, #1240b5 18%, #1749c4 40%, #0d35a1 100%);
  --xp-tray-border: #133ea3;
  --xp-win-border: #0055ea;
  --xp-win-border-inactive: #7697d9;
  --xp-titlebar-bg: linear-gradient(to bottom, #0058ee 0%, #3593ff 4%, #288eff 6%, #127dff 8%, #036ffc 10%, #0262ee 14%, #0057e5 20%, #0054e3 40%, #0055e7 60%, #004bdc 80%, #003dd2 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #7697d9 0%, #8eafe8 10%, #7697d9 100%);
  --xp-titlebar-color: #ffffff;
  --xp-titlebar-inactive-color: #d6e2f7;
  --xp-titlebar-shadow: #001f66;
  --xp-menu-header-bg: linear-gradient(to bottom, #1d5bd6 0%, #2f73ed 15%, #1c5cd8 75%, #1852c4 100%);
  --xp-menu-header-border: #e58b19;
  --xp-menu-right-bg: #d3e5fa;
  --xp-menu-right-border: #9bbfe6;
  --xp-taskbtn-bg: linear-gradient(to bottom, #3c81f0 0%, #2264d8 50%, #1a51ba 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #5495fa 0%, #3075e8 50%, #2061cc 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #163d91 0%, #1e4ea8 50%, #2a61c4 100%);
  --xp-taskbtn-border: #103c94;
  --xp-highlight: #316ac5;
}

/* Theme 2: Olive Green (Homestead) */
body.theme-olive {
  --xp-taskbar-bg: linear-gradient(to bottom, #8ea162 0%, #b2c982 9%, #8ea162 18%, #5d743a 92%, #4d6030 100%);
  --xp-taskbar-border: #b0c685;
  --xp-start-bg: linear-gradient(to bottom, #cf7d2c 0%, #e89945 12%, #cf7d2c 25%, #9b5413 85%, #7a3d07 100%);
  --xp-start-hover: linear-gradient(to bottom, #dc8d3c 0%, #f4aa58 12%, #dc8d3c 25%, #ac621d 85%, #8c470d 100%);
  --xp-start-active: linear-gradient(to bottom, #7a3d07 0%, #9b5413 40%, #cf7d2c 100%);
  --xp-tray-bg: linear-gradient(to bottom, #475b28 0%, #566e31 18%, #637f39 40%, #445826 100%);
  --xp-tray-border: #52692e;
  --xp-win-border: #789048;
  --xp-win-border-inactive: #a6b587;
  --xp-titlebar-bg: linear-gradient(to bottom, #879f5e 0%, #b2cb86 4%, #9eb774 8%, #8ea162 20%, #768d4d 50%, #5d743a 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #a3b586 0%, #b8c99e 10%, #a3b586 100%);
  --xp-titlebar-color: #ffffff;
  --xp-titlebar-inactive-color: #e4ead8;
  --xp-titlebar-shadow: #2d3c16;
  --xp-menu-header-bg: linear-gradient(to bottom, #7a934e 0%, #9cb56d 15%, #7a934e 75%, #5e7638 100%);
  --xp-menu-header-border: #d48e28;
  --xp-menu-right-bg: #e7ebd4;
  --xp-menu-right-border: #bccba5;
  --xp-taskbtn-bg: linear-gradient(to bottom, #9eb673 0%, #7c9550 50%, #68823f 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #b2cb86 0%, #90aa62 50%, #769049 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #4f6330 0%, #5c7438 50%, #6f8a44 100%);
  --xp-taskbtn-border: #445628;
  --xp-highlight: #708a46;
}

/* Theme 3: Metallic Silver */
body.theme-silver {
  --xp-taskbar-bg: linear-gradient(to bottom, #d4d0c8 0%, #eae8e2 9%, #cdc9c0 18%, #9e9a90 92%, #827e74 100%);
  --xp-taskbar-border: #f0eee8;
  --xp-start-bg: linear-gradient(to bottom, #508068 0%, #70a28a 12%, #508068 25%, #355845 85%, #244030 100%);
  --xp-start-hover: linear-gradient(to bottom, #5c9276 0%, #7fb39b 12%, #5c9276 25%, #3f6852 85%, #2a4c39 100%);
  --xp-start-active: linear-gradient(to bottom, #244030 0%, #355845 40%, #508068 100%);
  --xp-tray-bg: linear-gradient(to bottom, #726e64 0%, #858177 18%, #969288 40%, #6b675d 100%);
  --xp-tray-border: #646056;
  --xp-win-border: #807c74;
  --xp-win-border-inactive: #b8b4ac;
  --xp-titlebar-bg: linear-gradient(to bottom, #d8d6d0 0%, #f4f2ec 4%, #e2e0d8 8%, #cdc9c0 20%, #a8a49a 60%, #8c887e 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #c8c6c0 0%, #dbd9d2 10%, #c8c6c0 100%);
  --xp-titlebar-color: #222222;
  --xp-titlebar-inactive-color: #666666;
  --xp-titlebar-shadow: rgba(255,255,255,0.7);
  --xp-menu-header-bg: linear-gradient(to bottom, #b4b0a8 0%, #d4d0c8 15%, #aba69c 75%, #8a867c 100%);
  --xp-menu-header-border: #7a766c;
  --xp-menu-right-bg: #eae8e2;
  --xp-menu-right-border: #c0bcb2;
  --xp-taskbtn-bg: linear-gradient(to bottom, #dedbd4 0%, #b8b4ac 50%, #a29e94 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #eeebe4 0%, #c8c4bc 50%, #b2aea4 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #747169 0%, #86827a 50%, #98948c 100%);
  --xp-taskbtn-border: #626058;
  --xp-highlight: #747169;
}

/* Theme 4: Royale / Energy Blue */
body.theme-royale {
  --xp-taskbar-bg: linear-gradient(to bottom, #2358b8 0%, #4682ea 9%, #2358b8 18%, #14357a 92%, #0e2862 100%);
  --xp-taskbar-border: #4d8df8;
  --xp-start-bg: linear-gradient(to bottom, #109848 0%, #20c868 12%, #109848 25%, #08682e 85%, #054e22 100%);
  --xp-start-hover: linear-gradient(to bottom, #18b256 0%, #30dc7a 12%, #18b256 25%, #0c7e38 85%, #085e2a 100%);
  --xp-start-active: linear-gradient(to bottom, #054e22 0%, #08682e 40%, #109848 100%);
  --xp-tray-bg: linear-gradient(to bottom, #091f4d 0%, #0e2d6b 18%, #123882 40%, #081a42 100%);
  --xp-tray-border: #143780;
  --xp-win-border: #1d4fa8;
  --xp-win-border-inactive: #6b8ecf;
  --xp-titlebar-bg: linear-gradient(to bottom, #2762d0 0%, #5294f8 4%, #3a7cf0 8%, #205ac6 20%, #1745a0 50%, #0f327c 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #678ccd 0%, #87a9e5 10%, #678ccd 100%);
  --xp-titlebar-color: #ffffff;
  --xp-titlebar-inactive-color: #d8e5f8;
  --xp-titlebar-shadow: #0b1f48;
  --xp-menu-header-bg: linear-gradient(to bottom, #1a4da6 0%, #3275e0 15%, #18489c 75%, #0f3278 100%);
  --xp-menu-header-border: #1cb556;
  --xp-menu-right-bg: #dbe7fa;
  --xp-menu-right-border: #92b7ef;
  --xp-taskbtn-bg: linear-gradient(to bottom, #3978e8 0%, #1e56be 50%, #144299 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #508bf2 0%, #2a64cc 50%, #1a4ea8 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #0f2c6e 0%, #153c8f 50%, #1e4ea8 100%);
  --xp-taskbtn-border: #0a2052;
  --xp-highlight: #1d4fa8;
}

/* Theme 5: Windows Classic */
body.theme-classic {
  --xp-taskbar-bg: #d4d0c8;
  --xp-taskbar-border: #ffffff;
  --xp-start-bg: #d4d0c8;
  --xp-start-hover: #e0ded8;
  --xp-start-active: #b5b1a8;
  --xp-tray-bg: #d4d0c8;
  --xp-tray-border: #808080;
  --xp-win-border: #d4d0c8;
  --xp-win-border-inactive: #d4d0c8;
  --xp-titlebar-bg: linear-gradient(to right, #0a246a 0%, #a6caf0 100%);
  --xp-titlebar-inactive: linear-gradient(to right, #808080 0%, #b5b5b5 100%);
  --xp-titlebar-color: #ffffff;
  --xp-titlebar-inactive-color: #d4d0c8;
  --xp-titlebar-shadow: none;
  --xp-menu-header-bg: #0a246a;
  --xp-menu-header-border: #d4d0c8;
  --xp-menu-right-bg: #d4d0c8;
  --xp-menu-right-border: #808080;
  --xp-taskbtn-bg: #d4d0c8;
  --xp-taskbtn-hover: #e0ded8;
  --xp-taskbtn-active: #b5b1a8;
  --xp-taskbtn-border: #808080;
  --xp-highlight: #0a246a;
}
body.theme-classic .xp-start-btn {
  border-radius: 2px !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #404040 !important;
  border-bottom: 2px solid #404040 !important;
  box-shadow: none !important;
}
body.theme-classic .xp-start-btn span {
  color: #000000 !important;
  font-style: normal !important;
  text-shadow: none !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: bold !important;
}
body.theme-classic .xp-window {
  border-radius: 0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #404040 !important;
  border-bottom: 2px solid #404040 !important;
}
body.theme-classic .xp-titlebar {
  border-radius: 0 !important;
}

/* Theme 6: Zune Dark / Noir */
body.theme-zune {
  --xp-taskbar-bg: linear-gradient(to bottom, #2e2e2e 0%, #3e3e3e 9%, #292929 18%, #141414 92%, #0a0a0a 100%);
  --xp-taskbar-border: #4a4a4a;
  --xp-start-bg: linear-gradient(to bottom, #e65100 0%, #ff6d00 12%, #e65100 25%, #bf360c 85%, #8d2400 100%);
  --xp-start-hover: linear-gradient(to bottom, #f57c00 0%, #ff9100 12%, #f57c00 25%, #d84315 85%, #a52b00 100%);
  --xp-start-active: linear-gradient(to bottom, #8d2400 0%, #bf360c 40%, #e65100 100%);
  --xp-tray-bg: linear-gradient(to bottom, #111111 0%, #1a1a1a 18%, #242424 40%, #0d0d0d 100%);
  --xp-tray-border: #242424;
  --xp-win-border: #333333;
  --xp-win-border-inactive: #4f4f4f;
  --xp-titlebar-bg: linear-gradient(to bottom, #303030 0%, #4a4a4a 4%, #383838 8%, #262626 20%, #1c1c1c 50%, #0d0d0d 100%);
  --xp-titlebar-inactive: linear-gradient(to bottom, #444444 0%, #585858 10%, #444444 100%);
  --xp-titlebar-color: #f0f0f0;
  --xp-titlebar-inactive-color: #999999;
  --xp-titlebar-shadow: #000000;
  --xp-menu-header-bg: linear-gradient(to bottom, #242424 0%, #3a3a3a 15%, #242424 75%, #141414 100%);
  --xp-menu-header-border: #e65100;
  --xp-menu-right-bg: #292929;
  --xp-menu-right-border: #3d3d3d;
  --xp-taskbtn-bg: linear-gradient(to bottom, #3d3d3d 0%, #292929 50%, #1c1c1c 100%);
  --xp-taskbtn-hover: linear-gradient(to bottom, #4d4d4d 0%, #363636 50%, #262626 100%);
  --xp-taskbtn-active: linear-gradient(to bottom, #101010 0%, #181818 50%, #202020 100%);
  --xp-taskbtn-border: #0d0d0d;
  --xp-highlight: #e65100;
}
body.theme-zune .xp-col-right {
  color: #eeeeee;
}
body.theme-zune .xp-col-right .item-title {
  color: #ffffff;
}
body.theme-zune .xp-col-right .xp-menu-item:hover {
  background: #e65100;
  color: #ffffff !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--xp-font);
  font-size: 11px;
  background-color: #000000;
}

/* --------------------------------------------------------------------------
   2. Desktop Shell & Bliss Wallpaper
   -------------------------------------------------------------------------- */
#xp-desktop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30px; /* Space for taskbar */
  background: #245edb url('../wallpaper/bliss.webp') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
}

/* Clean Desktop: Recycle Bin in bottom-right corner */
.desktop-trash-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  text-align: center;
}

.desktop-trash-icon:hover {
  background: rgba(49, 106, 197, 0.35);
}

.desktop-trash-icon.selected {
  background: rgba(49, 106, 197, 0.6);
}

.desktop-trash-icon img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.6));
}

.desktop-trash-icon span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  text-shadow: 1px 1px 2px #000000, 0 0 4px #000000;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. Luna Blue Taskbar
   -------------------------------------------------------------------------- */
#xp-taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 30px;
  background: var(--xp-taskbar-bg);
  border-top: 1px solid var(--xp-taskbar-border);
  display: flex;
  align-items: center;
  z-index: 99999;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
}

/* Iconic Green 'start' Button */
.xp-start-btn {
  height: 100%;
  background: var(--xp-start-bg);
  border: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 8px;
  cursor: pointer;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.5), 2px 0 4px rgba(0, 0, 0, 0.4);
  position: relative;
  outline: none;
}

.xp-start-btn:hover {
  background: var(--xp-start-hover);
}

.xp-start-btn:active, .xp-start-btn.pressed {
  background: var(--xp-start-active);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.xp-start-btn img {
  width: 18px;
  height: 18px;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

.xp-start-btn span {
  color: #ffffff;
  font-family: 'Trebuchet MS', Tahoma, sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  text-shadow: 1px 1px 2px #0f3e12;
  letter-spacing: 0.5px;
}

/* Quick Launch Toolbar */
.xp-quick-launch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  height: 22px;
  margin-left: 4px;
}

.xp-quick-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
}

.xp-quick-icon:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.6);
}

.xp-quick-icon img {
  width: 16px;
  height: 16px;
}

/* Taskbar Open Windows Container */
.xp-task-list {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  height: 100%;
  overflow-x: auto;
}

.xp-task-btn {
  height: 24px;
  min-width: 120px;
  max-width: 160px;
  background: var(--xp-taskbtn-bg);
  border: 1px solid var(--xp-taskbtn-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
  color: #ffffff;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.xp-task-btn:hover {
  background: var(--xp-taskbtn-hover);
}

.xp-task-btn.active {
  background: var(--xp-taskbtn-active);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.7);
  border-color: var(--xp-taskbtn-border);
}

.xp-task-btn img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Notification Area (System Tray) */
.xp-system-tray {
  height: 100%;
  background: var(--xp-tray-bg);
  border-left: 1px solid var(--xp-tray-border);
  box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.xp-tray-chevron {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1952d4;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  border: 1px solid #3d79f5;
}

.xp-tray-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.xp-tray-clock {
  color: #ffffff;
  font-size: 11px;
  text-shadow: 1px 1px 1px #000000;
  margin-left: 4px;
}

/* --------------------------------------------------------------------------
   4. Authentic Two-Column Windows XP Start Menu
   -------------------------------------------------------------------------- */
#xp-start-menu {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 380px;
  background: #ffffff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  z-index: 100000;
  overflow: visible;
  border: 1px solid #002d96;
}

#xp-start-menu.open {
  display: flex;
}

/* Header Banner */
.xp-menu-header {
  height: 60px;
  background: var(--xp-menu-header-bg);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid var(--xp-menu-header-border);
}

.xp-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  object-fit: cover;
}

.xp-user-name {
  color: #ffffff;
  font-family: var(--xp-font);
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #092a74;
}

/* Two Columns Container */
.xp-menu-body {
  display: flex;
  background: #ffffff;
}

/* Left Column: Pinned / Frequent Programs */
.xp-col-left {
  width: 53%;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.xp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  position: relative;
}

.xp-menu-item:hover {
  background: #316ac5;
  color: #ffffff !important;
}

.xp-menu-item:hover .item-title,
.xp-menu-item:hover .item-subtitle {
  color: #ffffff !important;
}

.xp-menu-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.xp-menu-item .item-texts {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xp-menu-item .item-title {
  font-weight: bold;
  font-size: 11px;
  color: #000000;
}

.xp-menu-item .item-subtitle {
  font-size: 10px;
  color: #666666;
}

.xp-menu-sep {
  height: 1px;
  background: #e0e0e0;
  margin: 5px 8px;
}

/* All Programs Button */
.xp-all-programs {
  margin-top: auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: bold;
  font-size: 12px;
  border-top: 1px solid #dcdcdc;
  cursor: pointer;
  background: #ffffff;
}

.xp-all-programs:hover {
  background: #316ac5;
  color: #ffffff;
}

.xp-all-programs:hover .green-arrow {
  color: #ffffff;
}

.green-arrow {
  color: #2e7d32;
  font-size: 14px;
}

/* Right Column: System Places */
.xp-col-right {
  width: 47%;
  background: var(--xp-menu-right-bg);
  border-left: 1px solid var(--xp-menu-right-border);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}

.xp-col-right .xp-menu-item {
  padding: 5px 10px;
  gap: 8px;
}

.xp-col-right .xp-menu-item img {
  width: 22px;
  height: 22px;
}

.xp-col-right .item-title {
  font-size: 11px;
  font-weight: normal;
  color: inherit;
}

.xp-col-right .item-title.bold {
  font-weight: bold;
}

.xp-col-right .xp-menu-sep {
  background: #afcceb;
}

/* Bottom Footer Bar */
.xp-menu-footer {
  height: 42px;
  background: linear-gradient(to bottom, #1f65de 0%, #2f7cf4 15%, #1c5cd8 75%, #1852c4 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 14px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.xp-footer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--xp-font);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
}

.xp-footer-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.xp-footer-btn img {
  width: 18px;
  height: 18px;
}

/* All Programs Flyout Submenu */
.xp-programs-menu {
  position: absolute;
  left: 379px;
  bottom: 0;
  width: 270px;
  background: #ffffff;
  border: 1px solid #002d96;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  padding: 4px 0 6px 0;
  z-index: 100001;
}

.xp-programs-menu.open {
  display: flex;
}

.xp-flyout-sep {
  height: 1px;
  background: #d8dfea;
  margin: 6px 10px;
}

.xp-flyout-heading {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #707070;
  padding: 4px 14px 2px 14px;
  user-select: none;
}

.xp-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  color: #222222;
  transition: background 0.08s ease, color 0.08s ease;
}

.xp-flyout-item:hover {
  background: #316ac5;
  color: #ffffff !important;
}

.xp-flyout-item:hover * {
  color: #ffffff !important;
}

.xp-flyout-item img {
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  flex-shrink: 0;
}

.xp-flyout-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.xp-flyout-label {
  flex: 1;
  white-space: nowrap;
  font-weight: normal;
  color: inherit;
}

.xp-edition-link .xp-flyout-label {
  font-weight: 600;
  color: #0c327d;
}

.xp-flyout-item .arrow-right {
  font-size: 10px;
  color: #888888;
  margin-left: auto;
}

.xp-flyout-item:hover .arrow-right {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. Windows XP Luna Blue Window Chassis
   -------------------------------------------------------------------------- */
.xp-window {
  position: absolute;
  background: var(--xp-window-bg);
  border: 3px solid var(--xp-win-border);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.xp-window:not(.active) {
  border-color: var(--xp-win-border-inactive);
}

/* Titlebar */
.xp-titlebar {
  height: 28px;
  background: var(--xp-titlebar-bg);
  color: var(--xp-titlebar-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 8px;
  cursor: default;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.xp-window:not(.active) .xp-titlebar {
  background: var(--xp-titlebar-inactive);
  color: var(--xp-titlebar-inactive-color);
}

.xp-titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 2px var(--xp-titlebar-shadow);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xp-titlebar-left img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.xp-window-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.xp-ctrl-btn {
  width: 21px;
  height: 21px;
  border-radius: 3px;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.xp-btn-min, .xp-btn-max {
  background: linear-gradient(to bottom, #3980f4 0%, #1555c9 100%);
}

.xp-btn-min:hover, .xp-btn-max:hover {
  background: linear-gradient(to bottom, #5093fa 0%, #2065e0 100%);
}

.xp-btn-close {
  background: linear-gradient(to bottom, #e2583e 0%, #d7452a 50%, #b82b13 100%);
  border-color: #ffffff;
}

.xp-btn-close:hover {
  background: linear-gradient(to bottom, #fa6d52 0%, #e65135 50%, #cf351b 100%);
}

/* Menubar */
.xp-menubar {
  display: flex;
  background: #ece9d8;
  border-bottom: 1px solid #dcdcdc;
  padding: 2px 4px;
}

.xp-menubar-item {
  padding: 3px 7px;
  cursor: pointer;
  color: #000000;
}

.xp-menubar-item:hover {
  background: #316ac5;
  color: #ffffff;
}

/* Toolbar */
.xp-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #ece9d8;
  padding: 3px 6px;
  border-bottom: 1px solid #c0c0c0;
  flex-wrap: wrap;
}

.xp-tb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.xp-tb-btn:hover {
  border-color: #316ac5;
  background: rgba(49, 106, 197, 0.15);
}

.xp-tb-btn img {
  width: 18px;
  height: 18px;
}

/* Address Bar */
.xp-addressbar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ece9d8;
  padding: 3px 8px;
  border-bottom: 1px solid #999999;
}

.xp-address-label {
  color: #666666;
  font-size: 11px;
}

.xp-address-input {
  flex: 1;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #7f9db9;
  background: #ffffff;
  font-family: var(--xp-font);
  font-size: 11px;
  outline: none;
}

.xp-go-btn {
  background: linear-gradient(to bottom, #4caf50 0%, #2e7d32 100%);
  color: #ffffff;
  border: 1px solid #1b5e20;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   6. Windows Explorer Split-Pane with Collapsible Tasks
   -------------------------------------------------------------------------- */
.xp-explorer-body {
  flex: 1;
  display: flex;
  background: #ffffff;
  overflow: hidden;
}

/* Left Sidebar (Blue Tasks Pane) */
.xp-tasks-sidebar {
  width: 190px;
  background: linear-gradient(to bottom, #7ba2e7 0%, #6375d6 100%);
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #6b94e7;
}

.xp-task-box {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.xp-task-box-header {
  background: linear-gradient(to right, #215dc6 0%, #638ae6 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.xp-task-box-content {
  background: #d6dff7;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0c327d;
  text-decoration: none;
  cursor: pointer;
  font-size: 11px;
}

.xp-sidebar-link:hover {
  text-decoration: underline;
  color: #2b72e3;
}

.xp-sidebar-link img {
  width: 16px;
  height: 16px;
}

/* Right Content View (Folder View) */
.xp-file-view {
  flex: 1;
  background: #ffffff;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xp-section-title {
  font-weight: bold;
  font-size: 12px;
  color: #000000;
  border-bottom: 1px solid #b0bec5;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.xp-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px 10px;
}

.xp-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}

.xp-grid-item:hover {
  background: #e3efff;
}

.xp-grid-item.selected {
  background: #316ac5;
  color: #ffffff;
}

.xp-grid-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.xp-grid-item span {
  font-size: 11px;
  line-height: 1.2;
  word-break: break-word;
}

/* Status Bar */
.xp-statusbar {
  height: 22px;
  background: #ece9d8;
  border-top: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: #444444;
}

/* --------------------------------------------------------------------------
   7. Themed XP Modal Dialogs
   -------------------------------------------------------------------------- */
.xp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-modal {
  width: 360px;
  background: #ece9d8;
  border: 3px solid #0055ea;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.xp-modal-body {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.xp-modal-footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #ece9d8;
  border-top: 1px solid #dcdcdc;
}

.xp-btn {
  padding: 4px 16px;
  border-radius: 3px;
  border: 1px solid #003c74;
  background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 50%, #d8d4c4 100%);
  cursor: pointer;
  font-family: var(--xp-font);
  font-size: 11px;
  font-weight: 500;
  outline: none;
}

.xp-btn:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #f4f2e8 50%, #e8e4d6 100%);
  border-color: #0055ea;
}

.xp-btn.primary {
  border: 2px solid #0055ea;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   14. Control Panel Theme & Appearance Live Hover Preview System
   -------------------------------------------------------------------------- */
.xp-cpanel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ece9d8;
  overflow: hidden;
}

.xp-cpanel-banner {
  background: linear-gradient(to right, #0a246a 0%, #a6caf0 100%);
  color: #ffffff;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #7f9db9;
}

.xp-cpanel-banner-title {
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xp-cpanel-banner-sub {
  font-size: 11px;
  color: #d6e2f7;
}

.xp-cpanel-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.xp-theme-section {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.xp-theme-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.xp-theme-section-title {
  font-weight: bold;
  font-size: 12px;
  color: #0c327d;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xp-theme-section-hint {
  font-size: 10px;
  color: #666666;
  font-style: italic;
}

.xp-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.xp-theme-card {
  background: #fcfcfc;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.xp-theme-card:hover {
  transform: translateY(-2px);
  border-color: #316ac5;
  box-shadow: 0 4px 10px rgba(49, 106, 197, 0.3);
  background: #f5f9ff;
}

.xp-theme-card.active {
  border: 2px solid #316ac5;
  background: #ebf3fd;
  box-shadow: 0 2px 6px rgba(49, 106, 197, 0.25);
}

.xp-theme-card-preview {
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #888888;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.xp-theme-card-titlebar {
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 9px;
  font-weight: bold;
  color: #ffffff;
}

.xp-theme-card-body {
  flex: 1;
  background: #ece9d8;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.xp-theme-card-taskbar {
  width: 100%;
  height: 14px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 3px;
}

.xp-theme-card-start {
  height: 10px;
  width: 26px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: bold;
  color: #ffffff;
}

.xp-theme-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xp-theme-card-name {
  font-weight: bold;
  font-size: 11px;
  color: #0c327d;
}

.xp-theme-card-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
}

.xp-theme-card.active .xp-theme-card-badge {
  background: #316ac5;
  color: #ffffff;
}

.xp-theme-card:not(.active) .xp-theme-card-badge {
  background: #e8e8e8;
  color: #777777;
}

.xp-theme-card:hover:not(.active) .xp-theme-card-badge {
  background: #4caf50;
  color: #ffffff;
}

.xp-theme-card-desc {
  font-size: 10px;
  color: #555555;
  line-height: 1.25;
}

/* Wallpaper Cards */
.xp-wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.xp-wallpaper-card {
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  padding: 6px;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.xp-wallpaper-card:hover {
  border-color: #316ac5;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.xp-wallpaper-card.active {
  border: 2px solid #316ac5;
  background: #ebf3fd;
}

.xp-wallpaper-thumb {
  height: 48px;
  border-radius: 2px;
  border: 1px solid #7f9db9;
  background-size: cover;
  background-position: center;
}

.xp-wallpaper-title {
  font-size: 10px;
  font-weight: bold;
  color: #0c327d;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Start Menu Control Panel Flyout Submenu */
.xp-cpanel-menu {
  position: absolute;
  left: 379px;
  bottom: 60px;
  width: 275px;
  background: #ffffff;
  border: 1px solid #002d96;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  padding: 4px 0 6px 0;
  z-index: 100001;
}

.xp-cpanel-menu.open {
  display: flex;
}

.xp-cpanel-menu-header {
  padding: 6px 14px;
  background: #eef3fa;
  border-bottom: 1px solid #c0d3eb;
  font-size: 10px;
  font-weight: bold;
  color: #0c327d;
  letter-spacing: 0.3px;
}

/* Theme preview mini swatches */
.xp-theme-swatch,
.xp-theme-dot {
  width: 22px;
  height: 14px;
  min-width: 22px;
  max-width: 22px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  display: inline-block;
  flex-shrink: 0;
}

.swatch-luna {
  background: linear-gradient(135deg, #0058ee 0%, #245edb 50%, #43a047 100%);
}

.swatch-olive {
  background: linear-gradient(135deg, #879f5e 0%, #5d743a 50%, #cf7d2c 100%);
}

.swatch-silver {
  background: linear-gradient(135deg, #e8e7e3 0%, #a8a49c 50%, #508068 100%);
}

.swatch-royale {
  background: linear-gradient(135deg, #2762d0 0%, #0f327c 50%, #109848 100%);
}

.swatch-classic {
  background: linear-gradient(135deg, #0a246a 0%, #0a246a 45%, #d4d0c8 46%, #d4d0c8 100%);
}

.swatch-zune {
  background: linear-gradient(135deg, #282828 0%, #1a1a1a 50%, #ff6d00 100%);
}

.xp-theme-check {
  display: none;
  font-size: 11px;
  font-weight: bold;
  margin-left: auto;
  color: #0055ea;
  padding-left: 6px;
}

.xp-flyout-item.active-theme .xp-theme-check {
  display: inline-block;
}

.xp-flyout-item.active-theme .xp-flyout-label {
  font-weight: bold;
}

.xp-flyout-item:hover .xp-theme-check {
  color: #ffffff !important;
}