:root {
  color-scheme: light;
  --bg: #f6efe6;
  --paper: #fffaf4;
  --panel: rgba(255, 250, 244, 0.92);
  --line: rgba(78, 49, 25, 0.12);
  --line-strong: rgba(78, 49, 25, 0.2);
  --ink: #201812;
  --muted: #746454;
  --accent: #ad6430;
  --accent-deep: #6f3e1a;
  --green: #2f7a65;
  --gold: #d5a24c;
  --rose: #b4695f;
  --shadow: 0 16px 44px rgba(56, 38, 24, 0.12);
  --font-serif: "Iowan Old Style", "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 8% 0%, rgba(213, 162, 76, 0.18), transparent 26%),
    radial-gradient(circle at 100% 6%, rgba(47, 122, 101, 0.11), transparent 20%),
    linear-gradient(180deg, #fbf6ef 0%, #f0e6d9 54%, #ece1d3 100%);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
}

.app-frame {
  min-height: 100vh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    14px
    calc(env(safe-area-inset-bottom, 0px) + 28px);
}

.topbar {
  display: grid;
  gap: 12px;
}

.brand-kicker,
.eyebrow,
.prompt-label,
.section-head p,
.feedback-head span,
.hero-card span,
.hero-metrics span,
.focus-card span,
.mini-card span,
.share-card span {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  padding: 7px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2b221b, #654024);
  box-shadow: 0 10px 18px rgba(71, 43, 19, 0.22);
}

.brand-mark span {
  border-radius: 999px;
  background: #fff7eb;
}

.brand-mark span:nth-child(1) {
  height: 42%;
}

.brand-mark span:nth-child(2) {
  height: 86%;
  background: var(--gold);
}

.brand-mark span:nth-child(3) {
  height: 58%;
  background: var(--green);
}

.brand-copy strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.26rem;
}

.brand-copy p {
  margin: 4px 0 0;
  color: #665a4c;
  line-height: 1.55;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--accent-deep);
  background: rgba(173, 100, 48, 0.12);
  font-size: 0.86rem;
  font-weight: 800;
}

.status-pill.secondary {
  color: #4d453d;
  background: rgba(32, 24, 18, 0.08);
}

.status-pill.warn {
  color: #8a5a14;
  background: rgba(213, 162, 76, 0.18);
}

.status-pill.error {
  color: #8c3d33;
  background: rgba(180, 105, 95, 0.18);
}

.app-notice {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  color: #4f463e;
  line-height: 1.6;
}

.app-notice.is-subtle {
  color: #6d6054;
  background: rgba(255, 255, 255, 0.52);
}

.app-notice.warn {
  color: #8a5a14;
  background: rgba(213, 162, 76, 0.14);
}

.app-notice.error {
  color: #8c3d33;
  background: rgba(180, 105, 95, 0.14);
}

.view {
  display: none;
  margin-top: 12px;
}

.view.is-active {
  display: block;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.08;
}

h1 {
  margin-top: 10px;
  font-size: clamp(1.86rem, 8.2vw, 2.8rem);
}

#homeTitle {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
}

h2 {
  margin-top: 8px;
  font-size: clamp(1.6rem, 7vw, 2.5rem);
}

#questionTitle {
  margin-top: 4px;
  font-size: clamp(1.18rem, 5.2vw, 1.7rem);
  line-height: 1.12;
}

.lede,
.section-copy,
#summaryText,
#feedbackDescription,
.capture-help,
.question-status,
.brand-copy p,
.hero-card p,
.focus-card p,
.prompt-tip {
  line-height: 1.65;
}

.mobile-hero,
.question-screen,
.result-screen {
  display: grid;
  gap: 14px;
}

.result-screen {
  gap: 16px;
}

.mobile-hero {
  gap: 14px;
  padding: 6px 4px 0;
}

