:root {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --shadow-soft: 0 18px 45px rgba(52, 48, 44, 0.08);
  --shadow-paper: 0 14px 34px rgba(76, 54, 35, 0.08), 0 2px 0 rgba(125, 89, 51, 0.04);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --character-green: #6fbd67;
  --character-red: #e94f45;
  --character-blue: #39add8;
  --character-yellow: #f3c33d;
}

.theme-learner {
  --surface-page: #fcf8f1;
  --surface-paper: #fffefa;
  --surface-muted: #fff8ef;
  --surface-warm: #fff3e4;
  --text-primary: #34302c;
  --text-secondary: #7c7064;
  --border-subtle: #eadcc8;
  --action-primary: #d47a6a;
  --action-primary-pressed: #b6584a;
  --action-on-primary: #fffdf8;
  --action-primary-soft: #f9e3dd;
  --action-secondary: #b87337;
  --accent-structure: #d99943;
  --nav-surface: #34302c;
  --text-on-dark: #fff9f5;
  --text-on-dark-muted: #ead8bb;
  --status-success: #5f9f8d;
  --status-warning: #d9a94b;
  --status-danger: #9f3e4d;
  --status-info: #5974a7;
}

.theme-coach {
  --surface-page: #fbfaf7;
  --surface-paper: #fffdf8;
  --surface-muted: #f3eee6;
  --surface-warm: #e8edf5;
  --text-primary: #343434;
  --text-secondary: #7c7167;
  --border-subtle: #ded6ca;
  --action-primary: #506f9f;
  --action-primary-pressed: #2f4771;
  --action-on-primary: #fffdf8;
  --action-secondary: #506f9f;
  --accent-structure: #506f9f;
  --nav-surface: #2f4771;
  --text-on-dark: #fffdf8;
  --text-on-dark-muted: #d6e0ee;
  --status-success: #5f9f8d;
  --status-warning: #d9a94b;
  --status-danger: #9f3e4d;
  --status-info: #506f9f;
}

.theme-hq {
  --surface-page: #f7f2ea;
  --surface-paper: #fffdf8;
  --surface-muted: #f3e6d4;
  --surface-warm: #f3e6d4;
  --text-primary: #343434;
  --text-secondary: #7c7167;
  --border-subtle: #dfd3c2;
  --action-primary: #b8894e;
  --action-primary-pressed: #9f7b3e;
  --action-on-primary: #fff9f5;
  --action-secondary: #343434;
  --accent-structure: #b8894e;
  --nav-surface: #343434;
  --text-on-dark: #fff9f5;
  --text-on-dark-muted: #d8c6ae;
  --status-success: #5f9f8d;
  --status-warning: #d9a94b;
  --status-danger: #9f3e4d;
  --status-info: #506f9f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

a {
  color: var(--action-primary-pressed);
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1120px;
  padding: 22px 20px;
}

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

.brand-mark {
  background: var(--text-primary);
  border-radius: var(--radius-sm);
  color: var(--surface-paper);
  display: inline-grid;
  font-weight: 700;
  height: 34px;
  place-items: center;
  width: 58px;
}

.theme-coach .brand-mark {
  background: var(--action-primary);
}

.theme-hq .brand-mark {
  background: var(--nav-surface);
  color: var(--text-on-dark);
}

.brand-copy {
  color: var(--text-secondary);
  font-size: 14px;
}

.page-main {
  margin: 0 auto;
  max-width: 1120px;
  padding: 12px 20px 56px;
}

.hq-layout {
  display: block;
  min-height: 100vh;
}

.hq-sidebar {
  background: var(--nav-surface);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  left: 0;
  overflow-y: auto;
  padding: 24px 18px;
  position: fixed;
  top: 0;
  width: 236px;
  z-index: 10;
}

.hq-brand {
  align-items: center;
  color: var(--text-on-dark);
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}

.hq-brand-mark {
  background: var(--accent-structure);
  border-radius: var(--radius-sm);
  color: var(--nav-surface);
  display: inline-grid;
  font-weight: 800;
  height: 38px;
  place-items: center;
  width: 58px;
}

.hq-brand strong,
.hq-nav-item span {
  display: block;
  font-size: 15px;
}

.hq-brand small,
.hq-nav-item small {
  color: var(--text-on-dark-muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.hq-nav {
  display: grid;
  gap: 8px;
}

.hq-nav-group {
  display: grid;
  gap: 4px;
}

.hq-nav-group-label {
  color: var(--text-on-dark-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 6px 12px 0;
  text-transform: uppercase;
}

.hq-nav-item {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  padding: 12px;
}

.hq-nav-sub {
  padding: 9px 12px;
}

.hq-nav-sub span {
  font-size: 14px;
}

.hq-nav-item:hover,
.hq-nav-item.is-active {
  background: rgba(255, 249, 245, 0.1);
  border-color: rgba(255, 249, 245, 0.16);
}

.hq-nav-item.is-active span {
  color: #fff;
}

.hq-sidebar-footer {
  border-top: 1px solid rgba(255, 249, 245, 0.14);
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.hq-sidebar-footer a,
.hq-sidebar-footer button {
  background: transparent;
  border: 0;
  color: var(--text-on-dark-muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.hq-content-shell {
  margin-left: 236px;
  min-width: 0;
}

.hq-main {
  margin: 0 auto;
  max-width: 1220px;
  padding: 28px 28px 64px;
}

.hq-mobile-bar {
  display: none;
}

.hq-subnav {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
}

.hq-subnav a {
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
}

.hq-subnav a.is-active {
  background: var(--nav-surface);
  color: var(--text-on-dark);
}

.hq-filter-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.35fr) auto;
}

.hq-compact-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hq-user-profile .detail-definition-list dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hq-users-table {
  min-width: 720px;
}

.hq-users-table td:first-child small,
.hq-users-table td:nth-child(2) small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.hq-users-table td:nth-child(2) {
  white-space: normal;
}

.hq-user-asset-table {
  min-width: 620px;
}

.hq-anchor-nav {
  margin-top: -8px;
}

.hq-user-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hq-user-facts div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  padding: 12px;
}

.hq-user-report-grid,
.hq-user-relation-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hq-user-report-grid article,
.hq-user-relation-grid article {
  min-width: 0;
}

.hq-user-report-grid h3,
.hq-user-relation-grid h3 {
  color: var(--text-primary);
  font-size: 15px;
  margin: 0 0 8px;
}

.compact-list .list-row {
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
}

.compact-list a.list-row {
  color: inherit;
  text-decoration: none;
}

.compact-list .list-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.auth-layout {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr);
  margin: 42px auto 0;
}

.auth-layout.compact {
  max-width: 900px;
}

.auth-intro {
  border-top: 4px solid var(--accent-structure);
  padding: 28px 0;
}

.eyebrow {
  color: var(--accent-structure);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 42px;
  line-height: 1.12;
  margin-bottom: 18px;
}

h2 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
}

p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.nowrap {
  white-space: nowrap;
}

.auth-panel,
.paper-section,
.ticket,
.metric {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.auth-panel {
  padding: 26px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.form-input {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-primary);
  display: block;
  font: inherit;
  min-height: 46px;
  padding: 11px 13px;
  width: 100%;
}

.form-input:focus {
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent);
  outline: none;
}

.field-help,
.field-error {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

.field-help {
  color: var(--text-secondary);
}

.field-error,
.form-error-block {
  color: var(--status-danger);
}

.form-error-block {
  background: color-mix(in srgb, var(--status-danger) 8%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--status-danger) 35%, var(--border-subtle));
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  padding: 12px 14px;
}

.form-error-block p {
  color: var(--status-danger);
  margin: 0 0 6px;
}

.form-error-block p:last-child {
  margin-bottom: 0;
}

.form-error-list {
  margin: 0;
  padding-left: 18px;
}

.form-error-list li + li {
  margin-top: 4px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.btn-primary {
  background: var(--action-primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--action-primary) 20%, transparent);
  color: var(--action-on-primary);
}

.btn-primary:hover {
  background: var(--action-primary-pressed);
}

.btn-primary:active {
  box-shadow: 0 4px 10px color-mix(in srgb, var(--action-primary-pressed) 20%, transparent);
  transform: translateY(1px);
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 22%, transparent);
  outline: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.btn-secondary {
  background: var(--surface-paper);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-quiet {
  background: transparent;
  color: var(--text-secondary);
  padding-inline: 8px;
}

.btn-danger {
  background: var(--status-danger);
  color: #fffdf8;
}

.btn-small {
  font-size: 13px;
  min-height: 32px;
  padding: 6px 10px;
}

.btn-block {
  width: 100%;
}

.form-footnote {
  font-size: 14px;
  margin: 18px 0 0;
  text-align: center;
}

.message-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.message {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.message-success {
  background: color-mix(in srgb, var(--status-success) 10%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--status-success) 34%, var(--border-subtle));
  border-left: 4px solid var(--status-success);
  font-weight: 700;
  animation: message-slide-in 0.25s ease-out;
}

@keyframes message-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-error {
  background: color-mix(in srgb, var(--status-danger) 7%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--status-danger) 28%, var(--border-subtle));
}

.hero-band,
.workspace-header {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  padding: 24px;
}

.workspace-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.theme-coach .workspace-header {
  background: var(--surface-warm);
  border-color: color-mix(in srgb, var(--action-primary) 28%, var(--border-subtle));
}

.theme-hq .workspace-header {
  background: var(--nav-surface);
  border-color: var(--nav-surface);
}

.theme-hq .workspace-header h1 {
  color: var(--text-on-dark);
}

.theme-hq .workspace-header p {
  color: var(--text-on-dark-muted);
}

.theme-hq .workspace-header .eyebrow {
  color: var(--accent-structure);
}

.theme-hq .workspace-header .btn-secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--text-on-dark) 28%, transparent);
  color: var(--text-on-dark);
}

.toolbar-actions {
  display: flex;
  gap: 10px;
}

.metric-grid,
.ticket-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

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

.metric,
.ticket {
  padding: 20px;
}

.metric span {
  color: var(--text-secondary);
  display: block;
  font-size: 14px;
}

.metric strong {
  display: block;
  font-size: 34px;
  margin-top: 8px;
}

.ticket {
  border-top: 4px solid var(--accent-structure);
}

.generated-ticket {
  margin-bottom: 18px;
}

.code-copy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

code {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 4px 7px;
}

.paper-section {
  margin-bottom: 22px;
  padding: 22px;
}

.section-title {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title h2 {
  margin-bottom: 0;
}

.section-title span {
  color: var(--text-secondary);
  font-size: 14px;
}

.section-title-actions {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.section-title-actions small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.friend-list-section-title .section-title-actions,
.friend-detail-section-tools {
  max-width: 100%;
  width: max-content;
}

.pagination {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
}

.pagination > div {
  display: flex;
  gap: 8px;
}

.btn.is-disabled {
  box-shadow: none;
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

.record-list {
  display: grid;
}

.list-row {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  padding: 12px 0;
}

.list-row:first-child {
  border-top: 0;
}

.list-row span {
  color: var(--text-secondary);
  font-size: 14px;
}

.empty-state,
.empty-cell {
  color: var(--text-secondary);
  padding: 20px 0;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table th {
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

.status-success {
  background: color-mix(in srgb, var(--status-success) 16%, var(--surface-paper));
  color: color-mix(in srgb, var(--status-success) 76%, #1f1f1f);
}

.status-info {
  background: color-mix(in srgb, var(--status-info) 14%, var(--surface-paper));
  color: var(--status-info);
}

.status-warning {
  background: color-mix(in srgb, var(--status-warning) 18%, var(--surface-paper));
  color: #7a5a15;
}

.status-danger {
  background: color-mix(in srgb, var(--status-danger) 14%, var(--surface-paper));
  color: var(--status-danger);
}

.muted {
  color: var(--text-secondary);
  font-size: 13px;
}

.assessment-workbench-header p {
  color: var(--text-secondary);
  margin: 8px 0 0;
  max-width: 680px;
}

.theme-hq .assessment-workbench-header p {
  color: var(--text-on-dark-muted);
}

.assessment-filter-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(170px, 1.4fr) repeat(5, minmax(128px, 1fr));
}

.assessment-filter-actions {
  display: flex;
  gap: 8px;
}

.assessment-result-table {
  min-width: 0;
  table-layout: fixed;
}

.assessment-result-table th,
.assessment-result-table td {
  padding-left: 7px;
  padding-right: 7px;
  white-space: normal;
}

.assessment-result-table th:nth-child(1),
.assessment-result-table td:nth-child(1) {
  width: 11%;
}

.assessment-result-table th:nth-child(2),
.assessment-result-table td:nth-child(2) {
  width: 12%;
}

.assessment-result-table th:nth-child(3),
.assessment-result-table td:nth-child(3) {
  width: 7%;
}

.assessment-result-table th:nth-child(4),
.assessment-result-table td:nth-child(4) {
  width: 18%;
}

.assessment-result-table th:nth-child(5),
.assessment-result-table td:nth-child(5) {
  width: 9%;
}

.assessment-result-table th:nth-child(6),
.assessment-result-table td:nth-child(6) {
  width: 16%;
}

.assessment-result-table th:nth-child(7),
.assessment-result-table td:nth-child(7) {
  width: 10%;
}

.assessment-result-table th:nth-child(8),
.assessment-result-table td:nth-child(8) {
  width: 7%;
}

.assessment-result-table th:nth-child(9),
.assessment-result-table td:nth-child(9) {
  width: 10%;
}

.assessment-result-table td small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.hq-assessment-result-table th:nth-child(1),
.hq-assessment-result-table td:nth-child(1) {
  width: 22%;
}

.hq-assessment-result-table th:nth-child(2),
.hq-assessment-result-table td:nth-child(2) {
  width: 18%;
}

.hq-assessment-result-table th:nth-child(3),
.hq-assessment-result-table td:nth-child(3) {
  width: 18%;
}

.hq-assessment-result-table th:nth-child(4),
.hq-assessment-result-table td:nth-child(4),
.hq-assessment-result-table th:nth-child(5),
.hq-assessment-result-table td:nth-child(5) {
  width: 14%;
}

.hq-assessment-result-table th:nth-child(6),
.hq-assessment-result-table td:nth-child(6) {
  width: 14%;
}

.type-order,
.assessment-profile-order {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.type-order {
  font-size: 24px;
}

.assessment-score-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.assessment-score-chips-large {
  min-width: 0;
}

.assessment-type-chip,
.assessment-type-dot {
  align-items: center;
  color: #17130f;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
}

.assessment-type-chip {
  border-radius: var(--radius-sm);
  font-size: 12px;
  min-height: 28px;
  padding: 5px 7px;
}

.assessment-type-dot {
  border-radius: 999px;
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
}

.assessment-type-chip.type-type1,
.assessment-type-dot.type-type1 {
  background: var(--character-red);
}

.assessment-type-chip.type-type2,
.assessment-type-dot.type-type2 {
  background: var(--character-yellow);
}

.assessment-type-chip.type-type3,
.assessment-type-dot.type-type3 {
  background: var(--character-blue);
}

.assessment-type-chip.type-type4,
.assessment-type-dot.type-type4 {
  background: var(--character-green);
}

.assessment-cell-note {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coach-dashboard-actions {
  margin-bottom: 14px;
}

.assessment-profile-panel {
  margin-bottom: 18px;
}

.assessment-profile-main {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.assessment-profile-main h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.assessment-profile-main h2 span {
  background: var(--surface-muted);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 16px;
  padding: 4px 10px;
}

.assessment-profile-order {
  display: block;
  font-size: 54px;
  line-height: 1;
}

.assessment-detail-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
}

.assessment-detail-card h2 {
  margin-bottom: 16px;
}

.detail-definition-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.detail-definition-list div {
  display: grid;
  gap: 8px;
  grid-template-columns: 150px minmax(0, 1fr);
}

.detail-definition-list dt {
  color: var(--text-secondary);
  font-weight: 700;
}

.detail-definition-list dd {
  margin: 0;
}

.generated-report-list > div {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 8px;
  padding: 14px;
}

.generated-report-list span,
.generated-report-list small {
  color: var(--text-secondary);
  font-size: 13px;
}

.assessment-dimension-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assessment-dimension-row {
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr) 44px;
  padding: 12px;
}

.assessment-dimension-row small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-dimension-row em {
  color: var(--action-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.assessment-dimension-row.report-score-row {
  align-items: start;
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.assessment-dimension-row.report-score-row .score-track {
  grid-column: 2 / -1;
  height: 10px;
}

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

.relationship-group-readout {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 13px 14px;
}

.assessment-secondary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.assessment-secondary-grid > div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.assessment-secondary-grid span {
  color: var(--text-secondary);
}

.assessment-secondary-grid strong {
  font-size: 22px;
}

.assessment-secondary-bars > .report-score-row {
  align-items: stretch;
  display: grid;
}

.assessment-secondary-bars .score-row-head strong {
  font-size: 14px;
}

.assessment-secondary-bars .score-track {
  height: 9px;
}

.assessment-answer-list div {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.assessment-answer-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.legacy-filter-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.75fr) minmax(150px, 0.75fr) auto;
}

.legacy-import-note {
  font-size: 13px;
  margin: 10px 0 0;
}

.legacy-result-table {
  min-width: 920px;
}

.legacy-result-table td small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.legacy-detail-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
}

.legacy-type-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-type-grid div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.legacy-type-grid strong,
.legacy-type-grid span {
  display: block;
}

.legacy-type-grid span {
  color: var(--action-primary);
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
}

.legacy-note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legacy-note-list span {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 9px;
}

.legacy-answer-list {
  display: grid;
  gap: 10px;
}

.legacy-answer-list div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.legacy-answer-list strong {
  display: block;
  margin-bottom: 4px;
}

.legacy-answer-list p {
  margin: 0;
}

.legacy-user-search-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) auto;
}

.legacy-success-strip {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.legacy-success-strip strong {
  color: var(--status-success);
  display: block;
}

.legacy-success-strip span {
  color: var(--text-secondary);
  display: block;
  min-width: 0;
}

.legacy-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.legacy-candidate-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.legacy-candidate-row {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 0.8fr) auto;
  padding: 12px;
}

.legacy-candidate-row small {
  color: var(--text-secondary);
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.legacy-note-field {
  margin: 0;
}

.legacy-bound-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 0.9fr);
}

.legacy-bound-row > a {
  color: inherit;
  display: grid;
  gap: 4px;
  min-width: 0;
  text-decoration: none;
}

.coach-legacy-bind-page,
.coach-friend-form-page {
  padding-bottom: 32px;
}

.coach-legacy-bind-summary {
  margin-bottom: 12px;
}

.coach-legacy-candidate-row {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.65fr) auto;
}

.coach-legacy-bound-row {
  align-items: start;
}

.coach-friend-form-panel textarea.form-input {
  min-height: 104px;
  resize: vertical;
}

.inline-action-form {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 1fr) auto;
  margin: 0;
}

.inline-action-form .form-input {
  min-height: 36px;
}

.legacy-danger-actions {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-danger-actions form {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.hq-disclosure {
  display: block;
}

.hq-disclosure > summary {
  color: var(--text-primary);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  list-style-position: inside;
}

.hq-disclosure > summary::marker {
  color: var(--text-secondary);
}

.hq-disclosure[open] > summary {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.hq-disclosure-section-title {
  border-top: 1px solid var(--border-subtle);
  margin-top: 18px;
  padding-top: 18px;
}

.couple-workbench-header p {
  color: var(--text-secondary);
  margin: 8px 0 0;
  max-width: 680px;
}

.couple-search-form,
.couple-create-form {
  align-items: end;
  display: grid;
  gap: 14px;
}

.couple-search-form {
  grid-template-columns: minmax(220px, 1fr) auto;
  margin-bottom: 14px;
}

.couple-create-form {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) minmax(180px, 0.75fr) auto;
}

.couple-create-page {
  padding-bottom: 40px;
}

.couple-create-page .mobile-navbar {
  margin-bottom: 12px;
}

.couple-create-page .couple-create-panel {
  margin-top: 0;
}

.couple-create-intro {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: -4px 0 20px;
}

.couple-picker-block + .couple-picker-block {
  border-top: 1px solid var(--border-subtle);
  margin-top: 22px;
  padding-top: 22px;
}

.couple-picker-label {
  color: var(--text-primary);
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 9px;
}

.couple-picker-locked {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: 13px;
  justify-content: center;
  min-height: 46px;
}

.couple-picker-search {
  align-items: end;
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.couple-picker-search .field {
  flex: 1;
  min-width: 0;
}

.couple-picker-search .btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 15px;
  width: auto;
}

.couple-picker-note {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 9px 0 0;
}

.couple-create-page .couple-create-form {
  display: block;
}

.person-search-input {
  margin-bottom: 8px;
}

.person-choice-list {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  max-height: 252px;
  overflow-y: auto;
}

.person-choice-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}

.person-choice-row[hidden] {
  display: none;
}

.person-choice-row:last-child {
  border-bottom: none;
}

.person-choice-row:has(input:checked) {
  background: var(--action-primary-soft);
}

.person-choice-row.is-disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.55;
}

.person-choice-row input[type="radio"] {
  accent-color: var(--action-primary);
  flex: none;
  height: 20px;
  width: 20px;
}

.person-choice-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.person-choice-main strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.person-choice-main small,
.person-choice-status,
.person-choice-empty {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.person-choice-status {
  margin: 8px 0 0;
}

.person-choice-empty {
  margin: 0;
  padding: 14px;
}

.person-choice-locked {
  align-items: flex-start;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  min-height: 46px;
  padding: 12px 14px;
}

.person-choice-locked strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
}

.person-choice-locked small {
  color: var(--text-secondary);
  font-size: 13px;
}

.couple-relationship-field {
  border-top: 1px solid var(--border-subtle);
  margin-top: 22px;
  padding-top: 22px;
}

.couple-relationship-field .field-label small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}

.couple-create-submit {
  border-top: 1px solid var(--border-subtle);
  margin-top: 20px;
  padding-top: 20px;
}

.couple-create-submit .btn {
  width: 100%;
}

.couple-report-table th:nth-child(1),
.couple-report-table td:nth-child(1) {
  width: 28%;
}

.couple-report-table th:nth-child(2),
.couple-report-table td:nth-child(2) {
  width: 26%;
}

.couple-report-table th:nth-child(3),
.couple-report-table td:nth-child(3) {
  width: 12%;
}

.couple-report-table th:nth-child(4),
.couple-report-table td:nth-child(4) {
  width: 16%;
}

.couple-report-table th:nth-child(5),
.couple-report-table td:nth-child(5) {
  width: 18%;
}

.couple-hero-panel {
  display: grid;
  gap: 16px;
}

.couple-hero-panel h2 {
  font-size: 34px;
  line-height: 1.18;
  margin: 0;
}

.couple-short-grid,
.couple-type-columns,
.couple-share-people {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couple-short-grid div,
.couple-type-columns > div,
.couple-share-people div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 8px;
  padding: 14px;
}

.couple-short-grid span,
.couple-type-columns span,
.couple-share-people span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.couple-type-row {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  min-height: 34px;
  padding-top: 8px;
}

.couple-type-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.couple-type-row em {
  color: var(--action-primary);
  font-style: normal;
  font-weight: 850;
}

.couple-insight-list,
.couple-bug-list,
.couple-dimension-list {
  display: grid;
  gap: 12px;
}

.couple-insight-list div {
  align-items: start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 14px;
}

.couple-insight-list span {
  align-items: center;
  background: var(--action-primary);
  border-radius: 999px;
  color: var(--action-on-primary);
  display: inline-flex;
  font-weight: 850;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.couple-insight-list p,
.couple-hook-panel p,
.couple-share-section p,
.couple-share-hook p {
  line-height: 1.7;
  margin: 0;
}

.couple-bug-list article {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.couple-bug-list h3 {
  font-size: 18px;
  margin: 0;
}

.couple-bug-list dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.couple-bug-list dl div {
  display: grid;
  gap: 8px;
  grid-template-columns: 56px minmax(0, 1fr);
}

.couple-bug-list dt {
  color: var(--text-secondary);
  font-weight: 750;
}

.couple-bug-list dd {
  margin: 0;
}

.couple-dimension-row {
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) 76px;
  padding: 12px;
}

.couple-bars {
  display: grid;
  gap: 6px;
}

.couple-bars i {
  background: var(--action-primary);
  border-radius: 999px;
  display: block;
  height: 9px;
  max-width: 100%;
}

.couple-bars i + i {
  background: var(--accent-structure);
}

.couple-dimension-row strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.couple-share-page {
  margin: 0 auto;
  max-width: 520px;
  padding: 18px 16px 44px;
}

.couple-share-actions {
  margin-bottom: 14px;
}

.couple-share-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 18px;
  padding: 24px;
}

.couple-share-card h1 {
  font-size: 31px;
  line-height: 1.18;
  margin: 0;
}

.couple-share-keyword {
  background: var(--action-primary);
  border-radius: var(--radius-md);
  color: var(--action-on-primary);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.35;
  padding: 14px 16px;
}

.couple-share-section {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.couple-share-section h2 {
  font-size: 18px;
  margin: 0;
}

.couple-share-section article {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  display: grid;
  gap: 6px;
  padding: 12px;
}

.couple-share-hook {
  background: color-mix(in srgb, var(--action-primary) 9%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--action-primary) 18%, var(--border-subtle));
  border-radius: var(--radius-md);
  padding: 14px;
}

.couple-report-hero {
  background: var(--surface-paper);
}

.couple-report-lead {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  max-width: 68ch;
}

.detail-definition-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couple-chart-section {
  display: grid;
  gap: 18px;
}

.couple-chart-grid {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.couple-radar-chart {
  height: 360px;
  min-width: 0;
}

.couple-type-columns.compact {
  gap: 10px;
}

.couple-compare-bars {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.couple-compare-row {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
}

.couple-compare-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.couple-compare-head strong {
  color: var(--text-primary);
  min-width: 0;
}

.couple-bar-pair {
  display: grid;
  gap: 8px;
}

.couple-bar-pair > div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(64px, 0.35fr) minmax(0, 1fr) auto;
  min-width: 0;
}

.couple-bar-pair .score-track {
  height: 9px;
}

.couple-bar-pair .score-track.alt i {
  background: var(--accent-structure);
}

.couple-bar-pair em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 850;
  min-width: 34px;
  text-align: right;
}

.couple-compare-row p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 0;
}

