:root {
  --ink: #0d4539;
  --ink-soft: #53655f;
  --cream: #f3eee5;
  --paper: #fffcf7;
  --line: #ddd6ca;
  --gold: #c88d32;
  --coral: #cf6245;
  --blue: #6c8c93;
  --sage: #849b78;
  --shadow: 0 18px 50px rgba(31, 48, 43, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
.auth-gate { position: fixed; inset: 0; z-index: 100; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, rgba(200,141,50,.18), transparent 34%), linear-gradient(145deg, #092f28, #0d4539); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(460px, 100%); padding: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: var(--paper); box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.auth-card > img { width: 64px; height: 64px; margin-bottom: 24px; border-radius: 14px; }
.auth-card h1 { margin: 8px 0 10px; font-size: 40px; line-height: 1; }
.auth-card > p { margin: 0 0 24px; color: var(--ink-soft); }
.auth-card form, #cloud-auth-form { display: grid; gap: 14px; }
.auth-card form[hidden] { display: none; }
.auth-card form > p:not(.auth-message) { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.auth-card label, #cloud-auth-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.auth-card input, #cloud-auth-form input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font-size: 12px; letter-spacing: 0; text-transform: none; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-message { min-height: 16px; margin: 0; color: var(--coral); font-size: 10px; line-height: 1.5; }
.cloud-account-button { padding: 8px 11px; white-space: nowrap; }
.cloud-status-card { margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
.cloud-status-card strong { font-family: "Playfair Display", serif; font-size: 18px; }
.cloud-status-card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.cloud-actions { display: grid; gap: 9px; }
.cloud-actions[hidden] { display: none; }
.cloud-actions > button { justify-self: start; }
.cloud-dialog-content { max-height: 92vh; padding: 28px; overflow-y: auto; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; padding: 28px 22px; overflow-y: auto; background: linear-gradient(180deg, #0d4539, #092f28); color: #f8f3e9; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 50px; height: 50px; overflow: hidden; border-radius: 12px; flex: 0 0 auto; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.27); }
.brand-copy { min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Playfair Display", serif; font-size: 21px; }
.brand small { max-width: 135px; margin-top: 4px; color: rgba(255,255,255,.58); font-size: 8px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.main-nav { margin-top: 42px; display: grid; gap: 18px; }
.nav-group { display: grid; gap: 4px; }
.nav-group-label { padding: 0 14px 3px; color: rgba(255,255,255,.38); font-size: 8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.nav-item { padding: 12px 14px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.62); text-align: left; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.1); color: white; }
.nav-icon { display: inline-block; width: 25px; font-size: 17px; }
.sidebar-note { margin-top: auto; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar-note p { margin: 8px 0 12px; font-family: "Playfair Display", serif; }
.sidebar-note small { color: rgba(255,255,255,.5); font-size: 10px; }
.progress-track { height: 3px; background: rgba(255,255,255,.13); margin-bottom: 10px; }
.progress-track span { display: block; width: 68%; height: 100%; background: var(--gold); }
.sidebar-actions { display: grid; gap: 3px; }
.text-button { border: 0; padding: 7px 14px 7px 39px; background: transparent; color: rgba(255,255,255,.48); font-size: 10px; text-align: left; }
.text-button:hover { color: white; }
main { grid-column: 2; min-width: 0; }
.topbar { height: 76px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.search-wrap { width: min(380px, 38vw); display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 17px; }
.access-role-badge { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 20px; color: var(--blue); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.save-status-badge { color: var(--ink-soft); font-size: 9px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; }
.save-status-badge.saving { color: var(--gold); }
.save-status-badge.synced { color: var(--ink); }
.save-status-badge.attention { color: var(--coral); }
.sample-label { padding: 5px 9px; border: 1px solid #d7cbb5; border-radius: 20px; color: #816f53; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sample-label.temporary { border-color: color-mix(in srgb, var(--copper-warning) 32%, transparent); background: color-mix(in srgb, var(--copper-warning) 7%, transparent); color: var(--copper-warning); }
.user-management { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.user-management h3 { margin: 6px 0; font-family: "Playfair Display", serif; }
.user-management form { display: grid; gap: 10px; margin-top: 14px; }
.user-management label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.user-management input, .user-management select { padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-size: 11px; letter-spacing: 0; text-transform: none; }
.member-list { display: grid; gap: 6px; margin-top: 14px; }
.member-list div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 10px; }
.member-list span { color: var(--ink-soft); }
body.viewer-mode [data-admin-only],
body.viewer-mode [data-add-event],
body.viewer-mode [data-add-library],
body.viewer-mode [data-edit-row],
body.viewer-mode [data-delete],
body.viewer-mode [data-edit-event],
body.viewer-mode [data-edit-song],
body.viewer-mode [data-edit-album],
body.viewer-mode [data-edit-song-credit],
body.viewer-mode [data-edit-library-item],
body.viewer-mode [data-set-library-image],
body.viewer-mode [data-delete-venue],
body.viewer-mode [data-tag-action],
body.viewer-mode [data-audit-edit-song],
body.viewer-mode [data-audit-edit-event],
body.viewer-mode [data-favorite-song],
body.viewer-mode #new-event,
body.viewer-mode #hero-image-open,
body.viewer-mode #backup-open,
body.viewer-mode #import-open,
body.viewer-mode #apply-credit-import,
body.viewer-mode #undo-credit-import,
body.viewer-mode #cloud-sync-now,
body.viewer-mode #cloud-upload-local,
body.viewer-mode #cloud-load-remote { display: none !important; }
.primary-button, .secondary-button { border: 0; border-radius: 5px; padding: 11px 16px; font-weight: 600; font-size: 12px; }
.primary-button { background: var(--ink); color: white; box-shadow: 0 6px 18px rgba(23,50,45,.17); }
.primary-button:hover { background: #244b43; }
.secondary-button { border: 1px solid var(--line); background: transparent; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 20px; }
.view { display: none; padding: 0 42px 50px; }
.view.active { display: block; }
.hero { min-height: 230px; padding: 44px 4px 24px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.eyebrow { display: block; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, blockquote { font-family: "Playfair Display", serif; }
h1 { margin: 8px 0; font-size: clamp(42px, 5vw, 69px); line-height: .94; font-weight: 600; letter-spacing: -.04em; }
h1 em { color: var(--coral); font-weight: 500; }
.hero p, .page-heading p { color: var(--ink-soft); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; }
.stat-card { position: relative; min-height: 145px; padding: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,253,248,.55); }
.stat-card.featured { background: var(--ink); color: white; border-color: var(--ink); }
.stat-label { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.featured .stat-label { color: rgba(255,255,255,.62); }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.gold { background: var(--gold); }.coral { background: var(--coral); }.blue { background: var(--blue); }.sage { background: var(--sage); }
.stat-card strong { display: block; margin: 14px 0 1px; font-family: "Playfair Display", serif; font-size: 40px; }
.stat-card > span { color: var(--ink-soft); font-size: 10px; }
.featured > span { color: rgba(255,255,255,.52); }
.mini-bars { position: absolute; right: 18px; bottom: 18px; left: 57%; height: 34px; display: flex; align-items: flex-end; gap: 3px; }
.mini-bars i { flex: 1; min-height: 4px; background: var(--gold); opacity: .65; }
.stat-art { position: absolute; right: 10px; bottom: -28px; color: rgba(198,111,84,.13); font-family: serif; font-size: 100px; transform: rotate(-12deg); }
.stat-art.outline { color: rgba(108,140,147,.13); }
.dashboard-pulse { margin-top: 12px; display: grid; grid-template-columns: .9fr 1.6fr; gap: 12px; }
.pulse-intro { padding: 28px; background: linear-gradient(140deg, #21493f, var(--ink)); color: white; box-shadow: var(--shadow); }
.pulse-intro h2 { max-width: 420px; margin: 13px 0 8px; font-size: 29px; line-height: 1.1; }
.pulse-intro p { margin: 0; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.6; }
.pulse-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 7px; }
.pulse-actions .secondary-button { border-color: rgba(255,255,255,.28); color: white; }
.pulse-chart-panel { padding: 22px 24px; border: 1px solid var(--line); background: var(--paper); }
.pulse-chart-panel .panel-heading strong { color: var(--coral); font-size: 10px; }
.year-trend { height: 155px; display: flex; align-items: end; gap: 9px; overflow-x: auto; }
.year-trend button { min-width: 42px; height: 100%; padding: 0; display: flex; flex-direction: column; justify-content: end; align-items: center; border: 0; background: transparent; }
.year-trend button i { width: 22px; min-height: 8px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--gold), #dfb86f); transition: .2s; }
.year-trend button:hover i { width: 29px; background: var(--coral); }
.year-trend button strong { margin: 4px 0 2px; font-size: 8px; }
.year-trend button span { color: var(--ink-soft); font-size: 8px; }
.dashboard-grid { margin-top: 12px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.panel { padding: 24px; border: 1px solid var(--line); background: var(--paper); }
.panel-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.panel-heading h2 { margin: 5px 0 0; font-size: 21px; }
.link-button { padding: 4px 0; border: 0; background: transparent; color: var(--coral); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.event-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); cursor: pointer; }
.event-row:first-child { border-top: 0; }
.date-block { border-right: 1px solid var(--line); text-align: center; }
.date-block strong { display: block; font-family: "Playfair Display", serif; font-size: 22px; }
.date-block span { color: var(--coral); font-size: 9px; text-transform: uppercase; }
.event-row h3 { margin: 0 0 4px; font-size: 12px; }
.event-row p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.event-tag { padding: 4px 7px; border-radius: 20px; background: #edf1ed; color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.donut-wrap { min-height: 210px; display: flex; align-items: center; justify-content: space-around; gap: 25px; }
.donut { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; }
.donut > div { width: 86px; height: 86px; display: grid; place-content: center; border-radius: 50%; background: var(--paper); text-align: center; }
.donut strong { font-family: "Playfair Display", serif; font-size: 28px; }
.donut span { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }
.legend { display: grid; gap: 9px; min-width: 105px; }
.legend div { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; }
.legend i { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; }
.song-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
.song-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.song-row[role="button"] { cursor: pointer; }
.song-row[role="button"]:hover strong, .song-row[role="button"]:focus-visible strong { color: var(--coral); }
.song-row:nth-child(-n+2) { border-top: 0; }
.song-row > span { color: var(--gold); font-family: "Playfair Display", serif; }
.song-row strong { display: block; font-size: 11px; }
.song-row small { color: var(--ink-soft); font-size: 9px; }
.song-count { align-self: center; padding: 3px 6px; background: var(--cream); border-radius: 3px; font-size: 9px; }
.memory-panel { background: var(--coral); color: white; }
.memory-panel .eyebrow { color: #f2d9c6; }
.memory-panel blockquote { margin: 34px 0 6px; font-size: 27px; line-height: 1.15; }
.memory-panel p { color: rgba(255,255,255,.68); font-size: 10px; }
.memory-panel .secondary-button { margin-top: 23px; border-color: rgba(255,255,255,.4); color: white; }
.archive-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.archive-highlights button { position: relative; min-height: 104px; padding: 13px; display: grid; align-content: end; border: 1px solid var(--line); background: var(--cream); text-align: left; }
.archive-highlights button:hover { border-color: var(--coral); }
.archive-highlights span, .people-highlights span { color: var(--ink-soft); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.archive-highlights strong, .people-highlights strong { display: block; margin-top: 5px; font-family: "Playfair Display", serif; font-size: 16px; }
.archive-highlights small, .people-highlights small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.archive-highlights i { position: absolute; right: 10px; top: 9px; color: var(--coral); font-style: normal; }
.people-panel { grid-column: 1 / -1; }
.people-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.people-highlights button { padding: 15px; border: 1px solid var(--line); border-top: 3px solid var(--gold); background: transparent; text-align: left; }
.people-highlights button:hover { background: var(--cream); }
.milestone-panel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: linear-gradient(135deg, var(--coral), #a85847); color: white; }
.milestone-panel h2 { margin: 8px 0; font-size: 28px; }
.milestone-panel p { max-width: 560px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.6; }
.milestone-panel .eyebrow { color: #f7d9cb; }
.milestone-ring { flex: 0 0 125px; width: 125px; height: 125px; display: grid; place-content: center; border-radius: 50%; text-align: center; box-shadow: inset 0 0 0 18px rgba(164,80,64,.9); }
.milestone-ring strong { font-family: "Playfair Display", serif; font-size: 29px; }
.milestone-ring span { color: rgba(255,255,255,.68); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.page-heading { min-height: 185px; display: flex; align-items: end; justify-content: space-between; padding: 44px 0 28px; }
.page-heading h1 { font-size: 52px; }
.page-heading-actions { display: flex; align-items: center; gap: 10px; }
.display-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.display-toggle button { padding: 7px 9px; border: 0; border-radius: 3px; background: transparent; color: var(--ink-soft); font-size: 9px; }
.display-toggle button.active { background: var(--ink); color: white; }
.filter-bar { padding: 13px; display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); border-bottom: 0; background: var(--paper); }
.filter-bar input, .filter-bar select { padding: 8px 10px; border: 1px solid var(--line); background: white; font-size: 11px; }
.filter-bar input { min-width: 240px; }
.filter-bar span { margin-left: auto; color: var(--ink-soft); font-size: 10px; }
.archive-mode { margin-bottom: 12px; display: flex; gap: 5px; }
.archive-mode button { padding: 8px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.archive-mode button.active { border-color: var(--ink); background: var(--ink); color: white; }
.archive-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.archive-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 11px; }
.archive-table th { color: var(--ink-soft); font-size: 8px; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.archive-table th, .archive-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.archive-table tbody tr { cursor: pointer; }
.archive-table tbody tr:hover { background: #faf7ef; }
.archive-table td:first-child { white-space: nowrap; color: var(--coral); }
.archive-table td.table-actions { width: 78px; padding-right: 14px; padding-left: 14px; text-align: right; white-space: nowrap; vertical-align: middle; }
.table-actions button { margin-left: 9px; border: 0; background: transparent; color: var(--coral); font-size: 9px; vertical-align: middle; }
.table-actions button:first-child { margin-left: 0; }
.table-delete { border: 0; background: transparent; color: #a99489; }
.danger-button { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--copper-warning) 35%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--copper-warning) 7%, transparent); color: var(--copper-warning); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.danger-button:hover { border-color: var(--copper-warning); background: var(--copper-warning); color: white; }
.repertoire-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.repertoire-card { position: relative; min-height: 165px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.repertoire-card:hover, .repertoire-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); outline: 0; }
.repertoire-card.favorite { border-color: rgba(191,135,50,.3); }
.repertoire-card > span { color: var(--gold); font-family: "Playfair Display", serif; font-size: 24px; }
.repertoire-card .song-number { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.repertoire-card h3 { margin: auto 0 5px; font-family: "Playfair Display", serif; font-size: 18px; }
.repertoire-card p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.repertoire-card b { margin-top: 13px; color: var(--coral); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.song-favorite {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(34,70,60,.22);
  font-size: 18px;
  line-height: 1;
}
.song-favorite:hover { background: rgba(191,135,50,.08); color: rgba(191,135,50,.6); transform: scale(1.08); }
.song-favorite.active { color: var(--gold); text-shadow: 0 2px 8px rgba(191,135,50,.22); }
.song-detail-title { display: flex; gap: 10px; align-items: center; }
.song-detail-title h2 { min-width: 0; }
.detail-favorite { position: static; flex: 0 0 auto; color: rgba(255,255,255,.35); font-size: 22px; }
.detail-favorite:hover { background: rgba(255,255,255,.1); color: var(--gold-light); }
.detail-favorite.active { color: var(--gold-light); }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.album-card { min-height: 285px; padding: 15px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.album-card:hover, .album-card:focus-visible { transform: translateY(-4px); border-color: var(--coral); box-shadow: var(--shadow); outline: 0; }
.album-cover, .album-symbol { width: 100%; aspect-ratio: 1; object-fit: cover; }
.album-symbol { display: grid; place-items: center; background: linear-gradient(145deg, var(--ink), #31594f); color: rgba(255,255,255,.78); font-family: "Playfair Display", serif; font-size: 70px; }
.album-card div { margin-top: 17px; }
.album-card h3 { margin: 6px 0; font-family: "Playfair Display", serif; font-size: 20px; line-height: 1.15; }
.album-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.album-card b { margin-top: auto; padding-top: 14px; color: var(--coral); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.album-overview { margin-bottom: 32px; display: grid; gap: 16px; }
.album-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.album-stat-card { min-height: 128px; padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-card); box-shadow: var(--shadow-card); }
.album-stat-card.featured { background: var(--card-hero-background); color: white; box-shadow: var(--card-shadow-hero); }
.album-stat-card span { color: var(--ink-soft); font-size: 8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.album-stat-card.featured span, .album-stat-card.featured small { color: rgba(255,255,255,.62); }
.album-stat-card strong { margin: auto 0 4px; font-family: "Playfair Display", serif; font-size: 38px; line-height: 1; }
.album-stat-card small { color: var(--ink-soft); font-size: 8px; line-height: 1.45; }
.album-insight-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.album-overview-panel { min-height: 230px; padding: 24px; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-archive-background); box-shadow: var(--card-shadow-rest); }
.album-overview-panel .panel-heading > strong { color: var(--copper-accent); font-size: 9px; }
.album-year-trend { height: 145px; display: flex; align-items: end; gap: 10px; overflow-x: auto; }
.album-year-trend > div { min-width: 38px; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; }
.album-year-trend i { width: 22px; min-height: 8px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--gold), #dfb86f); }
.album-year-trend strong { margin-top: 5px; font-size: 8px; }
.album-year-trend span { color: var(--ink-soft); font-size: 8px; }
.album-year-trend p { align-self: center; color: var(--ink-soft); font-size: 10px; }
.album-highlights { display: grid; gap: 0; }
.album-highlights div { padding: 12px 0; border-top: 1px solid var(--line); }
.album-highlights div:first-child { padding-top: 0; border-top: 0; }
.album-highlights span, .album-highlights strong { display: block; }
.album-highlights span { color: var(--gold); font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.album-highlights strong { margin-top: 4px; font-family: "Playfair Display", serif; font-size: 15px; line-height: 1.35; }
.song-overview { margin-bottom: 32px; display: grid; gap: 16px; }
.song-insight-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.song-overview-ranking { display: grid; }
.song-overview-ranking div { min-height: 37px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.song-overview-ranking div:first-child { border-top: 0; }
.song-overview-ranking span { color: var(--gold); font-family: "Playfair Display", serif; font-size: 13px; }
.song-overview-ranking strong { overflow: hidden; font-family: "Playfair Display", serif; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.song-overview-ranking b { color: var(--copper-accent); font-size: 9px; }
.song-overview-ranking p, .song-tag-overview p { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.song-tag-overview { display: grid; gap: 13px; }
.song-tag-overview div { display: grid; grid-template-columns: minmax(70px, .8fr) 1fr 24px; gap: 8px; align-items: center; }
.song-tag-overview span { overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.song-tag-overview i { height: 5px; overflow: hidden; border-radius: 10px; background: var(--line); }
.song-tag-overview i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #dfb86f); }
.song-tag-overview strong { color: var(--ink-soft); font-size: 9px; text-align: right; }
.event-overview { margin-bottom: 24px; display: grid; gap: 16px; }
.event-insight-grid { display: grid; grid-template-columns: 1.35fr .8fr 1fr; gap: 16px; }
.event-type-overview { display: grid; gap: 0; }
.event-type-overview div { min-height: 34px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.event-type-overview div:first-child { border-top: 0; }
.event-type-overview i { width: 7px; height: 7px; border-radius: 50%; }
.event-type-overview span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.event-type-overview strong { color: var(--copper-accent); font-size: 9px; }
.event-type-overview p { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.event-time-section { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.event-time-summary {
  grid-column: 1 / -1;
  padding: 26px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--gold-accent) 22%, var(--green-primary));
  border-radius: var(--radius);
  background: var(--card-hero-background);
  color: var(--tt-on-dark);
  box-shadow: var(--card-shadow-hero);
}
.event-time-summary h2 { margin: 8px 0 7px; font-family: var(--font-display); font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.event-time-summary p { max-width: 600px; margin: 0; color: var(--tt-on-dark-muted); font-size: 10px; line-height: 1.6; }
.event-time-totals { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,248,237,.16); border-radius: var(--radius-small); background: rgba(255,248,237,.06); }
.event-time-totals div { min-width: 0; padding: 15px; border-left: 1px solid rgba(255,248,237,.14); }
.event-time-totals div:first-child { border-left: 0; }
.event-time-totals span, .event-time-totals strong { display: block; }
.event-time-totals span { color: var(--tt-on-dark-muted); font-size: 7px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.event-time-totals strong { margin-top: 6px; color: var(--tt-on-dark); font-family: var(--font-display); font-size: 18px; line-height: 1.15; }
.event-time-breakdown, .event-time-years { min-height: 265px; }
.event-time-type-list { display: grid; }
.event-time-type-list > div { min-height: 44px; display: grid; grid-template-columns: minmax(145px, 1fr) minmax(90px, .9fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--line); }
.event-time-type-list > div:first-child { border-top: 0; }
.event-time-type-list span, .event-time-type-list strong, .event-time-type-list small { min-width: 0; display: block; }
.event-time-type-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.event-time-type-list small { margin-top: 2px; color: var(--ink-soft); font-size: 7px; }
.event-time-type-list i { height: 5px; overflow: hidden; border-radius: var(--tt-radius-pill); background: var(--line); }
.event-time-type-list i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.event-time-type-list em { color: var(--copper-accent); font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap; }
.event-time-type-list p { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.seating-overview { margin-bottom: 24px; }
.seating-venue-tabs { margin-bottom: 16px; display: flex; gap: 6px; }
.seating-venue-tabs button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink-soft); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.seating-venue-tabs button.active { border-color: var(--ink); background: var(--ink); color: white; }
.seating-heatmap-panel { margin-bottom: 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); }
.seat-map { max-width: 100%; overflow-x: auto; }
.seat-map-grid { min-width: 760px; display: grid; grid-template-columns: repeat(var(--seat-columns), minmax(18px, 1fr)); gap: 3px; }
.seat-cell { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--border-warm) 75%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--ivory-page) 80%, white); color: transparent; }
.seat-cell span { display: none; }
.seat-cell.invalid { border-color: transparent; background: transparent; pointer-events: none; }
.seat-cell.used { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); background: color-mix(in srgb, var(--gold) calc(var(--seat-heat) * 70%), var(--ivory-page)); }
.seat-cell.used b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 7px; }
.event-seat-map .seat-cell { cursor: pointer; }
.event-seat-map .seat-cell:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, white); transform: scale(1.12); z-index: 2; }
.seat-cell.selected { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral) 20%, transparent); }
.seat-cell.selected b { color: white; }
.seat-map-axis { min-width: 760px; margin-top: 8px; display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.seating-history { display: grid; gap: 7px; }
.seating-history > button { padding: 13px 15px; display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: left; }
.seating-history > button:hover { border-color: var(--gold); box-shadow: var(--shadow-card); }
.seating-history time { color: var(--coral); font-size: 9px; }
.seating-history strong, .seating-history span { display: block; }
.seating-history strong { font-family: "Playfair Display", serif; font-size: 13px; }
.seating-history span { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.seating-history b { color: var(--gold); font-size: 9px; }
.seating-fields { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--ivory-soft) 72%, transparent); }
.seating-fields.hidden { display: none; }
.seating-field-heading { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 16px; }
.seating-field-heading h3 { margin: 4px 0; font-family: "Playfair Display", serif; font-size: 20px; }
.seating-field-heading p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.seat-coordinate-fields { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.seating-chart-upload { margin-top: 14px; }
.seating-chart-status { margin-top: 7px; color: var(--ink-soft); font-size: 9px; }
.seating-detail-section .secondary-button { margin-top: 12px; }
.collection-heading { margin: 0 0 14px; display: flex; align-items: end; justify-content: space-between; }
.collection-heading h2 { margin: 5px 0 0; font-size: 25px; }
.collection-heading > span { color: var(--ink-soft); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.album-detail-hero { position: relative; min-height: 180px; padding-left: 185px; }
.album-detail-hero .detail-display-image, .album-detail-symbol { position: absolute; left: 0; top: 0; width: 155px; height: 155px; border-radius: 4px; object-fit: cover; }
.album-detail-symbol { display: grid; place-items: center; background: var(--ink); color: white; font-family: "Playfair Display", serif; font-size: 55px; }
.album-track-row time { color: var(--gold); font-family: "Playfair Display", serif; font-size: 16px; }
.album-repertoire { max-height: 430px; overflow-y: auto; padding-right: 8px; }
.album-repertoire-row {
  width: 100%;
  padding: 13px 10px;
  display: grid;
  grid-template-columns: 34px 64px minmax(0, 1fr) 72px 20px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.album-repertoire-row:not(.unlinked):hover { padding-right: 6px; padding-left: 14px; background: var(--paper-rich); }
.album-track-index { color: var(--ink-soft); font-size: 8px; letter-spacing: .12em; }
.album-track-number { color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.album-track-copy strong, .album-track-copy small, .album-track-activity strong, .album-track-activity small { display: block; }
.album-track-copy strong { font-family: "Playfair Display", serif; font-size: 15px; line-height: 1.25; }
.album-track-copy small, .album-track-activity small { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.album-track-activity { text-align: right; }
.album-track-activity strong { font-family: "Playfair Display", serif; font-size: 16px; }
.album-track-arrow { color: var(--coral); }
.album-repertoire-row.unlinked { opacity: .6; }
.song-credit-sections { display: grid; gap: 32px; }
.song-credit-overview { margin-bottom: 32px; display: grid; gap: 16px; }
.song-credit-insight-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 16px; }
.song-credit-overview-ranking { display: grid; }
.song-credit-overview-ranking button {
  min-width: 0;
  min-height: 40px;
  padding: 7px 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.song-credit-overview-ranking button:first-child { border-top: 0; }
.song-credit-overview-ranking button:hover strong, .song-credit-overview-ranking button:focus-visible strong { color: var(--copper-accent); }
.song-credit-overview-ranking button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.song-credit-overview-ranking span { color: var(--gold); font-family: "Playfair Display", serif; font-size: 13px; }
.song-credit-overview-ranking div { min-width: 0; display: grid; gap: 2px; }
.song-credit-overview-ranking strong { overflow: hidden; font-family: "Playfair Display", serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.song-credit-overview-ranking small { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.song-credit-overview-ranking b { color: var(--copper-accent); font-size: 9px; }
.song-credit-overview-ranking p { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.song-credit-role-overview { display: grid; gap: 15px; }
.song-credit-role-overview div { display: grid; grid-template-columns: minmax(75px, .8fr) 1fr 24px; gap: 8px; align-items: center; }
.song-credit-role-overview span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.song-credit-role-overview i { height: 6px; overflow: hidden; border-radius: 10px; background: var(--line); }
.song-credit-role-overview i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #dfb86f); }
.song-credit-role-overview strong { color: var(--copper-accent); font-size: 9px; text-align: right; }
.song-credit-role-overview small { grid-column: 1 / -1; margin-top: -6px; color: var(--ink-soft); font-size: 8px; }
.song-credit-group { display: grid; gap: 12px; }
.song-credit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.song-credit-card { min-height: 145px; padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.song-credit-card:hover, .song-credit-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); outline: 0; }
.song-credit-card > span { color: var(--gold); font-size: 23px; }
.song-credit-card div { margin-top: auto; }
.song-credit-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 18px; }
.song-credit-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.song-credit-card b { margin-top: 12px; color: var(--gold); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.audit-summary { margin: 18px 0 16px; display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 14px; }
.audit-score-card { grid-row: span 2; padding: 28px; display: flex; align-items: center; gap: 25px; border-radius: var(--radius); background: radial-gradient(circle at 10% 10%, rgba(232,201,142,.17), transparent 40%), linear-gradient(145deg, #104b3f, var(--ink-deep)); color: white; box-shadow: var(--shadow); }
.audit-score-card h2 { max-width: 480px; margin: 9px 0 7px; font-size: 25px; line-height: 1.15; }
.audit-score-card p { margin: 0; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.6; }
.audit-score-ring { flex: 0 0 118px; width: 118px; height: 118px; padding: 12px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold-light) var(--score), rgba(255,255,255,.12) 0); }
.audit-score-ring > div { width: 100%; height: 100%; display: grid; place-content: center; border-radius: 50%; background: var(--ink-deep); text-align: center; }
.audit-score-ring strong, .audit-score-ring span { display: block; }
.audit-score-ring strong { font-family: "Playfair Display", serif; font-size: 27px; }
.audit-score-ring span { color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.audit-metric { padding: 18px; display: grid; grid-template-columns: 1fr auto; align-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,249,.72); text-align: left; box-shadow: 0 8px 25px rgba(18,48,40,.035); }
.audit-metric:hover { border-color: rgba(191,135,50,.4); background: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); }
.audit-metric span { color: var(--ink-soft); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.audit-metric strong { grid-row: span 2; font-family: "Playfair Display", serif; font-size: 30px; }
.audit-metric small { margin-top: 5px; color: var(--ink-soft); font-size: 8px; }
.audit-filter input { flex: 1; }
.audit-queue { display: grid; gap: 8px; }
.audit-row { padding: 14px 16px; display: grid; grid-template-columns: 75px minmax(210px, 1fr) minmax(240px, 1.4fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-small); background: rgba(255,253,249,.72); }
.audit-row:hover { border-color: rgba(191,135,50,.3); background: var(--paper); box-shadow: 0 10px 30px rgba(18,48,40,.05); }
.audit-completeness { text-align: center; }
.audit-completeness strong, .audit-completeness span { display: block; }
.audit-completeness strong { font-family: "Playfair Display", serif; font-size: 22px; }
.audit-completeness span { color: var(--ink-soft); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.audit-song > span { color: var(--gold); font-size: 9px; font-weight: 600; }
.audit-song h3 { margin: 3px 0; font-family: "Playfair Display", serif; font-size: 16px; }
.audit-song p { margin: 0; color: var(--ink-soft); font-size: 8px; }
.audit-issues { display: flex; flex-wrap: wrap; gap: 5px; }
.audit-issue { padding: 5px 7px; border-radius: 99px; background: #f4e9d5; color: #8d6730; font-size: 7px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.audit-issue.unperformed, .audit-issue.recording { background: #e7eeeb; color: var(--ink-soft); }
.audit-issue.number, .audit-issue.duplicate { background: #f3e1dc; color: #9c4f3d; }
.audit-actions { display: flex; gap: 6px; }
.event-audit-section { margin-top: var(--space-6, 48px); padding-top: var(--space-4, 32px); border-top: 1px solid var(--line); }
.event-audit-heading { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.event-audit-heading h2 { margin: 6px 0 4px; font-size: 28px; }
.event-audit-heading p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.event-audit-heading > span { color: var(--ink-soft); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.event-audit-summary { margin-bottom: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.event-audit-filter input { flex: 1; }
.event-audit-row .audit-issues { align-content: center; }
.event-audit-row .audit-issues small { flex-basis: 100%; color: var(--ink-soft); font-size: 8px; line-height: 1.5; }
.audit-issue.missing-songs { background: #f3e1dc; color: #9c4f3d; }
.audit-issue.missing-conductors { background: #f4e9d5; color: #8d6730; }
.wardrobe-sections { display: grid; gap: 30px; }
.wardrobe-overview { margin-bottom: 32px; display: grid; gap: 16px; }
.wardrobe-insight-grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 16px; }
.wardrobe-overview-ranking { display: grid; }
.wardrobe-overview-ranking button {
  min-height: 43px;
  padding: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.wardrobe-overview-ranking button:first-child { border-top: 0; }
.wardrobe-overview-ranking button:hover strong,
.wardrobe-overview-ranking button:focus-visible strong { color: var(--copper-accent); }
.wardrobe-overview-ranking button:focus-visible { outline: 1px solid var(--gold-accent); outline-offset: 3px; }
.wardrobe-overview-ranking span,
.wardrobe-combinations > div > span { color: var(--gold); font-family: "Playfair Display", serif; font-size: 13px; }
.wardrobe-overview-ranking div { min-width: 0; display: grid; gap: 2px; }
.wardrobe-overview-ranking strong { overflow: hidden; font-family: "Playfair Display", serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-overview-ranking small { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-overview-ranking b,
.wardrobe-combinations b { color: var(--copper-accent); font-size: 9px; }
.wardrobe-overview-ranking p,
.wardrobe-combinations p { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.wardrobe-combinations { display: grid; }
.wardrobe-combinations > div {
  min-height: 49px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 4px 9px;
  align-items: center;
  border-top: 1px solid var(--line);
}
.wardrobe-combinations > div:first-child { border-top: 0; }
.wardrobe-combinations strong { overflow: hidden; font-family: "Playfair Display", serif; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-combinations small { grid-column: 2 / -1; color: var(--ink-soft); font-size: 8px; }
.wardrobe-group { display: grid; gap: 12px; }
.wardrobe-heading { display: flex; align-items: end; justify-content: space-between; }
.wardrobe-heading h2 { margin: 5px 0 0; font-size: 23px; }
.wardrobe-heading > span { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wardrobe-card { min-height: 135px; padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.wardrobe-card:hover, .wardrobe-card:focus-visible { transform: translateY(-3px); border-color: var(--sage); box-shadow: var(--shadow); outline: 0; }
.wardrobe-symbol { color: var(--sage); font-size: 25px; }
.wardrobe-card div { margin-top: auto; }
.wardrobe-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 18px; }
.wardrobe-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.wardrobe-card b { margin-top: 12px; color: var(--sage); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.organist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.organist-card { min-height: 170px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.organist-card:hover, .organist-card:focus-visible { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow); outline: 0; }
.organist-initial { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e4eceb; color: var(--blue); font-family: "Playfair Display", serif; font-size: 21px; }
.organist-card div { margin-top: auto; }
.organist-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 21px; }
.organist-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.organist-card small { display: block; margin-top: 5px; color: var(--blue); font-size: 8px; }
.organist-card b { margin-top: 13px; color: var(--blue); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.conductor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.conductor-card { min-height: 170px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.conductor-card:hover, .conductor-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); outline: 0; }
.conductor-initial { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #f5ead5; color: var(--gold); font-family: "Playfair Display", serif; font-size: 21px; }
.conductor-card div { margin-top: auto; }
.conductor-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 21px; }
.conductor-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.conductor-card small { display: block; margin-top: 5px; color: var(--gold); font-size: 8px; }
.conductor-card b { margin-top: 13px; color: var(--gold); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.guest-artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guest-artist-card { min-height: 170px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.guest-artist-card:hover, .guest-artist-card:focus-visible { transform: translateY(-3px); border-color: var(--coral); box-shadow: var(--shadow); outline: 0; }
.guest-artist-initial { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #f4e4df; color: var(--coral); font-family: "Playfair Display", serif; font-size: 21px; }
.guest-artist-card div { margin-top: auto; }
.guest-artist-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 20px; }
.guest-artist-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.guest-artist-card small { display: block; margin-top: 5px; color: var(--coral); font-size: 8px; }
.guest-artist-card b { margin-top: 13px; color: var(--coral); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.library-image { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(23,50,45,.14); }
.wardrobe-card .library-image { width: 100%; height: 92px; border-radius: 3px; object-position: center; }
.venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.venue-card { min-height: 170px; padding: 20px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.venue-card:hover, .venue-card:focus-visible { transform: translateY(-3px); border-color: var(--coral); box-shadow: var(--shadow); outline: 0; }
.venue-symbol { color: var(--coral); font-size: 25px; }
.venue-card div { margin-top: auto; }
.venue-card h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 20px; }
.venue-card p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.venue-card small { display: block; margin-top: 5px; color: var(--coral); font-size: 8px; }
.venue-card b { margin-top: 13px; color: var(--coral); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.venue-feature-image { width: calc(100% + 40px); height: 105px; margin: -20px -20px 16px; object-fit: cover; }
.view.list-mode .repertoire-grid, .view.list-mode .album-grid, .view.list-mode .song-credit-grid, .view.list-mode .wardrobe-grid, .view.list-mode .organist-grid, .view.list-mode .conductor-grid, .view.list-mode .guest-artist-grid, .view.list-mode .venue-grid { grid-template-columns: 1fr; gap: 6px; }
.view.list-mode .repertoire-card, .view.list-mode .album-card, .view.list-mode .song-credit-card, .view.list-mode .wardrobe-card, .view.list-mode .organist-card, .view.list-mode .conductor-card, .view.list-mode .guest-artist-card, .view.list-mode .venue-card { min-height: 0; padding: 11px 14px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.view.list-mode .repertoire-card { grid-template-columns: 58px minmax(0, 1fr) 32px auto; }
.view.list-mode .repertoire-card > span, .view.list-mode .song-credit-card > span, .view.list-mode .wardrobe-card > span, .view.list-mode .organist-card > span, .view.list-mode .conductor-card > span, .view.list-mode .guest-artist-card > span, .view.list-mode .venue-card > span { grid-column: 1; grid-row: 1 / span 2; }
.view.list-mode .library-image { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; }
.view.list-mode .wardrobe-card .library-image { width: 50px; height: 50px; border-radius: 4px; }
.view.list-mode .venue-card .venue-feature-image { grid-column: 1; grid-row: 1 / span 2; width: 50px; height: 50px; margin: 0; border-radius: 4px; }
.view.list-mode .repertoire-card h3 { grid-column: 2; margin: 0 0 3px; }
.view.list-mode .repertoire-card p { grid-column: 2; }
.view.list-mode .repertoire-card b { grid-column: 4; grid-row: 1 / -1; align-self: center; justify-self: end; margin-top: 0; text-align: right; white-space: nowrap; }
.view.list-mode .repertoire-card .song-favorite { position: static; grid-column: 3; grid-row: 1 / -1; justify-self: center; margin: 0; }
.view.list-mode .album-card .album-cover, .view.list-mode .album-card .album-symbol { grid-column: 1; grid-row: 1; width: 48px; height: 48px; aspect-ratio: auto; font-size: 22px; }
.view.list-mode .album-card div, .view.list-mode .song-credit-card div, .view.list-mode .wardrobe-card div, .view.list-mode .organist-card div, .view.list-mode .conductor-card div, .view.list-mode .guest-artist-card div, .view.list-mode .venue-card div { grid-column: 2; margin-top: 0; }
.view.list-mode .album-card b, .view.list-mode .song-credit-card b, .view.list-mode .wardrobe-card b, .view.list-mode .organist-card b, .view.list-mode .conductor-card b, .view.list-mode .guest-artist-card b, .view.list-mode .venue-card b { grid-column: 3; grid-row: 1 / -1; align-self: center; justify-self: end; margin-top: 0; padding-top: 0; white-space: nowrap; text-align: right; }
.view.list-mode .wardrobe-group, .view.list-mode .song-credit-group { gap: 8px; }
.inline-detail-link { padding: 0; border: 0; background: transparent; color: var(--coral); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
dialog { width: min(680px, calc(100vw - 30px)); max-height: 92vh; padding: 0; border: 0; overflow: auto; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); }
#detail-dialog { overflow: hidden; }
dialog::backdrop { background: rgba(16,38,33,.62); backdrop-filter: blur(3px); }
dialog form, #detail-content { padding: 28px; }
#detail-content { max-height: 92vh; overflow-y: auto; }
.dialog-heading { display: flex; justify-content: space-between; margin-bottom: 24px; }
.dialog-heading h2 { margin: 5px 0 0; font-size: 30px; }
.close-button { border: 0; background: transparent; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.form-grid label.wide, .form-grid > .wide { grid-column: 1 / -1; }
.form-grid label small { letter-spacing: 0; text-transform: none; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 10px; border: 1px solid var(--line); background: white; color: var(--ink); font-size: 12px; }
.select-search-shell { position: relative; min-width: 0; }
.select-search-source { display: none !important; }
.form-grid .select-search { padding-left: 30px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7772' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 10px center; border-color: #d8d5ca; font-size: 11px; letter-spacing: 0; text-transform: none; }
.form-grid .select-search.has-selection { border-color: color-mix(in srgb, var(--green-primary) 45%, var(--line)); background-color: color-mix(in srgb, var(--gold-soft) 7%, white); color: var(--ink); font-weight: 600; }
.select-search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.select-search-results[hidden] { display: none; }
.select-search-results button {
  width: 100%;
  padding: 9px 11px;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.select-search-results button:hover, .select-search-results button.active { background: var(--cream); color: var(--ink); }
.select-search-results button:last-child { border-bottom: 0; }
.select-search-results .select-search-custom { position: sticky; bottom: 0; border-top: 1px solid var(--line-strong); background: color-mix(in srgb, var(--gold-soft) 13%, var(--paper)); color: var(--copper-accent); font-weight: 600; }
.select-search-results p { margin: 0; padding: 10px 11px; color: var(--ink-soft); font-size: 9px; letter-spacing: 0; text-transform: none; }
.form-grid textarea { min-height: 65px; resize: vertical; }
.image-upload-field small { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.image-upload-preview { width: 110px; height: 110px; border-radius: 5px; object-fit: cover; }
.custom-pick-input { display: none; }
.custom-pick-input.visible { display: block; border-color: var(--gold); background: #fffdf5; }
.performance-fields { padding: 14px; border: 1px solid var(--line); background: #faf8f1; }
.performance-fields.hidden { display: none; }
.performance-fields.recording-mode .form-grid > label:not(.song-picker-label) { display: none; }
.performance-field-note { margin: 0 0 13px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.song-picker-label { position: relative; }
.album-song-picker-label { position: relative; }
.song-picker-results { position: absolute; top: 63px; right: 0; left: 0; z-index: 3; display: grid; max-height: 230px; overflow-y: auto; background: white; box-shadow: var(--shadow); }
.song-picker-results:empty { display: none; }
.song-picker-results button { padding: 10px; display: grid; grid-template-columns: 60px 1fr; gap: 8px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; }
.song-picker-results button:hover { background: var(--cream); }
.song-picker-results strong { color: var(--gold); }
.song-picker-results span { color: var(--ink); text-transform: none; letter-spacing: 0; }
.selected-songs { display: grid; gap: 6px; min-height: 28px; }
.selected-songs > span { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.selected-album-songs { display: grid; gap: 5px; min-height: 30px; }
.selected-album-songs > span { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.selected-album-song { padding: 8px 9px; display: grid; grid-template-columns: 24px 58px minmax(0, 1fr) 26px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); color: var(--ink); font-size: 9px; letter-spacing: 0; text-transform: none; }
.selected-album-song > span { color: var(--ink-soft); font-size: 8px; }
.selected-album-song > strong { color: var(--gold); }
.selected-album-song > button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--coral); font-size: 16px; }
.selected-song-row { padding: 6px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(180px, .8fr) 28px; gap: 7px; align-items: center; border: 1px solid var(--line); background: var(--cream); }
.selected-song-name { min-width: 0; display: flex; gap: 6px; align-items: center; font-size: 9px; }
.selected-song-name strong { flex: 0 0 auto; color: var(--gold); }
.selected-song-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.song-conductor-control { display: grid; gap: 5px; }
.song-conductor-control select, .song-conductor-control input { width: 100%; padding: 7px; border: 1px solid var(--line); background: white; color: var(--ink); font-size: 10px; }
.song-conductor-control .select-search { padding-left: 27px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7772' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 9px center; }
.song-conductor-control .select-search-results button { width: 100%; height: auto; white-space: nowrap; }
.song-conductor-custom { display: none; }
.song-conductor-custom.visible { display: block; border-color: var(--gold); background: #fffdf5; }
.selected-song-row > button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--coral); font-size: 17px; }
.guest-artist-picker-label { position: relative; }
.selected-guest-artists { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.selected-guest-artists > span { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.selected-guest-artists button { padding: 6px 8px; display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-size: 9px; }
.selected-guest-artists button span { letter-spacing: 0; text-transform: none; }
.selected-guest-artists button i { color: var(--coral); font-style: normal; }
.song-tag-picker-label { position: relative; }
.selected-song-tags, .selected-song-credits, .song-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.selected-song-tags > span { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.selected-song-credits > span { color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.selected-song-tags button, .selected-song-credits button, .song-tags span { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--gold-accent) 25%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--gold-soft) 12%, var(--paper)); color: var(--ink); font-size: 9px; }
.selected-song-tags button, .selected-song-credits button { display: flex; gap: 6px; align-items: center; }
.selected-song-tags button span, .selected-song-credits button span { letter-spacing: 0; text-transform: none; }
.selected-song-tags button i, .selected-song-credits button i { color: var(--coral); font-style: normal; }
.song-tags { min-height: 0; }
.tag-manager-summary { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tag-manager-create {
  margin-bottom: 16px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(440px, 1.2fr);
  gap: 24px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,253,249,.78);
  box-shadow: 0 8px 25px rgba(18,48,40,.035);
}
.tag-manager-create h2 { margin: 7px 0 5px; font-size: 22px; }
.tag-manager-create p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.tag-manager-create form { display: grid; grid-template-columns: 1fr 170px auto; gap: 9px; align-items: end; }
.tag-manager-create label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 8px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.tag-manager-create input, .tag-manager-create select { width: 100%; height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); }
.tag-manager-filter { grid-template-columns: minmax(220px, 1fr) 170px 170px auto; }
.tag-manager-list { display: grid; gap: 12px; }
.tag-manager-card { padding: 18px; border: 1px solid rgba(34,70,60,.11); border-radius: var(--radius); background: rgba(255,253,249,.78); box-shadow: 0 8px 25px rgba(18,48,40,.035); }
.tag-manager-card.archived { background: rgba(244,240,232,.58); opacity: .78; }
.tag-manager-card-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.tag-manager-card-heading > div { display: grid; gap: 7px; }
.tag-manager-card-heading .song-tags span { padding: 7px 11px; font-size: 11px; font-weight: 600; }
.tag-manager-card-heading small { color: var(--ink-soft); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.tag-manager-card-heading > strong { color: var(--ink); font-family: "Playfair Display", serif; font-size: 25px; text-align: right; }
.tag-manager-card-heading > strong small { display: block; margin-top: 2px; font-family: "DM Sans", sans-serif; font-size: 8px; font-weight: 500; }
.tag-manager-linked { margin: 14px 0; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tag-manager-linked button { max-width: 240px; padding: 7px 9px; display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--cream); color: var(--ink); font-size: 9px; }
.tag-manager-linked button:hover { border-color: var(--gold); background: white; }
.tag-manager-linked button b { flex: 0 0 auto; color: var(--gold); }
.tag-manager-linked button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-manager-linked p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.tag-manager-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.tag-manager-actions button { min-height: 32px; padding: 7px 10px; font-size: 9px; }
.repertoire-filter { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; }
.detail-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 56px;
  margin: -28px -28px 0;
  padding: 9px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-bottom: 1px solid rgba(232,201,142,.22);
  background: rgba(255,253,249,.92);
  box-shadow: 0 8px 25px rgba(18,48,40,.08);
  backdrop-filter: blur(14px);
}
.detail-toolbar-close { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 23px; line-height: 1; }
.detail-toolbar-close:hover { border-color: var(--coral); color: var(--coral); transform: rotate(4deg); }
.detail-toolbar + .detail-hero { margin-top: 0; }
.detail-hero { margin: -28px -28px 24px; padding: 38px 28px; background: var(--ink); color: white; }
.detail-display-image { width: 82px; height: 82px; margin-bottom: 18px; border: 3px solid rgba(255,255,255,.35); border-radius: 50%; object-fit: cover; }
.wardrobe-detail-hero .detail-display-image { width: 125px; border-radius: 5px; }
.detail-hero h2 { margin: 8px 0; font-size: 34px; }
.detail-hero p { margin: 0; color: rgba(255,255,255,.65); font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-section {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid rgba(34,70,60,.11);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(246,242,235,.58));
  box-shadow: 0 7px 20px rgba(18,48,40,.035);
}
.detail-section h4 { margin: 0 0 8px; color: var(--gold); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.detail-section h4:not(:first-child) { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(34,70,60,.1); }
.detail-section p, .detail-section li { font-size: 11px; line-height: 1.6; }
.detail-section p { margin: 0; }
.detail-section p + p { margin-top: 9px; }
.detail-section ul { margin: 0; padding-left: 16px; }
.detail-section li + li { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(34,70,60,.08); }
.detail-section li small { display: block; margin-top: 1px; color: var(--ink-soft); }
.event-song-detail-link {
  width: 100%;
  padding: 2px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  align-items: baseline;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  text-align: left;
}
.event-song-detail-link strong { color: var(--ink); }
.event-song-detail-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-song-detail-link b { color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.event-song-detail-link:hover { color: var(--coral); }
.event-song-detail-link:hover b, .event-song-detail-link:focus-visible b { opacity: 1; transform: translateX(0); }
.song-detail-hero { background: linear-gradient(135deg, var(--ink), #315a51); }
.song-credit-detail-hero { background: linear-gradient(135deg, var(--ink), #7f6740); }
.wardrobe-detail-hero { background: linear-gradient(135deg, var(--ink), #607a58); }
.organist-detail-hero { background: linear-gradient(135deg, var(--ink), #557b82); }
.conductor-detail-hero { background: linear-gradient(135deg, var(--ink), #8b7040); }
.guest-artist-detail-hero { background: linear-gradient(135deg, var(--ink), #945d50); }
.venue-detail-hero { background: linear-gradient(135deg, var(--ink), #8b6559); }
.venue-detail-image { width: 150px; height: 92px; border-radius: 5px; object-fit: cover; }
.song-summary { margin-bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.song-summary div { padding: 15px; border-left: 1px solid var(--line); }
.song-summary div:first-child { border-left: 0; }
.song-summary strong, .song-summary span { display: block; }
.song-summary strong { font-family: "Playfair Display", serif; font-size: 25px; }
.song-summary span { margin-top: 3px; color: var(--ink-soft); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.singing-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--paper-rich); }
.singing-metric-grid div { padding: 14px; border-left: 1px solid var(--line); }
.singing-metric-grid div:first-child { border-left: 0; }
.singing-metric-grid strong, .singing-metric-grid span { display: block; }
.singing-metric-grid strong { font-family: "Playfair Display", serif; font-size: 22px; }
.singing-metric-grid span { margin-top: 3px; color: var(--ink-soft); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.song-history { max-height: 330px; overflow-y: auto; padding-right: 8px; }
.song-date-row { display: grid; grid-template-columns: 115px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.song-date-row time { color: var(--coral); font-size: 10px; font-weight: 600; }
.song-date-row div { display: grid; gap: 5px; }
.song-date-row button { padding: 0; border: 0; background: transparent; text-align: left; }
.song-date-row button:hover strong { color: var(--coral); }
.song-date-row strong, .song-date-row span { display: block; }
.song-date-row strong { font-size: 10px; }
.song-date-row span { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.import-instructions { padding: 15px; background: var(--cream); font-size: 11px; line-height: 1.6; }
.import-instructions code { display: block; padding: 8px; overflow-x: auto; background: var(--paper); color: var(--coral); }
.storage-status-card { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-rich); }
.storage-status-card strong { font-family: "Playfair Display", serif; font-size: 18px; }
.storage-status-card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.storage-status-card p + p { padding-top: 7px; border-top: 1px solid var(--line); }
.storage-warning { margin-bottom: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--copper-warning) 28%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--copper-warning) 7%, var(--paper)); }
.storage-warning strong { color: var(--copper-warning); font-family: "Playfair Display", serif; font-size: 16px; }
.storage-warning p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.backup-actions { display: grid; gap: 10px; }
.backup-actions button { justify-content: center; }
.backup-actions .file-drop { margin-top: 2px; }
.hero-image-preview { min-height: 190px; border-radius: 9px; background: linear-gradient(90deg, rgba(5,45,38,.96), rgba(5,45,38,.2)), var(--hero-image, url("assets/dashboard-hero-banner.png")) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(34,70,60,.12); }
.muted { color: var(--ink-soft); }
.file-drop { margin-top: 18px; padding: 25px; display: grid; place-items: center; gap: 8px; border: 1px dashed var(--gold); color: var(--gold); font-size: 12px; }
.file-drop input { max-width: 220px; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 20; padding: 12px 16px; background: var(--ink); color: white; box-shadow: var(--shadow); font-size: 11px; transform: translateY(100px); opacity: 0; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }
.empty-state { padding: 35px; color: var(--ink-soft); text-align: center; font-size: 12px; }

@media (max-width: 1050px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-pulse { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .people-panel, .milestone-panel { grid-column: auto; }
  .people-highlights { grid-template-columns: repeat(2, 1fr); }
  .repertoire-grid { grid-template-columns: repeat(2, 1fr); }
  .album-grid { grid-template-columns: repeat(2, 1fr); }
  .album-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .album-insight-grid { grid-template-columns: 1fr; }
  .song-insight-grid { grid-template-columns: 1fr; }
  .event-insight-grid { grid-template-columns: 1fr; }
  .event-time-section { grid-template-columns: 1fr; }
  .wardrobe-insight-grid { grid-template-columns: 1fr; }
  .song-credit-grid { grid-template-columns: repeat(2, 1fr); }
  .wardrobe-grid { grid-template-columns: repeat(2, 1fr); }
  .organist-grid { grid-template-columns: repeat(2, 1fr); }
  .conductor-grid { grid-template-columns: repeat(2, 1fr); }
  .guest-artist-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-summary { grid-template-columns: repeat(2, 1fr); }
  .audit-score-card { grid-column: 1 / -1; grid-row: auto; }
  .audit-row { grid-template-columns: 65px 1fr auto; }
  .audit-issues { grid-column: 2; }
  .audit-actions { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .singing-metric-grid { grid-template-columns: 1fr 1fr; }
  .singing-metric-grid div:nth-child(3) { border-left: 0; }
  .singing-metric-grid div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: .2s; }
  .sidebar.open { transform: translateX(0); }
  main { display: block; }
  .topbar { height: 65px; padding: 0 18px; }
  .mobile-menu { display: block; }
  .search-wrap { width: 46%; }
  .search-wrap kbd, .sample-label, .save-status-badge, .access-role-badge { display: none; }
  .view { padding: 0 16px 30px; }
  .page-heading { align-items: start; flex-direction: column; gap: 14px; }
  .page-heading-actions { width: 100%; justify-content: space-between; }
  .hero { min-height: 195px; }
  .stat-grid, .repertoire-grid, .album-grid, .song-credit-grid, .wardrobe-grid, .organist-grid, .conductor-grid, .guest-artist-grid, .venue-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 130px; }
  .song-list { grid-template-columns: 1fr; }
  .song-row:nth-child(2) { border-top: 1px solid var(--line); }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar input { min-width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide, .form-grid > .wide { grid-column: auto; }
  .selected-song-row { grid-template-columns: 1fr 28px; }
  .song-conductor-control { grid-column: 1 / -1; grid-row: 2; }
  .song-date-row { grid-template-columns: 1fr; }
  .display-toggle span { display: none; }
  .album-repertoire-row { grid-template-columns: 28px 52px minmax(0, 1fr) 18px; }
  .album-track-activity { display: none; }
  .audit-summary { grid-template-columns: 1fr; }
  .audit-score-card { align-items: start; flex-direction: column; }
  .audit-row { grid-template-columns: 60px 1fr; }
  .audit-issues, .audit-actions { grid-column: 1 / -1; }
  .audit-actions { grid-row: auto; justify-content: flex-end; }
  .event-time-summary { grid-template-columns: 1fr; }
  .event-audit-heading { align-items: start; flex-direction: column; gap: 8px; }
  .event-audit-summary { grid-template-columns: 1fr; }
  .seat-coordinate-fields { grid-template-columns: 1fr; }
  .seating-field-heading { align-items: start; flex-direction: column; }
  .seating-history > button { grid-template-columns: 1fr auto; }
  .seating-history time { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .topbar .primary-button { padding: 10px; font-size: 0; }
  .topbar .primary-button span { font-size: 16px; }
  .archive-highlights, .people-highlights { grid-template-columns: 1fr; }
  .milestone-panel { align-items: start; flex-direction: column; }
  .stat-grid, .repertoire-grid, .album-grid, .song-credit-grid, .wardrobe-grid, .organist-grid, .conductor-grid, .guest-artist-grid, .venue-grid { grid-template-columns: 1fr; }
  .album-stat-grid { grid-template-columns: 1fr; }
  .event-time-totals { grid-template-columns: 1fr; }
  .event-time-totals div { border-top: 1px solid rgba(255,248,237,.14); border-left: 0; }
  .event-time-totals div:first-child { border-top: 0; }
  .event-time-type-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .event-time-type-list i { grid-column: 1 / -1; grid-row: 2; }
  .album-detail-hero { min-height: 0; padding-left: 0; }
  .album-detail-hero .detail-display-image, .album-detail-symbol { position: static; width: 110px; height: 110px; margin-bottom: 15px; }
  .donut-wrap { flex-direction: column; }
  .view.list-mode .repertoire-card, .view.list-mode .album-card, .view.list-mode .song-credit-card, .view.list-mode .wardrobe-card, .view.list-mode .organist-card, .view.list-mode .conductor-card, .view.list-mode .guest-artist-card, .view.list-mode .venue-card { grid-template-columns: 48px minmax(0, 1fr); }
  .view.list-mode .repertoire-card b, .view.list-mode .album-card b, .view.list-mode .song-credit-card b, .view.list-mode .wardrobe-card b, .view.list-mode .organist-card b, .view.list-mode .conductor-card b, .view.list-mode .guest-artist-card b, .view.list-mode .venue-card b { display: none; }
  .view.list-mode .repertoire-card { grid-template-columns: 48px minmax(0, 1fr) 32px; }
  .view.list-mode .repertoire-card .song-favorite { grid-column: 3; }
}

/* Premium visual system */
:root {
  /* TabTracker brand colors */
  --tt-green-950: #073f36;
  --tt-green-900: #06483d;
  --tt-green-850: #0a4f43;
  --tt-green-800: #115b4d;
  --tt-green-700: #1d6a59;
  --tt-green-600: #2f7a67;
  --tt-ivory-50: #fbf8f0;
  --tt-ivory-100: #f7f1e7;
  --tt-ivory-150: #f3ecdf;
  --tt-ivory-200: #e9dfcf;
  --tt-ivory-300: #ded2bf;
  --tt-surface: #fffdf8;
  --tt-surface-warm: #fbf7ef;
  --tt-surface-muted: #f4eee4;
  --tt-gold-600: #a97926;
  --tt-gold-500: #c7943d;
  --tt-gold-400: #d8ad5b;
  --tt-gold-300: #e8c982;
  --tt-copper-600: #a84732;
  --tt-copper-500: #c75f42;
  --tt-copper-400: #d9785c;
  --tt-ink: #073f36;
  --tt-ink-soft: #244f46;
  --tt-muted: #60756f;
  --tt-muted-light: #84948f;
  --tt-on-dark: #fff8ed;
  --tt-on-dark-muted: rgba(255, 248, 237, .74);
  --tt-border: rgba(92, 75, 50, .16);
  --tt-border-strong: rgba(92, 75, 50, .28);
  --tt-border-gold: rgba(199, 148, 61, .42);
  --tt-border-green: rgba(7, 63, 54, .18);

  /* TabTracker elevation, shape, and motion */
  --tt-shadow-soft: 0 10px 24px rgba(20, 35, 30, .07);
  --tt-shadow-card: 0 14px 36px rgba(20, 35, 30, .09);
  --tt-shadow-lift: 0 18px 44px rgba(20, 35, 30, .13);
  --tt-radius-sm: .5rem;
  --tt-radius-md: .875rem;
  --tt-radius-lg: 1.375rem;
  --tt-radius-xl: 1.875rem;
  --tt-radius-pill: 999px;
  --tt-transition-fast: 120ms ease;
  --tt-transition-med: 180ms ease;

  /* Existing component tokens mapped to the approved brand system */
  --green-primary: var(--tt-green-900);
  --green-deep: var(--tt-green-950);
  --green-hover: var(--tt-green-800);
  --ivory-page: var(--tt-ivory-100);
  --ivory-card: var(--tt-surface);
  --ivory-soft: var(--tt-surface-warm);
  --gold-accent: var(--tt-gold-500);
  --gold-soft: var(--tt-gold-300);
  --copper-accent: var(--tt-copper-500);
  --copper-warning: var(--tt-copper-600);
  --text-muted: var(--tt-muted);
  --border-warm: var(--tt-border);
  --border-warm-strong: var(--tt-border-strong);
  --surface-card: color-mix(in srgb, var(--tt-surface) 84%, transparent);
  --surface-card-soft: color-mix(in srgb, var(--tt-surface) 72%, transparent);
  --surface-filter: color-mix(in srgb, var(--tt-surface) 78%, transparent);
  --shadow-card: var(--tt-shadow-soft);
  --shadow-card-hover: var(--tt-shadow-card);
  --shadow-modal: 0 30px 85px rgba(7, 38, 32, .28);
  --radius-card: var(--tt-radius-lg);
  --radius-control: var(--tt-radius-sm);
  --radius-modal: var(--tt-radius-xl);

  /* Legacy aliases retained for existing components */
  --ink: var(--green-primary);
  --ink-deep: var(--green-deep);
  --ink-soft: var(--text-muted);
  --cream: var(--ivory-page);
  --paper: var(--ivory-card);
  --paper-rich: var(--ivory-soft);
  --line: var(--border-warm);
  --line-strong: var(--border-warm-strong);
  --gold: var(--gold-accent);
  --gold-light: var(--gold-soft);
  --gold-pale: var(--tt-gold-300);
  --coral: var(--copper-accent);
  --blue: var(--tt-green-600);
  --sage: var(--tt-green-700);
  --shadow: var(--shadow-card);
  --shadow-hover: var(--shadow-card-hover);
  --radius: var(--radius-card);
  --radius-small: var(--radius-control);
}

body {
  background:
    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--gold-accent) 8%, transparent), transparent 25rem),
    linear-gradient(135deg, var(--ivory-card) 0%, var(--ivory-page) 100%);
  font-size: 14px;
  letter-spacing: -.005em;
}
button, input, select, textarea { transition: border-color var(--tt-transition-med), background-color var(--tt-transition-med), color var(--tt-transition-med), box-shadow var(--tt-transition-med), transform var(--tt-transition-med); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold-accent) 55%, transparent);
  outline-offset: 2px;
}
.app-shell { grid-template-columns: 264px 1fr; }
main { grid-column: 2; position: relative; }
main::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 264px;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-accent) 55%, transparent), transparent);
}
.sidebar {
  width: 264px;
  padding: 28px 20px 24px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--gold-soft) 12%, transparent), transparent 18rem),
    linear-gradient(165deg, var(--green-hover) 0%, var(--green-primary) 55%, var(--green-deep) 100%);
  box-shadow: 12px 0 50px rgba(7, 38, 32, .12);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(transparent 4%, rgba(232,201,142,.3) 20%, rgba(232,201,142,.08) 80%, transparent);
}
.brand { padding: 2px 5px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 50px; height: 50px; border-radius: 12px; }
.brand strong { font-size: 23px; letter-spacing: -.025em; }
.brand small { max-width: 145px; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .06em; }
.main-nav { margin-top: 20px; gap: 16px; }
.nav-group { gap: 2px; }
.nav-group-home { margin-bottom: 1px; }
.nav-group-label { padding: 0 13px 4px; color: rgba(232,201,142,.48); }
.nav-item { position: relative; padding: 8px 13px; border-radius: 9px; font-size: 12px; font-weight: 500; letter-spacing: .01em; }
.nav-item::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
}
.nav-item:hover { background: rgba(255,255,255,.065); transform: translateX(2px); }
.nav-item.active { background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); box-shadow: inset 2px 0 var(--gold-light); }
.nav-item.active::after { opacity: .85; }
.nav-icon { color: var(--gold-light); opacity: .8; }
.sidebar-note { margin-top: 20px; padding: 15px 5px; }
.sidebar-note p { font-size: 15px; }
.progress-track { height: 2px; border-radius: 10px; overflow: hidden; }
.progress-track span { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.sidebar-actions { padding: 1px 0 0; }
.text-button { border-radius: 7px; letter-spacing: .035em; }
.text-button:hover { background: rgba(255,255,255,.045); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 82px;
  padding: 0 48px;
  border-bottom-color: rgba(34,70,60,.1);
  background: rgba(246,242,235,.82);
  backdrop-filter: blur(18px) saturate(130%);
}
.search-wrap {
  position: relative;
  width: min(430px, 42vw);
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: rgba(255,255,255,.52);
}
.global-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(640px, calc(100vw - 32px));
  max-height: min(72vh, 680px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-warm-strong);
  border-radius: var(--tt-radius-lg);
  background: color-mix(in srgb, var(--tt-surface) 97%, var(--tt-gold-300));
  box-shadow: var(--tt-shadow-lift);
  color: var(--ink);
  scrollbar-color: color-mix(in srgb, var(--tt-green-900) 34%, transparent) transparent;
  scrollbar-width: thin;
}
.global-search-panel[hidden] { display: none; }
.global-search-intro, .global-search-empty { padding: 22px; }
.global-search-intro strong, .global-search-empty strong { display: block; margin: 8px 0 5px; font-family: var(--font-display); font-size: 19px; }
.global-search-intro p, .global-search-empty p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.global-search-intro small { margin-top: 18px; display: flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 8px; }
.global-search-intro kbd { padding: 2px 5px; border-color: var(--line); background: var(--tt-surface-warm); }
.global-search-group + .global-search-group { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.global-search-group > div { padding: 7px 9px 5px; display: flex; justify-content: space-between; color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.global-search-group > div small { color: var(--ink-soft); font-size: inherit; }
.global-search-group button {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.global-search-group button:hover, .global-search-group button.active {
  border-color: color-mix(in srgb, var(--gold-accent) 28%, transparent);
  background: var(--tt-surface-warm);
}
.global-search-group button i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--gold-soft) 22%, var(--tt-surface)); color: var(--gold); font-family: var(--font-display); font-size: 13px; font-style: normal; }
.global-search-group button span { min-width: 0; }
.global-search-group button strong, .global-search-group button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-group button strong { font-size: 10px; }
.global-search-group button small { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.global-search-group button b { color: var(--copper-accent); opacity: 0; transition: opacity var(--tt-transition-fast), transform var(--tt-transition-fast); transform: translateX(-3px); }
.global-search-group button:hover b, .global-search-group button.active b { opacity: 1; transform: translateX(0); }
.search-wrap:focus-within { border-color: rgba(191,135,50,.36); background: var(--paper); box-shadow: 0 8px 25px rgba(18,48,40,.07); }
.search-wrap input { font-size: 11px; }
kbd { border-color: transparent; border-radius: 6px; background: rgba(11,66,54,.06); }
.sample-label { padding: 7px 11px; border-color: color-mix(in srgb, var(--tt-gold-500) 27%, transparent); background: color-mix(in srgb, var(--tt-surface) 45%, transparent); color: var(--tt-gold-600); }
.primary-button, .secondary-button { border-radius: 8px; padding: 11px 17px; letter-spacing: .015em; }
.primary-button { background: linear-gradient(135deg, var(--green-primary), var(--green-deep)); box-shadow: 0 8px 22px rgba(7,53,45,.2); }
.primary-button:hover { background: linear-gradient(135deg, var(--green-hover), var(--green-primary)); box-shadow: 0 12px 28px rgba(7,53,45,.25); transform: translateY(-1px); }
.secondary-button { border-color: var(--line-strong); background: rgba(255,255,255,.35); }
.secondary-button:hover { border-color: rgba(191,135,50,.5); background: var(--paper); transform: translateY(-1px); }
.view { padding: 0 48px 64px; }

.hero {
  position: relative;
  min-height: 300px;
  margin-top: 18px;
  padding: 56px 42px 40px;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(5,45,38,.96) 0%, rgba(5,45,38,.82) 42%, rgba(5,45,38,.17) 78%),
    linear-gradient(0deg, rgba(5,45,38,.34), rgba(5,45,38,.04)),
    var(--hero-image, url("assets/dashboard-hero-banner.png")) center 43% / cover no-repeat;
  box-shadow: 0 18px 45px rgba(11,54,46,.14);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 72%, rgba(5,45,38,.28));
}
.hero .hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero-image-button { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 8px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; background: rgba(5,45,38,.48); color: rgba(255,255,255,.88); font-size: 8px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(10px); }
.hero-image-button:hover { border-color: rgba(232,201,142,.7); background: rgba(5,45,38,.72); color: white; }
.hero .eyebrow { color: var(--gold-pale); }
.hero h1 { color: white; text-shadow: 0 2px 24px rgba(0,0,0,.2); }
.hero h1 em { color: var(--tt-copper-400); }
.hero p { max-width: 580px; color: rgba(255,255,255,.8); text-shadow: 0 1px 8px rgba(0,0,0,.2); }
.eyebrow { color: var(--gold); font-size: 8px; letter-spacing: .24em; }
h1 { margin: 11px 0 14px; font-size: clamp(48px, 5.2vw, 76px); letter-spacing: -.05em; }
h1 em { color: var(--coral); }
.hero p, .page-heading p { font-size: 12px; line-height: 1.7; }

.stat-grid, .dashboard-pulse, .dashboard-grid { gap: 16px; }
.stat-card, .panel, .pulse-chart-panel, .pulse-intro {
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-card {
  min-height: 156px;
  padding: 20px;
  border-color: rgba(34,70,60,.11);
  background: rgba(255,253,249,.72);
  box-shadow: 0 8px 28px rgba(18,48,40,.035);
}
.stat-card:not(.featured):hover { border-color: rgba(191,135,50,.3); background: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card.featured {
  border-color: color-mix(in srgb, var(--gold-soft) 20%, transparent);
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--gold-soft) 15%, transparent), transparent 45%), linear-gradient(145deg, var(--green-hover), var(--green-deep));
  box-shadow: 0 18px 40px rgba(7,53,45,.16);
}
.stat-label { font-size: 8px; letter-spacing: .16em; }
.stat-card strong { margin-top: 18px; font-size: 44px; }
.dashboard-pulse, .dashboard-grid { margin-top: 16px; }
.pulse-intro {
  padding: 32px;
  background: radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--gold-soft) 16%, transparent), transparent 50%), linear-gradient(145deg, var(--green-hover), var(--green-deep));
}
.pulse-chart-panel, .panel { padding: 27px; border-color: rgba(34,70,60,.11); background: rgba(255,253,249,.78); box-shadow: 0 10px 32px rgba(18,48,40,.045); }
.panel:hover { border-color: rgba(34,70,60,.18); }
.panel-heading h2 { margin-top: 7px; font-size: 23px; letter-spacing: -.025em; }
.link-button { color: var(--copper-accent); font-weight: 600; letter-spacing: .11em; }
.link-button:hover { color: var(--ink); transform: translateX(2px); }
.event-row { padding: 15px 4px; border-color: rgba(34,70,60,.1); border-radius: 7px; }
.event-row:hover { padding-right: 8px; padding-left: 8px; background: rgba(244,240,232,.65); }
.event-tag, .song-count { border-radius: 99px; }
.archive-highlights button, .people-highlights button { border-radius: var(--radius-small); }
.archive-highlights button { background: linear-gradient(145deg, rgba(244,240,232,.8), rgba(255,253,249,.8)); }
.people-highlights button { border-top-width: 1px; box-shadow: inset 0 3px var(--gold); }
.milestone-panel { background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.12), transparent 30%), linear-gradient(135deg, var(--tt-copper-500), var(--tt-copper-600)); }

.page-heading { min-height: 210px; padding: 54px 4px 31px; border-bottom: 1px solid rgba(191,135,50,.2); }
.page-heading h1 { margin-bottom: 12px; font-size: 57px; }
.filter-bar, .archive-table-wrap, .display-toggle { border-radius: var(--radius-small); }
.filter-bar { margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); background: rgba(255,253,249,.7); box-shadow: 0 6px 22px rgba(18,48,40,.035); }
.filter-bar input, .filter-bar select, .form-grid input, .form-grid select, .form-grid textarea {
  border-color: var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.72);
}
.filter-bar input:focus, .filter-bar select:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: rgba(191,135,50,.55); background: white; box-shadow: 0 0 0 3px rgba(191,135,50,.08); }
.archive-mode button:first-child { border-radius: 8px 0 0 8px; }
.archive-mode button:last-child { border-radius: 0 8px 8px 0; }
.archive-mode button.active { background: linear-gradient(135deg, var(--green-primary), var(--green-deep)); }
.archive-table-wrap { border-color: var(--line); box-shadow: 0 12px 35px rgba(18,48,40,.045); }
.archive-table { background: rgba(255,253,249,.82); }
.archive-table tbody tr:hover { background: rgba(244,240,232,.72); }

.repertoire-grid, .album-grid, .song-credit-grid, .wardrobe-grid, .organist-grid, .conductor-grid, .guest-artist-grid, .venue-grid { gap: 16px; }
.repertoire-card, .album-card, .song-credit-card, .wardrobe-card, .organist-card, .conductor-card, .guest-artist-card, .venue-card {
  position: relative;
  border-color: rgba(34,70,60,.11);
  border-radius: var(--radius);
  background: rgba(255,253,249,.76);
  box-shadow: 0 8px 25px rgba(18,48,40,.035);
}
.repertoire-card::after, .song-credit-card::after, .wardrobe-card::after, .organist-card::after, .conductor-card::after, .guest-artist-card::after, .venue-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 2px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.repertoire-card:hover::after, .song-credit-card:hover::after, .wardrobe-card:hover::after, .organist-card:hover::after, .conductor-card:hover::after, .guest-artist-card:hover::after, .venue-card:hover::after { opacity: .75; }
.repertoire-card:hover, .album-card:hover, .song-credit-card:hover, .wardrobe-card:hover, .organist-card:hover, .conductor-card:hover, .guest-artist-card:hover, .venue-card:hover { transform: translateY(-5px); border-color: rgba(191,135,50,.34); box-shadow: var(--shadow-hover); }
.album-card { padding: 12px; }
.album-cover, .album-symbol { border-radius: 9px; }
.library-image { border: 2px solid rgba(255,255,255,.75); box-shadow: 0 8px 18px rgba(18,48,40,.14); }
.wardrobe-card .library-image { height: 108px; border-radius: 8px; }
.organist-initial, .conductor-initial, .guest-artist-initial { width: 47px; height: 47px; border: 1px solid rgba(191,135,50,.14); }

dialog { border: 1px solid rgba(232,201,142,.28); border-radius: 17px; box-shadow: 0 35px 100px rgba(7,38,32,.32); }
dialog::backdrop { background: rgba(6,35,29,.67); backdrop-filter: blur(8px); }
dialog form .dialog-heading {
  position: sticky;
  top: -28px;
  z-index: 8;
  margin: -28px -28px 24px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,249,.94);
  box-shadow: 0 8px 24px rgba(18,48,40,.05);
  backdrop-filter: blur(14px);
}
dialog form > .dialog-actions {
  position: sticky;
  bottom: -28px;
  z-index: 8;
  margin: 22px -28px -28px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: rgba(255,253,249,.95);
  box-shadow: 0 -8px 24px rgba(18,48,40,.05);
  backdrop-filter: blur(14px);
}
.detail-hero { position: relative; overflow: hidden; }
.detail-hero::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(232,201,142,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(232,201,142,.035), 0 0 0 70px rgba(232,201,142,.025);
}
.song-summary { overflow: hidden; border-radius: 10px; background: var(--paper-rich); }
.song-date-row { border-color: rgba(34,70,60,.1); }
.toast { border: 1px solid color-mix(in srgb, var(--gold-soft) 30%, transparent); border-radius: var(--radius-control); background: linear-gradient(135deg, var(--green-primary), var(--green-deep)); }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(255,253,249,.45); }

/* Archive refinement: restrained editorial hierarchy and calmer surfaces. */
.sidebar {
  padding: 25px 20px;
  border-right: 1px solid rgba(232,201,142,.13);
  background:
    radial-gradient(circle at 15% 0, rgba(232,201,142,.09), transparent 25%),
    linear-gradient(180deg, var(--tt-green-850), var(--tt-green-950) 72%, var(--tt-green-950));
}
.brand { gap: 13px; padding: 2px 3px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 46px; height: 46px; border-radius: 11px; }
.brand strong { font-size: 20px; letter-spacing: -.02em; }
.brand small { margin-top: 4px; font-size: 8px; line-height: 1.35; letter-spacing: .055em; }
.main-nav { margin-top: 27px; gap: 15px; }
.nav-group { gap: 2px; }
.nav-group-label { padding: 0 12px 5px; color: rgba(255,255,255,.43); letter-spacing: .19em; }
.nav-item { min-height: 39px; padding: 10px 12px; border-radius: 7px; font-size: 11px; transition: background .16s, color .16s; }
.nav-item:hover { transform: none; }
.nav-item.active { background: rgba(255,255,255,.1); box-shadow: inset 2px 0 var(--gold-light); }
.nav-icon { width: 23px; font-size: 15px; }
.text-button { padding-top: 6px; padding-bottom: 6px; font-size: 9px; }

.topbar { height: 76px; padding: 0 48px; background: rgba(246,242,235,.94); backdrop-filter: blur(12px); }
.search-wrap { padding: 9px 13px; border-color: var(--border-warm); background: var(--surface-card-soft); }
.search-wrap:focus-within { border-color: color-mix(in srgb, var(--gold-accent) 38%, transparent); box-shadow: var(--shadow-card); }
.sample-label { background: transparent; }
.primary-button, .secondary-button { transition: border-color .16s, background .16s, color .16s, box-shadow .16s; }
.primary-button:hover, .secondary-button:hover { transform: none; }
.primary-button { box-shadow: 0 6px 16px rgba(7,53,45,.17); }

.hero { min-height: 285px; box-shadow: 0 16px 38px rgba(11,54,46,.12); }
.stat-grid, .dashboard-pulse, .dashboard-grid { gap: 14px; }
.stat-card, .pulse-chart-panel, .panel {
  border-color: var(--border-warm);
  background-color: var(--surface-card-soft);
  box-shadow: var(--shadow-card);
}
.stat-card:not(.featured):hover { transform: none; box-shadow: var(--shadow-card-hover); }
.panel { padding: 25px; }
.panel:hover { border-color: color-mix(in srgb, var(--gold-accent) 24%, transparent); }
.panel-heading { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-warm); }
.pulse-chart-panel .panel-heading { padding-bottom: 0; border-bottom: 0; }
.event-row:hover { padding-right: 4px; padding-left: 4px; background: rgba(244,240,232,.55); }

.page-heading {
  position: relative;
  min-height: 195px;
  padding: 48px 3px 27px;
  border-bottom-color: color-mix(in srgb, var(--gold-accent) 24%, transparent);
}
.page-heading::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 3px;
  width: 68px;
  height: 2px;
  background: var(--gold);
}
.page-heading h1 { margin-top: 9px; margin-bottom: 9px; font-size: 54px; line-height: 1; }
.page-heading p { max-width: 620px; margin-bottom: 0; }
.page-heading-actions { align-self: end; padding-bottom: 2px; }
.archive-mode { margin-top: 18px; margin-bottom: 10px; }
.archive-mode button { padding: 8px 13px; border-color: var(--border-warm); }
.filter-bar {
  gap: 8px;
  padding: 9px;
  border-color: var(--border-warm);
  background: var(--surface-filter);
  box-shadow: var(--shadow-card);
}
.filter-bar input, .filter-bar select { min-height: 34px; border-color: var(--border-warm); }
.archive-table-wrap { border-color: var(--border-warm); box-shadow: var(--shadow-card); }
.archive-table th { background: color-mix(in srgb, var(--ivory-page) 80%, transparent); color: var(--text-muted); }
.archive-table th, .archive-table td { padding-top: 13px; padding-bottom: 13px; border-bottom-color: var(--border-warm); }
.archive-table tbody tr:hover { background: rgba(247,243,235,.78); }

.repertoire-grid, .album-grid, .song-credit-grid, .wardrobe-grid, .organist-grid, .conductor-grid, .guest-artist-grid, .venue-grid { gap: 13px; }
.repertoire-card, .album-card, .song-credit-card, .wardrobe-card, .organist-card, .conductor-card, .guest-artist-card, .venue-card {
  border-color: var(--border-warm);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.repertoire-card:hover, .album-card:hover, .song-credit-card:hover, .wardrobe-card:hover, .organist-card:hover, .conductor-card:hover, .guest-artist-card:hover, .venue-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold-accent) 38%, transparent);
  box-shadow: var(--shadow-card-hover);
}
.repertoire-card::after, .song-credit-card::after, .wardrobe-card::after, .organist-card::after, .conductor-card::after, .guest-artist-card::after, .venue-card::after { display: none; }
.repertoire-card h3, .album-card h3, .song-credit-card h3, .wardrobe-card h3, .organist-card h3, .conductor-card h3, .guest-artist-card h3, .venue-card h3 { letter-spacing: -.015em; }
.album-card { padding: 13px; }
.album-cover, .album-symbol { border-radius: 7px; }
.album-card div { margin-top: 14px; }
.album-card b, .repertoire-card b, .song-credit-card b, .wardrobe-card b, .organist-card b, .conductor-card b, .guest-artist-card b, .venue-card b { color: var(--copper-accent); }
.view.list-mode .repertoire-card, .view.list-mode .album-card, .view.list-mode .song-credit-card, .view.list-mode .wardrobe-card, .view.list-mode .organist-card, .view.list-mode .conductor-card, .view.list-mode .guest-artist-card, .view.list-mode .venue-card {
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: none;
}

dialog { border-color: color-mix(in srgb, var(--gold-accent) 24%, transparent); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); }
dialog::backdrop { background: rgba(6,35,29,.63); backdrop-filter: blur(5px); }
dialog form .dialog-heading { box-shadow: 0 5px 16px rgba(18,48,40,.035); }
dialog form > .dialog-actions { box-shadow: 0 -5px 16px rgba(18,48,40,.035); }
.detail-toolbar { box-shadow: 0 5px 18px rgba(18,48,40,.055); backdrop-filter: blur(10px); }
.detail-hero { padding-top: 34px; padding-bottom: 34px; }
.detail-hero::after { opacity: .65; }
.song-summary { margin-bottom: 18px; border-color: var(--border-warm); background: color-mix(in srgb, var(--ivory-soft) 82%, transparent); }
.detail-grid { gap: 11px; }
.detail-section {
  padding: 16px 17px;
  border-color: var(--border-warm);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--ivory-card) 76%, transparent);
  box-shadow: none;
}
.detail-section h4 { letter-spacing: .18em; }
.song-date-row { padding: 12px 0; }
.empty-state { padding: 42px 30px; }

@media (max-width: 760px) {
  main::before { left: 0; }
  .topbar { padding: 0 18px; }
  .view { padding-right: 16px; padding-left: 16px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-section[style*="grid-column"] { grid-column: auto !important; }
  .hero { min-height: 255px; margin-top: 14px; padding: 38px 26px; background-position: 58% center; }
  .hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .page-heading { min-height: 180px; padding-top: 36px; }
  .page-heading h1 { font-size: 46px; }
}

/* Composed page shells: centered desktop widths with an 8px-based rhythm. */
:root {
  --tt-space-1: .25rem;
  --tt-space-2: .5rem;
  --tt-space-3: .75rem;
  --tt-space-4: 1rem;
  --tt-space-5: 1.5rem;
  --tt-space-6: 2rem;
  --tt-space-7: 3rem;
  --tt-space-8: 4rem;
  --tt-space-9: 6rem;
  --space-1: var(--tt-space-2);
  --space-2: var(--tt-space-4);
  --space-3: var(--tt-space-5);
  --space-4: var(--tt-space-6);
  --space-6: var(--tt-space-7);
  --page-spacing: var(--space-6);
  --section-spacing: var(--space-3);
  --section-spacing-large: var(--space-4);
  --dashboard-shell: 1440px;
  --archive-shell: 1280px;
}
.view {
  width: 100%;
  max-width: var(--archive-shell);
  margin-right: auto;
  margin-left: auto;
  padding: 0 var(--page-spacing) 64px;
}
#dashboard-view { max-width: var(--dashboard-shell); }
#dashboard-view .hero + .stat-grid { margin-top: var(--space-3); }
.view:not(#dashboard-view) > .page-heading { margin-bottom: var(--section-spacing); }
.view:not(#dashboard-view) > .page-heading + .archive-mode { margin-top: 0; }
.archive-mode { margin-bottom: var(--space-2); }
.filter-bar { margin-bottom: var(--space-2); }
.song-credit-filter { justify-content: flex-end; }
.song-credit-filter select { min-width: 220px; }
.archive-table-wrap { width: 100%; }
.song-credit-sections, .wardrobe-sections { gap: var(--section-spacing-large); }
.repertoire-grid, .album-grid, .song-credit-grid, .wardrobe-grid, .organist-grid, .conductor-grid, .guest-artist-grid, .venue-grid { row-gap: var(--space-2); }
dialog { width: min(720px, calc(100vw - 32px)); }
#detail-dialog { width: min(760px, calc(100vw - 32px)); }
.detail-grid { gap: var(--space-2); }
.detail-section { padding: var(--space-2); }

@media (max-width: 1050px) {
  .view { max-width: none; padding-right: var(--space-4); padding-left: var(--space-4); }
}
@media (max-width: 760px) {
  .view { padding-right: var(--space-2); padding-bottom: var(--space-4); padding-left: var(--space-2); }
  .view:not(#dashboard-view) > .page-heading { margin-bottom: var(--space-2); }
  .archive-mode, .filter-bar { margin-bottom: var(--space-2); }
  dialog, #detail-dialog { width: min(100% - 24px, 760px); }
}

/* Card system: spotlight, archive, data, and utility surfaces. */
:root {
  --card-hero-background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold-soft) 14%, transparent), transparent 44%),
    linear-gradient(145deg, var(--green-hover), var(--green-deep));
  --card-archive-background: color-mix(in srgb, var(--ivory-card) 91%, transparent);
  --card-utility-background: color-mix(in srgb, var(--ivory-soft) 72%, transparent);
  --card-border: var(--border-warm);
  --card-border-accent: color-mix(in srgb, var(--gold-accent) 40%, transparent);
  --card-shadow-rest: var(--tt-shadow-soft);
  --card-shadow-raised: var(--tt-shadow-card);
  --card-shadow-hero: var(--tt-shadow-lift);
}

/* Hero cards */
.hero, .pulse-intro, .audit-score-card {
  border: 1px solid color-mix(in srgb, var(--gold-soft) 20%, transparent);
  background-color: var(--green-primary);
  box-shadow: var(--card-shadow-hero);
}
.pulse-intro, .audit-score-card { background: var(--card-hero-background); }
.pulse-intro h2, .audit-score-card h2 { letter-spacing: -.025em; }

/* Archive cards */
.repertoire-card, .album-card, .song-credit-card, .wardrobe-card,
.organist-card, .conductor-card, .guest-artist-card, .venue-card {
  border: 1px solid var(--card-border);
  background: var(--card-archive-background);
  box-shadow: var(--card-shadow-rest);
}
.repertoire-card:hover, .album-card:hover, .song-credit-card:hover, .wardrobe-card:hover,
.organist-card:hover, .conductor-card:hover, .guest-artist-card:hover, .venue-card:hover,
.repertoire-card:focus-visible, .album-card:focus-visible, .song-credit-card:focus-visible, .wardrobe-card:focus-visible,
.organist-card:focus-visible, .conductor-card:focus-visible, .guest-artist-card:focus-visible, .venue-card:focus-visible {
  border-color: var(--card-border-accent);
  box-shadow: var(--card-shadow-raised);
}
.repertoire-card h3, .album-card h3, .song-credit-card h3, .wardrobe-card h3,
.organist-card h3, .conductor-card h3, .guest-artist-card h3, .venue-card h3 {
  line-height: 1.18;
}
.repertoire-card p, .album-card p, .song-credit-card p, .wardrobe-card p,
.organist-card p, .conductor-card p, .guest-artist-card p, .venue-card p {
  line-height: 1.5;
}
.repertoire-card b, .album-card b, .song-credit-card b, .wardrobe-card b,
.organist-card b, .conductor-card b, .guest-artist-card b, .venue-card b {
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--border-warm) 72%, transparent);
  font-weight: 600;
  letter-spacing: .13em;
}
.view.list-mode .repertoire-card b, .view.list-mode .album-card b, .view.list-mode .song-credit-card b,
.view.list-mode .wardrobe-card b, .view.list-mode .organist-card b, .view.list-mode .conductor-card b,
.view.list-mode .guest-artist-card b, .view.list-mode .venue-card b {
  padding-top: 0;
  border-top: 0;
}

/* Data and stat cards */
.stat-card {
  border: 1px solid var(--card-border);
  background: var(--card-archive-background);
  box-shadow: var(--card-shadow-rest);
}
.stat-card.featured { background: var(--card-hero-background); box-shadow: var(--card-shadow-hero); }
.stat-card strong { line-height: 1; letter-spacing: -.035em; }
.stat-label, .audit-metric > span {
  font-weight: 600;
  letter-spacing: .17em;
}
.stat-art { opacity: .72; }
.audit-metric {
  border-color: var(--card-border);
  background: var(--card-archive-background);
  box-shadow: var(--card-shadow-rest);
}

/* Utility cards and detail interiors */
.filter-bar, .archive-table-wrap, .storage-status-card, .import-instructions {
  border-color: var(--card-border);
  background: var(--card-utility-background);
  box-shadow: none;
}
.filter-bar { border-left: 2px solid color-mix(in srgb, var(--gold-accent) 48%, transparent); }
.pulse-chart-panel, .panel {
  border-color: var(--card-border);
  background: var(--card-archive-background);
  box-shadow: var(--card-shadow-rest);
}
.panel-heading {
  border-bottom-color: var(--card-border);
}
.detail-section, .song-summary {
  border-color: var(--card-border);
  background: var(--card-utility-background);
  box-shadow: none;
}
.detail-section h4 {
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-accent) 22%, transparent);
}
.detail-section h4:not(:first-child) {
  border-top-color: var(--card-border);
  border-bottom: 0;
}

/* Reversible official-source credit import trial */
.credit-import-trial {
  margin-top: var(--space-4, 32px);
  padding: var(--space-3, 24px);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--gold-accent);
  border-radius: var(--radius);
  background: var(--card-utility-background);
}
.credit-import-heading, .credit-import-actions, .credit-import-trial-status, .credit-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
}
.credit-import-heading { align-items: start; }
.credit-import-heading h2 { margin: 6px 0 4px; font-size: 28px; }
.credit-import-heading p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.credit-import-trial-status {
  margin-top: var(--space-2, 16px);
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-small);
  background: var(--card-archive-background);
}
.credit-import-trial-status strong { font-family: "Playfair Display", serif; font-size: 15px; }
.credit-import-trial-status span { color: var(--ink-soft); font-size: 9px; }
.credit-import-preview { margin-top: var(--space-2, 16px); }
.credit-import-summary {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.credit-import-summary span { padding: 6px 9px; border-radius: var(--tt-radius-pill); background: var(--tt-ivory-150); color: var(--tt-gold-600); font-size: 8px; }
.credit-import-row {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(180px, .7fr) 1.3fr;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--card-border);
}
.credit-import-row > div > a { color: var(--gold); font-size: 8px; font-weight: 600; text-decoration: none; text-transform: uppercase; }
.credit-import-row > div > a:hover { text-decoration: underline; }
.credit-import-row h3 { margin: 3px 0 0; font-size: 14px; }
.credit-import-fields { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.credit-import-field { padding: 6px 8px; border-radius: var(--tt-radius-pill); background: var(--tt-surface-muted); color: var(--ink-soft) !important; }
.credit-import-field b { margin-right: 4px; }
.credit-import-field.safe-fill { background: var(--tt-ivory-150); color: var(--tt-gold-600) !important; }
.credit-import-field.conflict, .credit-import-field.blocked-fill, .credit-import-field.ambiguous-fill { background: color-mix(in srgb, var(--tt-copper-400) 18%, var(--tt-surface)); color: var(--tt-copper-600) !important; }
.credit-import-actions { justify-content: flex-end; margin-top: var(--space-2, 16px); }
@media (max-width: 760px) {
  .credit-import-heading, .credit-import-trial-status { align-items: stretch; flex-direction: column; }
  .credit-import-row { grid-template-columns: 1fr; }
  .credit-import-fields { justify-content: flex-start; }
  .credit-import-actions { align-items: stretch; flex-direction: column; }
}

/* Typography system: editorial display type with clear utility and metadata roles. */
:root {
  --font-display: "Playfair Display", Georgia, serif;
  --font-utility: "DM Sans", Arial, sans-serif;
  --tt-font-serif: var(--font-display);
  --tt-font-sans: var(--font-utility);
  --tt-text-xs: .75rem;
  --tt-text-sm: .875rem;
  --tt-text-md: 1rem;
  --tt-text-lg: 1.125rem;
  --tt-text-xl: 1.375rem;
  --tt-text-2xl: 1.75rem;
  --tt-text-3xl: 2.25rem;
  --tt-text-4xl: 3rem;
  --tt-text-5xl: 4rem;
  --tt-text-6xl: 5.25rem;
  --type-page-title: clamp(42px, 4.2vw, 54px);
  --type-hero-title: clamp(48px, 5vw, 72px);
  --type-modal-title: clamp(26px, 3vw, 31px);
  --type-section-title: clamp(20px, 2vw, 25px);
  --type-card-title: 18px;
  --type-metadata: 10px;
  --type-eyebrow: 8px;
}
body, button, input, select, textarea, table {
  font-family: var(--font-utility);
}
h1, h2, blockquote,
.dialog-heading h2, .detail-hero h2,
.panel-heading h2, .collection-heading h2,
.repertoire-card h3, .album-card h3, .song-credit-card h3, .wardrobe-card h3,
.organist-card h3, .conductor-card h3, .guest-artist-card h3, .venue-card h3,
.stat-card strong, .album-stat-card strong, .audit-metric strong, .audit-score-ring strong,
.song-summary strong, .singing-metric-grid strong, .donut strong, .milestone-ring strong {
  font-family: var(--font-display);
}
.hero h1 {
  font-size: var(--type-hero-title);
  line-height: .98;
  letter-spacing: -.045em;
}
.page-heading h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: var(--type-page-title);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.dialog-heading h2 { font-size: var(--type-modal-title); line-height: 1.08; letter-spacing: -.025em; }
.panel-heading h2, .collection-heading h2, .event-audit-heading h2, .wardrobe-heading h2,
.credit-import-heading h2 { font-size: var(--type-section-title); line-height: 1.15; letter-spacing: -.02em; }
.repertoire-card h3, .album-card h3, .song-credit-card h3, .wardrobe-card h3,
.organist-card h3, .conductor-card h3, .guest-artist-card h3, .venue-card h3 {
  font-size: var(--type-card-title);
  line-height: 1.22;
  letter-spacing: -.012em;
}
.eyebrow {
  margin-bottom: 6px;
  color: var(--gold-accent, var(--gold));
  font-family: var(--font-utility);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .2em;
}
.panel-heading .eyebrow, .collection-heading .eyebrow, .dialog-heading .eyebrow { margin-bottom: 5px; }
.stat-label, .archive-table th, .detail-section h4, .form-grid label,
.archive-mode button, .display-toggle button, .link-button, .danger-button {
  font-family: var(--font-utility);
  font-weight: 650;
}
.stat-label, .detail-section h4 {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: .16em;
}
.archive-table { line-height: 1.45; }
.archive-table th { font-size: 8px; line-height: 1.4; letter-spacing: .13em; }
.archive-table td { color: var(--ink); }
.archive-table td small, .archive-table td span,
.event-row p, .song-row small,
.repertoire-card p, .album-card p, .song-credit-card p, .wardrobe-card p,
.organist-card p, .conductor-card p, .guest-artist-card p, .venue-card p,
.detail-section p, .muted {
  color: var(--text-muted, var(--ink-soft));
  font-family: var(--font-utility);
  line-height: 1.55;
}
.page-heading p, .hero p {
  margin-top: 0;
  line-height: 1.65;
  letter-spacing: .005em;
}
.primary-button, .secondary-button, .danger-button, .link-button,
.filter-bar input, .filter-bar select, .form-grid input, .form-grid select, .form-grid textarea {
  font-family: var(--font-utility);
}
.primary-button, .secondary-button { line-height: 1.2; }
.stat-card strong, .album-stat-card strong, .audit-metric strong {
  line-height: .98;
  letter-spacing: -.03em;
}
@media (max-width: 760px) {
  :root { --type-page-title: clamp(38px, 11vw, 46px); --type-hero-title: clamp(40px, 12vw, 58px); }
  .page-heading h1 { line-height: 1.04; }
}

/* Dashboard composition polish: scoped to preserve archive behavior and layouts. */
#dashboard-view .hero {
  min-height: 292px;
  margin-top: var(--space-2);
  padding: 54px 44px 42px;
  border: 1px solid color-mix(in srgb, var(--gold-accent) 28%, var(--green-primary));
  background:
    radial-gradient(circle at 84% 20%, rgba(232, 201, 142, .12), transparent 30%),
    linear-gradient(90deg, rgba(5, 45, 38, .9) 0%, rgba(5, 45, 38, .68) 45%, rgba(5, 45, 38, .1) 78%),
    linear-gradient(0deg, rgba(5, 45, 38, .16), transparent 45%),
    var(--hero-image, url("assets/dashboard-hero-banner.png")) center 43% / cover no-repeat;
  box-shadow: 0 18px 42px rgba(11, 54, 46, .12), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
#dashboard-view .hero::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 55%, rgba(5, 45, 38, .16));
  box-shadow: inset 0 0 0 1px rgba(232, 201, 142, .12);
}
#dashboard-view .hero p {
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 8px rgba(5, 45, 38, .22);
}
#dashboard-view .hero-image-button {
  border-color: rgba(232, 201, 142, .34);
  background: rgba(5, 45, 38, .36);
  box-shadow: 0 4px 14px rgba(5, 45, 38, .16);
}
#dashboard-view .hero + .stat-grid { margin-top: var(--space-3); }
#dashboard-view .stat-grid {
  gap: var(--space-2);
  align-items: stretch;
}
#dashboard-view .stat-card {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  padding: 22px;
  border-color: color-mix(in srgb, var(--gold-accent) 18%, var(--card-border));
  background: color-mix(in srgb, var(--ivory-card) 97%, var(--gold-soft));
  box-shadow: var(--card-shadow-rest);
}
#dashboard-view .stat-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-accent), transparent 74%);
  content: "";
  opacity: .52;
}
#dashboard-view .stat-card.featured::before {
  background: linear-gradient(90deg, var(--gold-accent), rgba(232, 201, 142, .08));
  opacity: .78;
}
#dashboard-view .stat-card.featured {
  border-color: color-mix(in srgb, var(--gold-accent) 28%, var(--green-primary));
  background: var(--card-hero-background);
  color: white;
  box-shadow: var(--card-shadow-hero);
}
#dashboard-view .stat-card.featured .stat-label {
  color: rgba(255, 255, 255, .7);
}
#dashboard-view .stat-card.featured strong {
  color: white;
}
#dashboard-view .stat-card.featured > span {
  color: rgba(255, 255, 255, .72);
}
#dashboard-view .stat-card strong {
  margin: auto 0 5px;
  font-size: 42px;
  line-height: .98;
}
#dashboard-view .stat-card > span { line-height: 1.45; }
#dashboard-view .stat-art {
  right: 14px;
  bottom: -20px;
  color: color-mix(in srgb, var(--copper-accent) 9%, transparent);
  font-size: 88px;
  opacity: .42;
  filter: saturate(.62);
}
#dashboard-view .stat-art.outline {
  color: color-mix(in srgb, var(--green-primary) 8%, transparent);
}
#dashboard-view .dashboard-pulse,
#dashboard-view .dashboard-grid {
  gap: var(--space-2);
  margin-top: var(--space-3);
}
#dashboard-view .pulse-intro,
#dashboard-view .pulse-chart-panel,
#dashboard-view .panel {
  border-color: color-mix(in srgb, var(--gold-accent) 17%, var(--card-border));
  box-shadow: var(--card-shadow-rest);
}
#dashboard-view .pulse-intro {
  padding: 30px;
  background:
    radial-gradient(circle at 92% 10%, rgba(232, 201, 142, .1), transparent 34%),
    linear-gradient(145deg, var(--green-primary), color-mix(in srgb, var(--green-primary) 84%, var(--green-deep)));
}
#dashboard-view .pulse-chart-panel,
#dashboard-view .panel {
  padding: 26px;
  background: color-mix(in srgb, var(--ivory-card) 98%, var(--gold-soft));
}
#dashboard-view .panel:hover {
  border-color: color-mix(in srgb, var(--gold-accent) 30%, var(--card-border));
}
#dashboard-view .panel-heading {
  margin-bottom: 20px;
  padding-bottom: 13px;
  border-bottom-color: color-mix(in srgb, var(--gold-accent) 19%, var(--card-border));
}
#dashboard-view .pulse-chart-panel .panel-heading {
  border-bottom: 1px solid color-mix(in srgb, var(--gold-accent) 19%, var(--card-border));
}
#dashboard-view .event-row,
#dashboard-view .song-row {
  border-color: color-mix(in srgb, var(--gold-accent) 14%, var(--card-border));
}
#dashboard-view .archive-highlights,
#dashboard-view .people-highlights { gap: 10px; }
#dashboard-view .archive-highlights button,
#dashboard-view .people-highlights button {
  min-height: 108px;
  border-color: color-mix(in srgb, var(--gold-accent) 18%, var(--card-border));
  background: color-mix(in srgb, var(--ivory-card) 96%, var(--gold-soft));
  box-shadow: inset 0 1px rgba(255, 255, 255, .62);
}
#dashboard-view .people-highlights button {
  box-shadow: inset 0 2px var(--gold-accent), inset 0 1px rgba(255, 255, 255, .62);
}
#dashboard-view .milestone-panel {
  border-color: color-mix(in srgb, var(--gold-accent) 30%, var(--green-primary));
  background:
    radial-gradient(circle at 82% 18%, rgba(232, 201, 142, .11), transparent 34%),
    linear-gradient(145deg, var(--green-primary), color-mix(in srgb, var(--green-primary) 86%, var(--green-deep)));
  box-shadow: 0 14px 32px rgba(11, 54, 46, .13);
}
#dashboard-view .milestone-ring {
  box-shadow: inset 0 0 0 1px rgba(232, 201, 142, .24), 0 0 0 1px rgba(5, 45, 38, .16);
}
@media (max-width: 760px) {
  #dashboard-view .hero {
    min-height: 270px;
    padding: 40px 26px 34px;
  }
  #dashboard-view .hero + .stat-grid,
  #dashboard-view .dashboard-pulse,
  #dashboard-view .dashboard-grid { margin-top: var(--space-2); }
  #dashboard-view .stat-card {
    min-height: 142px;
    padding: 20px;
  }
  #dashboard-view .stat-card strong { font-size: 38px; }
  #dashboard-view .pulse-intro,
  #dashboard-view .pulse-chart-panel,
  #dashboard-view .panel { padding: 20px; }
}

/* Interaction system: consistent, restrained actions across the archive. */
:root {
  --action-height: 38px;
  --action-radius: var(--tt-radius-sm);
  --action-focus: color-mix(in srgb, var(--gold-accent) 62%, transparent);
  --action-disabled-bg: color-mix(in srgb, var(--ivory-soft) 82%, transparent);
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: var(--action-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--action-radius);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.primary-button > span,
.secondary-button > span,
.danger-button > span,
.link-button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.primary-button {
  border: 1px solid color-mix(in srgb, var(--green-deep) 78%, transparent);
  color: var(--ivory-card);
}
.primary-button:hover {
  border-color: var(--green-hover);
  color: white;
}
.primary-button:active {
  background: var(--green-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .16);
}

.secondary-button {
  border: 1px solid var(--border-warm-strong);
  background: color-mix(in srgb, var(--ivory-card) 82%, transparent);
  color: var(--green-primary);
  box-shadow: 0 1px 2px rgba(55, 43, 28, .035);
}
.secondary-button:hover {
  border-color: color-mix(in srgb, var(--gold-accent) 54%, var(--border-warm));
  background: var(--ivory-card);
  color: var(--green-deep);
  box-shadow: 0 4px 12px rgba(55, 43, 28, .065);
}
.secondary-button:active {
  background: var(--ivory-soft);
  box-shadow: inset 0 1px 3px rgba(55, 43, 28, .08);
}

/* High-contrast actions on dark archival panels. */
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) .primary-button {
  border-color: color-mix(in srgb, var(--tt-gold-300) 65%, transparent);
  background: var(--tt-gold-300);
  color: var(--tt-green-950);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) .primary-button:hover {
  border-color: var(--tt-ivory-50);
  background: var(--tt-ivory-50);
  color: var(--tt-green-950);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) .secondary-button {
  border-color: rgba(255, 248, 237, .5);
  background: rgba(255, 248, 237, .12);
  color: var(--tt-on-dark);
  box-shadow: none;
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) .secondary-button:hover {
  border-color: var(--tt-on-dark);
  background: var(--tt-on-dark);
  color: var(--tt-green-950);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) :is(.primary-button, .secondary-button):active {
  border-color: var(--tt-gold-300);
  background: var(--tt-gold-300);
  color: var(--tt-green-950);
  box-shadow: inset 0 2px 4px rgba(7, 63, 54, .16);
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) :is(.primary-button, .secondary-button):focus-visible {
  outline-color: var(--tt-gold-300);
  box-shadow: 0 0 0 4px rgba(232, 201, 130, .22);
}
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) :is(.primary-button, .secondary-button):disabled,
:is(.pulse-intro, .audit-score-card, .memory-panel, .milestone-panel) :is(.primary-button, .secondary-button)[aria-disabled="true"] {
  border-color: rgba(255, 248, 237, .25);
  background: rgba(255, 248, 237, .08);
  color: rgba(255, 248, 237, .58);
}

.danger-button {
  min-height: var(--action-height);
  padding: 10px 14px;
}
.danger-button:active {
  background: color-mix(in srgb, var(--copper-warning) 88%, black);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14);
}

.link-button,
.inline-detail-link,
.table-actions button,
.credit-import-row > div > a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
}
.link-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  line-height: 1.35;
}
.link-button:hover,
.inline-detail-link:hover,
.credit-import-row > div > a:hover {
  color: var(--copper-warning);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.inline-detail-link {
  border-radius: 3px;
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--copper-accent) 38%, transparent);
}

