/* ══════════════════════════════════════════════════════════
   winXP 外壳：窗口 / 任务栏 / 开始菜单 / 电源流程 / 应用
   渐变与尺寸规格抄自开源项目 winXP-master (MIT, ShizukuIchi)
   ══════════════════════════════════════════════════════════ */

:root {
  --xp-face: #ece9d8;
  --xp-blue: #0831d9;
  --xp-blue-blur: #6582f5;
  --xp-line: #b8b09a;
  --xp-gradient: linear-gradient(to bottom,
    #0058ee 0%, #3593ff 4%, #288eff 6%, #127dff 8%, #036ffc 10%,
    #0262ee 14%, #0057e5 20%, #0054e3 24%, #0055eb 56%, #005bf5 66%,
    #026afe 76%, #0062ef 86%, #0052d6 92%, #0040ab 94%, #003092 100%);
  --xp-gradient-blur: linear-gradient(to bottom,
    #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%);
  --xp-taskbar: linear-gradient(to bottom,
    #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%);
  --xp-tray: linear-gradient(to bottom,
    #0c59c6 0%, #1663d0 6%, #2273e3 12%, #2372e2 23%, #1e6cd9 56%,
    #1560cc 92%, #0a4cb3 100%);
}

/* ══════════ 窗口外壳 ══════════ */
.win {
  position: relative; /* 让窗口角落贴纸(.gif-*)以窗口为参照 */
  padding: 3px;
  background: var(--xp-blue);
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
}
.win.blur { background: var(--xp-blue-blur); }
.win.floating {
  position: fixed;
  margin: 0;
  pointer-events: auto;
  box-shadow: 3px 4px 14px rgba(0, 0, 0, .4);
}
/* 拖动中：把窗口提到独立图层，合成器直接把图层挪走（不重画内容/阴影）。
   松手就摘掉，免得一堆窗口长期占着图层。 */
.win.dragging { will-change: transform; }
.win.minimized { display: none; }
/* 关闭 = 藏起来（页面窗口不真删，开始菜单「整理所有窗口」能请回来） */
.win.closed { display: none; }

/* 浮动后原位留下的占位：只占位置，不画任何东西（站主要求去掉虚线框） */
.win-placeholder {
  border: 0;
  background: transparent;
  visibility: hidden;
}

/* 最大化：铺满桌面（任务栏上方） */
.win.maximized {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 30px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.win.maximized > .win-body { border-radius: 0; }
.win.maximized > .win-grip { display: none; }

/* 锁比例的窗口（“身形锁”，播放器用）：外框比例交给 aspect-ratio，JS 只改外框宽度。
   --win-ratio 由 XP.openWindow 按设计尺寸实测外框算出来（含边框 + 标题栏）。
   站主 m00911：整个窗口比例不变 —— 锁的是外框，不是里面的内容区。 */
.win.keep-ratio { aspect-ratio: var(--win-ratio); }
.win.keep-ratio > .win-body { min-height: 0; overflow: hidden; }

/* 锁比例窗口最大化：只放大到「同形状的最大尺寸」并居中，不铺满
   —— 左右/下边要放掉，宽度由 JS 写进内联 style */
.win.maximized.keep-ratio {
  right: auto;
  bottom: auto;
  border-radius: 8px;
  box-shadow: 3px 6px 20px rgba(0, 0, 0, .45);
}
.win.maximized.keep-ratio > .win-body { border-radius: 8px; }

/* 右下角缩放握把（XP 状态栏那种斜排小点） */
.win-grip {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
}
.win-grip:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  background: #8a8a8a;
  box-shadow: -4px 0 #8a8a8a, -8px 0 #8a8a8a, 0 -4px #8a8a8a, -4px -4px #8a8a8a, 0 -8px #8a8a8a;
}

/* 标题栏（页面窗口、应用窗口、XP 提示框共用同一套外观） */
.titlebar {
  position: relative;
  height: 28px;
  flex: none;
  padding: 0 3px;
  border-radius: 5px 5px 0 0;
  background: var(--xp-gradient);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
/* 标题栏两端原本有 15px 深蓝渐隐（照抄原版），站主 2025-xx 明确说这是「莫名其妙的渐变」要删掉 → 已整块移除。
   要恢复：给 .titlebar:before/:after 加 content:'' + position:absolute + top:1px + width:15px + height:26px，
   :before 用 linear-gradient(to right,#1638e6 0%,transparent 100%)、:after 镜像，失焦时 opacity .3/.4。 */
.win.blur > .titlebar { background: var(--xp-gradient-blur); }

.tb-icon { width: 15px; height: 15px; flex: none; object-fit: contain; }
.tb-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.tb-btns {
  margin-left: auto;
  height: 22px;
  display: flex;
  align-items: center;
  margin-top: -1px;
  margin-right: 1px;
}
.win.blur > .titlebar .tb-btns { opacity: .6; }   /* 原版：失焦按钮组 opacity .6 */

/* 标题栏按钮：**照抄** winXP-master 的 src/WinXP/Windows/HeaderButtons.js
   （按钮 22×22 / 白 1px 描边 / 圆角 3px / 蓝径向渐变 + inset 阴影；
    图标是伪元素绝对定位画出来的，位置就是原版数值，别凭手感改） */
.tb-btns i {
  margin-right: 1px;
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 3px;
  font-style: normal;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  box-shadow: inset 0 -1px 2px 1px #4646ff;
  background-image: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, white 100%);
}
.tb-btns i:hover { filter: brightness(120%); }
.tb-btns i:hover:active { filter: brightness(90%); }

/* 最小化：8×3 白条 */
.tb-min::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  height: 3px;
  width: 8px;
  background-color: #fff;
}
/* 最大化：12×12 方框（顶部 3px 白 + 1px 白描边） */
.tb-max::before {
  content: '';
  position: absolute;
  display: block;
  left: 4px;
  top: 4px;
  height: 12px;
  width: 12px;
  box-shadow: inset 0 3px #fff, inset 0 0 0 1px #fff;
}
/* 还原态：两个错开的小方框（后一个填蓝，露出的边是 #136dff） */
.tb-max.restore::before {
  left: 7px;
  top: 4px;
  height: 8px;
  width: 8px;
  box-shadow: inset 0 2px #fff, inset 0 0 0 1px #fff;
}
.tb-max.restore::after {
  content: '';
  position: absolute;
  display: block;
  left: 4px;
  top: 7px;
  height: 8px;
  width: 8px;
  background-color: #136dff;
  box-shadow: inset 0 2px #fff, inset 0 0 0 1px #fff, 1px -1px #136dff;
}
/* 关闭：红色径向渐变 + 两条 2×16 白条旋转 ±45°
   （选择器必须带 `.tb-btns`：否则被上面的 `.tb-btns i` 以更高优先级压回蓝色） */
.tb-btns .tb-close {
  box-shadow: inset 0 -1px 2px 1px #da4600;
  background-image: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, white 100%);
}
.tb-btns .tb-close::before,
.tb-btns .tb-close::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 2px;
  height: 16px;
  width: 2px;
  background-color: #fff;
}
.tb-btns .tb-close::before { transform: rotate(45deg); }
.tb-btns .tb-close::after { transform: rotate(-45deg); }

/* 窗口内容区 */
.win-body {
  background: var(--xp-face);
  padding: 12px;
  border-radius: 0 0 2px 2px;
  /* flex-basis:auto —— 让 JS 写在内联 style 上的 height 真正生效（flex:1 会把它压成 0） */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* 缩放交给 JS 的右下角握把（.win-grip），窗口缩小时内容区自己出滚动条 */
.win-body.flush { padding: 0; border-radius: 0; overflow: hidden; }
.win-body.scroll { overflow: auto; }

/* ══════════ 任务栏 ══════════ */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  z-index: 90;
  display: flex;
  align-items: stretch;
  background: var(--xp-taskbar);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  user-select: none;
}
.taskbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
}
.task-start {
  height: 100%;
  width: auto;
  display: block;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: none;
}
.task-start img { height: 30px; width: auto; display: block; }
.task-start:hover { filter: brightness(1.1); }
.task-start:active { filter: brightness(.9); }