.couple-dimension-compare,
.relationship-compare-bars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couple-highlight-grid.compact-reading {
  margin-top: 0;
}

.couple-highlight-grid {
  display: grid;
  gap: 12px;
}

.couple-highlight-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.couple-highlight-grid section,
.couple-support-list section,
.report-image-kind-card,
.couple-export-section article {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 14px;
  padding: 14px;
}

.couple-highlight-grid h2,
.couple-highlight-grid h3,
.couple-support-list h3,
.couple-export-section h2 {
  font-size: 15px;
  margin: 0 0 8px;
}

.couple-highlight-grid p,
.couple-support-list p,
.couple-export-section p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.couple-highlight-grid p + p,
.couple-export-section article + article {
  margin-top: 7px;
}

.couple-highlight-grid strong,
.couple-export-section strong {
  color: var(--text-primary);
}

.couple-insight-list.rich p strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.couple-support-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.couple-hook-panel {
  background: color-mix(in srgb, var(--accent-structure) 9%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--accent-structure) 18%, var(--border-subtle));
  border-radius: 16px;
  margin-top: 14px;
  padding: 16px;
}

.couple-hook-panel.muted {
  background: var(--surface-muted);
}

.couple-hook-panel h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.report-image-kind-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-image-kind-card {
  color: inherit;
  display: grid;
  gap: 8px;
  min-height: 92px;
  text-decoration: none;
}

.report-image-kind-card strong {
  font-size: 18px;
  line-height: 1.35;
}

.report-image-kind-card span {
  color: var(--action-primary);
  font-size: 13px;
  font-weight: 800;
}

.couple-export-card {
  background: #fffefa;
  border-radius: 24px;
  color: var(--text-primary);
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: 0;
}

.couple-export-head {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  gap: 10px;
  padding: 28px 34px 22px;
  text-align: center;
}

.couple-export-head h1 {
  font-size: 34px;
  line-height: 1.18;
  margin: 0;
}

.couple-export-head p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 58ch;
}

.couple-export-keyword {
  align-self: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--accent-structure);
  display: inline-flex;
  font-size: 22px;
  font-weight: 850;
  justify-self: center;
  line-height: 1.35;
  padding: 9px 22px;
}

.couple-export-two-col,
.couple-export-chart-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 34px;
}

.couple-export-two-col div,
.couple-export-main-reading,
.couple-export-chart-panel,
.couple-export-rank-list,
.couple-export-missing {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.couple-export-main-reading {
  margin: 0 34px;
  padding: 18px 20px;
}

.couple-export-main-reading h2 {
  color: var(--accent-structure);
  font-size: 18px;
  margin: 0;
}

.couple-export-main-reading p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

.couple-export-two-col span,
.couple-export-rank-list span,
.couple-export-footer span {
  color: var(--text-secondary);
  font-size: 13px;
}

.couple-export-two-col strong {
  font-size: 20px;
}

.couple-export-chart-panel {
  align-content: center;
  min-height: 390px;
  padding: 10px 12px 6px;
}

.couple-export-radar {
  height: 392px;
  min-height: 392px;
}

.couple-export-relationship-chart {
  height: 460px;
  margin: 0 34px;
}

.couple-export-rank-list h2,
.couple-export-missing h2 {
  font-size: 18px;
  margin: 0;
}

.couple-export-rank-list p {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.couple-export-rank-list hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 4px 0;
  width: 100%;
}

.couple-export-relationship .relationship-group-grid,
.couple-export-relationship .couple-highlight-grid {
  margin-left: 34px;
  margin-right: 34px;
}

.couple-export-section {
  display: grid;
  gap: 12px;
  padding: 0 24px;
}

.couple-export-section.lead {
  padding: 0 24px;
}

.couple-export-section article {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 16px;
  display: grid;
  gap: 7px;
  padding: 16px 18px;
}

.couple-export-footer {
  background: var(--surface-warm);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 6px;
  padding: 18px 34px 22px;
  text-align: center;
}

.couple-export-footer strong {
  color: var(--text-primary);
  line-height: 1.55;
}

.inline-form {
  display: inline;
}

.tool-form {
  max-width: 760px;
}

.mini-label {
  color: var(--accent-structure);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
}

.learner-app,
.mobile-page {
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
}

.learner-app {
  background: var(--surface-page);
  padding: 0 16px 104px;
  position: relative;
}

.mobile-page {
  padding: 0 16px 104px;
}

.mobile-navbar {
  align-items: center;
  background: #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  height: 44px;
  margin: 0 -16px 16px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 30;
}

.mobile-navbar h1 {
  color: rgba(0, 0, 0, 0.9);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-navbar-side {
  align-items: center;
  display: flex;
  height: 44px;
  justify-content: center;
  min-width: 0;
  width: 48px;
}

.mobile-back {
  align-items: center;
  color: rgba(0, 0, 0, 0.9);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.mobile-back svg {
  height: 24px;
  width: 12px;
}

.assessment-heading h1,
.report-hero h1 {
  font-size: 30px;
  line-height: 1.18;
  margin: 0;
}

.avatar {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  color: var(--action-primary-pressed);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
}

.avatar-small {
  border-radius: 18px;
  height: 42px;
  width: 42px;
}

.avatar-large {
  border-radius: 24px;
  flex: 0 0 auto;
  font-size: 26px;
  height: 64px;
  width: 64px;
}

.learner-tab-panel {
  display: grid;
  gap: 14px;
  padding-bottom: 96px;
}

.character-stack {
  align-items: center;
  display: inline-flex;
  min-width: max-content;
}

.character-stack .char-token + .char-token {
  margin-left: -6px;
}

.char-token {
  --token-size: 24px;
  border: 0;
  box-shadow: none;
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(56, 40, 24, 0.13));
  flex: 0 0 auto;
  font-size: var(--token-size);
  height: var(--token-size);
  position: relative;
  width: var(--token-size);
}

.char-token.green {
  background:
    radial-gradient(circle at 50% 26%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 75% 43%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 65% 70%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 35% 70%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 25% 43%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 50% 54%, var(--character-green) 0 28%, transparent 29%);
  transform: rotate(-4deg);
}

.char-token.red {
  background: var(--character-red);
  border-radius: 8px;
}

.char-token.blue {
  background: var(--character-blue);
  border: 0;
  clip-path: polygon(50% 4%, 94% 94%, 6% 94%);
}

.char-token.yellow {
  background: var(--character-yellow);
  border-radius: 50%;
}

.character-thread {
  align-items: center;
  background: linear-gradient(
    90deg,
    var(--character-green) 0 25%,
    var(--character-red) 25% 50%,
    var(--character-blue) 50% 75%,
    var(--character-yellow) 75% 100%
  );
  border-radius: 999px;
  display: flex;
  gap: 4px;
  height: 4px;
  overflow: hidden;
  width: 104px;
}

.character-thread i {
  display: none;
}

.character-hero {
  align-content: center;
  background: var(--surface-warm);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  display: grid;
  gap: 11px;
  justify-items: center;
  min-height: 128px;
  overflow: hidden;
  padding: 22px 18px 18px;
  position: relative;
}

.character-hero::before,
.character-hero::after {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--character-green) 68%, white) 0 3.4px, transparent 4px),
    radial-gradient(circle, color-mix(in srgb, var(--character-red) 70%, white) 0 3px, transparent 3.7px),
    radial-gradient(circle, color-mix(in srgb, var(--character-blue) 68%, white) 0 3.2px, transparent 3.9px),
    radial-gradient(circle, color-mix(in srgb, var(--character-yellow) 70%, white) 0 3.5px, transparent 4.1px);
  background-position: 8px 10px, 34px 40px, 70px 12px, 106px 38px;
  background-repeat: no-repeat;
  content: "";
  height: 54px;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 36px;
  width: 138px;
}

.character-hero::before {
  left: 42px;
}

.character-hero::after {
  right: 42px;
  transform: scaleX(-1) rotate(-2deg);
}

.hero-shapes {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-shapes .char-token {
  --token-size: 42px;
}

.hero-shapes .char-token + .char-token {
  margin-left: 0;
}

.campaign-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.campaign-card::before {
  content: none;
}

.campaign-card-body {
  padding: 20px 20px 18px;
}

.campaign-card h1,
.campaign-card h2 {
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 12px;
  text-wrap: balance;
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.learner-app .btn,
.mobile-page .btn {
  border-radius: 12px;
  min-height: 50px;
  padding: 12px 18px;
}

.friend-list-section-title .btn,
.friend-detail-section-tools .btn {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 8px;
  width: auto;
}

.learner-app .friend-list-section-title,
.mobile-page .friend-report-section-title {
  align-items: center;
  flex-direction: row;
}

.learner-app .friend-list-section-title .btn-secondary,
.mobile-page .friend-detail-section-tools .btn-secondary {
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

.campaign-actions .btn {
  flex: 1 1 138px;
}

.assessment-card-status {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
  min-height: 42px;
  padding: 9px 12px;
}

.assessment-card-status span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.assessment-card-status strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.campaign-personal-meta {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
}

.campaign-personal-meta > span {
  align-items: baseline;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

.campaign-personal-meta small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.campaign-personal-meta strong {
  color: var(--text-primary);
  font-size: 14px;
}

.campaign-personal-meta a {
  color: var(--action-primary-pressed);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.campaign-personal-meta a span {
  font-size: 17px;
  margin-left: 2px;
  vertical-align: -1px;
}

.campaign-own-report-list {
  margin-top: 12px;
}

.play-placeholder-section {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58vh;
  padding: 28px 20px 72px;
  text-align: center;
}

.weui-sticker-icon {
  color: var(--action-primary);
  display: block;
  height: 52px;
  margin-bottom: 18px;
  width: 52px;
}

.weui-sticker-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.play-placeholder-section h2 {
  font-size: 22px;
  margin: 0;
}

.play-placeholder-section p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 8px 0 0;
}

.own-assessment-panel {
  gap: 12px;
}

.own-assessment-status {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

.own-assessment-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.own-report-list {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  margin-top: 2px;
}

.own-report-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 0;
  text-decoration: none;
}

.own-report-row > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.own-report-row strong {
  font-size: 15px;
}

.own-report-row small {
  color: var(--text-secondary);
  font-size: 12px;
}

.text-action {
  align-items: center;
  color: var(--action-primary);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  padding-top: 2px;
  text-decoration: none;
}

.mobile-section {
  border-radius: 16px;
  box-shadow: none;
  margin-bottom: 0;
  padding: 18px;
}

.profile-card {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  display: flex;
  gap: 14px;
  padding: 18px;
}

.account-card {
  align-items: flex-start;
}

.profile-card h2 {
  margin-bottom: 4px;
}

.profile-card p {
  margin-bottom: 0;
}

.list-link {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  min-height: 54px;
  padding-top: 14px;
}

.list-link small {
  color: var(--text-secondary);
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-top: 3px;
}

.account-menu-section .list-link:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.account-menu-section .compact-row strong {
  font-size: 14px;
}

.growth-entry-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.growth-entry {
  align-items: stretch;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(76, 54, 35, 0.045);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  min-height: 154px;
  padding: 15px 13px 13px;
  position: relative;
}

.growth-entry:active,
.spark-choice-button:active,
.persona-choice-card:active {
  transform: translateY(1px);
}

.growth-entry-primary {
  grid-template-rows: 46px minmax(0, 1fr);
  justify-items: center;
  padding-bottom: 16px;
  text-align: center;
}

.growth-entry-primary .growth-entry-icon {
  justify-self: center;
}

.growth-entry-secondary {
  align-items: center;
  grid-column: 1 / -1;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 12px 14px 12px 12px;
}

.growth-entry-secondary .growth-entry-copy {
  gap: 3px;
}

.growth-entry-icon {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 14px;
  display: flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.growth-entry-icon-rollcall {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, auto);
}

.growth-entry-icon-rollcall .char-token {
  --token-size: 14px;
  filter: drop-shadow(0 2px 4px rgba(56, 40, 24, 0.1));
}

.growth-entry-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.growth-entry-primary .growth-entry-copy {
  align-content: start;
  justify-items: center;
  min-height: 92px;
}

.growth-entry-copy strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.growth-entry-copy b {
  color: var(--action-primary-pressed);
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.growth-entry-copy small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.growth-entry-primary .growth-entry-copy small {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 40px;
}

.growth-entry-copy small span {
  display: block;
}

.growth-entry-arrow {
  color: var(--action-primary-pressed);
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  justify-self: end;
}

.growth-entry-secondary .growth-entry-arrow {
  align-self: center;
}

.spark-mark {
  background: var(--character-yellow);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  display: block;
  filter: drop-shadow(0 3px 5px rgba(160, 105, 26, 0.16));
  height: 25px;
  width: 25px;
}

.review-mark {
  background: var(--surface-paper);
  border: 2px solid color-mix(in srgb, var(--action-primary) 62%, var(--border-subtle));
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(76, 54, 35, 0.08);
  display: block;
  height: 28px;
  position: relative;
  width: 24px;
}

.review-mark::before {
  background: color-mix(in srgb, var(--action-primary) 62%, white);
  border-radius: 999px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent-structure) 48%, white);
  content: "";
  height: 2px;
  left: 5px;
  position: absolute;
  right: 5px;
  top: 8px;
}

.review-mark::after {
  border-bottom: 6px solid color-mix(in srgb, var(--border-subtle) 70%, white);
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
}

@media (max-width: 360px) {
  .growth-entry-list {
    grid-template-columns: 1fr;
  }

  .growth-entry-secondary {
    grid-column: auto;
  }
}

.growth-page {
  display: grid;
  gap: 14px;
}

.growth-page .mobile-navbar {
  margin-bottom: 0;
}

.growth-intro h1,
.growth-result-head h1 {
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 0;
}

.growth-intro p:last-child,
.growth-result-head p:last-child {
  margin-bottom: 0;
}

.growth-form {
  gap: 12px;
}

.growth-form .field {
  margin-bottom: 0;
}

.growth-textarea {
  min-height: 124px;
  resize: vertical;
}

.spark-flow-page {
  align-content: start;
}

.spark-flow-head {
  display: grid;
  gap: 8px;
  padding: 4px 2px 2px;
}

.spark-flow-head h1 {
  font-size: 26px;
  line-height: 1.18;
  margin: 0;
}

.spark-flow-progress {
  background: color-mix(in srgb, var(--accent-structure) 14%, var(--surface-paper));
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}

.spark-flow-progress span {
  background: var(--action-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.18s ease-out;
}

.spark-state-strip {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.spark-state-emoji {
  align-items: center;
  background: color-mix(in srgb, var(--character-yellow) 18%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--character-yellow) 38%, var(--border-subtle));
  border-radius: 12px;
  display: inline-flex;
  font-size: 19px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.spark-state-strip strong,
.spark-summary-list strong {
  color: var(--text-primary);
}

.spark-state-strip small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spark-step-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(76, 54, 35, 0.045);
  display: grid;
  gap: 18px;
  padding: 18px;
}

.spark-step-card-draw {
  gap: 20px;
}

.spark-prompt {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.spark-prompt h2 {
  font-size: 20px;
  line-height: 1.32;
  margin: 0 0 5px;
  text-wrap: balance;
}

.spark-prompt p {
  font-size: 14px;
  line-height: 1.58;
  margin: 0;
}

.spark-prompt-icon,
.spark-card-mark {
  background: var(--character-yellow);
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  display: inline-block;
  filter: drop-shadow(0 3px 5px rgba(160, 105, 26, 0.16));
  height: 24px;
  width: 24px;
}

.spark-prompt-icon {
  align-self: start;
  margin-top: 2px;
}

.spark-card-mark-large {
  height: 44px;
  width: 44px;
}

.spark-draw-card {
  align-items: center;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--character-yellow) 18%, transparent) 0 46px, transparent 47px),
    color-mix(in srgb, var(--surface-muted) 54%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--accent-structure) 22%, var(--border-subtle));
  border-radius: 20px;
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 188px;
  padding: 24px 22px;
  text-align: center;
}

.spark-draw-emoji {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid color-mix(in srgb, var(--accent-structure) 25%, var(--border-subtle));
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(130, 85, 27, 0.08);
  display: inline-flex;
  font-size: 38px;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.spark-draw-card strong {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.spark-draw-card p {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

.spark-action-stack,
.spark-flow-form {
  display: grid;
  gap: 10px;
}

.spark-action-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spark-text-button {
  background: transparent;
  border: 0;
  color: var(--action-primary-pressed);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  min-height: 38px;
  padding: 8px 2px;
}

.spark-text-button-center {
  justify-self: center;
}

.spark-choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spark-choice-button {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 14px 12px;
  text-align: left;
}

.spark-choice-button strong {
  font-size: 18px;
  font-weight: 900;
}

.spark-choice-button span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.spark-choice-button:focus-visible,
.spark-text-button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent);
  outline: none;
}

.spark-field {
  display: grid;
  gap: 8px;
}

.spark-field > span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.spark-textarea {
  font-size: 16px;
  line-height: 1.65;
}

.spark-moment-list {
  display: grid;
  gap: 8px;
}

.spark-moment-list span {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  display: block;
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
}

.spark-moment-list-numbered {
  counter-reset: spark-moment;
}

.spark-moment-list-numbered span {
  padding-left: 36px;
  position: relative;
}

.spark-moment-list-numbered span::before {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--action-primary-pressed);
  content: counter(spark-moment);
  counter-increment: spark-moment;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  left: 10px;
  position: absolute;
  top: 11px;
  width: 20px;
}

.spark-summary-list {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  padding: 2px 12px;
}

.spark-summary-list div {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 5px;
  padding: 11px 0;
}

.spark-summary-list div:first-child {
  border-top: 0;
}

.spark-summary-list span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.spark-summary-list strong {
  font-size: 14px;
  line-height: 1.55;
}

.rollcall-page,
.review-page {
  align-content: start;
}

.rollcall-guide {
  align-content: start;
  display: grid;
  gap: 20px;
  min-height: calc(100dvh - 142px);
  padding: 8px 2px 18px;
}

.rollcall-guide-image {
  aspect-ratio: 720 / 396;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(76, 54, 35, 0.07);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

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

.rollcall-guide-copy h1 {
  font-size: 30px;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

.rollcall-guide-copy p {
  color: color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary));
  font-size: 15px;
  line-height: 1.78;
  margin: 0;
}

.rollcall-guide-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.rollcall-guide-actions form {
  margin: 0;
}

.rollcall-stage-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

.rollcall-stage-card img {
  aspect-ratio: 1690 / 931;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.rollcall-stage-copy {
  padding: 18px 18px 20px;
}

.rollcall-stage-copy h1,
.review-head h1,
.rollcall-flow-head h1 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 8px;
  text-wrap: balance;
}

.rollcall-stage-copy p:last-child,
.review-head p:last-child {
  margin-bottom: 0;
}

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

.rollcall-resume-card h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.rollcall-resume-card p:last-child {
  margin-bottom: 0;
}

.rollcall-context-card,
.review-paper-form {
  display: grid;
  gap: 12px;
}

.unified-record-form .paper-section,
.clean-review-form .paper-section,
.records-list-page .paper-section {
  border-radius: 16px;
}

.field-required,
.field-optional {
  color: var(--action-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  margin-left: 4px;
}

.field-optional {
  color: var(--text-secondary);
}

.process-record-panel {
  display: grid;
  gap: 2px;
}

.process-record-panel .field {
  margin-bottom: 10px;
}

.process-upload-control {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.process-file-input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.process-upload-button {
  cursor: pointer;
}

.process-file-name {
  color: var(--text-secondary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

[data-process-upload-status].is-success {
  color: var(--action-primary);
}

[data-process-upload-status].is-error {
  color: var(--status-danger);
}

.record-scope-control,
.record-filter-pills {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scope-pill,
.filter-pill {
  align-items: center;
  background: color-mix(in srgb, var(--surface-paper) 88%, white);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-primary);
  display: flex;
  font: inherit;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  text-align: center;
}

.scope-pill input {
  margin-right: 6px;
}

.filter-pill.active,
.scope-pill:has(input:checked) {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: white;
}

.record-filter-form,
.speaker-map-list {
  display: grid;
  gap: 12px;
}

.compact-filter-field {
  margin: 0;
}

.source-details summary {
  align-items: center;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  font-weight: 850;
  min-height: 44px;
}

.source-text-preview {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
  margin-top: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.attachment-list {
  margin-bottom: 12px;
}

.rollcall-context-panel {
  align-content: start;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(76, 54, 35, 0.045);
  display: grid;
  gap: 16px;
  min-height: calc(100dvh - 190px);
  padding: 20px 18px;
}

.rollcall-context-card,
.review-paper {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(76, 54, 35, 0.045);
  padding: 18px;
}

.rollcall-prompt-line {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.rollcall-prompt-line h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.rollcall-prompt-line p {
  margin-bottom: 0;
}

.rollcall-input-head {
  align-items: center;
  display: flex;
  gap: 10px;
}

.rollcall-input-head h1 {
  font-size: 22px;
  line-height: 1.32;
  margin: 0;
  text-wrap: balance;
}

.rollcall-dot-stack {
  align-items: center;
  display: inline-flex;
  min-height: 32px;
}

.rollcall-dot-stack .char-token {
  --token-size: 22px;
}

.rollcall-dot-stack .char-token + .char-token {
  margin-left: -6px;
}

.rollcall-field {
  margin-top: 12px;
}

.rollcall-context-panel .rollcall-field {
  margin-bottom: 0;
  margin-top: 0;
}

.rollcall-field textarea,
.review-field textarea {
  background: color-mix(in srgb, var(--surface-paper) 90%, white);
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.7;
}

.rollcall-context-panel textarea {
  min-height: min(42vh, 320px);
}

.rollcall-context-panel > .btn {
  align-self: end;
  margin-top: auto;
}

.rollcall-flow-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  padding: 4px 2px 0;
}

.rollcall-flow-head span {
  color: var(--action-primary-pressed);
  font-size: 13px;
  font-weight: 900;
}

.rollcall-progress {
  margin-top: -6px;
}

.rollcall-ready-card,
.rollcall-note-card,
.rollcall-question-card,
.rollcall-insight-card,
.review-result-paper,
.rollcall-diary-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(76, 54, 35, 0.045);
  padding: 18px;
}

.rollcall-ready-card {
  display: grid;
  gap: 6px;
}

.rollcall-ready-card h2 {
  font-size: 20px;
  margin: 0;
}

.rollcall-ready-card p,
.rollcall-question-card p {
  color: var(--text-primary);
  line-height: 1.72;
  margin: 0;
}

.rollcall-note-card {
  background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface-paper));
  display: grid;
  gap: 8px;
}

.rollcall-note-card strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.rollcall-note-card p {
  color: var(--text-primary);
  margin-bottom: 0;
}

.rollcall-choice-brief {
  background: color-mix(in srgb, var(--surface-muted) 54%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent);
  border-radius: 16px;
  padding: 13px 14px;
}

.rollcall-choice-brief p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.rollcall-action-stack {
  display: grid;
  gap: 10px;
}

.rollcall-action-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rollcall-context-more[hidden] {
  display: none;
}

.rollcall-context-more {
  display: grid;
  gap: 12px;
}

.persona-choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.persona-choice-form {
  display: contents;
}

.persona-choice-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 142px;
  padding: 15px 12px;
  position: relative;
  text-align: left;
}

.persona-choice-card:disabled {
  cursor: default;
  opacity: 0.62;
}

.persona-choice-card strong {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.28;
}

.persona-choice-card small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.persona-choice-card em {
  background: color-mix(in srgb, var(--status-success) 16%, var(--surface-paper));
  border-radius: 999px;
  color: color-mix(in srgb, var(--status-success) 76%, #1f1f1f);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 4px 7px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.persona-token .char-token {
  --token-size: 32px;
}

.rollcall-question-card {
  align-items: start;
  background: color-mix(in srgb, var(--surface-warm) 56%, var(--surface-paper));
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.rollcall-question-token {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.rollcall-question-token .char-token {
  --token-size: 26px;
}

.rollcall-question-text {
  display: grid;
  gap: 7px;
}

.rollcall-question-card small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.rollcall-saved-answer {
  border-style: dashed;
}

.rollcall-answer-form {
  min-height: min(48vh, 430px);
}

.rollcall-answer-form textarea {
  min-height: min(34vh, 280px);
}

.rollcall-answer-form > .btn {
  margin-top: auto;
}

.rollcall-insight-card {
  display: grid;
  gap: 12px;
}

.rollcall-insight-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.rollcall-insight-title strong {
  font-size: 17px;
}

.rollcall-insight-title em {
  background: color-mix(in srgb, var(--accent-structure) 14%, var(--surface-paper));
  border-radius: 999px;
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
}

.rollcall-insight-card p {
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 0;
}

.rollcall-history {
  display: grid;
  gap: 0;
}

.rollcall-history-row {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  min-height: 42px;
}

.rollcall-history-row:first-of-type {
  border-top: 0;
}

.rollcall-history-row strong {
  font-size: 14px;
}

.rollcall-history-row span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.review-head {
  padding: 4px 2px 0;
}

.review-paper {
  min-height: 310px;
  overflow: hidden;
  position: relative;
}

.review-paper::after {
  border-bottom: 22px solid color-mix(in srgb, var(--border-subtle) 62%, white);
  border-left: 22px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
}

.review-paper-lines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 35px,
    color-mix(in srgb, var(--border-subtle) 52%, transparent) 36px
  );
  inset: 52px 18px 18px;
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
}

.review-field {
  position: relative;
  z-index: 1;
}

.review-field textarea {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 244px;
  padding: 8px 0;
}

.review-field textarea:focus {
  box-shadow: none;
}

.review-result-paper {
  position: relative;
}

.review-result-paper::before {
  background: var(--action-primary);
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}

.review-result-paper h2,
.rollcall-diary-card h2 {
  font-size: 23px;
  line-height: 1.28;
  margin-bottom: 12px;
}

.review-markdown h1,
.review-markdown h2,
.review-markdown h3,
.generation-preview[data-stream-format="markdown"] h3,
.generation-preview[data-stream-format="markdown"] h4 {
  color: var(--text-primary);
  line-height: 1.35;
  margin: 0 0 12px;
}

.review-markdown h1,
.generation-preview[data-stream-format="markdown"] h3 {
  font-size: 24px;
}

.review-markdown h2,
.generation-preview[data-stream-format="markdown"] h4 {
  font-size: 18px;
}

.review-markdown h3 {
  font-size: 16px;
}

.review-markdown p,
.generation-preview[data-stream-format="markdown"] p {
  margin: 0 0 14px;
}

.review-markdown ul,
.generation-preview[data-stream-format="markdown"] ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.review-markdown li,
.generation-preview[data-stream-format="markdown"] li {
  margin: 5px 0;
}

.review-markdown blockquote,
.generation-preview[data-stream-format="markdown"] blockquote {
  border-left: 3px solid var(--action-primary);
  color: var(--text-secondary);
  margin: 16px 0;
  padding: 2px 0 2px 14px;
}

.review-after-note {
  display: grid;
  gap: 10px;
}

.review-after-note .btn {
  margin-top: 2px;
}

.spark-result-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.spark-result-card .mini-label,
.spark-activation-card .mini-label,
.lantern-result-card .mini-label,
.review-share-card .mini-label {
  margin-bottom: 0;
}

.lantern-result-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.lantern-result-head .mini-label {
  flex: 1 1 180px;
}

.lantern-result-head .btn {
  flex: 0 0 auto;
}

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

.review-share-actions {
  margin-top: 2px;
}

.spark-result-face {
  align-items: center;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--character-yellow) 16%, transparent) 0 42px, transparent 43px),
    color-mix(in srgb, var(--surface-muted) 58%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--accent-structure) 24%, var(--border-subtle));
  border-radius: 20px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 192px;
  padding: 22px;
  text-align: center;
}

