@layer components {
  .records-body {
    display: grid;
    gap: 15px;
  }
  .reputation-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px;
    background:
      linear-gradient(
        115deg,
        #f8f4e3,
        #e7f0e1);
    border: 1px solid #c8d3b3;
    box-shadow: inset 3px 0 #bf9b57;
  }
  .reputation-seal {
    flex: none;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 2px solid #bba168;
    background:
      linear-gradient(
        145deg,
        #fffcf0,
        #dfe7c9);
    box-shadow: inset 0 0 0 4px #fef7de;
    font: 700 1.875rem var(--display);
    color: #916c39;
  }
  .reputation-detail {
    min-width: 0;
    flex: 1;
  }
  .reputation-detail > strong {
    display: block;
    font: 700 1.25rem var(--display);
    color: #386c53;
  }
  .reputation-detail > p {
    font: 500 0.75rem/1.8 var(--serif);
    margin: 5px 0;
    color: #708075;
    word-break: keep-all;
  }
  .reputation-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 9px 0;
  }
  .reputation-stats span {
    padding: 5px 9px;
    border: 1px solid #b8cab1;
    background: #fffcf1;
    color: #6a765a;
    font-size: 0.75rem;
    font-weight: 800;
  }
  .reputation-detail .ending-story {
    color: #977440;
    background: #fff9e8;
    border-left: 3px solid #c5a36e;
    padding: 6px 10px;
    line-height: 1.7;
  }
  .records-section {
    padding: 11px 13px 14px;
    border: 1px solid #d9e3d2;
    background: #fdfdf8;
  }
  .record-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d6e2cd;
  }
  .record-heading h3 {
    font: 800 1.0625rem var(--display);
    color: #417960;
    margin: 0;
  }
  .record-heading span {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: right;
  }
  .record-intro {
    font-size: 0.75rem;
    color: #7a8b79;
    margin: 0 0 10px;
    line-height: 1.7;
    word-break: keep-all;
  }
  .quest-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .quest-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    min-width: 0;
    padding: 11px 9px;
    background: #f6f7ec;
    border: 1px solid #d2ddc8;
  }
  .quest-card > strong {
    font: 800 0.8125rem var(--serif);
    color: #37664e;
  }
  .quest-card > p {
    margin: 0;
    flex: 1;
    color: #71826c;
    font-size: 0.75rem;
  }
  .quest-card > span {
    font: 800 0.9375rem var(--sans);
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }
  .quest-card > button {
    border: 1px solid #3b7e61;
    background: #4a8e6c;
    color: #fffef1;
    padding: 9px 4px;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 800;
    min-height: 36px;
  }
  .quest-card > button:disabled {
    background: #e7e9dd;
    color: #818c78;
    border-color: #cbd6c8;
    cursor: not-allowed;
  }
  .achievement-collection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .collection-entry {
    display: grid;
    align-content: center;
    min-height: 40px;
    gap: 3px;
    padding: 8px 9px;
    border: 1px solid #c3d4bd;
    background: #ecf5e7;
    color: #417459;
    font: 700 0.75rem/1.6 var(--serif);
    word-break: keep-all;
  }
  .collection-entry strong {
    font: 800 0.75rem var(--serif);
  }
  .collection-entry small {
    font-size: 0.75rem;
    color: #788c73;
    line-height: 1.5;
  }
  .collection-entry.is-locked {
    background: #f0f0e9;
    color: #93998c;
    border-color: #dfe2d9;
  }
  .collection-entry.is-locked small {
    color: #999d90;
  }
  .records-section > h4 {
    margin: 12px 0 7px;
    font: 800 0.75rem var(--serif);
    color: var(--muted);
  }
  .record-note {
    padding: 9px 11px;
    border: 1px dashed #c9d7b9;
    background: #faf9ed;
    color: #828d73;
    font-size: 0.75rem;
    line-height: 1.8;
    margin: 0;
  }
  .offline-report {
    padding: 12px 13px;
    margin: 0;
    background: #f9eed2;
    color: #88642d;
    font: 800 0.75rem/1.8 var(--serif);
    border: 1px solid #d7c18d;
  }
  .offline-report[hidden] {
    display: none;
  }
  html[data-theme] .reputation-panel,
  html[data-theme] .records-section,
  html[data-theme] .quest-card,
  html[data-theme] .record-note,
  html[data-theme] .collection-entry,
  html[data-theme] .collection-entry.is-locked,
  html[data-theme] .reputation-stats span,
  html[data-theme] .offline-report {
    background: var(--surface);
    border-color: var(--line);
  }
  html[data-theme] .reputation-seal {
    background: var(--surface);
    color: var(--heading);
    border-color: var(--line);
  }
  html[data-theme] .reputation-detail > strong {
    color: var(--heading);
  }
  html[data-theme] .record-heading h3 {
    color: var(--heading);
  }
  html[data-theme] .reputation-detail > p {
    color: var(--muted);
  }
  html[data-theme] .record-intro {
    color: var(--muted);
  }
  html[data-theme] .record-note {
    color: var(--muted);
  }
  html[data-theme] .quest-card > strong {
    color: var(--heading);
  }
  html[data-theme] .quest-card > p {
    color: var(--text);
  }
  html[data-theme] .collection-entry {
    color: var(--text);
  }
  html[data-theme] .collection-entry.is-locked {
    color: var(--muted);
  }
  html[data-theme] .collection-entry small,
  html[data-theme] .collection-entry.is-locked small {
    color: var(--muted);
  }
  html[data-theme] .record-heading span {
    color: var(--text);
  }
  html[data-theme] .reputation-stats span {
    color: var(--text);
  }
  html[data-theme] .reputation-detail .ending-story {
    background: var(--surface);
    color: var(--text);
  }
  html[data-theme] .offline-report {
    color: var(--text);
  }
  @media (max-width: 780px) {
    .records-body {
      gap: 11px;
    }
    .reputation-panel {
      padding: 12px;
      gap: 10px;
    }
    .reputation-seal {
      width: 42px;
      height: 42px;
      font-size: 1.5rem;
    }
    .reputation-detail > strong {
      font-size: 1.0625rem;
    }
    .quest-card-grid {
      grid-template-columns: 1fr;
    }
    .quest-card {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      column-gap: 10px;
    }
    .quest-card > p {
      grid-column: 1/2;
    }
    .quest-card > span {
      grid-column: 2/3;
      grid-row: 1/3;
      text-align: right;
    }
    .quest-card > button {
      grid-column: 1/-1;
    }
    .collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 480px) {
    .achievement-collection,
    .collection-grid {
      grid-template-columns: 1fr;
    }
  }
}