.task-tasks {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  overflow: hidden;
}
.task-item {
  position: relative;
  height: 22px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 165px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(to bottom, #3c81f3 0%, #3074e8 100%);
  color: #fff;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.task-item:hover { background: linear-gradient(to bottom, #53a3ff 0%, #3f8bef 100%); }
.task-item.active { background: linear-gradient(to bottom, #1b4fb0 0%, #1e52b7 100%); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .4); }
.task-item img { width: 15px; height: 15px; flex: none; }
.task-item span { overflow: hidden; text-overflow: ellipsis; }

.task-tray {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 7px;
  background: var(--xp-tray);
  border-left: 1px solid #1042af;
  box-shadow: inset 1px 0 1px #18bbff;
}
.task-tray img { width: 15px; height: 15px; display: block; opacity: .95; }
.task-clock { font-size: 12px; letter-spacing: .3px; text-shadow: 1px 1px rgba(0, 0, 0, .35); }

/* ══════════ 开始菜单 ══════════ */
.startmenu {
  position: fixed;
  left: 0;
  bottom: 30px;
  z-index: 92;
  width: 385px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 14px;
  background: #4282d6;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.startmenu[hidden] { display: none; }
.sm-head {
  position: relative;
  height: 54px;
  width: 100%;
  padding: 6px 5px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(to bottom,
    #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%);
  box-shadow: inset 0 -1px 1px #0e60cb;
}
.sm-head::before {
  content: '';
  position: absolute;
  left: 1%; right: 1%; top: 1px;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0, rgba(255, 255, 255, .3) 1%, rgba(255, 255, 255, .5) 2%,
    rgba(255, 255, 255, .5) 95%, rgba(255, 255, 255, .3) 98%, transparent 100%);
}
.sm-avatar {
  width: 42px; height: 42px;
  border: 2px solid #fff;
  border-radius: 3px;
  object-fit: cover;
  flex: none;
}
.sm-name { font-size: 14px; font-weight: 700; text-shadow: 1px 1px rgba(0, 0, 0, .35); }

.sm-body { display: flex; margin: 0 2px; position: relative; border-top: 1px solid #385de7; box-shadow: 0 1px #385de7; }
.sm-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #da884a 50%, rgba(0, 0, 0, 0) 100%);
}
.sm-left {
  width: 190px;
  background: #fff;
  padding: 6px 5px 0;
  display: flex;
  flex-direction: column;
  color: #000;
}
.sm-right {
  width: 190px;
  background: #cbe3ff;
  border-left: 1px solid rgba(58, 58, 255, .37);
  padding: 6px 5px 5px;
  display: flex;
  flex-direction: column;
  color: #00136b;
}
.sm-item {
  display: flex;
  align-items: center;
  flex: none;
  padding: 1px;
  margin-bottom: 4px;
  height: 34px;
  cursor: pointer;
  border-radius: 1px;
}
.sm-right .sm-item { height: 26px; }
.sm-item:hover { background: #2f71cd; color: #fff; }
.sm-item img { width: 30px; height: 30px; margin-right: 5px; flex: none; object-fit: contain; }
.sm-right .sm-item img { width: 22px; height: 22px; }
.sm-item .sm-txt { display: flex; flex-direction: column; min-width: 0; }
.sm-item .sm-txt b { font-weight: 700; }
.sm-item .sm-sub { color: rgba(0, 0, 0, .4); line-height: 12px; margin-bottom: 1px; font-weight: 400; }
.sm-item:hover .sm-sub { color: rgba(255, 255, 255, .75); }
.sm-item.disabled { color: #9a9a9a; cursor: default; }
.sm-item.disabled:hover { background: none; color: #9a9a9a; }
.sm-item.disabled img { opacity: .4; }
.sm-sep {
  height: 7.5px;
  margin-bottom: 4px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .1), transparent) content-box;
  background-clip: content-box;
}
.sm-right .sm-sep { background-image: linear-gradient(to right, transparent, rgba(135, 179, 226, .71), transparent); }
.sm-grow { flex: 1; }
.sm-foot {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  gap: 4px;
  background: linear-gradient(to bottom,
    #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%, #1165d2 83%, #0f61cb 88%);
}
.sm-foot button {
  display: flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  color: #fff;
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
}
.sm-foot button:hover { background: rgba(60, 80, 210, .5); }
.sm-foot img { width: 22px; height: 22px; border-radius: 3px; }

/* ══════════ 电源流程 ══════════ */
/* 变灰交给 .power-mask 的 backdrop-filter：连 body 上的壁纸一起变灰，
   而弹窗在更上层（z-index 130）保持鲜亮。 */
body.grayed .page,
body.grayed .duck,
body.grayed .lang-drop,
body.grayed .taskbar,
body.grayed #winLayer { pointer-events: none; }

/* 浮动窗口层：盖住 .page（76）与玩具鸭（75），但仍在任务栏（90）下面 */
#winLayer { position: relative; z-index: 80; }

.power-mask {
  position: fixed; inset: 0; z-index: 119;
  background: rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: grayscale(1) brightness(.62);
  backdrop-filter: grayscale(1) brightness(.62);
  animation: powerGray 5s linear forwards;
}
@keyframes powerGray {
  0%, 30% {
    -webkit-backdrop-filter: grayscale(0) brightness(1);
    backdrop-filter: grayscale(0) brightness(1);
  }
  100% {
    -webkit-backdrop-filter: grayscale(1) brightness(.62);
    backdrop-filter: grayscale(1) brightness(.62);
  }
}

.powerdlg {
  position: fixed;
  top: 30vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: 300px;
  height: 190px;
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  background: #092178;
  font-family: var(--font-ui);
  box-shadow: 3px 3px 14px rgba(0, 0, 0, .5);
}
.powerdlg-head {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #092178;
  color: #fff;
}
.powerdlg-head span { font-size: 17px; font-weight: 700; }
.powerdlg-head img { height: 30px; }
.powerdlg-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 30px;
  background: linear-gradient(to right, #3349e0 0%, #617ee6 47%, #617ee6 53%, #3349e0 100%);
}
.powerdlg-body::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 60%, transparent 100%);
}
.powerdlg-foot {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: #092178;
}
.pw-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  width: 62px;
}
.pw-btn img { width: 30px; height: 30px; object-fit: contain; transition: filter .1s; }
.pw-btn:hover img { filter: brightness(1.1); }
.pw-btn:active img { filter: brightness(.7); }
.pw-cancel {
  height: 16px;
  padding: 0 12px;
  font: inherit;
  font-size: 11px;
  background: rgb(240, 240, 240);
  border: none;
  border-radius: 1px;
  cursor: pointer;
  box-shadow: 2px 2px 4px 1px #0005b0, 2px 2px 2px 0 #fff, inset 0 0 0 1px skyblue, inset 2px -2px skyblue;
}
.pw-cancel:hover { box-shadow: 1px 1px #000, 1px 1px 2px 0 #fff, inset 0 0 0 1px orange, inset 2px -2px orange; }

/* 关机黑屏 / 安全关闭 / 欢迎界面 */
.power-screen {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
}
.power-screen.off { background: #000; color: #fff; flex-direction: column; gap: 26px; }
.power-screen.shutdown {
  background: linear-gradient(to bottom, #5a7edc 0%, #3f66cf 55%, #26439f 100%);
  color: #fff;
  flex-direction: column;
  gap: 30px;
}
.power-screen .ps-text { font-size: 19px; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0, 0, 0, .4); }
.power-screen .ps-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 18px;
  border: 1px solid #9aa7c0;
  border-radius: 3px;
  background: linear-gradient(180deg, #fdfdfd, #dfe4ee);
  color: #143a7a;
  cursor: pointer;
}
.power-screen .ps-btn:hover { filter: brightness(1.04); }
.power-screen .ps-btn:active { filter: brightness(.94); }
.power-screen .ps-dots::after { content: ''; animation: psDots 1.4s steps(4, end) infinite; }
@keyframes psDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.welcome {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  font-family: var(--font-ui);
  background: linear-gradient(to bottom, #5b83e0 0%, #3f68d2 40%, #1d3f9e 78%, #14307e 100%);
  overflow: hidden;
}
.welcome-l {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  border-right: 2px solid rgba(255, 255, 255, .45);
  color: #fff;
}
/* 左侧商标：照站主给的 P3 参考（XP 官方定式 = 旗标 + Microsoft® / Windows™ xp 两行） */
.welcome-l .wl-mark {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.welcome-l .wl-mark img {
  width: 132px; height: auto; align-self: flex-end;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .4));
}
.welcome-l .wl-word { display: flex; flex-direction: column; line-height: 1.05; }
.welcome-l .wl-ms {
  font-size: 12px; letter-spacing: .5px; opacity: .92;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}
.welcome-l .wl-ms sup { font-size: 7px; vertical-align: super; }
.welcome-l .wl-win {
  font-size: 27px; font-weight: 700; letter-spacing: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}
.welcome-l .wl-win i { font-style: normal; font-size: 15px; font-weight: 400; margin-left: 3px; }
.welcome-l .wl-win sup { font-size: 8px; vertical-align: super; }
.welcome-l .wl-tip {
  font-size: 15px; letter-spacing: 0; margin-top: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
}
.welcome-r {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.welcome-user {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 9px 12px;
  border: none;
  border-radius: 4px;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.welcome-user:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)); }
.welcome-user img {
  width: 52px; height: 52px;
  border: 2px solid #fff;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
}
.welcome-user .wu-name { font-size: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); }
.welcome-user .wu-sub { font-size: 12px; opacity: .9; }
.welcome-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
  color: #fff;
  font-size: 12px;
}
.welcome-foot button {
  font: inherit;
  font-size: 12px;
  color: #fff;
  background: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}
.welcome-foot button:hover { background: rgba(255, 255, 255, .18); }

/* ══════════ IE 404 页（假 404 兜底） ══════════ */
.ie404 {
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.7;
  padding: 16px 20px;
  height: 100%;
  overflow: auto;
}
.ie404 h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.ie404 .ie404-ico {
  float: left; margin: 2px 14px 8px 0;
  width: 48px; height: 48px;
  image-rendering: pixelated;   /* srcset 给出的 96/144px 最近邻放大图，缩放时保持硬边 */
}
.ie404 p { margin-bottom: 8px; }
.ie404 ol { margin: 0 0 10px 26px; }
.ie404 hr { border: none; border-top: 1px solid #ccc; margin: 12px 0; }
.ie404 .ie404-tech { color: #555; font-size: 12px; }
.ie404 .ie404-act { margin-top: 14px; display: flex; gap: 8px; }
.ie404 .ie404-act button {
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid #7a7a7a;
  border-radius: 3px;
  background: linear-gradient(#fff, #c8c8c8);
  cursor: pointer;
}

/* ══════════ 应用：通用工具条 ══════════ */
.app-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  background: var(--xp-face);
  border-bottom: 1px solid var(--xp-line);
  font-size: 11px;
  flex: none;
  flex-wrap: wrap;
}
.app-bar button, .app-bar .bar-item {
  font: inherit;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  color: #000;
}
.app-bar button:hover, .app-bar .bar-item:hover { border-color: #b6c8e8; background: #dce9fb; }
.app-stage { flex: 1; min-height: 0; overflow: hidden; position: relative; background: #fff; }
.app-col { display: flex; flex-direction: column; height: 100%; }

/* ══════════ 扫雷 ══════════ */
.mine-frame {
  background: #c0c0c0;
  padding: 6px;
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
  display: inline-block;
}
.mine-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
  margin-bottom: 6px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}
.mine-led { position: relative; width: 39px; height: 23px; background: #000; flex: none; }
.mine-led i {
  position: absolute; top: 0; width: 13px; height: 23px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.mine-led i:nth-child(1) { left: 0; }
.mine-led i:nth-child(2) { left: 13px; }
.mine-led i:nth-child(3) { left: 26px; }
.mine-face {
  width: 26px; height: 26px;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  background: #c0c0c0 no-repeat center / 20px 20px;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.mine-face:active { border-color: #808080 #fff #fff #808080; }
.mine-grid { display: grid; border: 3px solid; border-color: #808080 #fff #fff #808080; }
.mine-cell {
  width: 16px; height: 16px;
  box-sizing: border-box;
  background: #c0c0c0 no-repeat center / 16px 16px;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
  cursor: default;
}
.mine-cell.open { box-shadow: inset 1px 1px 0 #9a9a9a; background-color: #c0c0c0; }
.mine-cell.boom { background-color: #f00; }

/* ══════════ 记事本 ══════════ */
.np-text {
  width: 100%; height: 100%;
  border: none; outline: none; resize: none;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px; padding: 6px; display: block;
  background: #fff;
}

/* ══════════ 画图 / 浏览器 / Minecraft 的 iframe ══════════ */
.app-frame { width: 100%; height: 100%; border: none; display: block; background: #fff; }
.app-loading { padding: 14px 16px; font-size: 12px; color: #4a4a4a; }
.paint-fallback { background: #fff; }
.paint-fallback canvas { display: block; cursor: crosshair; touch-action: none; }
.paint-palette { display: flex; gap: 3px; flex-wrap: wrap; }
.paint-swatch {
  width: 15px; height: 15px;
  border: 1px solid #7a7a7a;
  cursor: pointer;
  padding: 0;
}
.paint-swatch.active { outline: 2px solid #0831d9; outline-offset: -1px; }

/* 浏览器 */
.browser-addr {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px;
  background: var(--xp-face);
  border-bottom: 1px solid var(--xp-line);
  font-size: 11px; flex: none;
}
.browser-addr label { color: #333; flex: none; }
.browser-addr input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 12px;
  padding: 3px 6px;
  border: 2px solid; border-color: #9c9c9c #fff #fff #9c9c9c;
  background: #fff; outline: none;
}
.browser-addr input:focus { border-color: #4a7fd4; }
.browser-bar { display: flex; gap: 8px; padding: 3px 6px; background: var(--xp-face); border-bottom: 1px solid var(--xp-line); font-size: 11px; flex: none; }
.browser-bar .bb { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.browser-bar .bb img { width: 18px; height: 18px; }
.browser-home { padding: 14px; height: 100%; overflow: auto; background: #fff; }
.browser-home .bh-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #1a3a6a; }
.browser-bookmarks { display: flex; flex-direction: column; gap: 6px; }
.browser-bookmarks a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 5px;
  border: 1px solid #cfd9e8; background: #f7fbff;
  font-size: 12px;
}
.browser-bookmarks a img { width: 18px; height: 18px; }
.browser-bookmarks a:hover { background: #e6f1ff; }

/* 我的电脑 */
.comp-wrap { display: flex; height: 100%; background: #fff; }
.comp-side {
  width: 168px; flex: none;
  background: linear-gradient(to right, #6f9fe0 0%, #7cabE8 100%);
  padding: 10px 8px;
  font-size: 11px;
  color: #0a2a5e;
  overflow: auto;
}
.comp-side .cs-title { font-weight: 700; margin-bottom: 7px; }
.comp-side .cs-item { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 3px; cursor: pointer; }
.comp-side .cs-item:hover { background: rgba(255, 255, 255, .45); }
.comp-side .cs-item img { width: 18px; height: 18px; flex: none; }
.comp-side .cs-sep { height: 1px; background: rgba(0, 0, 0, .15); margin: 8px 0; }
.comp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.comp-groups { flex: 1; overflow: auto; padding: 12px; }
.comp-group { margin-bottom: 16px; }
.comp-group h4 { font-size: 12px; color: #1a3a6a; border-bottom: 1px solid #c3d6ef; padding-bottom: 3px; margin-bottom: 9px; }
.comp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.comp-item {
  width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 3px; border-radius: 4px; cursor: pointer;
  font-size: 11px; text-align: center; color: #000;
  background: none; border: 1px solid transparent; font-family: inherit;
}
.comp-item:hover { background: #e8f0fc; border-color: #b6c8e8; }
.comp-item img { width: 32px; height: 32px; object-fit: contain; }
.comp-item span { word-break: break-all; line-height: 1.3; }

/* ══════════ XP 提示框（无法访问磁盘等） ══════════ */
.xp-msg {
  position: fixed; inset: 0; z-index: 125;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .12);
}
.xp-msg .xp-dialog { position: static; transform: none; animation: none; }
.xp-msg .dlg-body { align-items: flex-start; }
.xp-msg .dlg-msg { font-size: 13px; line-height: 1.6; }
.xp-msg .dlg-msg b { font-size: 14px; }

/* ══════════ 固定式浏览器窗口（委托相关事宜 / 资源配布页） ══════════ */
.win.browser-fixed {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 30px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 40;
}
.browser-fixed .win-body { border-radius: 0; padding: 0; display: flex; flex-direction: column; }
.ie-home {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; height: 26px;
  font-size: 11px; color: #143a7a;
  background: var(--xp-face);
  border-bottom: 1px solid var(--xp-line);
  flex: none;
}
.ie-home .ie-back {
  display: flex; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; padding: 1px 3px;
}
.ie-home .ie-back img { width: 20px; height: 20px; display: block; }
.ie-home .ie-back:hover { background: #dbe8fb; border-color: #a9c4ea; }
.ie-home .ie-back-txt {
  background: none; border: 1px solid transparent; border-radius: 3px;
  font: inherit; font-size: 11px; color: #143a7a; cursor: pointer; padding: 2px 6px;
}
.ie-home .ie-back-txt:hover { background: #dbe8fb; border-color: #a9c4ea; }
.ie-home .ie-addr {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px;
  margin-left: 6px;
}
.ie-home .ie-addr span { color: #444; }
.ie-home .ie-addr input {
  flex: 1; min-width: 0; font: inherit; font-size: 11px;
  padding: 2px 5px; background: #fff; outline: none;
  border: 2px solid; border-color: #9c9c9c #fff #fff #9c9c9c;
}
/* 站主 m00628：跳转页左右太空 —— 整页铺 web.jpg 壁纸，内容收成居中的白卡，
   左右各透出一条壁纸（＝「空白镂空」）。background-attachment:fixed 让卡在窗口里
   滚动时壁纸不动，白卡像浮在壁纸上。 */
.ie-page {
  flex: 1; min-height: 0; overflow: auto;
  padding: 14px 14px 0;
  background: #eaf6fb url("../assets/background/web.jpg") center / cover no-repeat fixed;
}
.ie-wrap {
  max-width: 980px; margin: 0 auto; padding: 18px 16px 56px;
  font-family: var(--font-body);   /* 跳转页的正文用像素体（窗口外壳仍是 --font-ui 的 Tahoma） */
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #b9c9e8, 0 10px 30px rgba(12, 50, 125, .18);
}

/* ══════════ 委托页：左栏（状态 / 流程 / 联系方式）+ 右侧价目卡片 ══════════ */
.ie-cols { display: grid; grid-template-columns: 302px minmax(0, 1fr); gap: 18px; align-items: start; }
.cm-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.cm-panel {
  background: #fff;
  border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 6px; padding: 13px 15px;
}
.cm-lead { display: flex; flex-direction: column; gap: 5px; }
.cm-lead .cm-open { font-size: 24px; font-weight: 700; color: #4c7a34; letter-spacing: .5px; }
/* 受理状态另外两档的配色（由 js/content-render.js 按 js/content.js 的 status 加 class） */
.cm-lead .cm-open.cm-paused { color: #a06a1f; }
.cm-lead .cm-open.cm-closed { color: #8a4b4b; }
.cm-lead .cm-status-note { font-size: 12px; color: #4a4a4a; line-height: 1.6; }
/* 面板标题 = XP Luna 任务窗格标题条（浅蓝渐变 + 海军蓝字），不再是原来的褐色虚线 */
.cm-panel > h2 {
  font-size: 12px; color: #0c327d; font-weight: 700; letter-spacing: 1px;
  margin: -13px -15px 10px; padding: 5px 15px 6px;
  background: linear-gradient(180deg, #fbfcff, #c9d7f4);
  border-bottom: 1px solid #9ab0dd;
  border-radius: 4px 4px 0 0;
}
.cm-panel .cm-steps { display: flex; flex-direction: column; gap: 7px; }
/* 站主 m02125 第 4 条：流程不要盒子，一行行写清楚就行 */
.cm-panel .cm-steps li { font-size: 12px; line-height: 1.7; padding: 0; }
.cm-panel .cm-steps b { display: inline; margin-right: 4px; }
.cm-panel .cm-contact { grid-template-columns: 1fr; gap: 5px; }
.cm-panel .note-box { margin-top: 10px; font-size: 12px; }

/* 价目卡片：蓝色价格 + 两行说明 + 例图排（大编号已按站主 m02125 第 4 条去掉） */
.cm-card {
  position: relative;
  background: #fff;
  border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 8px;
  padding: 20px 22px 18px; margin-bottom: 18px;
  box-shadow: 3px 3px 0 rgba(12, 50, 125, .10);
}
.cm-card h3 { font-size: 24px; font-weight: 700; color: #0c327d; margin-bottom: 6px; letter-spacing: 1px; }
.cm-card-price { font-size: 24px; font-weight: 700; color: #0c327d; line-height: 1.2; margin-bottom: 12px; }
.cm-card-desc { font-size: 12px; color: #000; line-height: 1.85; }
.cm-card-desc + .cm-card-desc { margin-top: 2px; }
.cm-card-shots { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cm-card-shots a { display: block; width: calc((100% - 20px) / 3); min-width: 110px; }
/* 例图裁剪三套预设：竖 3:4（默认）/ 方 1:1 / 横 4:3 —— 由 JS 按图片自然宽高比自动打 .ratio-* */
.cm-card-shots img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover; object-position: top center;
  border: 1px solid #b9c9e8; border-radius: 4px; cursor: zoom-in;
  background: #eef3fc;
}
.cm-card-shots img.ratio-sq { aspect-ratio: 1 / 1; }
.cm-card-shots img.ratio-land { aspect-ratio: 4 / 3; }
/* 裁剪过的例图：a 当裁剪框，img 由内联 style 放大/偏移（后台「裁剪」按钮存的 zoom/cx/cy） */
.cm-card-shots a.crop {
  position: relative; overflow: hidden;
  border: 1px solid #b9c9e8; border-radius: 4px; background: #eef3fc;
}
.cm-card-shots a.crop img {
  position: absolute; inset: auto;
  aspect-ratio: auto; border: 0; border-radius: 0;
  object-position: top center; cursor: zoom-in;
}
.cm-card-shots img:hover { opacity: .92; }
.cm-sec {
  background: #fff; border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 6px; padding: 16px 18px; margin-bottom: 18px;
}
.cm-sec > h2 {
  font-size: 12px; color: #0c327d; font-weight: 700; letter-spacing: 1px;
  margin: -16px -18px 12px; padding: 6px 18px 7px;
  background: linear-gradient(180deg, #fbfcff, #c9d7f4);
  border-bottom: 1px solid #9ab0dd;
  border-radius: 4px 4px 0 0;
}
.cm-sec .cm-steps { display: flex; flex-direction: column; gap: 8px; }
.cm-sec .cm-steps li { font-size: 12px; line-height: 1.75; }
.cm-sec .cm-steps li span { display: block; }
.cm-contact { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; }
.cm-contact .social {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 5px; background: #fff; font-size: 12px; color: #000;
}
.cm-contact .social img { width: 20px; height: 20px; }
.cm-contact .social:hover { background: #eef3fc; }
/* 资源页 */
.rs-item {
  display: flex; align-items: center; gap: 12px;
  /* 左边只留 2px：卡片左/上边框是白色，图标要和上方正文的文本列左对齐 */
  padding: 13px 15px 13px 2px; border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 6px; background: #fff; margin-bottom: 10px;
}
.rs-item img { width: 32px; height: 32px; flex: none; }
.rs-item img.lg { width: 38px; height: 38px; }
.rs-item .rs-info { flex: 1; min-width: 0; }
.rs-item .rs-name { font-size: 12px; font-weight: 700; color: #0c327d; }
.rs-item .rs-size { font-size: 12px; color: #767676; }
.rs-item .rs-dl {
  flex: none; font-size: 12px; padding: 5px 18px; border-radius: 3px;
  background: linear-gradient(180deg, #fdfdfd, #dfe4ee); color: #143a7a;
  border: 1px solid #9aa7c0;
}
.rs-item .rs-dl:hover { filter: brightness(1.04); }

/* ══════════ 桌面快捷方式 ══════════ */
.desktop {
  position: fixed; left: 6px; top: 8px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  width: 78px;
}
.desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px; border: 1px dotted transparent; border-radius: 2px;
  background: none; font-family: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.desk-icon img { width: 32px; height: 32px; object-fit: contain; pointer-events: none; }
.desk-icon span {
  font-size: 11px; line-height: 1.25; text-align: center; color: #fff;
  font-family: var(--font-ui);   /* 桌面快捷方式名属于 XP 外壳 → Tahoma（站主 m02318 第 5 条） */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .7);
  word-break: break-word;
}
.desk-icon.sel { border-color: rgba(255, 255, 255, .7); background: rgba(49, 106, 197, .45); }
.desk-icon.sel span { background: #316ac5; text-shadow: none; }

/* ══════════ 留言板评论区（左编辑框 / 右列表 + 翻页） ══════════ */
.gb-body {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px; height: 100%; min-height: 0;
}
.gb-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gb-main { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.gb-list {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 4px;
}
.gb-item {
  padding: 7px 9px;
  background: rgba(255, 252, 244, .95);
  border: 2px solid; border-color: #fff #b9b9b9 #b9b9b9 #fff;
  border-radius: 5px;
}
.gb-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.gb-name { font-size: 12px; font-weight: 700; color: #0c327d; }
.gb-time { font-size: 12px; color: #767676; }
.gb-text { font-size: 12px; line-height: 1.6; color: #000; white-space: pre-wrap; word-break: break-word; }
/* 站主回复：取第一份填了的三语字段，固定中文优先 */
.gb-reply {
  margin-top: 5px; padding-left: 8px;
  border-left: 2px solid #0c327d;
  font-size: 12px; line-height: 1.55; color: #143a7a;
  white-space: pre-wrap; word-break: break-word;
}
.gb-empty { font-size: 12px; color: #767676; text-align: center; padding: 26px 0; }
.gb-form { display: flex; flex-direction: column; gap: 6px; }
.gb-form input, .gb-form textarea {
  font: inherit; font-size: 12px; padding: 6px 8px; resize: vertical;
  border: 2px solid; border-color: #9c9c9c #fff #fff #9c9c9c;
  background: #fff; outline: none; width: 100%;
}
.gb-form textarea { min-height: 74px; }
.gb-form input:focus, .gb-form textarea:focus { border-color: #0c327d; }
.gb-send {
  align-self: flex-end; font: inherit; font-size: 12px; padding: 5px 18px;
  border-radius: 3px; cursor: pointer; color: #143a7a;
  background: linear-gradient(180deg, #fdfdfd, #dfe4ee);
  border: 1px solid #9aa7c0;
}
.gb-send:hover { filter: brightness(1.04); }
.gb-send:disabled { opacity: .5; cursor: default; filter: none; }
.gb-hint { font-size: 12px; color: #767676; line-height: 1.5; }

/* 翻页：只有 ‹ ›，每页 8 条 */
.gb-pager { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gb-pager button {
  font: inherit; font-size: 12px; line-height: 1;
  width: 24px; height: 20px; cursor: pointer; color: #0c327d;
  background: linear-gradient(180deg, #fdfdfd, #dfe4ee);
  border: 1px solid #9aa7c0; border-radius: 3px;
}
.gb-pager button:hover:not(:disabled) { filter: brightness(1.04); }
.gb-pager button:disabled { opacity: .4; cursor: default; }
.gb-page-info { font-size: 12px; color: #767676; }

/* ══════════ 响应式 ══════════ */
@media (max-width: 1180px) {
  .desktop { display: none; }
}
@media (max-width: 900px) {
  .ie-cols { grid-template-columns: 1fr; }
  .cm-side { position: static; }
  .gb-body { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .win.floating { left: 4px !important; right: 4px !important; width: auto !important; }
  .startmenu { width: 96vw; }
  .sm-left, .sm-right { width: 50%; }
  .task-tray img { display: none; }
  .welcome { flex-direction: column; }
  .welcome-l { border-right: none; border-bottom: 2px solid rgba(255, 255, 255, .45); }
  .cm-card { padding: 16px 14px; }
  .cm-card-shots a { width: calc((100% - 10px) / 2); }
  .ie-wrap { padding: 12px 9px 46px; }
}