.table-actions button {
  min-height: 28px;
  padding: 4px 5px;
  border-radius: 5px;
  font-weight: 650;
  letter-spacing: .025em;
}
.table-actions button:hover {
  background: color-mix(in srgb, var(--copper-accent) 7%, transparent);
  color: var(--copper-warning);
}
.table-actions .table-delete:hover {
  background: color-mix(in srgb, var(--copper-warning) 8%, transparent);
  color: var(--copper-warning);
}

.close-button,
.detail-toolbar-close {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}
.mobile-menu {
  display: none;
  place-items: center;
  border-radius: 50%;
}
.close-button {
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  line-height: 1;
}
.close-button:hover,
.mobile-menu:hover {
  background: color-mix(in srgb, var(--gold-accent) 9%, transparent);
  color: var(--green-primary);
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 3px;
}
.primary-button:focus-visible {
  outline-color: var(--gold-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-soft) 24%, transparent), 0 6px 16px rgba(7, 53, 45, .17);
}

button:disabled,
button[aria-disabled="true"],
.primary-button[aria-disabled="true"],
.secondary-button[aria-disabled="true"],
.danger-button[aria-disabled="true"] {
  border-color: var(--border-warm);
  background: var(--action-disabled-bg);
  color: color-mix(in srgb, var(--text-muted) 62%, transparent);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .68;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  button,
  a,
  [role="button"] {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  .mobile-menu { display: inline-grid; }
}

/* Dialog scrolling stays inside the rounded archival card. */
dialog {
  overflow: hidden;
}
dialog > form,
#detail-content {
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--tt-green-900) 38%, transparent) transparent;
  scrollbar-width: thin;
}
dialog > form::-webkit-scrollbar,
#detail-content::-webkit-scrollbar {
  width: 10px;
}
dialog > form::-webkit-scrollbar-track,
#detail-content::-webkit-scrollbar-track {
  margin-block: 14px;
  background: transparent;
}
dialog > form::-webkit-scrollbar-thumb,
#detail-content::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--tt-radius-pill);
  background: color-mix(in srgb, var(--tt-green-900) 38%, transparent);
  background-clip: padding-box;
}
dialog > form::-webkit-scrollbar-thumb:hover,
#detail-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--tt-green-900) 58%, transparent);
  background-clip: padding-box;
}

