/* ==========================================================================
   Win11 Web · 视觉增强层（beauty layer）
   --------------------------------------------------------------------------
   加载顺序：位于 index.html 内联 <style> 之后，因此同等特异性下本文件优先。
   设计原则：
     1. 只做外观，不改 DOM 结构、不改 JS 逻辑，避免功能回归；
     2. 颜色一律走 var()/color-mix() 派生，自动跟随浅色/深色/4 套对比主题；
     3. 所有动效在 html[data-reduce-motion] 下自动失效。
   ========================================================================== */

/* ========================= 1. 令牌补全 ========================= */
:root{
  /* --- 修复：代码里引用了但从未定义的变量（会导致组件背景透明） --- */
  --card: rgba(255,255,255,.72);                                   /* 无 color-mix 时的兜底 */
  --bg:   rgba(255,255,255,.72);
  --card: color-mix(in srgb, var(--win-bg) 88%, transparent);      /* 面板卡片面：比窗口略透 */
  --bg:   color-mix(in srgb, var(--win-bg) 92%, transparent);      /* 输入 / 编辑区底色 */
  --line-soft: color-mix(in srgb, var(--line) 55%, transparent);   /* 极淡分隔线 */

  /* --- 层级表面（Mica 递进） --- */
  --surface-1: var(--win-bg);
  --surface-2: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  --surface-3: color-mix(in srgb, var(--panel-bg) 82%, transparent);

  /* --- 圆角体系 --- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* --- 动效曲线（Fluent Motion 标准） --- */
  --ease-out:  cubic-bezier(.16, 1, .30, 1);        /* 减速：进场 */
  --ease-std:  cubic-bezier(.20, 0, 0, 1);          /* 标准：位移/缩放 */
  --ease-brk:  cubic-bezier(.05, .70, .10, 1);      /* 加速溢出 */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* --- 玻璃边缘高光（浅深通用） --- */
  --glass-hl: rgba(255,255,255,.42);
  --glass-hl-soft: rgba(255,255,255,.16);

  /* --- 阴影：Win11 双层（环境光 + 直接光） --- */
  --sh-sm: 0 1px 2px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 4px 10px rgba(0,0,0,.12), 0 12px 28px rgba(0,0,0,.10);
  --sh-lg: 0 8px 22px rgba(0,0,0,.18), 0 24px 64px rgba(0,0,0,.16);

  /* --- 滚动条（Win11 细条悬浮式） --- */
  --sb-w: 8px;
  --sb-thumb: color-mix(in srgb, var(--text-3) 55%, transparent);
  --sb-thumb-hover: var(--text-3);
}
html[data-theme="dark"]{
  /* 深色下压暗环境光强度（仅调 --sh-*，不碰主题色令牌，避免覆盖对比主题） */
  --sh-sm: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.34);
  --sh-md: 0 4px 10px rgba(0,0,0,.44), 0 12px 28px rgba(0,0,0,.40);
  --sh-lg: 0 8px 22px rgba(0,0,0,.52), 0 24px 64px rgba(0,0,0,.48);
  --glass-hl: rgba(255,255,255,.10);
  --glass-hl-soft: rgba(255,255,255,.05);
}

/* ========================= 2. 全局质感 ========================= */
html, body{
  font-family: "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI",
               "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* Win11 悬浮细滚动条：轨道透明，滑块细且有圆角 */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
::-webkit-scrollbar{ width: var(--sb-w); height: var(--sb-w); }
::-webkit-scrollbar-track{ background: transparent; margin: 2px; }
::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background: var(--sb-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner{ background: transparent; }

/* 统一焦点体验（键盘可达，鼠标不打扰） */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}
input:focus-visible, textarea:focus-visible{ outline-offset: 0; }

/* ========================= 3. 桌面 ========================= */
/* 氛围层：暗角 + 顶部微高光，让壁纸有纵深而不脏 */
#desktop::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.26) 0%, transparent 62%),
    radial-gradient(100% 70% at 50% -10%, rgba(255,255,255,.10) 0%, transparent 55%);
}
#desktop-icons{ z-index: 1; padding: 10px 8px; gap: 4px; }

