:root {
  color-scheme: light;
  --page: #f4f1e9;
  --surface: #fffcf6;
  --surface-soft: #f8f4ec;
  --surface-accent: #e3ece6;
  --ink: #202722;
  --text: #3e4741;
  --muted: #6b706a;
  --faint: #81857f;
  --hairline: rgba(67, 62, 51, 0.14);
  --hairline-strong: rgba(67, 62, 51, 0.22);
  --brand: #2f6353;
  --brand-pressed: #264f43;
  --accent: #b45c45;
  --focus: #0a84ff;
  --good: #267253;
  --warn: #8a5a20;
  --bad: #a13b38;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --content: 760px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
summary,
label,
select,
input[type="date"] {
  -webkit-tap-highlight-color: transparent;
}

button,
summary,
select,
input[type="date"],
.date-field {
  cursor: pointer;
}

a {
  color: var(--brand);
}

[hidden],
.support-strip [hidden],
.feedback-section[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 68%, transparent);
  outline-offset: 3px;
}

.noscript-note {
  max-width: var(--content);
  margin: 16px auto;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: #fff6db;
  color: #5c4815;
  font-size: 14px;
}

/* First viewport: brand, promise, benefit, then the task. */
.hero {
  padding: 15px 16px 10px;
  text-align: left;
}

.hero-inner {
  max-width: var(--content);
  margin: 0 auto;
}

.hero-brand-stack {
  color: #59645d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.hero-brand-stack::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 1px 0;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.hero h1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 3px 0 2px;
  color: var(--ink);
  font-size: clamp(30px, 7vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.hero h1 span {
  white-space: nowrap;
}

.hero p {
  max-width: 620px;
  margin: 0;
  color: #59645d;
  font-size: 14px;
  line-height: 1.45;
}

.tabs-container {
  width: min(100%, calc(var(--content) + 32px));
  margin: 0 auto;
  padding: 0 16px 32px;
}

.tab-nav {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid #d8ded8;
  border-radius: 12px;
  background: #e6ebe6;
}

.tab-btn {
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #55555a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.tab-btn.active {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(42, 65, 55, 0.1);
  color: #285748;
  font-weight: 600;
}

.card {
  display: none;
  min-height: 360px;
  padding: 26px 28px 22px;
  border: 1px solid #e8e0d3;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(48, 43, 34, 0.055);
}

.card.active {
  display: block;
}

.card > h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.24;
}

.subtitle {
  margin: 5px 0 17px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 13px;
}

.form-row.single {
  grid-template-columns: minmax(0, 1fr);
}

.form-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.form-group label,
.feedback-form > label,
.control-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.form-group input,
.form-group select,
.feedback-form textarea,
.trip-guide-controls input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #e2dacb;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 16px !important;
  line-height: 1.35;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.form-group input::placeholder,
.feedback-form textarea::placeholder {
  color: #7d7d83;
}

.form-group input:focus,
.form-group select:focus,
.feedback-form textarea:focus,
.trip-guide-controls input:focus {
  border-color: var(--brand);
  background: #fff;
  outline: 0;
}

.form-group select,
.form-group input[type="date"] {
  color-scheme: light;
}

.date-field {
  border-radius: var(--radius-sm);
}

.naming-preferred-field {
  margin-bottom: 16px;
}

.naming-preferred-field label span,
.wish-fieldset legend span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.optional-fields,
.trip-guide,
.result-more,
.rule-trace-v257 {
  border: 0;
}

.optional-fields {
  margin: 4px 0 18px;
  border-top: 1px solid var(--hairline);
}

.optional-fields > summary,
.trip-guide > summary,
.result-more > summary,
.rule-trace-v257 > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}

.optional-fields > summary::-webkit-details-marker,
.trip-guide > summary::-webkit-details-marker,
.result-more > summary::-webkit-details-marker,
.rule-trace-v257 > summary::-webkit-details-marker {
  display: none;
}

.optional-fields > summary::after,
.trip-guide > summary::after,
.result-more > summary::after,
.rule-trace-v257 > summary::after {
  content: "+";
  color: var(--faint);
  font-size: 20px;
  font-weight: 400;
}

.optional-fields[open] > summary::after,
.trip-guide[open] > summary::after,
.result-more[open] > summary::after,
.rule-trace-v257[open] > summary::after {
  content: "−";
}

.optional-body {
  display: grid;
  gap: 16px;
  padding: 4px 0 2px;
}

.optional-body > .form-group,
.optional-body > .form-row,
.optional-body > .wish-fieldset {
  margin: 0;
}

.wish-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.wish-fieldset legend {
  margin-bottom: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.wish-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wish-options label {
  min-width: 0;
}

.wish-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wish-options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  text-align: center;
}

.wish-options input:checked + span {
  border-color: var(--brand);
  background: var(--surface-accent);
  color: #21483e;
  font-weight: 600;
}

.wish-options input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--focus) 68%, transparent);
  outline-offset: 2px;
}

.cta-btn,
.feedback-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 5px 14px rgba(47, 99, 83, 0.15);
  transition: background-color 140ms ease, transform 140ms ease;
}