.recorder-panel {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(57, 38, 24, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(97, 67, 43, 0.16), rgba(28, 20, 15, 0.05)),
    linear-gradient(135deg, rgba(255, 247, 236, 0.98), rgba(236, 223, 208, 0.92));
  box-shadow:
    0 20px 38px rgba(50, 33, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(80, 53, 31, 0.08),
    inset 0 -18px 24px rgba(111, 78, 48, 0.05);
}

.recorder-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(91, 61, 35, 0.08);
  border-radius: 22px;
  pointer-events: none;
}

.home-recorder-panel {
  display: grid;
  gap: 14px;
}

.recorder-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.recorder-topline span {
  color: #6f5d4a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
}

.recorder-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: #b65f53;
  box-shadow: 0 0 0 4px rgba(182, 95, 83, 0.14);
}

.recorder-window,
.result-display-window {
  position: relative;
  padding: 18px 16px;
  border: 1px solid rgba(48, 35, 22, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 243, 212, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(89, 62, 32, 0.12), rgba(255, 250, 240, 0.84)),
    #f6eddf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -10px 20px rgba(86, 58, 32, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.18);
}

.recorder-window::after,
.result-display-window::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(86, 58, 32, 0.08);
  border-radius: 18px;
  pointer-events: none;
}

.recorder-meter {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) 44px;
  gap: 6px;
  align-items: end;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid rgba(57, 38, 24, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(244, 236, 224, 0.92), rgba(255, 251, 245, 0.62)),
    rgba(255, 252, 247, 0.58);
  box-shadow:
    inset 0 2px 6px rgba(78, 49, 25, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.recorder-meter span {
  display: block;
  width: 72%;
  justify-self: center;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, rgba(49, 124, 103, 0.92), rgba(213, 162, 76, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 0 rgba(85, 58, 33, 0.08);
}

.recorder-meter span:nth-child(1) { height: 18%; }
.recorder-meter span:nth-child(2) { height: 34%; }
.recorder-meter span:nth-child(3) { height: 48%; }
.recorder-meter span:nth-child(4) { height: 76%; }
.recorder-meter span:nth-child(5) { height: 58%; }
.recorder-meter span:nth-child(6) { height: 68%; }
.recorder-meter span:nth-child(7) { height: 38%; }
.recorder-meter span:nth-child(8) { height: 24%; }

.recorder-meter i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid rgba(39, 25, 16, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #3b2d22, #6a4730);
  box-shadow:
    0 2px 4px rgba(46, 30, 18, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(20, 14, 10, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.recorder-meter i::before {
  content: "rec";
  color: #fff3df;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-meter i::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffd6d0 0 20%, #d85847 48%, #8a2f24 100%);
  box-shadow:
    0 0 0 2px rgba(42, 28, 19, 0.18),
    inset 0 1px 1px rgba(255, 236, 232, 0.36);
}

.tape-window {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid rgba(57, 38, 24, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(244, 236, 224, 0.92), rgba(255, 251, 245, 0.62)),
    rgba(255, 252, 247, 0.58);
  box-shadow:
    inset 0 2px 6px rgba(78, 49, 25, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tape-window::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(87, 60, 34, 0.08);
  border-radius: 12px;
  pointer-events: none;
}

.tape-reel {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(88, 60, 33, 0.14);
  background:
    radial-gradient(circle at center, rgba(91, 63, 36, 0.92) 0 10%, transparent 10%),
    radial-gradient(circle at center, rgba(236, 222, 204, 0.98) 0 24%, rgba(196, 173, 148, 0.82) 24% 26%, transparent 26%),
    radial-gradient(circle at center, rgba(126, 94, 62, 0.28) 0 56%, rgba(241, 231, 218, 0.94) 56% 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.38),
    inset 0 -4px 8px rgba(101, 74, 48, 0.12);
}

.tape-reel::before,
.tape-reel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(114, 83, 54, 0.38);
  transform-origin: center;
}

.tape-reel::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.tape-reel::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.tape-strip {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(74, 60, 48, 0.86), rgba(46, 36, 29, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.24);
}

.tape-strip::before,
.tape-strip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(53, 40, 31, 0.9);
  transform: translateY(-50%);
}

.tape-strip::before {
  left: -8px;
}

.tape-strip::after {
  right: -8px;
}

.tape-rec-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(39, 25, 16, 0.28);
  border-radius: 999px;
  color: #fff3df;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #3b2d22, #6a4730);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 2px 4px rgba(46, 30, 18, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(20, 14, 10, 0.28);
}

.tape-rec-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffd6d0 0 20%, #d85847 48%, #8a2f24 100%);
  box-shadow:
    0 0 0 2px rgba(42, 28, 19, 0.18),
    inset 0 1px 1px rgba(255, 236, 232, 0.36);
}

.hero-card,
.hero-metrics article,
.question-card,
.mini-card,
.result-card,
.feedback-card,
.share-card,
.focus-card,
.status-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero-actions,
.dock-actions,
.feedback-actions {
  display: grid;
  gap: 10px;
}

.primary-action,
.ghost-action,
.record-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  font-weight: 800;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.primary-action {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: 0 14px 28px rgba(111, 62, 26, 0.24);
}

.ghost-action {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
}

.record-action {
  color: #fff;
  background: linear-gradient(135deg, #1f5d4f, var(--green));
  box-shadow: 0 14px 28px rgba(47, 122, 101, 0.24);
}

.primary-action.compact,
.ghost-action.compact {
  min-height: 48px;
}

.primary-action:hover,
.ghost-action:hover,
.record-action:hover {
  transform: translateY(-1px);
}

.hero-actions .primary-action {
  min-height: 58px;
  border-radius: 20px;
  box-shadow:
    0 18px 34px rgba(111, 62, 26, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-actions-inline {
  margin-top: 2px;
}

.hero-actions-inline .primary-action {
  min-height: 56px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(135deg, #79451f, #b06631);
  box-shadow:
    0 10px 18px rgba(111, 62, 26, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(79, 43, 20, 0.32);
}

.hero-actions-inline .primary-action:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 12px rgba(111, 62, 26, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(79, 43, 20, 0.26);
}

.dev-only {
  display: none;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(78, 49, 25, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #5e5043;
  font-size: 0.83rem;
  font-weight: 700;
}

.hero-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: #655647;
  font-size: 0.88rem;
  line-height: 1.6;
}

.hero-brief span {
  position: relative;
}

.hero-brief span + span::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(101, 86, 71, 0.5);
  transform: translateY(-50%);
}

.progress-card,
.progress-meta,
.question-head {
  display: grid;
  gap: 8px;
}

.question-recorder-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.question-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.progress-meta {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(32, 24, 18, 0.08);
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--accent));
}

.prompt-card,
.focus-card,
.status-card {
  margin-top: 10px;
}

.question-window {
  padding: 13px 14px;
}

.question-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.compact-meter {
  min-height: 100%;
  grid-template-columns: repeat(8, minmax(0, 1fr)) 40px;
}

.compact-meter span {
  transform-origin: center bottom;
  animation: meterPulse 1.7s ease-in-out infinite;
}

.compact-meter span:nth-child(1) {
  animation-delay: -0.15s;
  animation-duration: 1.45s;
}

.compact-meter span:nth-child(2) {
  animation-delay: -0.4s;
  animation-duration: 1.8s;
}

.compact-meter span:nth-child(3) {
  animation-delay: -0.75s;
  animation-duration: 1.55s;
}

.compact-meter span:nth-child(4) {
  animation-delay: -0.2s;
  animation-duration: 1.95s;
}

.compact-meter span:nth-child(5) {
  animation-delay: -0.6s;
  animation-duration: 1.6s;
}

.compact-meter span:nth-child(6) {
  animation-delay: -0.95s;
  animation-duration: 1.85s;
}

.compact-meter span:nth-child(7) {
  animation-delay: -0.3s;
  animation-duration: 1.5s;
}

.compact-meter span:nth-child(8) {
  animation-delay: -0.8s;
  animation-duration: 1.75s;
}

.compact-meter i::after {
  animation: recBlink 1.2s steps(1, end) infinite;
}

.question-meter-note {
  padding: 12px 12px 10px;
  border: 1px solid rgba(57, 38, 24, 0.12);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.58);
  box-shadow: none;
}

.question-meter-note span {
  display: block;
  color: #6f5d4a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.question-meter-note strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.32;
}

.question-meter-note .phase-row {
  margin-top: 6px;
}

.question-meter-note .question-status {
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.question-meter-note .capture-help {
  margin: 6px 0 0;
  color: #645648;
  font-size: 0.9rem;
  line-height: 1.52;
}

.question-meter-note .diagnostic-card {
  margin-top: 10px;
  padding: 10px 12px;
}

.meter-focus-line {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  color: #645648;
  line-height: 1.48;
}

.meter-focus-line em {
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 800;
}

.meter-focus-line span {
  display: block;
  color: #645648;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.diagnostic-card {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.52);
}

.diagnostic-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.diagnostic-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.84rem;
}

.diagnostic-row strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.phase-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phase-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(32, 24, 18, 0.18);
  flex: 0 0 auto;
}

.status-card.is-recording .phase-dot,
.status-card.is-processing .phase-dot {
  background: var(--green);
  animation: pulse 900ms infinite;
}

.status-card.is-warn .phase-dot {
  background: var(--gold);
}

.status-card.is-error .phase-dot {
  background: var(--rose);
}

.diagnostic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(32, 24, 18, 0.08);
  color: #4d453d;
  font-size: 0.78rem;
  font-weight: 800;
}

.diagnostic-badge.ok {
  color: var(--green);
  background: rgba(47, 122, 101, 0.12);
}

.diagnostic-badge.bad {
  color: #8c3d33;
  background: rgba(180, 105, 95, 0.16);
}

.prompt-text {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 6.4vw, 1.85rem);
  line-height: 1.28;
}

