:root {
  --paper:#f6f5fb;
  --paper-strong:#fff;
  --paper-subtle:#f0edff;
  --ink:#2e2b44;
  --dim:#79758d;
  --faint:#9792aa;
  --line:#e5e1f0;
  --line-strong:#cec7e2;
  --gold:#6858c7;
  --gold-deep:#2f296d;
  --gold-fill:#6858c7;
  --gold-wash:#f0edff;
  --sans:'Noto Sans SC',system-ui,sans-serif;
  --serif:'Noto Serif SC',serif;
  --display:'Ma Shan Zheng','STKaiti','KaiTi',serif;
}

* { box-sizing:border-box; }
body {
  min-width:320px;
  margin:0;
  color:var(--ink);
  background:radial-gradient(circle at 10% 0%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 30rem), var(--paper);
  font-family:var(--sans);
}
button,input { font:inherit; }

.records-main {
  width:min(800px, calc(100% - 36px));
  margin:0 auto;
  padding:clamp(30px,4.5vw,52px) 0 72px;
}
.records-hero p {
  margin:0 0 4px;
  color:var(--gold-deep);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
}
.records-hero h1 {
  margin:0;
  font:400 clamp(38px,5vw,52px)/1 var(--display);
  letter-spacing:5px;
}
.records-hero span {
  display:block;
  margin-top:7px;
  color:var(--dim);
  font:12.5px/1.6 var(--serif);
}

.records-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 14px;
  margin-top:20px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.records-search {
  grid-column:1 / -1;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper-strong);
  color:var(--gold-deep);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.records-search:focus-within {
  border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent);
}
.records-search span { font:500 21px/1 var(--serif); }
.records-search input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  color:var(--ink);
  background:transparent;
  font-size:13px;
  -webkit-appearance:none;
  appearance:none;
}
.records-search input:focus-visible { outline:0; box-shadow:none; }
.record-type-filters {
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.record-type-filters button {
  min-height:34px;
  padding:5px 11px;
  border:0;
  border-radius:999px;
  color:var(--dim);
  background:var(--paper-subtle);
  font-size:10.5px;
  font-weight:600;
  cursor:pointer;
}
.record-type-filters button[aria-pressed='true'] {
  color:var(--gold-deep);
  background:var(--gold-wash);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
}
.records-favorite {
  min-height:34px;
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--dim);
  font-size:10.5px;
  white-space:nowrap;
  cursor:pointer;
}
.records-favorite input { accent-color:var(--gold-fill); }

.records-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 0;
  padding:9px 11px;
  border:1px solid rgba(78,126,99,.24);
  border-radius:10px;
  color:#4d7461;
  background:rgba(78,126,99,.08);
  font-size:10.5px;
  line-height:1.55;
}
.records-status[hidden] { display:none; }
.records-status[data-state='warning'] {
  border-color:rgba(169,138,85,.3);
  color:var(--gold-deep);
  background:var(--gold-wash);
}
.records-status[data-state='error'] {
  border-color:rgba(173,80,68,.25);
  color:#9f4e46;
  background:rgba(173,80,68,.07);
}
.records-status a {
  flex:0 0 auto;
  color:inherit;
  font-weight:700;
  text-decoration:none;
}
.records-count {
  min-height:18px;
  margin:11px 2px 7px;
  color:var(--faint);
  font-size:10.5px;
}

