/* ===========================
   Windows XP – Luna Theme CSS
   =========================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --xp-blue:        #0054e3;
  --xp-blue-light:  #2488ff;
  --xp-blue-dark:   #0039b8;
  --xp-taskbar:     #1252a3;
  --xp-taskbar-end: #2a7ed3;
  --xp-silver:      #ece9d8;
  --xp-silver-dark: #d4d0c8;
  --xp-silver-border: #919b9c;
  --xp-titlebar-active-start: #0a246a;
  --xp-titlebar-active-mid:   #2979d0;
  --xp-titlebar-active-end:   #0a246a;
  --xp-titlebar-inactive:     #7a96df;
  --xp-green-start:  #3c9a00;
  --xp-green-end:    #4ec200;
  --xp-start-btn-shadow: #1e6e00;
  --font: Tahoma, 'Segoe UI', Verdana, sans-serif;
  --font-size: 11px;
  --taskbar-height: 30px;
}

/* ── Body / Desktop ──────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--font-size);
  user-select: none;
}

#desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-height) 0;
  background: #3c6e3f url('../data/wallpaper.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* ── Desktop Icons area ──────────────────────────── */
#desktop-icons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px 6px;
  height: 100%;
  pointer-events: none;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  padding: 4px;
  border-radius: 3px;
  cursor: default;
  pointer-events: all;
  border: 1px solid transparent;
  text-align: center;
}

.desktop-icon:hover {
  background: rgba(49, 105, 229, 0.3);
  border-color: rgba(49, 105, 229, 0.5);
}

.desktop-icon.selected {
  background: rgba(49, 105, 229, 0.5);
  border-color: rgba(100, 150, 240, 0.8);
}

.desktop-icon .icon-img {
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-icon .icon-img svg {
  width: 32px;
  height: 32px;
}

.desktop-icon .icon-label {
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  text-shadow: 1px 1px 2px #000, -1px -1px 1px #000;
  word-break: break-word;
  max-width: 68px;
}

/* ── Taskbar ─────────────────────────────────────── */
#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--taskbar-height);
  background: linear-gradient(180deg,
    #245edb 0%, #3a76d2 8%, #2355c9 45%,
    #1a48b8 46%, #1e52c6 100%);
  display: flex;
  align-items: center;
  z-index: 9000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  border-top: 1px solid #0a246a;
}

/* ── Start Button ────────────────────────────────── */
#start-btn {
  height: 36px;
  margin-top: -3px;
  padding: 0 12px 0 8px;
  background: linear-gradient(180deg,
    #5fbb28 0%, #6bcc2e 6%,
    #56a422 44%, #4a9018 45%,
    #4e9a1c 90%, #3e8010 100%);
  border: none;
  border-radius: 0 10px 10px 0;
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 9001;
  flex-shrink: 0;
}

#start-btn:hover {
  background: linear-gradient(180deg,
    #72d030 0%, #7ee040 6%,
    #65b828 44%, #58a01e 45%,
    #5aaa22 90%, #4a9014 100%);
}

#start-btn:active, #start-btn.active {
  background: linear-gradient(180deg,
    #4a9018 0%, #56a422 10%,
    #4a9018 100%);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.start-orb {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quick launch divider */
.taskbar-divider {
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), transparent);
  margin: 0 3px;
  border-left: 1px solid rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── Taskbar Windows ─────────────────────────────── */
#taskbar-windows {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  overflow: hidden;
  min-width: 0;
}

