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

:root {
  --xp-title: linear-gradient(180deg,#4a90d9 0%,#2466c8 4%,#1a54bb 8%,#1a54bb 92%,#1040a0 96%,#0a246a 100%);
  --xp-title-i: linear-gradient(180deg,#7a96df 0%,#6080c0 4%,#4d6dab 92%,#3a5090 100%);
  --xp-btn: linear-gradient(180deg,#d4e4f8 0%,#a8c8f0 40%,#6098d8 60%,#4878c0 100%);
  --xp-btn-c: linear-gradient(180deg,#f0a0a0 0%,#e06060 40%,#c03030 60%,#a02020 100%);
  --xp-gray: #ece9d8;
  --taskbar-h: 40px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  user-select: none;
}

/* ── DESKTOP ── */

#desktop {
  width: 100%;
  height: calc(100% - var(--taskbar-h));
  background: #3a6ea5;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 110%, #5ba84a 0%, #5ba84a 38%, transparent 38%),
    radial-gradient(ellipse 200% 100% at 50% 120%, #4a8a3a 0%, #68b84a 40%, transparent 40%),
    linear-gradient(180deg, #1a4a8a 0%, #3a6ea5 45%, #4a7cb5 55%, #c8d8e8 55%, #b8d0e8 60%, #a8c8e0 65%);
  position: relative;
  overflow: hidden;
}

#desktop::before {
  content: '';
  position: absolute;
  top: 12%; left: 15%;
  width: 180px; height: 60px;
  background: rgba(255,255,255,.7);
  border-radius: 50px;
  box-shadow: 60px -20px 0 20px rgba(255,255,255,.6), 120px 10px 0 10px rgba(255,255,255,.5);
  pointer-events: none;
}

#desktop::after {
  content: '';
  position: absolute;
  top: 18%; right: 20%;
  width: 120px; height: 40px;
  background: rgba(255,255,255,.6);
  border-radius: 40px;
  box-shadow: 40px -15px 0 15px rgba(255,255,255,.5);
  pointer-events: none;
}

/* ── DESKTOP ICONS ── */

.icon {
  position: absolute;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  cursor: pointer;
  border-radius: 3px;
}

.icon:hover { background: rgba(49,106,197,.5); }

.icon span {
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  color: white;
  text-shadow: 1px 1px 3px black;
}

/* ── WINDOWS ── */

.win {
  position: absolute;
  min-width: 300px;
  min-height: 200px;
  background: var(--xp-gray);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 2px 2px 8px rgba(0,0,0,.5);
  display: none;
  flex-direction: column;
  z-index: 10;
}

.win.active  { z-index: 20; }
.win.visible { display: flex; }

.win-title {
  background: var(--xp-title);
  height: 28px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: move;
  flex-shrink: 0;
}

.win.inactive .win-title { background: var(--xp-title-i); }

.win-title-text {
  flex: 1;
  color: white;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-btn {
  width: 21px;
  height: 21px;
  background: var(--xp-btn);
  border: 1px solid;
  border-color: #fff #4060a0 #4060a0 #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.win-btn:hover  { filter: brightness(1.2); }
.win-btn:active { border-color: #4060a0 #fff #fff #4060a0; }
.win-btn.close  { background: var(--xp-btn-c); border-color: #ffaaaa #800000 #800000 #ffaaaa; }

.win-menubar {
  background: var(--xp-gray);
  border-bottom: 1px solid #aca899;
  padding: 2px 4px;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.win-menu-item { padding: 2px 6px; border-radius: 2px; cursor: pointer; font-size: 11px; }
.win-menu-item:hover { background: #245cde; color: white; }

.win-body { flex: 1; overflow: auto; padding: 12px; font-size: 12px; line-height: 1.6; }

.win-statusbar {
  height: 22px;
  border-top: 1px solid #aca899;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  color: #444;
  flex-shrink: 0;
  gap: 8px;
}

.win-status-panel {
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 2px 8px;
  height: 18px;
  display: flex;
  align-items: center;
}

/* ── TASKBAR ── */

#taskbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--taskbar-h);
  background: linear-gradient(180deg, #1f5eb5 0%, #3578d4 8%, #1a52a8 12%, #1a52a8 88%, #1248a0 92%, #0a3080 100%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border-top: 1px solid #5090e0;
  z-index: 100;
}

#start-btn {
  height: 32px;
  padding: 0 12px 0 8px;
  background: linear-gradient(180deg, #5cb85c 0%, #3a9c3a 30%, #2a8c2a 70%, #1a7c1a 100%);
  border: 1px solid;
  border-color: #80d080 #206020 #206020 #80d080;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 13px;
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
  flex-shrink: 0;
}

#start-btn:hover { filter: brightness(1.1); }

.tb-divider {
  width: 2px; height: 28px; margin: 0 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0a3080, #5090e0, #0a3080);
}

#tb-items { display: flex; gap: 3px; flex: 1; overflow: hidden; }

.tb-item {
  height: 26px;
  padding: 0 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: white;
  font-size: 11px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-item:hover  { background: rgba(255,255,255,.2); }
.tb-item.active { background: rgba(0,0,0,.3); border-color: rgba(0,0,0,.3); }

#tray {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,40,.3);
  border: 1px solid;
  border-color: #0a3080 #5090e0 #5090e0 #0a3080;
  height: 28px;
  padding: 0 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

#clock { color: white; font-size: 11px; }

/* ── STATUS DOTS ── */

.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #aaa;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.online   { background: #44cc44; }
.status-dot.offline  { background: #cc4444; }
.status-dot.checking { background: #ccaa44; }

/* ── BUTTONS ── */

.xp-btn-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #d4e8ff 0%, #a0c8f0 40%, #5090d8 60%, #3070c0 100%);
  border: 2px solid;
  border-color: #fff #4060a0 #4060a0 #fff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #001040;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  font-family: 'Tahoma', Arial, sans-serif;
  text-decoration: none;
}

.xp-btn-big:hover { filter: brightness(1.1); }

.xp-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(180deg, #d4e8ff 0%, #a0c8f0 40%, #5090d8 60%, #3070c0 100%);
  border: 2px solid;
  border-color: #fff #4060a0 #4060a0 #fff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  color: #001040;
  font-family: 'Tahoma', Arial, sans-serif;
}

.xp-btn-sm:hover { filter: brightness(1.1); }

/* ── START MENU ── */

#start-menu {
  display: none;
  position: fixed;
  bottom: var(--taskbar-h);
  left: 0;
  width: 300px;
  background: white;
  border: 1px solid #0a246a;
  box-shadow: 3px 3px 8px rgba(0,0,0,.5);
  z-index: 200;
}

#start-menu.open { display: block; }

#sm-header {
  background: linear-gradient(90deg, #1a52a8, #3a8ad8);
  padding: 8px 12px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sm-item {
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

#sm-footer { border-top: 1px solid #ccc; background: #d4d0c8; padding: 4px; }

/* ── RESIZE HANDLE ── */

.resize-handle {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, #aca899 50%);
}

/* ── CONTENT HELPERS ── */

.sh {
  font-weight: bold;
  color: #0a246a;
  border-bottom: 1px solid #0a246a;
  margin: 12px 0 6px;
  padding-bottom: 2px;
  font-size: 12px;
}

.sh:first-child { margin-top: 0; }

.ir { display: flex; gap: 6px; margin: 3px 0; }
.il { color: #555; min-width: 90px; flex-shrink: 0; }

.arch-box {
  border: 1px solid #808080;
  background: white;
  padding: 6px 10px;
  border-radius: 2px;
  font-size: 11px;
  text-align: center;
}

.warn-box {
  background: #fff4cc;
  border: 1px solid #c8a800;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* ── SCROLLBAR ── */

::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #d4d0c8; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d4d0c8, #a8a090);
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
}