:root {
  color-scheme: light;
  --green: #1ed760;
  --green-deep: #12a545;
  --green-soft: #e5faee;
  --yellow: #e6ffb9;
  --ink: #17191a;
  --muted: #707579;
  --line: #e2e5e8;
  --paper: #ffffff;
  --canvas: #f5f5f5;
  font-family: Arial, Helvetica, ui-sans-serif, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.header-mark { display: inline-flex; width: 22px; height: 22px; flex: none; }
.header-left .header-mark svg { width: 22px; height: 22px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #e9ebed; color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; border: 0; }
button, input, textarea, select { color: inherit; }
button:disabled { opacity: .42; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; vertical-align: middle; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
ul, ol { padding: 0; margin: 0; list-style: none; }
dl, dd { margin: 0; }
strong { font-weight: 700; }
::selection { background: #b8f6ce; color: #11331d; }
:focus-visible { outline: 3px solid #098836; outline-offset: 3px; }
[hidden], .hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; inset: 8px auto auto 8px; width: auto; height: auto; clip: auto; padding: 12px; margin: 0; background: #fff; color: #111; z-index: 300; border-radius: 6px; }
.phone-shell { width: 100%; max-width: 430px; min-height: 100dvh; margin: 0 auto; background: var(--paper); box-shadow: 0 0 28px #0000000b; position: relative; overflow-x: clip; }
.prototype-ribbon { min-height: 24px; background: var(--green-soft); color: #2d6540; padding: 5px 9px; text-align: center; font-size: 10px; line-height: 1.5; }
.prototype-ribbon strong { font-weight: 700; }
.app-header { position: sticky; top: 0; z-index: 40; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-bottom: 1px solid #f1f2f3; }
.header-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-left > button, .back-button { width: 35px; height: 44px; flex: none; padding: 4px; margin-left: -6px; background: transparent; font-size: 25px; line-height: 1; }
.header-left > a, .header-brand, .app-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 750; letter-spacing: -1px; white-space: nowrap; }
.header-left svg, .header-brand svg, .app-logo svg { width: 28px; height: 28px; color: var(--green-deep); }
.header-left img { width: 100px; max-height: 30px; object-fit: contain; }
.header-wallet { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid var(--line); padding: 4px 10px 4px 5px; border-radius: 30px; gap: 6px; white-space: nowrap; background: #fff; font-size: 12px; font-weight: 700; }
.header-wallet .balance-label { color: var(--green-deep); font-size: 10px; font-weight: 600; }
.header-wallet > svg, .wallet-coin { width: 24px; height: 24px; background: var(--green-soft); color: var(--green-deep); border-radius: 50%; padding: 4px; }
.header-wallet small { font-size: 10px; }
.page { padding: 16px 16px 98px; min-height: calc(100dvh - 84px); }
.page.wallet-page, .wallet-page { background: var(--canvas); }
.page > .section-title:first-child { margin-top: 3px; }
.section-title { font-size: 19px; line-height: 1.25; font-weight: 750; margin-bottom: 16px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.eyebrow, .label { color: var(--muted); font-size: 11px; font-weight: 600; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--green-soft); color: #12843b; border-radius: 30px; padding: 4px 9px; font-size: 10px; font-weight: 700; line-height: 1.5; }
.btn { min-height: 52px; padding: 14px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 750; line-height: 1.35; text-align: center; transition: background .15s, transform .15s; }
.btn:not(:disabled):active { transform: scale(.985); }
.btn.primary { background: #171918; color: #fff; }
.btn.primary:hover:not(:disabled) { background: #303530; }
.btn.green { background: var(--green); color: #0f2617; }
.btn.green:hover:not(:disabled) { background: #19c956; }
.btn.outline { border-color: #cfd5d1; background: #fff; color: #252a26; }
.btn.muted { background: #f1f3f2; color: #666e68; }
.btn.full { width: 100%; }
.btn.rounded { border-radius: 50px; }
.btn.small { min-height: 44px; padding: 10px 15px; font-size: 12px; }
.btn svg { width: 18px; height: 18px; flex: none; }

.home-reward { background: var(--green); border-radius: 24px; overflow: hidden; }
.reward-hero { min-height: 240px; position: relative; padding: 23px 20px 15px; overflow: hidden; }
.hero-copy { position: relative; z-index: 3; width: 65%; }
.hero-copy > .eyebrow, .reward-hero .eyebrow { color: #0d4c26; font-size: 10px; margin-bottom: 9px; }
.hero-copy h1 { font-size: 28px; line-height: 1.1; letter-spacing: -.8px; font-weight: 800; }
.hero-copy h1 span, .hero-copy h1 em { color: #fff; font-style: normal; }
.hero-copy p { margin-top: 12px; font-size: 12px; line-height: 1.6; max-width: 215px; }
.hero-phone { position: absolute; width: 130px; height: 204px; top: 35px; right: -25px; z-index: 2; transform: rotate(13deg); border: 7px solid #171c18; border-radius: 23px; padding: 14px 9px; background: #303d32; box-shadow: -8px 13px 18px #0e833849; }
.hero-phone::before { content: ''; position: absolute; width: 38px; height: 6px; background: #111713; top: 5px; left: calc(50% - 19px); border-radius: 6px; }
.hero-phone::after { content: '♫'; position: absolute; left: 15px; bottom: 12px; font-size: 24px; color: #bcf7ce; }
.hero-phone .track-art { width: 100%; height: 88px; aspect-ratio: 1; border-radius: 6px; margin: 8px 0 10px; }
.hero-phone small { font-size: 10px; color: #d1ecd8; }
.hero-disc { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #19221c; border: 15px solid #263d2c; box-shadow: inset 0 0 0 2px #44654a; right: 29px; bottom: 25px; z-index: 1; }
.hero-disc::after { content: ''; position: absolute; width: 15px; height: 15px; inset: calc(50% - 7.5px); background: #e6ffb9; border-radius: 50%; }
.milestones { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 2px; }
.milestones > * { min-width: 0; flex: 1; text-align: center; background: var(--yellow); border-radius: 40px; padding: 11px 4px 10px; min-height: 100px; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.milestone-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2ecc69; color: #f4ffe4; font-size: 21px; }
.milestones small { font-size: 10px; font-weight: 500; }
.hero-action { padding: 17px 20px 20px; }
.reward-subtitle { font-size: 12px; line-height: 1.65; margin-top: 13px; text-align: center; }
.reward-caption { font-size: 10px; line-height: 1.65; color: #28623c; text-align: center; margin: 11px 0 0; }
.progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.5; color: #5a665c; margin-bottom: 8px; }
.progressbar { height: 6px; background: #e9eeea; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: inherit; transition: width .25s; }
.home-reward .progressbar { background: #10b44c; }
.home-reward .progress-fill { background: var(--yellow); }
.home-section { padding: 22px 20px; border-top: 1px dotted #178d42; }
.home-section h2 { font-size: 18px; font-weight: 800; margin-bottom: 15px; }
.home-section p { font-size: 12px; line-height: 1.7; }
.activity-row { display: flex; align-items: start; gap: 9px; font-size: 12px; line-height: 1.6; margin-top: 12px; }
.check-dot { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: var(--yellow); color: #128a3f; font-size: 11px; font-weight: 800; margin-top: 1px; }
.timeline { position: relative; display: flex; justify-content: space-between; gap: 7px; margin-block: 22px 4px; }
.timeline::before { content: ''; position: absolute; top: 28px; left: 17px; right: 17px; height: 2px; background: var(--yellow); }
.timeline-item { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; flex-direction: column; gap: 7px; font-size: 10px; text-align: center; }
.timeline-item strong { font-size: 11px; }
.timeline-dot { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); color: #128b40; font-size: 10px; }
.home-note { margin-top: 16px; padding: 15px 17px; background: #f5f7f5; border: 1px solid #e3e9e3; border-radius: 10px; font-size: 11px; line-height: 1.75; color: #69736a; }
.home-note strong { color: #313e34; }
.bottom-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 50; width: 100%; max-width: 430px; display: flex; justify-content: space-around; align-items: stretch; height: calc(65px + env(safe-area-inset-bottom, 0px)); padding: 7px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e7e9e7; background: #fff; }
.nav-item { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; background: transparent; padding: 4px 2px; color: #8a908d; font-size: 10px; line-height: 1.2; min-height: 44px; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item > span[aria-hidden] { font-size: 21px; line-height: 1; }
.nav-item.active { color: #0caf47; font-weight: 700; }

.balance-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; padding: 14px 15px; background: #181c19; color: #fff; margin-bottom: 16px; }
.balance-strip small { display: block; color: #b7c3ba; font-size: 10px; margin-bottom: 3px; }
.balance-strip strong { font-size: 21px; line-height: 1.2; letter-spacing: -.4px; }
.count-badge { padding: 5px 10px; border-radius: 20px; background: #344338; color: #c8f5d6; font-size: 11px; font-weight: 700; }
.task-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 14px; }
.task-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.task-heading h1 { font-size: 20px; line-height: 1.2; letter-spacing: -.35px; font-weight: 750; margin-top: 4px; }
.task-kicker { color: #6c7570; font-size: 11px; font-weight: 500; }
.task-reward { padding: 5px 8px; border-radius: 5px; background: var(--green-soft); color: #11863b; font-size: 12px; font-weight: 750; white-space: nowrap; margin-top: 2px; }
.track-art { position: relative; aspect-ratio: 1; width: 100%; background: #9cc39c; overflow: hidden; border-radius: 7px; isolation: isolate; }
.track-art.covergreen, .track-art.cover-green { background: #89b68d; color: #163b25; }
.track-art.coverpurple, .track-art.cover-purple { background: #b8a9d4; color: #43325a; }
.track-art.coverorange, .track-art.cover-orange { background: #e9a775; color: #4e3828; }
.track-art::before { content: ''; position: absolute; width: 76%; aspect-ratio: 1; right: -8%; top: 8%; border-radius: 50%; background: #ffffff42; }
.track-art::after { content: ''; position: absolute; width: 145%; height: 48%; border: 2px solid currentColor; border-radius: 50%; left: -35%; top: 38%; transform: rotate(-25deg); opacity: .6; box-shadow: 0 9px 0 -7px currentColor, 0 -9px 0 -7px currentColor; }
.track-art-logo { position: absolute; z-index: 2; top: 17px; left: 16px; font-size: 18px; color: inherit; }
.track-art .track-title { position: absolute; z-index: 2; bottom: 24px; left: 18px; right: 18px; font-size: 40px; line-height: .95; letter-spacing: -1.7px; font-weight: 800; text-transform: uppercase; }
.track-art .track-artist { position: absolute; z-index: 2; bottom: 10px; left: 19px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.track-title { font-size: 15px; font-weight: 750; line-height: 1.3; }
.track-artist { color: var(--muted); font-size: 11px; margin-top: 3px; }
.audio-player { display: flex; align-items: center; gap: 10px; padding-top: 13px; }
.audio-player audio { display: none; }
.audio-button { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: #1b211c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.audio-button svg { width: 16px; height: 16px; }
.audio-progress { position: relative; height: 4px; flex: 1; background: #e3e8e3; border-radius: 4px; overflow: hidden; }
.audio-progress > span, .audio-progress > div { height: 100%; background: var(--green); display: block; }
.audio-time { font-size: 10px; color: #777e77; font-variant-numeric: tabular-nums; }
.audio-caption { font-size: 10px; color: #8a918b; line-height: 1.65; margin: 11px 0 0; }
.app-mock { border-radius: 16px; background: #151916; color: #fff; padding: 17px; overflow: hidden; min-height: 265px; }
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 750; }
.mock-top svg { width: 24px; height: 24px; }
.mock-chips { display: flex; gap: 6px; margin-top: 16px; }
.mock-chips > * { padding: 5px 10px; font-size: 10px; border-radius: 20px; background: #333b34; }
.mock-chips > :first-child { background: var(--green); color: #112919; }
.mock-cover { width: 72px; aspect-ratio: 1; border-radius: 5px; background: #a8c297; color: #213721; display: flex; align-items: center; justify-content: center; font-size: 29px; flex: none; }
.mock-cover:nth-child(2n) { background: #baa8ce; color: #42354a; }
.mock-row { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.mock-row > div:last-child { flex: 1; min-width: 0; }
.mock-row strong { display: block; font-size: 12px; }
.mock-row small { display: block; color: #a3b0a6; font-size: 10px; margin-top: 5px; }
.evaluation-card { padding: 17px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 15px; position: relative; }
.question-title { font-size: 18px; line-height: 1.25; letter-spacing: -.2px; font-weight: 750; margin-bottom: 12px; }
.evaluation-card > p { font-size: 12px; line-height: 1.7; color: #727a74; }
.rating-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.rating-option { position: relative; min-height: 62px; padding: 9px 3px; border: 1px solid #dce2dd; border-radius: 7px; color: #9ca59e; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; cursor: pointer; font-size: 11px; }
.rating-option .star, .rating-option > span[aria-hidden] { font-size: 22px; line-height: 1; }
.rating-option strong { color: #69756c; font-size: 11px; }
.rating-option.selected { background: #e5f9ed; border-color: #17b84e; color: #13a445; }
.rating-option.selected strong { color: #108b3b; }
.rating-option input, .choice-option input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; }
.rating-option:has(input:focus-visible), .choice-option:has(input:focus-visible) { outline: 3px solid #098836; outline-offset: 3px; }
.rating-labels { display: flex; justify-content: space-between; align-items: start; gap: 12px; color: #8b938d; font-size: 10px; margin-top: 8px; }
.rating-labels > :last-child { text-align: right; }
.choice-list { display: grid; gap: 9px; border: 0; padding: 0; margin: 17px 0 0; min-width: 0; }
.rating-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-option { position: relative; display: flex; align-items: center; gap: 11px; padding: 12px 13px; min-height: 48px; border: 1px solid #e0e5e0; border-radius: 6px; color: #4c5650; font-size: 12px; line-height: 1.5; cursor: pointer; }
.choice-option.selected { border-color: #1bbc54; color: #138c3c; background: #edfcf2; }
.choice-dot { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #cbd4cd; flex: none; margin-left: auto; }
.choice-option.selected .choice-dot { border-color: #19b54e; background: var(--green); }
.choice-option.selected .choice-dot::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 800; }
.note-label { display: block; font-size: 12px; font-weight: 600; margin: 20px 0 8px; }
.note-label span { color: #8b938e; font-weight: 400; font-size: 11px; }
textarea, input:not([type="radio"]):not([type="checkbox"]), select { display: block; width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid #dfe5df; border-radius: 6px; background: #fafcfa; color: #353e37; font-size: 13px; line-height: 1.6; }
textarea { resize: vertical; min-height: 85px; }
textarea::placeholder, input::placeholder { color: #a1aaa3; }
.locked-card { position: relative; padding: 28px 18px; background: #f4f6f4; border: 1px solid #e4e8e4; border-radius: 8px; text-align: center; margin-bottom: 15px; }
.locked-card h2 { font-size: 17px; margin-top: 12px; }
.locked-card p { color: #838d85; font-size: 12px; line-height: 1.7; margin: 10px 0 0; }
.locked-icon { width: 38px; height: 38px; border-radius: 50%; background: #e7ece8; color: #8c988e; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 18px; }
.reward-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-size: 11px; color: #869087; border-top: 1px solid #edf0ed; margin-top: 17px; }
.reward-line strong { color: #0d9d3f; font-size: 13px; }
.question-footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.question-footer .btn { flex: 1; }
.question-footer + p { font-size: 10px; color: #8d968f; line-height: 1.65; margin: 12px 0 0; }
.next-task { position: relative; padding: 18px; margin-top: 18px; background: #f7f8f7; border: 1px solid #e8ece8; border-radius: 8px; overflow: hidden; }
.next-task > :not(.locked-icon) { opacity: .42; filter: blur(2px); pointer-events: none; }
.next-task .locked-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6a756d; background: #fff; box-shadow: 0 2px 10px #00000012; }

.balance-ticket { position: relative; color: #fff; background: #171c18; border-radius: 16px; padding: 22px 20px 0; overflow: hidden; margin-bottom: 18px; }
.ticket-top { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.ticket-label { font-size: 12px; color: #b8c4ba; }
.ticket-balance { font-size: 38px; font-weight: 750; line-height: 1.2; letter-spacing: -1.3px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ticket-balance small { color: #b4c1b7; font-size: 11px; letter-spacing: 0; font-weight: 400; }
.ticket-points { font-size: 11px; color: #94a599; margin-top: 8px; }
.ticket-coin { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; flex: none; margin-top: 4px; border: 5px solid #b6ffc8; background: var(--green); color: #107532; border-radius: 50%; box-shadow: inset 0 0 0 2px #2cbf5e; font-size: 31px; font-weight: 800; transform: rotate(15deg); }
.ticket-divider { border-top: 1px dashed #546158; margin: 23px -20px 0; }
.ticket-bottom { padding: 14px 0; color: #a0b0a4; font-size: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-bottom strong { color: #c6efcf; font-size: 11px; }
.white-card { padding: 20px; border-radius: 16px; background: #fff; margin-bottom: 16px; }
.white-card h2 { font-size: 17px; font-weight: 750; margin-bottom: 14px; }
.white-card > p { font-size: 12px; line-height: 1.7; color: #7c867e; }
.amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-block: 15px 18px; }
.amount-option { min-height: 48px; padding: 8px 2px; font-size: 12px; font-weight: 650; color: #7f8981; background: #fff; border: 1px solid #dbe2dc; border-radius: 7px; }
.amount-option.selected { border: 2px solid var(--green); color: #149d43; background: #effcf3; }
.cashout-method-icons { display: flex; align-items: center; justify-content: center; gap: 15px; color: #859087; font-size: 10px; padding-top: 14px; }
.cashout-method-icons > * { min-width: 24px; min-height: 20px; display: flex; align-items: center; justify-content: center; }
.feature-card { display: flex; align-items: center; gap: 12px; background: #fff; padding: 16px; border-radius: 12px; margin-bottom: 13px; }
.feature-card > div { flex: 1; }
.feature-card strong { display: block; font-size: 12px; }
.feature-card p { font-size: 11px; color: #8a948c; line-height: 1.65; margin: 4px 0 0; }
.feature-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: #ebfaef; color: #1db854; border-radius: 11px; font-size: 20px; }
.method-row { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 15px 0; background: #fff; border-bottom: 1px solid #edf0ed; text-align: left; }
.method-row:last-child { border-bottom: 0; }
.method-logo { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: #edf6ef; color: #13a749; border-radius: 10px; font-size: 21px; }
.method-logo svg { width: 25px; height: 25px; }
.method-text { flex: 1; min-width: 0; }
.method-text strong { display: block; font-size: 13px; font-weight: 650; }
.method-text small { display: block; color: #9aa39d; font-size: 10px; margin-top: 4px; line-height: 1.5; }
.currency { color: #9aa39d; font-size: 10px; margin-left: auto; }
.chevron { color: #a1aaa4; font-size: 20px; padding-left: 4px; }

.sheet-dialog { position: fixed; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0; width: 100%; max-width: 430px; max-height: 92dvh; overflow-y: auto; border: 0; padding: 0; border-radius: 18px 18px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -10px 40px #00000012; }
.sheet-dialog::backdrop { background: #0007; }
.sheet-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 19px; border-bottom: 1px solid #edf0ed; }
.sheet-header h2 { font-size: 17px; font-weight: 700; text-align: center; flex: 1; }
.sheet-header > button, .sheet-header .close-button { width: 40px; height: 40px; min-width: 40px; padding: 0; font-size: 25px; background: transparent; color: #7c867e; }
.sheet-header > button:first-child { margin-left: -8px; }
.sheet-body { padding: 21px 20px; max-height: 75dvh; overflow-y: auto; }
.sheet-body > p { color: #7f8981; font-size: 12px; line-height: 1.75; }
.sheet-footer { padding: 15px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #edf0ed; }
.sheet-footer .reward-caption { color: #8e9890; }
.detail-field { margin-bottom: 18px; }
.detail-field label { display: block; font-size: 11px; color: #778179; margin-bottom: 7px; }
.detail-field input[readonly] { background: #f5f7f5; color: #6f7a71; }
.details-sheet-body .selected-method { margin-bottom: 20px; }
.detail-inputs-wrap { margin-bottom: 16px; }
.detail-field-v2 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.detail-field-v2:last-child { margin-bottom: 0; }
.detail-label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; }
.detail-input-v2 { height: 48px; width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; padding: 0 16px; font-size: 14px; font-weight: 600; color: #0f172a; outline: none; box-sizing: border-box; transition: border-color .15s; }
.detail-input-v2:focus { border-color: #1ed760; }
.detail-input-v2[readonly] { background: #f1f5f1; color: #6f7a71; }
.summary-row { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding-block: 11px; font-size: 12px; border-bottom: 1px solid #eef1ee; }
.summary-row dt, .summary-row > span:first-child { color: #7c877f; }
.summary-row dd, .summary-row > strong { text-align: right; font-size: 12px; font-weight: 600; }
.timeline-vertical { padding-block: 8px; }
.timeline-step { position: relative; display: flex; align-items: start; gap: 14px; padding-bottom: 27px; font-size: 12px; }
.timeline-step:not(:last-child)::after { content: ''; position: absolute; top: 27px; bottom: 3px; left: 12px; width: 1px; background: #d5e5d8; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step strong { display: block; font-size: 13px; }
.timeline-step p { color: #8a948c; font-size: 11px; line-height: 1.7; margin: 5px 0 0; }
.status-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex: none; background: #e7f9ed; color: #19b650; border-radius: 50%; font-size: 12px; }
.confirmation-title { font-size: 23px; line-height: 1.2; font-weight: 750; text-align: center; margin: 5px 0 17px; }
/* Security contribution card */
.security-contrib-card { background: #fff; border-radius: 16px; padding: 20px; margin: 16px 0 0; }
.security-contrib-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a8b80; margin: 0 0 12px; }
.security-contrib-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.security-contrib-amount { font-size: 30px; font-weight: 800; line-height: 1; color: #10B981; }
.security-contrib-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg,#10B981 0%,#059669 100%); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-radius: 999px; padding: 3px 8px 3px 3px; box-shadow: 0 2px 6px rgba(16,185,129,.25); }
.security-contrib-check { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.95); display: inline-flex; align-items: center; justify-content: center; color: #059669; flex: none; }
.security-contrib-body { font-size: 12px; line-height: 1.65; color: #7a8b80; margin: 0; }
.security-contrib-body strong { color: #1a2b1f; }
/* 3-step flow */
.steps-flow-card { background: #fff; border-radius: 16px; padding: 20px; margin: 16px 0 0; }
.steps-flow { display: flex; align-items: flex-start; justify-content: center; }
.steps-flow-item { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.steps-flow-last { flex: none; }
.steps-flow-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.steps-line { height: 2px; background: #E5E7EB; flex: 1; margin-top: 17px; }
.steps-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; }
.steps-green { background: #1ed760; color: #0a3320; }
.steps-gray { background: #E5E7EB; color: #7a8b80; }
.steps-ping-wrap { position: relative; width: 36px; height: 36px; flex: none; }
.steps-ping-ring { position: absolute; inset: 0; border-radius: 50%; background: #1ed760; opacity: .4; animation: steps-ping 1.2s cubic-bezier(0,.2,.8,1) infinite; }
.steps-gold { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#17a848 0%,#1ed760 45%,#12863a 100%); box-shadow: 0 4px 14px rgba(30,215,96,.45); animation: steps-pulse 2s ease-in-out infinite; }
@keyframes steps-ping { 0%{transform:scale(1);opacity:.5} 80%,100%{transform:scale(2);opacity:0} }
@keyframes steps-pulse { 0%,100%{box-shadow:0 4px 14px rgba(30,215,96,.45)} 50%{box-shadow:0 4px 24px rgba(30,215,96,.7)} }
.steps-label-bold { font-size: 12px; font-weight: 800; margin: 8px 0 0; text-align: center; color: #1a2b1f; }
.steps-label-sub { font-size: 11px; text-align: center; color: #7a8b80; margin: 2px 0 0; }
.steps-muted { color: #7a8b80 !important; }
.steps-gold-text { background: linear-gradient(135deg,#17a848 0%,#1ed760 45%,#12863a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Testimonials */
.testimonials-card { background: #fff; border-radius: 16px; padding: 16px; margin: 16px 0 0; }
.testimonials-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #7a8b80; text-align: center; margin: 0 0 4px; }
.testimonial-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F0F0F0; }
.testimonial-row:last-of-type { border-bottom: 0; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonial-body { flex: 1; min-width: 0; }
.testimonial-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.testimonial-name { font-size: 13px; font-weight: 600; color: #1a2b1f; }
.testimonial-amount { font-size: 11px; font-weight: 700; color: #10B981; white-space: nowrap; }
.testimonial-quote { font-size: 12px; line-height: 1.5; color: #1a2b1f; font-style: italic; margin: 3px 0 0; }
.testimonial-loc { font-size: 10px; color: #7a8b80; margin: 3px 0 0; }
.testimonials-footer { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 6px; }
.testimonials-avatars { display: flex; }
.testimonials-avatars img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -6px; }
.testimonials-avatars img:first-child { margin-left: 0; }
.testimonials-count { font-size: 11px; color: #7a8b80; margin-left: 4px; }
/* Release button */
.release-btn-wrap { margin: 16px 0 0; }
.release-btn { min-height: 56px; font-size: 16px; font-weight: 700; }
.release-sub { font-size: 11px; text-align: center; color: #7a8b80; margin: 8px 0 0; }
/* Gov logos */
.gov-logos-row { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 24px 16px 8px; }
.gov-logo { object-fit: contain; }
.gov-logo-sm { height: 28px; }
.gov-logo-md { height: 50px; }
/* Confirm footer */
.confirm-footer { border-top: 1px solid #E5E7EB; padding: 16px 16px 24px; text-align: center; }
.confirm-footer-secure { font-size: 13px; color: #7a8b80; margin: 0; }
.confirm-footer-protocol { font-size: 9px; color: #b5c0b8; margin: 4px 0 0; }
.confirm-footer-help { font-size: 13px; font-weight: 600; color: #1ed760; margin: 4px 0 0; cursor: pointer; text-decoration: none; display: block; }
.notice-box { padding: 13px 15px; background: #effaf2; color: #558062; border: 1px solid #d8efde; border-radius: 7px; font-size: 11px; line-height: 1.75; margin-block: 15px; }
.notice-box strong { color: #26783d; }

.activation-page { background: #f4f5f4; }
.activation-alert { padding: 11px 13px; background: #fff0f1; color: #a95d66; font-size: 11px; line-height: 1.7; text-align: center; border: 1px solid #f7dfe3; border-radius: 7px; margin-bottom: 16px; }
.activation-card { background: #fff; border: 1px solid #e7eae7; border-radius: 15px; padding: 26px 20px; text-align: center; }
.activation-card h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; }
.activation-card > p { font-size: 12px; color: #7b867e; line-height: 1.8; margin: 14px 0 0; }
.activation-ring { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 5px solid #b6f7ca; background: #edfbf2; color: #15b04a; font-size: 34px; margin: 0 auto 21px; }
.step-offer { border: 1px solid #dfe5df; border-radius: 12px; padding: 19px 16px; margin-top: 19px; text-align: left; background: #fff; }
.offer-heading { font-size: 16px; font-weight: 750; margin-bottom: 6px; }
.offer-status { display: inline-flex; align-items: center; gap: 5px; color: #1c9b43; background: #eaf9ee; border-radius: 20px; font-size: 10px; padding: 4px 8px; }
.offer-option { padding: 15px; border: 1px solid #e3e8e4; border-radius: 9px; margin-top: 13px; background: #fafcfb; font-size: 12px; }
.offer-option.selected { border-color: var(--green); background: #edf9f1; }
.offer-amount { font-size: 40px; line-height: 1.2; color: #1ba24a; letter-spacing: -1px; font-weight: 800; text-align: center; margin: 17px 0; }
.offer-amount small { display: block; font-size: 10px; letter-spacing: 0; line-height: 1.7; color: #7e9183; font-weight: 400; margin-top: 5px; }
.offer-checklist { display: grid; gap: 11px; margin-block: 18px; }
.offer-check { display: flex; align-items: start; gap: 8px; font-size: 11px; color: #7c887f; line-height: 1.65; }
.offer-check > span:first-child { color: #15ad47; font-weight: 800; }
.success-coin { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 5px solid #bcf8d0; background: var(--green); color: #0e7831; font-size: 34px; font-weight: 800; box-shadow: inset 0 0 0 2px #1cbd52; margin: 0 auto 22px; }
.completion-card { padding: 28px 20px; border: 1px solid #e4eae5; border-radius: 16px; text-align: center; background: #fff; }
.completion-card h1 { font-size: 25px; font-weight: 800; line-height: 1.15; }
.completion-card > p { color: #7c887f; font-size: 12px; line-height: 1.75; margin: 15px 0; }
.completion-card .ticket-balance { color: #139d43; font-size: 36px; }
.history-row { display: flex; align-items: center; gap: 12px; padding-block: 16px; border-bottom: 1px solid #edf1ee; font-size: 12px; }
.history-row > div { flex: 1; min-width: 0; }
.history-row small { display: block; margin-top: 3px; color: #929d95; font-size: 10px; }
.history-row > strong:last-child { color: #139e43; font-size: 12px; white-space: nowrap; }
.empty { text-align: center; padding: 27px 16px; color: #8a948c; font-size: 12px; line-height: 1.8; }
.empty h1, .empty h2 { color: #4b5850; font-size: 21px; margin-bottom: 15px; }
.empty .btn { margin-top: 14px; }
.legal-footer { padding: 20px 12px 5px; color: #8a948c; font-size: 10px; line-height: 1.8; text-align: center; }
.legal-footer p { font-size: 10px; margin: 0 0 9px; }
.legal-footer button, .legal-footer a { min-height: 38px; padding: 8px 6px; background: none; color: #7f8b82; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.legal-footer strong { color: #637468; }

.entry-dialog, .credit-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: calc(100% - 60px); max-width: 340px; max-height: 88dvh; overflow-y: auto; border: 0; border-radius: 32px; padding: 28px; text-align: center; box-shadow: 0 18px 55px #0004; }
.entry-dialog { background: #232323ed; color: #fff; }
.entry-dialog::backdrop, .credit-dialog::backdrop { background: #0005; backdrop-filter: blur(6px); }
.entry-coin { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 22px; border: 5px solid #adf9c6; border-radius: 50%; background: var(--green); color: #127e34; font-size: 35px; font-weight: 800; box-shadow: inset 0 0 0 2px #36b960; }
.entry-title { font-size: 24px; line-height: 1.2; font-weight: 800; margin-bottom: 12px; }
.entry-body { font-size: 13px; line-height: 1.75; color: #e4e9e5; }
.entry-body small { display: block; font-size: 10px; line-height: 1.7; color: #b7c1b9; margin-top: 11px; }
.credit-dialog { background: #fff; color: #202922; }
.credit-dialog .entry-body { color: #78867c; font-size: 12px; }
.credit-dialog .entry-title { font-size: 23px; }
.credit-value { color: #13aa47; font-size: 40px; font-weight: 800; line-height: 1.2; margin: 14px 0 10px; letter-spacing: -1px; }
.credit-dialog .progress-label { font-size: 10px; margin-top: 22px; }
.credit-dialog .reward-caption { color: #829087; margin-top: 13px; }
.dialog-actions { display: grid; gap: 10px; margin-top: 24px; }
.dialog-actions .btn { width: 100%; }
.dialog-actions .btn.muted { background: transparent; color: #adbbae; min-height: 42px; font-size: 11px; }
.credit-dialog .dialog-actions .btn.muted { color: #839087; }
.close-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #88928b; font-size: 26px; line-height: 1; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 94px; transform: translateX(-50%); width: max-content; max-width: min(390px, calc(100% - 40px)); padding: 12px 17px; border-radius: 9px; background: #27382c; color: #f3fff6; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 25px #0003; text-align: center; }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px; background: transparent; color: #939c96; font-size: 10px; }
.sound-toggle[aria-pressed="true"] { color: #159d43; }
.sound-toggle svg { width: 17px; height: 17px; }
.sound-toggle > span[aria-hidden] { font-size: 17px; }

@media (max-width: 370px) {
  .app-header { padding-inline: 12px; gap: 6px; }
  .header-left { gap: 4px; }
  .header-left > a, .header-brand, .app-logo { font-size: 20px; }
  .header-wallet { padding-right: 7px; gap: 4px; font-size: 11px; }
  .header-wallet .balance-label { display: none; }
  .page { padding-inline: 12px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-copy { width: 68%; }
  .hero-phone { right: -35px; }
  .milestones { gap: 6px; padding-inline: 13px; }
  .milestone-icon { width: 40px; height: 40px; }
  .milestones > * { font-size: 11px; }
  .milestones small { font-size: 10px; }
  .task-card, .evaluation-card { padding: 14px; }
  .rating-grid { gap: 5px; }
  .rating-option { min-height: 58px; }
  .balance-ticket { padding-inline: 16px; }
  .ticket-divider { margin-inline: -16px; }
  .ticket-balance { font-size: 34px; }
  .ticket-coin { width: 65px; height: 65px; font-size: 28px; }
  .white-card { padding: 17px; }
  .entry-dialog, .credit-dialog { width: calc(100% - 38px); padding: 27px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .btn:not(:disabled):active { transform: none; }
}

/* Final mobile application markup. */
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: none; }
.brand-logo { display: inline-flex; align-items: center; gap: 5px; font-size: 22px; font-weight: 750; letter-spacing: -.8px; line-height: 1; white-space: nowrap; }
.brand-logo > svg { width: 27px; height: 27px; flex: none; color: #13b74b; }
.brand-logo > span { font-size: inherit; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 40px; padding: 5px; color: #343b36; background: transparent; border-radius: 50%; flex: none; }
.icon-button svg { width: 23px; height: 23px; color: inherit; }
.header-left > a.icon-button { width: 29px; margin-left: -6px; }
.header-left { gap: 5px; }
.header-title { font-size: 16px; font-weight: 750; letter-spacing: -.25px; line-height: 1.2; }
.header-wallet { gap: 5px; padding-inline: 9px; }
.header-wallet small { color: #15a345; font-size: 10px; }
.sound-toggle { min-width: 32px; padding-inline: 5px; }
.sound-toggle svg { width: 16px; height: 16px; }
.coin { position: relative; width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border: 4px solid #a9f6c2; background: #2bdd6c; border-radius: 50%; color: #12803a; box-shadow: inset 0 0 0 2px #3abf6c, 0 3px 0 #189a48; font-size: 34px; font-weight: 800; }
.coin > span { position: relative; z-index: 1; }
.coin::before { content: ''; position: absolute; inset: 5px; border: 1px solid #8defb0; border-radius: 50%; }
.coin.small { width: 30px; height: 30px; border-width: 2px; font-size: 15px; flex: none; box-shadow: inset 0 0 0 1px #3abf6c, 0 2px 0 #189a48; }
.coin.small::before { inset: 3px; }
.ticket-coin { width: 82px; height: 82px; border: 0; background: transparent; padding: 0; box-shadow: none; }
.ticket-coin > .coin { font-size: 36px; }
.entry-coin { padding: 0; border: 0; background: transparent; box-shadow: none; }
.entry-coin > .coin { font-size: 36px; }
.hero-phone { background: #17291d; padding: 18px 10px 12px; overflow: visible; }
.hero-phone::before { display: none; }
.hero-phone::after { content: ''; position: absolute; left: auto; right: -19px; bottom: 10px; width: 29px; height: 80px; border: 2px solid #d89d78; border-radius: 17px 17px 15px 12px; background: #efbb93; transform: rotate(8deg); box-shadow: -1px 2px 0 #bf875d; z-index: 3; }
.phone-speaker { position: absolute; width: 34px; height: 4px; background: #08180c; top: 5px; left: calc(50% - 17px); border-radius: 4px; }
.hero-phone > svg { display: block; width: 18px; height: 18px; color: #21d760; margin-bottom: 8px; }
.phone-album { position: relative; height: 88px; padding: 12px 8px; overflow: hidden; background: #b4cb8e; color: #27482d; border-radius: 5px; }
.phone-album > span { position: relative; z-index: 2; display: block; font-size: 19px; font-weight: 800; line-height: .95; letter-spacing: -.7px; }
.phone-album > i { position: absolute; width: 80px; height: 80px; right: -22px; top: 1px; border: 1px solid #628d5f; border-radius: 50%; transform: rotate(-25deg); background: #d6e7b2; }
.phone-album > i::after { content: ''; position: absolute; inset: 9px; border: 1px solid #75996e; border-radius: 50%; }
.phone-lines { width: 56px; height: 3px; background: #d4edd4; border-radius: 3px; margin-top: 10px; box-shadow: 0 7px 0 #618068; }
.phone-play { width: 23px; height: 23px; border-radius: 50%; background: #24d86c; color: #173c24; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 11px; right: 12px; }
.phone-play svg { width: 13px; height: 13px; }
.hero-copy > span.reward-caption { display: block; text-align: left; font-size: 10px; color: #10572c; }
.milestone-icon svg { width: 24px; height: 24px; }
.hero-action .progress-label { margin-top: 18px; color: #145b2e; font-size: 10px; }
.hero-action .reward-caption { margin-top: 11px; }
.activity-row > span:nth-child(2) { flex: 1; min-width: 0; }
.activity-row small { display: block; margin-top: 2px; color: #176237; font-size: 10px; }
.activity-status { align-self: center; font-size: 10px; padding: 4px 7px; color: #156a35; background: #19bf53; border-radius: 20px; white-space: nowrap; }
.check-dot svg { width: 12px; height: 12px; }
.timeline-dot svg { width: 11px; height: 11px; }
.home-detail { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: #1b6e39; margin-top: 14px; }
.home-detail svg { width: 13px; height: 13px; }
.balance-strip > span:first-child { font-size: 11px; color: #b4c4b9; }
.balance-strip > span:first-child strong { display: block; color: #fff; margin-top: 3px; }
.task-heading { display: block; padding: 0; }
.task-kicker { display: block; color: #88938b; font-size: 10px; letter-spacing: .7px; }
.task-heading h1 { margin-top: 6px; font-size: 20px; }
.task-reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; margin-top: 12px; }
.task-reward > span { font-size: 10px; font-weight: 500; }
.task-reward strong { font-size: 12px; }
.task-reward small { font-size: 10px; font-weight: 400; margin-left: 2px; }
.track-art { background: #b4cb8e; color: #25452c; aspect-ratio: 1.05; }
.track-art-label { position: absolute; top: 17px; left: 18px; color: #375e3e; font-size: 10px; letter-spacing: 1.1px; z-index: 3; }
.art-orbit { position: absolute; width: 135%; height: 72%; left: -30%; top: 25%; border: 1px solid #608357; border-radius: 50%; transform: rotate(-25deg); z-index: 1; }
.art-orbit::before, .art-orbit::after { content: ''; position: absolute; border: 1px solid #608357; border-radius: 50%; inset: 14px; }
.art-orbit::after { inset: 28px; }
.track-art-title { position: absolute; z-index: 3; bottom: 22px; left: 20px; color: #294c30; font-size: 49px; font-weight: 800; line-height: .92; letter-spacing: -2px; }
.track-art-logo { top: auto; left: auto; right: 16px; bottom: 17px; }
.track-art-logo > svg { width: 27px; height: 27px; color: #385f3f; }
.audio-player-main { min-width: 0; flex: 1; }
.audio-player-main > strong { display: block; color: #344539; font-size: 12px; line-height: 1.3; }
.audio-player-main > span { display: block; color: #8b968e; font-size: 10px; margin-top: 2px; }
.audio-player-main .audio-progress { margin-top: 7px; width: 100%; height: 3px; }
.mock-top > svg { width: 24px; height: 24px; color: #24d96a; }
.mock-top > span { flex: 1; font-size: 13px; }
.mock-albums { display: flex; gap: 12px; margin-top: 16px; }
.mock-albums .mock-cover { position: relative; width: calc(50% - 6px); height: 110px; border-radius: 5px; overflow: hidden; align-items: flex-end; justify-content: flex-start; padding: 12px; font-size: 17px; font-weight: 800; line-height: 1.05; }
.mock-albums .mock-cover::after { content: ''; position: absolute; width: 85px; height: 85px; border: 1px solid #3e654d; border-radius: 50%; top: -23px; right: -18px; }
.mock-albums .mock-cover.purple { background: #b4a1d0; color: #42304f; }
.app-mock > h3 { font-size: 13px; margin-top: 18px; }
.mock-small-art { display: block; width: 35px; height: 35px; border-radius: 4px; background: #e5b56d; flex: none; }
.mock-row > span:nth-child(2) { flex: 1; color: #e4eae5; font-size: 11px; line-height: 1.4; }
.mock-row > span:nth-child(2) > small { display: block; margin-top: 4px; font-size: 10px; color: #8eaa97; }
.mock-row > svg { width: 15px; height: 15px; }
.question-number { color: #8f9b92; font-size: 10px; margin-bottom: 7px; font-weight: 600; letter-spacing: .7px; }
.question-description { font-size: 12px; color: #8b958e; line-height: 1.7; }
.form-fields, .form-fields > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; width: 100%; }
.form-fields[disabled] { opacity: .42; }
.form-fields[disabled] textarea, .form-fields[disabled] label { cursor: not-allowed; }
.rating-fieldset > .choice-option { margin-top: 14px; }
.star svg { width: 22px; height: 22px; }
.note-label + textarea { width: 100%; }
.locked-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 19px 14px; margin-top: 15px; }
.locked-card > strong { font-size: 13px; color: #59675e; }
.locked-card > span:last-child { font-size: 11px; color: #94a197; line-height: 1.6; }
.locked-card .locked-icon { margin: 0; }
.reward-line { justify-content: flex-start; }
.reward-line > span:nth-child(2) { display: block; flex: 1; color: #4d6f57; font-size: 11px; }
.reward-line small { display: block; color: #9ba59e; font-size: 10px; margin-top: 3px; }
.question-footer { display: block; font-size: 10px; color: #939e96; line-height: 1.7; text-align: center; margin-top: 14px; }
.next-task { display: flex; align-items: center; gap: 13px; }
.next-task-art { width: 55px; height: 55px; background: #a7bc9b; border-radius: 7px; }
.next-task > div:nth-child(2) { flex: 1; }
.next-task > div:nth-child(2) > span { display: block; font-size: 11px; margin-top: 5px; }
.next-task > svg { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); padding: 0; opacity: 1; filter: none; color: #708276; }
.cashout-method-icons { padding-top: 0; margin-bottom: 15px; gap: 12px; }
.cashout-method-icons > span { display: inline-flex; gap: 5px; color: #86958b; }
.cashout-method-icons svg { width: 15px; height: 15px; }
.btn-caption { font-size: 10px; color: #1b6333; font-weight: 500; padding: 3px 6px; border: 1px solid #16ad48; border-radius: 4px; margin-left: 3px; }
.white-card > .btn + p { margin-top: 13px; margin-bottom: 0; line-height: 1.75; font-size: 11px; }
.text-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 12px 6px; margin-top: 7px; background: transparent; color: #84948a; font-size: 11px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; text-align: center; }
.feature-card { width: 100%; text-align: left; }
.feature-card > span:nth-child(2) { min-width: 0; flex: 1; }
.feature-card small { display: block; margin-top: 4px; color: #9ba69e; font-size: 10px; line-height: 1.7; }
.feature-card > svg { width: 17px; height: 17px; color: #a4b0a8; }
.feature-icon > svg { width: 25px; height: 25px; }
.selected-method { display: flex; align-items: center; gap: 11px; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #edf2ee; }
.selected-method > strong { flex: 1; min-width: 0; font-size: 13px; }
.detail-field { display: block; color: #849389; font-size: 11px; }
.detail-field > input { margin-top: 7px; }
.summary-list { width: 100%; margin: 15px 0 21px; padding: 0; border: 0; }
.summary-list dt, .summary-list dd { margin: 0; }
.summary-list .summary-row:last-child { border-bottom: 0; }
.summary-row dd { overflow-wrap: anywhere; }
.sheet-disclosure { font-size: 12px; color: #526359; line-height: 1.75; margin: 17px 0 0; }
.sheet-dialog { top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); margin: 0; width: 100%; max-width: 430px; }
.sheet-header .icon-button { width: 40px; height: 40px; min-width: 40px; display: flex; }
.sheet-header > .icon-button:first-child { margin-left: -8px; }
.timeline-step small { display: block; color: #94a097; font-size: 11px; line-height: 1.75; margin-top: 4px; }
.status-icon svg { width: 14px; height: 14px; }
.activation-ring { margin-top: 24px; }
.activation-ring.ready { background: #def8e7; border-color: #80e8a3; }
.activation-ring svg { width: 33px; height: 33px; }
.step-offer { margin-top: 0; background: #fff; border-radius: 14px; padding: 19px 16px 17px; }
.offer-status { display: flex; justify-content: space-between; font-size: 10px; padding: 6px 9px; border-radius: 6px; margin-bottom: 23px; }
.offer-heading { text-align: center; margin-bottom: 22px; }
.offer-heading h1 { font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 0 0 12px; }
.offer-heading h2 { font-size: 15px; line-height: 1.4; margin-bottom: 11px; }
.offer-heading p { font-size: 12px; font-weight: 400; color: #93a098; line-height: 1.75; margin-bottom: 0; }
.offer-heading .success-coin { width: 72px; height: 72px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.success-coin > svg { width: 34px; height: 34px; }
.offer-balance { padding: 17px 10px; background: #ecfaf1; border: 1px solid #d4f0df; border-radius: 10px; text-align: center; }
.offer-balance > span { font-size: 10px; color: #77a888; font-weight: 600; }
.offer-balance .offer-amount { margin-block: 8px 4px; font-size: 38px; }
.offer-balance > small { color: #86a991; font-size: 10px; }
.step-offer > .white-card:not(.offer-balance) { padding: 0; margin-block: 18px; }
.offer-options { display: grid; gap: 11px; }
.offer-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 15px 12px; text-align: left; margin-top: 0; }
.offer-option > span:nth-child(2) { flex: 1; min-width: 0; }
.offer-option strong { display: block; font-size: 12px; }
.offer-option small { display: block; color: #95a49a; font-size: 10px; margin-top: 5px; }
.offer-option .method-logo { width: 34px; height: 34px; }
.offer-option .choice-dot { margin-left: auto; }
.offer-option.selected .choice-dot { background: var(--green); border-color: var(--green); }
.offer-option.selected .choice-dot::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 800; }
.offer-check { display: flex; align-items: start; gap: 10px; }
.offer-check > svg { width: 18px; height: 18px; color: #22b958; flex: none; }
.offer-check > span { min-width: 0; flex: 1; }
.offer-check strong { display: block; font-size: 12px; color: #5f7868; }
.offer-check small { display: block; color: #93a398; font-size: 10px; line-height: 1.7; margin-top: 4px; }
.offer-disclosure { font-size: 10px; color: #9ba99f; line-height: 1.7; margin-top: 15px; }
.credit-equation { font-size: 14px; color: #788f80; text-align: center; padding: 14px 5px 5px; }
.credit-equation strong { color: #1aa14b; display: block; font-size: 25px; margin-top: 7px; }
.consent-line { display: flex; align-items: start; gap: 10px; font-size: 11px; line-height: 1.7; color: #8c9e92; margin: 20px 0 25px; cursor: pointer; }
.consent-line input { display: block; position: static; opacity: 1; width: 17px; height: 17px; min-width: 17px; margin: 2px 0 0; padding: 0; accent-color: var(--green); cursor: pointer; }
.profile-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #e9f8ee; color: #23af53; margin: 0 auto 20px; }
.profile-icon svg { width: 33px; height: 33px; }
.faq-item { border-bottom: 1px solid #ecf1ee; padding-block: 16px; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { cursor: pointer; font-size: 12px; font-weight: 650; line-height: 1.6; min-height: 30px; }
.faq-item p { color: #8b9b91; font-size: 11px; line-height: 1.8; margin: 10px 0 0; }
.history-row { align-items: start; gap: 10px; }
.history-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #ebf9f0; border-radius: 50%; color: #28b65b; flex: none; }
.history-icon svg { width: 17px; height: 17px; }
.history-row strong { font-size: 11px; }
.history-row p { color: #a0ada4; font-size: 10px; line-height: 1.65; margin: 8px 0 0; overflow-wrap: anywhere; }
.history-row .text-button { font-size: 10px; min-height: 35px; justify-content: flex-start; margin-top: 3px; padding: 8px 0; }
.history-row .positive { color: #14a447; font-size: 11px; margin-top: 3px; }
.entry-disclosure { font-size: 10px; line-height: 1.75; color: #b4c1b7; margin: 15px 0 21px; }
.credit-dialog .entry-disclosure { color: #95a79a; }
.credit-kicker { display: block; font-size: 10px; color: #63b87e; letter-spacing: .7px; font-weight: 650; margin-bottom: 10px; }
.credit-balance { color: #97a69b; font-size: 11px; line-height: 1.6; margin-block: 14px; }
.credit-balance > strong { display: block; color: #4c6a56; font-size: 21px; line-height: 1.4; margin-top: 3px; }

@media (max-width: 370px) {
  .brand-logo { font-size: 20px; gap: 4px; }
  .brand-logo > svg { width: 24px; height: 24px; }
  .header-left > a.icon-button { width: 25px; }
  .header-wallet { padding-inline: 7px; font-size: 10px; }
  .header-wallet small { display: none; }
  .header-actions { gap: 2px; }
  .header-title { font-size: 15px; }
  .track-art-title { font-size: 44px; }
  .ticket-coin { width: 68px; height: 68px; }
  .ticket-coin > .coin { font-size: 30px; }
}

/* Bilingual controls, music selection, and payout previews. */
.prototype-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 8px 4px 11px; text-align: left; }
.prototype-ribbon > span { flex: 1; min-width: 0; max-width: 265px; font-size: 9px; line-height: 1.5; font-weight: 600; }
.language-switcher { display: flex; align-items: center; gap: 2px; flex: none; }
.language-switcher button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 39px; min-height: 36px; padding: 5px 4px; border: 1px solid transparent; background: transparent; color: #698774; border-radius: 6px; font-size: 13px; }
.language-switcher button > span { font-size: 10px; font-weight: 700; }
.language-switcher button[aria-pressed="true"] { color: #177a37; border-color: #b4e6c4; background: #fff; }
.header-left { flex: 1; min-width: 0; }
.header-mark { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 24px; flex: none; color: #16b84c; margin-right: 3px; }
.header-mark svg { width: 23px; height: 23px; }
.header-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.music-catalog { min-width: 0; }
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 18px; }
.catalog-heading h2 { font-size: 16px; font-weight: 750; letter-spacing: -.2px; }
.catalog-heading > span { color: #8d9b92; font-size: 10px; white-space: nowrap; }
.music-filters { display: flex; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; max-width: 100%; margin: 12px 0 14px; padding: 2px 1px 5px; scrollbar-width: thin; scrollbar-color: #d7e6da transparent; }
.music-filter { flex: none; min-height: 35px; padding: 8px 12px; border: 1px solid #e0e7e1; border-radius: 30px; background: #fff; color: #819187; font-size: 11px; white-space: nowrap; }
.music-filter.active { color: #137c36; background: #e5f9ec; border-color: #a4e4b8; font-weight: 700; }
.song-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5e4d8 transparent; padding-right: 3px; padding-bottom: 2px; }
.song-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px; background: #fff; border: 1px solid #edf1ed; border-radius: 8px; text-align: left; }
.song-option.selected { background: #effaf3; border-color: #8fdaa7; }
.song-symbol { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 5px; color: #fff; font-size: 22px; font-weight: 500; }
.song-details { display: block; min-width: 0; flex: 1; }
.song-details strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #34483b; font-size: 12px; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.song-details small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #92a197; line-height: 1.4; }
.song-selected { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; color: #a4b2a8; font-size: 18px; }
.song-option.selected .song-selected { border-radius: 50%; background: #21c35a; color: #fff; font-size: 12px; }
.spotify-player-wrap { margin-top: 18px; border-top: 1px solid #e8eee9; padding-top: 15px; }
.spotify-player-wrap iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #202621; overflow: hidden; }
.player-source { display: block; color: #879c8d; font-size: 10px; line-height: 1.5; margin-bottom: 8px; }
.selected-track-label { color: #99a99e; font-size: 10px; margin: 12px 0 3px; }
.selected-track-name { margin: 0; font-size: 12px; line-height: 1.5; }
.selected-track-name strong { display: block; color: #425b4a; font-size: 12px; overflow-wrap: anywhere; }
.selected-track-name > span { display: block; color: #92a197; font-size: 10px; margin-top: 2px; }
.player-instruction { color: #899b8f; font-size: 11px; line-height: 1.7; margin: 13px 0 5px; }
.spotify-external { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 9px 0; color: #159b43; font-size: 11px; font-weight: 650; }
.spotify-external > span { font-size: 15px; }
.player-fallback { color: #a1ada5; font-size: 10px; line-height: 1.7; margin: 2px 0 13px; }
.spotify-player-wrap > .btn { min-height: 46px; font-size: 12px; }
.provider-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font-size: 22px; font-weight: 800; font-style: italic; line-height: 1; }
.provider-mark.cash-app { background: #00c75b; font-style: normal; }
.provider-mark.paypal { background: #123984; }
.provider-mark.venmo { background: #2587cb; }
.provider-mark.zelle { background: #6d1ed1; font-style: normal; }
.method-logo:has(.provider-mark) { background: transparent; }
.cashout-method-icons { flex-wrap: wrap; justify-content: flex-start; gap: 8px 10px; margin-top: 5px; }
.payout-brand-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; border: 1px solid #edf2ee; border-radius: 20px; padding: 3px 7px 3px 4px; font-size: 10px; color: #87998d; white-space: nowrap; }
.cashout-method-icons .payout-brand-chip > .provider-mark { width: 17px; height: 17px; min-height: 17px; font-size: 12px; }
.cashout-method-icons .payout-brand-chip > svg { width: 16px; height: 16px; min-height: 16px; color: #42b96a; }
.reviewed-track { color: #579a6a !important; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 370px) {
  .prototype-ribbon { gap: 6px; padding-left: 9px; }
  .prototype-ribbon > span { font-size: 9px; max-width: 218px; }
  .language-switcher button { min-width: 37px; padding-inline: 3px; }
  .header-mark { width: 20px; margin-right: 1px; }
  .header-mark svg { width: 20px; height: 20px; }
  .header-title { font-size: 14px; }
  .song-option { padding: 7px; gap: 8px; }
  .catalog-heading h2 { font-size: 15px; }
}
.dialog-language-bar { display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1; }
.entry-dialog > .dialog-language-bar, .credit-dialog > .dialog-language-bar { margin: -13px -12px 15px; min-height: 30px; }
.dialog-language-bar .language-switcher { gap: 3px; }
.dialog-language-bar .language-switcher button { min-width: 39px; min-height: 30px; padding-block: 4px; }
.entry-dialog:not(.credit-dialog) .dialog-language-bar .language-switcher button { background: #39413b; color: #d7e8db; border-color: #526858; }
.entry-dialog:not(.credit-dialog) .dialog-language-bar .language-switcher button[aria-pressed="true"] { background: #edf9ef; color: #167b36; border-color: #bbe9c6; }
.credit-dialog .dialog-language-bar .language-switcher button { background: #f4f8f4; color: #879e8d; border-color: #e3ece5; }
.credit-dialog .dialog-language-bar .language-switcher button[aria-pressed="true"] { background: #e9f8ed; color: #17843b; border-color: #b5e3c2; }
.sheet-dialog > .dialog-language-bar { margin: 0; padding: 8px 16px 4px; min-height: 42px; background: #fff; border-radius: 18px 18px 0 0; }
.sheet-dialog > .dialog-language-bar + .sheet-header { min-height: 55px; padding-top: 6px; }

/* One review at a time, presented above the session summary. */
dialog.review-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; width: calc(100% - 20px); max-width: 420px; max-height: 88dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 22px; padding: 0; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 22px 70px #0005; scrollbar-width: thin; scrollbar-color: #cfe6d5 #fff; }
.review-dialog::backdrop { background: #07160da8; backdrop-filter: blur(5px); }
.review-dialog > .dialog-language-bar { margin: 0; min-height: 40px; padding: 7px 13px 2px; background: #fff; border-radius: 20px 20px 0 0; }
.review-dialog .dialog-language-bar .language-switcher button { color: #71877a; background: #f4f8f5; border-color: #e2ebe5; }
.review-dialog .dialog-language-bar .language-switcher button[aria-pressed="true"] { color: #147c35; background: #eaf9ef; border-color: #aaddb8; }
.review-popup-content { min-width: 0; padding: 12px 18px 18px; }
.review-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 14px; }
.review-dialog > .review-modal-header { padding: 10px 18px 0; }
.review-modal-header h2 { margin: 0; min-width: 0; color: #17271c; font-size: 18px; font-weight: 750; line-height: 1.3; letter-spacing: -.25px; }
.review-modal-header .icon-button, .review-modal-header .close-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 10px; flex: none; margin: -5px -8px -5px 0; color: #809187; background: #f5f8f5; border-radius: 50%; }
.review-modal-header .icon-button svg, .review-modal-header .close-button svg { width: 20px; height: 20px; }
.review-modal-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8b9c90; font-size: 10px; line-height: 1.5; margin: 0 0 16px; }
.review-modal-progress > span { min-width: 0; }
.review-modal-progress > strong { flex: none; text-align: right; font-size: 11px; }
.review-modal-progress > strong small { font-size: 10px; }
.review-modal-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-modal-progress .progress-label { font-size: 10px; margin-bottom: 7px; }
.review-modal-progress .progressbar { height: 5px; margin: 7px 0 0; background: #e6f1e9; border-radius: 6px; }
.review-track-info { min-width: 0; margin-bottom: 12px; }
.review-track-info strong, .review-track-title { display: block; color: #1a3322; font-size: 19px; font-weight: 750; line-height: 1.28; overflow-wrap: anywhere; }
.review-track-info small, .review-track-info > span, .review-track-artist { display: block; color: #8a9d90; font-size: 12px; line-height: 1.5; margin-top: 5px; overflow-wrap: anywhere; }
.review-player { min-width: 0; margin-top: 12px; }
.review-player iframe { display: block; width: 100%; max-width: 100%; height: 152px; border: 0; border-radius: 12px; background: #202621; }
.review-dialog .spotify-player-wrap { margin: 0; padding: 0; border: 0; }
.review-dialog .player-source { margin-bottom: 8px; font-size: 10px; }
.review-dialog .player-instruction { margin-top: 10px; font-size: 11px; line-height: 1.6; }
.review-dialog .player-fallback { margin-bottom: 11px; font-size: 10px; line-height: 1.6; }
.review-dialog .spotify-external { min-height: 40px; }
.review-dialog [data-listened] { min-height: 44px; font-size: 12px; }
.review-question { min-width: 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6eee8; }
.review-question h3, .review-question .question-title { margin: 0; color: #243d2c; font-size: 18px; line-height: 1.35; letter-spacing: -.2px; }
.review-question .question-description { margin: 8px 0 13px; font-size: 12px; line-height: 1.65; }
.review-dialog .form-fields, .review-dialog .form-fields > fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.review-dialog .rating-grid { margin-top: 14px; }
.review-dialog .rating-option { min-height: 68px; }
.review-dialog .choice-option { min-height: 48px; }
.review-dialog .note-label { margin-top: 17px; font-size: 11px; }
.review-dialog textarea { display: block; width: 100%; min-height: 78px; resize: vertical; font-size: 16px; line-height: 1.6; }
.review-dialog .reward-line { margin-top: 14px; padding-block: 13px; }
.review-dialog [type="submit"] { width: 100%; min-height: 50px; position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -8px 18px #fff, 0 -1px 0 #edf2ee; }
.review-modal-footer { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #edf2ee; color: #91a096; font-size: 11px; line-height: 1.65; text-align: center; }
.review-app-context .app-mock { margin-top: 12px; padding: 15px; }
.review-app-context .mock-albums { margin-bottom: 14px; }
.review-app-context .mock-cover { min-height: 100px; }
.review-underlay { margin-top: 4px; padding: 25px 20px; text-align: center; }
.review-underlay h1 { margin: 0; color: #213b29; font-size: 24px; line-height: 1.2; letter-spacing: -.35px; }
.review-underlay > p { margin: 12px 0 18px; color: #879b8e; font-size: 12px; line-height: 1.75; }
.review-session-summary { margin: 20px 0; padding: 18px; background: #edf9f1; border: 1px solid #d5eede; border-radius: 13px; text-align: left; }
.review-session-summary > span, .review-session-summary > small { display: block; color: #8caa97; font-size: 11px; line-height: 1.6; }
.review-session-summary > strong { display: block; margin-top: 5px; color: #17a54a; font-size: 32px; line-height: 1.2; letter-spacing: -.8px; }
.review-session-summary .progress-label { margin-top: 17px; }
.review-underlay .btn { min-height: 48px; }
@media (max-width: 370px) {
  dialog.review-dialog { width: calc(100% - 18px); border-radius: 17px; max-height: 94dvh; }
  .review-popup-content { padding-inline: 15px; }
  .review-modal-header h2 { font-size: 17px; }
  .review-track-info strong, .review-track-title { font-size: 18px; }
  .review-question h3, .review-question .question-title { font-size: 17px; }
  .review-dialog .rating-grid { gap: 5px; }
  .review-dialog .rating-option { min-height: 64px; }
}

/* Clearer review guidance and a brief, lightweight completion reward. */
.hero-action { padding-top: 24px; }
.wallet-method-hint { margin: 8px 0 18px; color: #526359; font-size: 13px; line-height: 1.6; }
.legal-footer p, .review-modal-footer, .offer-disclosure, .sheet-disclosure { color: #526359; font-size: 12px; line-height: 1.65; }
.review-question .question-description { color: #526359; font-size: 13px; }
.review-dialog .note-label { font-size: 13px; }
.review-dialog .note-label span { color: #526359; font-size: 12px; }
.review-dialog textarea { font-size: 16px; }
.review-form-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 34px; margin: 9px 0 12px; color: #526359; font-size: 11px; line-height: 1.5; }
#review-word-count { flex: none; font-variant-numeric: tabular-nums; }
#review-help.ready { color: #087d36; }
.review-dialog .form-fields:disabled textarea { background: #f3f6f4; }
.review-modal-progress { color: #526359; }
.review-dialog .review-modal-header { margin-bottom: 2px; }
.credit-dialog { overflow-x: hidden; }
.credit-dialog .entry-coin { margin-bottom: 16px; }
.credit-dialog .credit-kicker { color: #087d36; font-size: 10px; letter-spacing: 1px; }
.credit-dialog .entry-title { margin-top: 9px; }
.credit-dialog .entry-disclosure { color: #526359; font-size: 12px; }
.credit-dialog .credit-value { font-variant-numeric: tabular-nums; }
.credit-steps { display: flex; justify-content: center; gap: 6px; margin: 20px auto 8px; }
.credit-steps > span { width: 25px; height: 5px; border-radius: 10px; background: #e5ede8; }
.credit-steps > .complete { background: #1ed760; }
.credit-sound-toggle { margin: 10px auto -10px; min-width: 44px; min-height: 44px; }
.reward-shower, .reward-shower[popover] { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; pointer-events: none; user-select: none; }
.reward-shower::backdrop { background: transparent; pointer-events: none; }
.reward-shower > i { position: absolute; top: -12px; display: block; width: 5px; height: 9px; border-radius: 1px; opacity: 0; pointer-events: none; will-change: transform, opacity; animation: reward-fall var(--duration, 760ms) ease-in both; }
.reward-shower > i:nth-child(3n) { width: 5px; height: 5px; border-radius: 50%; }
.reward-celebrating .entry-coin { animation: reward-coin 480ms ease-out; }
@keyframes reward-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  8% { opacity: 1; }
  85% { opacity: .85; }
  100% { opacity: 0; transform: translate3d(var(--sway), 105vh, 0) rotate(var(--turn)); }
}
@keyframes reward-coin {
  0% { transform: scale(.9); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reward-shower { display: none; }
  .reward-celebrating .entry-coin { animation: none; }
}

/* The language selector remains in the top bar without a repeated notice. */
.prototype-ribbon { justify-content: flex-end; min-height: 42px; }

/* Payout method list */
.methods-body { padding: 0; max-height: 60vh; }
.methods-body .method-row { gap: 0; min-height: 0; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.methods-body .method-row:active { background: #f9f9f9; }
.methods-body .method-logo { width: 36px; height: 36px; margin-right: 16px; border-radius: 0; background: transparent; }
.methods-body .method-logo svg { width: 36px; height: 36px; }
.methods-body .method-logo .provider-mark { width: 36px; height: 36px; }
.methods-body .method-logo-img { width: 36px; height: 36px; object-fit: contain; display: block; }
.methods-body .method-text strong { font-size: 15px; font-weight: 600; }
.methods-body .method-text small { font-size: 13px; margin-top: 2px; line-height: 1.4; }
.methods-body .currency { font-size: 13px; margin-right: 4px; }
.methods-body .chevron { padding: 0; display: flex; }
.methods-body .chevron svg { width: 18px; height: 18px; }
.methods-body .sheet-disclosure { margin: 8px 0 0; padding: 0 20px 24px; font-size: 12px; }
.methods-disclosure { color: #8a8a8a; line-height: 1.5; }

/* ── Verify / upsell-1 page ── */
.verify-page { display:flex; flex-direction:column; gap:12px; padding-bottom:40px; }
.verify-card { padding:18px 20px; }
.verify-title { font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.01em; margin:0 0 8px; }
.verify-body { font-size:14px; line-height:1.6; color:#5a6a5c; margin:0; }
.verify-action { display:flex; flex-direction:column; align-items:center; gap:8px; }
.verify-action .btn { border-radius:14px; height:60px; font-size:17px; font-weight:800; letter-spacing:-0.01em; }
.verify-hint { font-size:13px; font-weight:500; color:#7a8a7c; margin:0; }
@keyframes verify-glow-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(30,215,96,.35); }
  50% { box-shadow:0 6px 22px 6px rgba(30,215,96,.22); }
}
.verify-btn-glow { animation:verify-glow-pulse 2.4s ease-in-out infinite; }
.verify-progress-card { padding:24px 20px 20px; }
.verify-ring-wrap { position:relative; width:168px; height:168px; margin:0 auto 20px; }
.verify-ring-svg { width:100%; height:100%; }
.verify-ring-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.verify-pct-num { font-size:34px; font-weight:800; line-height:1; letter-spacing:-0.02em; }
.verify-pct-unit { font-size:16px; font-weight:700; color:#7a8a7c; }
.verify-status-lbl { font-size:12px; font-weight:600; letter-spacing:-0.01em; color:#7a8a7c; }
.verify-status-lbl.done { color:#121212; }
.verify-dots { display:flex; gap:4px; margin-top:4px; }
.verify-dots span { width:6px; height:6px; border-radius:50%; background:#1ed760; animation:verify-dot-pulse 1s ease-in-out infinite; }
.verify-dots span:nth-child(2) { animation-delay:.15s; }
.verify-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes verify-dot-pulse { 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }
.verify-steps { list-style:none; margin:0; padding:0; border-top:1px solid #edf0ed; }
.verify-step { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #edf0ed; font-size:13px; }
.verify-step-icon { width:20px; height:20px; min-width:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:#f0f2f0; color:#8a9a8c; }
.verify-step.done .verify-step-icon { background:rgba(30,215,96,.15); color:#1ed760; }
.verify-step-label { flex:1; color:#8a9a8c; }
.verify-step.done .verify-step-label { font-weight:600; color:#121212; }
.verify-step-status { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#8a9a8c; }
.verify-done-badge { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; }
.verify-done-icon { width:24px; height:24px; min-width:24px; border-radius:50%; background:#3bbf72; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.verify-done-title { font-size:15px; font-weight:700; letter-spacing:-0.01em; margin:0 0 4px; }
.verify-done-body { font-size:13px; line-height:1.5; color:#5a6a5c; margin:0; }
.verify-offer-card { padding:20px; }
.verify-offer-title { font-size:15px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; }
.verify-offer-body { font-size:13px; line-height:1.5; color:#5a6a5c; margin:0 0 16px; }
.verify-offer-card .btn { border-radius:14px; height:56px; font-size:16px; font-weight:800; letter-spacing:-0.01em; }
.verify-no { display:block; text-align:center; padding:12px 0 4px; font-size:14px; }
.verify-warn-card { padding:18px 20px; }
.verify-warn-row { display:flex; align-items:flex-start; gap:12px; }
.verify-warn-icon { width:24px; height:24px; min-width:24px; border-radius:50%; background:rgba(220,38,38,.1); color:#dc2626; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.verify-warn-head { font-size:14px; font-weight:700; line-height:1.35; margin:0 0 8px; }
.verify-warn-text { font-size:14px; line-height:1.6; color:#5a6a5c; margin:0 0 6px; }