/* Windows XP Luna–inspired UI (fan recreation) */

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

:root {
  --xp-taskbar-h: 30px;
  --xp-safe-top: env(safe-area-inset-top, 0px);
  --xp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --xp-safe-left: env(safe-area-inset-left, 0px);
  --xp-safe-right: env(safe-area-inset-right, 0px);
  --xp-taskbar-stack: calc(var(--xp-taskbar-h) + var(--xp-safe-bottom));
  --xp-vv-w: 100vw;
  --xp-vv-h: 100vh;
}

input[type="text"],
input[type="search"],
input[type="password"],
textarea {
  cursor: text;
}

html {
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.desktop {
  position: fixed;
  top: var(--xp-safe-top);
  right: var(--xp-safe-right);
  bottom: var(--xp-taskbar-stack);
  left: var(--xp-safe-left);
  background: #245edc url("../assets/bg.png") center / cover no-repeat;
  cursor: default;
  user-select: none;
  isolation: isolate;
  touch-action: manipulation;
}

/* ЭЛТ: лёгкие штриховки + редкие «потрескивания» / мерцание (без pointer-events) */
.desktop::before,
.desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.desktop::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.1) 2px 3px
  );
  opacity: 0.75;
  mix-blend-mode: multiply;
}

.desktop::after {
  background: radial-gradient(
    ellipse 130% 110% at 50% 45%,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
  mix-blend-mode: soft-light;
  animation:
    desktop-crt-flicker 9.2s ease-in-out infinite,
    desktop-crt-crackle 6.7s steps(1, end) infinite,
    desktop-crt-jitter 14.3s steps(1, end) infinite;
}

@keyframes desktop-crt-flicker {
  0%,
  100% {
    opacity: 0;
  }
  47.8% {
    opacity: 0;
  }
  48.1% {
    opacity: 0.07;
  }
  48.4% {
    opacity: 0;
  }
  70.5% {
    opacity: 0;
  }
  70.62% {
    opacity: 0.11;
  }
  70.7% {
    opacity: 0.02;
  }
  70.85% {
    opacity: 0;
  }
  86.9% {
    opacity: 0;
  }
  87% {
    opacity: 0.05;
  }
  87.08% {
    opacity: 0;
  }
}

@keyframes desktop-crt-crackle {
  0%,
  100% {
    filter: brightness(1);
  }
  8.2% {
    filter: brightness(1.04);
  }
  8.25% {
    filter: brightness(0.97);
  }
  8.3% {
    filter: brightness(1);
  }
  31.6% {
    filter: brightness(1.03);
  }
  31.65% {
    filter: brightness(1);
  }
  55.1% {
    filter: brightness(0.98);
  }
  55.18% {
    filter: brightness(1.02);
  }
  55.22% {
    filter: brightness(1);
  }
  76.4% {
    filter: brightness(1.05);
  }
  76.45% {
    filter: brightness(0.99);
  }
  76.5% {
    filter: brightness(1);
  }
}

@keyframes desktop-crt-jitter {
  0%,
  100% {
    transform: translate(0, 0);
  }
  23.11% {
    transform: translate(1px, 0);
  }
  23.13% {
    transform: translate(-1px, 0);
  }
  23.15% {
    transform: translate(0, 0);
  }
  61.02% {
    transform: translate(0, 0);
  }
  61.04% {
    transform: translate(2px, 0);
  }
  61.06% {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop::after {
    animation: none;
    opacity: 0;
  }

  .desktop::before {
    opacity: 0.35;
  }
}

/* Сетка проектов + док сразу под ней (слева сверху) */
.desktop-main {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: calc(100% - 152px);
  pointer-events: none;
}

.desktop-main .desktop-icons,
.desktop-main .desktop-dock {
  pointer-events: auto;
}

.desktop-icons {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: min-content;
  column-gap: 14px;
  row-gap: 10px;
  align-content: start;
  justify-content: start;
  /* Иначе ярлык с короткой подписью растягивается по высоте соседа в строке (длинный текст в 2-й колонке) */
  align-items: start;
}

/* Сеть → Контакты → Мой ПК — столбик под проектами */
.desktop-dock {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.desktop-dock .desktop-icon {
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .desktop-main {
    max-width: calc(100% - min(112px, 28vw));
  }
}

@media (max-width: 380px) {
  .desktop-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    max-width: calc(100vw - var(--xp-safe-left) - var(--xp-safe-right) - 72px);
}

.desktop-icon {
    width: auto;
    min-width: 0;
    max-width: 104px;
  }

  .desktop-corner {
    right: max(6px, var(--xp-safe-right));
    bottom: max(8px, var(--xp-safe-bottom));
  }
}

.desktop-corner {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.desktop-icon:focus {
  outline: none;
}

/* Без выделения: как на столе XP — без подложки */
.desktop-icon:hover:not(.desktop-icon--selected),
.desktop-icon:active:not(.desktop-icon--selected) {
  border-color: transparent;
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* Одиночный клик / выбранный ярлык — пунктир и синяя плашка подписи (Luna) */
.desktop-icon--selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: 1px dotted #fff;
  outline-offset: 2px;
}

.desktop-icon--selected .desktop-icon__label {
  display: inline-block;
  max-width: 100%;
  margin-top: 0;
  padding: 1px 4px 2px;
  background: #316ac5;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}

.desktop-icon--selected .desktop-icon__label::selection {
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
}

/* Фокус с клавиатуры до клика — только рамка фокуса */
.desktop-icon:focus-visible:not(.desktop-icon--selected) {
  outline: 1px dotted #fff;
  outline-offset: 2px;
}

.desktop-icon__img {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 3px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  flex-shrink: 0;
  image-rendering: auto;
}

.desktop-icon__img--folder,
.start-item__icon--folder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23E0C040' d='M2 8h10l2 3h16v17H2z'/%3E%3Cpath fill='%23F5E6A0' d='M2 11h28v14H2z'/%3E%3Cpath fill='%23C9A820' d='M2 8h10l1 1H2z'/%3E%3C/svg%3E");
}

/* PDF: тот же запас в viewBox, что у .desktop-icon__img--folder (≈ 2–30 × 8–28), чтобы contain давал тот же масштаб и центровку */
.desktop-icon__img--doc,
.start-item__icon--doc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='9' width='24' height='19' rx='0.9' fill='%23fff' stroke='%23222' stroke-width='0.7'/%3E%3Cpath stroke='%23b8c8d8' stroke-width='0.45' d='M7 12h18M7 14h18M7 16h14M7 18h16'/%3E%3Cpath fill='%23e0e0e0' stroke='%23666' stroke-width='0.2' d='M28 9L22 9l6 5z'/%3E%3Cpath fill='%23d02020' stroke='%23701010' stroke-width='0.25' d='M28 9h2.5v3L28 9z'/%3E%3Crect x='4' y='22' width='24' height='5.5' rx='0.4' fill='%23a80e0e' stroke='%234a0505' stroke-width='0.35'/%3E%3Crect x='4.5' y='22.5' width='23' height='4.5' rx='0.3' fill='%23c81818'/%3E%3Ctext x='16' y='26.3' font-size='5' font-family='Tahoma,Arial,sans-serif' font-weight='bold' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
}

.desktop-icon__img--notepad,
.start-item__icon--notepad {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%275%27%20height%3D%2722%27%20rx%3D%271%27%20fill%3D%27%23d4a520%27%20stroke%3D%27%23805010%27%20stroke-width%3D%270.65%27%2F%3E%3Cellipse%20cx%3D%276.5%27%20cy%3D%279%27%20rx%3D%271.6%27%20ry%3D%271.8%27%20fill%3D%27none%27%20stroke%3D%27%23ffe8a0%27%20stroke-width%3D%270.75%27%2F%3E%3Cellipse%20cx%3D%276.5%27%20cy%3D%2714%27%20rx%3D%271.6%27%20ry%3D%271.8%27%20fill%3D%27none%27%20stroke%3D%27%23ffe8a0%27%20stroke-width%3D%270.75%27%2F%3E%3Cellipse%20cx%3D%276.5%27%20cy%3D%2719%27%20rx%3D%271.6%27%20ry%3D%271.8%27%20fill%3D%27none%27%20stroke%3D%27%23ffe8a0%27%20stroke-width%3D%270.75%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2722%27%20rx%3D%271%27%20fill%3D%27%23fff%27%20stroke%3D%27%23333%27%20stroke-width%3D%270.8%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%275%27%20width%3D%273.5%27%20height%3D%2722%27%20fill%3D%27%239bc8e8%27%2F%3E%3Cpath%20stroke%3D%27%23c8d8e8%27%20stroke-width%3D%270.45%27%20d%3D%27M13%209h13M13%2011h13M13%2013h10M13%2015h12M13%2017h9M13%2019h11M13%2021h8%27%2F%3E%3C%2Fsvg%3E");
}

.desktop-icon__img--recycle,
.start-item__icon--recycle {
  background-image: url("../img/recycle-bin.png");
}

.desktop-icon__label {
  line-height: 1.15;
  word-break: break-word;
  background: transparent;
  box-shadow: none;
}

.desktop-icon__label::selection {
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
}

.window-layer {
  position: fixed;
  top: var(--xp-safe-top);
  right: var(--xp-safe-right);
  bottom: var(--xp-taskbar-stack);
  left: var(--xp-safe-left);
  pointer-events: none;
  z-index: 50;
}

.window-layer .xp-window {
  pointer-events: auto;
}

.xp-window {
  position: absolute;
  min-width: 280px;
  min-height: 160px;
  max-width: calc(var(--xp-vv-w, 100vw) - 16px);
  max-height: calc(var(--xp-vv-h, 100vh) - var(--xp-taskbar-stack) - 20px);
  background: #ece9d8;
  border: 1px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow:
    1px 1px 0 #fff inset,
    2px 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}

.xp-window__titlebar {
  display: flex;
  align-items: center;
  height: 29px;
  padding: 0 3px 0 6px;
  background: linear-gradient(180deg, #0997ff 0%, #0055e3 8%, #0055e3 92%, #0066ff 100%);
  border-radius: 7px 7px 0 0;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 0 #003399;
  cursor: default;
  touch-action: none;
}

.xp-window__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-window__controls {
  display: flex;
  gap: 2px;
}

.xp-window__btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(180deg, #3c9dff 0%, #156bd4 45%, #0a4eb8 100%);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.xp-window__btn:hover {
  filter: brightness(1.08);
}

.xp-window__btn--close {
  background: linear-gradient(180deg, #ff9a7a 0%, #e04030 50%, #b02018 100%);
}

.xp-window__body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #000;
  border: 1px solid #aca899;
  margin: 4px;
  background: #fff;
}

.xp-window__body h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.xp-window__body ul {
  margin: 0;
  padding-left: 18px;
}

.xp-window__body a {
  color: #0066cc;
}

/* Окно «Корзина»: содержимое на всю область тела окна */
.xp-window__body:has(> .xp-recycle) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
  margin: 4px;
  overflow: hidden;
}

.xp-recycle {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* На всю доступную высоту/ширину, как фон окна */
.xp-recycle-icons {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  margin: 0;
  padding: 0;
  min-height: 0;
  background: linear-gradient(180deg, #fff 0%, #eef1f6 100%);
  border: 1px solid #aca899;
  border-radius: 2px;
  box-shadow: 1px 1px 0 #fff inset;
}

.xp-recycle-file {
  margin: 0;
  padding: 0;
  color: #000;
}

/* Ярлык: только превью кликабельно */
.xp-recycle-file--file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  padding: 20px 16px 24px;
  border-radius: 0;
  text-align: center;
  box-sizing: border-box;
}

.xp-recycle-file__thumb-hit {
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  line-height: 0;
}

.xp-recycle-file__thumb-hit:hover,
.xp-recycle-file__thumb-hit:focus-visible {
  background: rgba(49, 106, 197, 0.12);
  border-color: rgba(49, 106, 197, 0.35);
  outline: none;
}

.xp-recycle-file__thumb-hit:focus-visible {
  border-style: dotted;
}

.xp-recycle-file__folder-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  flex-shrink: 0;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.22));
}

