/* Northstar theme layer, loaded after styles.css.
   Direction: a quiet night-reading almanac. Ink background, warm paper text,
   one desaturated starlight accent, serif headings for the report voice.
   No neon, no glow, no gradient buttons. Shape rule: buttons are pills,
   cards and panels 14px, inputs 10px. */

:root {
  --ns-bg: #0d0f13;
  --ns-raised: #14171d;
  --ns-surface: #181b22;
  --ns-line: rgba(236, 230, 218, 0.12);
  --ns-line-strong: rgba(236, 230, 218, 0.22);
  --ns-ink: #ece6da;
  --ns-ink-2: #c8c1b3;
  --ns-muted: #8f897e;
  --ns-accent: #d6b26e;
  --ns-accent-hover: #e2c286;
  --ns-accent-soft: rgba(214, 178, 110, 0.12);
  --ns-on-accent: #17130b;
  --ns-r-card: 14px;
  --ns-r-input: 10px;
  --ns-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "Hiragino Mincho ProN", "Nanum Myeongjo", Georgia, serif;
  --ns-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans", "Hiragino Sans GB", "Apple SD Gothic Neo", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* legacy tokens used throughout styles.css */
  --page: var(--ns-bg);
  --bg: var(--ns-bg);
  --ink: var(--ns-ink);
  --text: var(--ns-ink);
  --muted: var(--ns-muted);
  --text-muted: var(--ns-muted);
  --blue: var(--ns-accent);
  --green: var(--ns-accent);
  --border: var(--ns-line);
  --surface: rgba(236, 230, 218, 0.04);
}

/* Base */

html body {
  background: var(--ns-bg);
  color: var(--ns-ink);
  font-family: var(--ns-sans);
  -webkit-font-smoothing: antialiased;
}

body #fx { opacity: 0.5; }

body h1,
body h2,
body .hero h1,
body .section h2,
body .result-page h2,
body .test-header h2,
body .professional-report h3,
body .professional-report-section-heading h4 {
  font-family: var(--ns-serif);
  font-weight: 600;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

body .eyebrow,
body .section-kicker,
body .module-section-heading span,
body .professional-report-kicker {
  color: var(--ns-accent);
  font-family: var(--ns-sans);
  letter-spacing: 0.08em;
}

/* English decoration labels above Chinese headings read as template filler. */
body .hero .eyebrow,
body .antigravity-menu-intro .section-kicker,
body .module-section-heading span,
body .antigravity-live-dot,
body .antigravity-signal,
body .block-icon,
body .payment-icon { display: none; }

body p,
body .lede { text-wrap: pretty; }

/* Header */

body .site-header {
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 14px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--ns-bg) 82%, transparent);
  border: 0;
  border-bottom: 1px solid var(--ns-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body .brand { gap: 10px; }
body .brand-star { color: var(--ns-accent); background: none; box-shadow: none; text-shadow: none; }
body .brand-text { font-family: var(--ns-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; }
body .brand-sub { color: var(--ns-muted); }

body .nav a,
body .nav .router-link-active {
  color: var(--ns-ink-2);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body .nav a:hover { color: var(--ns-ink); }
body .nav a::after { background: var(--ns-accent); box-shadow: none; }

body .site-language-select {
  color: var(--ns-ink-2);
  background-color: transparent;
  border: 1px solid var(--ns-line);
  border-radius: 999px;
  box-shadow: none;
}

/* Buttons */

body .primary-action,
body .pay-btn,
body .pay-confirm-btn {
  color: var(--ns-on-accent);
  background: var(--ns-accent);
  border: 1px solid var(--ns-accent);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 600;
  text-shadow: none;
  filter: none;
}

body .primary-action:hover,
body .pay-btn:hover,
body .pay-confirm-btn:hover {
  background: var(--ns-accent-hover);
  border-color: var(--ns-accent-hover);
  box-shadow: none;
  transform: none;
}

body .primary-action:active { transform: scale(0.98); }
body .primary-action::before,
body .secondary-action::before,
body .invite-redeem-button::before,
body .primary-action::after { display: none; }

body .secondary-action,
body .report-toolbar-button,
body .invite-redeem-button {
  color: var(--ns-ink);
  background: transparent;
  border: 1px solid var(--ns-line-strong);
  border-radius: 999px;
  box-shadow: none;
}

body .secondary-action:hover,
body .report-toolbar-button:hover,
body .invite-redeem-button:hover {
  background: rgba(236, 230, 218, 0.06);
  border-color: var(--ns-ink-2);
  box-shadow: none;
  transform: none;
}

body .report-toolbar-button.is-primary {
  color: var(--ns-on-accent);
  background: var(--ns-accent);
  border-color: var(--ns-accent);
}

/* Shared card surface */

body .energy-card,
body .assessment-lobby-card,
body .assessment-start-card,
body .assessment-start-panel,
body .antigravity-brief-panel,
body .paywall-card,
body .paywall-content,
body .question-card,
body .test-summary,
body .plan-option,
body .report-sample-card,
body .invite-redeem-panel,
body .payment-value-guide {
  background: var(--ns-raised);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-card);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Home hero */

body .hero { gap: clamp(28px, 5vw, 72px); }

body .hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.2;
  color: var(--ns-ink);
}

body .hero .lede {
  max-width: 30em;
  color: var(--ns-ink-2);
  font-size: 17px;
  line-height: 1.8;
}

body .antigravity-brief-panel { padding: 24px; }
body .antigravity-panel-header strong { font-family: var(--ns-serif); font-size: 17px; color: var(--ns-ink); }
body .antigravity-panel-header small { color: var(--ns-muted); }
body .antigravity-panel-divider { background: var(--ns-line); }

body .antigravity-panel-stats div {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ns-line);
  border-radius: 0;
}

body .antigravity-panel-stats dt { color: var(--ns-muted); }
body .antigravity-panel-stats dd { color: var(--ns-ink); font-family: var(--ns-serif); }
body .antigravity-brief-panel p { color: var(--ns-ink-2); }

/* Daily check-in */

body .cosmic-dashboard .dashboard-subtitle { color: var(--ns-muted); }
body .energy-card::after,
body .energy-card::before { display: none; }
body .energy-label span { color: var(--ns-accent); font-family: var(--ns-sans); }
body .energy-meta,
body .meta-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ns-line);
  border-radius: 0;
  box-shadow: none;
}
body .meta-title { color: var(--ns-accent); }