.dicon{
  border-radius: var(--r-md);
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              transform var(--dur-base) var(--ease-out);
  gap: 6px;
}
.dicon:hover{
  background: rgba(255,255,255,.16);
  outline: 1px solid rgba(255,255,255,.20);
  outline-offset: -1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.dicon.sel{
  background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.10));
  outline: 1px solid color-mix(in srgb, var(--accent) 78%, white);
  outline-offset: -1px;
}
.dicon svg, .dicon img{
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.dicon span{
  font-size: 11.5px;
  letter-spacing: .1px;
  /* 多层柔和投影：比原来的单层硬阴影更贴合 Win11 桌面文字 */
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 2px 10px rgba(0,0,0,.42),
    0 0 1px rgba(0,0,0,.55);
  padding: 1px 3px;
  border-radius: var(--r-xs);
}

/* ========================= 4. 任务栏 ========================= */
#taskbar{
  border-top: 1px solid var(--tb-border);
  box-shadow:
    inset 0 1px 0 var(--glass-hl),
    0 -1px 0 rgba(0,0,0,.06),
    0 -8px 26px rgba(0,0,0,.10);
}
html[data-taskbar-pos="top"] #taskbar{
  border-top: 0; border-bottom: 1px solid var(--tb-border);
  box-shadow: inset 0 -1px 0 var(--glass-hl), 0 1px 0 rgba(0,0,0,.06), 0 8px 26px rgba(0,0,0,.10);
}

.tb-btn{
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
.tb-btn:hover{ background: var(--hover); }
.tb-btn:active{ background: var(--active); transform: scale(.94); }
.tb-btn svg, .tb-btn img{ transition: transform var(--dur-base) var(--ease-out); }
.tb-btn:hover svg, .tb-btn:hover img{ transform: scale(1.06); }

/* 运行指示器：小圆点 → 激活时拉长为强调色胶囊 */
.tb-btn .dot{
  height: 3px;
  border-radius: 99px;
  bottom: 3px;
  transition: width var(--dur-base) var(--ease-out),
              background var(--dur-base) ease,
              box-shadow var(--dur-base) ease;
}
.tb-btn.running .dot{ background: var(--text-3); }
.tb-btn.running.active .dot{
  width: 17px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.tb-btn.active{ background: var(--active); }
.tb-btn.active .dot{ width: 17px; }

/* 中心簇两侧留出呼吸感（开始/搜索 与 应用槽之间） */
#tb-center > [data-id="__start"]{ margin-right: 6px; }
#tb-apps{ gap: 4px !important; }

#tb-right{ gap: 2px; }
.tray-btn{
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tray-btn:hover{ background: var(--hover); }
.tray-btn svg{ opacity: .92; transition: color var(--dur-fast) ease; }
.tray-btn:hover svg{ opacity: 1; }
/* 强调色激活态（全屏/旋转锁定）：纯实色块，保持克制的"大厂感" */
.tray-btn.on{
  background: var(--accent);
  color: #fff;
}
#clock{ line-height: 1.3; }
#clock b:first-child{ font-weight: 600; }
#show-desktop{ transition: background var(--dur-fast) ease; border-radius: 2px; }
#show-desktop:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ========================= 5. 开始菜单 ========================= */
#start{
  border-radius: var(--r-xl);
  box-shadow:
    var(--sh-lg),
    inset 0 1px 0 var(--glass-hl-soft);
  /* 打开时轻微上浮 + 缩放，比单纯淡入更有层次 */
  transform: translateX(-50%) translateY(16px) scale(.985);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
#start.open{
  transform: translateX(-50%) translateY(0) scale(1);
  border-radius: var(--r-xl);
}
/* 磨砂更干净：提高饱和度补偿掉色 */
#start, #taskbar, .toast, #ctx{ backdrop-filter: blur(48px) saturate(1.9) brightness(1.02); -webkit-backdrop-filter: blur(48px) saturate(1.9) brightness(1.02); }

#start .s-search{
  height: 36px;
  padding: 0 15px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--win-bg) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease,
              background var(--dur-base) ease;
}
#start .s-search:hover{ background: var(--win-bg); }
#start .s-search:focus-within{
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: var(--win-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
#start .s-search svg{ width: 15px; height: 15px; transition: color var(--dur-fast) ease; }
#start .s-search:focus-within svg{ color: var(--accent); }

#start .s-head button{
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
#start .s-head button:hover{ background: var(--active); color: var(--text); }

.s-app{
  border-radius: var(--r-md);
  padding: 14px 4px;
  gap: 8px;
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
.s-app:hover{
  background: var(--hover);
  transform: translateY(-2px);
}
.s-app:active{ transform: translateY(0) scale(.97); }
.s-app svg, .s-app img{
  transition: transform var(--dur-base) var(--ease-out);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.16));
}
.s-app:hover svg, .s-app:hover img{ transform: scale(1.08); }
.s-app span{ font-size: 11.5px; letter-spacing: .1px; }

