/* ============ 主题变量（亮） ============ */
  :root {
    --wallpaper:
      radial-gradient(1200px 700px at 80% -10%, rgba(150,180,255,.5), transparent 60%),
      radial-gradient(900px 600px at -10% 100%, rgba(120,235,215,.45), transparent 55%),
      linear-gradient(135deg, #cfe0f5 0%, #eef4fb 45%, #e6ecf6 100%);
    --dots:
      radial-gradient(1.5px 1.5px at 20% 30%, rgba(90,110,160,.45), transparent),
      radial-gradient(1px 1px at 60% 70%, rgba(90,110,160,.35), transparent),
      radial-gradient(1.5px 1.5px at 80% 20%, rgba(90,110,160,.3), transparent),
      radial-gradient(1px 1px at 40% 85%, rgba(90,110,160,.35), transparent),
      radial-gradient(1px 1px at 90% 60%, rgba(90,110,160,.28), transparent);
    --win-bg: #f4f6fb;
    --win-border: #c3cad6;
    --win-shadow: 0 18px 48px rgba(40,60,110,.25);
    --titlebar-bg: linear-gradient(180deg, #f7f8fa, #e6e9ee);
    --titlebar-border: #d3d6dc;
    --title-color: #3a4152;
    --btn-color: #4a5162;
    --btn-hover: rgba(0,0,0,.09);
    --ctx-bg: #fff;
    --ctx-border: #c9cdd4;
    --ctx-fg: #333;
    --ctx-hover: #3d6bff;
    --ctx-hover-fg: #fff;
    --ctx-sep: #e6e8ec;
    --icon-fg: #3a4152;
    --icon-hover: rgba(0,0,0,.08);
    --icon-shadow: 0 1px 3px rgba(0,0,0,.25);
  }

  /* ============ 主题变量（暗） ============ */
  :root[data-theme="dark"] {
    --wallpaper:
      radial-gradient(1200px 700px at 80% -10%, rgba(120,90,255,.55), transparent 60%),
      radial-gradient(900px 600px at -10% 100%, rgba(0,200,180,.45), transparent 55%),
      linear-gradient(135deg, #2b3a67 0%, #1d2747 45%, #141b33 100%);
    --dots:
      radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent),
      radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.35), transparent),
      radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.4), transparent),
      radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.3), transparent);
    --win-bg: #2b2f38;
    --win-border: #4a5261;
    --win-shadow: 0 18px 48px rgba(0,0,0,.6);
    --titlebar-bg: linear-gradient(180deg, #383d47, #2c3039);
    --titlebar-border: #1f232b;
    --title-color: #e6e9f0;
    --btn-color: #cdd3de;
    --btn-hover: rgba(255,255,255,.12);
    --ctx-bg: #333842;
    --ctx-border: #4a5261;
    --ctx-fg: #e6e9f0;
    --ctx-hover: #3d6bff;
    --ctx-hover-fg: #fff;
    --ctx-sep: #454b57;
    --icon-fg: #ffffff;
    --icon-hover: rgba(255,255,255,.14);
    --icon-shadow: 0 1px 3px rgba(0,0,0,.6);
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  /* ============ 桌面壁纸 ============ */
  .desktop {
    position: fixed;
    inset: 0;
    background: var(--wallpaper);
    user-select: none;
  }

  /* 星点 */
  .desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--dots);
    background-size: 260px 260px;
  }

  /* ============ 桌面图标（左上角） ============ */
  .desktop-icon {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    max-width: 160px;
    padding: 12px 6px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--icon-fg);
    transition: background .15s ease, transform .15s ease, color .18s ease;
    z-index: 5;
  }
  .desktop-icon:hover { background: var(--icon-hover); }
  .desktop-icon:active { transform: scale(.96); }

  .icon-img {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 40px;
  }
  .desktop-icon span {
    font-size: 13px;
    white-space: nowrap;
    text-shadow: var(--icon-shadow);
  }

  /* ============ 窗口（KDE 风格，无圆角） ============ */
  .window {
    position: absolute;
    width: 780px;
    height: 520px;
    display: flex;
    flex-direction: column;
    background: var(--win-bg);
    box-shadow: var(--win-shadow);
    border: 1px solid var(--win-border);
    border-radius: 0;
    min-width: 360px;
    min-height: 240px;
    opacity: 0;
    pointer-events: none;
    transform: scale(.85);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease;
  }
  .window.visible { opacity: 1; transform: scale(1); pointer-events: auto; }

  /* 最大化 / 还原（窗口化）动画：用 transform 过渡（GPU 合成，不重排），元素只做 transform 动画 */
  .window.animating {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
  }

  /* 关闭动画 */
  .window.closing {
    opacity: 0 !important;
    transform: scale(.85);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none !important;
  }

  /* 标题栏：KDE 风格，居中标题，较矮 */
  .titlebar {
    position: relative;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: var(--titlebar-bg);
    border-bottom: 1px solid var(--titlebar-border);
    cursor: grab;
    user-select: none;
    touch-action: none; /* 移动端：阻止触摸滚动/缩放手势抢走 pointer 事件 */
  }
  .titlebar:active { cursor: grabbing; }
  .titlebar.dragging { cursor: grabbing; }

  .titlebar .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--title-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
  }
  .controls {
    margin-left: auto;
    display: flex;
    gap: 2px;
    align-items: center;
  }
  .btn {
    width: 34px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--btn-color);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease;
    display: grid;
    place-items: center;
  }
  .btn:hover { background: var(--btn-hover); }
  .btn-close:hover { background: #e81123; color: #fff; }

  /* 内容区：iframe */
  .window-body { flex: 1; display: flex; overflow: hidden; position: relative; }
  .window-body iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .window.loaded .window-body iframe { opacity: 1; }

  /* 加载动画（圆形进度条），iframe 加载完成前显示，避免白屏 */
  .window-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--win-bg);
    z-index: 1;
  }
  .window.loaded .window-loading { display: none; }
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(61, 107, 255, .2);
    border-top-color: #3d6bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  /* 拖动过程中屏蔽 iframe，避免吞掉 pointer 事件 */
  .window.dragging .window-body { pointer-events: none; }

  /* 拖拽改变大小 */
  .window.resizing .window-body { pointer-events: none; }
  .window.resizing { user-select: none; }
  .resize-handle {
    position: absolute;
    display: block;
    z-index: 20;
    touch-action: none; /* 移动端：允许 pointer 拖拽 resize */
  }
  .rh-n  { top: -1px;    left: 6px;    right: 6px;  height: 6px; cursor: ns-resize; }
  .rh-s  { bottom: -1px; left: 6px;    right: 6px;  height: 6px; cursor: ns-resize; }
  .rh-e  { right: -1px;  top: 6px;     bottom: 6px; width: 6px;  cursor: ew-resize; }
  .rh-w  { left: -1px;   top: 6px;     bottom: 6px; width: 6px;  cursor: ew-resize; }
  .rh-ne { top: -1px;    right: -1px;  width: 12px; height: 12px; cursor: nesw-resize; }
  .rh-nw { top: -1px;    left: -1px;   width: 12px; height: 12px; cursor: nwse-resize; }
  .rh-se { bottom: -1px; right: -1px;  width: 12px; height: 12px; cursor: nwse-resize; }
  .rh-sw { bottom: -1px; left: -1px;   width: 12px; height: 12px; cursor: nesw-resize; }

  /* ============ 右键菜单 ============ */
  .ctx-menu {
    position: fixed;
    min-width: 150px;
    padding: 4px;
    background: var(--ctx-bg);
    border: 1px solid var(--ctx-border);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    z-index: 10000;
    display: none;
    font-size: 13px;
    color: var(--ctx-fg);
    user-select: none;
  }
  .ctx-menu.show { display: block; }
  .ctx-menu .ctx-item {
    padding: 7px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
  }
  .ctx-menu .ctx-item:hover { background: var(--ctx-hover); color: var(--ctx-hover-fg); }
  .ctx-menu .ctx-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--ctx-sep);
  }