.question-status {
  margin: 10px 0 0;
  color: var(--green);
  font-weight: 800;
}

.question-status.warn {
  color: #8a5a14;
}

.question-status.error {
  color: #8c3d33;
}

.done-list,
.feature-list,
.ranking-list,
.province-tags,
.feedback-options,
.feedback-fields {
  display: grid;
  gap: 10px;
}

.done-item,
.feature-item,
.province-tags span,
.feedback-option label {
  border: 1px solid rgba(78, 49, 25, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.done-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}

.done-item span,
.done-item strong,
.feature-item span,
.feature-item strong {
  display: block;
}

.done-item span,
.feature-item span,
.feedback-status {
  color: var(--muted);
  font-size: 0.84rem;
}

.done-item em {
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 800;
}

.section-head {
  display: grid;
  gap: 6px;
}

.section-head strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.45;
  color: #34261a;
}

.section-intro {
  margin: 10px 0 0;
  color: #685a4b;
  line-height: 1.68;
}

.hero-result-card {
  padding: 22px 20px 20px;
  border-radius: 28px;
  color: #fff8ef;
  background:
    radial-gradient(circle at top right, rgba(255, 235, 201, 0.1), transparent 28%),
    linear-gradient(155deg, #221912, #6f4325 62%, #a0632d);
  box-shadow: 0 22px 46px rgba(67, 40, 20, 0.2);
}

.hero-result-card h2 {
  margin-top: 0;
  display: grid;
  gap: 8px;
}

.result-display-window {
  margin-bottom: 14px;
  color: #251a11;
}

.result-display-window .eyebrow {
  color: #6a5948;
}

.result-confidence {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 14px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff5e8;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.84rem;
  font-weight: 800;
  width: fit-content;
}

.result-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.result-meta-label {
  display: inline-block;
  color: rgba(255, 245, 233, 0.76);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.result-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  line-height: 1.18;
}

.result-style-line {
  margin: 8px 0 0;
  color: rgba(255, 241, 221, 0.96);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.68;
}

.result-guess,
.result-summary {
  margin: 12px 0 0;
  color: rgba(255, 245, 233, 0.92);
  line-height: 1.72;
}

.result-guess {
  position: relative;
  padding-left: 14px;
  color: rgba(255, 243, 227, 0.9);
}

.result-guess::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 240, 218, 0.38);
}

