/* ============== 手机外壳 + 桌面层 (iOS风格精修版) ============== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%; height: 100%;
  background: #0a0a0a;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  letter-spacing: 0.2px;
}

/* 手机外框 (iPhone样式) */
.phone-frame {
  width: 390px;
  height: 844px;
  background: #000;
  border-radius: 50px;
  padding: 11px;
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 0 0 4px #1a1a1a,
    0 30px 60px rgba(0,0,0,0.5);
  position: relative;
}
/* 灵动岛 */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 19px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
}

.phone-screen {
  width: 100%; height: 100%;
  border-radius: 39px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* 屏幕层级 */
.screen-layer {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: #fff;
}
.screen-layer.active { display: flex; }

/* ============== 状态栏 (iOS 17风格) ============== */
.status-bar {
  height: 54px;
  padding: 0 26px 0 32px;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.sb-time { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.sb-right { display: flex; align-items: center; gap: 5px; font-size: 12px; }
/* iOS 状态栏无网速显示 - 完全移除 */
.sb-signal {
  display: inline-block;
  width: 17px; height: 11px;
  position: relative;
  margin-right: 2px;
}
.sb-signal::before, .sb-signal::after,
.sb-signal span {
  content: "";
  position: absolute;
  bottom: 0;
  background: #000;
  border-radius: 1px;
}
.sb-signal::before { left: 0; width: 3px; height: 4px; }
.sb-signal::after { left: 5px; width: 3px; height: 6px; }
.sb-signal span { left: 10px; width: 3px; height: 8px; }
.sb-signal span {
  position: absolute;
  display: block;
  width: 3px; height: 8px;
  background: #000;
  border-radius: 1px;
  left: 10px; bottom: 0;
}

.sb-wifi {
  display: inline-block;
  width: 16px; height: 12px;
  position: relative;
  margin: 0 4px 0 1px;
}
.sb-wifi::before, .sb-wifi::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  background: transparent;
}
.sb-wifi::before { bottom: 2px; width: 8px; height: 5px; }
.sb-wifi::after { bottom: 0; width: 14px; height: 9px; opacity: 0.4; }

.sb-battery {
  display: inline-block;
  width: 25px; height: 12px;
  border: 1.2px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  position: relative;
  margin-left: 1px;
}
.sb-battery::before {
  content: "";
  position: absolute;
  top: 1.5px; left: 1.5px; bottom: 1.5px;
  width: 78%;
  background: #000;
  border-radius: 1px;
}
.sb-battery::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 4px;
  background: rgba(0,0,0,0.5);
  border-radius: 0 1px 1px 0;
}

/* ============== 手机桌面 (iOS真机浅色壁纸) ============== */
.home-wallpaper {
  flex: 1;
  background:
    linear-gradient(180deg, #c4d8f0 0%, #d8e3f3 25%, #e8d5e3 50%, #f3d4cc 75%, #f0cbb0 100%);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* 顶部通知条 */
.notif-strip {
  padding: 8px 16px 0;
  display: flex; justify-content: center;
}
.notif-pill {
  width: 92%; height: 38px;
  background: rgba(255,255,255,0.35);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255,255,255,0.5);
}

/* App网格 */
.app-grid {
  flex: 1;
  padding: 14px 18px 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 92px;
  gap: 10px 8px;
  overflow: hidden;
}

.app-item {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}
.app-item:active { transform: scale(0.92); }
.app-item span {
  font-size: 11.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  max-width: 80px;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1px;
}

.app-icon {
  width: 60px; height: 60px;
  border-radius: 15px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* App badge (角标) - iOS 风格 */
.badge {
  position: absolute;
  top: -3px; right: 8px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: #ff3b30;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.9);
  z-index: 2;
}

/* App图标 - 真实品牌色 + 文字标 (精修) */
.ic-ctrip, .ic-ctrip-travel { background: linear-gradient(135deg, #3290ee 0%, #1e6bd1 100%); color: #fff; }
.ic-ctrip::after, .ic-ctrip-travel::after { content: "携程"; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.ic-meituan { background: #ffd400; }
.ic-meituan::after { content: "美团"; font-size: 14px; font-weight: 900; color: #000; }
.ic-meituan-hotel { background: #fff; }
.ic-meituan-hotel::after { content: "酒店"; font-size: 11px; color: #333; font-weight: 700; }
.ic-meituan-hotel::before { content: "🏨"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -70%); font-size: 18px; }
.ic-douyin, .ic-douyin-laike { background: #000; }
.ic-douyin::after { content: "♪"; font-size: 28px; color: #fe2c55; font-weight: 900; }
.ic-douyin-laike::after { content: "客"; font-size: 22px; color: #fff; font-weight: 700; }
.ic-fliggy { background: linear-gradient(135deg, #ff6f00 0%, #ff9500 100%); }
.ic-fliggy::after { content: "飞猪"; font-size: 13px; font-weight: 800; color: #fff; }
.ic-fliggy-hotel { background: linear-gradient(135deg, #ff9500 0%, #ff6f00 100%); }
.ic-fliggy-hotel::after { content: "商家"; font-size: 11px; font-weight: 700; color: #fff; }
.ic-tujia { background: linear-gradient(135deg, #ff7a45 0%, #ff5722 100%); }
.ic-tujia::after { content: "途家"; font-size: 12px; font-weight: 800; color: #fff; }
.ic-meituan-minsu { background: #ffd400; }
.ic-meituan-minsu::after { content: "民宿"; font-size: 12px; font-weight: 800; color: #000; }
.ic-yuanbao { background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%); }
.ic-yuanbao::after { content: "元宝"; font-size: 12px; font-weight: 800; color: #fff; }
.ic-zhipu { background: #2962ff; }
.ic-zhipu::after { content: "智"; font-size: 22px; font-weight: 800; color: #fff; }
.ic-doubao { background: linear-gradient(135deg, #4a8eff 0%, #2563eb 100%); }
.ic-doubao::after { content: "豆包"; font-size: 12px; font-weight: 700; color: #fff; }
.ic-qianwen { background: linear-gradient(135deg, #615ced 0%, #4a3fc8 100%); }
.ic-qianwen::after { content: "千问"; font-size: 12px; color: #fff; font-weight: 700; }
.ic-deepseek { background: #1a4d8c; }
.ic-deepseek::after { content: "DS"; font-size: 20px; font-weight: 900; color: #fff; }
.ic-wenxin { background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%); }
.ic-wenxin::after { content: "文心"; font-size: 11px; color: #fff; font-weight: 700; }
.ic-weibo { background: #e6162d; }
.ic-weibo::after { content: "微博"; font-size: 11px; color: #fff; font-weight: 700; }
.ic-xiaohongshu { background: linear-gradient(135deg, #ff2442 0%, #d91a36 100%); }
.ic-xiaohongshu::after { content: "小红书"; font-size: 10px; color: #fff; font-weight: 700; }
.ic-zhihu { background: #0066ff; }
.ic-zhihu::after { content: "知乎"; font-size: 12px; color: #fff; font-weight: 800; }
.ic-baijiahao { background: linear-gradient(135deg, #2962ff 0%, #1a4dba 100%); }
.ic-baijiahao::after { content: "百家"; font-size: 11px; color: #fff; font-weight: 700; }
.ic-toutiao { background: #ff1744; }
.ic-toutiao::after { content: "头条"; font-size: 12px; color: #fff; font-weight: 800; }
.ic-bilibili { background: linear-gradient(135deg, #fb7299 0%, #ff85ad 100%); }
.ic-bilibili::after { content: "bili"; font-size: 12px; color: #fff; font-weight: 800; }
.ic-feishu { background: #00d6b9; }
.ic-feishu::after { content: "飞书"; font-size: 12px; color: #fff; font-weight: 800; }
.ic-cloud { background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); }
.ic-cloud::after { content: "云之家"; font-size: 10px; color: #fff; font-weight: 700; }
.ic-photos { background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%); }
.ic-photos::after { content: "🌸"; font-size: 26px; }
.ic-notes { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ic-notes::after { content: "笔记"; font-size: 11px; color: #fff; font-weight: 700; }
.ic-app3 { background: #1c1c1e; }
.ic-app3::after { content: "🧮"; font-size: 28px; }
.ic-app4 { background: #000; }
.ic-app4::after { content: "🕐"; font-size: 26px; }

/* 微信图标 */
.ic-wechat {
  background: linear-gradient(135deg, #2bc675 0%, #07c160 100%);
  position: relative;
}
.ic-wechat::before {
  content: "💬"; font-size: 32px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Dock图标 - iOS规范 */
.ic-phone {
  background: linear-gradient(180deg, #5ac8fa 0%, #34c759 100%);
  position: relative;
}
.ic-phone::after { content: ""; }
.ic-phone svg {
  width: 32px; height: 32px;
  fill: #fff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ic-msg {
  background: linear-gradient(180deg, #5af066 0%, #34c759 100%);
  position: relative;
}
.ic-msg::after { content: ""; }
.ic-msg svg {
  width: 32px; height: 32px;
  fill: #fff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ic-cam { background: #8e8e93; position: relative; }
.ic-cam::after { content: ""; }
.ic-cam svg {
  width: 30px; height: 30px;
  fill: #fff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ic-music {
  background: linear-gradient(180deg, #ff375f 0%, #ff2d55 100%);
  position: relative;
}
.ic-music::after { content: ""; }
.ic-music svg {
  width: 32px; height: 32px;
  fill: #fff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* 页面指示 */
.page-indicator {
  display: flex; justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.page-indicator span {
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.45);
  border-radius: 3px;
  transition: all 0.2s;
}
.page-indicator span.active {
  width: 18px;
  background: rgba(255,255,255,0.95);
}

/* 底部Dock - iOS真机磨砂感 */
.home-dock {
  margin: 0 10px 8px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 32px;
  border: 0.5px solid rgba(255,255,255,0.4);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dock-item {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
}
.dock-item:active { transform: scale(0.92); }

/* Home indicator (iPhone底部小条) */
.home-indicator {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 134px; height: 5px;
  background: rgba(0,0,0,0.85);
  border-radius: 3px;
  z-index: 100;
}
#homeScreen .home-indicator { background: rgba(0,0,0,0.4); }

/* ============== 微信内的"灵动岛"状态栏 (白色) ============== */
.screen-layer#wxApp .status-bar { color: #000; }
.screen-layer#wxApp .status-bar .sb-battery { border-color: rgba(0,0,0,0.5); }