.xp-recycle-file__folder-img {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0;
  object-fit: contain;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.xp-recycle-file__thumb-hit:hover .xp-recycle-file__folder-wrap,
.xp-recycle-file__thumb-hit:focus-visible .xp-recycle-file__folder-wrap {
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.28));
}

.xp-recycle-file__name {
  display: block;
  margin-top: 8px;
  max-width: min(280px, 90%);
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-all;
  hyphens: auto;
  text-shadow: none;
  color: #000;
}

/* Windows Media Player — отдельное окно на рабочем столе */
.xp-window--wmp {
  min-width: 694px;
  min-height: 468px;
}

.xp-window--wmp .xp-window__body.xp-wmp-body {
  flex: 1;
  min-height: 0;
  margin: 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2d2d2d;
  border: 1px solid #aca899;
  color: #fff;
}

.xp-wmp-menu {
  flex-shrink: 0;
  padding: 3px 8px 4px;
  background: linear-gradient(180deg, #ece9d8 0%, #ddd8c8 100%);
  border-bottom: 1px solid #aca899;
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  color: #000;
}

.xp-wmp-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  background: linear-gradient(180deg, #1e1e1e 0%, #0a0a0a 100%);
}

.xp-wmp-video {
  flex: 1;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  background: #000;
  border: 1px solid #444;
  border-radius: 2px;
}

.xp-wmp-filename {
  margin: 0;
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  color: #aaa;
  text-align: center;
  word-break: break-all;
  max-width: 100%;
}

.xp-window__body--embed {
  flex: 1;
  min-height: 0;
  padding: 0;
  margin: 4px;
  overflow: hidden;
  background: #111;
  display: flex;
  flex-direction: column;
}

.xp-embed-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.xp-embed-yt {
  position: relative;
  flex: 1;
  min-height: 140px;
}

.xp-embed-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.xp-pdf-object,
.xp-pdf-fallback-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #525252;
}