/* Event ledger: keep column headings visible while only the records scroll. */
#events-view .archive-table-wrap {
  max-height: min(68vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--tt-green-900) 32%, transparent) transparent;
  scrollbar-width: thin;
}
#events-view .archive-table {
  border-collapse: separate;
  border-spacing: 0;
}
#events-view .archive-table thead {
  position: relative;
  z-index: 3;
}
#events-view .archive-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--border-warm-strong);
  background: color-mix(in srgb, var(--tt-ivory-100) 96%, var(--tt-surface));
  box-shadow: 0 5px 12px rgba(20, 35, 30, .06);
}
#events-view .archive-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#events-view .archive-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
#events-view .archive-table-wrap::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--tt-radius-pill);
  background: color-mix(in srgb, var(--tt-green-900) 32%, transparent);
  background-clip: padding-box;
}
#events-view .archive-table-wrap::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--tt-green-900) 52%, transparent);
  background-clip: padding-box;
}

@media (max-width: 760px) {
  #events-view .archive-table-wrap { max-height: 62vh; }
  .search-wrap { position: static; }
  .global-search-panel { top: 59px; right: 12px; left: 12px; width: auto; max-height: 70vh; }
  .song-credit-insight-grid { grid-template-columns: 1fr; }
  .tag-manager-summary { grid-template-columns: 1fr 1fr; }
  .tag-manager-create { grid-template-columns: 1fr; }
  .tag-manager-create form { grid-template-columns: 1fr; }
  .tag-manager-filter { grid-template-columns: 1fr; }
  .tag-manager-card-heading { align-items: center; }
  .tag-manager-linked button { max-width: 100%; }
  .tag-manager-actions { justify-content: flex-start; }
}