:root {
  --bg: #f4efe6;
  --card: #fffaf1;
  --ink: #181713;
  --muted: #766f63;
  --line: #ded3c1;
  --coin: #ead8b8;
  --coin-dark: #c7a466;
  --red: #b64634;
  --green: #426b55;
  --blue: #516a8f;
  --shadow: 0 18px 60px rgba(39, 28, 18, .12);
  --radius: 24px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #fff7e6 0, var(--bg) 42%, #e8dfd1 100%); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
body.form-mode { overflow: hidden; position: fixed; inset: 0; width: 100%; }
html, body { overflow-x: hidden; }
body.form-mode .app-shell { height: 100svh; min-height: 100svh; padding: 10px 12px 12px; background: radial-gradient(circle at 22% -12%, rgba(255,255,255,.9), transparent 31%), radial-gradient(circle at 86% 18%, rgba(181,70,52,.12), transparent 26%), radial-gradient(circle at 18% 86%, rgba(199,164,102,.18), transparent 30%), linear-gradient(180deg, rgba(255,250,241,.52), rgba(229,219,204,.62)); overflow: hidden; }
body.result-mode .app-shell { min-height: 100svh; padding: 10px 12px 12px; background: radial-gradient(circle at 22% -12%, rgba(255,255,255,.9), transparent 31%), radial-gradient(circle at 86% 18%, rgba(87,227,137,.1), transparent 26%), radial-gradient(circle at 18% 86%, rgba(199,164,102,.16), transparent 30%), linear-gradient(180deg, rgba(255,250,241,.52), rgba(229,219,204,.62)); }
button, select, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(440px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px 16px 34px; }
.screen { display: none; min-height: calc(100vh - 52px); }
.screen.active { display: block; }
.screen.active.form-screen { display: flex; }
.hero-screen { position: relative; padding: 78px 6px 30px; text-align: center; overflow: hidden; }
.hero-orbit { position: absolute; inset: 34px 0 auto; height: 300px; pointer-events: none; opacity: .9; }
.orbit-ring { position: absolute; left: 50%; top: 42%; border: 1px dashed rgba(181, 70, 52, .32); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.ring-one { width: 290px; height: 118px; animation: orbitFloat 9s ease-in-out infinite; }
.ring-two { width: 210px; height: 86px; border-color: rgba(199, 164, 102, .38); animation: orbitFloat 12s ease-in-out infinite reverse; }
.orbit-coin { position: absolute; left: calc(50% + 98px); top: 105px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #fff3c8, #d7ad62 48%, #9b7134); box-shadow: 0 0 34px rgba(182, 70, 52, .35); animation: coinPulse 2.8s ease-in-out infinite; }
.brand-pill { position: relative; z-index: 1; display: inline-flex; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: .08em; background: rgba(255,250,241,.72); backdrop-filter: blur(8px); }
h1 { position: relative; z-index: 1; margin: 26px 0 0; font-size: clamp(42px, 12vw, 58px); line-height: .98; letter-spacing: -.08em; font-family: Georgia, "Times New Roman", "Songti SC", serif; }
.hero-copy { position: relative; z-index: 1; margin: 30px auto 0; font-size: 19px; line-height: 1.7; color: #3f362b; }
.hero-question { position: relative; z-index: 1; margin: 48px auto 22px; color: var(--muted); line-height: 1.8; }
.primary-btn, .secondary-btn, .ghost-btn { border: 0; border-radius: 999px; }
.primary-btn { width: 100%; padding: 17px 20px; background: var(--ink); color: #fffaf1; font-weight: 700; box-shadow: 0 12px 24px rgba(24,23,19,.18); }
.secondary-btn { padding: 15px 18px; background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
.ghost-btn { width: 44px; height: 44px; background: rgba(255,250,241,.75); border: 1px solid var(--line); font-size: 30px; line-height: 1; }
.topbar { display: flex; gap: 12px; align-items: center; margin: 6px 0 14px; }
.mini-title { font-weight: 800; letter-spacing: -.03em; }
.mini-subtitle { margin-top: 2px; font-size: 12px; color: var(--muted); }
.panel { margin: 12px 0; padding: 14px; border: 1px solid rgba(222,211,193,.85); border-radius: var(--radius); background: rgba(255,250,241,.76); box-shadow: 0 10px 32px rgba(39,28,18,.06); }
.panel-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.panel-toggle strong { display: block; font-size: 18px; }
.panel-toggle em { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-style: normal; }
.toggle-mark { padding: 7px 10px; border-radius: 999px; background: #efe4d1; font-size: 12px; color: var(--muted); }
.coin-grid-wrap { overflow: hidden; max-height: 430px; transition: max-height .28s ease, opacity .2s ease, margin .2s ease; }
.coin-panel.collapsed .coin-grid-wrap { max-height: 0; opacity: 0; margin: 0; }
.coin-panel.complete .panel-toggle strong::after { content: " · 完成"; color: var(--green); font-size: 13px; letter-spacing: 0; }
.coin-grid { display: grid; gap: 12px; padding-top: 14px; }
.coin-group { display: grid; gap: 7px; }
.coin-group-title { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.coin-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(222,211,193,.9); }
.coin-group-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.coin { position: relative; min-height: 44px; padding: 6px 6px 7px; border: 1px solid #d6c19a; border-radius: 999px; background: linear-gradient(180deg, #fff1c8 0%, #ead8b8 100%); color: #362613; font-size: 13px; font-weight: 800; box-shadow: inset 0 1px 3px rgba(255,255,255,.7), inset 0 -5px 10px rgba(83,50,13,.08); }
.coin.empty { background: rgba(255,250,241,.86); border-style: dashed; color: #756d62; box-shadow: none; }
.coin.selected-have { border-color: rgba(66,107,85,.55); background: linear-gradient(180deg, #f3ebd6 0%, #d9caa2 100%); }
.coin.selected-lack { border-color: rgba(181,70,52,.45); background: linear-gradient(180deg, #f7e6d6 0%, #e5c9b0 100%); }
.coin.selected-want { border-color: rgba(181,70,52,.42); background: linear-gradient(180deg, #fff0dd 0%, #efd2c0 100%); }
.coin .coin-name { display: block; line-height: 1.1; }
.coin .state { display: block; margin-top: 1px; font-size: 12px; line-height: 1; }
.coin.disabled { filter: grayscale(.7); opacity: .34; }
.coin-pop { position: absolute; z-index: 20; width: min(360px, calc(100vw - 32px)); padding: 9px; border-radius: 18px; background: #181713; color: #fffaf1; box-shadow: var(--shadow); }
.coin-pop::before { content: ""; position: absolute; left: var(--arrow-left, 50%); top: -7px; width: 14px; height: 14px; background: #181713; transform: rotate(45deg); border-radius: 3px; }
.coin-pop h4 { margin: 0 0 8px; text-align: center; font-size: 13px; }
.coin-pop .choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.coin-pop button { min-height: 38px; padding: 8px 3px; border: 1px solid rgba(255,250,241,.18); border-radius: 13px; background: rgba(255,250,241,.08); color: inherit; font-size: 13px; }
.coin-pop button.active { background: #fffaf1; color: #181713; }
.coin-pop button.disabled-choice { opacity: .36; }
.hidden { display: none !important; }
.selected-summary { margin-top: 12px; padding: 12px; border-radius: 18px; background: rgba(234,216,184,.45); color: #3f362b; font-size: 13px; line-height: 1.65; }
.compact-panel label, .essay-panel label:first-child, .label-row span { display: block; margin-bottom: 10px; color: var(--ink); font-weight: 800; }
.label-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.label-row strong { color: var(--red); font-size: 13px; white-space: nowrap; }
.wheel-select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; background: #fffaf1; color: var(--ink); appearance: none; }
.dot-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dot-scale.six { grid-template-columns: repeat(6, 1fr); }
.dot { height: 34px; border-radius: 999px; border: 1px solid var(--line); background: #fffaf1; color: var(--muted); }
.dot.active { background: var(--ink); color: #fffaf1; border-color: var(--ink); }
textarea { width: 100%; resize: vertical; min-height: 116px; border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; background: #fffaf1; color: var(--ink); line-height: 1.6; }
.consent-row { display: flex !important; gap: 9px; align-items: flex-start; margin-top: 10px; color: var(--muted) !important; font-size: 12px; line-height: 1.5; font-weight: 400 !important; }
.sticky-action { margin: 14px 0 8px; }
.quiet-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.center { text-align: center; }
.result-card { position: relative; overflow: hidden; padding: 22px; border-radius: 30px; background: radial-gradient(circle at 96% 5%, rgba(87,227,137,.18), transparent 28%), linear-gradient(180deg, #fffaf1 0%, #f3e3ce 100%); border: 1px solid rgba(222,211,193,.92); box-shadow: var(--shadow); }
.result-card::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(24,23,19,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(24,23,19,.045) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.result-card::after { content: "PLAYER STATUS"; position: absolute; right: 18px; bottom: 16px; color: rgba(24,23,19,.12); font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; pointer-events: none; }
.card-orbit { position: absolute; right: -64px; top: 12px; width: 190px; height: 190px; pointer-events: none; opacity: .95; }
.card-ring { position: absolute; inset: 54px -18px auto auto; width: 190px; height: 48px; border: 1px dashed rgba(181,70,52,.3); border-radius: 50%; transform: rotate(-18deg); animation: cardOrbitFloat 8s ease-in-out infinite; }
.card-planet { position: absolute; right: 58px; top: 54px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #fff3c8, #d7ad62 48%, #9b7134); box-shadow: 0 0 32px rgba(87,227,137,.32), 0 0 18px rgba(181,70,52,.28); animation: coinPulse 3s ease-in-out infinite; }
.result-card > *:not(.card-orbit) { position: relative; z-index: 1; }
.result-eyebrow { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(38,49,66,.16); border-radius: 999px; background: rgba(21,25,34,.06); color: #50606f; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: .12em; }
.result-card h2 { margin: 10px 0 6px; font-family: Georgia, "Times New Roman", "Songti SC", serif; font-size: 38px; letter-spacing: -.08em; }
.game-sub { margin: 0; font-size: 18px; color: #3f362b; font-weight: 700; }
.sub-game { display: inline-block; margin: 12px 0 0; padding: 8px 10px; border-radius: 999px; background: #efe4d1; color: var(--muted); font-size: 12px; }
.section-block { margin-top: 22px; }
.section-block h3, .gift-block h3, .yin-yang-grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.section-block p, .gift-block p, .yin-yang-grid p { margin: 0; line-height: 1.75; }
.coin-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 16px 0 0; }
.coin-readout div { min-width: 0; padding: 9px 8px; border-radius: 15px; background: rgba(21,25,34,.055); border: 1px solid rgba(38,49,66,.08); text-align: center; }
.coin-readout span { display: block; color: #50606f; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; letter-spacing: .08em; }
.coin-readout p { margin: 3px 0 0; color: rgba(24,23,19,.72); font-size: 13px; font-weight: 800; }
.gift-block { margin-top: 22px; padding: 16px; border-radius: 22px; background: #181713; color: #fffaf1; }
.gift-block h3 { color: #d8cab7; }
.yin-yang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.yin-yang-grid div { padding: 14px; border-radius: 18px; background: rgba(234,216,184,.36); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; padding: 10px 14px; border-radius: 999px; background: #181713; color: #fffaf1; font-size: 13px; box-shadow: var(--shadow); }
.export-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; background: rgba(24,23,19,.46); backdrop-filter: blur(10px); }
.export-sheet { position: relative; width: min(430px, 100%); max-height: 92vh; overflow: auto; padding: 14px 14px 16px; border-radius: 28px; background: #fffaf1; box-shadow: var(--shadow); text-align: center; }
.export-sheet h2 { margin: 2px 0 4px; font-family: Georgia, "Times New Roman", "Songti SC", serif; font-size: 28px; letter-spacing: -.06em; }
.export-sheet p { margin: 0 42px 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.export-sheet img { display: block; width: min(318px, 100%); max-height: 62vh; object-fit: contain; margin: 0 auto 14px; border-radius: 24px; box-shadow: 0 14px 40px rgba(39,28,18,.14); background: #f6ead7; }
.export-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #efe4d1; color: var(--muted); font-size: 22px; }
.download-btn { display: grid; place-items: center; text-decoration: none; }

/* 手机结果页：与填选页同密度，一屏截图优先 */
.screen.active.result-screen { display: flex; flex-direction: column; min-height: calc(100svh - 22px); }
.result-screen .topbar { flex: 0 0 auto; margin: 0 0 8px; }
.result-screen .mini-title { font-size: 18px; letter-spacing: -.05em; }
.result-screen .mini-subtitle { font-size: 12px; line-height: 1.2; }
.result-screen .ghost-btn { width: 40px; height: 40px; font-size: 26px; background: rgba(255,250,241,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.result-screen .result-card { flex: 0 0 auto; padding: 20px 22px 18px; border-radius: 28px; }
.result-screen .result-eyebrow { padding: 6px 10px; font-size: 10px; }
.result-screen .result-card h2 { margin: 12px 0 6px; font-size: 34px; line-height: .98; }
.result-screen .game-sub { font-size: 16px; line-height: 1.38; }
.result-screen .section-block { margin-top: 18px; }
.result-screen .section-block h3,
.result-screen .gift-block h3,
.result-screen .yin-yang-grid h3 { margin-bottom: 7px; font-size: 12px; }
.result-screen .section-block p,
.result-screen .gift-block p,
.result-screen .yin-yang-grid p { line-height: 1.62; }
.result-screen .coin-readout { margin-top: 13px; gap: 7px; }
.result-screen .coin-readout div { padding: 8px 7px; border-radius: 14px; }
.result-screen .coin-readout p { font-size: 13px; }
.result-screen .gift-block { margin-top: 18px; padding: 14px 16px; border-radius: 20px; }
.result-screen .yin-yang-grid { gap: 9px; margin-top: 14px; }
.result-screen .yin-yang-grid div { padding: 13px 14px; border-radius: 18px; }
.result-screen .result-actions { flex: 0 0 auto; gap: 10px; margin: 12px 0 0; }
.result-screen .result-actions .primary-btn,
.result-screen .result-actions .secondary-btn { min-height: 56px; padding: 14px 16px; }

/* 手机填选页：Apple 克制 + Notion 温暖卡片，一屏完成 */
.form-screen { position: relative; height: calc(100svh - 24px); min-height: 0; flex-direction: column; gap: 7px; overflow: hidden; isolation: isolate; }
.form-screen::before { content: ""; position: absolute; right: -42px; top: 26px; width: 176px; height: 176px; border: 1px solid rgba(199,164,102,.14); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; z-index: -1; }
.form-screen::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 18px; height: 40%; border-radius: 42px; background: linear-gradient(180deg, rgba(255,250,241,.24), rgba(234,216,184,.12)); pointer-events: none; z-index: -2; }
.form-screen .topbar { flex: 0 0 auto; margin: 0; }
.form-screen .mini-title { font-size: 20px; letter-spacing: -.05em; }
.form-screen .mini-subtitle { display: none; }
.form-screen .ghost-btn { width: 36px; height: 36px; font-size: 25px; background: rgba(255,250,241,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.form-stage { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 7px; padding: 0 4px 2px; color: rgba(118,111,99,.82); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.form-stage i { display: block; height: 1px; background: linear-gradient(90deg, rgba(199,164,102,.18), rgba(181,70,52,.34), rgba(199,164,102,.18)); }
.form-screen .panel { flex: 0 0 auto; margin: 0; padding: 9px 10px; border-radius: 24px; background: rgba(255,250,241,.72); border-color: rgba(255,255,255,.86); box-shadow: 0 10px 24px rgba(39,28,18,.055), inset 0 1px 0 rgba(255,255,255,.86); backdrop-filter: blur(18px); }
.form-screen .coin-panel { position: relative; z-index: 2; background: rgba(255,250,241,.78); }
.form-screen .coin-panel:not(.collapsed) { z-index: 12; }
.form-screen .coin-panel:not(.collapsed) .coin-grid-wrap { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 13; padding: 8px 10px 7px; border: 1px solid rgba(255,255,255,.88); border-radius: 22px; background: #fffaf1; box-shadow: 0 18px 48px rgba(39,28,18,.14); }
body.coin-overlay-open .form-screen::after { filter: blur(1px); opacity: .88; }
.form-screen .param-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.form-screen .param-grid .panel { min-width: 0; box-shadow: 0 7px 18px rgba(39,28,18,.04), inset 0 1px 0 rgba(255,255,255,.8); }
.form-screen .picker-panel { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 5px 10px; align-items: center; padding: 6px 8px; }
.form-screen .picker-panel label { margin: 0; }
.picker-head { display: grid; gap: 2px; width: 100%; min-width: 0; text-align: center; justify-items: stretch; }
.picker-head label { width: 100%; text-align: center; }
.field-hint { display: block; width: 100%; color: var(--red); font-size: 11px; line-height: 1.16; white-space: normal; text-align: center; }
.native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.inline-wheel, .form-screen .dot-scale { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 100%; overflow: hidden; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 8px rgba(39,28,18,.08); }
.inline-wheel::-webkit-scrollbar { display: none; }
.wheel-chip, .form-screen .dot { position: relative; min-width: 0; min-height: 31px; height: 31px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: transparent; font-size: 0; font-weight: 800; }
.wheel-chip::after, .form-screen .dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(93,85,75,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.wheel-chip.active, .form-screen .dot.active { background: linear-gradient(180deg, rgba(24,23,19,.96), rgba(24,23,19,.9)); color: transparent; box-shadow: 0 7px 14px rgba(24,23,19,.16), inset 0 1px 0 rgba(255,255,255,.12); }
.wheel-chip.active::after, .form-screen .dot.active::after { width: 10px; height: 10px; background: #fffaf1; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.form-screen .scale-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 5px 10px; padding: 6px 8px; }
.form-screen .scale-panel .label-row { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; text-align: center; align-items: center; justify-content: center; }
.form-screen .scale-panel .label-row > * { width: auto; max-width: 100%; text-align: center; }
.form-screen .scale-panel .label-row span,
.form-screen .scale-panel .label-row .field-hint { width: auto !important; max-width: 100%; text-align: center; }
.form-screen .scale-panel .label-row span { white-space: nowrap; line-height: 1.1; }
.form-screen .scale-panel .dot-scale { gap: 5px; }
.form-screen .scale-panel .dot { min-width: 0; padding: 0; }
.form-screen .panel-toggle strong { font-size: 18px; letter-spacing: -.04em; }
.form-screen .panel-toggle em { margin-top: 1px; }
.form-screen .toggle-mark { padding: 7px 10px; font-size: 12px; color: #6d5f4c; background: rgba(234,216,184,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.52); }
.form-screen .coin-grid-wrap { max-height: 238px; }
.form-screen .coin-grid { gap: 6px; padding-top: 7px; }
.form-screen .coin-group { gap: 3px; }
.form-screen .coin-group-title { font-size: 11px; line-height: 1.1; color: rgba(93,85,75,.82); }
.form-screen .coin-group-title::after { background: linear-gradient(90deg, rgba(199,164,102,.45), rgba(222,211,193,.16)); }
.form-screen .coin-group-row { gap: 5px; }
.form-screen .coin { min-height: 33px; padding: 4px 3px 5px; border-color: rgba(199,164,102,.36); border-style: solid; background: rgba(255,250,241,.54); color: #5d554b; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.form-screen .coin.empty { border-style: solid; background: rgba(255,250,241,.44); color: #756d62; }
.form-screen .coin.selected-have { background: linear-gradient(180deg, rgba(66,107,85,.92), rgba(50,83,65,.86)); border-color: rgba(66,107,85,.58); color: #fffaf1; }
.form-screen .coin.selected-lack { background: linear-gradient(180deg, rgba(181,70,52,.93), rgba(141,57,44,.86)); border-color: rgba(181,70,52,.58); color: #fffaf1; }
.form-screen .coin.selected-want { background: linear-gradient(180deg, rgba(199,164,102,.92), rgba(169,122,62,.86)); border-color: rgba(159,111,53,.58); color: #181713; }
.form-screen .coin .coin-name { line-height: 1.05; }
.form-screen .coin .state { font-size: 10px; opacity: .92; }
.form-screen .quiet-note { margin: 4px 0 0; font-size: 11px; line-height: 1.2; }
.form-screen .selected-summary { margin-top: 7px; padding: 10px 11px; border-radius: 18px; background: linear-gradient(180deg, rgba(234,216,184,.58), rgba(255,250,241,.28)); font-size: 12px; line-height: 1.42; }
.form-screen .compact-panel label,
.form-screen .essay-panel label:first-child,
.form-screen .label-row span { margin-bottom: 4px; font-size: 14px; }
.form-screen .label-row strong { font-size: 12px; }
.form-screen .dot-scale { gap: 5px; }
.form-screen .dot { height: 31px; }
.form-screen .dot.active { background: linear-gradient(180deg, rgba(24,23,19,.96), rgba(24,23,19,.9)); box-shadow: 0 7px 13px rgba(24,23,19,.14); }
.form-screen .essay-panel { padding-bottom: 8px; }
.form-screen textarea { min-height: 51px; height: 51px; resize: none; padding: 9px 11px; border-radius: 18px; border-color: rgba(199,164,102,.42); background: rgba(255,250,241,.56); font-size: 13px; line-height: 1.35; box-shadow: inset 0 1px 4px rgba(39,28,18,.04); }
.form-screen .consent-row { margin-top: 4px; font-size: 10px; line-height: 1.2; }
.form-screen .sticky-action { flex: 0 0 auto; min-height: 42px; margin: 0; padding: 12px 18px; background: linear-gradient(180deg, #24221d, #11100d); box-shadow: 0 12px 24px rgba(24,23,19,.18); }
body.form-mode .coin-pop { width: min(350px, calc(100vw - 28px)); padding: 8px; border: 1px solid rgba(255,255,255,.88); border-radius: 20px; background: rgba(255,250,241,.96); color: var(--ink); box-shadow: 0 18px 48px rgba(39,28,18,.16); backdrop-filter: blur(18px); }
body.form-mode .coin-pop::before { background: rgba(255,250,241,.96); }
body.form-mode .coin-pop h4 { margin-bottom: 6px; font-size: 12px; }
body.form-mode .coin-pop button { min-height: 34px; border-color: rgba(199,164,102,.34); border-radius: 13px; background: rgba(255,255,255,.38); color: inherit; font-size: 12px; }
body.form-mode .coin-pop button.active { background: #181713; color: #fffaf1; }

@media (max-height: 760px) {
  .app-shell { padding: 10px 12px 18px; }
  .form-screen { height: calc(100svh - 16px); gap: 5px; }
  .form-screen .topbar { transform: scale(.94); transform-origin: left center; margin-bottom: -2px; }
  .form-screen .panel { padding: 7px 8px; border-radius: 17px; }
  .form-screen .coin-grid-wrap { max-height: 218px; }
  .form-screen .coin-grid { gap: 5px; padding-top: 6px; }
  .form-screen .coin-group-row { gap: 4px; }
  .form-screen .coin { min-height: 31px; font-size: 11px; }
  .form-screen .coin .state { font-size: 10px; }
  .form-screen .wheel-select { min-height: 34px; }
  .form-screen .picker-panel { grid-template-columns: 78px minmax(0,1fr); padding: 5px 7px; }
  .inline-wheel { gap: 5px; }
  .wheel-chip, .form-screen .dot { min-height: 29px; height: 29px; font-size: 0; padding: 0 8px; }
  .form-screen .scale-panel { grid-template-columns: 78px minmax(0,1fr); }
  .field-hint { font-size: 10px; }
  .form-screen .dot { height: 29px; }
  .form-screen textarea { min-height: 42px; height: 42px; }
  .form-screen .consent-row { display: none !important; }
  .form-screen .sticky-action { min-height: 38px; padding: 10px 16px; }
}

@keyframes orbitFloat { 0%,100% { transform: translate(-50%, -50%) rotate(-18deg) scale(1); } 50% { transform: translate(-50%, -53%) rotate(-12deg) scale(1.035); } }
@keyframes cardOrbitFloat { 0%,100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(-12deg) scale(1.04); } }
@keyframes coinPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: 1; } }
@media (max-width: 370px) { .coin-grid { gap: 7px; } .coin { font-size: 13px; } .result-card h2 { font-size: 33px; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .orbit-coin, .card-ring, .card-planet { animation: none; } }
@media print { body { background: #fff; } .topbar, .result-actions, #saveHint { display:none !important; } .screen { display:block; } .screen:not(.result-screen) { display:none; } }