:root {
  --home-ink: #111513;
  --home-muted: #676c68;
  --home-green: #0f8b53;
  --home-gold: #b3751e;
  --home-line: #e3ded4;
  --home-paper: #fffdfa;
  --home-card: rgba(255, 253, 248, 0.94);
  --home-shadow: 0 24px 70px rgba(54, 43, 30, 0.12);
  --home-font-xs: 12px;
  --home-font-sm: 13px;
  --home-font-md: 15px;
  --home-font-lg: 18px;
  --home-font-xl: 21px;
  --home-font-page: clamp(26px, 7vw, 34px);
  --home-font-hero: clamp(30px, 6.5vw, 35px);
  --home-font-button: 14px;
}

body {
  background:
    radial-gradient(circle at 50% 12%, rgba(172, 137, 80, 0.1), transparent 34%),
    linear-gradient(135deg, #f7f5ef 0%, #ffffff 52%, #f3eee4 100%);
}

button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.app-shell {
  display: grid;
  place-items: center;
}

.app-card {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 430px);
  height: auto;
  max-height: calc(100svh - 8px);
  aspect-ratio: 863 / 1822;
  overflow: hidden;
  border: 1px solid rgba(54, 42, 23, 0.1);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 253, 248, 0.96)),
    var(--home-paper);
  box-shadow: var(--home-shadow);
}

.app-card.home-active {
  grid-template-rows: minmax(0, 1fr);
}

.app-card.home-active .scene-window,
.app-card.home-active .scene-track {
  border-radius: inherit;
}

.app-card:not(.home-active) .scene {
  padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
}

.workflow-chrome {
  display: grid;
  gap: 10px;
  padding: 16px 21px 13px;
  border-bottom: 1px solid rgba(227, 221, 211, 0.78);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}

.workflow-chrome[hidden],
.workflow-copy[hidden] {
  display: none;
}

.workflow-copy {
  display: grid;
  gap: 4px;
  min-height: 46px;
  padding-left: 54px;
}

#currentStepText {
  color: var(--home-green);
  font-size: var(--home-font-xs);
  font-weight: 800;
}

#statusTitle {
  color: var(--home-ink);
  font-size: var(--home-font-xl);
  font-weight: 800;
  line-height: 1.15;
}

#statusBody {
  color: var(--home-muted);
  font-size: var(--home-font-sm);
  font-weight: 600;
  line-height: 1.45;
}

.meter {
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: rgba(15, 139, 83, 0.1);
}

.meter span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-green), #c39a45);
}

.step-dots {
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
}

.step-dots li {
  width: 7px;
  height: 7px;
  background: rgba(16, 17, 18, 0.16);
}

.step-dots li.active {
  width: 24px;
  background: var(--home-green);
}

.back-button {
  top: 17px;
  left: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(16, 17, 18, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(54, 43, 30, 0.12);
}

.app-card.home-active .scene {
  overflow-y: hidden;
}

.scene-home {
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

/* 首页核心布局：header 固定 + 内容滚动 + tabbar 固定 */
.home-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  color: var(--home-ink);
  background:
    radial-gradient(circle at 54% 0%, rgba(222, 208, 183, 0.12), transparent 28%),
    var(--home-paper);
}

.section-title,
.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-screen svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}