#apps{ position:absolute; inset:0; z-index: 40; pointer-events:none; }

/* 应用打开时的背景压暗模糊层（随窗口开合淡入淡出） */
#apps::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  opacity: 0;
  transition: opacity var(--t-app) var(--e-ios);
}
#device[data-state="app"] #apps::before,
#device[data-state="switcher"] #apps::before{ opacity: 1; }

/* ===== 应用窗口：图标本体生长为全屏 =====
   展开态由 CSS 给出（全屏），收起态由 JS 写入图标像素矩形，
   两者之间靠 left/top/width/height/border-radius 过渡完成开合。 */
.win{
  position:absolute;
  left:0; top:0; width:100%; height:100%;
  pointer-events:auto;
  background: var(--ink-1);
  overflow:hidden; overflow:clip;
  border-radius: var(--radius-screen);
  transform-origin: 50% 50%;
  will-change: left, top, width, height, border-radius, transform;
  transition:
    left var(--t-app) var(--e-ios),
    top var(--t-app) var(--e-ios),
    width var(--t-app) var(--e-ios),
    height var(--t-app) var(--e-ios),
    border-radius var(--t-app) var(--e-ios),
    transform var(--t-app) var(--e-ios),
    opacity var(--t-base) var(--e-soft);
}
/* 图标皮肤：与桌面图标同一渐变+高光，窗口起始帧就是那枚图标；全程不淡出 */
.win-skin{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.win-skin::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
}
/* 图标：随窗口放大并向上飞出，超出部分被窗口裁掉，最后被内容层盖住 */
.win-fly{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.win-fly i{
  display:block; width:29px; height:29px; margin-top:0;
  transition:
    width var(--t-app) var(--e-ios),
    height var(--t-app) var(--e-ios),
    margin-top var(--t-app) var(--e-ios);
}
.win-fly svg{ display:block; width:100%; height:100%; }
/* 内容层：整屏尺寸，生长过程只做裁切，不反复重排 */
.win-in{
  position:absolute; left:0; top:0; z-index:3;
  width: var(--scr-w, 100%); height: var(--scr-h, 100%);
  display:grid; grid-template-rows: auto 1fr;
  background: var(--ink-1);
  opacity: 0; pointer-events:none;
  transition: opacity var(--t-app) var(--e-ios);
}

.win[data-open="1"] .win-in{ opacity:1; pointer-events:auto; }
.win[data-open="1"] .win-fly i{ width:128px; height:128px; margin-top:-300px; }

.win.bg{ opacity:0; pointer-events:none; }
.win.drag{ transition:none !important; }
.win.no-tr, .win.no-tr *{ transition:none !important; animation:none !important; }

.win-head{
  position: relative; z-index: 5;
  padding: calc(var(--sb-h) + 4px) 18px 10px;
  background: linear-gradient(180deg, var(--ink-2), color-mix(in oklab, var(--ink-2) 82%, transparent));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px;
  transition: box-shadow var(--t-base) var(--e-soft);
}
.win-head .title{
  font-size: 17.5px; font-weight: 700; letter-spacing: -.015em;
  transition: font-size var(--t-base) var(--e-soft);
}
.win-head .sub{ font-size:11.5px; color: var(--fg-3); font-weight:600; margin-top:2px; }
.win-head .hbtn{
  min-width: 34px; height: 34px; border-radius: 12px; padding: 0 9px;
  display:grid; place-items:center; grid-auto-flow: column; gap:5px;
  color: var(--fg-2); font-size:12.5px; font-weight:600;
  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), color var(--t-base);
}
.win-head .hbtn svg{ width:17px; height:17px; }
.win-head .hbtn:active{ transform: scale(.9); }
.win-head .hbtn.acc{ background: var(--accent); color: var(--accent-fg); box-shadow:none; }
.win-head .hbtn[hidden]{ display:none; }