.taskbar-btn {
  height: 22px;
  min-width: 100px;
  max-width: 150px;
  padding: 0 8px;
  background: linear-gradient(180deg,
    #3060b8 0%, #2450a0 40%,
    #1e4090 41%, #1e4898 100%);
  border: 1px solid #0a246a;
  border-top-color: #4a72cc;
  border-radius: 3px;
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.taskbar-btn:hover {
  background: linear-gradient(180deg,
    #4070d0 0%, #3060b8 40%,
    #2850a8 41%, #3060b8 100%);
}

.taskbar-btn.active {
  background: linear-gradient(180deg,
    #1e3878 0%, #2040a0 60%, #1e3878 100%);
  border-top-color: #0a246a;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

.taskbar-btn .tb-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── System Tray ─────────────────────────────────── */
#system-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 100%;
  background: linear-gradient(180deg,
    #0e3d94 0%, #1252c8 20%, #0e3d94 100%);
  border-left: 1px solid #0a246a;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.2);
  flex-shrink: 0;
}

#clock {
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  white-space: nowrap;
  cursor: default;
}

/* ── Start Menu ──────────────────────────────────── */
#start-menu {
  position: fixed;
  bottom: var(--taskbar-height);
  left: 0;
  width: 340px;
  background: #ece9d8;
  border: 1px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px -4px 12px rgba(0,0,0,0.4);
  z-index: 9100;
  overflow: hidden;
  animation: slideUp 0.12s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(8px); opacity: 0.7; }
  to   { transform: translateY(0);   opacity: 1; }
}

#start-menu.hidden { display: none; }

.sm-header {
  background: linear-gradient(90deg, #0054e3 0%, #2488ff 100%);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 7px 7px 0 0;
}

.sm-avatar {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.sm-username {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.sm-body {
  display: flex;
  height: 340px;
}

.sm-left {
  flex: 1;
  background: #fff;
  padding: 6px 0;
  border-right: 1px solid #b3aaa0;
  overflow-y: auto;
}

.sm-right {
  width: 130px;
  background: #d3e5f5;
  padding: 6px 0;
  overflow-y: auto;
}

.sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 11px;
}

.sm-item:hover {
  background: #316ac5;
  color: #fff;
  border-color: #316ac5;
}

.sm-item:hover .sm-item-label {
  color: #fff;
}

.sm-item .sm-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sm-item .sm-item-label {
  color: #000;
  font-weight: normal;
}

.sm-item .sm-item-label strong {
  font-weight: bold;
}

.sm-separator {
  height: 1px;
  background: #b3aaa0;
  margin: 5px 0;
}

.sm-right .sm-item {
  font-size: 11px;
}

.sm-footer {
  background: linear-gradient(90deg, #0840c0 0%, #1a6ad8 100%);
  padding: 5px 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sm-footer-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: linear-gradient(180deg, #5090e8 0%, #2060c0 100%);
  border: 1px solid #0030a0;
  border-radius: 3px;
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.sm-footer-btn:hover {
  background: linear-gradient(180deg, #60a0f8 0%, #3070d0 100%);
}

/* ── Windows ─────────────────────────────────────── */
.xp-window {
  position: fixed;
  min-width: 300px;
  min-height: 200px;
  background: var(--xp-silver);
  border-radius: 8px 8px 4px 4px;
  border: 1px solid #0039b8;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xp-window.focused {
  z-index: 1100;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.3);
}

.xp-window.minimized {
  display: none;
}

/* Title bar */
.xp-titlebar {
  height: 28px;
  background: linear-gradient(180deg,
    #0a246a 0%,
    #2464b4 4%,
    #2488ff 15%,
    #2060e0 70%,
    #0a246a 100%);
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 7px 7px 0 0;
  cursor: move;
  gap: 4px;
  flex-shrink: 0;
}

.xp-window.inactive .xp-titlebar {
  background: linear-gradient(180deg,
    #7a96df 0%,
    #9ab8f0 10%,
    #7a96df 100%);
}

.xp-titlebar-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.xp-titlebar-icon svg {
  width: 16px;
  height: 16px;
}

.xp-title-text {
  flex: 1;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.xp-window.inactive .xp-title-text {
  color: #dde8ff;
}

/* Window controls */
.xp-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.xp-ctrl-btn {
  width: 21px;
  height: 21px;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  font-family: 'Marlett', 'Wingdings', var(--font);
}

/* Minimize */
.xp-ctrl-min {
  background: linear-gradient(180deg, #6090e0 0%, #4070c0 100%);
  border-color: #002080 #0040c0 #0040c0 #002080;
  color: #fff;
}
.xp-ctrl-min:hover { background: linear-gradient(180deg, #80b0f8 0%, #5088d8 100%); }
.xp-ctrl-min:active { background: linear-gradient(180deg, #4070c0 0%, #2050a0 100%); }

/* Maximize */
.xp-ctrl-max {
  background: linear-gradient(180deg, #6090e0 0%, #4070c0 100%);
  border-color: #002080 #0040c0 #0040c0 #002080;
  color: #fff;
}
.xp-ctrl-max:hover { background: linear-gradient(180deg, #80b0f8 0%, #5088d8 100%); }
.xp-ctrl-max:active { background: linear-gradient(180deg, #4070c0 0%, #2050a0 100%); }

/* Close */
.xp-ctrl-close {
  background: linear-gradient(180deg, #e05050 0%, #c02828 100%);
  border-color: #800000 #c00000 #c00000 #800000;
  color: #fff;
  font-size: 11px;
}
.xp-ctrl-close:hover { background: linear-gradient(180deg, #f86868 0%, #d84040 100%); }
.xp-ctrl-close:active { background: linear-gradient(180deg, #c02828 0%, #a00000 100%); }

/* Menu bar */
.xp-menubar {
  height: 22px;
  background: var(--xp-silver);
  display: flex;
  align-items: center;
  padding: 0 2px;
  border-bottom: 1px solid #aca899;
  flex-shrink: 0;
}

.xp-menu-item {
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
}

.xp-menu-item:hover {
  background: #316ac5;
  color: #fff;
  border-color: #316ac5;
}

/* Toolbar / address bar */
.xp-toolbar {
  height: 30px;
  background: linear-gradient(180deg, #f0ede0 0%, #e0dcc8 100%);
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 4px;
  border-bottom: 1px solid #aca899;
  flex-shrink: 0;
}

.xp-toolbar-btn {
  height: 22px;
  padding: 0 8px;
  background: linear-gradient(180deg, #f8f6f0 0%, #e4e0d0 100%);
  border: 1px solid #aca899;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.xp-toolbar-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #e8e4d4 100%);
  border-color: #316ac5;
}

.xp-toolbar-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.xp-address-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.xp-address-bar label {
  font-size: 11px;
  color: #333;
  white-space: nowrap;
}

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

/* Status bar */
.xp-statusbar {
  height: 22px;
  background: var(--xp-silver);
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-top: 1px solid #aca899;
  font-size: 11px;
  color: #444;
  flex-shrink: 0;
}

.xp-statusbar-panel {
  border: 1px solid #aca899;
  padding: 1px 8px;
  margin-right: 2px;
  height: 16px;
  display: flex;
  align-items: center;
}

/* Window content */
.xp-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Notepad */
.notepad-area {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 2px 4px;
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  overflow: auto;
  tab-size: 4;
}

/* Explorer sidebar */
.xp-sidebar {
  width: 160px;
  background: linear-gradient(180deg, #d5e8f8 0%, #c4d8ee 100%);
  border-right: 1px solid #aca899;
  padding: 8px 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.xp-sidebar-section {
  margin-bottom: 6px;
}

.xp-sidebar-title {
  background: linear-gradient(180deg, #aac4e0 0%, #8caed8 100%);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.xp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #00288f;
  cursor: pointer;
  text-decoration: underline;
}

.xp-sidebar-link:hover { color: #ff4400; }

/* File listing */
.xp-file-area {
  flex: 1;
  background: #fff;
  overflow: auto;
  padding: 8px;
}

/* Icon view (file manager) */
.xp-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

.xp-file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: default;
  text-align: center;
}

.xp-file-item:hover {
  background: #d6e8ff;
  border-color: #a0c0ff;
}

.xp-file-item.selected {
  background: #cce0ff;
  border-color: #6699ff;
}

.xp-file-item .fi-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}

.xp-file-item .fi-icon svg {
  width: 32px;
  height: 32px;
}

.xp-file-item .fi-label {
  font-size: 10px;
  line-height: 1.2;
  word-break: break-word;
  color: #000;
  max-width: 78px;
}

/* ── Document Viewer ─────────────────────────────── */
.xp-document {
  flex: 1;
  background: #fff;
  overflow: auto;
  padding: 20px 28px;
  font-size: 12px;
  color: #111;
  line-height: 1.6;
  font-family: var(--font);
}

.xp-document h1 {
  font-size: 18px;
  font-weight: bold;
  color: #003080;
  margin-bottom: 12px;
  border-bottom: 2px solid #316ac5;
  padding-bottom: 6px;
}

.xp-document h2 {
  font-size: 14px;
  font-weight: bold;
  color: #003080;
  margin: 14px 0 6px;
}

.xp-document h3 {
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0 4px;
}

.xp-document p { margin: 6px 0; }

.xp-document ul, .xp-document ol {
  margin: 6px 0 6px 22px;
}

.xp-document li { margin: 2px 0; }

.xp-document strong { font-weight: bold; }
.xp-document em { font-style: italic; }
.xp-document code {
  background: #f0f0f0;
  padding: 1px 4px;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.xp-document pre {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 3px;
  overflow: auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.xp-document table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

.xp-document th {
  background: #316ac5;
  color: #fff;
  padding: 4px 8px;
  text-align: left;
  font-size: 11px;
}

.xp-document td {
  padding: 3px 8px;
  border: 1px solid #ccc;
  font-size: 11px;
}

.xp-document tr:nth-child(even) td { background: #f0f4ff; }

/* ── Context Menu ────────────────────────────────── */
#context-menu {
  position: fixed;
  background: var(--xp-silver);
  border: 1px solid var(--xp-silver-border);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  z-index: 9500;
  padding: 3px 0;
  min-width: 160px;
  font-size: 11px;
}

#context-menu.hidden { display: none; }

.ctx-item {
  padding: 4px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ctx-item:hover {
  background: #316ac5;
  color: #fff;
}

.ctx-item-disabled {
  color: #808080;
  cursor: default;
}

.ctx-item-disabled:hover {
  background: transparent;
  color: #808080;
}

.ctx-separator {
  height: 1px;
  background: var(--xp-silver-dark);
  margin: 3px 0;
}

/* ── Resize handle ───────────────────────────────── */
.xp-resize-se {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
}

/* ── Scrollbar XP style ──────────────────────────── */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: #d4d0c8;
  border: 1px solid #bbb8b0;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f0ede0, #c0bca8);
  border: 1px solid #8a8880;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff, #d0ccb8);
}
::-webkit-scrollbar-button {
  background: linear-gradient(180deg, #f0ede0, #c0bca8);
  border: 1px solid #8a8880;
  display: block;
  height: 16px;
  width: 16px;
}

/* ── Link window (iframe) ────────────────────────── */
.xp-iframe-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.xp-iframe-area iframe {
  flex: 1;
  border: none;
  width: 100%;
}

.xp-link-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: #fff;
  text-align: center;
}

.xp-link-message .link-icon { font-size: 48px; }
.xp-link-message .link-title { font-size: 14px; font-weight: bold; color: #003080; }
.xp-link-message .link-desc { font-size: 11px; color: #555; max-width: 280px; }
.xp-link-message .link-url { font-size: 10px; color: #0000cc; text-decoration: underline; cursor: pointer; word-break: break-all; max-width: 280px; }

.xp-link-btn {
  padding: 6px 20px;
  background: linear-gradient(180deg, #f8f8f8 0%, #e0e0e0 100%);
  border: 1px solid #888;
  border-radius: 3px;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}

.xp-link-btn:hover { background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%); border-color: #316ac5; }
.xp-link-btn:active { background: linear-gradient(180deg, #e0e0e0 0%, #f0f0f0 100%); }

/* ── Error / dialog ──────────────────────────────── */
.xp-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.0);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Loading spinner ─────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font);
  font-size: 18px;
  gap: 16px;
  transition: opacity 0.5s;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.xp-boot-logo {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
}

.xp-boot-progress {
  width: 200px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 2px;
  overflow: hidden;
  background: #222;
}

.xp-boot-bar {
  height: 100%;
  background: linear-gradient(90deg, #2060c0, #4090f0, #2060c0);
  background-size: 200% 100%;
  animation: bootBarScroll 0.8s linear infinite;
  width: 80px;
  border-radius: 1px;
}

@keyframes bootBarScroll {
  0% { margin-left: -80px; }
  100% { margin-left: 200px; }
}

/* Responsive: hide sidebar on very small screens */
@media (max-width: 600px) {
  .xp-sidebar { display: none; }
  #start-menu { width: 100%; }
}

/* ── CMD Terminal Window ─────────────────────────── */
.cmd-window {
  background: #000;
}

.cmd-window .xp-titlebar {
  background: linear-gradient(180deg, #000080 0%, #000060 100%) !important;
}

.cmd-window.inactive .xp-titlebar {
  background: linear-gradient(180deg, #404080 0%, #303060 100%) !important;
}

.cmd-output {
  flex: 1;
  padding: 4px 8px;
  overflow-y: auto;
  line-height: 1.45;
  min-height: 0;
  background: #000;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: 'Courier New', Lucida Console, monospace;
  font-size: 12px;
  color: #c0c0c0;
}

.cmd-input-row {
  display: flex;
  align-items: center;
  padding: 2px 8px 6px;
  background: #000;
  flex-shrink: 0;
}

.cmd-prompt-label {
  color: #c0c0c0;
  font-family: 'Courier New', Lucida Console, monospace;
  font-size: 12px;
  white-space: nowrap;
  margin-right: 4px;
  flex-shrink: 0;
}

.cmd-input {
  background: transparent;
  border: none;
  outline: none;
  color: #c0c0c0;
  font-family: 'Courier New', Lucida Console, monospace;
  font-size: 12px;
  flex: 1;
  caret-color: #c0c0c0;
}

/* ── Shutdown Overlay ────────────────────────────── */
#shutdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
}

#shutdown-overlay.visible {
  display: flex;
}

#shutdown-dialog {
  background: var(--xp-silver);
  border: 2px solid var(--xp-blue);
  border-radius: 8px 8px 4px 4px;
  width: 400px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.sd-title {
  background: linear-gradient(180deg,
    #0a246a 0%, #2464b4 4%, #2488ff 15%,
    #2060e0 70%, #0a246a 100%);
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.sd-body {
  padding: 14px 18px 12px;
}

.sd-win-logo {
  width: 52px;
  height: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  flex-shrink: 0;
}

.sd-win-logo span:nth-child(1) { background: #ff4444; border-radius: 2px; }
.sd-win-logo span:nth-child(2) { background: #44aa44; border-radius: 2px; }
.sd-win-logo span:nth-child(3) { background: #4444ff; border-radius: 2px; }
.sd-win-logo span:nth-child(4) { background: #ffaa00; border-radius: 2px; }

.sd-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.sd-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.sd-opt:hover {
  background: #dce8ff;
  border-color: #316ac5;
}

.sd-opt.selected {
  background: #dce8ff;
  border-color: #316ac5;
}

.sd-opt-icon {
  font-size: 24px;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.sd-opt b {
  display: block;
  font-size: 12px;
}

.sd-opt small {
  color: #444;
  font-size: 10px;
}

.sd-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.sd-btn {
  padding: 4px 20px;
  font-family: var(--font);
  font-size: 11px;
  border: 2px outset var(--xp-silver-dark);
  background: var(--xp-silver);
  cursor: pointer;
  border-radius: 2px;
}

.sd-btn:hover { background: #e8e4dc; }

.sd-btn.primary {
  background: linear-gradient(180deg, #4080e0 0%, #2060c0 100%);
  color: #fff;
  border: 2px solid #1040a0;
}

.sd-btn.primary:hover { background: linear-gradient(180deg, #5090f0 0%, #3070d0 100%); }

/* ── Toast Notification ──────────────────────────── */
.xp-toast {
  position: fixed;
  bottom: 42px;
  right: 12px;
  background: #ffffc8;
  border: 1px solid #b8a000;
  border-radius: 3px;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 11px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 9990;
  max-width: 280px;
  animation: toastIn 0.2s ease-out;
}

@keyframes toastIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.xp-toast-title { font-weight: bold; color: #333; margin-bottom: 3px; }
.xp-toast-body  { color: #444; }
.xp-toast-sub   { color: #888; font-size: 10px; margin-top: 2px; }

/* ── Drag overlay (prevents iframe/cursor issues during drag) */
#drag-overlay {
  position: fixed;
  inset: 0;
  z-index: 9980;
  display: none;
  cursor: move;
}

/* ── Browser Window (Internet Explorer) ─────────── */
.xp-browser-toolbar {
  height: 32px;
  background: linear-gradient(180deg, #f0ede0 0%, #e0dcc8 100%);
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 3px;
  border-bottom: 1px solid #aca899;
  flex-shrink: 0;
}

.xp-browser-nav-btn {
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  background: linear-gradient(180deg, #f8f6f0 0%, #e4e0d0 100%);
  border: 1px solid #aca899;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-browser-nav-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #e8e4d4 100%);
  border-color: #316ac5;
}

.xp-browser-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.xp-browser-addr-label {
  font-size: 11px;
  color: #333;
  white-space: nowrap;
  padding: 0 3px;
}

.xp-browser-addr {
  flex: 1;
  height: 22px;
  padding: 0 4px;
  border: 1px solid #7f9db9;
  background: #fff;
  font-family: var(--font);
  font-size: 11px;
  outline: none;
  border-radius: 2px;
}

.xp-browser-go {
  height: 22px;
  padding: 0 8px;
  background: linear-gradient(180deg, #f8f6f0 0%, #e4e0d0 100%);
  border: 1px solid #aca899;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.xp-browser-go:hover {
  background: linear-gradient(180deg, #fff 0%, #e8e4d4 100%);
  border-color: #316ac5;
}

.xp-browser-frame {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  min-height: 0;
}

.doom-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #000;
}

.doom-frame {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  min-height: 0;
  background: #000;
}

/* ── Saper (Minesweeper) ─────────────────────────── */
.saper-win {
  min-width: 0 !important;
  min-height: 0 !important;
}

.saper-wrap {
  flex: 1;
  display: flex;
  overflow: auto;
  background: #c0c0c0;
}

.saper-container {
  padding: 6px;
  background: #c0c0c0;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

.saper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #c0c0c0;
}

.saper-lcd {
  background: #000;
  color: #ff0000;
  font-family: 'Courier New', Lucida Console, monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 1px 4px;
  min-width: 48px;
  text-align: right;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.2;
}

.saper-face-btn {
  font-size: 16px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  width: 26px;
  height: 26px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
}

.saper-face-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.saper-board-wrap {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  display: inline-block;
  line-height: 0;
}

.saper-grid {
  display: grid;
  line-height: 0;
}

.saper-cell {
  width: 16px;
  height: 16px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  cursor: default;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

.saper-cell.saper-revealed {
  border: 1px solid #808080;
}

.saper-cell.saper-mine-hit {
  background: #ff0000;
}

.saper-cell[data-n="1"] { color: #0000ff; }
.saper-cell[data-n="2"] { color: #007b00; }
.saper-cell[data-n="3"] { color: #ff0000; }
.saper-cell[data-n="4"] { color: #00007b; }
.saper-cell[data-n="5"] { color: #7b0000; }
.saper-cell[data-n="6"] { color: #007b7b; }
.saper-cell[data-n="7"] { color: #000000; }
.saper-cell[data-n="8"] { color: #7b7b7b; }

/* ── Pasjans (Klondike Solitaire) ─────────────────── */
.pjs-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #1e6b1e;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.pjs-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 10px 0 10px;
  flex-shrink: 0;
}

.pjs-tab {
  display: flex;
  gap: 8px;
  padding: 10px;
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
}

.pjs-slot {
  width: 71px;
  height: 95px;
  flex-shrink: 0;
  position: relative;
}

.pjs-found-slot {
  border-radius: 4px;
}

.pjs-empty {
  width: 71px;
  height: 95px;
  border: 2px dashed rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.07);
}

.pjs-col {
  position: relative;
  width: 71px;
  flex-shrink: 0;
  min-height: 95px;
}

/* Playing cards */
.pjs-card {
  width: 71px;
  height: 95px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.35);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #111;
}

.pjs-card.pjs-back {
  background: #00539b;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 2px,
      transparent 2px,
      transparent 8px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 2px,
      transparent 2px,
      transparent 8px
    );
  border: 2px solid #0044aa;
  border-radius: 5px;
}

.pjs-card.pjs-red .pjs-tl,
.pjs-card.pjs-red .pjs-br {
  color: #c00;
}

.pjs-tl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 4px 0 4px;
  line-height: 1.1;
  font-family: 'Times New Roman', Times, serif;
}

.pjs-br {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 4px 2px 4px;
  line-height: 1.1;
  transform: rotate(180deg);
  font-family: 'Times New Roman', Times, serif;
}

.pjs-rank {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.pjs-suit {
  font-size: 12px;
  line-height: 1;
}

/* Drag ghost */
.pjs-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

/* Status bar */
.pjs-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  font-size: 11px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  flex-shrink: 0;
}

/* Win overlay */
.pjs-win-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.pjs-win-box {
  background: #ece9d8;
  border: 2px solid #0054e3;
  border-radius: 4px;
  padding: 24px 28px;
  text-align: center;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
  min-width: 220px;
}

.pjs-win-title {
  font-size: 20px;
  font-weight: bold;
  color: #000080;
  margin-bottom: 8px;
}

.pjs-win-body {
  font-size: 13px;
  margin-bottom: 18px;
  color: #333;
}

.pjs-win-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pjs-win-btn {
  padding: 5px 18px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 12px;
  background: #ece9d8;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  cursor: pointer;
}

.pjs-win-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* ── Pinball ─────────────────────────────────────── */
.pinball-win {
  min-width: 0 !important;
  min-height: 0 !important;
}

.pinball-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0a0a16;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.pinball-hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  background: #111128;
  color: #aad4ff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 1px solid #333355;
  flex-shrink: 0;
}

.pinball-hud b {
  color: #ffdd44;
}

.pb-balls {
  color: #ff6644;
  letter-spacing: 2px;
  font-size: 11px;
}

.pinball-canvas {
  display: block;
  flex-shrink: 0;
  cursor: default;
}

.pb-hint {
  width: 100%;
  text-align: center;
  padding: 2px 4px;
  background: #0a0a16;
  color: #556677;
  font-size: 10px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  flex-shrink: 0;
}

/* ── Screensaver overlay ─────────────────────────── */
.ss-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: #000;
  cursor: none;
}

/* ── Screensaver settings dialog ─────────────────── */
.ss-settings {
  display: flex;
  gap: 12px;
  padding: 12px;
  height: 100%;
  align-items: flex-start;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
}

.ss-preview-box {
  flex-shrink: 0;
}

.ss-mini-screen {
  width: 122px;
  height: 78px;
  background: #000;
  border: 2px solid #555;
  border-radius: 2px;
  overflow: hidden;
}

.ss-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-label {
  width: 100px;
  flex-shrink: 0;
  color: #333;
}

.ss-select {
  flex: 1;
  height: 22px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
  border: 1px solid #7f9db9;
  background: #fff;
  padding: 0 4px;
}

.ss-row-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.xp-dialog-btn {
  padding: 4px 14px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
  background: linear-gradient(180deg, #f5f3ec 0%, #dbd8cc 100%);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  cursor: pointer;
  min-width: 65px;
}

.xp-dialog-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.xp-dialog-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #e8e4d4 100%);
}