/* XP.css goes in a cascade layer so every rule below wins over its
 * global element styles (button, input…) regardless of specificity. */
@import url("../vendor/xp.css/XP.css") layer(xp);

/* ================================================================ base */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  font: 11px Tahoma, "Pixelated MS Sans Serif", Geneva, Verdana, sans-serif;
  color: #000;
  background: #3a6ea5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
input, textarea, select { user-select: text; -webkit-user-select: text; }
.np-text, .mail-text, .search-input { user-select: text; -webkit-user-select: text; }

/* Buttons we draw ourselves: strip XP.css's classic button look. */
#taskbar :where(button), .ex-tb, .ex-go, .sm-foot-btn, .sc-arrow-link, .ex-sec-title,
.mail-tb, .ms-face, .login-user, .login-off, .balloon button, .cal-nav {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  cursor: default;
  outline: none;
}

.flag {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 16px;
  height: 16px;
  transform: perspective(40px) rotateY(-12deg) skewY(-4deg);
}
.flag i { border-radius: 2px 3px 2px 3px; }
.flag i:nth-child(1) { background: #f35325; }
.flag i:nth-child(2) { background: #81bc06; }
.flag i:nth-child(3) { background: #05a6f0; }
.flag i:nth-child(4) { background: #ffba08; }

kbd {
  font: 11px Tahoma, sans-serif;
  padding: 0 4px;
  border: 1px solid #aca899;
  border-radius: 3px;
  background: #fff;
  color: #000;
}

/* ============================================================= desktop */
#desktop {
  position: fixed;
  inset: 0 0 30px 0;
  background:
    url("../assets/wallpaper.webp") center 60% / cover no-repeat,
    url("../assets/wallpaper.svg") center / cover no-repeat,
    #3a6ea5;
  overflow: hidden;
}
#icons, #windows { position: absolute; inset: 0; }
#windows { pointer-events: none; }
#windows > * { pointer-events: auto; }
#desktop.refreshing #icons { visibility: hidden; }

.desk-icon {
  position: absolute;
  width: 76px;
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  outline: none;
  touch-action: none;
}
.desk-icon img { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); pointer-events: none; }
.desk-icon span {
  max-width: 74px;
  padding: 1px 2px;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  text-shadow: 1px 1px 1px #000, 0 0 3px rgba(0, 0, 0, .6);
  overflow-wrap: anywhere;
}
.desk-icon.selected img { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)) brightness(.75) sepia(1) hue-rotate(190deg) saturate(4); }
.desk-icon.selected span { background: #0b61ff; text-shadow: none; }
.desk-icon:focus-visible span { outline: 1px dotted #fff; }
.desk-icon.dragging { opacity: .7; z-index: 5; }

/* ============================================================= windows */
.xpwin {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 180px;
  font-size: 11px;
}
.xpwin .title-bar { flex: none; cursor: default; touch-action: none; user-select: none; }
.xpwin .title-bar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-right: 8px;
  white-space: nowrap;
}
.xpwin .title-bar-text img { flex: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .4)); }
.xpwin .title-bar-text span { overflow: hidden; text-overflow: ellipsis; }
.xpwin .title-bar-controls { flex: none; }
.xpwin .window-body {
  flex: 1;
  min-height: 0;
  margin: 0 3px 3px;
  display: flex;
  flex-direction: column;
}
.xpwin .status-bar { flex: none; margin: 2px 0 0; }
.xpwin .status-bar-field { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xpwin:not(.active) {
  box-shadow: inset -1px -1px #6b86d6, inset 1px 1px #8ea6ea, inset -2px -2px #7c96e4,
    inset 2px 2px #a3bcf2, inset -3px -3px #7c96e4, inset 3px 3px #98b1ee;
}
.xpwin:not(.active) .title-bar {
  background: linear-gradient(180deg, #7697e7 0, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%,
    #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3 100%);
  border-color: #7b96e1;
}
.xpwin:not(.active) .title-bar-text { color: #d8e4f8; text-shadow: none; }
.xpwin:not(.active) .title-bar-controls button { opacity: .6; }

.xpwin.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}
.xpwin.maximized .title-bar { border-radius: 0; }
.xpwin.maximized .resize-handle { display: none; }

.resize-handle {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 13px;
  height: 13px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 55%, #aca899 55% 62%, transparent 62% 72%, #aca899 72% 79%, transparent 79% 89%, #aca899 89%);
}

/* dialogs / message boxes */
.xpwin.dialog .window-body { padding: 12px 12px 10px; }
.msg-row { display: flex; align-items: flex-start; gap: 12px; }
.msg-row img { flex: none; }
.msg-row p { margin: 4px 0 0; white-space: pre-line; line-height: 1.45; }
.msg-buttons { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.run-body .msg-buttons { justify-content: flex-end; }
.run-field { margin-top: 14px; gap: 8px; }
.run-field input { flex: 1; min-width: 0; }
.run-body .field-row-stacked { margin-top: 10px; }

/* ============================================================ menubar */
.menubar {
  flex: none;
  display: flex;
  padding: 1px 0;
  border-bottom: 1px solid #d8d2bd;
  position: relative;
  z-index: 20;
}
.mb-item { position: relative; padding: 2px 7px; cursor: default; outline: none; }
.mb-item:hover, .mb-item.open, .mb-item:focus-visible { background: #316ac5; color: #fff; }
.mb-drop, .ctx-menu, .sm-programs {
  margin: 0;
  padding: 2px;
  list-style: none;
  background: #fff;
  color: #000;
  border: 1px solid #aca899;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .35);
  font: 11px Tahoma, sans-serif;
}
.mb-drop { position: absolute; left: 0; top: 100%; min-width: 170px; }
.mb-drop li, .ctx-menu li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 3px 18px 3px 22px;
  white-space: nowrap;
}
.mb-drop li:hover, .ctx-menu li:hover { background: #316ac5; color: #fff; }
.mb-drop li.checked::before { content: "✓"; position: absolute; left: 7px; }
.mb-drop li.disabled { color: #aca899; }
.mb-drop li.disabled:hover { background: none; color: #aca899; }
.mb-drop kbd { border: 0; background: none; padding: 0; color: inherit; }
.mb-drop li.sep, .ctx-menu li.sep { height: 1px; padding: 0; margin: 3px 1px; background: #aca899; }

.ctx-menu { position: fixed; z-index: 100005; min-width: 170px; }
.ctx-menu li.bold { font-weight: bold; }

/* ============================================================= taskbar */
#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  z-index: 100000;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%,
    #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%,
    #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
}
#start-button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px 0 10px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #3c8f3c 0, #5ac25a 8%, #4bb44b 20%, #3a9f3a 50%, #2f8d2f 80%, #3d9f3d 94%, #2b782b 100%);
  box-shadow: inset 0 1px 1px #9df09d, inset -2px 0 2px rgba(0, 0, 0, .25), 2px 0 4px rgba(0, 0, 0, .35);
  color: #fff;
  font: italic bold 19px "Trebuchet MS", "Franklin Gothic Medium", sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
  letter-spacing: .5px;
}
#start-button:hover { filter: brightness(1.1); }
#start-button.pressed, #start-button:active { filter: brightness(.85); }
#start-button .flag { width: 18px; height: 18px; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .4)); }

#tasks {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 3px;
  padding: 3px 6px;
  overflow: hidden;
}
#taskbar .task {
  flex: 0 1 160px;
  min-width: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 3px;
  color: #fff;
  font: 11px Tahoma, sans-serif;
  background: linear-gradient(180deg, #5b9dfb, #3a80f3 12%, #3a7cf0 88%, #2c63d3);
  box-shadow: inset -1px -1px rgba(0, 0, 0, .25), inset 1px 1px rgba(255, 255, 255, .25);
}
#taskbar .task:hover { background: linear-gradient(180deg, #7ab4ff, #53a1ff 12%, #4a95fb 88%, #3a7ae0); }
#taskbar .task.active {
  background: #1e52b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5), inset -1px -1px rgba(255, 255, 255, .15);
}
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task img { flex: none; }

#tray {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  border-left: 1px solid #1042af;
  box-shadow: inset 1px 0 1px #18bbff;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%,
    #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
}
#tray-search { display: flex; }
#tray-search:hover { filter: brightness(1.2); }
#clock { color: #fff; font: 11px Tahoma, sans-serif; white-space: nowrap; padding: 4px 2px; }

.balloon {
  position: absolute;
  right: 8px;
  bottom: 40px;
  width: 250px;
  padding: 8px 26px 10px 10px;
  background: #ffffe1;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, .35);
  font: 11px Tahoma, sans-serif;
  line-height: 1.4;
  animation: pop .25s ease-out;
}
.balloon::after {
  content: "";
  position: absolute;
  right: 36px;
  bottom: -12px;
  border: 12px solid transparent;
  border-top-color: #ffffe1;
  border-bottom: 0;
  border-right: 0;
  filter: drop-shadow(1px 1px 0 #000);
}
.balloon b { display: block; margin-bottom: 4px; }
.balloon p { margin: 0; }
.balloon button {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: 1px solid #aca899;
  border-radius: 3px;
  line-height: 12px;
  text-align: center;
}
.balloon button:hover { background: #e0301e; color: #fff; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

/* calendar popup */
.xp-calendar { position: fixed; right: 4px; bottom: 34px; width: 224px; z-index: 100003; }
.xp-calendar .window-body { margin: 8px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cal-nav { padding: 2px 6px; border-radius: 3px; }
.cal-nav:hover { background: #fff; box-shadow: 0 0 0 1px #aca899; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: 4px;
  text-align: center;
  background: #fff;
  border: 1px solid #7f9db9;
}
.cal-grid b { color: #666; font-size: 10px; padding-bottom: 2px; }
.cal-grid span { padding: 2px 0; }
.cal-grid .today { background: #316ac5; color: #fff; border-radius: 2px; }
.cal-now { margin: 8px 0 0; text-align: center; }

/* ========================================================== start menu */
#start-menu {
  position: fixed;
  left: 0;
  bottom: 30px;
  z-index: 100001;
  width: 390px;
  max-width: calc(100vw - 4px);
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, .5);
  font: 11px Tahoma, sans-serif;
  border: 1px solid #0831d9;
  border-bottom: 0;
}
.sm-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px 7px 0 0;
  color: #fff;
  font: bold 15px "Trebuchet MS", sans-serif;
  text-shadow: 1px 1px 2px #0f1089;
  background: linear-gradient(180deg, #1868ce 0, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%,
    #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
}
.sm-header img { border: 2px solid #fff; border-radius: 4px; background: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .4); }
.sm-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f09c3e 50%, transparent);
}
.sm-columns { display: flex; }
.sm-left, .sm-right { list-style: none; margin: 0; padding: 6px 2px; }
.sm-left { flex: 1; min-width: 0; }
.sm-right { width: 46%; background: #d3e5fa; border-left: 1px solid #95bdee; }
#start-menu li[role=menuitem] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  outline: none;
  cursor: default;
}
.sm-left li[role=menuitem] { padding: 4px 6px; }
.sm-left b { display: block; }
.sm-left small { display: block; color: #777; }
.sm-right li span { color: #0a246a; }
.sm-right li.bold span { font-weight: bold; }
#start-menu li[role=menuitem]:hover, #start-menu li[role=menuitem]:focus-visible { background: #316ac5; color: #fff; }
#start-menu li[role=menuitem]:hover :is(span, small), #start-menu li[role=menuitem]:focus-visible :is(span, small) { color: #fff; }
#start-menu li.sep { height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, #c5c5c5 50%, transparent); }
.sm-right li.sep { background: linear-gradient(90deg, transparent, #adc6ec 50%, transparent); }
#start-menu li.all-programs { justify-content: center; gap: 8px; font-weight: bold; padding: 6px; }
.all-programs .arrow {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5ac25a, #2f8d2f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.all-programs .arrow::after { content: "▶"; color: #fff; font-size: 9px; font-style: normal; }
.sm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #4282d6 0, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%,
    #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d5 75%, #1165d1 83%, #0f61cb 88%);
}
.sm-foot-btn { display: flex; align-items: center; gap: 5px; padding: 3px 6px; color: #fff; border-radius: 3px; }
.sm-foot-btn:hover, .sm-foot-btn:focus-visible { background: rgba(255, 255, 255, .18); }
.sm-programs {
  position: absolute;
  left: 52%;
  bottom: 44px;
  width: 210px;
  max-height: 70vh;
  overflow: auto;
  z-index: 2;
  background: #fff;
}

/* ============================================================ explorer */
.ex-body { background: #fff; container-type: inline-size; }
.ex-toolbar, .mail-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: #ece9d8;
  border-bottom: 1px solid #d8d2bd;
  overflow: hidden;
}
.ex-tb {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px 0 3px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.ex-tb:not(:disabled):hover, .mail-tb:hover {
  border-color: #cecece;
  background: linear-gradient(180deg, #fff, #f0efe7);
  box-shadow: inset 0 -1px #e3e0d0;
}
.ex-tb:disabled { opacity: .5; }
.ex-tb i, .ex-go::before, .sc-arrow-link i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a6ec8f, #3aa52b 60%, #237a18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: bold 14px/1 Tahoma, sans-serif;
  font-style: normal;
}
.ex-tb.back i::before { content: "←"; }
.ex-tb.fwd i::before { content: "→"; }
.ex-sep { width: 1px; height: 22px; margin: 0 4px; background: #d8d2bd; }
.ex-address {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: #ece9d8;
  border-bottom: 1px solid #d8d2bd;
}
.ex-addr-label { color: #666; }
.ex-addr-field {
  flex: 1;
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  background: #fff;
  border: 1px solid #7f9db9;
  white-space: nowrap;
  overflow: hidden;
}
.ex-addr-field span { overflow: hidden; text-overflow: ellipsis; }
.ex-go { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.ex-go::before { content: "→"; width: 16px; height: 16px; font-size: 11px; }
.ex-main { flex: 1; min-height: 0; display: flex; }
.ex-side {
  flex: none;
  width: 190px;
  overflow: auto;
  padding: 12px 10px;
  background: linear-gradient(180deg, #7ba2e7, #6375d6);
}
.ex-sec { margin-bottom: 12px; }
.ex-sec-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px 5px 10px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, #fff 30%, #c6d3f7);
  color: #215dc6;
  font-weight: bold;
  text-align: left;
}
.ex-sec-title:hover { color: #428eff; }
.ex-sec-title i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #b0c1ee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
.ex-sec-title i::before { content: "«"; transform: rotate(90deg); font-size: 11px; line-height: 1; }
.ex-sec.collapsed .ex-sec-title i::before { transform: rotate(-90deg); }
.ex-sec.collapsed .ex-sec-body { display: none; }
.ex-sec-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  background: #d6dff7;
  border: 1px solid #fff;
  border-top: 0;
}
.ex-link { display: flex; align-items: center; gap: 6px; color: #215dc6; text-decoration: none; }
.ex-link:hover { color: #428eff; text-decoration: underline; }
.ex-details b { display: block; }
.ex-details small { display: block; color: #555; margin-top: 2px; }
.ex-details p { margin: 6px 0 0; line-height: 1.4; }
.ex-items {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px 12px;
  background: #fff;
}
.ex-item {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px;
  text-align: center;
  outline: none;
}
.ex-items.tiles .ex-item { width: 220px; flex-direction: row; text-align: left; gap: 8px; }
.ex-label { min-width: 0; }
.ex-label span { display: inline-block; padding: 0 2px; overflow-wrap: anywhere; }
.ex-label small { display: block; color: #777; padding: 0 2px; }
.ex-item.selected .ex-label span { background: #316ac5; color: #fff; }
.ex-item.selected img { filter: brightness(.8) sepia(1) hue-rotate(190deg) saturate(3); }
.ex-item:focus-visible .ex-label span { outline: 1px dotted #000; }
.ex-empty { color: #666; margin: 6px; }
@container (max-width: 440px) { .ex-side { display: none; } }

/* ============================================================== search */
.search-body { flex-direction: row !important; background: #fff; container-type: inline-size; }
.sc-side {
  flex: none;
  width: 170px;
  overflow: auto;
  padding: 12px 10px;
  color: #fff;
  background: linear-gradient(180deg, #7ba2e7, #6375d6);
}
.sc-side-title { font: bold 14px "Trebuchet MS", sans-serif; text-shadow: 1px 1px 1px #1c3f97; }
.sc-side p { margin: 8px 0; line-height: 1.4; }
.sc-engines { list-style: none; margin: 0 0 12px; padding: 0; }
.sc-arrow-link { width: 100%; display: flex; align-items: center; gap: 7px; padding: 3px 2px; text-align: left; }
.sc-arrow-link i { width: 16px; height: 16px; font-size: 10px; }
.sc-arrow-link i::before { content: "▶"; font-size: 8px; }
.sc-arrow-link:hover span, .sc-arrow-link:focus-visible span { text-decoration: underline; }
.sc-arrow-link.current span { font-weight: bold; }
.sc-hint { font-size: 11px; opacity: .95; }
.sc-hint code, .sc-hint kbd {
  font: 11px Consolas, monospace;
  padding: 0 3px;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.sc-main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #fff, #f3f6fd);
}
.sc-hero { display: flex; align-items: center; gap: 12px; }
.sc-hero h2 { margin: 0; font: bold 20px "Trebuchet MS", sans-serif; color: #1c4fa8; }
.sc-hero p { margin: 2px 0 0; color: #555; }
.sc-form { display: flex; flex-direction: column; gap: 6px; }
.sc-form > label { font-weight: bold; }
.sc-row { display: flex; align-items: center; gap: 6px; }
.sc-form .search-input { flex: 1; min-width: 0; height: 26px; font: 13px Tahoma, sans-serif; }
.sc-go { flex: none; height: 26px; }
.sc-using { margin-top: 2px; }
.sc-using label { width: auto; }
.sc-using select { min-width: 150px; }
.sc-recent-box { margin: 0; }
.sc-recent { list-style: none; margin: 0; padding: 0; }
.sc-recent li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.sc-recent a { min-width: 0; display: flex; align-items: center; gap: 5px; color: #0b3ea8; text-decoration: none; }
.sc-recent a span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-recent a:hover span { text-decoration: underline; }
.sc-recent small { flex: none; color: #888; }
.sc-recent .sc-none { color: #888; }
.sc-clear { text-align: right; margin-top: 4px; }
@container (max-width: 470px) { .sc-side { display: none; } }

/* ============================================================= notepad */
.np-text, .mail-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 1px solid #7f9db9;
  padding: 4px 6px;
  font: 13px/1.4 "Lucida Console", Monaco, Consolas, monospace;
  white-space: pre-wrap;
  overflow: auto;
}
.np-text.nowrap { white-space: pre; }
.np-text[readonly] { background: #fff; }

/* ================================================================ mail */
.mail-tb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 8px; border: 1px solid transparent; border-radius: 3px; }
.mail-fields { flex: none; display: grid; gap: 4px; padding: 6px; }
.mail-row { display: flex; align-items: center; gap: 6px; }
.mail-row label { flex: none; width: 50px; justify-content: flex-end; }
.mail-row input { flex: 1; min-width: 0; }
#mail-to { background: #f4f3ee; }
.mail-text { width: auto; margin: 0 6px 4px; font: 13px/1.4 Tahoma, sans-serif; }

/* ======================================================== minesweeper */
.ms-frame {
  padding: 6px;
  background: #c0c0c0;
  border: 3px solid;
  border-color: #fff #7b7b7b #7b7b7b #fff;
}
.ms-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 5px;
  border: 2px solid;
  border-color: #7b7b7b #fff #fff #7b7b7b;
}
.ms-led {
  min-width: 39px;
  padding: 1px 2px;
  background: #000;
  color: #f00;
  font: bold 22px/1 "Courier New", monospace;
  text-align: center;
  letter-spacing: 1px;
  border: 1px solid;
  border-color: #7b7b7b #fff #fff #7b7b7b;
}
.ms-face {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #7b7b7b #7b7b7b #fff;
}
.ms-face:active { border-color: #7b7b7b #fff #fff #7b7b7b; }
.ms-grid {
  display: grid;
  width: max-content;
  border: 3px solid;
  border-color: #7b7b7b #fff #fff #7b7b7b;
  touch-action: manipulation;
}
.ms-cell {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #7b7b7b #7b7b7b #fff;
  font: bold 12px/1 Verdana, Tahoma, sans-serif;
  cursor: default;
}
.ms-cell.open { border: 0; box-shadow: inset 1px 1px 0 #8a8a8a; }
.ms-cell.flag::before { content: "🚩"; font-size: 9px; }
.ms-cell.mine::before { content: "💣"; font-size: 10px; }
.ms-cell.wrong::before { content: "❌"; font-size: 8px; }
.ms-cell.boom { background: #f00; }
.ms-cell.n1 { color: #0000ff; } .ms-cell.n2 { color: #008000; } .ms-cell.n3 { color: #ff0000; }
.ms-cell.n4 { color: #000080; } .ms-cell.n5 { color: #800000; } .ms-cell.n6 { color: #008080; }
.ms-cell.n7 { color: #000; } .ms-cell.n8 { color: #808080; }

/* ============================================================= screens */
.screen {
  position: fixed;
  inset: 0;
  z-index: 200000;
  color: #fff;
  font-family: Tahoma, sans-serif;
  user-select: none;
}
.boot-name { display: flex; align-items: flex-start; gap: 4px; font: bold 34px "Franklin Gothic Medium", "Trebuchet MS", sans-serif; }
.boot-name b { color: #f60; font: italic bold 24px "Trebuchet MS", sans-serif; }

#boot-screen {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.boot-logo { display: flex; align-items: center; gap: 14px; }
.screen .flag { width: 56px; height: 56px; gap: 3px; }
.boot-bar {
  position: relative;
  display: flex;
  gap: 2px;
  width: 150px;
  height: 14px;
  padding: 2px;
  border: 2px solid #b2b2b2;
  border-radius: 5px;
  overflow: hidden;
}
.boot-bar i {
  flex: none;
  width: 9px;
  border-radius: 1px;
  background: linear-gradient(180deg, #2838c7, #5979ef 50%, #2838c7);
  animation: boot 1.6s linear infinite;
}
@keyframes boot { from { transform: translateX(-40px); } to { transform: translateX(160px); } }
.boot-foot { position: absolute; left: 24px; bottom: 16px; margin: 0; color: #888; font-size: 12px; }

#login-screen { display: flex; flex-direction: column; background: #5a7edc; }
.login-top, .login-bottom { flex: none; background: #00309c; position: relative; }
.login-top { height: 12vh; min-height: 50px; }
.login-top::after, .login-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
}
.login-top::after { bottom: 0; background: linear-gradient(90deg, #00309c, #fff 50%, #00309c); opacity: .7; }
.login-bottom::before { top: 0; background: linear-gradient(90deg, #00309c, #f89b36 50%, #00309c); }
.login-mid {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 20px;
  background: radial-gradient(circle at 15% 15%, #a4bff6 0, #7c9ee8 18%, #5a7edc 45%, #5173d8 100%);
}
.login-left { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.login-left p { margin: 0; font-size: 15px; }
.login-divider { width: 1px; align-self: stretch; margin: 8vh 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .8) 50%, transparent); }
.login-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 40px 8px 8px;
  border-radius: 8px;
  font: 20px Tahoma, sans-serif;
}
.login-user img { border: 2px solid #fff; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #5a7edc; }
.login-user:hover, .login-user:focus-visible { background: linear-gradient(90deg, #00309c, rgba(0, 48, 156, 0)); }
.login-user:hover img, .login-user:focus-visible img { border-color: #ffc93c; }
.login-welcome { display: none; margin: 0; font: italic bold 52px "Trebuchet MS", sans-serif; text-shadow: 2px 2px 3px #1c3f97; }
#login-screen.welcome :is(.login-left, .login-right, .login-divider) { display: none; }
#login-screen.welcome .login-welcome { display: block; }
.login-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 32px; }
.login-bottom p { margin: 0; text-align: right; font-size: 11px; opacity: .9; }
.login-off { display: flex; align-items: center; gap: 8px; font: 14px Tahoma, sans-serif; }
.login-off img { border-radius: 5px; }
.login-off:hover { text-decoration: underline; }

#shutdown-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #5a7edc;
  text-align: center;
}
#shutdown-screen p { margin: 0; }
.sd-busy { font-size: 22px; }
.sd-safe { color: #f7931e; font: bold 30px "Trebuchet MS", sans-serif; line-height: 1.3; }
.sd-hint { color: #aaa; font-size: 12px; }
#shutdown-screen .sd-safe, #shutdown-screen .sd-hint { display: none; }
#shutdown-screen.safe { background: #000; cursor: pointer; }
#shutdown-screen.safe .sd-busy { display: none; }
#shutdown-screen.safe .sd-safe, #shutdown-screen.safe .sd-hint { display: block; }

/* ==================================================== volume popup */
#tray-volume { display: flex; }
#tray-volume:hover { filter: brightness(1.2); }
.xp-volume { position: fixed; right: 4px; bottom: 34px; width: 210px; z-index: 100003; }
.xp-volume .window-body { margin: 8px 10px 10px; }
.xp-volume p { margin: 0 0 6px; }
.vol-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vol-row input { flex: 1; min-width: 0; }

/* =============================================== internet explorer */
.ie-body { background: #ece9d8; container-type: inline-size; }
.ie-toolbar { gap: 1px; }
.ex-tb.icon-only { padding: 0 3px; }
.ex-tb:disabled img { filter: grayscale(1); opacity: .6; }
.ie-address { gap: 6px; }
.ie-addr-field {
  flex: 1;
  min-width: 0;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 3px;
  background: #fff;
  border: 1px solid #7f9db9;
}
.ie-addr-icon { display: flex; flex: none; }
.ie-addr-field .ie-addr-input {
  flex: 1;
  min-width: 0;
  height: 19px;
  border: 0;
  padding: 0 3px;
  font: 11px Tahoma, sans-serif;
  outline: none;
}
.ie-infobar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #ffffe1;
  border-bottom: 1px solid #aca899;
  cursor: default;
}
.ie-infobar:hover, .ie-infobar:focus-visible { background: #316ac5; color: #fff; outline: none; }
.ie-main { flex: 1; min-height: 0; display: flex; background: #fff; border-top: 1px solid #7f9db9; }
.ie-view { flex: 1; min-width: 0; position: relative; overflow: auto; background: #fff; }
.ie-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* Clicks inside an iframe never reach the page, so cover it while the window is
 * inactive or being dragged — the first click then focuses the window. */
.xpwin:not(.active) .ie-view::after, .xpwin.dragging .ie-view::after { content: ""; position: absolute; inset: 0; }
.ie-pane { flex: none; width: 200px; display: flex; flex-direction: column; border-right: 4px solid #ece9d8; overflow: hidden; }
.ie-pane.sc-side { padding: 0; }
.ie-pane-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px 3px 8px;
  background: #ece9d8;
  color: #000;
  font: bold 11px Tahoma, sans-serif;
  text-shadow: none;
}
.ie-pane-close { min-width: 0; min-height: 0; width: 18px; height: 18px; padding: 0; font-size: 13px; line-height: 1; }
.ie-pane-body { flex: 1; overflow: auto; padding: 10px; }
.ie-pane-form { display: flex; gap: 4px; }
.ie-pane-form input { flex: 1; min-width: 0; }
.ie-pane-form button, .ie-fav-actions button { min-width: 0; padding: 0 9px; }
.ie-fav-pane { background: #fff; }
.ie-fav-actions { display: flex; gap: 4px; margin-bottom: 8px; }
.ie-fav-list { list-style: none; margin: 0; padding: 0; }
.ie-fav-list a { display: flex; align-items: center; gap: 6px; padding: 3px 2px; color: #000; text-decoration: none; }
.ie-fav-list a:hover { background: #316ac5; color: #fff; }
.ie-status { display: flex; align-items: center; gap: 4px; }
.ie-status-icon { display: flex; }
.xpwin .ie-progress-field { flex: 0 0 110px; }
.ie-progress { height: 10px; padding: 1px; border: 1px solid #aca899; background: #fff; }
.ie-progress i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #2fa32a 0 6px, transparent 6px 8px); }
.xpwin .ie-zone { flex: 0 0 120px; display: flex; align-items: center; gap: 4px; }
@container (max-width: 560px) {
  .ie-toolbar .ex-tb span { display: none; }
  .ie-pane, .xpwin .ie-zone, .xpwin .ie-progress-field { display: none; }
}

/* IE home page */
.ie-home { min-height: 100%; background: #f2f6fc; color: #333; font: 12px/1.45 Verdana, Tahoma, sans-serif; user-select: text; }
.hp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(180deg, #3f82dc, #1c56b6);
  border-bottom: 3px solid #f39c34;
}
.hp-logo { font: italic bold 26px/1.1 "Trebuchet MS", sans-serif; text-shadow: 1px 1px 2px #0f2f7a; }
.hp-logo small { display: block; margin-top: 3px; font: 12px Verdana, sans-serif; opacity: .9; text-shadow: none; }
.hp-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-nav a { color: #fff; font-weight: bold; text-decoration: none; }
.hp-nav a:hover { text-decoration: underline; }
.hp-wrap { max-width: 780px; margin: 0 auto; padding: 16px; }
.hp-search, .hp-box { background: #fff; border: 1px solid #a9bfe3; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.hp-search { padding: 14px 16px; }
.hp-search-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hp-search h2 { margin: 0; font: bold 17px "Trebuchet MS", sans-serif; color: #1c4fa8; }
.hp-date { color: #888; font-size: 11px; }
.hp-row { display: flex; gap: 6px; }
.hp-form .hp-q { flex: 1; min-width: 0; height: 28px; font: 14px Tahoma, sans-serif; }
.hp-row button { height: 28px; }
.hp-engines { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.hp-radio { display: inline-flex; align-items: center; }
.hp-tip { margin: 10px 0 0; color: #777; font-size: 11px; }
.hp-tip code { padding: 0 3px; background: #eef2fa; border-radius: 2px; font: 11px Consolas, monospace; color: #1c4fa8; }
.hp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.hp-box { overflow: hidden; }
.hp-box h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 5px 10px;
  color: #fff;
  font: bold 12px Verdana, sans-serif;
  background: linear-gradient(180deg, #6f9be6, #3f6fce);
}
.hp-box h3 .hp-small { color: #fff; font-weight: normal; font-size: 11px; }
.hp-box ul { list-style: none; margin: 0; padding: 8px 10px; }
.hp-box li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.hp-box a { display: flex; align-items: center; gap: 6px; min-width: 0; color: #0b3ea8; text-decoration: none; cursor: pointer; }
.hp-box a span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hp-box a:hover span, .hp-box li > a:hover { text-decoration: underline; }
.hp-box small { flex: none; color: #999; font-size: 10px; }
.hp-muted { color: #999; }
.hp-foot { margin: 18px 0 4px; text-align: center; color: #999; font-size: 10px; }

/* IE error pages */
.ie-error { max-width: 640px; padding: 22px 28px; font: 12px/1.5 Tahoma, sans-serif; color: #000; user-select: text; }
.ie-error-head { display: flex; align-items: center; gap: 12px; }
.ie-error h1 { margin: 0; font: bold 17px Verdana, Tahoma, sans-serif; color: #1c3f94; }
.ie-error hr { margin: 14px 0; border: 0; border-top: 1px solid #c5c5c5; }
.ie-error ul { margin: 6px 0 16px 18px; padding: 0; }
.ie-error a { color: #0b3ea8; }
.ie-error-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==================================================== outlook express */
.mail-tb:disabled { opacity: .5; }
.mail-row label { width: 58px; }
.mail-to-chip {
  flex: 1;
  min-width: 0;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  background: #f4f3ee;
  border: 1px solid #7f9db9;
}
.mail-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================== narrow */
@media (max-width: 640px) {
  .login-mid { flex-direction: column; gap: 20px; }
  .login-left { align-items: center; text-align: center; }
  .login-divider { display: none; }
  .login-bottom p { display: none; }
  .login-welcome { font-size: 36px; }
  #tray-search { display: none; }
  #start-button { padding-right: 16px; }
}