.xp-pdf-object {
  pointer-events: auto;
}

.xp-pdf-fallback-iframe {
  display: none;
}

.xp-embed-stack--pdf .xp-embed-yt--pdf {
  flex: 1;
  min-height: 240px;
}

/* Резюме (PDF): на мобилке тач-скролл — тело окна и достаточная высота превью */
@media (max-width: 900px), (pointer: coarse) {
  .xp-window__body--pdf {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
  }

  .xp-window__body--pdf .xp-embed-stack--pdf {
    flex: 1 1 auto;
    min-height: min-content;
  }

  .xp-embed-stack--pdf .xp-embed-yt--pdf {
    flex: 0 0 auto;
    min-height: min(72dvh, 680px);
  }

  .xp-embed-stack--pdf .xp-pdf-object {
    display: none;
  }

  .xp-embed-stack--pdf .xp-pdf-fallback-iframe {
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .xp-embed-stack--pdf .xp-pdf-object,
  .xp-embed-stack--pdf .xp-pdf-fallback-iframe {
    touch-action: pan-x pan-y pinch-zoom;
  }
}

.xp-embed-bar--pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px 6px;
}

.xp-embed-bar--pdf .xp-embed-bar__link {
  margin: 0;
  margin-left: auto;
}

/* «Ручка» как у разделителей XP: клик — перезагрузка PDF (сброс масштаба/прокрутки во встроенном просмотре) */
.xp-pdf-reset-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid #6a7d86;
  border-radius: 2px;
  background: linear-gradient(180deg, #f2f6f9 0%, #d2dde4 48%, #b9c6ce 100%);
  box-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 1px 0 rgba(0, 0, 0, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xp-pdf-reset-handle:hover {
  border-color: #4a5d68;
  background: linear-gradient(180deg, #fafcfd 0%, #dfe8ee 48%, #c8d4dc 100%);
}

.xp-pdf-reset-handle:active {
  background: linear-gradient(180deg, #c5d0d8 0%, #d8e2e8 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
}

.xp-pdf-reset-handle:focus {
  outline: 1px dotted #333;
  outline-offset: 1px;
}

.xp-pdf-reset-handle:focus:not(:focus-visible) {
  outline: none;
}

.xp-pdf-reset-handle__grip {
  display: block;
  width: 14px;
  height: 12px;
  background-image: radial-gradient(circle at center, #3d474d 1px, transparent 1.1px);
  background-size: 3px 3px;
  background-position: 0.5px 0.5px;
  opacity: 0.9;
}

.xp-embed-stack--browser .xp-embed-yt--browser {
  flex: 1;
  min-height: 200px;
}

.xp-embed-bar--browser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xp-embed-bar--browser .xp-embed-bar__note {
  margin: 0;
  flex: 1;
  min-width: 160px;
}

/* Локальная имитация GitHub (MadCurve / share-autotests-py) */
.xp-window__body--embed > .xp-github-sim {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f8fa;
}

.xp-github-sim .xp-gh-sim {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #1f2328;
}

.xp-gh-topbar {
  flex-shrink: 0;
  background: #24292f;
  color: #f0f6fc;
  padding: 8px 12px;
  border-bottom: 1px solid #57606a;
}

.xp-gh-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.xp-gh-logo {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.xp-gh-topbar__hint {
  flex: 1;
  font-size: 11px;
  opacity: 0.75;
  min-width: 120px;
}

.xp-gh-topbar__remote {
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  text-decoration: none;
}

.xp-gh-topbar__remote:hover {
  text-decoration: underline;
}

.xp-gh-main {
  flex: 1;
  padding: 12px 14px 20px;
  max-width: 100%;
}

.xp-gh-loading,
.xp-gh-error {
  margin: 0;
  color: #57606a;
}

.xp-gh-error {
  color: #cf222e;
}

.xp-gh-repohead {
  margin-bottom: 12px;
}

.xp-gh-repohead__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 6px;
}

.xp-gh-owner,
.xp-gh-reponame {
  color: #0969da;
  text-decoration: none;
  font-weight: 600;
}

.xp-gh-owner:hover,
.xp-gh-reponame:hover {
  text-decoration: underline;
}

.xp-gh-slash {
  margin: 0 2px;
  color: #57606a;
  font-weight: 400;
}

.xp-gh-badge {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  color: #57606a;
  vertical-align: middle;
}

.xp-gh-desc {
  margin: 0;
  font-size: 12px;
  color: #57606a;
}

.xp-gh-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #d0d7de;
  margin-bottom: 10px;
}

.xp-gh-tab {
  padding: 6px 10px 8px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  font-weight: 500;
  color: #57606a;
}

.xp-gh-tab--active {
  color: #1f2328;
  background: #fff;
  border-color: #d0d7de;
  border-bottom-color: #fff;
}

.xp-gh-tab--disabled {
  opacity: 0.45;
  cursor: default;
}

.xp-gh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.xp-gh-branch {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: #1f883d;
  color: #fff;
  border-radius: 6px;
}

.xp-gh-path {
  font-size: 11px;
  color: #57606a;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.xp-gh-table-wrap {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}

.xp-gh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.xp-gh-row:nth-child(even) {
  background: #f6f8fa;
}

.xp-gh-cell {
  padding: 8px 10px;
  border-top: 1px solid #d0d7de;
  vertical-align: middle;
}

.xp-gh-row:first-child .xp-gh-cell {
  border-top: 0;
}

.xp-gh-cell--icon {
  width: 34px;
  text-align: center;
  font-size: 17px;
}

.xp-gh-cell--name {
  font-weight: 500;
}

.xp-gh-cell--msg,
.xp-gh-cell--age {
  color: #57606a;
  font-size: 11px;
  white-space: nowrap;
}

.xp-gh-filelink {
  color: #0969da;
  text-decoration: none;
}

.xp-gh-filelink:hover {
  text-decoration: underline;
}

.xp-gh-readme {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.xp-gh-readme__bar {
  padding: 8px 12px;
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
  font-weight: 600;
  font-size: 12px;
}

.xp-gh-readme__body {
  padding: 16px 20px 24px;
  font-size: 14px;
  line-height: 1.6;
}

.xp-gh-readme__body h1 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 1.6em;
  font-weight: 600;
  border-bottom: 1px solid #d0d7de;
}

.xp-gh-readme__body h2 {
  margin: 20px 0 10px;
  font-size: 1.25em;
  font-weight: 600;
  border-bottom: 1px solid #d0d7de;
  padding-bottom: 6px;
}

.xp-gh-readme__body h3 {
  margin: 18px 0 8px;
  font-size: 1.1em;
  font-weight: 600;
}

.xp-gh-readme__body p {
  margin: 0 0 12px;
}

.xp-gh-readme__body code {
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(175, 184, 193, 0.2);
  border-radius: 4px;
}

.xp-gh-md-pre {
  margin: 0 0 14px;
  padding: 12px 14px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
  background: #f6f8fa;
  border-radius: 6px;
  border: 1px solid #d0d7de;
}

.xp-gh-md-pre .xp-gh-md-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}

.xp-gh-readme__body a {
  color: #0969da;
  text-decoration: none;
}

.xp-gh-readme__body a:hover {
  text-decoration: underline;
}

.xp-embed-bar {
  flex-shrink: 0;
  padding: 6px 8px 8px;
  background: #ece9d8;
  border-top: 1px solid #aca899;
  font-size: 10px;
  line-height: 1.35;
  color: #333;
}

.xp-embed-bar__note {
  margin: 0 0 6px;
}

.xp-embed-bar__link {
  font-weight: bold;
  color: #0066cc;
}

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--xp-taskbar-stack);
  min-height: var(--xp-taskbar-stack);
  display: flex;
  align-items: center;
  padding: 0 max(3px, var(--xp-safe-right)) var(--xp-safe-bottom) max(3px, var(--xp-safe-left));
  gap: 5px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #3168d5 0%, #245edc 14%, #1b45b5 50%, #1941a5 92%, #153a92 100%);
  border-top: 1px solid #6ca0f0;
  box-shadow:
    0 -1px 0 #0d2870,
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 200;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px 0 6px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c9f3c 0%, #2d7a2d 45%, #1d5a1d 100%);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  cursor: pointer;
  box-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.start-button:hover {
  filter: brightness(1.06);
}

.start-button--pressed,
.start-button[aria-expanded="true"] {
  background: linear-gradient(180deg, #2d7a2d 0%, #1d5a1d 100%);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.start-button__flag {
  width: 21px;
  height: 21px;
  background: conic-gradient(
    #f55 0deg 90deg,
    #5a5 90deg 180deg,
    #55f 180deg 270deg,
    #ff5 270deg 360deg
  );
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.taskbar__quick {
  flex: 1;
}

.taskbar__tray {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  padding: 0 8px 0 6px;
  background: linear-gradient(180deg, #1c8ce8 0%, #0d72c4 35%, #095a9e 70%, #084a8a 100%);
  border: 1px solid #0a3d75;
  border-radius: 2px;
  box-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 1px 0 rgba(0, 0, 0, 0.2);
}

.tray-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  margin: 0;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #003366;
  cursor: pointer;
}

.tray-lang:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.tray-lang:active {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.tray-lang__code {
  pointer-events: none;
}

.tray-divider {
  width: 1px;
  height: 18px;
  margin: 0 6px 0 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);
}

.tray-clock {
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 0 #003366;
  white-space: nowrap;
}

.start-menu {
  position: fixed;
  left: max(2px, var(--xp-safe-left));
  bottom: var(--xp-taskbar-stack);
  width: 384px;
  max-width: calc(100vw - 8px - var(--xp-safe-left) - var(--xp-safe-right));
  background: #d3e5fa;
  border: 1px solid #0a246a;
  border-radius: 6px 6px 0 0;
  box-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.35) inset,
    4px 6px 16px rgba(0, 0, 0, 0.5);
  z-index: 210;
  overflow: visible;
}

.start-menu__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 8px;
  background: linear-gradient(180deg, #1f5fc9 0%, #2b6fd8 18%, #245edc 45%, #1a4eb8 100%);
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #0d3a8c;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 0 #003399;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.start-menu__header--interactive {
  cursor: pointer;
  outline-offset: 2px;
}

.start-menu__header--interactive:hover .start-menu__user {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.start-menu__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, #8ec5ff, #245edc);
  overflow: hidden;
}

.start-menu__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-menu__body {
  display: flex;
  min-height: 208px;
  background: #fff;
  border-bottom: 1px solid #7a9db9;
}

.start-menu__left {
  flex: 1;
  min-width: 0;
  padding: 8px 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, #f2f7fc 0%, #ffffff 28%);
  border-right: 1px solid #7eb3e8;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.9) inset;
}

.start-menu__right {
  width: 100px;
  flex-shrink: 0;
  padding: 8px 6px 10px;
  background: linear-gradient(180deg, #ffc85c 0%, #f5a01a 35%, #e8890c 70%, #d97a00 100%);
  border-left: 1px solid #b85a00;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35);
}

.start-menu__pinned-label {
  font-size: 10px;
  font-weight: bold;
  color: #2d4a6e;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.start-search {
  display: block;
}

.start-search__input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #7a9db9;
  border-radius: 2px;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  box-shadow: 1px 1px 0 #fff inset;
}

.start-search-results {
  list-style: none;
  margin: 0;
  padding: 2px;
  max-height: 140px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #aca899;
}

.start-search-results li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  border: none;
  background: transparent;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.start-search-results li button:hover,
.start-search-results li button:focus {
  background: #316ac5;
  color: #fff;
}

.start-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-menu__list--system .start-item {
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px 12px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  height: auto;
  min-height: 64px;
  color: #3d2200;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}

.start-menu__list--system .start-item > span:not(.start-item__icon) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}

.start-menu__list--system .start-item:hover,
.start-menu__list--system .start-item:focus {
  color: #fff;
  text-shadow: 1px 1px 0 #5a3000;
}

.start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
}

.start-item:hover,
.start-item:focus {
  background: #316ac5;
  color: #fff;
}

.start-item__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 2px;
}

/* Не задавать здесь background — shorthand сбрасывает background-image у иконок (.notepad, .recycle и т.д.). */
.start-item__icon--programs {
  background-color: #d8d4ca;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect fill='%23c0c0c0' x='5' y='5' width='22' height='22' rx='1.5' stroke='%23808080'/%3E%3Cpath stroke='%23606060' stroke-width='0.75' d='M8 8h16v16H8z'/%3E%3Cpath stroke='%23888' stroke-width='0.45' d='M10 10h3v3h-3zm4.5 0h3v3h-3zm4.5 0h3v3h-3zM10 14.5h3v3h-3zm4.5 0h3v3h-3zm4.5 0h3v3h-3zM10 19h3v3h-3zm4.5 0h3v3h-3zm4.5 0h3v3h-3z'/%3E%3Ccircle cx='23' cy='9' r='2.8' fill='%23000'/%3E%3Cpath stroke='%23ddd' stroke-width='0.55' d='M21.2 7.2l3.6 3.6M24.8 7.2l-3.6 3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  border: 1px solid rgba(120, 60, 0, 0.35);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* Закреплённые в «Пуск»: те же картинки, что на рабочем столе */
.start-item__icon--folder,
.start-item__icon--doc,
.start-item__icon--notepad,
.start-item__icon--recycle,
.start-item__icon--contacts,
.start-item__icon--mypc,
.start-item__icon--network,
.start-item__icon--exe,
.start-item__icon--video {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  box-shadow: none;
}

.desktop-icon__img--exe,
.start-item__icon--exe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect fill='%23ece9d8' x='5' y='4' width='22' height='24' rx='2' stroke='%23047'/%3E%3Cpath fill='%231a3d1a' d='M9 8h14v6H9z'/%3E%3Cpath fill='%23fff' d='M11 10h4v2h-4zm6 0h4v2h-4z'/%3E%3Ctext x='16' y='22' font-size='7' text-anchor='middle' fill='%23000' font-family='Arial'%3EEXE%3C/text%3E%3C/svg%3E");
}

.desktop-icon__img--video,
.start-item__icon--video {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill%3D%27%23E0C040%27%20d%3D%27M2%208h10l2%203h16v17H2z%27%2F%3E%3Cpath%20fill%3D%27%23F5E6A0%27%20d%3D%27M2%2011h28v14H2z%27%2F%3E%3Cpath%20fill%3D%27%23C9A820%27%20d%3D%27M2%208h10l1%201H2z%27%2F%3E%3Crect%20x%3D%2712%27%20y%3D%2715%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%270.6%27%20fill%3D%27%232c2c2c%27%20stroke%3D%27%23111%27%20stroke-width%3D%270.6%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2716%27%20width%3D%274.5%27%20height%3D%277%27%20fill%3D%27%23eaeaea%27%2F%3E%3Crect%20x%3D%2718.3%27%20y%3D%2716%27%20width%3D%274.5%27%20height%3D%277%27%20fill%3D%27%23eaeaea%27%2F%3E%3Crect%20x%3D%2723.4%27%20y%3D%2716%27%20width%3D%271.8%27%20height%3D%277%27%20fill%3D%27%23eaeaea%27%2F%3E%3Ccircle%20cx%3D%2714.8%27%20cy%3D%2717.5%27%20r%3D%270.55%27%20fill%3D%27%23555%27%2F%3E%3Ccircle%20cx%3D%2714.8%27%20cy%3D%2721.5%27%20r%3D%270.55%27%20fill%3D%27%23555%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2717.5%27%20r%3D%270.55%27%20fill%3D%27%23555%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2721.5%27%20r%3D%270.55%27%20fill%3D%27%23555%27%2F%3E%3Cpolygon%20points%3D%278%2C18%208%2C24%2012%2C21%27%20fill%3D%27%23c00%27%20stroke%3D%27%23800%27%20stroke-width%3D%270.4%27%2F%3E%3C%2Fsvg%3E");
}

.start-menu__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 9px 8px;
  background: linear-gradient(180deg, #3a73d0 0%, #2a62c4 25%, #245edc 55%, #1e4eb8 100%);
  border-top: 1px solid #6ca0f0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
}

.start-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 14px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #4ca6ff 0%, #1f7ae8 18%, #156bd4 55%, #0d52b8 100%);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  cursor: pointer;
  box-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 1px 0 rgba(0, 0, 0, 0.12);
}

.start-footer-btn:hover {
  filter: brightness(1.05);
}

.start-footer-btn--off {
  font-weight: bold;
}

.start-footer-off-wrap {
  position: relative;
}

.turnoff-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 210px;
  padding: 5px;
  background: linear-gradient(180deg, #f5f1e8 0%, #ece9d8 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow:
    1px 1px 0 #fff inset,
    3px 4px 12px rgba(0, 0, 0, 0.4);
}

.turnoff-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.turnoff-menu__item:hover,
.turnoff-menu__item:focus {
  background: #316ac5;
  color: #fff;
}

.turnoff-menu__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 2px;
}

