/* XP Shell v15 — FULL — XP-only (winxp-blue/olive/silver). Win95 untouched.
   - Окна с XP-градиентами заголовков
   - Стили поверх существующих кнопок (min/max/close), без инъекций
   - Панель задач + Start
   - Кнопки задач (div.task-entry в #task-list)
   - Трей справа с разделителем и часы (#clock)
*/

/* Палитры */
:root {
  --xp-blue-dark: #285fb9;
  --xp-blue-mid: #4f80d9;
  --xp-blue-lite: #93b6f1;
  --xp-olive-dark: #6a8a3a;
  --xp-olive-mid: #93ad55;
  --xp-olive-lite: #c9db9a;
  --xp-silver-dark: #8f8f9f;
  --xp-silver-mid: #b4b8c6;
  --xp-silver-lite: #dfe2ec;
  --xp-title-text: #ffffff;
  --xp-border: rgba(0, 0, 0, .35);
  --xp-shadow: rgba(0, 0, 0, .4);
}

/* ===== Окна ===== */
.ag-skin-xp-blue .ag-win,
.ag-skin-xp-olive .ag-win,
.ag-skin-xp-silver .ag-win,
.ag-skin-xp-blue .window,
.ag-skin-xp-olive .window,
.ag-skin-xp-silver .window,
.ag-skin-xp-blue [role="dialog"],
.ag-skin-xp-olive [role="dialog"],
.ag-skin-xp-silver [role="dialog"],
.ag-skin-xp-blue [data-window],
.ag-skin-xp-olive [data-window],
.ag-skin-xp-silver [data-window] {
  background: #fff !important;
  border: 1px solid var(--xp-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 28px var(--xp-shadow), 0 1px 0 rgba(255, 255, 255, .25) inset !important;
  overflow: hidden;
}

/* ===== Заголовки ===== */
.ag-skin-xp-blue .ag-titlebar,
.ag-skin-xp-olive .ag-titlebar,
.ag-skin-xp-silver .ag-titlebar,
.ag-skin-xp-blue .titlebar,
.ag-skin-xp-olive .titlebar,
.ag-skin-xp-silver .titlebar,
.ag-skin-xp-blue .window-titlebar,
.ag-skin-xp-olive .window-titlebar,
.ag-skin-xp-silver .window-titlebar,
.ag-skin-xp-blue .window-header,
.ag-skin-xp-olive .window-header,
.ag-skin-xp-silver .window-header,
.ag-skin-xp-blue [data-titlebar],
.ag-skin-xp-olive [data-titlebar],
.ag-skin-xp-silver [data-titlebar],
.ag-skin-xp-blue [class*="titlebar"],
.ag-skin-xp-olive [class*="titlebar"],
.ag-skin-xp-silver [class*="titlebar"],
.ag-skin-xp-blue [class*="caption"],
.ag-skin-xp-olive [class*="caption"],
.ag-skin-xp-silver [class*="caption"] {
  position: relative;
  min-height: 26px;
  height: 26px;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  color: var(--xp-title-text) !important;
  font: bold 12px Tahoma, Arial, sans-serif !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  user-select: none;
}

.ag-skin-xp-blue .ag-titlebar,
.ag-skin-xp-blue .titlebar,
.ag-skin-xp-blue .window-titlebar,
.ag-skin-xp-blue .window-header,
.ag-skin-xp-blue [data-titlebar],
.ag-skin-xp-blue [class*="titlebar"],
.ag-skin-xp-blue [class*="caption"] {
  background: linear-gradient(#6aa0ff, #2f6eea 55%, #1d57c9) !important;
}

.ag-skin-xp-olive .ag-titlebar,
.ag-skin-xp-olive .titlebar,
.ag-skin-xp-olive .window-titlebar,
.ag-skin-xp-olive .window-header,
.ag-skin-xp-olive [data-titlebar],
.ag-skin-xp-olive [class*="titlebar"],
.ag-skin-xp-olive [class*="caption"] {
  background: linear-gradient(#a2c173, #7aa14f 55%, #597f2f) !important;
}

.ag-skin-xp-silver .ag-titlebar,
.ag-skin-xp-silver .titlebar,
.ag-skin-xp-silver .window-titlebar,
.ag-skin-xp-silver .window-header,
.ag-skin-xp-silver [data-titlebar],
.ag-skin-xp-silver [class*="titlebar"],
.ag-skin-xp-silver [class*="caption"] {
  background: linear-gradient(#dfe6f2, #bfc7d6 60%, #a8afc0) !important;
  color: #112 !important;
  text-shadow: none;
}

.ag-skin-xp-blue .ag-titlebar::after,
.ag-skin-xp-olive .ag-titlebar::after,
.ag-skin-xp-silver .ag-titlebar::after,
.ag-skin-xp-blue .titlebar::after,
.ag-skin-xp-olive .titlebar::after,
.ag-skin-xp-silver .titlebar::after,
.ag-skin-xp-blue .window-titlebar::after,
.ag-skin-xp-olive .window-titlebar::after,
.ag-skin-xp-silver .window-titlebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(0, 0, 0, .2);
}

/* ===== Панели (toolbar/menubar/status) ===== */
.ag-skin-xp-blue .toolbar,
.ag-skin-xp-olive .toolbar,
.ag-skin-xp-silver .toolbar,
.ag-skin-xp-blue .menubar,
.ag-skin-xp-olive .menubar,
.ag-skin-xp-silver .menubar {
  background: linear-gradient(#f4f7ff, #e6ecff) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
}

.ag-skin-xp-blue .footerbar,
.ag-skin-xp-olive .footerbar,
.ag-skin-xp-silver .footerbar,
.ag-skin-xp-blue .statusbar,
.ag-skin-xp-olive .statusbar,
.ag-skin-xp-silver .statusbar {
  background: linear-gradient(#eef3ff, #dae6ff) !important;
  border-top: 1px solid rgba(0, 0, 0, .12) !important;
}

/* ===== Taskbar & Start ===== */
body.ag-skin-xp-blue div#taskbar.taskbar,
body.ag-skin-xp-olive div#taskbar.taskbar,
body.ag-skin-xp-silver div#taskbar.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  /* Remove padding-left to let start button touch the edge if needed, or keep small gap.
     Original XP has start button touching top/bottom but slightly pushed from left?
     Actually XP start button takes full height 30px inside a taskbar of ~30px?
     Let's remove vertical padding from taskbar and handle spacing via items. */
  padding: 0 8px 0 0 !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .5) !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .1), 0 -8px 18px rgba(0, 0, 0, .15) inset !important;
  background-image: none !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar {
  background: linear-gradient(#c7d7fb, #9db9f4 55%, #6f95e6) !important;
}

body.ag-skin-xp-olive div#taskbar.taskbar {
  background: linear-gradient(#dce7c5, #bdd39a 55%, #8fb06e) !important;
}

body.ag-skin-xp-silver div#taskbar.taskbar {
  background: linear-gradient(#eceef6, #d6dae6 60%, #bcc2d2) !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar>button#start.start-button,
body.ag-skin-xp-olive div#taskbar.taskbar>button#start.start-button,
body.ag-skin-xp-silver div#taskbar.taskbar>button#start.start-button {
  align-self: stretch;
  margin: 0 !important;
  /* Make height full and touch edges. Taskbar has 0 vertical padding now. */
  height: auto !important;
  padding: 0 22px 0 34px !important;
  min-width: 110px !important;
  border: none !important;
  /* XP shape: rounded right side, almost square left */
  border-radius: 0 16px 16px 0 !important;
  color: #fff !important;
  font: italic bold 16px Tahoma, Arial, sans-serif !important;
  text-transform: lowercase;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar>button#start.start-button {
  background: linear-gradient(to bottom, #3fba72 0%, #107c38 100%) !important;
}

body.ag-skin-xp-olive div#taskbar.taskbar>button#start.start-button {
  background: linear-gradient(to bottom, #9dcf5c 0%, #4e7f1d 100%) !important;
}

body.ag-skin-xp-silver div#taskbar.taskbar>button#start.start-button {
  background: linear-gradient(to bottom, #a3d987 0%, #4a8c33 100%) !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar>button#start.start-button .win-logo,
body.ag-skin-xp-olive div#taskbar.taskbar>button#start.start-button .win-logo,
body.ag-skin-xp-silver div#taskbar.taskbar>button#start.start-button .win-logo {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 3px;
  background:
    linear-gradient(#f00, #a00) 0 0/50% 50% no-repeat,
    linear-gradient(#0f0, #0a0) 100% 0/50% 50% no-repeat,
    linear-gradient(#00f, #00a) 0 100%/50% 50% no-repeat,
    linear-gradient(#ff0, #aa0) 100% 100%/50% 50% no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset;
}

/* ===== Кнопки задач (div.task-entry) ===== */
body.ag-skin-xp-blue div#taskbar.taskbar>div#task-list.task-list,
body.ag-skin-xp-olive div#taskbar.taskbar>div#task-list.task-list,
body.ag-skin-xp-silver div#taskbar.taskbar>div#task-list.task-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar>div#task-list.task-list>div.task-entry,
body.ag-skin-xp-olive div#taskbar.taskbar>div#task-list.task-list>div.task-entry,
body.ag-skin-xp-silver div#taskbar.taskbar>div#task-list.task-list>div.task-entry {
  -webkit-appearance: none;
  appearance: none;
  height: 28px !important;
  min-width: 120px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  border: 1px solid rgba(0, 0, 0, .25) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .45) !important;
  background-image: none !important;
  color: #112 !important;
  cursor: pointer;
  margin: 0 4px !important;
  text-decoration: none !important;
  line-height: 26px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 0 rgba(0, 0, 0, .08) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.ag-skin-xp-blue div#taskbar.taskbar>div#task-list.task-list>div.task-entry.active,
body.ag-skin-xp-olive div#taskbar.taskbar>div#task-list.task-list>div.task-entry.active,
body.ag-skin-xp-silver div#taskbar.taskbar>div#task-list.task-list>div.task-entry.active {
  background: #fff !important;
}

/* ===== Трей и часы ===== */
body.ag-skin-xp-blue div#taskbar.taskbar>div.tray,
body.ag-skin-xp-olive div#taskbar.taskbar>div.tray,
body.ag-skin-xp-silver div#taskbar.taskbar>div.tray {
  margin-left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  position: relative;
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  box-shadow: inset 1px 0 rgba(255, 255, 255, .6), inset 2px 0 rgba(0, 0, 0, .15);
}

body.ag-skin-xp-blue div#taskbar.taskbar>div.tray>span#clock.clock,
body.ag-skin-xp-olive div#taskbar.taskbar>div.tray>span#clock.clock,
body.ag-skin-xp-silver div#taskbar.taskbar>div.tray>span#clock.clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font: 12px Tahoma, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08) inset;
  cursor: default;
  user-select: none;
}

body.ag-skin-xp-silver div#taskbar.taskbar>div.tray>span#clock.clock {
  color: #123;
  text-shadow: none;
  background: rgba(255, 255, 255, .35);
}

body.ag-skin-xp-blue div#taskbar.taskbar>div.tray>span#clock.clock:hover,
body.ag-skin-xp-olive div#taskbar.taskbar>div.tray>span#clock.clock:hover,
body.ag-skin-xp-silver div#taskbar.taskbar>div.tray>span#clock.clock:hover {
  filter: brightness(1.06);
}

/* ===== Безопасность: контролы окна вне заголовка не позиционируем ===== */
.ag-skin-xp-blue .ag-wbtns,
.ag-skin-xp-olive .ag-wbtns,
.ag-skin-xp-silver .ag-wbtns,
.ag-skin-xp-blue .window-controls,
.ag-skin-xp-olive .window-controls,
.ag-skin-xp-silver .window-controls,
.ag-skin-xp-blue .title-buttons,
.ag-skin-xp-olive .title-buttons,
.ag-skin-xp-silver .title-buttons {
  position: static !important;
}

/* Внутри titlebar — могут позиционироваться (оставлено ранее) */
/* ===== XP START MENU (NEW) ===== */
.xp-start-menu {
  position: absolute;
  left: 0;
  bottom: 36px;
  /* Taskbar height */
  width: 380px;
  height: 440px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 100000;
  font-family: 'Tahoma', sans-serif;
  /* overflow: hidden; REMOVED to allow All Programs popup */
}

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

/* ... (Header/User/Body/Columns styles unchanged) ... */
/* Header */
.xp-head {
  height: 64px;
  background: linear-gradient(to bottom, #1557d0 0%, #3085f1 100%);
  border-radius: 5px 5px 0 0;
  border: 1px solid #1557d0;
  border-bottom: 2px solid #e55e0c;
  /* Orange stripe */
  display: flex;
  align-items: center;
  padding: 0 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ag-skin-xp-olive .xp-head {
  background: linear-gradient(to bottom, #7dbb34 0%, #a4ce57 100%);
  border-color: #65962a;
}

.ag-skin-xp-silver .xp-head {
  background: linear-gradient(to bottom, #9faac1 0%, #c4cbd9 100%);
  border-color: #8e9ab2;
}

.xp-user-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.xp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 2px solid #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  background: #d6e7ff;
}

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

/* Body */
.xp-body {
  flex: 1;
  display: flex;
  border: 1px solid #3085f1;
  border-top: none;
  border-bottom: none;
}

.ag-skin-xp-olive .xp-body {
  border-color: #a4ce57;
}

.ag-skin-xp-silver .xp-body {
  border-color: #c4cbd9;
}

/* Left Column */
.xp-col.xp-left {
  flex: 1;
  background: #fff;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

/* Right Column */
.xp-col.xp-right {
  width: 170px;
  background: #d3e5fa;
  border-left: 1px solid #95bdee;
  padding: 6px;
  color: #00156e;
  font-size: 11px;
}

.ag-skin-xp-olive .xp-col.xp-right {
  background: #eaefd9;
  border-left-color: #abc988;
  color: #324416;
}

.ag-skin-xp-silver .xp-col.xp-right {
  background: #eef0f6;
  border-left-color: #c9cfdd;
  color: #222;
}

/* Items Left */
.xp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  cursor: pointer;
  height: 38px;
  border: 1px solid transparent;
}

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

.ag-skin-xp-olive .xp-item:hover {
  background: #95ba42;
  border-color: #95ba42;
}

.ag-skin-xp-silver .xp-item:hover {
  background: #b0b6c6;
  border-color: #b0b6c6;
}

.xp-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-icon-wrap img {
  max-width: 32px;
  max-height: 32px;
}

.xp-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.xp-title {
  font-weight: normal;
  font-size: 11px;
  color: #000;
}

.xp-subtitle {
  font-size: 10px;
  color: #666;
}

.xp-item:hover .xp-title,
.xp-item:hover .xp-subtitle {
  color: #fff;
}

/* Items Right */
.xp-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  cursor: pointer;
  min-height: 24px;
  line-height: 1.2;
  border: 1px solid transparent;
  margin-bottom: 2px;
}

/* Right column items hover: use same color logic as left or specific?
   User asked for "color from header".
   Blue Header: #1557d0 / #3085f1. Hover: #316ac5 (Blue)
   Olive Header: #7dbb34 / #a4ce57. Hover: #95ba42 (Olive)
   Silver Header: #9faac1 / #c4cbd9. Hover: #b0b6c6 (Silver)
   These look correct, but I will ensure they are applied to both columns if desired.
   User specifically mentioned "remove icons in right column".
*/
.xp-item-right:hover {
  background: #316ac5;
  color: #fff;
  border-color: #000080;
}

.ag-skin-xp-olive .xp-item-right:hover {
  background: #95ba42;
  border-color: #55751d;
}

.ag-skin-xp-silver .xp-item-right:hover {
  background: #b0b6c6;
  border-color: #667085;
}

.xp-item-right.bold {
  font-weight: bold;
  color: inherit;
}

.xp-sep-horz {
  height: 1px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
  margin: 4px 6px;
}

.xp-sep-horz.dark {
  background: linear-gradient(to right, transparent, #95bdee, transparent);
}

.ag-skin-xp-olive .xp-sep-horz.dark {
  background: linear-gradient(to right, transparent, #abc988, transparent);
}

.ag-skin-xp-silver .xp-sep-horz.dark {
  background: linear-gradient(to right, transparent, #c9cfdd, transparent);
}

/* All Programs */
.xp-all-progs {
  margin-top: auto;
  text-align: center;
  padding-top: 4px;
  position: relative;
  /* Ensure list positions relative to this/button */
}

.xp-all-btn {
  display: inline-block;
  padding: 4px 12px;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.xp-all-btn:hover {
  background: #316ac5;
  color: #fff;
}

.arrow {
  font-size: 8px;
}

/* XP All Programs Menu (Nested) */
.xp-all-list {
  position: absolute;
  left: 95%;
  bottom: -4px;
  /* Move closer to button */
  background: #fff;
  border: 1px solid #316ac5;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 2px;
  z-index: 100001;
}

.xp-all-list.hidden {
  display: none;
}

.xp-item-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  font-size: 10px;
  cursor: pointer;
  color: #000;
  text-align: left;
}

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

/* Small Icons (Cleaned up to avoid 404s) */
.xp-icon-sm {
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}



.icon-cp {
  /* background-image: ... */
  background: transparent;
  border: 1px solid #999;
  border-radius: 2px;
}

.icon-help {
  /* background-image: ... */
  background: transparent;
  border-radius: 50%;
  color: #3085f1;
  text-align: center;
  line-height: 22px;
  font-weight: bold;
  content: '?';
}

.icon-help::after {
  content: '?';
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.icon-search {
  /* background-image: ... */
  background: transparent;
  border-radius: 50%;
}

.icon-run {
  /* background-image: ... */
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 2px;
}

/* Safe Shutdown Screen */
.xp-safe-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0055ea;
  /* Fallback */
  background: radial-gradient(circle, #4fa3ff 0%, #0055ea 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  cursor: none;
}

.xp-safe-msg {
  font-family: 'Tahoma', sans-serif;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  font-family: 'Tahoma', sans-serif;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
}

.xp-safe-logo {
  font-family: 'Tahoma', sans-serif;
  font-size: 42px;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 10px;
}

.xp-safe-logo span.win {
  font-weight: normal;
}

.xp-safe-logo span.xp {
  color: #f7630c;
  vertical-align: super;
  font-size: 24px;
  position: relative;
  top: -15px;
}


/* Footer */
.xp-footer {
  height: 38px;
  background: linear-gradient(to bottom, #3085f1 0%, #1557d0 100%);
  border: 1px solid #1557d0;
  border-top: none;
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ag-skin-xp-olive .xp-footer {
  background: linear-gradient(to bottom, #a4ce57 0%, #7dbb34 100%);
  border-color: #65962a;
}

.ag-skin-xp-silver .xp-footer {
  background: linear-gradient(to bottom, #c4cbd9 0%, #9faac1 100%);
  border-color: #8e9ab2;
}

.xp-footer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
}

.xp-footer-btn:hover {
  filter: brightness(1.2);
}

.xp-icon-key {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: orange;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000;
}

.xp-icon-off {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000;
}


/* XP Shutdown Overlay */
.xp-shutdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #003ca5 0%, #0055ea 100%);
  /* Simulating the fade effect */
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Tahoma', sans-serif;
}

.xp-shutdown-overlay.hidden {
  display: none;
}

.xp-shutdown-box {
  width: 400px;
  background: transparent;
}

.xp-shutdown-top {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.xp-shutdown-logo {
  width: 30px;
  height: 30px;
  background: url('https://w95.oss.github.io/assets/icons/windows_flag-0.png') no-repeat center/contain;
  display: inline-block;
  margin-right: 10px;
}

.xp-shutdown-mid {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.xp-shutdown-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 11px;
}

.xp-shutdown-btn:hover span {
  background: #003ca5;
}

.xp-shutdown-btn div[class^='icon-'] {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
  border-radius: 4px;
  border: 2px solid #fff;
  background-color: #d6e7ff;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.icon-standby {
  background-image: none;
  background-color: #ffd800 !important;
}

.icon-off {
  background-image: none;
  background-color: #d80000 !important;
}

.icon-restart {
  background-image: none;
  background-color: #00d800 !important;
}

.xp-shutdown-bot {
  text-align: right;
}

#xp-btn-cancel {
  padding: 2px 12px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  background: linear-gradient(#fff, #ece9d8);
  border: 1px solid #003c74;
  border-radius: 3px;
  cursor: pointer;
}

/* XP All Programs Menu (Nested) */
.xp-all-list {
  position: absolute;
  left: 100%;
  bottom: 0;
  background: #fff;
  border: 1px solid #316ac5;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 2px;
}

.xp-all-list.hidden {
  display: none;
}

.xp-item-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  font-size: 10px;
  cursor: pointer;
  color: #000;
}

.xp-item-sm:hover {
  background: #316ac5;
  color: #fff;
}
/* Completely hide icons in right column as requested */
.xp-col.xp-right .xp-icon-sm { display: none !important; }