/* ===== 舞台与设备外壳 ===== */
#stage{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #17181a 0%, #0a0a0b 60%, #070708 100%);
  padding: 18px;
}
#device{
  position: relative;
  width: min(414px, calc(100vw - 24px));
  height: min(896px, calc(100vh - 24px));
  aspect-ratio: 414 / 896;
  border-radius: calc(var(--radius-screen) + 12px);
  padding: 11px;
  background: linear-gradient(160deg,#3a3c40,#141517 34%,#0e0f10 60%,#2c2e31);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 90px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(0,0,0,.7);
}
#screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--radius-screen);
  /* clip 而非 hidden：不生成滚动容器，避免输入框获得焦点时整屏被浏览器滚动 */
  overflow: hidden;
  overflow: clip;
  background: var(--ink-0);
  isolation: isolate;
}
#device-glare{
  position: absolute; inset: 0;
  border-radius: calc(var(--radius-screen) + 12px);
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.05) 100%);
  mix-blend-mode: screen;
}

/* ===== 壁纸 ===== */
#wall{ position:absolute; inset:0; z-index:0; }
#wall-canvas{ width:100%; height:100%; display:block; }
#wall::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 30%, rgba(0,0,0,.42));
  transition: opacity var(--t-slow) var(--e-soft);
}
#device[data-state="app"] #wall{ transform: scale(1.45); filter: saturate(.9) brightness(.78); }
#wall{ transition: transform var(--t-app) var(--e-ios), filter var(--t-app) var(--e-ios); }

/* ===== 图层通用 ===== */
.layer{ position:absolute; inset:0; }

/* ===== 状态栏 ===== */
#statusbar{
  position:absolute; top:0; left:0; right:0; height: var(--sb-h);
  z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 22px;
  font-size: 13px; font-weight: 600; letter-spacing:.02em;
  color: var(--fg);
  pointer-events: none;
  transition: color var(--t-base) var(--e-soft), opacity var(--t-base) var(--e-soft);
}
.sb-left,.sb-right{ display:flex; align-items:center; gap:7px; min-width: 92px; }
.sb-right{ justify-content:flex-end; }
#sb-tag{ font-size:11px; font-weight:600; color: var(--accent); opacity:0; transform: translateY(-3px);
  transition: opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-spring); }
#sb-tag.on{ opacity:1; transform:none; }
.sb-notch{
  width: 104px; height: 26px; border-radius: var(--radius-pill);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.sb-ico svg{ display:block; width:17px; height:17px; }
.sb-batt{ position:relative; display:inline-flex; align-items:center; gap:4px; }
.sb-batt b{ font-size:11px; font-weight:700; font-variant-numeric: tabular-nums; opacity:.86; }
.sb-batt::before{
  content:""; width:24px; height:12px; border-radius:3.5px;
  box-shadow: inset 0 0 0 1.4px currentColor; opacity:.5;
}
.sb-batt::after{
  content:""; width:2px; height:5px; border-radius:0 2px 2px 0;
  background: currentColor; opacity:.5; margin-left:-3px;
}
#sb-batt-fill{
  position:absolute; left:1.9px; top:50%; transform: translateY(-50%);
  height:7.4px; border-radius:2px; background: currentColor;
  width: 0; transition: width 600ms var(--e-soft), background var(--t-base);
}
#sb-batt-fill.low{ background: var(--danger); }
#sb-batt-fill.chg{ background: var(--accent-2); }

/* ===== 手势条 ===== */
#navbar{
  position:absolute; left:0; right:0; bottom:0; height: var(--nav-h);
  z-index: 70; display:grid; place-items:center;
  touch-action: none;
}
#navbar-pill{
  width: 132px; height: 5px; border-radius: 3px;
  background: var(--fg); opacity:.5;
  transition: opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-spring), width var(--t-base) var(--e-soft);
}
#navbar.act #navbar-pill{ opacity:.92; transform: scaleY(1.35); width: 148px; }
#device[data-state="lock"] #navbar-pill{ opacity:.34; }

/* ===== 控制中心 ===== */
#cc{
  z-index: 90; pointer-events: none;
  background: rgba(0,0,0,0);
  transition: background var(--t-slow) var(--e-soft);
}
#cc.on{ pointer-events:auto; background: rgba(0,0,0,.42); }
#cc.drag{ pointer-events:auto; transition:none; }
#cc.drag #cc-body{ transition:none; }
#cc-body{
  position:absolute; left:10px; right:10px; top:8px;
  padding: 16px 16px 18px;
  border-radius: 34px;
  background: var(--glass-2);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: var(--shadow-2), var(--shadow-hair), 0 0 0 1px var(--line);
  transform: translateY(-108%) scale(.96);
  opacity: 0;
  transition: transform var(--t-page) var(--e-out), opacity var(--t-base) var(--e-soft);
  display: grid; gap: 12px;
}
#cc.on #cc-body{ transform:none; opacity:1; }
.cc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.cc-tile{
  height: 68px; border-radius: 20px;
  background: var(--glass-hi);
  box-shadow: inset 0 0 0 1px var(--line);
  display:grid; place-items:center; gap:5px; align-content:center;
  color: var(--fg-2);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-base) var(--e-soft), color var(--t-base);
}
.cc-tile svg{ width:20px; height:20px; }
.cc-tile span{ font-size:10.5px; font-weight:600; }
.cc-tile:active{ transform: scale(.94); }
.cc-tile.on{ background: var(--accent); color: var(--accent-fg); box-shadow: inset 0 0 0 1px transparent; }
.cc-wide{
  border-radius: 20px; background: var(--glass-hi);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 12px 14px; display:grid; gap:9px;
}
.cc-wide-h{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color: var(--fg-2); font-weight:600; }
.cc-slider{
  --p: 50%;
  position:relative; height: 34px; border-radius: 12px; overflow:hidden;
  background: rgba(128,128,128,.22); cursor: pointer; touch-action:none;
}
.cc-slider::before{
  content:""; position:absolute; inset:0; width: var(--p);
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #fff));
  transition: width 90ms linear;
}
.cc-foot{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color: var(--fg-3); }