/* Lobby */

body .antigravity-menu-intro h2 { font-size: clamp(30px, 3.4vw, 44px); }
body .assessment-start-tag {
  color: var(--ns-accent);
  background: var(--ns-accent-soft);
  border: 0;
}
body .assessment-start-action { color: var(--ns-accent); }

body .module-section-heading {
  padding-top: 28px;
  border-top: 1px solid var(--ns-line);
}

body .module-section-heading h3 { font-family: var(--ns-serif); font-weight: 600; color: var(--ns-ink); }

body .assessment-lobby-card {
  padding: 22px 22px 24px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

body .assessment-lobby-card:hover,
body .assessment-start-card:hover {
  background: var(--ns-surface);
  border-color: var(--ns-line-strong);
  box-shadow: none;
  transform: none;
}

body .assessment-lobby-card h3 { font-family: var(--ns-serif); font-size: 18px; font-weight: 600; color: var(--ns-ink); }
body .assessment-lobby-card p { color: var(--ns-muted); }

/* Test pages */

body .test-header .lede { color: var(--ns-ink-2); }
body .question-text { color: var(--ns-ink); font-size: 18px; line-height: 1.7; }

body .mbti-progress-bar,
body .mbti-progress-container { background: rgba(236, 230, 218, 0.08); box-shadow: none; }
body .mbti-progress-fill { background: var(--ns-accent); box-shadow: none; }
body .mbti-progress-text,
body .assessment-progress-meta { color: var(--ns-muted); }

body .scale-btn,
body .standard-scale-option,
body .bipolar-scale-button {
  color: var(--ns-ink-2);
  background: transparent;
  border: 1px solid var(--ns-line-strong);
  box-shadow: none;
}

body .scale-btn:hover,
body .standard-scale-option:hover,
body .bipolar-scale-button:hover { border-color: var(--ns-ink-2); color: var(--ns-ink); box-shadow: none; }

body .scale-btn.selected,
body .standard-scale-option.selected,
body .bipolar-scale-button.selected {
  color: var(--ns-on-accent);
  background: var(--ns-accent);
  border-color: var(--ns-accent);
  box-shadow: none;
}

body .continuum-scale-labels,
body .bipolar-pole { color: var(--ns-muted); }

/* Inputs */

body input:not([type="radio"]):not([type="checkbox"]),
body select,
body textarea {
  border-radius: var(--ns-r-input);
}

body .invite-redeem-input {
  color: var(--ns-ink);
  background: var(--ns-bg);
  border: 1px solid var(--ns-line-strong);
}

/* Results: compact score rows (replaces tall glass cards) */

body .ns-score-list { display: grid; gap: 14px; }

body .ns-score-row {
  display: grid;
  grid-template-columns: minmax(96px, 200px) 1fr auto;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}

body .ns-score-label { color: var(--ns-ink); }
body .ns-score-value { color: var(--ns-ink-2); font-variant-numeric: tabular-nums; }
body .ns-score-track { display: block; height: 4px; overflow: hidden; background: rgba(236, 230, 218, 0.08); border-radius: 999px; }
body .ns-score-track i { display: block; height: 100%; background: var(--ns-accent); border-radius: inherit; }

body .standard-result-summary { padding: clamp(20px, 3vw, 32px); }
body .standard-score-list .energy-card { min-height: 0; }
body .energy-track { background: rgba(236, 230, 218, 0.08); box-shadow: none; }
body .energy-fill { background: var(--ns-accent); box-shadow: none; }

body .ns-free-reading {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ns-line);
}