.win-body{
  position:relative; overflow: hidden;
  padding-bottom: var(--nav-h);
}
.win-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(var(--nav-h) + 18px);
}

/* 应用内子页面推进（由 Web Animations 驱动，支持中途打断续接） */
.route{
  position:absolute; inset:0; overflow-y:auto;
  padding: 14px 16px calc(var(--nav-h) + 18px);
  background: var(--ink-1);
  will-change: transform, opacity;
}

/* ===== 通用列表 / 卡片 ===== */
.grp{
  border-radius: var(--radius-card);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  overflow: hidden; margin-bottom: 14px;
}
.grp-t{
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-3); padding: 4px 6px 8px;
}
.row{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 12px;
  padding: 13px 15px; min-height: 52px;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background var(--t-fast) linear;
}
.row:last-child{ box-shadow:none; }
.row.tap{ cursor:pointer; }
.row.tap:active{ background: var(--glass-hi); }
.row .ri{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; }
.row .ri svg{ width:16px; height:16px; }
.row .rl{ font-size:14px; font-weight:550; }
.row .rd{ font-size:11.5px; color: var(--fg-3); margin-top:3px; line-height:1.4; }
.row .rv{ font-size:12.5px; color: var(--fg-3); display:flex; align-items:center; gap:6px; }
.row .rv svg{ width:14px; height:14px; opacity:.55; }

.sw{
  width: 46px; height: 28px; border-radius: 999px; position:relative;
  background: var(--fg-4); box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--t-base) var(--e-soft);
  flex: 0 0 auto;
}
.sw::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform var(--t-base) var(--e-spring), width var(--t-base) var(--e-spring);
}
.sw.on{ background: var(--accent); }
.sw.on::after{ transform: translateX(18px); }
.sw:active::after{ width: 26px; }

.seg{
  display:flex; padding:3px; border-radius: 13px; gap:3px;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: 14px;
}
.seg button{
  flex:1; height: 32px; border-radius: 10px; font-size:12.5px; font-weight:650;
  color: var(--fg-3);
  transition: color var(--t-base), background var(--t-base) var(--e-soft), transform var(--t-fast) var(--e-spring);
}
.seg button.on{ color: var(--fg); background: var(--ink-3); box-shadow: var(--shadow-1); }
.seg button:active{ transform: scale(.96); }

.empty{
  display:grid; place-items:center; gap:10px; padding: 56px 20px; text-align:center;
  color: var(--fg-3);
  animation: fadeUp var(--t-slow) var(--e-out) both;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(12px); } }
.empty svg{ width:40px; height:40px; opacity:.4; }
.empty b{ font-size:14px; font-weight:650; color: var(--fg-2); }
.empty span{ font-size:12px; max-width: 220px; line-height:1.55; }

.fab{
  position:absolute; right: 18px; bottom: calc(var(--nav-h) + 22px);
  width: 54px; height: 54px; border-radius: 20px; z-index: 6;
  background: var(--accent); color: var(--accent-fg);
  display:grid; place-items:center;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-base) var(--e-spring), box-shadow var(--t-base);
  animation: fabIn var(--t-slow) var(--e-spring) both;
}
@keyframes fabIn{ from{ transform: scale(0) rotate(-40deg); opacity:0; } }
.fab svg{ width:24px; height:24px; }
.fab:active{ transform: scale(.9); }

.stagger > *{ animation: fadeUp 420ms var(--e-out) both; }
.stagger > *:nth-child(1){ animation-delay: 0ms; }
.stagger > *:nth-child(2){ animation-delay: 34ms; }
.stagger > *:nth-child(3){ animation-delay: 68ms; }
.stagger > *:nth-child(4){ animation-delay: 102ms; }
.stagger > *:nth-child(5){ animation-delay: 136ms; }
.stagger > *:nth-child(6){ animation-delay: 170ms; }
.stagger > *:nth-child(7){ animation-delay: 204ms; }
.stagger > *:nth-child(8){ animation-delay: 238ms; }