/* Windows XP（Luna 蓝）。只写和 Win98 不一样的地方 */
html[data-theme="xp"] {
  --face: #ece9d8;
  --light: #f5f4ea;
  --shadow: #aca899;
  --title1: #0054e3;
  --title2: #3d95ff;
  --font: 13px Tahoma, "SimSun", "宋体", "Songti SC", sans-serif;
  /* 类似 Bliss：蓝天 + 绿色山坡 */
  --desk:
    radial-gradient(ellipse 150% 60% at 30% 108%, #78c440 0%, #5aa52c 40%, #3f8a1f 49.5%, transparent 50%),
    radial-gradient(ellipse 120% 50% at 85% 112%, #6cba38 0%, #4e9a26 45%, transparent 46%),
    linear-gradient(180deg, #2a64d4 0%, #5a96e6 35%, #a9cdf3 62%, #dcecfa 72%, #9ccd6a 72.5%, #4f9a28 100%);
  --sel-bg: #316ac5;
  --sel-fg: #fff;
  --notice-bg: #ffff66;
  --notice-fg: #e00000;
}
html[data-theme="xp"] #notice { font-weight: bold; border-top: 1px solid #e6c800; border-bottom: 1px solid #e6c800; }
html[data-theme="xp"] body { background-attachment: fixed; }

/* 窗口：蓝色粗边框，上面两个角是圆的 */
html[data-theme="xp"] .window {
  background: var(--face);
  border-radius: 8px 8px 0 0;
  padding: 0 3px 3px;
  box-shadow:
    inset -1px -1px #00138c, inset 1px 1px #0831d9,
    inset -2px -2px #001ea0, inset 2px 2px #166aee,
    inset -3px -3px #003bda, inset 3px 3px #0855dd,
    2px 3px 10px rgba(0, 0, 0, .35);
}
html[data-theme="xp"] .window > .titlebar {
  margin: 0 -3px 3px;
  height: 28px;
  padding: 3px 5px 3px 9px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  font: bold 13px "Trebuchet MS", Tahoma, "Microsoft YaHei", sans-serif;
  text-shadow: 1px 1px #0f1089;
}
/* 红色关闭按钮 */
html[data-theme="xp"] .titlebar .x {
  width: 21px; height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
  box-shadow: inset 0 -1px 2px 1px #da4600;
  color: #fff;
  font: bold 14px Tahoma, sans-serif;
  line-height: 18px;
  text-shadow: none;
}
html[data-theme="xp"] .titlebar .x:hover { filter: brightness(1.12); }

/* 下陷区域、输入框：细的灰蓝边 */
html[data-theme="xp"] .inset,
html[data-theme="xp"] input,
html[data-theme="xp"] select,
html[data-theme="xp"] textarea {
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: none;
}
html[data-theme="xp"] input:focus,
html[data-theme="xp"] select:focus,
html[data-theme="xp"] textarea:focus { outline: 1px solid #316ac5; outline-offset: 0; }

/* 按钮：圆角、白到米色的渐变，悬停时有橙色光边 */
html[data-theme="xp"] button {
  background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: none;
  padding: 3px 12px;
}
html[data-theme="xp"] button:hover:not(:disabled) {
  box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}
html[data-theme="xp"] button:active:not(:disabled) {
  background: linear-gradient(180deg, #cdcac3 0%, #e3e3db 8%, #e5e5de 94%, #f2f2f1 100%);
  box-shadow: none;
}
html[data-theme="xp"] button:disabled { color: #aca899; border-color: #c9c7ba; text-shadow: none; }

/* 分组框 */
html[data-theme="xp"] fieldset { border: 1px solid #d0d0bf; border-radius: 4px; box-shadow: none; }
html[data-theme="xp"] legend { color: #0046d5; padding: 0 3px; }

/* 标签页：圆角，选中的那个顶上有一条橙线 */
html[data-theme="xp"] .tab {
  border: 1px solid #919b9c;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fff 0%, #ecebe6 100%);
}
html[data-theme="xp"] .tab:hover:not(:disabled) { box-shadow: inset 0 2px #ffc83c; }
html[data-theme="xp"] .tab.sel { background: #fcfcfe; box-shadow: inset 0 3px #ffc83c; font-weight: bold; }

/* 工具栏、状态栏、分隔线 */
html[data-theme="xp"] .toolbar { background: linear-gradient(180deg, #f6f5ee, #e3e0cf); border-bottom: 1px solid #d0d0bf; border-radius: 2px; }
html[data-theme="xp"] .toolbar .sep { border-left-color: #d0d0bf; border-right-color: #fff; }
html[data-theme="xp"] .statusbar { background: linear-gradient(180deg, #f2f0e4, #e5e2d2); border-top: 1px solid #d0d0bf; box-shadow: none; }
html[data-theme="xp"] .msep { border-top-color: #aca899; }

/* 右键菜单风格的“功能”菜单 */
html[data-theme="xp"] .menu {
  background: #fff;
  border: 1px solid #aca899;
  border-radius: 0;
  padding: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
}

/* 首页：QQ 面板的分组标题 */
html[data-theme="xp"] .gh { color: #0046d5; }
html[data-theme="xp"] .row { border-radius: 2px; }

/* 对话框的遮罩稍微淡一点 */
html[data-theme="xp"] dialog::backdrop { background: rgba(0, 20, 60, .18); }

/* XP 风格滚动条（Chrome / Safari / Edge） */
html[data-theme="xp"] ::-webkit-scrollbar { width: 17px; height: 17px; }
html[data-theme="xp"] ::-webkit-scrollbar-track { background: #f7f6f2; }
html[data-theme="xp"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #c9d8fc, #b6cbfa 50%, #a9c0f5);
  border: 1px solid #fff;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #8aa8ec;
}
html[data-theme="xp"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #dbe6fe, #c8d8fd 50%, #bccff8); }