.records-list { display:grid; gap:7px; }
.record-card {
  position:relative;
  min-height:62px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--paper-strong) 85%, transparent);
  box-shadow:0 4px 13px rgba(62,51,33,.03);
}
.record-kind {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:var(--paper-strong);
  background:var(--gold-fill);
  font:700 14px/1 var(--serif);
}
.record-card[data-kind='yaogua'] .record-kind { background:#6f7963; }
.record-card[data-kind='ziwei'] .record-kind { background:#77628f; }
.record-card[data-kind='dream'] .record-kind { background:#7a789b; }
.record-copy {
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.record-copy strong,.record-copy span,.record-copy small { display:block; }
.record-copy strong {
  overflow:hidden;
  color:var(--ink);
  font-size:13px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.record-copy span {
  overflow:hidden;
  margin-top:2px;
  color:var(--dim);
  font-size:10.5px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.record-copy small {
  margin-top:3px;
  color:var(--faint);
  font-size:9px;
}
.record-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
}
.record-primary {
  min-height:34px;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));
  border-radius:999px;
  color:var(--gold-deep);
  background:var(--paper-strong);
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.record-primary:hover,.record-primary:focus-visible {
  border-color:var(--gold);
  background:var(--gold-wash);
  outline:none;
}
.record-primary[aria-pressed='true'] {
  color:var(--paper-strong);
  border-color:#557562;
  background:#557562;
  cursor:default;
}
.record-primary:disabled:not([aria-pressed='true']) { opacity:.55; cursor:wait; }
.record-card.is-primary {
  border-color:rgba(78,126,99,.35);
  box-shadow:0 4px 13px rgba(62,86,67,.055);
}
.record-card.is-primary .record-kind { background:#557562; }
.record-star {
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:0;
  border-radius:10px;
  color:var(--faint);
  background:transparent;
  font:400 21px/1 var(--serif);
  cursor:pointer;
}
.record-star[aria-pressed='true'] { color:var(--gold-deep); background:var(--gold-wash); }
.record-open { color:inherit; }
.record-card:focus-within,.record-card:hover {
  border-color:color-mix(in srgb, var(--gold) 42%, var(--line));
  transform:translateY(-1px);
  transition:border-color .18s,transform .18s;
}

.records-empty {
  display:grid;
  justify-items:center;
  gap:7px;
  padding:36px 18px;
  border:1px dashed var(--line-strong);
  border-radius:15px;
  color:var(--dim);
  text-align:center;
}
.records-empty[hidden] { display:none; }
.records-empty b { color:var(--ink); font:600 14px var(--serif); }
.records-empty span { font-size:10.5px; }
.records-empty a {
  margin-top:3px;
  padding:9px 13px;
  border-radius:999px;
  color:var(--paper-strong);
  background:var(--gold-fill);
  font-size:10.5px;
  text-decoration:none;
}

@media (max-width:840px) {
  .records-main { width:min(100% - 28px, 720px); padding-top:28px; }
  .records-hero h1 { font-size:44px; }
}

@media (max-width:560px) {
  .records-main { width:calc(100% - 20px); padding:21px 0 76px; }
  .records-hero p { font-size:9px; }
  .records-hero h1 { font-size:38px; letter-spacing:4px; }
  .records-hero span { margin-top:5px; font-size:11px; }
  .records-controls {
    grid-template-columns:minmax(0,1fr);
    gap:7px;
    margin-top:14px;
    padding:0;
  }
  .records-search { grid-column:1; min-height:44px; }
  .records-search input { font-size:16px; }
  .record-type-filters {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:1px;
    scrollbar-width:none;
  }
  .record-type-filters::-webkit-scrollbar { display:none; }
  .record-type-filters button { min-height:40px; flex:0 0 auto; padding-inline:12px; }
  .records-favorite { min-height:36px; }
  .records-count { margin-top:9px; }
  .record-card { grid-template-columns:36px minmax(0,1fr) auto; gap:7px; padding:8px 7px; }
  .record-kind { width:36px; height:36px; border-radius:10px; font-size:13px; }
  .record-copy strong { font-size:12.5px; }
  .record-copy span { font-size:10px; }
  .record-primary { max-width:68px; padding-inline:7px; white-space:normal; line-height:1.2; }
  .record-star { width:40px; flex-basis:40px; }
}

@media (max-width:370px) {
  .records-status { align-items:flex-start; flex-direction:column; }
  .record-card { grid-template-columns:34px minmax(0,1fr) auto; gap:6px; }
  .record-kind { width:34px; height:34px; }
  .record-actions { gap:0; }
  .record-primary { max-width:58px; font-size:9px; }
  .record-star { width:36px; flex-basis:36px; }
}

html[data-theme='dark'] body {
    --paper:#20211f;
    --paper-strong:#292a27;
    --paper-subtle:#30312d;
    --ink:#f1ecdf;
    --dim:#b8b3a8;
    --faint:#93948b;
    --line:rgba(228,214,182,.16);
    --line-strong:rgba(228,214,182,.27);
    --gold-wash:#453b2c;
    background:radial-gradient(circle at 10% 0%, rgba(170,131,72,.14), transparent 30rem), var(--paper);
}