body .ns-free-reading h3 { margin: 0 0 8px; font-family: var(--ns-serif); font-size: 18px; color: var(--ns-ink); }
body .ns-free-reading p { margin: 0; color: var(--ns-ink-2); line-height: 1.85; }

body .ns-report-content { margin-top: 28px; }

body .ns-unlock {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px 32px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--ns-raised);
  border: 1px solid var(--ns-line-strong);
  border-radius: var(--ns-r-card);
}

body .ns-unlock h3 { margin: 0 0 12px; font-family: var(--ns-serif); font-size: 20px; color: var(--ns-ink); }
body .ns-unlock ol { display: grid; gap: 6px; margin: 0; padding-left: 1.3em; color: var(--ns-ink-2); }
body .ns-unlock ol li::marker { color: var(--ns-accent); font-variant-numeric: tabular-nums; }
body .ns-unlock p { margin: 0; color: var(--ns-ink-2); }
body .ns-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* A paywall layer only floats when there is a blurred preview under it.
   Without one it must sit in flow, otherwise it covers the buttons below. */
body .report-content:not(:has(.is-blurred, .payment-preview)) > .paywall-overlay,
body .deep-result-container:not(:has(.is-blurred, .payment-preview)) > .paywall-overlay {
  position: static;
  inset: auto;
  background: none;
}

body .paywall-overlay { background: linear-gradient(to bottom, rgba(13, 15, 19, 0) 0%, rgba(13, 15, 19, 0.9) 35%, var(--ns-bg) 100%); }
body .paywall-content h3,
body .paywall-card h3 { font-family: var(--ns-serif); color: var(--ns-ink); }
body .paywall-content .price,
body .price-current { color: var(--ns-ink); font-family: var(--ns-serif); }

/* Payment modal */

body .modal-backdrop { background: rgba(6, 7, 9, 0.72); backdrop-filter: blur(6px); }

