/* Sóng Âm — a soft, stitched keepsake. State and API hooks stay in nhan.js. */
.nhan-page { min-height: 100vh; display: flex; flex-direction: column; }
.recipient-header { width: min(1192px, 100%); margin: 0 auto; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-row { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--color-text); flex: none; }
.brand-row .mark { width: 42px; height: 42px; background: var(--color-primary); color: var(--color-on-primary); border-radius: 14px 14px 14px 4px; display: grid; place-items: center; }
.brand-wordmark { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.045em; }
.brand-byline { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 10px; line-height: 1.4; font-weight: 400; letter-spacing: .07em; }
.header-note { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 12px; }
.header-note svg { width: 15px; height: 15px; color: var(--color-primary); }
.nhan-page > main { flex: 1; }
.nhan-screen { width: min(680px, 100%); margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100svh - 99px); padding: 0 32px 40px; animation: arrive 380ms ease-out both; }
#viewStart { width: min(1192px, 100%); padding: 28px 40px 26px; min-height: calc(100svh - 99px); }
.intro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; flex: 1; padding: 28px 0 40px; }
.intro-copy { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--color-primary-strong); font-size: 10px; line-height: 1.6; font-weight: 600; letter-spacing: .13em; }
.eyebrow > span { font-size: 15px; }
.hero { text-align: left; }
.hero h1 { margin-top: 22px; font-size: clamp(36px, 3.8vw, 50px); line-height: 1.25; letter-spacing: -.055em; font-weight: 600; }
.hero h1 em, .listen-heading h1 em { font-family: var(--font-family-base); font-weight: 500; letter-spacing: -.055em; color: var(--color-primary); }
.hero p { max-width: 465px; margin-top: 23px; font-size: 15px; line-height: 1.9; }
.cta-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 12px; margin-top: 31px; }
.cta-stack .btn { min-height: 54px; padding: 0 16px; border-radius: 14px; font-size: 14px; }
.cta-stack #btnStartCode { grid-column: 1 / -1; justify-content: flex-start; padding: 4px 0; min-height: 44px; border-radius: 6px; background: none; color: var(--color-text-muted); font-size: 12px; font-weight: 400; gap: 6px; }
.code-link-label { color: var(--color-primary-strong); font-weight: 600; }
#btnStartCode:hover .code-link-label { text-decoration: underline; text-underline-offset: 4px; }
.tips-card { display: flex; flex-direction: column; gap: 9px; margin-top: 21px; padding-top: 21px; border-top: 1px solid var(--color-border); }
.tip-row { display: flex; gap: 9px; align-items: flex-start; }
.tip-row svg { flex: none; color: var(--color-primary); margin-top: 1px; width: 15px; height: 15px; }
.tip-row .text-caption { font-size: 12px; line-height: 1.8; }
.footnote { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 11px; line-height: 1.8; text-align: left; color: var(--color-text-muted); }
.footnote .privacy-link { display: inline-block; margin-left: 5px; color: var(--color-primary-strong); font-weight: 500; text-underline-offset: 3px; }
/* The illustration is decorative, never a live waveform or a scan result. */
.keepsake-scene { position: relative; display: grid; place-items: center; min-height: 475px; isolation: isolate; }
.keepsake-scene::before { content: ''; position: absolute; width: 410px; max-width: 92%; aspect-ratio: 1; background: var(--color-primary-soft); border-radius: 48% 52% 56% 44% / 44% 44% 56% 56%; z-index: -2; }
.scene-orbit { position: absolute; width: 92%; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; z-index: -1; }
.scene-orbit-one { transform: rotate(-25deg) scaleX(1.08) scaleY(.84); }
.scene-orbit-two { transform: rotate(25deg) scaleX(1.08) scaleY(.84); }
.keepsake-card { width: min(370px, 86%); padding: 15px; border: 1px solid #e2becb; border-radius: 21px; background-color: #fffdfb; background-image: repeating-linear-gradient(90deg, transparent 0 3px, #e8d9d11c 3px 4px), repeating-linear-gradient(0deg, transparent 0 3px, #e8d9d130 3px 4px); transform: rotate(-7deg); transition: transform 420ms var(--ease-emphasized); }
.keepsake-scene:hover .keepsake-card { transform: rotate(-3deg) translateY(-4px); }
.keepsake-stitches { position: relative; min-height: 240px; border: 1px dashed #ca8b9e; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 29px 24px 20px; gap: 23px; }
.keepsake-label { color: #855567; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.hero-wave { width: 100%; color: var(--color-primary); }
.hero-wave svg { width: 100%; height: 72px; }
.keepsake-handwritten { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: #875268; font-size: 16px; }
.keepsake-heart { position: absolute; width: 52px; height: 48px; right: -30px; bottom: 12px; color: var(--color-primary); transform: rotate(21deg); }
.keepsake-tag { position: absolute; top: 44px; right: 16px; transform: rotate(8deg); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary-strong); border-radius: 999px; padding: 11px 17px; font-size: 10px; display: inline-flex; align-items: center; gap: 7px; z-index: 2; animation: tag-float 6s ease-in-out infinite; }
.keepsake-tag svg { width: 16px; height: 16px; }
.scene-spark { position: absolute; color: var(--color-primary); line-height: 1; }
.spark-one { top: 86px; left: 20px; font-size: 34px; animation: glimmer 5s ease-in-out infinite; }
.spark-two { bottom: 85px; right: 15px; font-size: 43px; animation: glimmer 5s 1s ease-in-out infinite; }
.spark-three { top: 32px; left: 44%; font-size: 13px; }
.scene-caption { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 37px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--color-primary-strong); font-size: 17px; }
.caption-line { width: 26px; height: 1px; background: currentColor; }
.scene-illustration-note { position: absolute; bottom: 1px; color: var(--color-text-muted); font-size: 9px; }
/* A quiet shared frame for progress, playback and recovery. */
.topbar-min { display: flex; align-items: center; padding: 8px 0 14px; }
.close-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; }
.close-btn:hover { background: var(--color-primary-soft); transform: translateX(-2px); }
.process-center, .fail-center, .code-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; padding: 38px 20px 72px; }
.process-center { border: 1px solid var(--color-border); border-radius: 28px; background: var(--color-surface); margin: 10px 0 32px; }
.proc-wave { width: 100%; max-width: 300px; color: var(--color-wave-theu); }
.steps { display: flex; align-items: center; gap: 10px; }
.step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.step.is-active { color: var(--color-primary); font-weight: 600; }
.step.is-done { color: var(--color-success); }
.step-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex: none; }
.step.is-active .step-dot { background: var(--color-primary-soft); }
.step.is-done .step-dot { background: var(--color-success-soft); }
.step-line { width: 38px; height: 1px; background: var(--color-border); }
.status-text { min-height: 28px; }
.status-text .text-subtitle { font-size: 17px; }
.status-extra { min-height: 20px; color: var(--color-text-muted); font-size: 12px; }
.progress-wrap { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.progress-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); }
.banner__text-btn { background: none; border: none; color: inherit; text-align: left; cursor: pointer; padding: 0; font: inherit; }
#uploadBar { width: 0%; }
.toast-success { display: flex; align-items: center; gap: 8px; background: var(--color-success-soft); color: var(--color-success); padding: 9px 17px; border-radius: 999px; font-size: 12px; font-weight: 500; margin: 10px auto 16px; width: fit-content; transition: opacity var(--duration-base) var(--ease-emphasized); }
.listen-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; padding: 28px 32px 36px; margin: 0 0 20px; border: 1px solid var(--color-border); border-radius: 30px; background: var(--color-surface); }
.listen-heading { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.little-heart { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: 35px; line-height: 1; }
.listen-heading h1 { font-size: 37px; line-height: 1.22; letter-spacing: -.05em; font-weight: 600; }
.listen-heading .text-caption { font-size: 12px; }
.listen-wave-panel { width: 100%; max-width: 400px; padding: 20px 22px 13px; border: 1px dashed #e2becb; border-radius: 17px; background: #fffbfc; }
.listen-wave { width: 100%; color: var(--color-wave-theu); position: relative; }
.time-row { display: flex; justify-content: space-between; width: 100%; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.note-card { width: 100%; max-width: 400px; background: var(--color-primary-soft); border-color: transparent; border-radius: 16px; padding: 17px 22px; text-align: center; }
.note-card .text-caption { font-size: 10px; }
.note-card p { margin-top: 6px; word-break: break-word; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 18px; line-height: 1.6; }
.match-meta { width: 100%; max-width: 400px; text-align: center; font-size: 10px; line-height: 1.7; }
.play-row { display: flex; align-items: center; justify-content: center; gap: 34px; }
.play-main { width: 72px; height: 72px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; outline: 5px solid var(--color-primary-soft); outline-offset: 5px; transition: transform 180ms ease, background-color 180ms ease; }
.play-main:hover { background: var(--color-primary-strong); transform: scale(1.05); }
.play-main:active { transform: scale(.96); }
.play-main:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 5px; }
.side-action { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 48px; background: none; border: none; padding: 0; color: var(--color-text-muted); cursor: pointer; }
.side-action .text-caption { font-size: 10px; }
.side-action .circle { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: background-color 180ms ease; }
.side-action:hover .circle { background: var(--color-primary-soft); }
.listen-home { color: var(--color-primary-strong); font-size: 11px; text-underline-offset: 4px; }
.fail-center { padding-top: 28px; padding-bottom: 50px; }
.fail-center .text-title { font-size: 29px; line-height: 1.4; letter-spacing: -.04em; }
.fail-center .text-body { font-size: 14px; line-height: 1.8; max-width: 390px; }
.fail-icon { width: 92px; height: 92px; border-radius: 32px; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; transform: rotate(-7deg); }
.fail-icon svg { transform: rotate(7deg); }
.reason-chip { display: inline-flex; align-items: flex-start; text-align: left; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 12px 16px; border-radius: 14px; font-size: 12px; line-height: 1.7; }
.reason-chip svg { flex: none; margin-top: 2px; }
.cta-stack-narrow { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 330px; }
.cta-stack-narrow .btn { font-size: 14px; }
.code-wrap { gap: 26px; padding: 25px 28px 54px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 28px; margin: 10px 0 32px; }
.code-wrap > div, .code-wrap form { width: 100%; max-width: 350px; }
.code-wrap .code-keepsake-icon { width: 82px; height: 73px; color: var(--color-primary); }
.code-wrap h1 { margin-top: 11px; font-size: 31px; line-height: 1.4; letter-spacing: -.045em; }
.code-wrap .text-body { font-size: 13px; line-height: 1.8; }
.code-input { width: 100%; min-height: 68px; text-align: center; letter-spacing: .16em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 23px; font-weight: 600; text-transform: uppercase; border-radius: 14px; background: #fffbfc; }
.code-error { color: var(--color-danger); font-size: 12px; line-height: 1.6; min-height: 27px; text-align: left; margin-top: 6px; }
.code-wrap .btn { font-size: 15px; border-radius: 14px; }
.guide-step { display: flex; gap: 12px; align-items: flex-start; }
.guide-num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: 600; font-size: 13px; display: grid; place-items: center; flex: none; }
.browser-chip-row { display: flex; gap: 8px; margin-top: 8px; }
.browser-chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 9px; padding: 6px 10px; font-size: 12px; }
.policy-page { max-width: 760px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; gap: 20px; }
.policy-page > .text-title { font-size: 34px; letter-spacing: -.04em; line-height: 1.35; }
.policy-page h2 { margin-top: 0; }
.policy-page a { color: var(--color-primary-strong); text-underline-offset: 4px; }
.policy-page .card { border-radius: 22px; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tag-float { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-7px); } }
@keyframes glimmer { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@media (min-width: 1600px) { .intro-layout { padding-top: 60px; padding-bottom: 70px; } }
@media (max-width: 980px) { .intro-layout { gap: 25px; } .hero h1 { font-size: 38px; } .cta-stack { grid-template-columns: 1fr; } .cta-stack #btnStartCode { justify-content: center; } .keepsake-card { width: 87%; } .keepsake-tag { right: 0; } .scene-caption { font-size: 14px; } }
@media (max-width: 720px) {
  .recipient-header { padding: 22px 24px; }
  .header-note { font-size: 10px; max-width: 113px; line-height: 1.6; }
  .header-note svg { flex: none; }
  .brand-wordmark { font-size: 21px; }
  .brand-row .mark { width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; }
  #viewStart { padding: 14px 24px 24px; }
  .intro-layout { grid-template-columns: 1fr; gap: 0; padding: 13px 0 25px; }
  .intro-copy { max-width: 490px; margin: 0 auto; }
  .hero { text-align: center; }
  .hero h1 { margin-top: 17px; font-size: clamp(32px, 7.5vw, 43px); line-height: 1.25; }
  .hero p { font-size: 14px; line-height: 1.85; margin: 17px auto 0; }
  .desktop-break { display: none; }
  .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .cta-stack { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); margin-top: 25px; gap: 9px; }
  .cta-stack .btn { padding: 0 10px; font-size: 13px; min-height: 52px; gap: 6px; }
  .cta-stack .btn svg { width: 17px; height: 17px; }
  .cta-stack #btnStartCode { padding-top: 0; padding-bottom: 0; font-size: 11px; min-height: 44px; }
  .tips-card { margin-top: 15px; padding-top: 15px; gap: 7px; }
  .tip-row .text-caption { font-size: 11px; }
  .keepsake-scene { min-height: 340px; width: min(420px, 100%); margin: 20px auto 0; }
  .keepsake-scene::before { width: 300px; }
  .scene-orbit { width: 91%; max-width: 320px; }
  .keepsake-card { width: 265px; padding: 11px; border-radius: 18px; }
  .keepsake-stitches { min-height: 178px; padding: 22px 15px 17px; gap: 17px; border-radius: 10px; }
  .hero-wave svg { height: 48px; }
  .keepsake-handwritten { font-size: 12px; }
  .keepsake-label { font-size: 6px; }
  .keepsake-heart { width: 40px; height: 36px; right: -22px; }
  .keepsake-tag { font-size: 9px; top: 12px; right: 0; padding: 9px 12px; }
  .spark-one { top: 42px; left: 12px; font-size: 25px; }
  .spark-two { bottom: 52px; right: 9px; font-size: 34px; }
  .spark-three { top: 6px; }
  .scene-caption { bottom: 23px; font-size: 14px; }
  .scene-illustration-note { bottom: -2px; font-size: 8px; }
  .footnote { font-size: 10px; line-height: 1.85; text-align: center; }
  .footnote .privacy-link { display: block; margin-left: 0; margin-top: 4px; }
  .nhan-screen { padding: 0 20px 24px; min-height: calc(100svh - 93px); }
  .process-center { padding: 35px 20px 60px; }
  .process-center, .code-wrap { border-radius: 24px; }
  .listen-wrap { padding: 26px 20px 30px; gap: 23px; border-radius: 25px; }
  .listen-heading h1 { font-size: 32px; }
  .listen-heading .text-caption { font-size: 11px; line-height: 1.7; }
  .listen-wave-panel { padding: 15px 15px 12px; }
  .note-card { padding: 16px; }
  .note-card p { font-size: 17px; }
  .code-wrap { padding: 28px 20px 45px; }
}
@media (max-width: 360px) {
  .recipient-header { padding-left: 18px; padding-right: 18px; }
  #viewStart { padding-left: 20px; padding-right: 20px; }
  .header-note { max-width: 95px; font-size: 9px; }
  .hero h1 { font-size: 31px; }
  .cta-stack { grid-template-columns: 1fr; }
  .cta-stack .btn { font-size: 13px; }
  .keepsake-scene { margin-top: 10px; }
  .scene-caption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nhan-screen, .keepsake-tag, .scene-spark { animation: none; }
  .keepsake-card, .play-main, .close-btn, .side-action .circle { transition: none; }
  .keepsake-scene:hover .keepsake-card { transform: rotate(-7deg); }
}