.cta-btn:hover,
.feedback-submit:hover {
  background: var(--brand-pressed);
}

.cta-btn:active,
.feedback-submit:active {
  transform: translateY(1px);
}

.cta-btn:disabled,
.feedback-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.cta-microcopy {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.outfit-control-panel {
  margin: 0 0 16px;
}

.date-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.quick-date {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: #535358;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.quick-date.active {
  border-color: rgba(49, 93, 82, 0.35);
  background: var(--surface-accent);
  color: #21483e;
  font-weight: 600;
}

.more-date-label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.trip-guide {
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
}

.trip-guide-controls {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding-top: 8px;
}

.trip-guide-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.trip-week-btn,
.trip-generate-btn,
.trip-copy-btn {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

.trip-generate-btn {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.trip-guide-result {
  margin-top: 12px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}

.trip-guide-result.is-loading {
  color: var(--muted);
}

.trip-copy-btn {
  margin-top: 8px;
}

.result-box {
  display: none;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}

.result-box.show {
  display: block;
}

.result-box.is-error {
  color: var(--bad);
}

.result-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.outfit-summary {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}

.outfit-summary small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}

.outfit-summary strong {
  display: block;
  color: var(--ink);
  font-size: clamp(25px, 4.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.24;
}

.summary-reason {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.outfit-tier-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.outfit-tier {
  display: grid;
  grid-template-columns: minmax(0, min(38%, 148px)) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.outfit-tier-rank {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.outfit-tier-relation {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.outfit-tier-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.outfit-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.outfit-color-chip i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  background: var(--swatch);
}

.tone--white { --swatch: #fdfdfd; }
.tone--silver { --swatch: #c9c9c9; }
.tone--almond { --swatch: #e8d3ae; }
.tone--ivory { --swatch: #f4eedc; }
.tone--black { --swatch: #1d1d1f; }
.tone--blue { --swatch: #2468b4; }
.tone--deep-blue { --swatch: #163a64; }
.tone--navy { --swatch: #1b2d4c; }
.tone--green { --swatch: #3f7b51; }
.tone--cyan { --swatch: #368c89; }
.tone--emerald { --swatch: #18805c; }
.tone--light-green { --swatch: #9bc695; }
.tone--red { --swatch: #c83c3c; }
.tone--pink { --swatch: #d9899e; }
.tone--orange { --swatch: #df7937; }
.tone--purple { --swatch: #77538f; }
.tone--yellow { --swatch: #d8b640; }
.tone--coffee { --swatch: #795844; }
.tone--brown { --swatch: #68422d; }
.tone--khaki { --swatch: #b39a68; }

.outfit-tier-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.nayin-badge,
.nayin-method {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.nayin-method {
  margin-top: 10px;
}

.result-more {
  margin: 0;
}

.result-more-list {
  border-top: 1px solid var(--hairline);
}

.advice-text,
.date-overall,
.date-caution,
.avoid-reasons {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: #f5f7f6;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

.date-caution,
.avoid-reasons {
  background: #f8f4ef;
}

#outfit-advice {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.advice-text p,
.avoid-reasons p,
.avoid-reasons ul {
  margin: 7px 0 0;
}

.avoid-reasons ul {
  padding-left: 20px;
}

.preferred-check {
  margin: 0 0 12px;
}

.preferred-check-item {
  margin: 7px 0 0;
}

.text-muted {
  color: var(--muted);
}

.name-card {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

#names-output > .name-card:first-child,
#fengshui-output > .name-card:first-child {
  padding-top: 8px;
  border-top: 0;
}

.name-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.name-identity {
  min-width: 0;
}

.name-main {
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.name-pinyin {
  margin-top: 2px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.name-score-wrap {
  flex: 0 0 auto;
  text-align: right;
}

.name-score {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
}

.name-score-label {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.score--high { color: var(--good); }
.score--medium { color: var(--warn); }
.score--low { color: var(--bad); }

.name-desc {
  margin-top: 10px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.raw-result-text {
  white-space: pre-wrap;
}

.name-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: #55555a;
  font-size: 13px;
}

.result-overall {
  margin-top: 14px;
}

.engine-attribution,
.engine-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.fengshui-card--secondary {
  margin-top: 0;
}

.fengshui-card-title {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.date-candidate-grid,
.legacy-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.date-candidate,
.legacy-date-card {
  display: grid;
  grid-template-columns: minmax(88px, 0.25fr) minmax(0, 0.75fr);
  column-gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
}

.date-day,
.legacy-date-day {
  grid-row: 1 / span 3;
  color: var(--ink);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}

.date-meta,
.legacy-date-weekday {
  color: var(--muted);
  font-size: 13px;
}

.date-candidate p,
.legacy-date-desc {
  margin: 5px 0;
  color: var(--text);
  font-size: 14px;
}

.date-score,
.legacy-date-auspice {
  color: var(--brand);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.legacy-date-good-avoid {
  margin-top: 12px;
  color: var(--text);
  font-size: 14px;
}

.auspice--good { color: var(--good); }
.auspice--neutral { color: var(--warn); }
.auspice--bad { color: var(--bad); }

.rule-trace-v257 {
  margin-top: 4px;
  border-top: 1px solid var(--hairline);
}

.trace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding: 8px 0 4px;
}

.trace-cell {
  min-width: 0;
}

.trace-cell strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.trace-cell p,
.trace-cell ol {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.trace-cell ol {
  padding-left: 18px;
}

.trace-boundary {
  grid-column: 1 / -1;
}

.zero-model,
.interest-panel,
.decision-trace,
.ruleset-card,
.calculation-audit,
.occasion-block,
.outfit-tone-band {
  display: none;
}

.scene-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
  margin-top: 18px;
  border-top: 0;
}

.scene-share a,
.scene-share button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.scene-share p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.card:not(:has(.result-box.show)) .scene-share button {
  display: none;
}

.support-strip {
  display: flex;
  justify-content: center;
  gap: 28px;
  width: min(100% - 32px, var(--content));
  min-height: 48px;
  margin: -18px auto 0;
  border-top: 0;
}

.support-strip.anonymous-only {
  display: flex;
}

.support-strip a,
.support-strip button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.feedback-section {
  width: min(100% - 32px, var(--content));
  margin: 16px auto 0;
}

.feedback-shell {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: var(--radius-lg);
  background: #fff;
}

.feedback-shell h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.feedback-lead {
  margin: 5px 0 18px;
  color: var(--muted);
  font-size: 15px;
}

.support-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

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

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

.feedback-form textarea {
  min-height: 132px;
  padding-top: 12px;
  resize: vertical;
}

.feedback-privacy-note,
.feedback-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.feedback-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

footer {
  width: min(100% - 32px, var(--content));
  margin: 20px auto 0;
  padding: 18px 0 calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

footer span {
  display: block;
  margin-top: 3px;
}

.guide-page {
  background: var(--page);
}

.guide-shell {
  width: min(100% - 32px, 680px);
  margin: 0 auto;
  padding: 18px 0 48px;
}

.guide-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.guide-hero {
  padding: 28px 0 24px;
}

.guide-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 8vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.guide-hero p {
  max-width: 600px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.guide-content {
  padding: 28px;
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}

.guide-content h2 {
  margin: 28px 0 7px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
}

.guide-content h2:first-child {
  margin-top: 0;
}

.guide-content p {
  margin: 0 0 12px;
}

.guide-content ul {
  margin: 0 0 12px;
  padding-left: 1.25em;
}

.guide-content li + li {
  margin-top: 5px;
}

.guide-content code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-soft);
  font-size: 0.9em;
}

.guide-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 24px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.privacy-promise {
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-accent);
  color: #21483e;
  font-size: 15px;
  line-height: 1.65;
}

.privacy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.privacy-summary article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: var(--radius-md);
  background: #fff;
}

.privacy-summary span,
.privacy-summary strong {
  display: block;
}

.privacy-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.privacy-summary strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.privacy-summary p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.privacy-content {
  padding: 0 24px;
}

.privacy-detail {
  border: 0;
  border-bottom: 1px solid var(--hairline);
}

.privacy-detail:last-child {
  border-bottom: 0;
}

.privacy-detail > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  list-style: none;
}

.privacy-detail > summary::-webkit-details-marker {
  display: none;
}

.privacy-detail > summary::after {
  content: "+";
  color: var(--faint);
  font-size: 21px;
  font-weight: 400;
}

.privacy-detail[open] > summary::after {
  content: "−";
}

.privacy-detail > div {
  padding: 0 0 20px;
}

.update-note {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 700px) {
  .hero h1 { font-size: 31px; }
  .tabs-container { padding-right: 12px; padding-left: 12px; }
  .card { min-height: 310px; padding: 20px 18px 17px; border-radius: 18px; }
  .card > h2 { font-size: 24px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .wish-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-guide-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outfit-summary { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .outfit-summary strong { font-size: 27px; }
  .outfit-tier { grid-template-columns: minmax(0, min(38%, 136px)) minmax(0, 1fr); gap: 12px; }
  .trace-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .trace-boundary { grid-column: auto; }
  .feedback-shell { padding: 22px 16px 18px; border-radius: 20px; }
  .support-close { top: 12px; right: 10px; }
  .guide-shell { width: min(100% - 24px, 680px); padding-top: 10px; }
  .guide-hero { padding: 20px 2px 18px; }
  .guide-hero h1 { font-size: 32px; }
  .guide-content { padding: 22px 18px; border-radius: 20px; }
  .privacy-summary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .privacy-summary article { padding: 14px 16px; }
  .privacy-summary p { margin-top: 3px; }
  .privacy-content { padding: 0 16px; }
}

@media (min-width: 390px) and (max-width: 700px) {
  .form-row:not(.single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .hero { padding-right: 12px; padding-left: 12px; }
  .hero h1 { font-size: 29px; }
  .hero p { font-size: 14px; }
  .tab-btn,
  .quick-date { padding-right: 4px; padding-left: 4px; font-size: 13px; }
  .outfit-tier,
  .date-candidate,
  .legacy-date-card { grid-template-columns: minmax(0, 1fr); }
  .date-day,
  .legacy-date-day { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}