body .payment-modal,
body .modal-content,
body .payment-card {
  background: var(--ns-bg);
  border: 1px solid var(--ns-line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

body .payment-header h3,
body .payment-header h2 { font-family: var(--ns-serif); color: var(--ns-ink); }
body .payment-subtitle { color: var(--ns-muted); }
body .plan-option-name { color: var(--ns-ink); }
body .plan-option-desc { color: var(--ns-muted); }
body .plan-option-price { color: var(--ns-ink); font-variant-numeric: tabular-nums; }
body .plan-option.selected,
body .plan-option.active,
body .plan-option[aria-pressed="true"] { border-color: var(--ns-accent); background: var(--ns-accent-soft); box-shadow: none; }
body .plan-value-badge { color: var(--ns-on-accent); background: var(--ns-accent); box-shadow: none; }

/* Professional report: reads like a printed booklet */

body .professional-report {
  background: var(--ns-raised);
  border: 1px solid var(--ns-line);
  border-radius: 18px;
  box-shadow: none;
}

body .professional-report-hero,
body .professional-report header {
  background: transparent;
  border-color: var(--ns-line);
}

body .professional-report-meta span {
  color: var(--ns-ink-2);
  background: transparent;
  border: 1px solid var(--ns-line);
  box-shadow: none;
}

body .professional-report-progress span { background: var(--ns-accent); box-shadow: none; }
body .professional-report-toolbar { background: transparent; border-color: var(--ns-line); }

body .professional-report-toc button {
  color: var(--ns-ink-2);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--ns-line);
  border-radius: 0;
  box-shadow: none;
}

body .professional-report-toc button:hover { color: var(--ns-ink); border-left-color: var(--ns-accent); }
body .professional-report-toc button span,
body .professional-report-section-heading span { color: var(--ns-accent); background: none; box-shadow: none; }

body .professional-report-section { border-color: var(--ns-line); }
body .professional-report-section-heading h4 { color: var(--ns-ink); font-size: clamp(22px, 2.2vw, 28px); }

body .professional-report-article p {
  color: var(--ns-ink-2);
  font-size: 16.5px;
  line-height: 1.95;
}

body .professional-report-article p::first-letter {
  float: none;
  font-size: inherit;
  color: inherit;
  margin: 0;
}

body .report-lead {
  display: block;
  margin-bottom: 4px;
  color: var(--ns-ink);
  font-family: var(--ns-serif);
  font-weight: 600;
}

body .professional-report-footer { border-color: var(--ns-line); color: var(--ns-muted); }
body .professional-report-footer strong { color: var(--ns-accent); }

/* Footer */

body .footer { border-top: 1px solid var(--ns-line); }
body .footer-links a,
body .payment-consent a { color: var(--ns-ink-2); }
body .footer-brand strong { font-family: var(--ns-serif); }

@media (max-width: 640px) {
  body .ns-score-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  body .ns-score-track { grid-column: 1 / -1; order: 3; }
  body .ns-unlock { grid-template-columns: 1fr; }
  body .ns-unlock .primary-action { width: 100%; }
}

/* Residual decoration from the previous visual system */

body .block-grid article::after { display: none; }
body .block-grid article::before { color: var(--ns-muted); opacity: 0.7; }
body .block-grid article:hover { transform: none; }

body .question-card.active {
  border-color: var(--ns-line-strong);
  box-shadow: none;
  transform: none;
}

body .scale-btn.agree,
body .scale-btn.neutral,
body .scale-btn.disagree {
  --scale-start: var(--ns-accent);
  --scale-end: var(--ns-accent);
  color: var(--ns-ink-2);
  border-color: var(--ns-line-strong);
}

body .scale-btn.selected,
body .scale-btn.agree.selected,
body .scale-btn.neutral.selected,
body .scale-btn.disagree.selected {
  color: var(--ns-on-accent);
  background: var(--ns-accent);
  border-color: var(--ns-accent);
  box-shadow: none;
}

body .energy-meta .meta-item {
  background: var(--ns-raised);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-card);
}

body .energy-meta .meta-title { color: var(--ns-accent); font-size: 12px; letter-spacing: 0.06em; }
body .energy-meta .meta-value { color: var(--ns-ink); }

body .module-section-heading {
  grid-template-columns: 1fr;
  margin-top: 40px;
  padding: 24px 0 4px;
  border-bottom: 0;
}

body .module-section-heading h3 {
  font-size: clamp(20px, 2vw, 24px);
  text-align: left;
  color: var(--ns-ink);
}

body .professional-report-article p::first-letter { font-weight: inherit; font-family: inherit; }
body .report-toolbar-button.is-primary,
body .report-toolbar-button.is-primary:hover { box-shadow: none; background: var(--ns-accent); color: var(--ns-on-accent); }

/* Scale buttons stay neutral at every breakpoint until chosen. */
body .scale-btn.agree:not(.selected),
body .scale-btn.neutral:not(.selected),
body .scale-btn.disagree:not(.selected) { background: transparent; }

body .actions .primary-action,
body .actions .secondary-action { white-space: nowrap; }

body .workbook-module-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body .workbook-module-tabs::-webkit-scrollbar { display: none; }
body .workbook-module-tabs button { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  body .actions { gap: 10px; }
  body .actions .primary-action,
  body .actions .secondary-action { flex: 1 1 auto; padding: 0 16px; font-size: 14px; }
}

body .scale-options .scale-btn:nth-child(n),
body .bipolar-scale-button:nth-child(n) {
  --scale-start: var(--ns-accent);
  --scale-end: var(--ns-accent);
  color: var(--ns-ink-2);
  border-color: var(--ns-line-strong);
  background: transparent;
}

body .scale-options .scale-btn.selected:nth-child(n),
body .bipolar-scale-button.selected:nth-child(n) {
  color: var(--ns-on-accent);
  background: var(--ns-accent);
  border-color: var(--ns-accent);
  box-shadow: none;
}

body .scale-options .scale-btn:nth-child(n):hover,
body .bipolar-scale-button:nth-child(n):hover {
  color: var(--ns-ink);
  border-color: var(--ns-ink-2);
  background: rgba(236, 230, 218, 0.05);
  box-shadow: none;
}