/* ============================================================
   快速设置面板（Quick Settings）
   布局按 Windows 11 真机：
     · 面板宽 360，右下贴任务栏，Mica 亚克力
     · 顶栏 = 头像 + 用户名 + 齿轮
     · 6 个磁贴 3 列 × 2 行，点亮态 = accent 底反白
     · 亮度滑块在上、音量滑块在下，滑轨左侧是图标，轨道为胶囊
     · 底部行 = 电量百分比 + 两枚 32px 圆形快捷钮
   ============================================================ */
.qs-panel{
  position:absolute;right:10px;bottom:calc(var(--taskbar-h) + 8px);
  width:360px;z-index:960;
  background:var(--panel-bg);
  backdrop-filter:blur(48px) saturate(1.8);
  -webkit-backdrop-filter:blur(48px) saturate(1.8);
  border:1px solid var(--win-border);
  border-radius:8px;
  box-shadow:var(--shadow-win);
  padding:14px 14px 10px;
  display:flex;flex-direction:column;gap:12px;
  transform-origin:bottom right;
  animation:qsIn .18s cubic-bezier(.79,.14,.15,.86) both;
}
@keyframes qsIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* --- 顶栏 --- */
.qs-head{display:flex;align-items:center;gap:9px;padding:0 2px 2px}
.qs-av{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--accent);color:var(--accent-fg);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.qs-un{flex:1;min-width:0;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-hbtn{
  width:30px;height:30px;flex:none;border:0;border-radius:var(--radius);
  background:transparent;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.qs-hbtn:hover{background:var(--hover)}

/* --- 磁贴网格 --- */
.qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qs-tile{
  border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--win-bg);color:var(--text);
  padding:11px 10px;text-align:left;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;gap:7px;min-height:66px;
  transition:background .12s,border-color .12s;
}
.qs-tile:hover{background:var(--hover)}
.qs-tile .qs-ic{
  width:18px;height:18px;display:block;color:var(--text-2);
  transition:color .12s;
}
.qs-tile .qs-ic svg{width:18px;height:18px;display:block}
.qs-tile .qs-tx{display:block;min-width:0}
.qs-tile b{display:block;font-size:11.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-tile i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 点亮态：accent 实底 + 反白文字（真机磁贴就是这个观感） */
.qs-tile.is-on{
  background:var(--accent);border-color:transparent;color:var(--accent-fg);
}
.qs-tile.is-on .qs-ic{color:var(--accent-fg)}
.qs-tile.is-on i{color:rgba(255,255,255,.78)}

/* --- 滑块 ---
   真机 Win11 的亮度/音量不是「整块卡片填色」，而是：
   左侧一枚 20px 图标，右侧一条 4px 高的胶囊细轨道，
   已调部分为accent 实色、未调部分为半透明灰，滑块拇指直径 16px。 */
.qs-slider{
  position:relative;height:34px;
  display:flex;align-items:center;gap:10px;
}
.qs-sic{
  flex:none;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:var(--win-bg);border:1px solid var(--line);
  color:var(--text);pointer-events:none;
}
.qs-sic svg{width:14px;height:14px;display:block}
/* 轨道容器：包住 fill + range，负责画那条细胶囊 */
.qs-track{
  position:relative;flex:1;height:4px;border-radius:99px;
  background:var(--track-bg);
}
.qs-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:99px;background:var(--accent);
  pointer-events:none;
}
.qs-range{
  position:absolute;inset:-8px 0;width:100%;height:20px;
  -webkit-appearance:none;appearance:none;background:transparent;
  margin:0;cursor:pointer;
}
.qs-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid var(--panel-solid);
  box-shadow:0 0 0 1px var(--accent);
}
.qs-range::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:3px solid var(--panel-solid);
  box-shadow:0 0 0 1px var(--accent);
}
.qs-range::-moz-range-track{background:transparent}
.qs-range:focus{outline:none}

/* --- 底部行 --- */
.qs-foot{display:flex;align-items:center;gap:8px;padding:2px 2px 0}
.qs-batt{
  flex:1;display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--text);
}
.qs-batt svg{width:22px;height:22px;display:block;flex:none}
.qs-fbtn{
  width:32px;height:32px;flex:none;border:0;border-radius:50%;
  background:var(--win-bg);border:1px solid var(--line);
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.qs-fbtn:hover{background:var(--hover)}
.qs-fbtn svg{width:16px;height:16px;display:block}

/* 深色主题微调 */
html[data-theme="dark"] .qs-panel{--qs-tile-b:#2b2b2b}
html[data-theme="dark"] .qs-tile,
html[data-theme="dark"] .qs-slider,
html[data-theme="dark"] .qs-fbtn{background:#2f2f2f}
html[data-theme="dark"] .qs-tile:hover{background:#383838}
html[data-theme="dark"] .qs-range::-webkit-slider-thumb{
  background:#f0f0f0;border-color:rgba(255,255,255,.16);
}

/* 减少动画 */
html[data-reduce-motion] .qs-panel{animation:none}
/* ============================================================
   通知中心日历（点时钟弹出）
   真机观感：顶部大号时间 + 日期星期，下面 7 列月历，
   今天 = accent 实心圆，底部一排翻月/今天按钮。
   ============================================================ */
.cal-panel{
  position:absolute;right:10px;bottom:calc(var(--taskbar-h) + 8px);
  width:326px;z-index:960;
  background:var(--panel-bg);
  backdrop-filter:blur(48px) saturate(1.8);
  -webkit-backdrop-filter:blur(48px) saturate(1.8);
  border:1px solid var(--win-border);
  border-radius:8px;
  box-shadow:var(--shadow-win);
  padding:14px;
  transform-origin:bottom right;
  animation:qsIn .18s cubic-bezier(.79,.14,.15,.86) both;
}
.cal-head{padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.cal-head b{display:block;font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.4px}
.cal-head i{display:block;font-style:normal;font-size:12px;color:var(--text-2);margin-top:3px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cal-wd{
  height:26px;font-size:11px;color:var(--text-3);
  display:flex;align-items:center;justify-content:center;
}
.cal-cell{
  height:34px;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text);
}
.cal-cell.cal-out{color:var(--text-3);opacity:.45}
.cal-cell.is-today{background:var(--accent);color:var(--accent-fg);font-weight:600}
.cal-foot{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.cal-mon{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--text-2)}
.cal-fbtn{
  min-width:30px;height:28px;padding:0 8px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--win-bg);color:var(--text);
  font:inherit;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cal-fbtn:hover{background:var(--hover)}
.cal-today{min-width:auto}