* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0b0d12; color: #f4efe6; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif; }
body { display: flex; align-items: stretch; justify-content: center; }
#app { width: 100%; max-width: 480px; min-height: 100%; position: relative; overflow: hidden; }
.screen { min-height: 100%; display: flex; flex-direction: column; }
.hero { position: relative; flex: 1; min-height: 58vh; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, #0b0d12 78%); }
.panel { padding: 8px 22px calc(28px + env(safe-area-inset-bottom)); }
.kicker { font-size: 13px; letter-spacing: 0.18em; color: #c9b496; margin-bottom: 8px; }
h1, h2 { font-size: 28px; line-height: 1.25; font-weight: 650; margin-bottom: 10px; }
p { font-size: 16px; line-height: 1.7; color: #d7d0c6; margin-bottom: 22px; }
.btn { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: #e8c27a; color: #2a1d0c; font-size: 18px; font-weight: 650; cursor: pointer; }
.btn.ghost { background: transparent; color: #e8c27a; border: 1px solid #e8c27a; margin-top: 12px; }
.home { background: #0b0d12 url("./img/scene1.jpg") center/cover no-repeat; }
.home .veil { min-height: 100%; background: linear-gradient(180deg, rgba(11,13,18,0.18), rgba(11,13,18,0.78) 55%, #0b0d12); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 22px calc(32px + env(safe-area-inset-bottom)); }
.result-card { margin: 18px 0 20px; border-radius: 18px; overflow: hidden; background: #161923; }
.result-card img { width: 100%; display: block; }