/* Tokens from DSL as variables (colors, fonts) */
:root {
  --bg-page: #FFFFFF;            /* paint_1:3 */
  --fg-primary: #3D3D3D;         /* paint_1:65 */
  --fg-muted: rgba(0,0,0,0.36);  /* paint_1:952 */
  /* rely on shared token --divider from tokens.css for consistent dividers */
  --fg-danger: #D22222;          /* paint_64:1525 */

  --font-family: 'Source Han Sans', 'Noto Sans SC', 'PingFang SC', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Microsoft YaHei', sans-serif;
  --font-13: 13px;  /* font_5:273 */
  --font-14: 14px;  /* font_8:929 */
  --font-16: 16px;  /* font_1:587 */
  --font-18: 18px;  /* font_8:670 */
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-family);
}

.phone {
  width: 390px;            /* frame width */
  /* 设备画布尺寸：宽 390px，最小高度 844px；页面随浏览器滚动（不在 .phone 内部滚动） */
  min-height: 844px;       /* 最小高度 */
  margin: 0 auto;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Status bar */
.status-bar {
  height: 47px;
  display: grid;
  grid-template-columns: 60px 1fr 120px;
  align-items: center;
  background: #FFFFFF;  /* paint_1:060 */
  padding: 0 8px;
}

/* Header 行（返回 + 标题）：把标题绝对居中，保证相对于画布左右居中 */
.status-bar:not(.device-status) {
  position: relative;
}
.status-bar:not(.device-status) .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* 顶部设备状态栏：时间在左，信号/WiFi/电量在右（与 index.html 一致） */
.status-bar.device-status {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  /* 使用页面背景（白色）以和页面顶部保持一致 */
  background: var(--bg-page, #FFFFFF);
}
.status-bar.device-status .time { font-size: 12px; font-weight: 600; color: var(--fg-primary); }
.status-bar.device-status .sb-icons { display: flex; gap: 8px; align-items: center; }
.status-bar.device-status .sb-icon { height: 12px; }
.status-bar .back {
  appearance: none; border: 0; background: transparent; padding: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.status-bar .back svg { width: 14px; height: 18px; fill: var(--fg-primary); display: block; }
.status-bar .title {
  text-align: center; font-size: var(--font-18); font-weight: 500; letter-spacing: 0.2px;
}
.status-bar .status-icons { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.status-bar .status-icons svg { height: 12px; stroke: var(--fg-primary); fill: none; stroke-width: 1.6; }
.status-bar .status-icons svg rect { fill: var(--fg-primary); stroke: none; }

/* Blue circular background for AI tab (for pages using setup.css) */
.tab .tab-icon.tab-ai,
.tabbar-item svg.tab-ai,
.tabbar-item .tab-icon.tab-ai {
  display: inline-grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  background: linear-gradient(180deg, #E9F1FF 0%, #D0E2FF 100%);
  color: var(--tab);
  padding: 8px;
  box-sizing: border-box;
  /* configurable via --tab-ai-shift */
  transform: translateY(var(--tab-ai-shift));
}
.tab .tab-icon.tab-ai *,
.tabbar-item svg.tab-ai * {
  stroke: currentColor !important;
  fill: currentColor !important;
  vector-effect: non-scaling-stroke;
}

.tab .tab-icon.tab-ai + .tab-link,
.tab .tab-icon.tab-ai + span,
.tabbar-item svg.tab-ai + .tab-link,
.tabbar-item svg.tab-ai + span,
.tabbar-item .tab-icon.tab-ai + .tab-link,
.tabbar-item .tab-icon.tab-ai + span {
  display:inline-block;
  transform: translateY(var(--tab-ai-shift));
}

.tabbar { overflow: visible; }

.screen { flex: 1; display: flex; flex-direction: column; }

/* List */
.list {
  padding: 12px 0 0;
}
.item {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  padding: 12px 16px;
}
.item .text { font-size: var(--font-14); }
.divider { height: 1px; background: var(--divider); margin: 0 16px; }

/* Chevron */
.chevron {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--fg-primary);
}
.chevron::before {
  content: ">";
  font-size: 16px;
  line-height: 1;
  display: block;
}

/* Actions */
.actions { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0 32px; }
.btn-danger {
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--fg-danger); color: var(--fg-danger); background: #fff;
  font-size: var(--font-16); cursor: pointer;
}
.btn-danger:active { opacity: 0.9; }
.link-policy { color: var(--fg-primary); font-size: var(--font-13); text-decoration: none; }
.link-policy:hover { text-decoration: underline; }