.result-summary {
  font-size: 1rem;
}

.province-tags {
  margin-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.province-tags span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: #fff8ef;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

.feature-item {
  padding: 15px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 251, 245, 0.92)),
    rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.feature-item strong {
  margin-top: 6px;
  font-size: 1rem;
}

.feature-item span + span {
  margin-top: 4px;
}

.ranking-list .feature-item {
  position: relative;
  padding-left: 18px;
}

.ranking-list .feature-item::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(173, 100, 48, 0.72), rgba(173, 100, 48, 0.16));
}

.issue-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.issue-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(173, 100, 48, 0.12);
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
}

.feature-audio {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.feature-audio span {
  color: var(--muted);
  font-size: 0.82rem;
}

.feature-audio audio {
  width: 100%;
  height: 40px;
}

.feedback-head {
  display: grid;
  gap: 10px;
}

.feedback-panel {
  margin-top: 10px;
  border-style: dashed;
  border-color: rgba(78, 49, 25, 0.16);
  background: rgba(255, 251, 245, 0.72);
  box-shadow: 0 10px 26px rgba(56, 38, 24, 0.08);
}

.feedback-head strong {
  font-family: var(--font-serif);
  font-size: 1.12rem;
}

.feedback-option {
  position: relative;
}

.feedback-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.feedback-option label {
  display: block;
  height: 100%;
  padding: 14px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.feedback-option strong {
  display: block;
}

.feedback-option span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.feedback-option input:checked + label {
  border-color: rgba(173, 100, 48, 0.38);
  box-shadow: 0 10px 20px rgba(173, 100, 48, 0.12);
  transform: translateY(-1px);
}

.feedback-fields label {
  display: grid;
  gap: 8px;
}

.checkbox-row {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

textarea,
input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(78, 49, 25, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  outline: none;
}

textarea {
  resize: vertical;
  line-height: 1.65;
}

textarea:focus,
input:focus {
  border-color: rgba(173, 100, 48, 0.42);
  box-shadow: 0 0 0 4px rgba(173, 100, 48, 0.1);
}

.feedback-status {
  line-height: 1.6;
  font-size: 0.92rem;
  font-weight: 700;
}

.feedback-status.is-success {
  color: var(--green);
}

.feedback-status.is-error {
  color: #8c3d33;
}

.share-card {
  display: grid;
  gap: 14px;
}

.share-card strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 1.28rem;
}

.result-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 4px;
}

.action-note {
  margin: 0;
  color: #6a5b4d;
  text-align: center;
  line-height: 1.64;
}

.result-actions .ghost-action {
  width: auto;
  min-width: 144px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.72);
}

.hidden-guide {
  display: grid;
  gap: 12px;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none !important;
  box-shadow: none;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.42;
    transform: scale(0.7);
  }
}

@keyframes meterPulse {
  0%,
  100% {
    transform: scaleY(0.72);
    opacity: 0.72;
  }

  50% {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

@keyframes recBlink {
  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0.38;
  }
}

@media (min-width: 541px) {
  .app-shell {
    max-width: 620px;
  }

  .app-frame {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-actions,
  .feedback-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .province-tags {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .question-meter-row {
    grid-template-columns: 1fr;
  }
}