.turnoff-menu__icon--standby {
  background: linear-gradient(135deg, #ffd080, #e08000);
}

.turnoff-menu__icon--cache {
  background: linear-gradient(135deg, #7ec8e8, #2a7ab8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sleep-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: var(--xp-safe-top) var(--xp-safe-right) var(--xp-safe-bottom) var(--xp-safe-left);
  box-sizing: border-box;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  cursor: none;
}

.sleep-overlay[hidden] {
  display: none !important;
}

.sleep-bar {
  width: min(360px, 85vw);
}

.sleep-bar-track {
  height: 14px;
  border: 2px solid #333;
  border-radius: 2px;
  background: #111;
  overflow: hidden;
}

.sleep-bar-chunks {
  height: 100%;
  width: 200%;
  background: repeating-linear-gradient(
    90deg,
    #3a9f3a 0px,
    #3a9f3a 8px,
    #1a5a1a 8px,
    #1a5a1a 10px
  );
  animation: sleep-scroll 1.2s linear infinite;
}

@keyframes sleep-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.sleep-hint {
  margin: 0;
  max-width: 320px;
  padding: 0 16px;
  color: #888;
  font-size: 11px;
  text-align: center;
  cursor: none;
}

/* Windows XP–style welcome / log off screen */
.logoff-screen {
  position: fixed;
  inset: 0;
  z-index: 350;
  padding: var(--xp-safe-top) var(--xp-safe-right) var(--xp-safe-bottom) var(--xp-safe-left);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  color: #fff;
  cursor: default;
  user-select: none;
}

.logoff-screen[hidden] {
  display: none !important;
}

.logoff-screen__top {
  flex-shrink: 0;
  height: 44px;
  background: linear-gradient(180deg, #003090 0%, #001e5c 100%);
  border-bottom: 1px solid #001448;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.logoff-screen__main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: 28px 36px 32px;
  background:
    radial-gradient(ellipse 95% 75% at 0% 0%, rgba(190, 220, 255, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
    linear-gradient(185deg, #6f94e0 0%, #5578d4 28%, #4a6bc8 55%, #3f5fc0 100%);
}

.logoff-screen__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding-right: 12px;
}

.logoff-screen__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logoff-screen__flag {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
  background:
    conic-gradient(from 0deg at 50% 50%, #e02020 0deg 90deg, #20a020 90deg 180deg, #2060e0 180deg 270deg, #e0c020 270deg 360deg);
  position: relative;
}

.logoff-screen__flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.12) 100%
  );
  border-radius: 2px;
  pointer-events: none;
}

.logoff-screen__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
  text-shadow: 1px 2px 4px rgba(0, 20, 80, 0.45);
}

.logoff-screen__brand-line--ms {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.02em;
}

.logoff-screen__brand-line--xp {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.01em;
}

.logoff-screen__hint {
  margin: 0;
  max-width: 22em;
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 1px 1px 2px rgba(0, 30, 90, 0.4);
}

.logoff-screen__vline {
  width: 2px;
  flex-shrink: 0;
  margin: 0 8px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.35) 100%
  );
  box-shadow: 1px 0 0 rgba(0, 40, 120, 0.2);
  border-radius: 1px;
}

