#home{
  z-index: 20;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding-top: var(--sb-h);
  transition: transform var(--t-page) var(--e-out), opacity var(--t-slow) var(--e-soft), filter var(--t-slow) var(--e-soft);
}
#device[data-state="lock"] #home{ transform: scale(1.06); opacity:0; filter: blur(8px); pointer-events:none; }
/* 应用态：桌面本体保留可见，交由图标下沉 + #apps 压暗层表达层次 */
#device[data-state="app"] #home{ transform: none; opacity:1; filter:none; pointer-events:none; }
#device[data-state="switcher"] #home{ transform: scale(.86); opacity:0; pointer-events:none; }

#pages{
  display:flex; height:100%; overflow:hidden;
  touch-action: pan-y;
}
.page{
  flex: 0 0 100%;
  padding: 14px 18px 6px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 96px;
  align-content:start;
  gap: 6px 4px;
}
.icon{
  display:grid; justify-items:center; align-content:start; gap:7px;
  padding-top: 6px;
  transition: transform var(--t-fast) var(--e-spring), opacity var(--t-base);
}
.icon:active{ transform: scale(.88); }
/* 开合应用时：其他图标下沉虚化，被点击图标由窗口皮肤接管（立即隐藏，避免重影） */
.icon.sink{
  transform: translateY(30px); opacity:.7; filter: blur(2px);
  transition:
    transform var(--t-sink) var(--e-sink),
    opacity var(--t-sink) var(--e-sink),
    filter var(--t-sink) var(--e-sink);
}
.icon.zoom .glyph,
.icon.zoom .name{ opacity:0; transition:none; }
.icon .glyph{
  width: 58px; height: 58px; border-radius: 17px;
  display:grid; place-items:center;
  box-shadow: var(--shadow-1), var(--shadow-hair);
  position: relative; overflow:hidden;
  transition: opacity var(--t-base) var(--e-soft);
}
.icon .glyph::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
}
.icon .glyph svg{ width:29px; height:29px; position:relative; z-index:1; }
.icon .name{
  font-size: 11px; font-weight: 550; letter-spacing:.01em;
  color: var(--fg); text-shadow: 0 1px 3px rgba(0,0,0,.5);
  max-width: 76px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;
  transition: opacity var(--t-base) var(--e-soft);
}
:root[data-scheme="light"] .icon .name{ text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.icon .badge{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; border-radius:10px;
  background: var(--danger); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; padding:0 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  animation: badgeIn var(--t-base) var(--e-spring) both;
}
@keyframes badgeIn{ from{ transform: scale(0); } }
.icon .wrap{ position:relative; }

#dots{ display:flex; gap:7px; justify-content:center; padding: 8px 0 12px; }
#dots i{
  width:6px; height:6px; border-radius:50%; background: var(--fg-4);
  transition: width var(--t-base) var(--e-spring), background var(--t-base);
}
#dots i.on{ width:18px; background: var(--fg); }

#dock{
  margin: 0 12px calc(var(--nav-h) + 8px);
  padding: 11px 8px;
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  display:grid; grid-template-columns: repeat(4,1fr);
}
#dock .icon .name{ display:none; }
#dock .icon{ padding-top:0; }

/* ===== 多任务 ===== */
#switcher{
  z-index: 45; pointer-events:none; opacity:0;
  background: rgba(6,6,7,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity var(--t-slow) var(--e-soft);
  display:grid; align-content:center;
}
#device[data-state="switcher"] #switcher{ pointer-events:auto; opacity:1; }
#switcher-track{
  display:flex; gap: 14px; padding: 0 max(28px, 12%);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  height: 64%;
  align-items:center;
}
.sw-card{
  flex: 0 0 74%; height: 100%;
  scroll-snap-align: center;
  border-radius: 26px; overflow:hidden; position:relative;
  background: var(--ink-1);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
  transform: scale(.94); opacity:.72;
  transition: transform var(--t-slow) var(--e-out), opacity var(--t-slow) var(--e-soft);
}
.sw-card.mid{ transform:none; opacity:1; }
.sw-card .cap{
  position:absolute; top:0; left:0; right:0; height: 42px;
  display:flex; align-items:center; gap:8px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
  font-size:12px; font-weight:650; z-index:2; color:#fff;
}
.sw-card .cap .g{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; }
.sw-card .cap .g svg{ width:12px; height:12px; }
.sw-card .shot{ position:absolute; inset:0; }
.sw-card .shot canvas{ width:100%; height:100%; display:block; }
.sw-empty{ text-align:center; color: var(--fg-3); font-size:13px; width:100%; }
.sw-kill{
  position:absolute; right:10px; top:10px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  background: rgba(0,0,0,.5); color:#fff; display:grid; place-items:center;
  transition: transform var(--t-fast) var(--e-spring);
}
.sw-kill svg{ width:12px; height:12px; }
.sw-kill:active{ transform: scale(.86); }