#start .s-foot{
  height: 58px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.s-foot .user{
  border-radius: var(--r-sm);
  padding: 6px 11px;
  transition: background var(--dur-fast) ease;
}
.s-foot .avatar{
  /* 实色强调 + 柔光，克制版（不用渐变） */
  background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 12.5px;
}
.s-foot .pw button{
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
.s-foot .pw button:hover{ background: var(--hover); transform: translateY(-1px); }

/* ========================= 6. 窗口 ========================= */
.window{
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--win-border) 60%, transparent);
  /* 圆角内 1px 内描边，让边框像真实窗框而不是单薄的 CSS 边框 */
  transition: box-shadow var(--dur-base) ease, filter var(--dur-base) ease;
}
.window.focused{
  box-shadow:
    var(--sh-lg),
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, var(--win-border));
}
.window:not(.focused){ filter: saturate(.94); }

.window.opening{
  animation: winIn var(--dur-slow) var(--ease-out);
}
@keyframes winIn{
  from{ opacity: 0; transform: scale(.96) translateY(14px); }
  to  { opacity: 1; transform: none; }
}

/* 标题栏：聚焦时带一点点强调色渐变的 Mica 感 */
.titlebar{
  height: 38px;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease;
}
.window.focused .titlebar{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, var(--titlebar-bg)),
      var(--titlebar-bg));
  border-bottom-color: var(--line);
}
.window:not(.focused) .titlebar{ background: var(--titlebar-bg); }
.titlebar .tb-title{ letter-spacing: .1px; }

/* 窗口控件：悬浮更明确，关闭最后是纯红 */
.tb-controls button{
  border-radius: var(--r-xs);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tb-controls button:hover{ background: var(--hover); }
.tb-controls button.close:hover{ background: #c42b1c; color: #fff; }
.tb-controls button:active{ opacity: .7; }

/* 贴靠浮层：更柔和的强调色块 */
#snap-overlay div{
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 72%, transparent);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ========================= 7. 菜单 / 通知 / 对话框 ========================= */
#ctx{
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 5px;
}
#ctx.open{ animation: ctxIn 160ms var(--ease-out); }
@keyframes ctxIn{
  from{ opacity: 0; transform: scale(.97) translateY(-4px); }
  to  { opacity: 1; transform: none; }
}
#ctx button{
  border-radius: var(--r-sm);
  padding: 8px 12px;
  gap: 11px;
  transition: background var(--dur-fast) ease;
}
#ctx button svg{ color: color-mix(in srgb, var(--text-2) 92%, var(--accent)); }
#ctx button .k{ font-variant-numeric: tabular-nums; opacity: .75; }
#ctx .sep{ margin: 4px 8px; background: var(--line-soft); }

.toast{
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 13px 15px 13px 17px;
  /* 左侧强调色竖条 = Win11 通知的应用标识 */
  border-left: 3px solid var(--accent);
}
.toast .t-h svg{ color: var(--accent); }
.toast .t-b{ line-height: 1.6; }