.spark-result-emoji {
  font-size: 42px;
  line-height: 1;
}

.spark-result-face strong {
  color: var(--text-primary);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
}

.spark-result-face small {
  color: var(--action-primary-pressed);
  font-size: 14px;
  font-weight: 800;
}

.spark-result-card > p {
  color: var(--text-primary);
  line-height: 1.75;
  margin-bottom: 0;
}

.rollcall-diary-card {
  display: grid;
  gap: 12px;
}

.rollcall-medal-card {
  align-items: start;
  background: color-mix(in srgb, var(--accent-structure) 10%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--accent-structure) 30%, var(--border-subtle));
  border-radius: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 18px;
}

.rollcall-medal-card > span {
  align-items: center;
  background: var(--surface-paper);
  border-radius: 16px;
  display: inline-flex;
  font-size: 28px;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.rollcall-medal-card h2 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 4px;
  text-align: center;
  text-wrap: balance;
}

.rollcall-medal-card > div {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  width: 100%;
}

.rollcall-medal-card p {
  margin-bottom: 0;
}

.rollcall-medal-card > div > p {
  justify-self: center;
  max-width: 28ch;
  text-align: center;
}

.rollcall-medal-card .result-block,
.rollcall-medal-card .quote-box,
.rollcall-medal-card .btn {
  justify-self: stretch;
}

.rollcall-medal-card .btn {
  margin-top: 6px;
}

.medal-kicker {
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-weight: 900;
  justify-self: center;
}

.persona-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.persona-mini-list span {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
}

.record-relation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-relation-chip {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
}

.relation-search-input {
  margin-bottom: 8px;
}

.relation-multi-scroll {
  max-height: 216px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-paper);
}

.relation-multi-scroll label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.relation-multi-scroll label:last-child {
  border-bottom: none;
}

.relation-multi-scroll label:has(input:checked) {
  background: var(--action-primary-soft);
}

.relation-multi-scroll input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--action-primary);
}

.static-record {
  cursor: default;
}

.rollcall-insight {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 8px;
  padding: 14px 0;
}

.rollcall-insight:first-child {
  border-top: 0;
  padding-top: 0;
}

.rollcall-insight-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.rollcall-insight-head strong {
  color: var(--text-primary);
}

.rollcall-insight-head em,
.rollcall-insight small {
  color: var(--action-primary-pressed);
  font-style: normal;
  font-weight: 800;
}

.rollcall-insight p {
  margin-bottom: 0;
}

.growth-result-card {
  display: grid;
  gap: 12px;
}

.growth-result-card h2 {
  margin-bottom: 0;
}

.quote-box,
.soft-note {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  color: var(--text-primary);
  line-height: 1.7;
  padding: 13px 14px;
}

.quote-box {
  background: color-mix(in srgb, var(--accent-structure) 8%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--accent-structure) 28%, var(--border-subtle));
  font-weight: 700;
}

.soft-note {
  color: var(--text-secondary);
}

.result-time {
  font-size: 13px;
}

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

.result-mark {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.result-lede {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.75;
}

.result-block {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  padding: 13px 14px;
}

.result-block strong {
  color: var(--text-primary);
  font-size: 14px;
}

.result-block p,
.result-prose {
  color: var(--text-primary);
  line-height: 1.85;
  margin-bottom: 0;
  text-wrap: pretty;
}

.delivery-readout-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.delivery-readout-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.delivery-readout-card.primary,
.delivery-readout-card.shareable {
  background: var(--surface-muted);
}

.delivery-readout-card.next {
  border-color: color-mix(in srgb, var(--action-primary) 28%, var(--border-subtle));
}

.delivery-readout-card p {
  color: var(--text-primary);
  line-height: 1.72;
  margin-bottom: 0;
}

.rollcall-mode-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin: 14px 0;
}

.rollcall-mode-strip div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  padding: 12px 13px;
}

.rollcall-mode-strip strong {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.45;
}

.result-prose h3 {
  color: var(--action-primary-pressed);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  margin: 16px 0 8px;
}

.result-prose h3:first-child {
  margin-top: 0;
}

.result-prose p {
  margin: 0 0 12px;
}

.result-prose p:last-child {
  margin-bottom: 0;
}

.result-prose ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.result-prose li {
  padding-left: 18px;
  position: relative;
}

.result-prose li::before {
  background: var(--action-primary);
  border-radius: 999px;
  content: "";
  height: 6px;
  left: 2px;
  position: absolute;
  top: 0.78em;
  width: 6px;
}

.result-note {
  margin-bottom: 10px;
}

.diary-text {
  white-space: normal;
}

.generation-panel {
  display: grid;
  gap: 16px;
  margin-top: 10px;
  min-height: 58vh;
}

.generation-panel h1 {
  font-size: 28px;
  line-height: 1.22;
  margin-bottom: 0;
}

.generation-state {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  color: var(--text-primary);
  display: flex;
  font-weight: 700;
  gap: 10px;
  min-height: 48px;
  padding: 11px 13px;
}

.generation-pulse {
  background: var(--action-primary);
  border-radius: 999px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--action-primary) 32%, transparent);
  display: inline-block;
  height: 10px;
  width: 10px;
  animation: generation-pulse 1.3s ease-out infinite;
}

.generation-preview {
  background: color-mix(in srgb, var(--surface-muted) 64%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.75;
  max-height: 45vh;
  min-height: 220px;
  overflow: auto;
  padding: 15px;
  white-space: pre-wrap;
}

.generation-preview[data-stream-format="markdown"] {
  white-space: normal;
}

.generation-actions {
  margin-top: auto;
}

.generation-actions [hidden] {
  display: none;
}

@keyframes generation-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--action-primary) 32%, transparent);
    opacity: 1;
  }
  80% {
    box-shadow: 0 0 0 9px transparent;
    opacity: 0.72;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .generation-pulse {
    animation: none;
  }
}

.account-menu-section .compact-row span {
  text-align: right;
}

.compact-row {
  min-height: 46px;
}

.mobile-logout {
  margin-top: 2px;
}

.empty-state {
  background: var(--surface-paper);
  border: 1px dashed var(--border-subtle);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: left;
}

.empty-state h2 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.membership-gate {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  display: grid;
  justify-items: center;
  min-height: 300px;
  padding: 48px 24px;
  text-align: center;
}

.membership-gate-symbol {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.membership-gate-symbol .char-token {
  --token-size: 28px;
}

.membership-gate h2 {
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 10px;
  max-width: 15em;
  text-wrap: balance;
}

.membership-gate p:last-child {
  color: var(--text-secondary);
  margin: 0;
}

.play-preview-label {
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-weight: 700;
}

.symbol-row {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.symbol-row .char-token {
  --token-size: 20px;
}

.symbol-row .char-token + .char-token {
  margin-left: 0;
}

.bottom-tabbar {
  align-items: center;
  background: color-mix(in srgb, var(--surface-paper) 98%, white);
  border-top: 1px solid var(--border-subtle);
  bottom: 0;
  box-shadow: 0 -6px 18px rgba(52, 48, 44, 0.06);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  left: 50%;
  max-width: 430px;
  min-height: 58px;
  padding: 4px 8px max(4px, env(safe-area-inset-bottom));
  position: fixed;
  transform: translateX(-50%);
  width: 100%;
  z-index: 40;
}

.bottom-tabbar-3 {
  grid-template-columns: repeat(3, 1fr);
}

.bottom-tabbar::before {
  background: linear-gradient(
    90deg,
    var(--character-green) 0 25%,
    var(--character-red) 25% 50%,
    var(--character-blue) 50% 75%,
    var(--character-yellow) 75% 100%
  );
  content: "";
  height: 3px;
  inset: 0 0 auto;
  opacity: 0.9;
  position: absolute;
  width: 100%;
}

.bottom-tabbar a {
  align-items: center;
  border-radius: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 500;
  gap: 2px;
  min-height: 50px;
  justify-content: center;
}

.bottom-tabbar a.is-active {
  color: var(--action-primary-pressed);
  font-weight: 700;
}

.tab-icon {
  display: inline-block;
  height: 22px;
  width: 22px;
}

.tab-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.back-link {
  color: var(--text-secondary);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  min-height: 34px;
}

.assessment-page {
  align-content: start;
  display: grid;
  gap: 16px;
}

.assessment-hero {
  margin-bottom: 0;
}

.assessment-heading {
  padding: 4px 2px 8px;
}

.assessment-heading p {
  margin-bottom: 0;
}

.feature-list {
  display: grid;
  gap: 12px;
}

.feature-list div {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 4px;
  padding-top: 12px;
}

.feature-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.feature-list strong {
  color: var(--text-primary);
}

.feature-list span {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.compact-title {
  margin-bottom: 8px;
}

.assessment-records {
  gap: 0;
}

.assessment-records-header {
  display: grid;
  gap: 10px;
}

.assessment-records-header .section-title {
  align-items: flex-start;
  margin-bottom: 0;
}

.assessment-records-header .mini-label {
  margin-bottom: 4px;
}

.assessment-records-header h1 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0;
}

.assessment-records-header > p {
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.assessment-records-summary {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 12px;
}

.assessment-records-counts {
  align-items: baseline;
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
}

.assessment-records-counts span {
  align-items: baseline;
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
}

.assessment-records-counts strong {
  color: var(--text-primary);
  font-size: 18px;
}

.assessment-records-counts small {
  color: var(--text-secondary);
  font-size: 12px;
}

.assessment-records-summary .btn {
  min-height: 38px;
  padding: 9px 14px;
  white-space: nowrap;
}

.assessment-active-record {
  align-items: flex-end;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--action-primary) 22%, var(--border-subtle));
  border-radius: 8px;
  color: var(--text-primary);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px;
}

.assessment-active-record-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.assessment-active-record-main strong {
  font-size: 16px;
}

.assessment-active-record-main small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.assessment-record-status {
  align-self: start;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  width: max-content;
}

.assessment-progress-track {
  background: color-mix(in srgb, var(--action-primary) 14%, var(--surface-paper));
  border-radius: 999px;
  display: block;
  height: 6px;
  margin-top: 3px;
  overflow: hidden;
  width: 100%;
}

.assessment-progress-track i {
  background: var(--action-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 6px;
}

.assessment-active-action {
  color: var(--action-primary-pressed);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.assessment-active-action b {
  font-size: 18px;
  font-weight: 400;
  vertical-align: -1px;
}

.assessment-completed-record .assessment-record-status,
.assessment-history-record .assessment-record-status {
  margin-bottom: 1px;
}

.assessment-empty-state {
  display: grid;
  gap: 8px;
  padding: 6px 0 2px;
}

.assessment-empty-state strong {
  font-size: 15px;
}

.assessment-empty-state p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 380px) {
  .assessment-records-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-records-summary .btn {
    text-align: center;
    width: 100%;
  }

  .assessment-active-record {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .assessment-active-action {
    text-align: right;
  }
}

.assessment-history-bound {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.assessment-history-bound .mini-label {
  margin: 0;
}

.record-link {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 0;
  text-align: left;
  width: 100%;
}

.record-link:first-child {
  border-top: 0;
}

.record-link span {
  display: grid;
  gap: 3px;
}

.assessment-records .record-link > span:first-child,
.assessment-records .assessment-active-record-main {
  justify-items: start;
  text-align: left;
}

.assessment-records .record-link > em {
  margin-left: auto;
}

.record-link small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.record-link em {
  color: var(--action-primary-pressed);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  margin-left: 12px;
  white-space: nowrap;
}

.assessment-form {
  display: grid;
  gap: 14px;
}

.assessment-step-head {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 8px 2px 0;
}

.assessment-step-head h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
}

.assessment-step-head span {
  color: var(--action-primary-pressed);
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 2px;
}

.assessment-progress {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.assessment-progress i {
  background: var(--action-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.question-section {
  display: grid;
  gap: 16px;
}

.question-section h2 {
  margin-bottom: 0;
}

.question-item {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 8px;
  padding-top: 16px;
}

.question-item:first-of-type {
  border-top: 0;
}

.question-card {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
  padding: 22px;
}

.question-label {
  color: var(--text-primary);
  display: block;
  font-weight: 800;
  line-height: 1.55;
}

.question-label span {
  color: var(--accent-structure);
  margin-right: 4px;
}

.question-label em {
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-style: normal;
  margin-left: 6px;
}

.question-label em.muted {
  color: var(--text-secondary);
}

.question-help {
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 0;
}

.rating-description {
  display: grid;
  gap: 6px;
}

.rating-description p {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin: 0;
}

.rating-description strong {
  color: var(--accent-structure);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
  min-width: 28px;
}

.rating-description span {
  color: var(--text-secondary);
  flex: 1;
}

.assessment-textarea {
  min-height: 128px;
  resize: vertical;
}

.assessment-score-select,
.assessment-form select,
.assessment-form textarea {
  min-height: 52px;
}

.assessment-form .form-input,
.assessment-form select,
.assessment-form textarea {
  border-radius: 14px;
  padding: 14px 16px;
}

.assessment-form textarea.assessment-textarea {
  min-height: 128px;
}

.assessment-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.4 1.2 7 6.8l5.6-5.6' fill='none' stroke='%237c7064' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) 50%;
  background-repeat: no-repeat;
  background-size: 14px 8px;
  padding-right: 44px;
}

.rating-scale {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.rating-endpoints {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  line-height: 1.2;
}

.rating-endpoints span {
  color: var(--text-secondary);
  display: grid;
  gap: 2px;
  max-width: 42%;
}

.rating-endpoints span:last-child {
  justify-items: end;
  text-align: right;
}

.rating-endpoints strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 850;
}

.rating-endpoints small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.rating-track-wrap {
  padding-top: 38px;
  position: relative;
}

.rating-current-badge {
  align-items: center;
  background: var(--action-primary);
  border: 1px solid color-mix(in srgb, var(--action-primary-pressed) 18%, transparent);
  border-radius: 999px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--action-primary) 22%, transparent);
  color: var(--action-on-primary);
  display: inline-flex;
  gap: 2px;
  left: var(--rating-badge-left, 17px);
  min-width: 54px;
  opacity: 0;
  padding: 6px 12px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%) translateY(2px);
  transition: left 0.18s ease, opacity 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.rating-scale.has-value .rating-current-badge {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rating-current-badge strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.rating-current-badge span {
  font-size: 13px;
  font-weight: 850;
}

.rating-track {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin-top: -2px;
  min-height: 44px;
  position: relative;
}

.rating-track::before,
.rating-track-fill {
  border-radius: 999px;
  content: "";
  height: 4px;
  left: var(--rating-fill-left, 17px);
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
}

.rating-track::before {
  background: color-mix(in srgb, var(--border-subtle) 78%, white);
}

.rating-track-fill {
  background: var(--action-primary);
  right: auto;
  transition: width 0.18s ease;
  width: var(--rating-fill-width, 0);
}

.rating-dot {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 1;
}

.rating-dot span {
  background: var(--surface-paper);
  border: 2px solid color-mix(in srgb, var(--border-subtle) 82%, var(--accent-structure));
  border-radius: 50%;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--text-primary) 7%, transparent);
  display: block;
  height: 17px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  width: 17px;
}

.rating-dot.is-active span {
  background: var(--action-primary);
  border-color: var(--action-primary);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--action-primary) 24%, transparent);
}

.rating-dot.is-selected span {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--action-primary) 16%, transparent);
  transform: scale(1.18);
}

.rating-dot:focus-visible {
  outline: none;
}

.rating-dot:focus-visible span {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--action-primary) 24%, transparent);
}

.rating-empty-hint {
  color: var(--action-primary-pressed);
  display: none;
  font-size: 12px;
  font-weight: 750;
  margin: -4px 0 0;
}

.rating-scale.show-empty-hint .rating-empty-hint {
  display: block;
}

.assessment-choice-list {
  display: grid;
  gap: 10px;
}

.assessment-choice-list label {
  align-items: flex-start;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  line-height: 1.5;
  min-height: 52px;
  padding: 14px 16px;
}

.assessment-choice-list label.is-selected {
  background: color-mix(in srgb, var(--action-primary) 8%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--action-primary) 46%, var(--border-subtle));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--action-primary) 10%, transparent);
}

.assessment-choice-list input,
.assessment-choice-list input.assessment-choice-list {
  accent-color: var(--action-primary);
  display: block;
  flex: 0 0 18px;
  height: 18px;
  margin-top: 4px;
  width: 18px;
}

