/**
 * APP 端移动端组件
 * 在 .phone 容器内使用，body 或 .phone 加 class="theme-app"
 */

.phone {
  width: var(--phone-w); height: var(--phone-h);
  background: var(--bg-page);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-phone);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.status-bar {
  height: 44px; background: var(--card);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 0; font-size: var(--fs-md); font-weight: 600;
  flex-shrink: 0; z-index: 5;
}
.status-bar.blue {
  background: linear-gradient(180deg, #d9ebff 0%, #eaf3fc 100%);
}
.screen { display: none; flex: 1; flex-direction: column; min-height: 0; position: relative; }
.screen.show { display: flex; }

/* ===== 顶栏 ===== */
.nav {
  height: 44px; background: var(--card);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0; z-index: 4;
}
.nav.detail {
  background: linear-gradient(180deg, #d9ebff 0%, #eaf3fc 100%);
}
.nav-btn {
  position: absolute; top: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); font-size: var(--fs-lg);
}
.nav-btn.left { left: 4px; }
.nav-btn.right { right: 8px; color: var(--primary); width: auto; padding: 0 8px; }
.nav-title { font-size: var(--fs-title); font-weight: 600; }

/* ===== 滚动区 ===== */
.scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 88px;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ===== 详情头 ===== */
.profile {
  background: linear-gradient(180deg, #eaf3fc 0%, #eef3f8 100%);
  padding: 8px 16px 14px; position: relative;
}
.profile-row { display: flex; align-items: flex-start; gap: 12px; }
.avatar-lg {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, #5b9cf8, var(--primary));
  color: #fff; font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.name-line { font-size: 18px; font-weight: 600; }

/* ===== Tab ===== */
.tabs-app {
  display: flex; background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 0 8px; flex-shrink: 0; overflow-x: auto;
}
.tabs-app .tab {
  flex: 0 0 auto; min-width: 72px; padding: 0 14px;
  text-align: center; height: 44px; line-height: 44px;
  font-size: var(--fs-md); color: var(--text-2);
  position: relative; cursor: pointer; white-space: nowrap;
  background: none; border: none;
}
.tabs-app .tab.active { color: var(--primary); font-weight: 600; }
.tabs-app .tab.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--primary);
}
.tab-panels { background: var(--bg-page); }
.tab-panel { display: none; min-height: 280px; }
.tab-panel.show { display: block; }

/* ===== 卡片 ===== */
.section-card {
  margin: 10px 12px 0; background: var(--card);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.section-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; font-size: var(--fs-lg); font-weight: 600;
}
.section-bd { padding: 0 14px 14px; }
.kv {
  display: flex; gap: 12px; padding: 7px 0;
  font-size: var(--fs-base); line-height: 1.45;
}
.kv .k { width: 96px; flex-shrink: 0; color: var(--text-3); }
.kv .v { flex: 1; color: var(--text); word-break: break-all; }

/* ===== 底栏 ===== */
.bottom-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; z-index: 10;
}
.bar-btn {
  flex: 1; height: 40px; border-radius: var(--radius-md);
  border: 1px solid #e5e5e5; background: var(--card);
  font-size: var(--fs-md); color: var(--text);
}
.bar-btn.primary {
  background: var(--primary); border-color: var(--primary); color: #fff; flex: 1.15;
}

/* ===== Bottom Sheet ===== */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--card); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 41; transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 70%; display: flex; flex-direction: column;
}
.sheet.show { transform: translateY(0); }
.sheet-hd {
  height: 48px; display: flex; align-items: center; justify-content: center;
  position: relative; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sheet-hd .cancel {
  position: absolute; left: 16px; color: var(--text-2); font-size: var(--fs-lg);
}
.sheet-hd .title { font-size: var(--fs-xl); font-weight: 600; }
.sheet-bd { overflow-y: auto; padding-bottom: calc(8px + var(--safe-bottom)); }
.sheet-item {
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg); border-bottom: 1px solid var(--border); cursor: pointer;
}
.sheet-item.active { color: var(--primary); font-weight: 500; }

/* ===== 确认弹窗 ===== */
.confirm-box {
  position: absolute; left: 40px; right: 40px; top: 38%;
  background: var(--card); border-radius: var(--radius-xl);
  z-index: 42; padding: 22px 18px 14px; display: none; text-align: center;
}
.confirm-box.show { display: block; }
.confirm-box p { font-size: var(--fs-lg); line-height: 1.6; margin-bottom: 18px; }
.confirm-acts { display: flex; gap: 10px; }
.confirm-acts button {
  flex: 1; height: 40px; border-radius: var(--radius-md); font-size: var(--fs-lg);
}
.confirm-acts .cancel {
  border: 1px solid #e5e5e5; background: var(--card); color: var(--text);
}
.confirm-acts .ok {
  border: none; background: var(--primary); color: #fff;
}

/* ===== 表单页底栏 ===== */
.form-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 20px calc(14px + var(--safe-bottom));
  background: var(--card); border-top: 1px solid var(--border);
}