/* ===== 通知 ===== */
#notif-host{
  position:absolute; top: calc(var(--sb-h) - 4px); left:10px; right:10px;
  z-index: 100; display:grid; gap:8px; pointer-events:none;
}
.notif{
  pointer-events:auto;
  border-radius: 20px; padding: 12px 14px;
  background: var(--glass-2);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
  display:grid; grid-template-columns: 32px 1fr; gap:11px; align-items:start;
  animation: notifIn var(--t-page) var(--e-out) both;
  will-change: transform, opacity;
}
.notif.out{ animation: notifOut var(--t-base) var(--e-in) both; }
@keyframes notifIn{ from{ opacity:0; transform: translateY(-140%) scale(.94); } }
@keyframes notifOut{ to{ opacity:0; transform: translateY(-120%) scale(.94); } }
.notif .ico{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; }
.notif .ico svg{ width:17px; height:17px; }
.notif .tt{ font-size:12.5px; font-weight:700; display:flex; justify-content:space-between; gap:8px; }
.notif .tt span{ font-weight:600; color: var(--fg-3); font-size:10.5px; }
.notif .bd{ font-size:12px; color: var(--fg-2); margin-top:3px; line-height:1.45; }

/* ===== 底部弹层 ===== */
#sheet-host{ position:absolute; inset:0; z-index: 110; pointer-events:none; }
.sheet-mask{
  position:absolute; inset:0; background: rgba(0,0,0,0);
  transition: background var(--t-slow) var(--e-soft); pointer-events:auto;
}
.sheet-mask.on{ background: rgba(0,0,0,.5); }
.sheet{
  position:absolute; left:8px; right:8px; bottom: 8px;
  border-radius: 30px; padding: 18px 18px calc(18px + var(--nav-h));
  background: var(--glass-2);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
  transform: translateY(115%); opacity: 0;
  transition: transform var(--t-page) var(--e-out), opacity var(--t-base) var(--e-soft);
  max-height: 76%; overflow:auto;
}
.sheet.on{ transform:none; opacity:1; }
.sheet h4{ margin:0 0 4px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.sheet p{ margin:0 0 14px; font-size:12.5px; color: var(--fg-2); line-height:1.5; }
.sheet-acts{ display:grid; gap:8px; }
.sheet-btn{
  height: 48px; border-radius: 16px; font-size:14px; font-weight:650;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-base);
}
.sheet-btn:active{ transform: scale(.975); }
.sheet-btn.primary{ background: var(--accent); color: var(--accent-fg); box-shadow:none; }
.sheet-btn.danger{ color: var(--danger); }
.sheet-field{
  width:100%; height:46px; border-radius:14px; padding: 0 14px; margin-bottom:10px;
  background: var(--glass-hi); border: 0; box-shadow: inset 0 0 0 1px var(--line);
  outline:none; font-size:14px;
  transition: box-shadow var(--t-base) var(--e-soft);
}
.sheet-field:focus{ box-shadow: inset 0 0 0 1.6px var(--accent); }

/* ===== Toast ===== */
#toast-host{
  position:absolute; left:0; right:0; bottom: calc(var(--nav-h) + 18px);
  z-index: 120; display:grid; justify-items:center; gap:8px; pointer-events:none;
}
.toast{
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--glass-2); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  font-size: 12.5px; font-weight: 600;
  animation: toastIn var(--t-slow) var(--e-spring) both;
}
.toast.out{ animation: toastOut var(--t-base) var(--e-in) both; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(16px) scale(.92); } }
@keyframes toastOut{ to{ opacity:0; transform: translateY(10px) scale(.96); } }