.upload-placeholder {
  background: var(--surface-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  color: var(--text-secondary);
  min-height: 48px;
  padding: 14px;
}

.assessment-step-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

.assessment-step-actions .btn {
  flex: 1;
}

.sticky-action {
  background: color-mix(in srgb, var(--surface-page) 94%, transparent);
  bottom: 0;
  margin: 0 -16px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  position: sticky;
  z-index: 10;
}

.report-hero {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 22px;
}

.report-hero p {
  margin-bottom: 0;
}

.completion-hero {
  display: grid;
  gap: 12px;
}

.completion-hero .btn {
  margin-top: 4px;
}

.score-bars {
  display: grid;
  gap: 16px;
}

.score-row-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.score-row-head span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.score-track {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.score-track i {
  background: var(--action-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.mobile-metrics {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.mobile-metrics .metric {
  box-shadow: none;
}

.compact-score-list {
  display: grid;
  gap: 10px;
}

.compact-score-list div {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  min-height: 42px;
}

.compact-score-list div:first-child {
  border-top: 0;
}

.compact-score-list span {
  color: var(--text-secondary);
  line-height: 1.4;
}

.compact-score-list strong {
  color: var(--text-primary);
  margin-left: 12px;
}

.coach-app {
  background: var(--surface-page);
}

.coach-tabbar::before {
  background: var(--action-primary);
  opacity: 0.86;
}

.coach-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-inline-panel {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.coach-quick-grid,
.share-chip-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-quick-tile,
.share-chip {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  color: var(--text-primary);
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 14px;
  text-align: left;
  text-decoration: none;
}

.coach-quick-tile:focus-visible,
.share-chip:focus-visible,
.coach-invite-compact:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 20%, transparent);
  outline: none;
}

.coach-quick-tile strong,
.share-chip strong {
  font-size: 16px;
}

.coach-quick-tile small,
.share-chip small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.share-chip {
  appearance: none;
  cursor: pointer;
  font: inherit;
  grid-template-columns: minmax(0, 1fr) auto;
}

.share-chip > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.share-chip em {
  align-self: end;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--action-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 8px;
}

.share-chip.is-copied em {
  background: color-mix(in srgb, var(--action-primary) 12%, var(--surface-paper));
}

.share-chip.is-upcoming {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-paper));
  color: var(--text-secondary);
}

.share-chip.is-upcoming em {
  background: transparent;
  color: var(--text-secondary);
}

.coach-connect-share-panel {
  gap: 9px;
  padding: 14px 16px 16px;
}

.coach-connect-share-panel .compact-title {
  margin-bottom: 0;
}

.connect-invite-help {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 4px;
}

.coach-connect-share-panel .share-chip-grid {
  gap: 8px;
}

.coach-connect-share-panel .share-chip {
  align-items: center;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 56px;
  padding: 11px 10px 11px 12px;
}

.coach-connect-share-panel .share-chip strong {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.coach-connect-share-panel .share-chip em {
  align-self: center;
  justify-self: end;
  padding: 4px 8px;
  white-space: nowrap;
}

.connect-view-tabs {
  background: color-mix(in srgb, var(--surface-page) 88%, var(--surface-paper));
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
}

.connect-view-tabs a {
  align-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary);
  display: inline-flex;
  flex: 1 1 0;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 7px 4px;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.connect-view-tabs a.is-active {
  background: var(--surface-paper);
  box-shadow: 0 2px 7px rgba(52, 48, 44, 0.08);
  color: var(--action-primary-pressed);
}

.connect-view-tabs a:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 20%, transparent);
  outline: none;
}

.global-list-panel {
  gap: 14px;
}

.global-list {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  margin: 0 -2px;
}

.global-list-row {
  align-items: start;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 14px 2px;
  text-decoration: none;
}

.global-list-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.global-list-main strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.global-list-main small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.global-list-side {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  padding-top: 1px;
  white-space: nowrap;
}

.global-list-side em {
  color: var(--text-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}

.global-list-row:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent);
  outline: none;
}

.global-empty {
  padding: 12px 0 4px;
}

.global-empty strong {
  display: block;
  font-size: 16px;
}

.global-empty p {
  font-size: 14px;
  margin: 6px 0 0;
}

.friend-directory-list {
  display: grid;
}

.friend-row {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: grid;
  column-gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  min-height: 76px;
  padding: 13px 0;
  row-gap: 6px;
  text-decoration: none;
}

.friend-row:first-child {
  border-top: 0;
}

.friend-row:focus-visible {
  border-radius: 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent);
  outline: none;
}

.friend-main {
  display: grid;
  gap: 5px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.friend-main strong {
  font-size: 16px;
  line-height: 1.25;
}

.friend-main > small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.friend-tags {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
}

.friend-personality-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}

.friend-tags > small {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 8px;
}

.friend-tags .coach-intent-pill,
.coach-intent-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
  justify-content: center;
  line-height: 1.2;
  min-height: 24px;
  padding: 4px 7px;
}

.coach-intent-icon {
  fill: none;
  height: 12px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  width: 12px;
}

.personality-score-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personality-score-pill {
  --personality-color: var(--border-subtle);
  align-items: center;
  background: color-mix(in oklab, var(--personality-color) 15%, var(--surface-paper));
  border: 1px solid color-mix(in oklab, var(--personality-color) 34%, var(--border-subtle));
  border-radius: 999px;
  color: color-mix(in oklab, var(--personality-color) 56%, var(--text-primary));
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 3px;
  justify-content: center;
  line-height: 1.2;
  min-height: 24px;
  padding: 3px 7px 3px 4px;
}

.personality-score-pill b {
  align-items: center;
  background: var(--personality-color);
  border-radius: 50%;
  color: #17130f;
  display: inline-flex;
  font: inherit;
  font-size: 10px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0;
  width: 18px;
}

.personality-score-pill.type-1 {
  --personality-color: var(--character-red);
}

.personality-score-pill.type-2 {
  --personality-color: var(--character-yellow);
}

.personality-score-pill.type-3 {
  --personality-color: var(--character-blue);
}

.personality-score-pill.type-4 {
  --personality-color: var(--character-green);
}

.friend-tags .coach-intent-pill,
.friend-tags .personality-score-pill {
  font-size: 11px;
  min-height: 22px;
  padding: 3px 5px;
}

.friend-tags .coach-intent-icon {
  height: 11px;
  width: 11px;
}

.friend-tags .personality-score-pill {
  gap: 2px;
  padding: 3px 6px 3px 4px;
}

.personality-order-fact.order-ready {
  background: var(--surface-paper);
  border-color: color-mix(in srgb, var(--character-blue) 18%, var(--border-subtle));
}

.personality-order-fact.order-empty {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
}

.personality-order-fact.order-empty strong {
  color: var(--text-secondary);
}

.coach-intent-pill.intent-empty,
.coach-intent-fact.intent-empty,
.coach-intent-inline.intent-empty {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.coach-intent-pill.intent-low,
.coach-intent-fact.intent-low,
.coach-intent-inline.intent-low {
  background: color-mix(in srgb, var(--status-warning) 7%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--status-warning) 20%, var(--border-subtle));
  color: #7a6841;
}

.coach-intent-fact.intent-low strong,
.coach-intent-inline.intent-low strong {
  color: #7a6841;
}

.coach-intent-pill.intent-mid,
.coach-intent-fact.intent-mid,
.coach-intent-inline.intent-mid {
  background: color-mix(in srgb, var(--status-warning) 14%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--status-warning) 36%, var(--border-subtle));
  color: #856127;
}

.coach-intent-fact.intent-mid strong,
.coach-intent-inline.intent-mid strong {
  color: #856127;
}

.coach-intent-pill.intent-high,
.coach-intent-fact.intent-high,
.coach-intent-inline.intent-high {
  background: color-mix(in srgb, var(--status-success) 17%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--status-success) 36%, var(--border-subtle));
  color: #3f7569;
}

.coach-intent-pill.coach-role,
.coach-intent-inline.coach-role {
  background: color-mix(in srgb, var(--action-primary) 10%, var(--surface-paper));
  border-color: color-mix(in srgb, var(--action-primary) 26%, var(--border-subtle));
  color: var(--action-primary-pressed);
}

.coach-intent-fact.intent-high strong,
.coach-intent-inline.intent-high strong {
  color: #3f7569;
}

.friend-side {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}