#modal-layer{
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
#modal-layer.open{ animation: fadeIn var(--dur-base) var(--ease-out); }
@keyframes fadeIn{ from{ opacity: 0 } to{ opacity: 1 } }
.dialog{
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  animation: dlgIn var(--dur-slow) var(--ease-out);
}
@keyframes dlgIn{
  from{ opacity: 0; transform: scale(.94) translateY(10px); }
  to  { opacity: 1; transform: none; }
}
.dialog h3{ font-size: 15.5px; letter-spacing: .1px; }
.dialog input{
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.dialog input:focus{
  border-bottom-width: 2px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent);
}
.dialog .d-foot button{
  border-radius: var(--r-sm);
  min-width: 98px;
  transition: background var(--dur-fast) ease, box-shadow var(--dur-base) ease,
              transform var(--dur-base) var(--ease-out);
}
.dialog .d-foot button:hover{ transform: translateY(-1px); }
.dialog .d-foot button.primary{
  background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.dialog .d-foot button.primary:hover{
  background: var(--accent-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 48%, transparent);
}
.dialog .d-foot button.primary:active{ transform: translateY(0) scale(.98); }

/* ========================= 8. 锁屏 ========================= */
/* 极缓慢的极光流动，几乎不占 GPU；reduce-motion 下会自动停 */
#lock .l-bg.a{
  background:
    radial-gradient(120% 90% at 72% 80%, #2e6fb0 0%, transparent 55%),
    radial-gradient(100% 80% at 22% 86%, #7c4fb0 0%, transparent 52%),
    radial-gradient(140% 120% at 50% 110%, #123a6e 0%, transparent 60%),
    linear-gradient(160deg,#132c50 0%,#0b1830 58%,#060c1a 100%) !important;
  animation: lockDrift 46s ease-in-out infinite alternate;
}
@keyframes lockDrift{
  from{ transform: scale(1) translate3d(-1.2%, -1%, 0); }
  to  { transform: scale(1.06) translate3d(1.2%, 1.4%, 0); }
}
#lock .l-time b{ font-weight: 300; letter-spacing: -2px; }
#lock .l-time i{ font-weight: 400; opacity: .92; }

#lock .l-hint{
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 4px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22);
  animation: hintPulse 3.2s ease-in-out infinite;
  transition: background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
#lock .l-hint:hover{ background: rgba(255,255,255,.26); transform: translateY(-1px); }
@keyframes hintPulse{
  0%,100%{ box-shadow: 0 4px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 0 rgba(255,255,255,.16); }
  50%    { box-shadow: 0 4px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 9px rgba(255,255,255,0); }
}
#lock .l-tray svg{ opacity: .9; }

#lock .l-avatar{
  width: 92px; height: 92px;
  background: rgba(255,255,255,.24);
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 10px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
  font-weight: 300;
  font-size: 38px;
}
#lock .l-name{ font-weight: 400; font-size: 21px; letter-spacing: .3px; }
#lock .l-signin{
  border-radius: var(--r-md);
  padding: 10px 48px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  transition: background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
#lock .l-signin:hover{ background: rgba(255,255,255,.30); transform: translateY(-1px); }
#lock .l-signin:active{ transform: translateY(0) scale(.98); }

/* ========================= 9. 应用内通用控件 ========================= */
/* --card/--bg 已补全，这里统一把卡片、按钮、输入的观感拉齐 */
.set-card, .si-card, .k-card, .tm-card{
  box-shadow: var(--sh-sm);
  border-radius: var(--r-lg);
}
.set-card{
  transition: box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.set-card:hover{ box-shadow: var(--sh-md); }

/* 设置导航项：Win11 的胶囊导航 + 左侧强调色短竖条 */
.set-nav-item, .tm-nav-i{
  border-radius: var(--r-md);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              padding-left var(--dur-base) var(--ease-out);
}
.set-nav-item.on::before, .tm-nav-i.on::before{
  width: 3px; height: 17px;
  border-radius: 99px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Tab 条 */
.tm-tab.on, .ck-tab.on, .st-tab.on{
  border-radius: var(--r-md);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 通用按钮（App 内 .si-btn / .sn-btn 等） */
.si-btn, .sn-btn, .btn{
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) ease;
}
.si-btn:hover, .sn-btn:hover{ background: var(--hover); transform: translateY(-1px); }
.si-btn:active, .sn-btn:active{ transform: translateY(0) scale(.98); }
.si-btn.primary, .sn-btn.primary{
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.si-btn.primary:hover, .sn-btn.primary:hover{
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Windows Phone 三键导航（竖屏手机） */
#wpbar{
  background: rgba(10,10,10,.82);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#wpbar .wp-key{ transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease; }

/* ========================= 10. 动效偏好 ========================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}