.logoff-screen__right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
}

.logoff-screen__user-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 18px 16px;
  max-width: 100%;
  background: linear-gradient(
    180deg,
    rgba(100, 140, 220, 0.42) 0%,
    rgba(70, 110, 200, 0.38) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 30, 100, 0.25),
    1px 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.logoff-screen__avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.logoff-screen__user-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.logoff-screen__name-hit {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.logoff-screen__username {
  display: block;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 30, 90, 0.5);
}

.logoff-screen__name-hit:hover .logoff-screen__username,
.logoff-screen__name-hit:focus-visible .logoff-screen__username {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.logoff-screen__name-hit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.logoff-screen__pwd-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 1px 1px 1px rgba(0, 40, 100, 0.4);
}

.logoff-screen__pwd-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 2px;
}

.logoff-screen__pwd-hint {
  margin: 6px 0 0;
  padding: 0;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.35;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 1px 1px 1px rgba(0, 30, 80, 0.45);
}

.logoff-screen__pwd-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 2px 6px;
  border: 1px solid #2a4a8a;
  border-radius: 2px;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  box-shadow: 1px 1px 0 #fff inset;
}

.logoff-screen__go {
  width: 26px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #1a5a1a;
  border-radius: 2px;
  background: linear-gradient(180deg, #5cb85c 0%, #2d8a2d 55%, #1d6a1d 100%);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.logoff-screen__go:hover {
  filter: brightness(1.08);
}

.logoff-screen__go:active {
  filter: brightness(0.95);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.logoff-screen__orange {
  flex-shrink: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffb040 0%, #ff8c00 40%, #e07000 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.logoff-screen__bottom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 20px 12px;
  background: linear-gradient(180deg, #002878 0%, #001a5c 100%);
  border-top: 1px solid #001448;
}

.logoff-screen__lang {
  flex-shrink: 0;
  border-color: rgba(255, 255, 255, 0.28);
}

.logoff-screen__foot-note {
  margin: 0;
  flex: 1;
  max-width: 420px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  text-align: right;
}

@media (max-width: 720px) {
  .logoff-screen__main {
    flex-direction: column;
    padding: 20px 16px 24px;
    gap: 16px;
  }

  .logoff-screen__vline {
    width: 100%;
    height: 2px;
    margin: 0;
  }

  .logoff-screen__right {
    justify-content: center;
    padding-left: 0;
  }

  .logoff-screen__bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .logoff-screen__foot-note {
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .start-menu {
    width: min(384px, calc(100vw - 8px));
  }
}

/* Иконки: контакты, «Мой компьютер», сеть, видео, .exe (32×32 SVG в стиле Windows XP) */
.desktop-icon__img--contacts,
.start-item__icon--contacts {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%2722%27%20height%3D%2724%27%20rx%3D%271.2%27%20fill%3D%27%23b8956a%27%20stroke%3D%27%234a3520%27%20stroke-width%3D%270.9%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2720%27%20rx%3D%270.5%27%20fill%3D%27%23f0e4d0%27%20stroke%3D%27%238a7050%27%20stroke-width%3D%270.5%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2711.5%27%20r%3D%273.2%27%20fill%3D%27%235cb85c%27%20stroke%3D%27%231a5a1a%27%20stroke-width%3D%270.6%27%2F%3E%3Cpath%20d%3D%27M9.5%2023.5c0.8-3.8%2013.2-3.8%2014%200v1.5h-14z%27%20fill%3D%27%235cb85c%27%20stroke%3D%27%231a5a1a%27%20stroke-width%3D%270.6%27%2F%3E%3Cpath%20stroke%3D%27%23a08060%27%20stroke-width%3D%270.5%27%20d%3D%27M10%2017h12M10%2019h10%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%273%27%20height%3D%2724%27%20rx%3D%270.5%27%20fill%3D%27%238a6540%27%2F%3E%3C%2Fsvg%3E");
}

.desktop-icon__img--mypc,
.start-item__icon--mypc {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Crect%20fill%3D%27%23b8b8b8%27%20x%3D%272%27%20y%3D%276%27%20width%3D%2717%27%20height%3D%2713%27%20rx%3D%271%27%20stroke%3D%27%23333%27%20stroke-width%3D%270.8%27%2F%3E%3Crect%20fill%3D%27%237ec8ff%27%20x%3D%274%27%20y%3D%278%27%20width%3D%2713%27%20height%3D%278%27%2F%3E%3Crect%20fill%3D%27%23339933%27%20x%3D%2712%27%20y%3D%2714%27%20width%3D%272%27%20height%3D%271.5%27%2F%3E%3Crect%20fill%3D%27%23888%27%20x%3D%278%27%20y%3D%2719%27%20width%3D%275%27%20height%3D%272%27%20rx%3D%270.3%27%2F%3E%3Crect%20fill%3D%27%23666%27%20x%3D%276%27%20y%3D%2720.5%27%20width%3D%279%27%20height%3D%271.2%27%20rx%3D%270.2%27%2F%3E%3Crect%20fill%3D%27%23c8c8c8%27%20x%3D%2720%27%20y%3D%277%27%20width%3D%2710%27%20height%3D%2717%27%20rx%3D%270.8%27%20stroke%3D%27%23333%27%20stroke-width%3D%270.8%27%2F%3E%3Crect%20fill%3D%27%233a3a3a%27%20x%3D%2722%27%20y%3D%279%27%20width%3D%276%27%20height%3D%271.2%27%2F%3E%3Crect%20fill%3D%27%231a1a1a%27%20x%3D%2722%27%20y%3D%2711.5%27%20width%3D%276%27%20height%3D%277%27%20opacity%3D%270.35%27%2F%3E%3Crect%20fill%3D%27%232d8a2d%27%20x%3D%2723.5%27%20y%3D%2721%27%20width%3D%273%27%20height%3D%272%27%20rx%3D%270.3%27%2F%3E%3C%2Fsvg%3E");
}

/* «Сеть» — стиль Windows XP (глобус + два ПК), 32×32 как у SVG-папки/.exe */
.desktop-icon__img--network,
.start-item__icon--network {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10' r='8.5' fill='%237ABAF0' stroke='%2300366D' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-opacity='0.9' stroke-width='0.85' d='M7.5 10h17M16 3v14'/%3E%3Cellipse cx='16' cy='10' rx='8.5' ry='3.2' fill='none' stroke='%23C5E3FF' stroke-width='0.6'/%3E%3Cellipse cx='16' cy='10' rx='3.8' ry='8.5' fill='none' stroke='%23C5E3FF' stroke-width='0.6'/%3E%3Cellipse cx='16' cy='10' rx='6' ry='6.5' fill='none' stroke='%239BC8EB' stroke-width='0.45'/%3E%3Crect x='4' y='20' width='9' height='8' rx='1' fill='%23D4D0C8' stroke='%23333333'/%3E%3Crect x='5.5' y='21.5' width='6' height='4' fill='%238EC5FF' stroke='%23004777'/%3E%3Crect x='5' y='28' width='9' height='1.5' rx='0.3' fill='%23999'/%3E%3Crect x='19' y='20' width='9' height='8' rx='1' fill='%23D4D0C8' stroke='%23333333'/%3E%3Crect x='20.5' y='21.5' width='6' height='4' fill='%238EC5FF' stroke='%23004777'/%3E%3Crect x='19' y='28' width='9' height='1.5' rx='0.3' fill='%23999'/%3E%3Cpath d='M13 24h6' stroke='%23505050' stroke-width='1'/%3E%3Cpath d='M16 24v-6' stroke='%23505050' stroke-width='0.9'/%3E%3C/svg%3E");
}

.xp-notepad {
  padding: 8px 10px;
  min-height: 200px;
}

.xp-notepad__pre {
  margin: 0;
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.xp-notepad__pre a {
  color: #0066cc;
}

.xp-sysinfo {
  padding: 4px 4px 8px;
  font-size: 12px;
  line-height: 1.45;
}

.xp-sysinfo__h {
  margin: 12px 0 6px;
  font-size: 13px;
}

.xp-sysinfo__h:first-child {
  margin-top: 0;
}

.xp-sysinfo p {
  margin: 0 0 8px;
}

/* Окно «Игры» */
.xp-games {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.xp-games--mines-only {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
  background: #ece9d8;
}

.xp-games__tabs {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px 6px 0;
  background: linear-gradient(180deg, #ece9d8 0%, #ddd8c8 100%);
  border-bottom: 1px solid #aca899;
}

.xp-games__tab {
  padding: 4px 12px 6px;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  border: 1px solid #aca899;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #d4d0c8;
  cursor: pointer;
}

.xp-games__tab--active {
  background: #ece9d8;
  margin-bottom: -1px;
  padding-bottom: 7px;
  font-weight: bold;
}

.xp-games__panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
  background: #ece9d8;
}

.xp-games__panel[hidden] {
  display: none !important;
}

.xp-games__plink {
  color: #0066cc;
  font-weight: bold;
}

.xp-mines {
  font-family: Tahoma, sans-serif;
}

.xp-mines__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.xp-mines__mines-left {
  font-size: 11px;
  font-weight: bold;
}

.xp-mines__reset {
  font-size: 11px;
  padding: 2px 10px;
}

.xp-mines__status {
  margin: 0 0 6px;
  min-height: 1.2em;
  font-size: 11px;
  font-weight: bold;
  color: #003399;
}

.xp-mines__grid {
  display: grid;
  grid-template-columns: repeat(9, 28px);
  grid-template-rows: repeat(9, 28px);
  gap: 1px;
  width: max-content;
  border: 2px solid #808080;
  background: #808080;
}

.xp-mines__cell {
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 100%);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.xp-mines__cell--revealed {
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #808080;
  cursor: default;
}

.xp-mines__cell--flag {
  color: #c00;
}

.xp-mines__cell--mine {
  background: #e8e8e8;
  color: #000;
}

.xp-mines__hint {
  margin: 8px 0 0;
  font-size: 10px;
  color: #333;
  max-width: 280px;
}

/* BSOD (шуточный) */
.bsod-screen {
  position: fixed;
  inset: 0;
  z-index: 30000;
  padding: calc(24px + var(--xp-safe-top)) calc(24px + var(--xp-safe-right))
    calc(24px + var(--xp-safe-bottom)) calc(24px + var(--xp-safe-left));
  box-sizing: border-box;
  background: #0078d7;
  color: #fff;
  font-family: "Segoe UI", Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bsod-screen[hidden] {
  display: none !important;
}

.bsod-screen__inner {
  max-width: 560px;
}

.bsod-screen__title {
  margin: 0 0 20px;
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
}

.bsod-screen__line {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
}

.bsod-screen__tech {
  margin: 20px 0 24px;
  font-size: 13px;
  opacity: 0.95;
}

.bsod-screen__tech code {
  font-family: Consolas, monospace;
  background: rgba(0, 0, 0, 0.15);
  padding: 1px 6px;
}

.bsod-screen__reboot {
  padding: 8px 20px;
  font-size: 14px;
  font-family: inherit;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}

.bsod-screen__reboot:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 520px) {
  .bsod-screen__title {
    font-size: 48px;
  }

  .bsod-screen__line {
    font-size: 14px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .xp-window {
    resize: none;
  }
}

@media (max-width: 720px) {
  .xp-window {
    min-width: 0;
  }

  .xp-window--wmp {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .xp-window__btn {
    min-width: 36px;
    min-height: 28px;
  }
}

@media (pointer: coarse) {
  .xp-mines__grid {
    grid-template-columns: repeat(9, 32px);
    grid-template-rows: repeat(9, 32px);
  }

  .xp-mines__cell {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .xp-mines__reset {
    min-height: 36px;
    padding: 4px 12px;
  }
}

@media (max-width: 720px) {
  .xp-recycle-icons {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: 100%;
    min-height: 0;
  }

  .xp-recycle-file--file {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 12px 18px;
  }

  .xp-recycle-file__thumb-hit {
    max-width: 100%;
    box-sizing: border-box;
  }

  .xp-recycle-file__name {
    max-width: 100%;
    box-sizing: border-box;
  }

  .xp-wmp-body {
    min-height: 0;
    overflow: hidden;
  }

  .xp-wmp-stage {
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .xp-wmp-video {
    max-width: 100%;
  }
}