.friend-row em {
  color: var(--text-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  grid-column: 3;
  grid-row: 1;
}

.coach-invite-compact {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.coach-invite-visual {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  display: flex;
  gap: 8px;
  height: 56px;
  justify-content: center;
  width: 112px;
}

.coach-invite-compact h2 {
  font-size: 22px;
  margin: 0 0 6px;
}

.coach-invite-compact p {
  color: var(--text-secondary);
  margin: 0;
}

.coach-invite-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.coach-learner-mini-list {
  gap: 10px;
}

.coach-learner-card {
  align-items: center;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.record-link .coach-learner-tags,
.coach-learner-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.record-link .coach-learner-tags {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.coach-learner-tags small {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--action-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 7px;
}

.coach-learner-card em {
  color: var(--action-primary-pressed);
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  grid-column: 2;
  grid-row: 1;
  line-height: 1;
}

.coach-learner-detail-page {
  padding-bottom: 28px;
}

.coach-learner-profile {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-paper);
  display: flex;
  gap: 14px;
  margin: 12px 0 0;
  padding: 18px;
}

.coach-learner-profile h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.coach-learner-profile p {
  margin-bottom: 0;
}

.connection-status-line {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  min-height: 46px;
  padding: 10px 12px;
}

.connection-status-line span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.connection-status-line strong {
  font-size: 14px;
  text-align: right;
}

.connection-action-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.connection-action-list {
  display: grid;
  gap: 8px;
}

.friend-detail-page {
  padding-bottom: 32px;
}

.friend-detail-summary {
  align-items: start;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 12px 0 0;
  padding: 18px;
}

.friend-detail-heading {
  min-width: 0;
}

.friend-detail-heading h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.friend-detail-heading p:last-child {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.friend-detail-facts {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2px;
  padding-top: 12px;
}

.friend-personality-row {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 12px;
}

.friend-personality-row small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.friend-personality-row strong {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.2;
}

.friend-personality-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.friend-personality-content .personality-score-list {
  flex: 1 1 auto;
  min-width: 0;
}

.friend-personality-row > .personality-score-list {
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

.personality-order-empty {
  margin-left: auto;
}

.coach-intent-inline {
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  min-height: 24px;
  padding: 4px 8px;
  white-space: nowrap;
}

.coach-intent-inline strong {
  font-size: 12px;
  line-height: 1.2;
}

.friend-detail-facts-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -2px;
}

.friend-detail-facts span {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px 10px;
}

.friend-detail-facts .coach-intent-fact small {
  align-items: center;
  display: inline-flex;
}

.friend-detail-workspace {
  margin-top: 12px;
}

.friend-detail-tabs {
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 16px;
}

.friend-detail-tabs a {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  gap: 4px;
  justify-content: center;
  min-height: 48px;
  position: relative;
  text-decoration: none;
}

.friend-detail-tabs a::after {
  background: transparent;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 22%;
  position: absolute;
  right: 22%;
}

.friend-detail-tabs a.is-active {
  color: var(--action-primary-pressed);
  font-weight: 800;
}

.friend-detail-tabs a.is-active::after {
  background: var(--action-primary);
}

.friend-detail-tabs strong {
  color: inherit;
  font-size: 12px;
}

.friend-detail-tab-panel {
  margin-bottom: 0;
  min-height: 180px;
}

.connection-insight-history {
  border-top: 1px solid var(--border-subtle);
  display: grid;
}

.connection-insight-history-row {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 12px 0;
  text-decoration: none;
}

.connection-insight-history-row:last-child {
  border-bottom: 0;
}

.connection-insight-history-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.connection-insight-history-row strong {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.connection-insight-history-row small {
  color: var(--text-secondary);
  font-size: 12px;
}

.connection-insight-history-row em {
  color: var(--text-secondary);
  font-size: 20px;
  font-style: normal;
}

.friend-detail-tab-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 10px;
}

.friend-detail-section-tools {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.friend-detail-inline-action {
  color: var(--action-primary-pressed);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.friend-detail-inline-action:hover,
.friend-detail-inline-action:focus-visible {
  text-decoration: underline;
}

.connection-insight-page {
  padding-bottom: 32px;
}

.connection-insight-intro,
.connection-insight-result-head {
  padding: 22px 4px 8px;
}

.connection-insight-intro h1,
.connection-insight-result-head h1 {
  font-size: 29px;
  line-height: 1.28;
  margin: 0 0 8px;
}

.connection-insight-intro p:last-child {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  max-width: 38em;
}

.connection-insight-form-panel {
  margin-top: 10px;
}

.connection-insight-form {
  display: grid;
  gap: 14px;
}

.connection-insight-textarea {
  min-height: 250px;
  resize: vertical;
}

.connection-insight-form-help {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.connection-insight-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.connection-insight-image-error {
  color: var(--status-danger);
  font-size: 12px;
  line-height: 1.4;
}

.connection-insight-state-panel {
  margin-top: 10px;
}

.connection-insight-state-panel h2 {
  margin-top: 0;
}

.connection-insight-reading {
  margin-top: 10px;
  padding: 24px 22px 28px;
}

.connection-insight-body {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.85;
  max-width: 70ch;
}

.connection-insight-body p {
  margin: 0;
}

.connection-insight-body p + p {
  margin-top: 1.1em;
}

.connection-insight-body h2,
.connection-insight-body h3 {
  color: var(--text-primary);
  line-height: 1.4;
  margin: 1.8em 0 0.65em;
  text-wrap: balance;
}

.connection-insight-body h2 {
  font-size: 21px;
}

.connection-insight-body h3 {
  font-size: 18px;
}

.connection-insight-body h2:first-child,
.connection-insight-body h3:first-child {
  margin-top: 0;
}

.connection-insight-body ul,
.connection-insight-body ol {
  margin: 0.75em 0 1.1em;
  padding-left: 1.35em;
}

.connection-insight-body li {
  margin: 0.45em 0;
  padding-left: 0.2em;
}

.connection-insight-body blockquote {
  border-left: 3px solid var(--action-primary);
  color: var(--text-secondary);
  margin: 1.2em 0;
  padding: 0.1em 0 0.1em 1em;
}

.connection-insight-body strong {
  color: var(--text-primary);
  font-weight: 750;
}

.connection-insight-body code {
  background: var(--surface-muted);
  border-radius: 4px;
  font-size: 0.9em;
  padding: 0.12em 0.3em;
}

.connection-insight-quote {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  margin-top: 2px;
  padding: 16px 18px;
}

.connection-insight-quote span {
  color: var(--action-primary-pressed);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
}

.connection-insight-quote blockquote {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.connection-insight-source {
  margin-top: 12px;
}

.connection-insight-source summary {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.connection-insight-source div {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.75;
  margin-top: 12px;
  padding-top: 12px;
}

.connection-insight-media {
  margin-top: 12px;
  padding: 18px 20px 20px;
}

.connection-insight-media-copy h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 4px 0 6px;
}

.connection-insight-media-copy p:last-child {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.connection-insight-media .connection-insight-actions {
  margin: 16px 0 0;
}

.friend-detail-report-list {
  border-top: 1px solid var(--border-subtle);
  display: grid;
}

.friend-detail-report-row {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 12px 0;
  text-decoration: none;
}

.friend-detail-report-row:last-child {
  border-bottom: 0;
}

.friend-detail-report-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.friend-detail-report-main strong {
  overflow-wrap: anywhere;
}

.friend-detail-report-main small,
.friend-detail-report-status em {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.friend-detail-report-status {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.friend-detail-report-status em {
  font-style: normal;
  font-weight: 800;
}

.friend-detail-empty {
  padding: 22px 0 8px;
}

.friend-detail-empty strong {
  color: var(--text-primary);
  display: block;
  font-size: 16px;
}

.friend-detail-empty p {
  font-size: 14px;
  margin: 6px 0 0;
}

.friend-detail-load-more {
  margin-top: 12px;
}

.friend-journey {
  display: grid;
  gap: 0;
  position: relative;
}

.friend-journey::before {
  background: color-mix(in srgb, var(--action-primary) 28%, var(--border-subtle));
  bottom: 14px;
  content: "";
  left: 5px;
  position: absolute;
  top: 10px;
  width: 1px;
}

.friend-journey-item {
  display: grid;
  gap: 10px;
  grid-template-columns: 11px minmax(0, 1fr);
  min-width: 0;
  padding-bottom: 12px;
  position: relative;
}

.friend-journey-item:last-child {
  padding-bottom: 0;
}

.friend-journey-marker {
  background: var(--action-primary);
  border: 3px solid var(--surface-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--action-primary) 48%, var(--border-subtle));
  height: 11px;
  margin-top: 5px;
  position: relative;
  width: 11px;
  z-index: 1;
}

.friend-journey-entry {
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  color: var(--text-primary);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0 0 13px;
  text-decoration: none;
}

.friend-journey-item:last-child .friend-journey-entry {
  border-bottom: 0;
  padding-bottom: 0;
}

.friend-journey-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.friend-journey-meta time {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.friend-journey-entry strong {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.friend-journey-entry p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.friend-journey-entry > small {
  color: var(--text-secondary);
  font-size: 12px;
}

.friend-detail-facts small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.friend-detail-facts strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.2;
}

.friend-service-section,
.friend-data-section {
  margin-top: 12px;
}

.friend-service-section .compact-title,
.friend-data-section .compact-title {
  margin-bottom: 4px;
}

.service-content-item {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 10px;
  padding: 16px 0;
}

.service-content-item:first-of-type {
  border-top: 0;
  padding-top: 6px;
}

.service-content-item:last-child {
  padding-bottom: 0;
}

.service-content-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.service-content-head h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.service-content-head > span:not(.badge) {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.service-content-item p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.service-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-page .service-content-actions .btn {
  min-height: 34px;
  padding: 7px 11px;
}

.friend-detail-mini-list {
  display: grid;
  gap: 0;
}

.friend-detail-mini-list a,
.friend-data-row {
  align-items: center;
  color: var(--text-primary);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 10px 0;
  text-decoration: none;
}

.friend-detail-mini-list a + a {
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
}

.report-preview-row small {
  color: var(--text-secondary);
}

.coach-learner-reports-page {
  padding-bottom: 32px;
}

.report-directory-heading {
  margin: 16px 16px 12px;
}

.report-directory-heading h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 2px 0 4px;
}

.report-directory-heading p:last-child {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

.report-directory-tabs {
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 16px;
}

.report-directory-tabs a {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
  position: relative;
  text-decoration: none;
}

.report-directory-tabs a::after {
  background: transparent;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 18%;
  position: absolute;
  right: 18%;
}

.report-directory-tabs a.is-active {
  color: var(--action-primary-pressed);
  font-weight: 800;
}

.report-directory-tabs a.is-active::after {
  background: var(--action-primary);
}

.report-directory-tabs strong {
  color: inherit;
  font-size: 12px;
}

.report-directory-section {
  margin-top: 12px;
}

.report-directory-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 4px;
}

.report-directory-list {
  border-top: 1px solid var(--border-subtle);
  display: grid;
}

.report-directory-row {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 12px 0;
  text-decoration: none;
}

.report-directory-row:last-child {
  border-bottom: 0;
}

.report-directory-row:focus-visible,
.report-directory-row:hover {
  background: color-mix(in srgb, var(--surface-warm) 45%, transparent);
  outline: none;
}

.report-directory-row-main,
.report-directory-row-status {
  align-items: center;
  display: flex;
  min-width: 0;
}

.report-directory-row-main {
  display: grid;
  gap: 4px;
}

.report-directory-row-main strong {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-directory-row-main small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-directory-row-status {
  gap: 8px;
  justify-content: flex-end;
}

.report-directory-row-status em {
  color: var(--text-secondary);
  font-size: 19px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.report-directory-empty {
  border-top: 1px solid var(--border-subtle);
  padding: 26px 4px 10px;
}

.report-directory-empty strong {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}

.report-directory-empty p,
.report-legacy-note {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.report-directory-pagination {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 16px 0;
}

.report-directory-pagination > span {
  color: var(--text-secondary);
  font-size: 13px;
}

.coach-legacy-report-page {
  padding-bottom: 32px;
}

.coach-legacy-report-page .report-cover {
  margin-top: 12px;
}

.coach-legacy-report-page .dimension-grid,
.coach-legacy-report-page .legacy-answer-list {
  margin-top: 16px;
}

.coach-legacy-report-page .score-track i {
  display: block;
  height: 100%;
}

.friend-detail-mini-list strong,
.friend-data-row strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.friend-detail-mini-list small,
.friend-data-row small {
  color: var(--text-secondary);
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 3px;
}

.friend-detail-mini-list em,
.friend-data-row em {
  color: var(--text-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
}

.friend-data-row {
  border-top: 0;
  padding-top: 8px;
}

@media (max-width: 380px) {
  .coach-quick-grid,
  .share-chip-grid,
  .own-assessment-actions,
  .coach-invite-actions,
  .connection-action-grid,
  .coach-learner-card {
    grid-template-columns: 1fr;
  }

  .coach-learner-actions {
    justify-content: flex-start;
  }
}

.coach-action-list .list-link:first-child {
  border-top: 0;
  padding-top: 4px;
}

.compact-metric {
  border-radius: 16px;
  box-shadow: none;
  padding: 16px;
}

.compact-metric strong {
  font-size: 28px;
}

.invite-poster-card {
  display: grid;
  gap: 12px;
}

.coach-invite-link-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.coach-invite-link-item {
  display: grid;
  gap: 7px;
}

.coach-invite-link-item label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.coach-invite-link-item .form-input {
  font-size: 12px;
  height: 46px;
}

.invite-poster-link {
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  display: block;
  overflow: hidden;
}

.invite-poster-link:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 22%, transparent), var(--shadow-paper);
  outline: none;
}

.invite-poster-image {
  aspect-ratio: 720 / 1280;
  display: block;
  height: auto;
  width: 100%;
}

.invite-poster-actions {
  display: grid;
  gap: 10px;
}

.poster-download-link {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  min-height: 32px;
  text-align: center;
}

.poster-preview[hidden] {
  display: none;
}

.poster-preview {
  align-items: end;
  display: grid;
  inset: 0;
  justify-items: center;
  position: fixed;
  z-index: 90;
}

.poster-preview-backdrop {
  background: rgba(21, 19, 18, 0.46);
  border: 0;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.poster-preview-panel {
  background: var(--surface-page);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 50px rgba(21, 19, 18, 0.2);
  display: grid;
  gap: 12px;
  max-height: 94vh;
  max-width: 430px;
  overflow: auto;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  position: relative;
  width: 100%;
}

.poster-preview-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.poster-preview-head strong {
  font-size: 17px;
}

.poster-preview-close {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 34px;
  padding: 6px 12px;
}

.poster-preview-help {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.poster-preview-frame {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: auto;
  padding: 0;
}

.poster-preview-frame img {
  -webkit-touch-callout: default;
  border-radius: 12px;
  display: block;
  height: auto;
  user-select: auto;
  width: 100%;
}

body.poster-preview-open {
  overflow: hidden;
}

.copy-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.copy-row .btn {
  min-height: 46px;
}

.invite-form {
  margin-top: 14px;
}

.invite-code-step h2,
.invite-form h2 {
  margin-bottom: 8px;
}

.step-kicker {
  color: var(--action-primary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.locked-invite {
  background: color-mix(in srgb, var(--action-primary) 7%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--action-primary) 20%, var(--border-subtle));
  border-radius: 12px;
  display: grid;
  gap: 4px;
  margin: 18px 0;
  padding: 12px 14px;
}

.locked-invite span {
  color: var(--text-secondary);
  font-size: 13px;
}

.locked-invite strong {
  color: var(--text-primary);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.guest-continue-page .auth-panel {
  margin: 14px 18px 28px;
}

.guest-continue-head h1 {
  font-size: 28px;
}

.guest-blocked-panel {
  border-color: color-mix(in srgb, var(--status-warning) 34%, var(--border-subtle));
}

.guest-action-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.btn.disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.learner-row span {
  display: grid;
  gap: 3px;
}

.learner-row small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.learner-row em {
  color: var(--action-primary);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.coach-learner-row {
  align-items: flex-start;
  gap: 12px;
}

.coach-learner-row .btn,
.coach-learner-row .badge {
  flex: 0 0 auto;
  margin-top: 2px;
}

.coach-report-page,
.report-share-page {
  padding-bottom: 32px;
}

.report-cover,
.share-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-paper);
}

.report-cover {
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
  padding: 22px;
}

.report-cover h1 {
  font-size: 25px;
  line-height: 1.22;
  margin-bottom: 10px;
}

.report-cover p {
  margin-bottom: 0;
}

.report-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-cover-meta span,
.share-card-head span {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.report-section-index {
  align-items: center;
  background: color-mix(in srgb, var(--surface-muted) 58%, var(--surface-paper));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0 0 14px;
  padding: 10px 12px;
}

.report-section-index-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.report-section-index-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.report-section-index a {
  align-content: center;
  color: inherit;
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 2px 12px;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.report-section-index a + a {
  border-left: 1px solid var(--border-subtle);
}

.report-section-index a:hover {
  background: color-mix(in srgb, var(--surface-paper) 78%, var(--action-primary));
  color: var(--action-primary);
}

.report-section-index a:focus-visible {
  border-radius: 8px;
  outline: 3px solid color-mix(in srgb, var(--action-primary) 36%, transparent);
  outline-offset: -2px;
}

.report-section-index strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.25;
}

.report-section-index span:not(.report-section-index-label) {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

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

.couple-report-jump {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-jump-grid a {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(52, 48, 44, 0.05);
  color: inherit;
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 14px;
  text-decoration: none;
}

.report-jump-grid a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--action-primary) 36%, transparent);
  outline-offset: 2px;
}

.report-jump-grid strong {
  color: var(--text-primary);
  font-size: 16px;
}

.report-jump-grid span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.report-image-action-panel {
  display: grid;
  gap: 14px;
}

.report-image-action-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.report-read-summary {
  display: grid;
  gap: 16px;
}

.report-summary-main {
  display: grid;
  gap: 8px;
}

.report-summary-main span {
  color: var(--accent-structure);
  font-size: 13px;
  font-weight: 850;
}

.report-summary-main strong {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.28;
}

.report-summary-main p {
  margin-bottom: 0;
}

.report-summary-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.report-summary-strip div {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.report-summary-strip span,
.report-score-row .score-row-head span,
.couple-compare-head span,
.couple-bar-pair span,
.delivery-readout-card span,
.rollcall-mode-strip span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.report-summary-strip strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.report-personality-tags {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}

.report-personality-tags > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.report-personality-tags .personality-score-list {
  gap: 5px;
}

.report-context-quote {
  background: var(--surface-muted);
  border-left: 3px solid var(--accent-structure);
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding: 8px 10px;
}

.report-insight-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.report-insight-grid section {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.report-insight-grid h3 {
  font-size: 15px;
  margin: 0;
}

.report-insight-grid p {
  color: var(--text-primary);
  line-height: 1.68;
  margin-bottom: 0;
}

.report-score-row {
  min-width: 0;
}

.report-score-row .score-row-head {
  margin-bottom: 7px;
}

.report-score-row .score-row-head strong {
  min-width: 0;
}

.text-action-pill {
  align-items: center;
  background: var(--action-primary-soft);
  border-radius: 999px;
  color: var(--action-primary-pressed);
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  width: fit-content;
}

.report-collapsible {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-top: 14px;
  overflow: hidden;
}

.report-collapsible summary {
  align-items: center;
  background: var(--surface-muted);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 52px;
  padding: 13px 15px;
}

.report-collapsible summary::-webkit-details-marker {
  display: none;
}

.report-collapsible summary span {
  color: var(--text-primary);
  font-weight: 800;
}

.report-collapsible summary strong {
  color: var(--action-primary);
  font-size: 13px;
}

.report-collapsible[open] summary strong {
  color: var(--text-secondary);
}

.report-collapsible-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.report-answers-section {
  padding: 0;
}

.chart-box {
  height: 260px;
  margin-top: 12px;
  width: 100%;
}

.score-track.type-type_1 i,
.share-score-list .type-type_1 {
  background: var(--character-red);
}

.score-track.type-type1 i,
.share-score-list .type-type1 {
  background: var(--character-red);
}

.score-track.type-type_2 i,
.share-score-list .type-type_2 {
  background: var(--character-yellow);
}

.score-track.type-type2 i,
.share-score-list .type-type2 {
  background: var(--character-yellow);
}

.score-track.type-type_3 i,
.share-score-list .type-type_3 {
  background: var(--character-blue);
}

.score-track.type-type3 i,
.share-score-list .type-type3 {
  background: var(--character-blue);
}

.score-track.type-type_4 i,
.share-score-list .type-type_4 {
  background: var(--character-green);
}

.score-track.type-type4 i,
.share-score-list .type-type4 {
  background: var(--character-green);
}

.score-track.type-type1 i,
.score-track.type1 i,
.share-score-list .type-type1,
.share-score-list .type1 {
  background: var(--character-red);
}

.score-track.type-type2 i,
.score-track.type2 i,
.share-score-list .type-type2,
.share-score-list .type2 {
  background: var(--character-yellow);
}

.score-track.type-type3 i,
.score-track.type3 i,
.share-score-list .type-type3,
.share-score-list .type3 {
  background: var(--character-blue);
}

.score-track.type-type4 i,
.score-track.type4 i,
.share-score-list .type-type4,
.share-score-list .type4 {
  background: var(--character-green);
}

.radar-rank-pills .type-type1,
.radar-legend .type-type1 {
  background: var(--character-red);
}

.radar-rank-pills .type-type2,
.radar-legend .type-type2 {
  background: var(--character-yellow);
}

.radar-rank-pills .type-type3,
.radar-legend .type-type3 {
  background: var(--character-blue);
}

.radar-rank-pills .type-type4,
.radar-legend .type-type4 {
  background: var(--character-green);
}

.dimension-grid,
.answer-summary-list {
  display: grid;
  gap: 12px;
}

.dimension-row {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.dimension-row .score-track {
  grid-column: 1 / -1;
}

.dimension-row span,
.answer-summary-list span {
  color: var(--text-secondary);
  font-size: 13px;
}

.dimension-row small {
  color: var(--text-secondary);
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.45;
}

.dimension-row strong {
  font-size: 13px;
}

.report-copy-block {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.report-copy-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.report-copy-block h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.report-copy-block p,
.answer-summary-list p {
  margin-bottom: 0;
}

.answer-summary-list div {
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 12px;
}

.report-bottom-actions {
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  bottom: 0;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  position: sticky;
}

.report-inline-actions {
  margin-top: 16px;
}

.report-status-panel h1 {
  font-size: 25px;
  line-height: 1.22;
}

.report-ai-status {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px;
}

.report-ai-status strong {
  color: var(--text-primary);
  font-size: 14px;
}

.report-ai-status span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.report-ai-status form {
  margin-top: 6px;
}

.report-ai-status.success {
  background: #fff8ef;
}

.report-ai-status.warning {
  background: #fff4ef;
}

.relationship-group-grid,
.relationship-highlight-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

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

.relationship-group-grid div,
.relationship-highlight-grid section {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  border-radius: 14px;
  padding: 12px;
}

.relationship-group-grid span,
.relationship-group-grid small,
.relationship-highlight-grid p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.relationship-group-grid strong {
  color: var(--text-primary);
  display: block;
  font-size: 18px;
  margin: 4px 0 3px;
}

.relationship-highlight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relationship-highlight-grid h2,
.relationship-highlight-grid h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.relationship-highlight-grid p + p {
  margin-top: 5px;
}

.relationship-highlight-grid p {
  margin-bottom: 0;
}

.relationship-highlight-grid strong {
  color: var(--text-primary);
}

.relationship-report-card {
  background: #fffefa;
  color: var(--text-primary);
  padding: 0;
  width: 820px;
}

.relationship-report-head {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  padding: 28px 34px 20px;
  text-align: center;
}

.relationship-report-head h1 {
  font-size: 34px;
  line-height: 1.2;
  margin: 8px 0 10px;
}

.relationship-report-head p:last-child {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

.relationship-report-body {
  padding: 24px 34px 18px;
}

.relationship-radar-chart {
  height: 390px;
  margin-top: 0;
}

.relationship-report-card .relationship-group-grid {
  margin-top: 18px;
}

.relationship-report-card .relationship-highlight-grid {
  margin-top: 12px;
}

.relationship-report-footer {
  background: var(--surface-warm);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 6px;
  padding: 18px 34px 22px;
  text-align: center;
}

.relationship-report-footer strong {
  color: var(--text-primary);
}

.relationship-report-footer span {
  color: var(--text-secondary);
  font-size: 12px;
}

@media (max-width: 520px) {
  .relationship-group-grid,
  .relationship-highlight-grid {
    grid-template-columns: 1fr;
  }
}

.share-card {
  margin: 0 auto;
  overflow: hidden;
  padding: 24px;
}

.share-card-head {
  text-align: center;
}

.share-card-head p {
  color: var(--accent-structure);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.share-card-head h1 {
  font-size: 28px;
  line-height: 1.22;
  margin-bottom: 12px;
}

.share-symbol-row {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 18px 0 20px;
}

.share-symbol-row .char-token {
  --token-size: 34px;
}

.share-section {
  border-top: 1px solid var(--border-subtle);
  padding: 18px 0;
}

.share-section h2 {
  font-size: 17px;
}

.share-score-list {
  display: grid;
  gap: 12px;
}

.share-score-list div {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.share-score-list i {
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 8px;
}

.share-coach-note {
  color: var(--text-primary);
  font-weight: 700;
}

.share-footer {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.share-help {
  padding: 16px 6px 0;
}

.share-help p {
  font-size: 13px;
  text-align: center;
}

.share-report-card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  margin: 0 auto;
  overflow: hidden;
}

.report-share-page {
  overflow-x: hidden;
}

.report-image-preview {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-paper);
  display: grid;
  gap: 10px;
  margin: 0;
  overflow: hidden;
  padding: 10px;
}

.report-image-preview img {
  border-radius: 12px;
  display: block;
  height: auto;
  width: 100%;
}

.report-image-preview figcaption,
.report-png-status p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  text-align: center;
}

.report-png-status h1 {
  font-size: 22px;
  margin-bottom: 8px;
  text-align: center;
}

.report-preview-fallback {
  overflow: hidden;
}

.report-preview-fallback .radar-wide-card {
  padding: 20px 18px;
  width: 100%;
}

.report-preview-fallback .radar-wide-body {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

.report-preview-fallback .radar-wide-polar-chart,
.report-preview-fallback .radar-wide-bar-chart {
  height: 320px;
}

.report-preview-fallback .radar-brand-panel {
  margin: 0;
}

.report-preview-fallback .relationship-report-card {
  width: 100%;
}

.report-preview-fallback .relationship-report-head,
.report-preview-fallback .relationship-report-body,
.report-preview-fallback .relationship-report-footer {
  padding-left: 18px;
  padding-right: 18px;
}

.report-preview-fallback .relationship-radar-chart {
  height: 320px;
}

.radar-wide-card {
  background: #fffefa;
  border-radius: 24px;
  color: var(--text-primary);
  padding: 34px 38px 28px;
  width: 1068px;
}

.radar-wide-head {
  text-align: center;
}

.radar-wide-head p {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
}

.radar-wide-head h1 {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
}

.radar-wide-head h1 span {
  color: var(--accent-structure);
}

.radar-wide-head small {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 7px;
}

.radar-rank-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 14px 0 10px;
}

.radar-rank-pills span {
  align-items: center;
  background: #f6f1ea;
  border: 1px solid #eadcc8;
  border-radius: 999px;
  color: #5f574f;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
  padding: 6px 14px;
}

.radar-rank-pills i,
.radar-legend i {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.radar-rank-pills strong {
  font-size: 15px;
}

.radar-wide-portrait {
  color: #6f665e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  margin: 4px auto 0;
  max-width: 850px;
}

.radar-wide-body {
  align-items: stretch;
  display: grid;
  gap: 38px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 8px;
}

.radar-wide-left,
.radar-wide-right {
  min-width: 0;
}

.radar-wide-polar-chart {
  height: 430px;
  margin-top: 0;
}

.radar-wide-bar-chart {
  height: 585px;
  margin-top: 0;
}

.radar-legend {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: center;
  margin: 0 0 10px;
}

.radar-legend span {
  align-items: center;
  color: #5f574f;
  display: inline-flex;
  font-size: 13px;
  gap: 5px;
  white-space: nowrap;
}

.radar-brand-panel {
  align-items: center;
  background: #fbfaf7;
  border: 1px solid #e8dfd2;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 18px 0 38px;
  padding: 12px 14px;
}

.radar-brand-panel p {
  color: #34302c;
  font-size: 12px;
  font-weight: 800;
  margin: 0;
}

.radar-brand-panel strong {
  color: #7c7064;
  display: block;
  font-size: 11px;
  font-style: italic;
  margin-top: 3px;
}

.radar-brand-panel span {
  color: #8a7f75;
  display: block;
  font-size: 10px;
  line-height: 1.45;
  margin-top: 4px;
}

.radar-brand-panel figure {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  justify-items: center;
  margin: 0;
}

.radar-brand-panel em {
  background: var(--action-primary);
  border-radius: 999px;
  color: #fffefa;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  padding: 2px 7px;
}

.radar-brand-panel img {
  background: white;
  border: 1px solid #eee3d4;
  border-radius: 6px;
  height: 64px;
  padding: 3px;
  width: 64px;
}

.radar-brand-panel figcaption {
  color: #9c9187;
  font-size: 8px;
}

.share-report-cover {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  padding: 26px 22px 24px;
  text-align: center;
}

.share-report-cover h1 {
  font-size: 27px;
  line-height: 1.22;
  margin: 8px auto 12px;
  max-width: 11em;
  text-wrap: balance;
}

.share-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.share-cover-meta span {
  background: color-mix(in srgb, var(--surface-paper) 88%, white);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, white);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.compact-symbols {
  margin: 18px 0 14px;
}

.share-cover-slogan {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  margin: 0 auto;
  max-width: 22em;
}

.share-report-card .share-section {
  padding: 22px;
}

.share-report-card .share-section + .share-section {
  border-top: 1px solid var(--border-subtle);
}

.share-report-card .section-title {
  align-items: flex-start;
}

.share-report-card .section-title h2 {
  font-size: 18px;
  line-height: 1.35;
}

.share-report-card .section-title span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.share-score-list.rich {
  gap: 14px;
}

.share-score-list.rich span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.share-score-list.rich strong {
  color: var(--text-primary);
}

.share-chart-box {
  height: 300px;
  margin-top: 16px;
}

.share-dimension-grid {
  gap: 14px;
}

.share-dimension-grid .dimension-row {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  border-radius: 14px;
  padding: 12px;
}

.share-dimension-grid .dimension-row span {
  color: var(--text-primary);
  font-weight: 800;
}

.share-metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.share-metric-grid.three {
  grid-template-columns: 1fr;
}

.share-metric-grid.two {
  margin-top: 10px;
}

.share-metric-grid div {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.share-metric-grid span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.share-metric-grid strong {
  color: var(--text-primary);
  font-size: 18px;
}

.share-answer-list div {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  border-radius: 14px;
}

.share-report-card .report-copy-block {
  border-top-color: color-mix(in srgb, var(--border-subtle) 76%, white);
  margin-top: 14px;
}

.share-report-card .report-copy-block:first-of-type {
  margin-top: 0;
}

.share-report-card .report-copy-block h3 {
  color: var(--text-primary);
  font-size: 15px;
}

.share-report-card .report-copy-block p {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.75;
  margin-top: 8px;
}

.share-report-footer {
  background: var(--surface-warm);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: grid;
  gap: 6px;
  padding: 20px 22px 24px;
  text-align: center;
}

.share-report-footer p {
  color: var(--text-primary);
  font-weight: 700;
  margin: 0;
}

.share-report-footer strong {
  color: var(--text-primary);
}

.share-report-footer span {
  font-size: 13px;
}

.report-asset-card {
  --report-type1: #b86a5d;
  --report-type2: #b9974c;
  --report-type3: #5f91a2;
  --report-type4: #7b9b68;
  --report-chart-line: #8d7469;
  --report-chart-line-soft: #b6a195;
  --report-chart-fill: rgba(141, 116, 105, 0.14);
  --report-chart-fill-soft: rgba(141, 116, 105, 0.07);
  --character-red: var(--report-type1);
  --character-yellow: var(--report-type2);
  --character-blue: var(--report-type3);
  --character-green: var(--report-type4);
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  box-shadow: var(--shadow-paper);
  color: var(--text-primary);
  display: grid;
  gap: 0;
  margin: 0 auto;
  overflow: hidden;
}

/* 1.0 单人王者人格图：图片交付使用真实旧版结构与色值。 */
.legacy-single-radar-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  box-sizing: border-box;
  color: #1a1a2e;
  margin: 40px auto;
  max-width: 1100px;
  padding: 40px;
  width: calc(100% - 40px);
}

.legacy-single-radar-header {
  text-align: center;
}

.legacy-single-radar-header h1 {
  color: #1a1a2e;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
}

.legacy-single-radar-header h1 span {
  color: #d4a574;
}

.legacy-single-radar-header p {
  color: #888;
  font-size: 12px;
  margin: 0 0 10px;
}

.legacy-single-radar-header .legacy-single-radar-date {
  color: #aaa;
  font-size: 10px;
  margin: -4px 0 10px;
}

.legacy-single-radar-rank-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 2px;
}

.legacy-single-radar-rank-bar > span {
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  color: #555;
  display: inline-flex;
  font-size: 14px;
  gap: 6px;
  padding: 6px 14px;
}

.legacy-single-dot {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.legacy-single-dot.type1 { background: #d4828c; }
.legacy-single-dot.type2 { background: #d4a574; }
.legacy-single-dot.type3 { background: #5b8bd8; }
.legacy-single-dot.type4 { background: #5ab8a8; }

.legacy-single-radar-rank-bar strong {
  font-size: 15px;
  font-weight: 700;
}

.legacy-single-radar-portrait {
  color: #666;
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 10px;
  text-align: center;
}

.legacy-single-radar-charts {
  align-items: stretch;
  display: flex;
  gap: 40px;
}

.legacy-single-radar-left,
.legacy-single-radar-right {
  flex: 1;
  min-width: 0;
}

.legacy-single-radar-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.legacy-single-radar-polar {
  height: 460px;
  width: 100%;
}

.legacy-single-radar-bars {
  height: 600px;
  width: 100%;
}

.legacy-single-radar-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: flex-start;
  margin: 0 10px 6px 70px;
}

.legacy-single-radar-legend span {
  align-items: center;
  color: #555;
  display: inline-flex;
  font-size: 13px;
  gap: 5px;
  white-space: nowrap;
}

.legacy-single-radar-footer {
  align-items: center;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 16px 10px 0 50px;
  padding: 10px 16px;
}

.legacy-single-radar-footer-copy {
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
}

.legacy-single-radar-footer-copy strong {
  color: #333;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.legacy-single-radar-footer-copy span {
  color: #888;
  display: block;
  font-size: 10px;
  line-height: 1.4;
}

.legacy-single-radar-footer figure {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.legacy-single-radar-footer em {
  background: #e74c3c;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 6px;
  white-space: nowrap;
}

.legacy-single-radar-footer img {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-sizing: border-box;
  height: 56px;
  object-fit: contain;
  padding: 2px;
  width: 56px;
}

.legacy-single-radar-footer figcaption {
  color: #bbb;
  font-size: 8px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .legacy-single-radar-card {
    padding: 24px;
  }

  .legacy-single-radar-charts {
    flex-direction: column;
  }

  .legacy-single-radar-legend {
    justify-content: center;
    margin-left: 0;
  }

  .legacy-single-radar-footer {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 2.0 单次测评身份牌：沿用旧系统身份牌结构，内容由 2.0 单次数据驱动。 */
.single-identity-card {
  --identity-paper: #fffdf8;
  --identity-ink: #2a201c;
  --identity-muted: #7a6d62;
  --identity-gold: #b8894e;
  --identity-gold-soft: #f3e6d4;
  --identity-rose: #c97a84;
  --identity-blue: #6e8bc7;
  --identity-green: #6ead99;
  --identity-yellow: #d9a94b;
  background:
    radial-gradient(circle at 110% -2%, rgba(184, 137, 78, .14), transparent 32%),
    radial-gradient(circle at -5% 30%, rgba(201, 122, 132, .10), transparent 26%),
    linear-gradient(180deg, var(--identity-paper) 0%, #fcf9f3 100%);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(50, 34, 16, .12);
  box-sizing: border-box;
  color: var(--identity-ink);
  margin: 0 auto;
  max-width: 448px;
  overflow: hidden;
  width: 100%;
}

.single-identity-top-band {
  background: linear-gradient(90deg, var(--identity-rose), var(--identity-yellow), var(--identity-green), var(--identity-blue));
  height: 6px;
}

.single-identity-inner {
  display: flex;
  flex-direction: column;
  padding: 0 24px 22px;
}

.single-identity-banner {
  margin: 0 -24px 12px;
}

.single-identity-banner img {
  display: block;
  height: auto;
  width: 100%;
}

.single-identity-title {
  background: linear-gradient(135deg, var(--identity-gold-soft), #fff);
  border: 1px solid rgba(184, 137, 78, .25);
  border-radius: 999px;
  color: var(--identity-gold);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 2px auto 12px;
  padding: 5px 14px;
  text-align: center;
}

.single-identity-header {
  margin-bottom: 9px;
  text-align: center;
}

.single-identity-header h1 {
  color: var(--identity-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.single-identity-header h1 span {
  color: var(--identity-gold);
  font-weight: 700;
}

.single-identity-date {
  color: #aa9a89;
  font-size: 10px;
  line-height: 1.4;
  margin: 5px 0 7px;
}

.single-identity-tagline {
  color: #6b5d52;
  font-size: 13px;
  line-height: 1.65;
  margin: 0 auto 9px;
  max-width: 360px;
}

.single-identity-score-grid {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.single-identity-score {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(93, 71, 47, .08);
  border-radius: 10px;
  border-top: 3px solid var(--identity-gold);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 3px;
  text-align: center;
}

.single-identity-score.type1 { border-top-color: var(--identity-rose); }
.single-identity-score.type2 { border-top-color: var(--identity-yellow); }
.single-identity-score.type3 { border-top-color: var(--identity-blue); }
.single-identity-score.type4 { border-top-color: var(--identity-green); }

.single-identity-score span {
  color: var(--identity-muted);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

.single-identity-score strong {
  color: var(--identity-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.single-identity-section {
  border-top: 1px solid rgba(93, 71, 47, .08);
  margin-top: 16px;
  padding-top: 13px;
}

.single-identity-section h2 {
  color: var(--identity-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 7px;
}

.single-identity-copy {
  color: #4a3f38;
  font-size: 12px;
  line-height: 1.75;
}

.single-identity-copy p {
  margin: 0;
}

.single-identity-cta {
  background: linear-gradient(135deg, #f9f0e4 0%, #f5e9d8 100%);
  border-left: 3px solid var(--identity-gold);
  border-radius: 16px;
  margin-top: 18px;
  padding: 14px 16px;
}

.single-identity-cta p {
  color: #5b4530;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

.single-identity-footer-cta {
  align-items: flex-end;
  border-top: 1px solid rgba(93, 71, 47, .08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
}

.single-identity-coach-copy {
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}

.single-identity-coach-copy strong {
  color: #333;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.single-identity-coach-copy span {
  color: #7a6d62;
  font-size: 10px;
  line-height: 1.5;
}

.single-identity-qr {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.single-identity-qr-wrap {
  background: #fff;
  border: 1px solid rgba(93, 71, 47, .08);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(60, 42, 24, .06);
  height: 76px;
  padding: 5px;
  width: 76px;
}

.single-identity-qr-wrap img {
  border-radius: 6px;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.single-identity-qr figcaption {
  color: var(--identity-muted);
  font-size: 9px;
  line-height: 1.5;
  white-space: nowrap;
}

.single-identity-footer {
  background: linear-gradient(180deg, #2b211c 0%, #1a1410 100%);
  color: rgba(248, 244, 236, .55);
  font-size: 11px;
  letter-spacing: .03em;
  padding: 14px;
  text-align: center;
}

.report-asset-wide {
  width: 1068px;
}

.report-asset-head {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  gap: 10px;
  padding: 30px 34px 24px;
  text-align: center;
}

.report-asset-head h1 {
  font-size: 34px;
  line-height: 1.16;
  margin: 0 auto;
  max-width: 22em;
  text-wrap: balance;
}

.report-asset-head h1 span,
.report-asset-head .couple-export-keyword {
  color: var(--accent-structure);
}

.report-asset-lead {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 68ch;
  text-wrap: pretty;
}

.report-asset-thread {
  background: linear-gradient(
    90deg,
    var(--character-red) 0 25%,
    var(--character-yellow) 25% 50%,
    var(--character-blue) 50% 75%,
    var(--character-green) 75% 100%
  );
  border-radius: 999px;
  height: 5px;
  justify-self: center;
  margin-top: 4px;
  width: 128px;
}

.report-character-mark {
  --mark-size: 18px;
  display: inline-block;
  flex: 0 0 auto;
  height: var(--mark-size);
  width: var(--mark-size);
}

.report-character-mark.type-type1,
.report-character-mark.type1,
.radar-legend i.type-type1 {
  background: var(--character-red);
  border-radius: 6px;
}

.report-character-mark.type-type2,
.report-character-mark.type2,
.radar-legend i.type-type2 {
  background: var(--character-yellow);
  border-radius: 50%;
}

.report-character-mark.type-type3,
.report-character-mark.type3,
.radar-legend i.type-type3 {
  background: var(--character-blue);
  clip-path: polygon(50% 4%, 94% 94%, 6% 94%);
}

.report-character-mark.type-type4,
.report-character-mark.type4,
.radar-legend i.type-type4 {
  background:
    radial-gradient(circle at 50% 26%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 75% 43%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 65% 70%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 35% 70%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 25% 43%, var(--character-green) 0 23%, transparent 24%),
    radial-gradient(circle at 50% 54%, var(--character-green) 0 28%, transparent 29%);
}

.radar-legend i.type-type3 {
  border-radius: 0;
}

.radar-legend i.type-type4 {
  border-radius: 0;
}

.report-asset-radar-layout {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
  padding: 24px 30px;
}

.report-identity-panel,
.report-chart-panel,
.relationship-focus-panel section,
.warm-asset-callout,
.warm-asset-insights article,
.couple-asset-people article,
.couple-asset-reading,
.couple-type-compare article,
.couple-dimension-asset-summary article,
.couple-insight-asset-lead article,
.couple-insight-asset-grid > div,
.couple-insight-asset-support,
.couple-insight-map,
.couple-insight-signals article {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 14px;
}

.report-identity-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.report-identity-panel h2,
.report-chart-title h2,
.relationship-focus-panel h2,
.warm-asset-score h2,
.warm-asset-callout h2,
.warm-asset-insights h2,
.couple-asset-reading h2,
.couple-type-compare h2,
.couple-insight-asset-grid h2,
.couple-insight-asset-support h2 {
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
}

.report-personality-order {
  display: grid;
  gap: 10px;
}

.report-personality-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.report-personality-row div,
.couple-type-compare p {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.report-personality-row strong,
.couple-type-compare strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.report-personality-row small,
.report-asset-note,
.report-chart-title span,
.warm-asset-callout span,
.couple-asset-reading span,
.couple-dimension-asset-summary span,
.couple-insight-asset-lead span,
.couple-insight-signals span,
.couple-map-person span,
.relationship-focus-panel p,
.couple-dimension-asset-summary p,
.couple-type-compare p,
.couple-insight-asset-grid p,
.couple-insight-asset-support p {
  color: var(--text-secondary);
}

.report-asset-note {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.report-chart-panel {
  align-content: start;
  display: grid;
  gap: 10px;
  padding: 16px;
}

.report-chart-title {
  align-items: end;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.report-chart-title h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.report-chart-title span {
  flex: 0 1 auto;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.report-chart-panel-primary {
  grid-column: 1 / -1;
}

.report-chart-panel-primary .radar-wide-bar-chart {
  height: 450px;
  margin-top: 0;
}

.report-chart-panel-type .radar-type-chart {
  height: 320px;
  margin-top: 0;
}

.report-chart-panel-compact .radar-wide-polar-chart {
  height: 320px;
  margin-top: 0;
}

.report-chart-panel-compact .radar-wide-relationship-chart,
.couple-overview-layout .couple-export-relationship-chart {
  height: 320px;
  margin-top: 0;
}

.report-chart-panel-compact .radar-legend {
  margin: 2px 0 0;
}

.report-mini-metrics {
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.report-mini-metrics p {
  background: color-mix(in srgb, var(--surface-paper) 78%, var(--surface-muted));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, white);
  border-radius: 10px;
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  margin: 0;
  min-width: 0;
  padding: 8px;
}

.report-mini-metrics span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
}

.report-mini-metrics strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.2;
}

.couple-relationship-missing-card {
  align-content: start;
  background: color-mix(in srgb, var(--surface-warm) 72%, white);
  border: 1px solid color-mix(in srgb, var(--accent-structure) 24%, var(--border-subtle));
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  display: grid;
  gap: 12px;
  min-height: 282px;
  padding: 18px;
}

.couple-relationship-missing-card strong {
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.35;
}

.couple-relationship-missing-card p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.couple-relationship-missing-card ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.couple-relationship-missing-card li {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, white);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.couple-relationship-missing-card span {
  color: var(--accent-structure);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.couple-relationship-missing-card em {
  color: var(--text-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.report-asset-footer {
  align-items: center;
  background: var(--surface-warm);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 30px 20px;
}

.report-asset-footer p,
.report-asset-footer strong,
.report-asset-footer span {
  display: block;
  margin: 0;
}

.report-asset-footer p {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.report-asset-footer strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 3px;
}

.report-asset-footer span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.report-asset-footer figure {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  justify-items: center;
  margin: 0;
}

.report-asset-footer em {
  background: var(--action-primary);
  border-radius: 999px;
  color: var(--action-on-primary);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  padding: 3px 8px;
}

.report-asset-footer img {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  height: 72px;
  padding: 4px;
  width: 72px;
}

.report-asset-footer figcaption {
  color: var(--text-secondary);
  font-size: 9px;
}

.relationship-asset-card {
  width: 820px;
}

.relationship-asset-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 22px 30px 0;
}

.relationship-asset-summary article {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  padding: 15px;
}

.relationship-asset-summary span,
.relationship-asset-summary small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.relationship-asset-summary strong {
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.1;
}

.relationship-asset-summary i {
  background: var(--accent-structure);
  border-radius: 999px;
  display: block;
  height: 6px;
  max-width: 100%;
}

.relationship-asset-body {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 260px;
  padding: 18px 30px 24px;
}

.relationship-asset-body .relationship-radar-chart,
.couple-relationship-body .couple-export-relationship-chart {
  height: 390px;
  margin: 0;
}

.relationship-focus-panel {
  display: grid;
  gap: 12px;
}

.relationship-focus-panel section {
  display: grid;
  gap: 7px;
  padding: 15px;
}

.relationship-focus-panel p {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.relationship-focus-panel strong {
  color: var(--text-primary);
}

.warm-report-asset,
.couple-export-insight {
  width: 430px;
}

.warm-asset-head .report-asset-lead,
.couple-export-insight .report-asset-lead {
  font-size: 13px;
  line-height: 1.65;
}

.warm-asset-score,
.warm-asset-callout,
.warm-asset-insights,
.couple-insight-map,
.couple-insight-signals,
.couple-insight-asset-lead,
.couple-insight-asset-grid,
.couple-insight-asset-support {
  display: grid;
  gap: 12px;
  padding: 18px 22px;
}

.warm-asset-score {
  border-bottom: 1px solid var(--border-subtle);
}

.warm-asset-score .share-score-list.rich span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.warm-asset-callout {
  margin: 18px 22px 0;
  padding: 16px;
}

.warm-asset-callout p,
.warm-asset-insights p,
.couple-asset-reading p,
.couple-insight-asset-lead p,
.couple-insight-asset-grid p,
.couple-insight-asset-support p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
  text-wrap: pretty;
}

.warm-asset-insights {
  padding-top: 14px;
}

.warm-asset-insights article {
  display: grid;
  gap: 8px;
  padding: 15px;
}

.warm-asset-footer,
.couple-export-footer {
  padding-left: 22px;
  padding-right: 22px;
  text-align: left;
}

.couple-asset-card {
  width: 820px;
}

.couple-asset-head .couple-export-keyword {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  display: inline-flex;
  font-size: 24px;
  font-weight: 850;
  justify-self: center;
  line-height: 1.35;
  padding: 8px 20px;
}

.couple-asset-people,
.couple-asset-main,
.couple-dimension-asset-summary,
.couple-dimension-asset-body,
.couple-type-compare {
  display: grid;
  gap: 14px;
  padding: 18px 30px 0;
}

.couple-asset-people,
.couple-dimension-asset-summary,
.couple-type-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couple-dimension-asset-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.couple-asset-main {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.couple-asset-people article,
.couple-asset-reading,
.couple-dimension-asset-summary article,
.couple-type-compare article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.couple-asset-people span,
.couple-dimension-asset-summary span,
.couple-type-compare h2 {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  margin: 0;
}

.couple-dimension-asset-summary p {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.couple-dimension-asset-summary strong {
  color: var(--text-primary);
}

.couple-asset-people strong {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.3;
}

.couple-export-point-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.couple-export-point-list p {
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white);
  display: grid;
  gap: 4px;
  margin: 0;
  padding-top: 10px;
}

.couple-export-point-list p:first-child {
  border-top: 0;
  padding-top: 0;
}

.couple-export-point-list strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.couple-export-point-list span {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.couple-type-chart-panel .couple-export-radar {
  height: 330px;
  min-height: 330px;
}

.couple-overview-layout .couple-export-radar {
  height: 320px;
  min-height: 320px;
}

.couple-overview-layout .report-chart-title {
  align-items: start;
  display: grid;
  gap: 2px;
  justify-content: start;
}

.couple-overview-layout .report-chart-title span {
  text-align: left;
}

.couple-overview-layout .couple-export-dimension-chart {
  height: 450px;
  margin: 0;
}

.couple-overview-person-block {
  display: grid;
  gap: 12px;
}

.couple-overview-person-block section {
  display: grid;
  gap: 8px;
}

.couple-overview-person-block h3 {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.couple-overview-person-block p {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0;
}

.couple-overview-person-block span:not(.report-character-mark) {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.couple-overview-person-block strong {
  color: var(--text-primary);
  font-size: 13px;
}

/* Couple overview image: split the data delivery into personality and pyramid. */
.couple-overview-story {
  display: grid;
  gap: 18px;
  padding: 24px 30px;
}

.couple-overview-part {
  display: grid;
  gap: 14px;
}

.couple-overview-part + .couple-overview-part {
  border-top: 1px solid var(--border-subtle);
  padding-top: 22px;
}

.couple-overview-part-title {
  align-items: end;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.couple-overview-part-title h2 {
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}

.couple-overview-part-title span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.couple-overview-personality-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 250px minmax(0, 1fr);
}

.couple-overview-personality-grid .report-identity-panel {
  min-width: 0;
}

.couple-overview-personality-grid .couple-type-chart-panel .couple-export-radar {
  height: 360px;
  min-height: 360px;
}

.couple-overview-story .report-identity-panel > h3,
.couple-overview-story .report-chart-title h3 {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
}

.couple-overview-person-block h4 {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.couple-overview-dimension-panel .couple-export-dimension-chart {
  height: 450px;
  margin: 0;
}

.couple-overview-pyramid-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 310px;
}

.couple-overview-pyramid-grid .report-chart-panel {
  min-width: 0;
}

.couple-overview-pyramid-grid .couple-export-relationship-chart {
  height: 380px;
  margin: 0;
}

.couple-overview-pyramid-summary {
  align-content: start;
  display: grid;
  gap: 9px;
}

.couple-overview-pyramid-summary article {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  padding: 13px;
}

.couple-overview-pyramid-summary article span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.couple-overview-pyramid-summary article strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.couple-overview-pyramid-summary article small {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
}

.couple-overview-pyramid-note {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
  margin: 2px 0 0;
}

.couple-overview-footer {
  align-items: end;
}

.couple-dimension-asset-body {
  padding-bottom: 22px;
}

.couple-dimension-asset-body .couple-export-dimension-chart {
  height: 520px;
  margin: 0;
}

.couple-type-compare {
  padding-bottom: 22px;
}

.couple-type-compare p {
  align-items: center;
  display: grid;
  gap: 11px;
  grid-template-columns: auto 1fr auto;
  justify-content: initial;
}

.couple-type-compare p {
  font-size: 14px;
  margin: 0;
}

.couple-relationship-summary article {
  background: var(--surface-paper);
}

.couple-relationship-body {
  grid-template-columns: minmax(0, 1fr) 260px;
}

.couple-insight-asset-lead article,
.couple-insight-asset-grid > div,
.couple-insight-asset-support,
.couple-insight-signals article {
  display: grid;
  gap: 9px;
  padding: 15px;
}

.couple-insight-map {
  padding-top: 18px;
}

.couple-insight-map {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin: 18px 22px 0;
  padding: 14px;
}

.couple-map-person {
  align-items: center;
  display: grid;
  gap: 7px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.couple-map-person span,
.couple-insight-signals span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.couple-map-person strong,
.couple-insight-signals strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
}

.couple-map-order {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.couple-map-order .report-character-mark {
  --mark-size: 15px;
}

.couple-map-bridge {
  align-items: center;
  color: var(--text-secondary);
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 78px;
}

.couple-map-bridge i {
  background: linear-gradient(
    90deg,
    var(--character-red) 0 25%,
    var(--character-yellow) 25% 50%,
    var(--character-blue) 50% 75%,
    var(--character-green) 75% 100%
  );
  border-radius: 999px;
  display: block;
  height: 4px;
  width: 66px;
}

.couple-map-bridge span {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.couple-insight-signals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 0;
  padding-top: 12px;
}

.couple-mini-bars {
  display: grid;
  gap: 5px;
}

.couple-mini-bars i {
  background: var(--signal-color, var(--report-chart-line));
  border-radius: 999px;
  display: block;
  height: 7px;
  min-width: 12px;
}

.couple-mini-bars i.is-compare {
  background: color-mix(in srgb, var(--signal-color, var(--report-chart-line)) 38%, var(--surface-paper));
  border: 1px solid var(--signal-color, var(--report-chart-line));
}

.couple-signal-dots {
  align-items: end;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, 1fr);
  height: 28px;
}

.couple-signal-dots i {
  background: color-mix(in srgb, var(--report-chart-line) 30%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--report-chart-line) 72%, white);
  border-radius: 999px 999px 5px 5px;
  display: block;
  height: max(8px, var(--dot-level, 20%));
}

.couple-insight-signals small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.couple-insight-asset-lead {
  padding-top: 12px;
}

.couple-insight-asset-grid > div,
.couple-insight-asset-support {
  margin: 0 22px;
}

.couple-insight-asset-grid {
  padding-left: 0;
  padding-right: 0;
}

.couple-insight-asset-grid article,
.couple-insight-asset-support article {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 5px;
  padding-top: 10px;
}

.couple-insight-asset-grid article:first-of-type,
.couple-insight-asset-support article:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.couple-insight-asset-grid strong,
.couple-insight-asset-support strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.45;
}

/* Couple insight image: the same readable story used by the report detail page. */
.couple-insight-story {
  background: #fbf7f0;
  overflow: hidden;
}

.couple-story-brandbar {
  align-items: center;
  background: #202036;
  color: #fffaf3;
  display: flex;
  justify-content: space-between;
  padding: 12px 22px 0;
}

.couple-story-brandbar > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.couple-story-brandbar strong {
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .02em;
}

.couple-story-brandbar em {
  color: #dfcda9;
  font-size: 9px;
  font-style: italic;
}

.couple-story-brand-mark {
  align-items: center;
  background: #c9944d;
  border-radius: 6px;
  color: #202036;
  display: inline-flex;
  font-size: 12px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.couple-story-head {
  background: linear-gradient(115deg, #1d1d33, #323151);
  padding: 28px 22px 24px;
}

.couple-story-head h1 {
  color: #fffaf2;
  font-size: 31px;
  line-height: 1.22;
  margin: 4px 0 10px;
}

.couple-story-head .mini-label {
  color: #e4bf7f;
}

.couple-story-head .report-asset-lead {
  font-size: 14px;
  line-height: 1.75;
  color: #d8d3cf;
}

.couple-story-method {
  color: #d8d3cf;
  font-size: 10px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.couple-story-block {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 13px;
  padding: 22px;
}

.couple-story-title {
  display: grid;
  gap: 3px;
}

.couple-story-title span {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.35;
}

.couple-story-title small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.couple-story-person-grid,
.couple-story-combo-grid,
.couple-story-signal-grid,
.couple-story-two-col {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couple-story-person-grid article,
.couple-story-combo-grid article,
.couple-story-signal-grid article,
.couple-story-two-col > article {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 12px;
  min-width: 0;
  padding: 13px;
}

.couple-story-person-grid h3,
.couple-story-combo-grid h3,
.couple-story-two-col h3,
.couple-story-inline-copy h3 {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.couple-story-person-grid article > strong {
  color: var(--accent-structure);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin: 2px 0 9px;
}

.couple-story-score-list {
  display: grid;
  gap: 7px;
}

.couple-story-score-list p {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  margin: 0;
}

.couple-story-score-list .report-character-mark {
  --mark-size: 12px;
}

.couple-story-score-list span,
.couple-story-score-list em {
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.couple-story-score-list em {
  color: var(--text-primary);
  font-weight: 850;
}

.couple-story-reading,
.couple-story-inline-copy,
.couple-story-hook {
  background: var(--surface-warm);
  border-left: 3px solid var(--accent-structure);
  padding: 12px 13px;
}

.couple-story-reading h3,
.couple-story-inline-copy h3,
.couple-story-hook strong {
  color: var(--text-primary);
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 5px;
}

.couple-story-reading p,
.couple-story-combo-grid p,
.couple-story-inline-copy p,
.couple-story-reading-copy,
.couple-story-two-col p,
.couple-story-layers p,
.couple-story-final > p,
.couple-story-hook p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.75;
  margin: 0;
  text-wrap: pretty;
}

.couple-story-combo-grid p {
  margin-top: 7px;
}

.couple-story-inline-copy {
  display: grid;
  gap: 5px;
}

.couple-story-signal-grid article {
  display: grid;
  gap: 4px;
}

.couple-story-signal-grid span,
.couple-story-pyramid-data span,
.couple-story-pyramid-data small {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.couple-story-signal-grid strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
}

.couple-story-dimension-list {
  display: grid;
  gap: 8px;
}

.couple-story-dimension-list article {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 5px;
  padding-top: 8px;
}

.couple-story-dimension-list article > div,
.couple-story-dimension-list p {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  margin: 0;
}

.couple-story-dimension-list article > div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.couple-story-dimension-list article > div strong {
  color: var(--text-primary);
  font-size: 11px;
}

.couple-story-dimension-list article > div span,
.couple-story-dimension-list p b,
.couple-story-dimension-list p small {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.3;
}

.couple-story-dimension-list p i {
  background: color-mix(in srgb, var(--border-subtle) 70%, white);
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
}

.couple-story-dimension-list p i em {
  background: #6389d8;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.couple-story-dimension-list p i.is-compare {
  background: rgba(232, 88, 86, .08);
  border: 1px solid rgba(232, 88, 86, .56);
  height: 4px;
}

.couple-story-dimension-list p i.is-compare em {
  background: #e85856;
}

.couple-story-two-col {
  align-items: start;
}

.couple-story-two-col > article {
  display: grid;
  gap: 9px;
}

.couple-story-two-col > article > div {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 3px;
  padding-top: 8px;
}

.couple-story-two-col > article > div:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.couple-story-two-col strong {
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.45;
}

.couple-story-chart {
  height: 305px;
  min-height: 305px;
}

.couple-story-pyramid-data,
.couple-story-layers {
  display: grid;
  gap: 8px;
}

.couple-story-pyramid-data article,
.couple-story-layers article {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-paper));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.couple-story-pyramid-data strong,
.couple-story-layers article > span {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
}

.couple-story-layers article > span {
  color: var(--accent-structure);
  font-weight: 850;
}

.couple-story-final {
  background: #202036;
  border-top: 0;
  color: #eee8df;
}

.couple-story-final .couple-story-title span {
  color: #f3bf6f;
}

.couple-story-final .couple-story-title small,
.couple-story-final > p,
.couple-story-final .couple-story-hook p {
  color: #eee8df;
}

.couple-story-final > p {
  font-size: 13px;
}

.couple-story-hook {
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--action-primary);
}

.couple-story-final .couple-story-hook strong {
  color: #e7c68d;
}

.couple-story-footer {
  align-items: end;
  background: #202036;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.couple-story-footer p,
.couple-story-footer strong {
  color: #fffaf2;
}

.couple-story-footer span,
.couple-story-footer figcaption {
  color: #dfcda9;
}

.couple-story-footer figure {
  gap: 3px;
}

.couple-story-footer img {
  height: 64px;
  width: 64px;
}

.couple-story-footer figcaption {
  font-size: 8px;
}

@media (max-width: 780px) {
  .report-asset-wide,
  .relationship-asset-card,
  .couple-asset-card {
    width: 100%;
  }

  .report-asset-radar-layout,
  .relationship-asset-body,
  .couple-asset-main,
  .couple-relationship-body {
    grid-template-columns: 1fr;
  }

  .relationship-asset-summary,
  .couple-asset-people,
  .couple-dimension-asset-summary,
  .couple-type-compare {
    grid-template-columns: 1fr;
  }

  .couple-report-jump {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-image-action-row {
    grid-template-columns: 1fr;
  }
}

/* Structured play: one vocabulary for the workbench, schedule and learner timeline. */
.play-workbench-header,
.play-timeline-header {
  align-items: flex-end;
}

.resource-summary-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--border-subtle);
}

.resource-summary-strip > div {
  background: var(--surface-paper);
  display: grid;
  gap: 5px;
  padding: 18px;
}

.resource-summary-strip span,
.resource-row-meta,
.timeline-meta,
.public-type-line,
.public-meta-grid small {
  color: var(--text-secondary);
  font-size: 13px;
}

.resource-summary-strip strong {
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
}

.resource-list,
.resource-unit-list,
.version-list {
  display: grid;
}

.resource-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  padding: 17px 0;
}

.resource-row:last-child,
.resource-unit-row:last-child,
.version-row:last-child {
  border-bottom: 0;
}

.resource-row-main,
.resource-row-actions,
.resource-row-meta,
.resource-unit-row,
.version-row,
.public-type-line,
.public-detail-actions,
.form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.resource-row-main {
  min-width: 0;
}

.resource-row-main h3,
.resource-unit-row h3,
.version-row strong {
  color: var(--text-primary);
  font-size: 16px;
  margin: 0;
}

.resource-row-main p,
.resource-unit-row p,
.resource-unit-row small,
.resource-row-main small,
.version-row small {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 4px 0 0;
}

.resource-type-mark,
.unit-number {
  align-items: center;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.resource-type-mark.is-course { background: color-mix(in srgb, var(--accent-structure) 18%, var(--surface-paper)); }
.resource-type-mark.is-activity { background: color-mix(in srgb, var(--action-primary) 15%, var(--surface-paper)); }
.resource-type-mark.is-run { background: color-mix(in srgb, var(--status-info) 14%, var(--surface-paper)); }

.resource-row-actions { justify-content: flex-end; }
.resource-row-actions .btn { white-space: nowrap; }
.resource-editor-form { display: grid; gap: 18px; max-width: 920px; }

.article-import-panel {
  margin-bottom: 18px;
  max-width: 920px;
}

.article-import-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.article-import-preview {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.article-import-preview strong {
  display: block;
  margin-bottom: 6px;
}

.article-import-preview small {
  color: var(--text-secondary);
  display: block;
  margin-top: 6px;
}
.resource-editor-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.resource-units-section,
.resource-version-history,
.resource-workbench-section { margin-top: 18px; }
.resource-unit-row,
.version-row { border-bottom: 1px solid var(--border-subtle); padding: 14px 0; }
.resource-unit-row > div:nth-child(2) { flex: 1 1 240px; min-width: 0; }
.resource-unit-row .btn { margin-left: auto; }
.version-row span:first-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 42px; }
.version-row strong { flex: 1 1 220px; }
.version-row small { margin-left: auto; }

.timeline-filter-panel { padding: 10px 14px; }
.timeline-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.timeline-filters a { border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary); padding: 7px 12px; }
.timeline-filters a:hover,
.timeline-filters a.is-active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-paper); }
.timeline-list { display: grid; gap: 0; }
.timeline-row { align-items: stretch; display: grid; gap: 15px; grid-template-columns: 68px 16px minmax(0, 1fr) auto; padding: 18px 0; }
.timeline-row-link { color: inherit; text-decoration: none; }
.timeline-row-link:hover .timeline-copy h2 { text-decoration: underline; }
.timeline-row-link:focus-visible { border-radius: var(--radius-sm); outline: 3px solid color-mix(in srgb, var(--action-primary) 30%, transparent); outline-offset: 4px; }
.timeline-row + .timeline-row { border-top: 1px solid var(--border-subtle); }
.timeline-date { display: grid; align-content: start; gap: 2px; text-align: right; }
.timeline-date strong { color: var(--text-primary); font-size: 15px; }
.timeline-date small { color: var(--text-secondary); font-size: 12px; }
.timeline-rail { display: flex; justify-content: center; position: relative; }
.timeline-rail::before { background: var(--border-subtle); content: ""; height: 100%; position: absolute; top: 10px; width: 1px; }
.timeline-rail span { background: var(--action-primary); border: 3px solid var(--surface-paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--action-primary); height: 10px; position: relative; width: 10px; z-index: 1; }
.timeline-copy { min-width: 0; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.timeline-copy h2 { font-size: 17px; margin: 0; }
.timeline-copy h2 a { color: var(--text-primary); }
.timeline-copy p { color: var(--text-secondary); margin: 6px 0 0; }
.timeline-row > .btn { align-self: center; }
.play-type-mark { align-items: center; background: var(--surface-muted); border-radius: 50%; color: var(--text-primary); display: inline-flex; flex: 0 0 34px; font-size: 14px; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
.play-type-workshop { background: color-mix(in srgb, var(--action-primary) 14%, var(--surface-paper)); }
.play-type-lesson { background: color-mix(in srgb, var(--accent-structure) 18%, var(--surface-paper)); }
.play-type-activity { background: color-mix(in srgb, var(--status-info) 14%, var(--surface-paper)); }

.play-public-detail { margin: 0 auto; max-width: 760px; padding: 28px 20px 72px; }
.play-public-detail h1 { color: var(--text-primary); font-size: 32px; letter-spacing: -.02em; margin: 20px 0 10px; text-wrap: balance; }
.public-lead { color: var(--text-secondary); font-size: 17px; line-height: 1.65; max-width: 65ch; }
.public-type-line { margin-top: 22px; }
.public-meta-grid { border-bottom: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; padding: 18px 0; }
.public-meta-grid div { display: grid; gap: 6px; }
.public-meta-grid strong { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.public-detail-actions { margin: 24px 0; }
.public-materials,
.public-outline,
.public-schedule { border-top: 1px solid var(--border-subtle); margin-top: 30px; padding-top: 22px; }
.public-context { background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); display: grid; gap: 6px; margin: 22px 0; padding: 14px 16px; }
.context-label { color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.context-link { color: var(--text-primary); display: grid; gap: 3px; }
.context-link small { color: var(--text-secondary); }
.public-materials h2,
.public-outline h2,
.public-schedule h2 { font-size: 19px; margin: 0 0 12px; }
.material-row,
.outline-row,
.schedule-row { align-items: center; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); display: flex; gap: 12px; padding: 14px 0; }
.material-row:last-child,
.outline-row:last-child,
.schedule-row:last-child { border-bottom: 0; }
.material-row span,
.outline-row > span:nth-child(2),
.schedule-row > span { display: grid; gap: 4px; min-width: 0; }
.material-row small,
.outline-row small,
.schedule-row small { color: var(--text-secondary); }
.material-row span { flex: 1; }
.outline-row > span:nth-child(2),
.schedule-row > span { flex: 1; }
.outline-row em,
.schedule-row em { color: var(--text-secondary); font-size: 22px; font-style: normal; }
.public-schedule time { display: grid; flex: 0 0 60px; gap: 3px; }
.public-schedule time strong { color: var(--text-primary); }
.public-schedule time small { color: var(--text-secondary); }
.public-body { color: var(--text-primary); line-height: 1.8; margin-top: 28px; }
.notice-danger { background: color-mix(in srgb, var(--status-danger) 10%, var(--surface-paper)); border: 1px solid color-mix(in srgb, var(--status-danger) 30%, var(--border-subtle)); border-radius: var(--radius-sm); color: var(--status-danger); padding: 12px 14px; }
.form-optional { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.form-optional > summary { color: var(--text-primary); cursor: pointer; font-weight: 700; list-style-position: inside; }
.form-optional-content { display: grid; gap: 14px; padding-top: 16px; }

.occurrence-lifecycle .occurrence-cancel { border-top: 1px solid var(--border-subtle); margin-top: 14px; padding-top: 14px; }
.occurrence-lifecycle .occurrence-cancel > summary { color: var(--text-secondary); cursor: pointer; font-weight: 700; list-style-position: inside; }
.occurrence-cancel-form { display: grid; gap: 10px; padding-top: 14px; }
.occurrence-cancel-form .btn { justify-self: start; }

.unit-activity-only { display: none !important; }

/* REQ-082 课程重建：前台课程与课时页面 */
.course-card-list { display: grid; gap: 14px; }
.course-card { background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-md, 10px); color: inherit; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.course-card:hover { border-color: var(--accent-structure, #b8860b); }
.course-card-cover { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.course-card-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.course-card-meta { display: flex; gap: 8px; }
.course-card h2 { font-size: 18px; margin: 0; }
.course-card p { color: var(--text-secondary, #777); font-size: 14px; margin: 0; }
.course-card small { color: var(--text-secondary, #999); }
.course-video-frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-md, 10px); margin: 18px 0; overflow: hidden; position: relative; width: 100%; }
.course-video-frame iframe, .course-video-frame video { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.lesson-pager { border-top: 1px solid var(--border-subtle, #eee); display: flex; gap: 10px; justify-content: space-between; margin-top: 26px; padding-top: 16px; }
.lesson-admin-form textarea.lesson-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7; }
.resource-subtitle { color: var(--text-secondary, #777); font-size: 13px; font-weight: 700; margin: 18px 0 8px; }
.resource-subtitle:first-of-type { margin-top: 0; }

.course-info-badges { display: flex; gap: 8px; margin-top: 8px; }
.drag-handle { color: var(--text-secondary, #bbb); cursor: grab; flex-shrink: 0; font-size: 14px; letter-spacing: -2px; padding: 0 2px; user-select: none; }
.drag-handle:active { cursor: grabbing; }
.resource-row[draggable="true"] .is-dragging, .resource-row.is-dragging { opacity: 0.45; }

/* REQ-082 用户端课程/课时页（mobile-page 壳） */
.course-detail-hero, .lesson-detail-hero { display: grid; gap: 8px; }
.course-detail-hero h1, .lesson-detail-hero h1 { font-size: 24px; line-height: 1.35; margin: 0; }
.course-detail-hero .course-info-badges, .lesson-detail-hero .course-info-badges { margin-top: 0; }
.course-detail-lead, .lesson-detail-course { color: var(--text-secondary, #777); font-size: 14px; line-height: 1.7; margin: 0; }
.course-catalog h2 { font-size: 16px; margin: 0 0 12px; }
.course-catalog-list { display: grid; gap: 8px; }
.course-catalog-row { align-items: center; border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-md, 10px); color: inherit; display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; }
.course-catalog-row:active { background: var(--surface-muted, #faf7f2); }
.course-catalog-copy { display: flex; flex: 1; gap: 6px; }
.course-catalog-copy small { color: var(--text-secondary, #999); }
.course-catalog-row .unit-number { flex-shrink: 0; }
.lesson-body { line-height: 1.8; }
.lesson-body h3, .lesson-body h4 { margin: 1.2em 0 0.5em; }
.lesson-body p { margin: 0 0 0.9em; }
.lesson-body ul, .lesson-body ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.lesson-body blockquote { border-left: 3px solid var(--accent-structure, #b8860b); color: var(--text-secondary, #777); margin: 0 0 0.9em; padding: 2px 0 2px 12px; }
.lesson-pager { border-top: 1px solid var(--border-subtle, #eee); display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; padding-top: 14px; }

/* REQ-085 课时作业墙：纸面式复盘、轻互动，不改变全局用户端主题 */
.homework-section { display: grid; gap: 16px; }
.homework-head { align-items: start; display: flex; gap: 14px; justify-content: space-between; }
.homework-head h2 { font-size: 20px; line-height: 1.4; margin: 4px 0 4px; }
.homework-head p { color: var(--text-secondary, #777); font-size: 13px; line-height: 1.6; margin: 0; }
.homework-head .badge { flex-shrink: 0; margin-top: 4px; }
.homework-form { display: grid; gap: 14px; margin: 0; }
.homework-form .field { display: grid; gap: 6px; }
.homework-form textarea.form-input { min-height: 132px; resize: vertical; }
.homework-form input[type="file"] { background: var(--surface-paper, #fffefa); border: 1px dashed var(--border-subtle, #d9cdbd); border-radius: 10px; color: var(--text-secondary, #777); padding: 10px; width: 100%; }
.homework-form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.homework-wall { display: grid; gap: 12px; }
.homework-wall-head { align-items: baseline; display: flex; justify-content: space-between; }
.homework-wall-head h3 { font-size: 16px; margin: 0; }
.homework-wall-head span { color: var(--text-secondary, #777); font-size: 12px; }
.homework-entry { display: grid; gap: 12px; margin: 0; padding: 16px; }
.homework-entry-head { align-items: start; display: flex; gap: 10px; justify-content: space-between; }
.homework-entry-head > div { display: grid; gap: 3px; min-width: 0; }
.homework-entry-head small { color: var(--text-secondary, #888); font-size: 12px; }
.homework-entry-body { color: var(--text-primary, #332a23); line-height: 1.75; overflow-wrap: anywhere; white-space: normal; }
.homework-link { color: var(--action-primary, #b64b3f); font-size: 13px; overflow-wrap: anywhere; text-decoration: none; }
.homework-images { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.homework-images a { display: block; min-width: 0; }
.homework-image { aspect-ratio: 1; border: 1px solid var(--border-subtle, #eee); border-radius: 8px; display: block; object-fit: cover; width: 100%; }
.homework-actions { align-items: center; border-bottom: 1px solid var(--border-subtle, #eee); color: var(--text-secondary, #777); display: flex; gap: 14px; padding-bottom: 10px; }
.homework-actions form { margin: 0; }
.homework-like { background: transparent; border: 0; color: var(--text-secondary, #777); cursor: pointer; font: inherit; padding: 3px 0; }
.homework-like.is-liked { color: var(--action-primary, #b64b3f); font-weight: 700; }
.homework-comments { display: grid; gap: 10px; }
.homework-comment { color: var(--text-primary, #332a23); display: grid; gap: 6px; font-size: 13px; line-height: 1.6; }
.homework-comment > div:first-child { display: flex; flex-wrap: wrap; gap: 6px; }
.homework-comment > div:first-child span { overflow-wrap: anywhere; }
.homework-comment.is-deleted { color: var(--text-secondary, #999); }
.homework-comment-actions { align-items: center; display: flex; gap: 8px; }
.homework-comment-actions details { min-width: 0; }
.homework-comment-actions summary { color: var(--text-secondary, #888); cursor: pointer; font-size: 12px; }
.homework-comment-actions form, .homework-reply form { margin: 0; }
.homework-reply-form, .homework-comment-form { align-items: center; display: flex; gap: 6px; }
.homework-reply-form { margin-top: 6px; }
.homework-reply-form .form-input, .homework-comment-form .form-input { min-height: 36px; padding: 7px 10px; }
.homework-reply { border-left: 2px solid var(--accent-structure, #b8860b); margin-left: 10px; padding-left: 10px; }
.homework-empty, .homework-locked { color: var(--text-secondary, #777); font-size: 13px; line-height: 1.7; }
.homework-locked { margin: 0; }
@media (max-width: 420px) {
  .homework-head { display: grid; }
  .homework-head .badge { justify-self: start; margin-top: 0; }
  .homework-entry { padding: 14px; }
  .homework-comment-form { align-items: stretch; flex-direction: column; }
  .homework-comment-form .btn { align-self: start; }
}

/* REQ-082 课时编辑器：左编辑右实时预览（参照 neo-ai-club） */
.lesson-basics-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lesson-basics-grid label.field:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .lesson-basics-grid { grid-template-columns: 1fr; } }
.lesson-editor-split { border: 1px solid var(--border-subtle, #e8e2d8); border-radius: var(--radius-md, 10px); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.lesson-editor-pane { display: flex; flex-direction: column; min-height: 480px; }
.lesson-editor-pane + .lesson-editor-pane { border-left: 1px solid var(--border-subtle, #e8e2d8); }
.lesson-editor-pane-head { background: var(--surface-muted, #f7f3ec); border-bottom: 1px solid var(--border-subtle, #e8e2d8); color: var(--text-secondary, #777); font-size: 12px; font-weight: 700; padding: 8px 14px; }
.lesson-editor-pane textarea { border: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; height: 100%; line-height: 1.75; padding: 14px 16px; resize: vertical; }
.lesson-editor-pane textarea:focus { outline: none; }
.lesson-editor-preview { flex: 1; overflow: auto; padding: 16px 18px; }
.lesson-preview-empty { color: var(--text-secondary, #aaa); }
@media (max-width: 900px) {
  .lesson-editor-split { grid-template-columns: 1fr; }
  .lesson-editor-pane + .lesson-editor-pane { border-left: 0; border-top: 1px solid var(--border-subtle, #e8e2d8); }
  .lesson-editor-pane { min-height: 320px; }
}

/* R3 课稿工具：工具栏、弹层、素材网格 */
.lesson-editor-pane-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.lesson-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-modal { align-items: center; background: rgba(30, 26, 20, 0.45); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 60; }
.lesson-modal[hidden] { display: none; }
.lesson-modal-panel { background: var(--surface-paper, #fff); border-radius: var(--radius-lg, 14px); max-height: 80vh; max-width: 520px; overflow: auto; width: 100%; }
.lesson-modal-panel.lesson-modal-wide { max-width: 760px; }
.lesson-modal-head { align-items: center; border-bottom: 1px solid var(--border-subtle, #eee); display: flex; justify-content: space-between; padding: 12px 16px; position: sticky; top: 0; }
.lesson-modal-body { display: grid; gap: 12px; padding: 16px; }
.lesson-modal-hint { color: var(--text-secondary, #888); font-size: 13px; margin: 0; }
.lesson-manuscript-input { border: 1px solid var(--border-subtle, #ddd); border-radius: var(--radius-md, 10px); font: inherit; padding: 10px 12px; resize: vertical; width: 100%; }
.lesson-tool-result { border: 1px dashed var(--border-subtle, #ddd); border-radius: var(--radius-md, 10px); max-height: 360px; min-height: 120px; overflow: auto; padding: 12px 14px; }
.lesson-polish-output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.lesson-asset-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.lesson-asset-cell { background: none; border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-md, 10px); cursor: pointer; display: grid; gap: 6px; overflow: hidden; padding: 6px; text-align: left; }
.lesson-asset-cell:hover { border-color: var(--accent-structure, #b8860b); }
.lesson-asset-cell img { aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; width: 100%; }
.lesson-asset-cell small { color: var(--text-secondary, #999); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-internal-list { display: grid; gap: 8px; }
.lesson-internal-row { align-items: baseline; background: none; border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-md, 10px); cursor: pointer; display: grid; gap: 4px; padding: 10px 12px; text-align: left; }
.lesson-internal-row:hover { border-color: var(--accent-structure, #b8860b); }
.lesson-internal-row span { color: var(--text-secondary, #999); font-size: 11px; }
.lesson-internal-row small { color: var(--text-secondary, #aaa); font-size: 11px; }

/* 阶段（用户端目录分组 + 后台管理） */
.course-stage-block { border: 0; margin: 6px 0; }
.course-stage-summary { align-items: center; background: var(--surface-muted, #f7f3ec); border-radius: var(--radius-sm, 8px); cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 8px 12px; }
.course-stage-summary::-webkit-details-marker { display: none; }
.course-stage-summary .course-stage-title { color: var(--text-secondary, #6b6152); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.course-stage-chevron { color: var(--text-secondary, #a89b8c); display: inline-block; transition: transform 0.15s ease; }
details[open] > .course-stage-summary .course-stage-chevron { transform: rotate(90deg); }
.course-catalog-row.is-locked { opacity: 0.62; }
.course-catalog-row.is-locked .unit-number { filter: grayscale(1); }
.stage-create-form { display: flex; gap: 8px; margin-bottom: 14px; }
.stage-create-form input[type="text"] { border: 1px solid var(--border-subtle, #ddd); border-radius: var(--radius-md, 10px); flex: 1; font: inherit; max-width: 320px; padding: 8px 12px; }
.stage-list { display: grid; gap: 12px; }
.stage-row { border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-md, 10px); padding: 10px 12px; }
.stage-row-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.stage-row-head > strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.stage-row-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 2px; white-space: nowrap; }
.stage-row-actions .btn { white-space: nowrap; }
.stage-edit-form { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: 6px; }
.stage-edit-form input[type="text"] { border: 1px solid var(--border-subtle, #ddd); border-radius: var(--radius-md, 10px); flex: 1 1 220px; font: inherit; max-width: 320px; min-width: 0; padding: 7px 10px; }
.stage-lesson-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.stage-chip { align-items: center; background: var(--surface-muted, #f7f3ec); border-radius: 999px; display: inline-flex; font-size: 13px; gap: 4px; padding: 3px 6px 3px 10px; }
.stage-chip form { display: inline; }
.stage-chip-remove { background: none; border: 0; color: var(--text-secondary, #999); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.stage-chip-remove:hover { color: var(--danger, #c0392b); }
.stage-empty { color: var(--text-secondary, #aaa); }
.stage-add-row { align-items: center; border-top: 1px dashed var(--border-subtle, #eee); display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; }
.stage-add-label { color: var(--text-secondary, #aaa); font-size: 12px; }
.stage-add-btn { background: var(--surface-paper, #fff); border: 1px dashed var(--border-subtle, #d8d0c4); border-radius: 999px; color: var(--text-primary, #5a5248); cursor: pointer; font-size: 13px; padding: 4px 12px; }
.stage-add-btn:hover { border-color: var(--accent-structure, #b8860b); border-style: solid; color: var(--accent-structure, #8a6508); }

/* 玩耍 Tab 顶部：下一课大卡片 */
.play-next-section { padding: 0 16px; }
.play-next-card { align-items: center; background: linear-gradient(135deg, rgba(184, 134, 11, 0.08), rgba(255, 249, 245, 0.9)); border: 1px solid rgba(184, 134, 11, 0.28); border-radius: var(--radius-lg, 14px); color: inherit; display: flex; gap: 12px; padding: 16px 18px; text-decoration: none; }
.play-next-card-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.play-next-card-copy h3 { overflow-wrap: break-word; }
.play-next-card > .badge { flex-shrink: 0; white-space: nowrap; }
.play-next-card-copy h3 { font-size: 17px; margin: 0; }
.play-next-card-copy p { color: var(--text-secondary, #777); font-size: 13px; margin: 0; }
.play-next-card .mini-label { color: var(--accent-structure, #8a6508); font-size: 12px; font-weight: 700; letter-spacing: 1px; margin: 0; }
.play-list-section .play-item-row .play-item-copy strong { font-size: 17px; }
.course-info-grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-info-grid > div { display: grid; gap: 4px; }
.course-info-grid small { color: var(--text-secondary, #999); font-size: 12px; }
.course-info-grid strong { font-size: 15px; }
.course-info-grid code { font-size: 13px; }
.course-info-grid .course-info-wide { grid-column: 1 / -1; }
.course-info-grid .course-info-wide p { color: var(--text-secondary, #666); font-size: 14px; line-height: 1.7; margin: 0; white-space: pre-line; }
.course-info-grid .course-info-wide a { font-size: 13px; word-break: break-all; }
@media (max-width: 720px) { .course-info-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 780px) {
  .resource-summary-strip { grid-template-columns: 1fr; }
  .resource-row { align-items: flex-start; grid-template-columns: minmax(0, 1fr); }
  .resource-row-meta { padding-left: 47px; }
  .resource-row-actions { justify-content: flex-start; padding-left: 47px; }
  .resource-row-actions .btn,
  .resource-unit-row .btn { flex: 1 1 120px; min-height: 44px; }
  .timeline-row { gap: 10px; grid-template-columns: 50px 12px minmax(0, 1fr); }
  .timeline-row > .btn { grid-column: 3; justify-self: start; }
  .timeline-filters a { align-items: center; display: inline-flex; min-height: 44px; }
  .timeline-copy h2 a { align-items: center; display: inline-flex; min-height: 44px; }
  .back-link { align-items: center; min-height: 44px; }
  .play-public-detail { padding-left: 16px; padding-right: 16px; }
  .play-public-detail h1 { font-size: 28px; }
  .public-meta-grid { grid-template-columns: 1fr; }
  .play-workbench-header .toolbar-actions,
  .play-timeline-header .toolbar-actions { width: 100%; }
  .play-workbench-header .toolbar-actions .btn,
  .play-timeline-header .toolbar-actions .btn { flex: 1 1 120px; }
}

@media (max-width: 520px) {
  .report-section-index {
    align-items: stretch;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 10px 8px 8px;
  }

  .report-section-index-label {
    padding: 0 4px;
  }

  .report-section-index a {
    padding: 3px 8px;
  }
}

@media (max-width: 780px) {
  .hq-layout {
    display: block;
  }

  .hq-sidebar {
    display: none;
  }

  .hq-content-shell {
    margin-left: 0;
  }

  .hq-main {
    padding: 16px 16px 44px;
  }

  .hq-mobile-bar {
    align-items: center;
    background: var(--nav-surface);
    color: var(--text-on-dark);
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
  }

  .hq-mobile-brand,
  .hq-mobile-bar a {
    color: var(--text-on-dark-muted);
    font-size: 14px;
    font-weight: 700;
  }

  .hq-mobile-bar nav {
    display: flex;
    gap: 6px;
  }

  .hq-mobile-bar nav a {
    border-radius: var(--radius-sm);
    padding: 7px 9px;
  }

  .hq-mobile-bar nav a.is-active {
    background: rgba(255, 249, 245, 0.12);
    color: var(--text-on-dark);
  }

  .hq-filter-form,
  .hq-compact-metrics {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 16px;
  }

  .page-main {
    padding: 8px 16px 44px;
  }

  .auth-layout,
  .form-grid.two,
  .form-grid.three,
  .metric-grid,
  .ticket-grid {
    grid-template-columns: 1fr;
  }

  .auth-layout {
    gap: 14px;
    margin-top: 10px;
  }

  .auth-intro {
    padding: 10px 0;
  }

  h1 {
    font-size: 30px;
  }

  .auth-panel,
  .paper-section,
  .hero-band,
  .workspace-header {
    padding: 18px;
  }

  .workspace-header,
  .section-title,
  .list-row,
  .pagination,
  .legacy-success-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .pagination {
    display: grid;
  }

  .pagination > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .toolbar-actions {
    flex-direction: column;
  }

  .assessment-filter-form,
  .hq-filter-form,
  .hq-user-facts,
  .hq-user-report-grid,
  .hq-user-relation-grid,
  .legacy-filter-form,
  .legacy-user-search-form,
  .legacy-success-strip,
  .legacy-candidate-row,
  .legacy-bound-row,
  .inline-action-form,
  .legacy-danger-actions,
  .couple-search-form,
  .couple-create-form,
  .assessment-detail-grid,
  .legacy-detail-grid,
  .legacy-type-grid,
  .assessment-dimension-grid,
  .assessment-secondary-grid,
  .relationship-readout-grid,
  .detail-definition-list.compact,
  .couple-chart-grid,
  .couple-short-grid,
  .couple-type-columns,
  .couple-dimension-compare,
  .relationship-compare-bars,
  .couple-share-people,
  .couple-dimension-row,
  .couple-highlight-grid.three,
  .couple-support-list,
  .report-image-kind-grid {
    grid-template-columns: 1fr;
  }

  .assessment-profile-main,
  .assessment-filter-actions,
  .assessment-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-success-actions {
    justify-content: stretch;
  }

  .legacy-success-actions .btn {
    flex: 1 1 auto;
  }

  .assessment-profile-order {
    font-size: 42px;
  }

  .detail-definition-list div {
    grid-template-columns: 1fr;
  }

  .assessment-cell-note {
    max-width: 220px;
  }

  .couple-hero-panel h2,
  .couple-share-card h1 {
    font-size: 26px;
  }

  .couple-dimension-row strong {
    text-align: left;
  }

  .couple-radar-chart {
    height: 320px;
  }

  .btn {
    width: 100%;
  }

  .assessment-step-actions .btn,
  .bottom-tabbar a {
    width: auto;
  }
}

.mobile-page .service-content-actions .btn {
  flex: 1 1 128px;
  width: auto;
}

.play-item-list {
  display: grid;
}

.play-next-panel {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 16px;
  padding: 16px;
}

.play-next-panel .btn,
.play-course-map-head .btn {
  width: auto;
}

.play-next-panel h3,
.play-course-map h3 {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.play-next-panel p,
.play-course-map-head p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}

.play-course-map {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  overflow: hidden;
}

.play-course-map-head {
  align-items: start;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px;
}

.play-course-stage {
  border-top: 1px solid var(--border-subtle);
  padding: 14px 16px;
}

.play-course-stage:first-of-type {
  border-top: 0;
}

.play-course-stage-title,
.play-course-unit-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.play-course-stage-title {
  justify-content: space-between;
  margin-bottom: 10px;
}

.play-course-stage-title strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.play-course-stage-title span {
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 12px;
}

.play-course-unit-list {
  display: grid;
  gap: 8px;
}

.play-course-unit-row {
  border-radius: var(--radius-md);
  color: var(--text-primary);
  min-height: 48px;
  padding: 6px 0;
  text-decoration: none;
}

.play-course-unit-row.is-next .unit-number {
  background: var(--action-primary);
  color: var(--action-on-primary);
}

.play-course-unit-row .badge {
  flex: 0 0 auto;
}

.play-standalone-section {
  margin-top: 18px;
}

.play-item-row {
  align-items: stretch;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 18px 0;
}

.play-item-row:first-child {
  border-top: 0;
  padding-top: 4px;
}

.play-item-row:last-child {
  padding-bottom: 4px;
}

.play-item-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.play-item-copy strong {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.play-item-copy small {
  color: var(--text-secondary);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.play-item-meta,
.play-admin-facts {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
}

.play-item-meta span + span,
.play-admin-facts span + span {
  border-left: 1px solid var(--border-subtle);
  padding-left: 8px;
}

.play-item-row > em {
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 26px;
  font-style: normal;
  line-height: 1;
}

.play-item-cover,
.play-cover-placeholder {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex: 0 0 128px;
  height: 72px;
  object-fit: cover;
  overflow: hidden;
  width: 128px;
}

.play-cover-placeholder {
  align-items: center;
  color: var(--accent-structure);
  display: inline-grid;
  font-size: 18px;
  font-weight: 700;
  place-items: center;
}

.play-stage-badge {
  background: var(--surface-warm);
  border-radius: 999px;
  color: var(--action-primary-pressed);
  display: inline-flex;
  font-size: 12px;
  padding: 3px 8px;
  white-space: nowrap;
}

.play-detail-cover {
  border-radius: var(--radius-md);
  display: block;
  height: auto;
  margin: -2px 0 18px;
  width: 100%;
}

.play-stage-tabs {
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 20px;
  margin-top: 18px;
}

.play-stage-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 0 2px 10px;
}

.play-stage-tabs a.is-active {
  border-bottom-color: var(--action-primary);
  color: var(--text-primary);
  font-weight: 700;
}

.play-detail-gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 18px;
}

.play-detail-gallery img,
.play-inline-image {
  border-radius: var(--radius-md);
  display: block;
  max-width: 100%;
}

.play-detail-gallery img {
  height: auto;
  width: 100%;
}

.play-inline-image {
  margin: 12px 0;
  width: 100%;
}

.play-source-link {
  border-top: 1px solid var(--border-subtle);
  display: inline-block;
  font-size: 13px;
  margin-top: 20px;
  padding-top: 16px;
}

.play-admin-title-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 260px;
}

.play-admin-title-cell img,
.play-admin-title-cell .play-cover-placeholder {
  flex-basis: 64px;
  height: 48px;
  width: 64px;
}

.play-admin-title-cell > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.play-admin-title-cell strong,
.play-admin-title-cell small {
  overflow-wrap: anywhere;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 4px 0 0;
}

.play-import-grid {
  align-items: start;
  display: grid;
  gap: 0 18px;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.5fr);
}

.play-import-grid .choice-segment {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 6px;
}

.play-import-grid .choice-segment > div {
  min-width: 0;
}

.play-import-grid .choice-segment label {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
}

.play-import-grid .choice-segment label:has(input:checked) {
  background: var(--surface-warm);
  color: var(--text-primary);
  font-weight: 700;
}

.play-import-grid .choice-segment input[type="radio"] {
  accent-color: var(--action-primary);
  flex: 0 0 auto;
  height: 16px;
  min-height: 0;
  padding: 0;
  width: 16px;
}

.play-import-result {
  align-items: start;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  margin-top: 16px;
  max-width: 520px;
  padding: 12px;
}

.play-import-result-meta {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
}

.play-import-cover-preview {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  max-height: 180px;
  object-fit: cover;
  width: min(100%, 320px);
}

.play-import-images {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 320px;
}

.play-import-images img {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
  width: 100%;
}

.play-empty-state {
  align-items: center;
  color: var(--text-secondary);
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 190px;
  text-align: center;
}

.play-empty-state p {
  margin: 0;
}

.play-detail-page {
  min-height: 100vh;
}

.play-detail-paper {
  box-shadow: var(--shadow-paper);
  margin-top: 14px;
}

.play-detail-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
}

.play-detail-header h1 {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.play-detail-header p {
  margin-bottom: 12px;
}

.play-detail-meta {
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
}

.play-detail-meta span + span {
  border-left: 1px solid var(--border-subtle);
  padding-left: 8px;
}

.play-detail-video {
  border-bottom: 1px solid var(--border-subtle);
  padding: 18px 0 16px;
}

.play-detail-video h2 {
  color: var(--text-primary);
  font-size: 15px;
  margin: 0 0 10px;
}

.play-detail-video video {
  background: #171717;
  border-radius: var(--radius-md);
  display: block;
  max-height: 520px;
  width: 100%;
}

.play-video-fallback {
  display: inline-block;
  font-size: 13px;
  margin-top: 8px;
}

/* hidden 属性必须真的隐藏（display 声明会压过 UA 样式，曾导致视频失效提示常驻）。 */
.play-video-fallback[hidden] {
  display: none;
}

.play-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 4px;
}

.play-detail-links .btn {
  width: auto;
}

.play-detail-body {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.85;
  padding-top: 18px;
}

.play-detail-body h2,
.play-detail-body h3,
.play-detail-body h4 {
  color: var(--text-primary);
  margin: 26px 0 10px;
}

.play-detail-body h2 {
  font-size: 21px;
}

.play-detail-body h3 {
  font-size: 18px;
}

.play-detail-body h4 {
  font-size: 16px;
}

.play-detail-body p {
  color: var(--text-primary);
  margin: 0 0 14px;
}

.play-detail-body ul,
.play-detail-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.play-detail-body blockquote {
  border-left: 3px solid var(--accent-structure);
  color: var(--text-secondary);
  margin: 18px 0;
  padding: 4px 0 4px 14px;
}

.play-detail-body a {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.play-preview-banner {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  padding: 10px 16px;
  text-align: center;
}

.play-editor-header {
  align-items: end;
}

.play-editor-header .back-link {
  color: var(--text-secondary);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 12px;
}

.play-editor-header .badge {
  align-self: center;
}

.play-editor-form {
  display: grid;
  gap: 18px;
}

.play-editor-two-column {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.play-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.play-sticky-actions {
  background: color-mix(in srgb, var(--surface-paper) 94%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  position: sticky;
  top: 12px;
  z-index: 4;
}

.play-form-actions .btn {
  width: auto;
}

.play-admin-table td:first-child {
  min-width: 260px;
}

.badge.status-draft {
  background: color-mix(in srgb, var(--status-warning) 16%, var(--surface-paper));
  color: var(--status-warning);
}

.badge.status-published {
  background: color-mix(in srgb, var(--status-success) 16%, var(--surface-paper));
  color: var(--status-success);
}

.badge.status-archived {
  background: color-mix(in srgb, var(--text-secondary) 14%, var(--surface-paper));
  color: var(--text-secondary);
}

@media (max-width: 780px) {
  .play-editor-two-column {
    grid-template-columns: 1fr;
  }

  .play-detail-header h1 {
    font-size: 26px;
  }

  .play-detail-links .btn,
  .play-form-actions .btn {
    flex: 1 1 130px;
  }

  .play-import-grid {
    grid-template-columns: 1fr;
  }

  .play-item-cover,
  .play-cover-placeholder {
    flex-basis: 128px;
    height: 72px;
    width: 128px;
  }

  .play-detail-gallery {
    grid-template-columns: 1fr;
  }
}

/* ---------- 成长合集身份牌（REQ-083，视觉照抄老系统 identity_card_render） ---------- */

.growth-card-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 4px 0;
}

.growth-card {
  --growth-paper: #fffdf8;
  --growth-ink: #2a201c;
  --growth-muted: #7a6d62;
  --growth-gold: #b8894e;
  --growth-gold-soft: #f3e6d4;
  --growth-line: rgba(93, 71, 47, 0.08);
  background:
    radial-gradient(circle at 110% -2%, rgba(184, 137, 78, 0.14), transparent 32%),
    radial-gradient(circle at -5% 30%, rgba(201, 122, 132, 0.1), transparent 26%),
    linear-gradient(180deg, var(--growth-paper) 0%, #fcf9f3 100%);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(50, 34, 16, 0.12);
  display: flex;
  flex-direction: column;
  max-width: 480px;
  overflow: hidden;
  width: 100%;
}

.growth-card-band {
  background: linear-gradient(
    90deg,
    var(--character-red) 0%,
    var(--character-yellow) 34%,
    var(--character-green) 67%,
    var(--character-blue) 100%
  );
  height: 6px;
}

.growth-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 22px;
}

.growth-card-header {
  margin: -20px -24px 14px;
  text-align: center;
}

.growth-card-dolls {
  border-radius: 0;
  display: block;
  height: auto;
  margin: 0;
  max-width: none;
  width: 100%;
}

.growth-card-type {
  background: linear-gradient(135deg, var(--growth-gold-soft), #fff);
  border: 1px solid rgba(184, 137, 78, 0.2);
  border-radius: 999px;
  color: var(--growth-ink);
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  margin-top: 10px;
  padding: 6px 18px;
}

.growth-identity-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
  padding: 4px 0;
}

.growth-identity-line .old,
.growth-identity-line .new {
  font-size: 14px;
  font-weight: 700;
}

.growth-identity-line .old {
  color: #9b5c64;
}

.growth-identity-line .new {
  color: #4a7a6a;
}

.growth-identity-line .arrow {
  color: var(--growth-gold);
  font-size: 16px;
  font-weight: 700;
}

.growth-identity-line .note {
  color: var(--growth-muted);
  font-size: 12px;
  font-weight: 600;
}

.growth-card-content {
  color: #4a3f38;
  font-size: 14px;
  line-height: 1.85;
}

.growth-card-content p {
  margin: 0 0 14px;
}

.growth-card-content p:last-child {
  margin-bottom: 0;
}

.growth-section-title {
  color: var(--growth-ink);
  font-weight: 800;
}

.growth-highlight-box {
  background: linear-gradient(135deg, #f9f0e4 0%, #f5e9d8 100%);
  border-left: 3px solid var(--growth-gold);
  border-radius: 16px;
  margin: 18px 0 0;
  padding: 14px 16px;
}

.growth-highlight-box p {
  color: #5b4530;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

.growth-insights-box {
  background: #fff;
  border: 1px solid var(--growth-line);
  border-radius: 18px;
  margin: 20px 0 0;
  padding: 16px 18px;
}

.growth-insights-title {
  color: var(--growth-ink);
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px;
}

.growth-insights-list {
  color: #4a3f38;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  padding-left: 18px;
}

.growth-insights-list li {
  margin-bottom: 8px;
}

.growth-insights-list li:last-child {
  margin-bottom: 0;
}

.growth-bottom-section {
  align-items: center;
  border-top: 1px solid var(--growth-line);
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 22px;
  padding-top: 18px;
}

.growth-order-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.growth-order-item {
  align-items: center;
  display: flex;
  gap: 10px;
}

.growth-order-date {
  color: var(--growth-muted);
  font-size: 11px;
  font-weight: 600;
  min-width: 90px;
}

.growth-order-chips {
  display: flex;
  gap: 5px;
}

.growth-order-chip {
  align-items: center;
  display: inline-flex;
  gap: 2px;
}

.growth-order-chip b {
  color: var(--growth-ink);
  font-size: 11px;
  font-weight: 800;
}

.growth-token-mini {
  --token-size: 15px;
  filter: none;
}

.growth-qr-section {
  text-align: center;
}

.growth-qr-wrap {
  background: #fff;
  border: 1px solid var(--growth-line);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(60, 42, 24, 0.06);
  height: 76px;
  margin: 0 auto 6px;
  padding: 5px;
  width: 76px;
}

.growth-qr-wrap img {
  border-radius: 6px;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.growth-qr-text {
  color: var(--growth-muted);
  font-size: 9px;
  line-height: 1.5;
  margin: 0;
}

.growth-card-footer {
  background: linear-gradient(180deg, #2b211c 0%, #1a1410 100%);
  color: rgba(248, 244, 236, 0.55);
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 14px;
  text-align: center;
}

.growth-card-actions {
  margin-top: 14px;
}

.growth-select-form {
  display: flex;
  flex-direction: column;
}

.growth-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 4px;
}

.growth-select-item {
  align-items: center;
  background: var(--surface-paper, #fffdf8);
  border: 1px solid var(--border-subtle, rgba(93, 71, 47, 0.12));
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}

.growth-select-item:has(input:checked) {
  border-color: color-mix(in srgb, var(--character-green) 45%, var(--border-subtle, rgba(93, 71, 47, 0.12)));
  background: color-mix(in srgb, var(--character-green) 6%, #fffdf8);
}

.growth-select-item input[type="checkbox"] {
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.growth-select-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.growth-select-info strong {
  font-size: 14px;
}

.growth-select-info small {
  color: var(--text-muted, #7a6d62);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growth-select-hint {
  color: var(--text-muted, #7a6d62);
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0;
}

.growth-card-page .btn-block {
  margin-top: 4px;
}

/* REQ-088 周报/月报：沿用北京秋天纸面系统，保持内容页克制。 */
.period-report-launch {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.period-report-launch-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.period-report-kicker,
.period-report-section-label {
  color: var(--action-primary-pressed);
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.period-report-launch h2 {
  font-size: 19px;
  margin: 5px 0 3px;
}

.period-report-launch p,
.period-report-intro p,
.period-report-form-hint {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.period-report-launch .btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  width: auto;
}

.period-report-history,
.period-report-history-row {
  display: grid;
}

.period-report-history {
  border-top: 1px solid var(--border-subtle);
}

.period-report-history-row {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  color: var(--text-primary);
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 11px 0;
  text-decoration: none;
}

.period-report-history-row:last-child {
  border-bottom: 0;
}

.period-report-history-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.period-report-history-row strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.period-report-history-row small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.period-report-history-row em {
  color: var(--text-secondary);
  font-size: 20px;
  font-style: normal;
}

.period-report-intro {
  padding: 22px 4px 12px;
}

.period-report-intro h1 {
  font-size: 28px;
  line-height: 1.22;
  margin: 6px 0 8px;
  text-wrap: balance;
}

.period-report-form-section {
  margin-top: 8px;
}

.period-report-form {
  display: grid;
  gap: 16px;
}

.period-report-type-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.period-report-type-fieldset ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.period-report-type-fieldset > div {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.period-report-type-fieldset > div > div {
  margin: 0;
}

.period-report-type-fieldset li {
  margin: 0;
}

.period-report-type-fieldset label {
  align-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  font-size: 14px;
  font-weight: 750;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

.period-report-type-fieldset li:has(input:checked) label {
  background: color-mix(in srgb, var(--action-primary) 8%, var(--surface-paper));
  border-color: var(--action-primary);
}

.period-report-type-fieldset label:has(input:checked) {
  background: color-mix(in srgb, var(--action-primary) 8%, var(--surface-paper));
  border-color: var(--action-primary);
}

.period-report-date-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.period-report-month-field[hidden],
.period-report-date-fields[hidden] {
  display: none;
}

.period-report-form-hint {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.period-report-detail-page {
  padding-bottom: 32px;
}

.period-report-legacy {
  --legacy-bg: #fff8ec;
  --legacy-paper: #fffdf7;
  --legacy-card: #fff;
  --legacy-ink: #2f2d2a;
  --legacy-soft: #6f6a64;
  --legacy-muted: #8f8272;
  --legacy-line: #f0dfc0;
  --legacy-orange: #f28b18;
  background: var(--legacy-bg);
  border-top: 6px solid var(--legacy-orange);
  color: var(--legacy-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.72;
  margin: 0 -16px;
  min-height: 100vh;
}

.period-report-legacy *,
.period-report-legacy *::before,
.period-report-legacy *::after {
  box-sizing: border-box;
}

.legacy-topbar {
  align-items: center;
  background: rgba(255, 248, 236, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240, 223, 192, .9);
  display: flex;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.legacy-back {
  align-items: center;
  background: var(--legacy-card);
  border: 1.5px solid var(--legacy-line);
  border-radius: 50%;
  color: var(--legacy-ink);
  display: inline-flex;
  font-size: 22px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 40px;
}

.legacy-top-title {
  flex: 1;
  margin-right: 52px;
  text-align: center;
}

.legacy-top-title strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}

.legacy-top-title span {
  color: var(--legacy-muted);
  display: block;
  font-size: 12px;
  margin-top: 1px;
}

.legacy-page {
  margin: 0 auto;
  max-width: 760px;
  padding: 18px 14px 78px;
  width: 100%;
}

.legacy-hero {
  padding: 10px 0 16px;
}

.legacy-hero-card {
  color: var(--legacy-ink);
  padding: 8px 0 0;
  position: relative;
  text-align: center;
}

.legacy-hero-kicker {
  align-items: center;
  color: #6b5b43;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.legacy-hero-kicker::before,
.legacy-hero-kicker::after {
  background: var(--legacy-line);
  content: "";
  height: 1px;
  margin: 0 10px;
  width: 72px;
}

.legacy-hero h1 {
  background: var(--legacy-orange);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(242, 139, 24, .18);
  color: #fff;
  display: inline-block;
  font-size: clamp(28px, 7vw, 46px);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 12px 18px 13px;
}

.legacy-hero-lead {
  color: #6a5d4d;
  font-size: 16px;
  font-weight: 700;
  margin: 16px auto 0;
  max-width: 620px;
}

.legacy-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.legacy-hero-meta span {
  background: #fff7d5;
  border: 1.5px solid #f3c06e;
  border-radius: 999px;
  color: #8a5c18;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 11px;
}

.legacy-section {
  margin-top: 18px;
}

.legacy-section-head {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 2px 12px;
}

.legacy-section-head h2 {
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}

.legacy-section-head span {
  color: var(--legacy-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.legacy-letter {
  background: var(--legacy-paper);
  border: 2px solid #f2c46d;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(176, 112, 26, .08);
  padding: 20px 18px;
}

.legacy-letter p,
.legacy-story-card p,
.legacy-persona-card p,
.legacy-compare-card p,
.legacy-invite-card p {
  color: #5a544d;
  font-size: 15px;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

.legacy-letter p:last-child,
.legacy-story-card p:last-child,
.legacy-persona-card p:last-child,
.legacy-compare-card p:last-child,
.legacy-invite-card p:last-child {
  margin-bottom: 0;
}

.legacy-pull {
  background: #fff1c7;
  border-left: 4px solid var(--legacy-orange);
  border-radius: 0 14px 14px 0;
  color: #5f4114;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.65;
  margin: 18px 0;
  padding: 12px 14px;
}

.legacy-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.legacy-metric {
  background: #fff9df;
  border: 1.5px solid #f0c56c;
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
}

.legacy-metric b {
  display: block;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

.legacy-metric span {
  color: var(--legacy-muted);
  font-size: 12px;
  font-weight: 800;
}

.legacy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legacy-chips span {
  background: #fffef7;
  border: 1.5px solid #eadfcf;
  border-radius: 999px;
  color: #665846;
  font-weight: 900;
  padding: 9px 13px;
}

.legacy-chips span.hot {
  background: var(--legacy-orange);
  border-color: var(--legacy-orange);
  color: #fff;
}

.legacy-grid-2,
.legacy-persona-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-story-card,
.legacy-persona-card,
.legacy-compare-card,
.legacy-invite-card {
  background: var(--legacy-card);
  border: 1.5px solid var(--legacy-line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(176, 112, 26, .05);
  min-width: 0;
  padding: 16px;
}

.legacy-story-card:nth-child(1) {
  background: #fff6dc;
  border-color: #f0bb5a;
}

.legacy-story-card:nth-child(2) {
  background: #eef9ef;
  border-color: #79c985;
}

.legacy-tag {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #9a641b;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
  min-height: 28px;
  padding: 4px 10px;
}

.legacy-story-card h3,
.legacy-persona-card h3,
.legacy-compare-card h3,
.legacy-invite-card h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 8px;
}

.legacy-story-card p,
.legacy-persona-card p,
.legacy-compare-card p,
.legacy-invite-card p {
  line-height: 1.65;
}

.legacy-compare {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto 1fr;
}

.legacy-compare-card {
  background: #fffdf6;
  box-shadow: none;
}

.legacy-compare-card p {
  font-size: 15px;
}

.legacy-arrow {
  align-items: center;
  color: var(--legacy-orange);
  display: grid;
  font-size: 24px;
  font-weight: 900;
  place-items: center;
}

.legacy-persona-grid {
  gap: 10px;
}

.legacy-persona-card {
  display: grid;
  gap: 10px;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 12px;
}

.legacy-persona-card .legacy-tag {
  align-items: center;
  background: #fff7db;
  border: 0;
  border-radius: 50%;
  color: #9a641b;
  display: grid;
  height: 42px;
  justify-content: center;
  margin: 0;
  min-height: 42px;
  padding: 0;
  width: 42px;
}

.legacy-persona-card:nth-child(2) .legacy-tag {
  background: #fff0e8;
  color: #a45235;
}

.legacy-persona-card:nth-child(3) .legacy-tag {
  background: #ecf7ff;
  color: #397bb2;
}

.legacy-persona-card:nth-child(4) .legacy-tag {
  background: #ecf9ee;
  color: #3a8b48;
}

.legacy-persona-card h3 {
  font-size: 15px;
  margin-bottom: 3px;
}

.legacy-persona-card p {
  font-size: 13px;
  line-height: 1.55;
}

.legacy-invite-card {
  background: #fff6d7;
  border: 2px solid #f2c46d;
  padding: 24px 20px;
  text-align: center;
}

.legacy-invite-card h3 {
  font-size: 22px;
}

.legacy-question {
  background: #fff;
  border: 1px solid var(--legacy-line);
  border-radius: 20px;
  color: #4e463c;
  font-size: 18px;
  font-weight: 900;
  margin: 14px auto 0;
  max-width: 680px;
  padding: 16px;
}

.legacy-source {
  border: 1px dashed rgba(145, 138, 130, .34);
  border-radius: 18px;
  color: var(--legacy-muted);
  font-size: 13px;
  padding: 14px;
}

.legacy-source b {
  color: var(--legacy-soft);
}

.legacy-report-footer {
  background: var(--legacy-orange);
  border-radius: 0 0 18px 18px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
  padding: 12px 16px;
}

.period-report-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.period-report-failure {
  margin-top: 12px;
}

.period-report-failure p {
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 380px) {
  .legacy-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .legacy-section-head span { white-space: normal; }
}

@media (max-width: 760px) {
  .legacy-grid-2,
  .legacy-compare,
  .legacy-persona-grid {
    grid-template-columns: 1fr;
  }

  .legacy-arrow {
    min-height: 28px;
    transform: rotate(90deg);
  }
}

/* ---------- REQ-097 测评资源池统一搜索与绑定 ---------- */

.candidate-source-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-secondary, #8a7a66) 92%, black);
  background: color-mix(in srgb, var(--status-info, #5b8bd8) 10%, var(--surface-paper, #fffdf8));
  border: 1px solid color-mix(in srgb, var(--status-info, #5b8bd8) 22%, transparent);
  vertical-align: 1px;
}

.legacy-search-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary, #8a7a66);
}

.coach-legacy-bind-summary .badge {
  flex-shrink: 0;
}