:root {
  color: #16283c;
  background: #f3f7fb;
  font-family: "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 920px; min-height: 100dvh; margin: 0; background: #f3f7fb; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgb(23 113 201 / .25); outline-offset: 2px; }

.site-shell { min-height: 100dvh; padding-bottom: 48px; background: radial-gradient(circle at 80% 0%, rgb(207 233 255 / .65), transparent 30rem), linear-gradient(90deg, rgb(31 103 165 / .025) 1px, transparent 1px) 0 0 / 44px 44px, #f3f7fb; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 max(32px, calc((100vw - 1440px) / 2)); border-top: 3px solid #0868b7; border-bottom: 1px solid #dce7f0; background: rgb(255 255 255 / .93); box-shadow: 0 3px 16px rgb(25 58 91 / .045); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #0c7dca, #0758a6); box-shadow: 0 8px 18px rgb(8 86 165 / .2), inset 0 1px 0 rgb(255 255 255 / .28); color: #fff; font-family: Consolas, monospace; font-size: 13px; font-weight: 800; letter-spacing: -.05em; }
.brand strong { display: block; font-size: 18px; font-weight: 730; letter-spacing: -.035em; }
.brand span { display: block; margin-top: 3px; color: #6e8295; font-size: 12px; }
.topbar-meta { display: flex; align-items: center; gap: 12px; color: #63798f; font-size: 12px; }
.availability { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; }
.availability::before { width: 7px; height: 7px; border-radius: 50%; background: #159563; box-shadow: 0 0 0 3px rgb(21 149 99 / .12); content: ""; }
.refresh-button { height: 34px; border: 1px solid #cdddea; border-radius: 6px; padding: 0 12px; background: #fff; color: #38526c; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .18s ease, border-color .18s ease, transform .14s ease; }
.refresh-button:hover { border-color: #93bbdd; background: #f8fbff; }.refresh-button:active { transform: translateY(1px); }

.content { width: min(1380px, calc(100% - 64px)); margin: 28px auto 0; }
.intro { display: flex; align-items: end; justify-content: space-between; margin: 0 0 18px; }
.eyebrow { display: block; margin-bottom: 8px; color: #66849e; font-size: 10px; font-weight: 780; letter-spacing: .09em; }
.intro h1 { margin: 0; color: #102d4a; font-size: 26px; font-weight: 750; letter-spacing: -.055em; }
.intro p { max-width: 480px; margin: 0; color: #617b94; font-size: 12px; line-height: 1.75; text-align: right; }

.dashboard { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.record-rail, .detail-panel { border: 1px solid #d7e3ed; border-radius: 12px; background: rgb(255 255 255 / .92); box-shadow: 0 16px 36px rgb(26 58 89 / .06); }
.record-rail { position: sticky; top: 18px; overflow: hidden; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 17px 14px; border-bottom: 1px solid #e2ebf2; }
.rail-heading strong { color: #18344f; font-size: 14px; }.record-total { color: #658097; font-family: Consolas, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.record-list { max-height: calc(100dvh - 168px); overflow: auto; padding: 8px; }
.record-card { display: block; width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 12px; background: transparent; color: inherit; cursor: pointer; text-align: left; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.record-card + .record-card { margin-top: 3px; }.record-card:hover { border-color: #d5e5f1; background: #f7fbff; }.record-card.active { border-color: #a9d2f6; background: #edf7ff; box-shadow: inset 3px 0 0 #0872c3; }
.record-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #15334e; font-size: 13px; font-weight: 730; }.record-card-time { display: block; margin-top: 6px; color: #74899d; font-size: 10px; }.record-card-stats { display: flex; gap: 7px; margin-top: 7px; color: #5f7992; font-size: 10px; }.record-card-stats b { color: #0868b7; font-family: Consolas, monospace; font-size: 11px; }

.detail-panel { min-height: 620px; overflow: hidden; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 23px; border-bottom: 1px solid #dce7ef; background: linear-gradient(105deg, #fff, #f6fbff); }
.detail-head h2 { margin: 0; color: #102d4a; font-size: 23px; font-weight: 750; letter-spacing: -.045em; }.detail-head p { margin: 7px 0 0; color: #668096; font-size: 12px; }
.publish-badge { display: inline-flex; align-items: center; min-height: 27px; border: 1px solid #b9e4d2; border-radius: 5px; padding: 0 8px; background: #f1fcf7; color: #158355; font-size: 11px; font-weight: 720; white-space: nowrap; }.publish-badge::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; content: ""; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid #e2eaf1; background: #e2eaf1; }.metric { min-height: 82px; padding: 15px 20px; background: #fff; }.metric span { display: block; color: #72889c; font-size: 10px; font-weight: 720; letter-spacing: .05em; }.metric strong { display: block; margin-top: 7px; color: #163651; font-family: Consolas, "SFMono-Regular", monospace; font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.detail-section { padding: 23px 28px 0; }.detail-section:last-child { padding-bottom: 28px; }.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }.section-head h3 { margin: 0; color: #203d59; font-size: 14px; font-weight: 730; }.section-head span { color: #748a9d; font-family: Consolas, monospace; font-size: 11px; }
.entity-list { display: grid; gap: 8px; }.entity { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 1.3fr) minmax(120px, .75fr); align-items: center; gap: 15px; border: 1px solid #dde8f0; border-radius: 7px; padding: 11px 13px; background: #fbfdff; }.entity-name { color: #173650; font-size: 13px; font-weight: 720; }.entity-meta { overflow: hidden; color: #698095; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.entity-count { color: #0b6bb6; font-family: Consolas, monospace; font-size: 12px; font-weight: 720; text-align: right; }
.table-wrap { overflow: auto; border: 1px solid #dce7ef; border-radius: 8px; }.song-table { width: 100%; min-width: 720px; border-spacing: 0; font-size: 12px; }.song-table th { padding: 10px 13px; border-bottom: 1px solid #dce7ef; background: #f5f9fc; color: #6e8499; font-size: 10px; font-weight: 770; letter-spacing: .045em; text-align: left; }.song-table td { padding: 12px 13px; border-bottom: 1px solid #e8eff5; color: #3f5870; vertical-align: top; }.song-table tr:last-child td { border-bottom: 0; }.song-table tbody tr:hover td { background: #f7fbff; }.song-name { color: #183650; font-size: 13px; font-weight: 700; }.song-sub { margin-top: 4px; color: #7b91a4; font-size: 10px; }.credit { max-width: 300px; color: #27618e; line-height: 1.55; }.track-id { color: #496882; font-family: Consolas, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.empty { display: flex; min-height: 480px; align-items: center; justify-content: center; flex-direction: column; padding: 44px; color: #71879a; text-align: center; }.empty-mark { display: grid; width: 52px; height: 52px; margin-bottom: 16px; place-items: center; border: 1px solid #cce2f4; border-radius: 14px; background: #eef8ff; color: #0870bc; font-family: Consolas, monospace; font-size: 14px; font-weight: 800; }.empty h2 { margin: 0; color: #3e5870; font-size: 17px; }.empty p { max-width: 360px; margin: 8px 0 0; font-size: 12px; line-height: 1.75; }
.error { margin: 18px; border: 1px solid #efc4c8; border-radius: 8px; padding: 12px; background: #fff8f8; color: #a12d34; font-size: 12px; }

@media (max-width: 1080px) { .content { width: calc(100% - 36px); }.topbar { padding-right: 18px; padding-left: 18px; }.dashboard { grid-template-columns: 270px minmax(0, 1fr); }.detail-head, .detail-section { padding-right: 20px; padding-left: 20px; }.intro p { max-width: 390px; }.entity { grid-template-columns: minmax(95px, .7fr) minmax(0, 1.25fr) minmax(80px, .6fr); gap: 10px; } }