:root {
  --bg: #f8f1e7;
  --card: #fffdf9;
  --text: #221f1f;
  --muted: #807a73;
  --line: #f5c9cf;
  --pink: #ff3f69;
  --pink-soft: #ffe9ee;
  --shadow: 0 16px 40px rgba(115, 83, 66, 0.08);
  --nav-h: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.app-shell { max-width: 780px; margin: 0 auto; min-height: 100vh; position: relative; background: linear-gradient(110deg, #fbf6ee 0%, #fbf6ee 70%, #eef8f2 100%); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 96px; padding: 22px 24px 12px;
  display: grid; grid-template-columns: 110px 1fr 110px; align-items: end;
  background: rgba(248, 241, 231, 0.92); backdrop-filter: blur(16px);
}
.topbar h1 { margin: 0; font-size: 28px; line-height: 1.2; text-align: center; font-weight: 800; }
.status-placeholder { height: 34px; }
.mini-program-mock { justify-self: end; width: 96px; height: 44px; border-radius: 24px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); color: #222; font-weight: 900; }
.mini-program-mock i { width: 24px; height: 24px; border: 4px solid #222; border-radius: 50%; display: block; position: relative; }
.mini-program-mock i::after { content: ''; position: absolute; inset: 5px; background: #222; border-radius: 50%; }
.page-container { padding: 22px 28px calc(var(--nav-h) + 32px); overflow: hidden; }
.page { display: none; }
.page.active { display: block; }
.card { background: rgba(255, 253, 249, 0.96); border: 1.5px solid var(--line); border-radius: 36px; box-shadow: var(--shadow); }
.hero-card { padding: 38px 30px 28px; }
.hero-row { display: flex; align-items: center; gap: 14px; }
.eyebrow { letter-spacing: 4px; font-size: 25px; color: #7b7874; }
.tag { padding: 8px 16px; border-radius: 18px; background: var(--pink-soft); color: var(--pink); font-size: 22px; line-height: 1; }
.ghost-btn { margin-left: auto; border: 1.5px solid #ff9db1; background: #fffdfd; color: var(--pink); border-radius: 20px; padding: 7px 17px; font-size: 21px; }
.hero-card h2 { margin: 18px 0 8px; font-size: 44px; line-height: 1.12; letter-spacing: -1px; }
.hero-card p { margin: 0 0 24px; font-size: 25px; color: #8a8580; }
.scene-tabs { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.scene-tabs::-webkit-scrollbar { display: none; }
.scene-tab { flex: 0 0 auto; border: 1px solid #e7e3df; background: #fff; color: #595654; border-radius: 999px; min-width: 110px; height: 58px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.scene-tab span { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.scene-tab.active { border-color: #ff9eb2; background: #fff7f9; color: var(--pink); box-shadow: 0 10px 24px rgba(255, 76, 113, 0.12); }
.wheel-card { margin-top: 28px; padding: 30px 30px 38px; position: relative; overflow: hidden; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head h2, .settings-card h2, .result-card h2 { margin: 0; font-size: 30px; }
.badge { padding: 9px 16px; border-radius: 18px; background: var(--pink-soft); color: var(--pink); font-size: 21px; font-weight: 700; }
.brand-sticker { position: absolute; right: 38px; top: 102px; transform: rotate(6deg); color: var(--pink); background: #fff; border: 2px solid #ffd1db; border-radius: 20px; padding: 12px 24px; font-size: 22px; box-shadow: 0 20px 30px rgba(255,64,105,0.12); }
.wheel-wrap { width: min(610px, 87vw); height: min(610px, 87vw); margin: 60px auto 12px; position: relative; }
.color-wheel { position: absolute; inset: 0; border-radius: 50%; border: 9px solid #ff9db1; box-shadow: 0 0 0 13px #fff, 0 20px 40px rgba(0,0,0,0.08); transition: transform 3.4s cubic-bezier(.12,.78,.08,1); overflow: hidden; }
.color-wheel::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from -90deg, transparent 0deg 59deg, rgba(255,255,255,.88) 59deg 61deg, transparent 61deg 119deg, rgba(255,255,255,.88) 119deg 121deg, transparent 121deg 179deg, rgba(255,255,255,.88) 179deg 181deg, transparent 181deg 239deg, rgba(255,255,255,.88) 239deg 241deg, transparent 241deg 299deg, rgba(255,255,255,.88) 299deg 301deg, transparent 301deg 359deg, rgba(255,255,255,.88) 359deg 360deg); }
.wheel-dot { position: absolute; z-index: 1; width: 14px; height: 14px; background: rgba(255,255,255,0.8); border-radius: 50%; }
.dot-1 { left: 74%; top: 22%; } .dot-2 { left: 83%; top: 50%; } .dot-3 { left: 74%; top: 78%; } .dot-4 { left: 27%; top: 78%; } .dot-5 { left: 15%; top: 50%; } .dot-6 { left: 27%; top: 22%; }
.wheel-pointer { position: absolute; left: 50%; top: -38px; width: 32px; height: 76px; transform: translateX(-50%); z-index: 3; }
.wheel-pointer::before { content: ''; position: absolute; left: 50%; top: 2px; width: 30px; height: 30px; border-radius: 50%; border: 5px solid var(--pink); background: #fff; transform: translateX(-50%); }
.wheel-pointer span { position: absolute; left: 50%; top: 34px; width: 8px; height: 42px; background: var(--pink); border-radius: 999px; transform: translateX(-50%); }
.spin-btn { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 190px; height: 190px; border: 7px solid #fff; border-radius: 50%; background: linear-gradient(180deg, #ff547b, #ff2357); color: #fff; box-shadow: 0 16px 34px rgba(255, 58, 97, 0.28); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spin-btn strong { font-size: 32px; line-height: 1.1; }
.spin-btn span { margin-top: 8px; font-size: 19px; opacity: 0.9; }
.spin-btn:disabled { opacity: 0.9; }
.wheel-actions { min-height: 56px; }
.tilt-btn { margin-left: 18px; transform: rotate(-7deg); border: 1px solid #ffd1db; background: #fff; color: var(--pink); border-radius: 18px; padding: 11px 22px; font-size: 22px; box-shadow: 0 18px 28px rgba(255, 64, 105, 0.17); }
.feedback-btn { display: block; margin: 30px auto; border: 0; background: transparent; color: var(--pink); font-size: 20px; font-weight: 700; }
.settings-card { padding: 30px; }
.settings-card p, .result-card p { margin: 14px 0 0; color: #8e8882; font-size: 21px; line-height: 1.7; }
.collage-panel { background: rgba(255,255,255,0.88); padding: 0 30px 34px; min-height: calc(100vh - var(--nav-h) - 120px); }
.big-title { margin: 0; font-size: 52px; line-height: 1.18; letter-spacing: -2px; }
.intro { margin: 20px 0 28px; color: #74706c; font-size: 26px; line-height: 1.55; }
.color-row { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid #ece7e1; }
.dark-pill { flex: 0 0 auto; padding: 14px 24px; background: #28231f; color: #fff; border-radius: 28px; font-size: 24px; }
.color-select { min-width: 0; flex: 1; height: 66px; border: 1px solid #e8e4df; background: #fff; border-radius: 18px; display: flex; align-items: center; gap: 16px; padding: 0 16px; text-align: left; }
.color-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.12); flex: 0 0 auto; }
.color-select strong { font-size: 25px; white-space: nowrap; }
.color-select .divider { margin-left: auto; height: 40px; width: 1px; background: #e6e2dc; }
.color-select em { font-style: normal; color: #555; border: 1px solid #d8d5d1; border-radius: 18px; padding: 7px 14px; white-space: nowrap; }
.palette { margin: 16px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.palette-item { border: 1px solid #ebe6de; background: #fff; border-radius: 16px; padding: 13px; display: grid; grid-template-columns: 32px 1fr; grid-template-areas: "dot name" "dot tip"; gap: 2px 10px; text-align: left; }
.palette-item span { grid-area: dot; width: 28px; height: 28px; border-radius: 50%; align-self: center; }
.palette-item strong { grid-area: name; font-size: 18px; }
.palette-item em { grid-area: tip; font-style: normal; color: #8b8580; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-row { margin-top: 22px; border: 1px solid #ece7e1; background: #fff; border-radius: 18px; height: 64px; display: flex; align-items: center; padding: 0 18px; gap: 12px; }
.input-row label { color: #8a8580; font-size: 23px; white-space: nowrap; }
.input-row input, .date-input-box input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: #222; font-size: 22px; }
.date-card { margin-top: 18px; border: 1px solid #ece7e1; border-radius: 18px; padding: 20px; background: #fff; }
.date-toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: 23px; color: #827c75; }
.switch { width: 76px; height: 42px; border: 0; border-radius: 999px; background: #d7d0c8; padding: 4px; display: flex; align-items: center; justify-content: flex-start; transition: 0.2s; }
.switch span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.switch.is-on { justify-content: flex-end; background: #231e1a; }
.date-input-box { margin-top: 18px; height: 78px; border: 1px solid #ebe6df; border-radius: 15px; background: #f8f7f5; display: flex; align-items: center; padding: 0 22px; gap: 22px; }
.date-input-box label { font-size: 23px; }
.layout-tabs { margin-top: 20px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.layout-tabs::-webkit-scrollbar { display: none; }
.layout-tab { flex: 0 0 auto; border: 1px solid #e8e2dc; background: #fff; color: #716b65; border-radius: 999px; padding: 13px 20px; font-size: 22px; white-space: nowrap; }
.layout-tab span { font-size: 17px; color: #938d87; }
.layout-tab.active { background: #28231f; color: #fff; }
.layout-tab.active span { color: rgba(255,255,255,0.65); }
.layout-tab.disabled { filter: blur(0.4px); opacity: 0.42; }
.upload-head { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.preview-btn { border: 1px solid #eae5df; background: #fff; color: #77716b; border-radius: 20px; padding: 13px 22px; font-size: 22px; box-shadow: 0 12px 22px rgba(0,0,0,0.06); }
.upload-head span { color: #8b8580; font-size: 20px; }
.hidden-file { display: none; }
.photo-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photo-slot { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 0; padding: 0; background: #ddd; min-width: 0; }
.photo-slot.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #898989; background: #dedddb; }
.photo-slot.empty b { font-size: 30px; line-height: 1; }
.photo-slot.empty span { font-size: 30px; filter: grayscale(1); }
.photo-slot.empty em { font-style: normal; font-size: 18px; margin-top: 4px; }
.photo-slot.filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot.selected { outline: 5px solid var(--pink); outline-offset: -5px; }
.remove-photo { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 24px; line-height: 30px; }
.collage-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 26px; }
.primary-btn, .secondary-btn, .primary-lite { border: 0; border-radius: 18px; height: 56px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 21px; font-weight: 700; }
.primary-btn { background: linear-gradient(180deg, #ff547b, #ff2f61); color: #fff; box-shadow: 0 14px 26px rgba(255, 64, 105, 0.2); }
.secondary-btn { background: #fff; color: #5f5a54; border: 1px solid #e8e2dc; }
.primary-lite { padding: 0 20px; background: var(--pink-soft); color: var(--pink); }
.result-card { padding: 32px; }
.empty-result { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #8b8580; font-size: 23px; }
.result-preview img { width: 100%; display: block; border-radius: 26px; box-shadow: 0 16px 30px rgba(0,0,0,0.08); }
.result-actions { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bottom-tabs { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30; width: min(780px, 100vw); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(248, 241, 231, 0.96); border-top: 1px solid rgba(0,0,0,0.08); display: grid; grid-template-columns: repeat(3, 1fr); backdrop-filter: blur(16px); }
.tab-btn { border: 0; background: transparent; color: #7a746e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tab-btn em { font-style: normal; font-size: 18px; }
.tab-btn.active { color: #c8523a; }
.tab-icon { width: 36px; height: 36px; display: block; position: relative; }
.wheel-icon { border: 4px solid currentColor; border-radius: 50%; background: conic-gradient(currentColor 0 20deg, transparent 20deg 60deg, currentColor 60deg 80deg, transparent 80deg 120deg, currentColor 120deg 140deg, transparent 140deg 180deg, currentColor 180deg 200deg, transparent 200deg 240deg, currentColor 240deg 260deg, transparent 260deg 300deg, currentColor 300deg 320deg, transparent 320deg 360deg); }
.dots-icon { border-radius: 50%; background: radial-gradient(circle, currentColor 0 4px, transparent 5px) 0 0 / 16px 16px; }
.grid-icon { background: linear-gradient(currentColor,currentColor) 0 0/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 13px 0/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 26px 0/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 0 13px/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 13px 13px/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 26px 13px/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 0 26px/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 13px 26px/9px 9px no-repeat, linear-gradient(currentColor,currentColor) 26px 26px/9px 9px no-repeat; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 26px); transform: translate(-50%, 16px); z-index: 50; background: rgba(34,31,31,0.86); color: #fff; padding: 12px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: 0.25s; max-width: 90vw; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hidden { display: none !important; }

@media (max-width: 560px) {
  :root { --nav-h: 82px; }
  .app-shell { max-width: none; }
  .topbar { height: 86px; padding: 16px 16px 10px; grid-template-columns: 80px 1fr 86px; }
  .topbar h1 { font-size: 19px; }
  .mini-program-mock { width: 80px; height: 36px; gap: 12px; }
  .mini-program-mock i { width: 20px; height: 20px; border-width: 3px; }
  .page-container { padding: 16px 16px calc(var(--nav-h) + 28px); }
  .card { border-radius: 24px; }
  .hero-card { padding: 24px 18px 20px; }
  .eyebrow { font-size: 16px; letter-spacing: 2px; }
  .tag { font-size: 15px; padding: 6px 10px; }
  .ghost-btn { font-size: 15px; padding: 5px 12px; }
  .hero-card h2 { font-size: 31px; }
  .hero-card p { font-size: 18px; margin-bottom: 18px; }
  .scene-tab { height: 46px; min-width: 86px; font-size: 18px; padding: 0 14px; }
  .wheel-card { padding: 22px 18px 26px; margin-top: 18px; }
  .section-head h2, .settings-card h2, .result-card h2 { font-size: 22px; }
  .badge { font-size: 15px; }
  .brand-sticker { right: 24px; top: 78px; font-size: 17px; padding: 10px 18px; }
  .wheel-wrap { margin-top: 54px; }
  .spin-btn { width: 122px; height: 122px; border-width: 5px; }
  .spin-btn strong { font-size: 24px; }
  .spin-btn span { font-size: 14px; }
  .color-wheel { border-width: 6px; box-shadow: 0 0 0 9px #fff, 0 18px 34px rgba(0,0,0,0.08); }
  .tilt-btn { font-size: 16px; padding: 8px 16px; }
  .settings-card, .result-card { padding: 22px 18px; }
  .settings-card p, .result-card p { font-size: 16px; }
  .collage-panel { padding: 0 18px 28px; }
  .big-title { font-size: 39px; }
  .intro { font-size: 20px; }
  .dark-pill { font-size: 17px; padding: 10px 16px; }
  .color-row { gap: 12px; }
  .color-select { height: 56px; gap: 10px; padding: 0 10px; }
  .color-dot { width: 28px; height: 28px; }
  .color-select strong { font-size: 20px; }
  .color-select em { padding: 5px 10px; font-size: 15px; }
  .palette { grid-template-columns: 1fr; }
  .input-row { height: 54px; }
  .input-row label, .date-toggle-row, .date-input-box label, .input-row input, .date-input-box input { font-size: 18px; }
  .date-input-box { height: 66px; }
  .layout-tab { font-size: 17px; padding: 10px 14px; }
  .preview-btn { font-size: 17px; padding: 10px 16px; }
  .upload-head span { font-size: 16px; }
  .photo-grid { gap: 12px; }
  .remove-photo { width: 26px; height: 26px; font-size: 20px; line-height: 24px; }
  .photo-slot.empty em { font-size: 14px; }
  .primary-btn, .secondary-btn, .primary-lite { height: 50px; font-size: 17px; }
  .tab-btn em { font-size: 14px; }
  .tab-icon { width: 32px; height: 32px; }
}

/* v0.2 refinements */
.save-tip {
  margin: 0 0 14px;
  color: #867f78;
  font-size: 17px;
  line-height: 1.6;
}
.result-actions.three-actions {
  grid-template-columns: 1fr 1fr 1fr;
}
.secondary-btn:disabled,
.primary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .result-actions.three-actions {
    grid-template-columns: 1fr;
  }
  .save-tip {
    font-size: 15px;
  }
}