:root {
  color-scheme: light;
  --ink: #2c2440;
  --muted: #756f82;
  --paper: #fffaf3;
  --card: #fff;
  --line: #e8e0d6;
  --purple: #6547ce;
  --purple-dark: #4e34ad;
  --purple-pale: #eee9ff;
  --coral: #ff7d6b;
  --coral-pale: #fff0ec;
  --teal: #2ca89b;
  --teal-pale: #e6f7f3;
  --sun: #ffc84a;
  --sun-pale: #fff5cc;
  --shadow: 0 22px 60px rgba(65, 44, 108, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.button-reset { border: 0; background: none; padding: 0; cursor: pointer; }
.mobile-tabbar { display: none; }
.topbar { position: sticky; z-index: 20; top: 0; height: 74px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(101,71,206,.12); background: rgba(255,250,243,.93); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--purple); font-family: Georgia, serif; font-size: 28px; font-weight: 700; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--purple); transform: rotate(-4deg); box-shadow: 0 7px 0 #dcd3ff; }
.brand-mark svg { width: 25px; fill: currentColor; }
.topbar nav { display: flex; align-items: center; gap: 18px; }
.nav-button { font-weight: 750; color: var(--muted); }
.home-nav { display: inline-flex; align-items: center; gap: 5px; }
.home-nav span { color: var(--aqua-dark, #087c8a); font-size: 16px; }
.account-nav { display: inline-flex; align-items: center; gap: 7px; }
.account-nav > span:first-child { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font-size: 8px; box-shadow: 0 3px 8px rgba(8,124,138,.18); }
.primary, .secondary { border: 0; border-radius: 14px; padding: 14px 20px; font-weight: 800; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.primary { background: var(--purple); color: white; box-shadow: 0 6px 0 #452aa3; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #452aa3; }
.primary.small { padding: 11px 16px; border-radius: 12px; }
.primary.sun { background: var(--sun); color: #4a3511; box-shadow: 0 6px 0 #e3a91f; }
.secondary { background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 0 #e6ddd3; }
.secondary.light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.compact { padding: 10px 15px; border-radius: 11px; }
#app { min-height: calc(100vh - 74px); outline: none; }
.library-view, .setup-view, .editor-view { width: min(1240px, calc(100% - 40px)); margin: auto; padding: 38px 0 80px; }
.welcome-card { position: relative; overflow: hidden; min-height: 390px; border-radius: 32px; padding: clamp(34px, 6vw, 72px); display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; color: white; background: linear-gradient(135deg, #6949d4, #8d52cf 65%, #e8709b); box-shadow: var(--shadow); }
.welcome-card > div:first-of-type { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 13px; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 850; color: #ffe79c; }
.eyebrow.purple { color: var(--purple); }
.welcome-card h1, .setup-intro h1 { margin: 0; font: 700 clamp(46px, 7vw, 78px)/.95 Georgia, serif; letter-spacing: -.045em; }
.welcome-card h1 em { color: #ffe27e; font-weight: 700; }
.welcome-card p:not(.eyebrow) { max-width: 580px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); }
.welcome-actions { display: flex; gap: 13px; margin-top: 28px; }
.hero-notes { position: relative; height: 270px; }
.note { position: absolute; z-index: 3; font-family: Georgia, serif; color: #ffe374; filter: drop-shadow(0 8px 0 rgba(65,36,104,.18)); }
.n1 { font-size: 84px; top: 0; right: 45px; transform: rotate(13deg); }
.n2 { font-size: 64px; bottom: 20px; left: 20px; transform: rotate(-13deg); color: #83ead9; }
.n3 { font-size: 45px; top: 70px; left: 15px; color: #ff9c8f; }
.record { position: absolute; right: 20px; bottom: -10px; width: 180px; height: 180px; border-radius: 50%; background: repeating-radial-gradient(#32254b 0 3px,#493461 4px 8px); box-shadow: 18px 18px 0 rgba(48,29,79,.2); display: grid; place-items: center; transform: rotate(8deg); }
.record div { width: 62px; height: 62px; border-radius: 50%; background: var(--coral); border: 15px solid #ffd6ce; }
.confetti { position: absolute; width: 120px; height: 18px; border: 8px dotted rgba(255,255,255,.12); border-radius: 50%; }
.c1 { top: 40px; left: 48%; transform: rotate(-20deg); }.c2 { right: 20px; top: 40px; }.c3 { left: 30%; bottom: 10px; }
.library-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 54px 0 22px; }
.library-heading h2 { margin: 0; font: 700 40px Georgia, serif; }
.library-tools { display: flex; align-items: center; gap: 9px; width: min(630px, 100%); }
.search { width: min(300px, 100%); position: relative; }
.search span { position: absolute; left: 15px; top: 10px; font-size: 25px; color: var(--muted); }
.search input { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px 13px 45px; background: white; }
.trash-toggle { flex: 0 0 auto; min-height: 47px; border: 1px solid #e1d7cb; border-radius: 14px; padding: 10px 12px; color: #665d70; background: white; cursor: pointer; font-weight: 800; }
.trash-toggle strong { display: inline-grid; min-width: 20px; min-height: 20px; margin-left: 3px; place-items: center; border-radius: 999px; color: #76520b; background: var(--sun-pale); font-size: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card-wrap { position: relative; min-height: 220px; border-radius: 24px; overflow: hidden; transition: transform .18s; }
.project-card-wrap:hover { transform: translateY(-4px) rotate(-.4deg); }
.project-card { width: 100%; min-height: 220px; text-align: left; border: 0; border-radius: 24px; padding: 25px; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: start; overflow: hidden; color: inherit; background: transparent; }
.project-card strong { margin-top: auto; font: 700 27px Georgia, serif; }
.project-card small { font-size: 14px; opacity: .72; margin-top: 4px; }
.project-trash { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; color: inherit; background: rgba(255,255,255,.72); cursor: pointer; font-size: 16px; opacity: .72; }
.project-trash:hover, .project-trash:focus-visible { opacity: 1; background: white; }
.project-meta { margin-top: 17px; font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.project-note { position: absolute; font: 700 95px Georgia, serif; opacity: .12; right: 20px; top: 5px; transform: rotate(12deg); }
.project-status { border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.6); }
.coral-card { background: var(--coral-pale); color: #8d3f36; }.purple-card { background: var(--purple-pale); color: #4e35a7; }.teal-card { background: var(--teal-pale); color: #1d746c; }.sun-card { background: var(--sun-pale); color: #76520b; }
.empty-library { grid-column: 1 / -1; text-align: center; padding: 60px 20px; border: 2px dashed #ded4c9; border-radius: 24px; color: var(--muted); }
.empty-library span { display: block; color: var(--coral); font-size: 50px; }.empty-library h3 { color: var(--ink); font: 700 26px Georgia, serif; margin: 8px; }
.trash-panel { margin-top: 28px; padding: 24px; border: 1px solid #e3d9cc; border-radius: 22px; background: rgba(255,255,255,.72); }
.trash-panel[hidden] { display: none; }
.trash-panel > div:first-child { display: grid; gap: 4px; margin-bottom: 15px; }
.trash-panel h3, .trash-panel p { margin: 0; }
.trash-panel h3 { font: 700 28px Georgia, serif; }
.trash-panel > div:first-child > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; }
.trash-list { display: grid; gap: 9px; }
.trash-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 15px; background: white; }
.trash-card > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: var(--purple); background: var(--purple-pale); font: 700 19px Georgia, serif; }
.trash-card > div { min-width: 0; display: grid; gap: 2px; }
.trash-card strong, .trash-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-card small, .trash-empty { color: var(--muted); font-size: 11px; }
.trash-card > .trash-card-actions { min-width: auto; display: flex; align-items: center; gap: 6px; }
.trash-delete-permanently { min-height: 35px; border: 1px solid #efb19f; border-radius: 9px; padding: 7px 9px; color: #9b3f2c; background: #fff7f3; font-size: 9px; font-weight: 850; cursor: pointer; }
.trash-delete-permanently:hover, .trash-delete-permanently:focus-visible { color: white; border-color: #ad4935; background: #ad4935; }
#trash-status { min-height: 16px; margin: 10px 0 0; color: var(--aqua-dark); font-size: 10px; font-weight: 750; }
#trash-status.has-error { color: #a94b3a; }
.trash-empty { margin: 0; padding: 16px; text-align: center; border: 2px dashed #e4dacf; border-radius: 14px; }
.back { color: var(--purple); font-weight: 800; margin-bottom: 22px; }
.setup-view { max-width: 1000px; }
.setup-card { display: grid; grid-template-columns: .75fr 1.25fr; background: white; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); }
.setup-intro { position: relative; padding: 55px 46px; color: white; background: linear-gradient(155deg, #ff806e, #f46786); }
.setup-intro .eyebrow { color: #fff2bd; }.setup-intro h1 { font-size: 56px; }.setup-intro p:not(.eyebrow) { line-height: 1.65; color: rgba(255,255,255,.85); }
.spark { position: absolute; right: 28px; top: 22px; font-size: 42px; color: #ffe276; }
#project-form { padding: 50px; }
.setup-autosave-status { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0 0 20px; padding: 7px 10px; border-radius: 999px; color: #087c8b; background: #e9fbfb; font-size: 10px; font-weight: 750; }
.setup-autosave-status span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: white; background: var(--teal); }
.setup-autosave-status.recovered { align-items: flex-start; width: auto; border-radius: 10px; color: #664aa6; background: #f4efff; line-height: 1.45; }
.setup-autosave-status.recovered span { flex: 0 0 auto; background: var(--purple); }
.setup-autosave-status.has-error { width: auto; border-radius: 10px; color: #9b342d; background: #fff0ed; line-height: 1.45; }
.setup-autosave-status.has-error span { flex: 0 0 auto; background: var(--coral); }
.setup-flow-panel[hidden], [data-setup-advanced][hidden], #setup-flow-actions[hidden], .setup-more-options[hidden], .setup-start-choice[hidden] { display: none !important; }
.setup-start-choice { margin-top: 0; }
.start-choice-grid { display: grid; gap: 11px; }
.start-choice-grid > label { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: white; cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }
.start-choice-grid > label:hover { transform: translateY(-1px); border-color: #cbbef0; }
.start-choice-grid > label:has(input:checked) { border-color: var(--purple); background: linear-gradient(135deg, #f8f5ff, #f1fcfc); box-shadow: inset 0 0 0 1px var(--purple), 0 7px 18px rgba(73,50,145,.08); }
.start-choice-grid input { accent-color: var(--purple); }
.start-choice-grid > label > span:last-child { min-width: 0; display: grid; gap: 3px; }
.start-choice-grid strong { color: var(--ink); font-size: 13px; }
.start-choice-grid small { color: var(--muted); font-size: 9px; font-weight: 550; line-height: 1.4; }
.start-choice-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font: 850 17px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.start-choice-icon.teal { color: #07616b; background: var(--teal-pale); }
.start-choice-icon.coral { color: #a5463a; background: var(--coral-pale); }
.start-choice-icon.purple { color: var(--purple); background: var(--purple-pale); }
.setup-song-details { margin-top: 24px; padding: 18px; border: 1px solid #d9e6e6; border-radius: 17px; background: linear-gradient(145deg, #f8fdfd, #fffdf8); }
.setup-panel-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.setup-panel-heading > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 12px; font-weight: 900; }
.setup-panel-heading > div { display: grid; gap: 2px; }
.setup-panel-heading strong { color: var(--ink); font-size: 13px; }
.setup-panel-heading small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.setup-flow-panel { animation: setup-panel-in .22s ease both; }
@keyframes setup-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.setup-more-options { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 15px; }
#toggle-setup-options { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 13px; color: var(--purple); background: #f8f5ff; text-align: left; cursor: pointer; }
#toggle-setup-options > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--purple); font-size: 16px; font-weight: 800; }
#toggle-setup-options > span:last-child { display: grid; gap: 2px; }
#toggle-setup-options strong { font-size: 11px; }
#toggle-setup-options small { color: var(--muted); font-size: 8px; font-weight: 550; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label { color: #4d4658; font-size: 13px; font-weight: 800; }
input, select, textarea { border: 1px solid #dcd4ca; background: #fff; border-radius: 11px; color: var(--ink); }
label > input, label > select { display: block; width: 100%; margin-top: 8px; padding: 13px; }
fieldset { border: 0; padding: 0; margin: 30px 0 0; }
legend, .panel-label { margin: 0 0 13px; color: var(--ink); font-size: 13px; font-weight: 900; }
.option-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.analysis-detail-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.analysis-detail-options label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; }
.analysis-detail-options input { margin-top: 3px; accent-color: var(--teal); }
.analysis-detail-options span { display: grid; gap: 3px; }
.analysis-detail-options strong { color: var(--ink); font-size: 12px; }
.analysis-detail-options small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.option { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 13px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--purple); background: #f7f4ff; box-shadow: inset 0 0 0 1px var(--purple); }
.option-icon { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; font: 800 17px Georgia, serif; }
.option-icon.coral { background: var(--coral-pale); color: var(--coral); }.option-icon.purple { background: var(--purple-pale); color: var(--purple); }.option-icon.teal { background: var(--teal-pale); color: var(--teal); }
.option span:last-child { min-width: 0; display: grid; gap: 3px; }.option small { color: var(--muted); font-weight: 500; }
.materials-panel > p:not(.panel-label) { margin: -5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.materials-panel > small { display: block; margin-top: 8px; color: #08758a; font-size: 8px; font-weight: 700; line-height: 1.4; }
.materials-panel .segmented { flex-wrap: wrap; }
.materials-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.materials-heading .panel-label { margin: 0; }
.materials-add-button { padding: 5px 9px; border: 1px solid #9ddade; border-radius: 999px; color: #08758a; background: #eefcfc; font-size: 8px; font-weight: 900; cursor: pointer; }
.uploaded-material-list { display: grid; gap: 6px; margin-top: 9px; }
.uploaded-material { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid #d8e6e7; border-radius: 10px; background: #fff; }
.uploaded-material.has-audio { grid-template-columns: minmax(0, 1fr) auto auto; }
.uploaded-material-open { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.uploaded-material-open > span:first-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: white; background: linear-gradient(135deg, var(--teal), var(--aqua)); font-size: 13px; }
.uploaded-material-open > span:last-child { min-width: 0; display: grid; gap: 2px; }
.uploaded-material-open strong, .uploaded-material-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-material-open strong { font-size: 9px; }
.uploaded-material-open small { color: var(--muted); font-size: 7px; }
.uploaded-material-open:hover, .uploaded-material-open:focus-visible { background: #f2fcfc; outline: none; }
.uploaded-material.external-link { border-color: #d9d0ee; background: #fdfbff; }
.uploaded-material.external-link .uploaded-material-open > span:first-child { background: linear-gradient(135deg, var(--purple), var(--coral)); }
.uploaded-material-remove { width: 28px; border: 0; border-left: 1px solid #e6eded; color: #a65a4b; background: #fff8f5; font-size: 14px; cursor: pointer; }
.uploaded-material-play { width: 31px; border: 0; border-left: 1px solid #dcebec; color: #08758a; background: #effcfc; font-size: 10px; font-weight: 900; cursor: pointer; }
.uploaded-material-play:hover, .uploaded-material-play:focus-visible, .uploaded-material-play.is-playing { color: white; background: var(--teal); outline: none; }
.add-material-dialog { width: min(560px, calc(100vw - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: var(--ink); background: #fffdf9; box-shadow: 0 24px 70px rgba(3,39,58,.3); }
.add-material-dialog::backdrop, .material-viewer-dialog::backdrop { background: rgba(3,27,42,.68); backdrop-filter: blur(4px); }
.add-material-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; color: white; background: linear-gradient(135deg, var(--navy), #0b4051); }
.add-material-dialog header p, .material-viewer-dialog header p { margin: 0 0 3px; color: #6fe3e4; font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.add-material-dialog header h2, .material-viewer-dialog header h2 { margin: 0; color: white; font: 750 25px/1.1 Georgia, serif; }
.add-material-dialog header span, .material-viewer-dialog header span { color: #bdd3d9; font-size: 9px; }
.add-material-dialog header .icon-button { background: rgba(255,255,255,.13); color: white; }
.add-material-body { display: grid; gap: 15px; padding: 22px; }
.material-source-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.material-source-choice legend { grid-column: 1 / -1; margin: 0 0 2px; color: #53495b; font-size: 10px; font-weight: 850; }
.material-source-choice label { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 1px 9px; padding: 11px; border: 1px solid #ded7e5; border-radius: 13px; background: white; cursor: pointer; }
.material-source-choice label:has(input:checked) { border-color: var(--purple); background: #f7f3ff; box-shadow: inset 0 0 0 1px var(--purple); }
.material-source-choice input { position: absolute; opacity: 0; }
.material-source-choice label > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: white; background: linear-gradient(135deg, var(--teal), var(--aqua)); font-size: 13px; }
.material-source-choice label:last-child > span { background: linear-gradient(135deg, var(--purple), var(--coral)); }
.material-source-choice strong { color: var(--ink); font-size: 9px; }
.material-source-choice small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.material-source-fields { display: grid; gap: 15px; }
.material-source-fields[hidden] { display: none !important; }
.material-source-fields > label:not(.material-file-picker) { display: grid; gap: 6px; color: #53495b; font-size: 10px; font-weight: 850; }
.add-material-body select, .add-material-body input[type="text"], .add-material-body input[type="url"] { width: 100%; padding: 11px 12px; }
.music-link-help { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin: 0; padding: 11px 13px; border-radius: 12px; color: #525066; background: #f5f1fb; font-size: 8px; line-height: 1.45; }
.music-link-help > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: white; background: var(--purple); font-size: 12px; }
.material-file-picker { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; border: 2px dashed #b7dfe1; border-radius: 14px; background: #f3fcfc; cursor: pointer; }
.material-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.material-file-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(135deg, var(--purple), var(--coral)); font-size: 18px; }
.material-file-picker > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.material-file-picker strong, .material-file-picker small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-file-picker strong { font-size: 10px; }.material-file-picker small { color: var(--muted); font-size: 8px; }
#material-form-status { min-height: 1.4em; margin: 0; color: #9a4d3b; font-size: 9px; font-weight: 750; }
.add-material-dialog footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px 20px; border-top: 1px solid #e9e3dc; }
.material-viewer-dialog { width: min(1080px, calc(100vw - 28px)); height: min(820px, calc(100vh - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: #e7eff0; box-shadow: 0 24px 70px rgba(3,39,58,.35); }
.material-viewer-dialog > section { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.material-viewer-dialog header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px; color: white; background: var(--navy); }
.material-viewer-dialog header .secondary { color: white; border-color: #527482; background: transparent; }
.material-viewer-content { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 18px; }
.material-viewer-content iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: white; }
.material-viewer-content > img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 28px rgba(7,27,41,.16); }
.material-audio-view, .material-download-view { width: min(560px, 100%); display: grid; place-items: center; gap: 13px; padding: 35px; border-radius: 20px; background: white; text-align: center; box-shadow: 0 12px 34px rgba(7,27,41,.12); }
.material-audio-view > span, .material-download-view > span { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--teal), var(--purple)); font-size: 32px; }
.material-audio-view audio { width: 100%; }
.material-download-view p { margin: 0; color: var(--muted); font-size: 11px; }
.control-panel .panel-block[hidden], .control-panel .happy-tip[hidden] { display: none !important; }
.lyrics-only-view .bar-line, .lyrics-only-view .inline-bass-run, .lyrics-only-view .bass-run-chart { display: none !important; }
.chart-paper.lyrics-only-view .section-toolbar,
.chart-paper.lyrics-only-view .advanced-section-editors,
.chart-paper.lyrics-only-view .word-alignment-editor,
.chart-paper.lyrics-only-view .bass-run-editor { display: none !important; }
.lyrics-only-view .chart-pair { min-height: 0; margin-bottom: 8px; }
.lyrics-only-line { position: relative; display: flex; align-items: baseline; gap: 10px; padding-right: 38px; }
.lyrics-only-line .lyric-line { flex: 1; margin: 0; color: var(--ink); font-size: calc(17px * var(--performance-scale, 1)); font-weight: 600; line-height: 1.5; }
.lyrics-only-line .line-repeat-marker { flex: 0 0 auto; }
.lyrics-only-instrumental { margin: 0; color: var(--muted); font-size: 11px; font-style: italic; }
.chart-paper.lyrics-only-view .lyrics-only-line .lyric-line { font-size: 17px; }
.print-preview-sheet.lyrics-only-view .lyrics-only-line .lyric-line { font-size: max(10px, calc(18px * var(--print-text-scale, 1))); }
.print-preview-sheet.lyrics-only-view .lyrics-only-instrumental { font-size: max(8px, calc(11px * var(--print-text-scale, 1))); }
.performance-chart.lyrics-only-view .lyrics-only-line .lyric-line { color: #fff8e7; font-size: calc(1.35rem * var(--performance-scale, 1)); }
.performance-chart.lyrics-only-view .lyrics-only-instrumental { color: #a7bec5; font-size: calc(.9rem * var(--performance-scale, 1)); }
.lyrics-only-view .rendered-section h3 { color: var(--teal-dark, #08758a); }
.source-note { display: flex; gap: 12px; align-items: start; margin-top: 22px; padding: 13px; border-radius: 14px; background: var(--sun-pale); color: #77591e; }
.source-note span { font-size: 23px; }.source-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.optional { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.audio-drop { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 15px; border: 2px dashed #d6c8ef; border-radius: 15px; background: #fbf9ff; cursor: pointer; }
.audio-drop:has(+ input:focus-visible) { outline: 3px solid rgba(101,71,206,.25); outline-offset: 2px; }
.audio-drop-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--purple-pale); font-size: 20px; }
.audio-drop > span:nth-child(2) { min-width: 0; }.audio-drop strong, .audio-drop small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.audio-drop small { margin-top: 3px; color: var(--muted); font-weight: 500; }
.choose-pill { padding: 8px 11px; border-radius: 999px; color: var(--purple); background: white; border: 1px solid #ded3f2; font-size: 11px; }
.rights-check { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-weight: 600; }
.chart-import-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px 13px; padding: 17px; border: 1px solid #b9dfe1; border-radius: 16px; background: linear-gradient(135deg, #f1fbfb, #fffaf0); }
.chart-import-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #073b4f; background: #9be7e4; font: 800 17px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.chart-import-heading { align-self: center; display: grid; gap: 3px; }
.chart-import-heading strong { color: var(--navy, var(--ink)); font: 750 15px "Avenir Next", "Century Gothic", sans-serif; }
.chart-import-heading small, .chart-import-note { color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.45; }
.chart-import-heading code { color: #087f9f; font-weight: 800; }
.chart-source-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chart-source-choices label { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px; border: 1px solid #cee1e2; border-radius: 11px; color: var(--navy); background: rgba(255,255,255,.75); cursor: pointer; }
.chart-source-choices label > span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: white; background: linear-gradient(135deg, var(--teal), var(--aqua)); font-size: 14px; font-weight: 900; }
.chart-source-choices strong { font-size: 9px; }
.chart-source-choices small { color: var(--muted); font-size: 7px; line-height: 1.3; }
.chart-import-card textarea { grid-column: 1 / -1; width: 100%; padding: 13px; resize: vertical; color: #344b53; background: rgba(255,255,255,.92); font: 600 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.chart-import-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chart-import-actions label { display: inline-grid; place-items: center; cursor: pointer; }
#chart-import-status { grid-column: 1 / -1; margin: 0; padding: 9px 11px; border-radius: 9px; color: #42606a; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; line-height: 1.45; }
#chart-import-status.ready { color: #166a62; background: #ddf5ef; }
#chart-import-status.has-error { color: #914b42; background: #fff0ec; }
.chart-import-card .rights-check, .chart-import-note { grid-column: 1 / -1; margin-top: 0; }
.chart-source-preview { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; padding: 10px 12px; border: 1px solid #a9dcd9; border-radius: 10px; color: #49666d; background: #edfbf8; }
.chart-source-preview[hidden] { display: none; }
.chart-source-preview strong { color: #075b69; font-size: 10px; }
.chart-source-preview span { justify-self: end; color: #08758a; font-size: 8px; font-weight: 800; }
.chart-source-preview small { grid-column: 1 / -1; font-size: 8px; line-height: 1.4; }
.chart-source-pages { grid-column: 1 / -1; display: grid; gap: 3px; margin: 3px 0; padding-left: 24px; color: #365a63; font-size: 9px; font-weight: 700; }
.chart-source-pages[hidden] { display: none; }
.chart-source-pages li { padding-left: 2px; overflow-wrap: anywhere; }
.converter-panel { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; margin-top: 14px; padding: 15px; border: 1px solid #dcd2f2; border-radius: 16px; background: linear-gradient(135deg, #f8f5ff, #fff9e8); transition: border-color .2s, background .2s; }
.converter-panel[hidden] { display: none; }
.converter-panel.ready { border-color: #9bd9cf; background: linear-gradient(135deg, var(--teal-pale), #fffbea); }
.converter-panel.has-error { border-color: #f0b0a7; background: var(--coral-pale); }
.converter-icon { width: 42px; height: 42px; display: grid; place-items: center; align-self: start; border-radius: 50%; color: #7c5915; background: var(--sun); font-size: 22px; box-shadow: 0 4px 0 #e6ae28; }
.converter-copy { min-width: 0; }
.converter-copy > strong { color: var(--purple-dark); font: 750 15px Georgia, serif; }
.converter-copy p { margin: 3px 0 7px; color: var(--ink); font-size: 11px; font-weight: 750; line-height: 1.4; }
.converter-copy small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.converter-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(101,71,206,.11); }
#converter-progress { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--sun), var(--teal)); transition: width .2s ease; }
.team-branding-card { display: grid; gap: 15px; padding: 17px; border: 1px solid #cbe2e4; border-radius: 16px; background: linear-gradient(145deg, #f3fbfb, #fff9e9); }
.team-logo-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; }
.team-logo-preview { width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden; border: 2px dashed #9fcfd3; border-radius: 16px; color: var(--teal); background: white; font: 800 25px Georgia, serif; }
.team-logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.team-logo-control > div:last-child { display: grid; justify-items: start; gap: 5px; }
.team-logo-control small, .team-message-field { color: var(--muted); font-size: 10px; line-height: 1.4; }
.team-logo-button { display: inline-block; color: var(--purple); cursor: pointer; }
.remove-team-logo { color: #a44e43; font-size: 10px; font-weight: 800; }
.team-branding-fields { gap: 12px; }
.team-message-field textarea { display: block; width: 100%; margin-top: 8px; padding: 12px; resize: vertical; font: inherit; }
.team-footer-example { margin: 0; padding: 10px 12px; border-left: 3px solid var(--sun); border-radius: 0 9px 9px 0; color: #645970; background: rgba(255,255,255,.74); font-size: 10px; line-height: 1.5; }
.converter-actions { display: grid; gap: 7px; }
.converter-actions button { min-width: 112px; padding: 9px 11px; font-size: 10px; }
.converter-actions button:disabled { cursor: wait; opacity: .6; transform: none; box-shadow: none; }
.lyrics-guide-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 13px; padding: 17px; border: 1px solid #f0dca4; border-radius: 17px; background: linear-gradient(135deg, #fffaf0, #fbf7ff); }
.lyrics-guide-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #77510c; background: var(--sun); font: 800 15px Georgia, serif; box-shadow: 0 4px 0 #e5ae2a; transform: rotate(-2deg); }
.lyrics-guide-card > label[for="reference-lyrics"] { align-self: center; display: grid; gap: 3px; }
.lyrics-guide-card > label strong { color: var(--ink); font: 750 15px Georgia, serif; }
.lyrics-guide-card > label small { color: var(--muted); font-weight: 550; line-height: 1.45; }
.lyrics-guide-card textarea { grid-column: 1 / -1; width: 100%; padding: 13px; resize: vertical; line-height: 1.5; background: rgba(255,255,255,.9); }
#lyrics-guide-status { grid-column: 1 / -1; margin: 0; color: #756a7c; font-size: 10px; line-height: 1.5; }
#lyrics-guide-status span { color: var(--coral); }
.lyrics-guide-card .rights-check { grid-column: 1 / -1; margin-top: 0; }
.lyrics-organizer-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.lyrics-organizer-actions small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.setup-section-safety-note { grid-column: 1 / -1; margin: 0; padding: 11px 13px; border: 1px solid #8bdde1; border-radius: 12px; color: #075c68; background: #effcfd; font-size: 10px; line-height: 1.5; }
.setup-section-safety-note[hidden] { display: none; }
.lyrics-organizer { grid-column: 1 / -1; display: grid; gap: 12px; padding: 15px; border: 1px solid #bcebed; border-radius: 15px; background: linear-gradient(145deg, #effdfe, #faf7ff); }
.lyrics-organizer[hidden] { display: none; }
.lyrics-organizer-head { display: flex; gap: 10px; align-items: center; color: #087c8b; }
.lyrics-organizer-head > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: var(--teal); }
.lyrics-organizer-head div { display: grid; gap: 2px; }
.lyrics-organizer-head small { color: var(--muted); font-size: 9px; }
#lyrics-organizer-blocks { display: grid; gap: 8px; }
.lyrics-block-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid rgba(22,183,199,.2); border-radius: 11px; background: rgba(255,255,255,.78); }
.lyrics-block-meta, .lyrics-block-card label { display: grid; align-content: start; gap: 5px; }
.lyrics-block-card label span, .roadmap-field > span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.lyrics-block-card input, .roadmap-field input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.lyrics-block-card textarea { grid-column: auto; min-height: 88px; padding: 9px; resize: vertical; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.lyrics-block-tools { display: grid; gap: 4px; }
.lyrics-block-tools button { width: 100%; padding: 6px 8px; font-size: 9px; }
.lyrics-block-tools .lyrics-block-remove { padding: 2px; color: #8a6670; font-size: 8px; text-align: left; text-decoration: underline; }
.lyrics-block-tools small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.lyrics-block-in-editor { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; color: #087c8b; background: rgba(22,183,199,.1); font-size: 9px; font-weight: 800; }
.lyrics-organizer-block-actions { display: flex; align-items: center; gap: 10px; }
.lyrics-organizer-block-actions small { color: var(--muted); font-size: 9px; }
.instrumental-bookends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 10px; border: 1px solid rgba(101,71,206,.18); border-radius: 12px; background: rgba(255,255,255,.72); }
.instrumental-bookends legend { padding: 0 5px; color: var(--purple-dark); font-size: 9px; font-weight: 800; }
.instrumental-bookends label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; padding: 9px; border-radius: 10px; background: #fff; cursor: pointer; }
.instrumental-bookends input { margin-top: 2px; accent-color: var(--teal); }
.instrumental-bookends span { display: grid; gap: 3px; }
.instrumental-bookends strong { color: var(--ink); font-size: 10px; }
.instrumental-bookends small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.intro-measures-field { display: grid; align-content: center; gap: 4px; padding: 9px; border-radius: 10px; background: linear-gradient(135deg, rgba(22,183,199,.09), rgba(255,255,255,.9)); }
.intro-measures-field > label { display: block; padding: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 800; cursor: default; }
.intro-measures-field > div { display: flex; align-items: center; gap: 7px; }
.intro-measures-field input { width: 58px; margin: 0; padding: 7px 8px; border: 1px solid rgba(22,183,199,.4); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; }
.intro-measures-field input:disabled { opacity: .45; }
.intro-measures-field span { display: inline; color: var(--muted); font-size: 9px; font-weight: 700; }
.roadmap-field { display: grid; gap: 6px; }
.roadmap-field small { color: var(--muted); font-size: 9px; }
.form-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
#form-message { color: #bf3f52; font-weight: 750; }
.analysis-view { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 35px 20px 80px; background: radial-gradient(circle at 50% 20%, #f0e9ff, transparent 45%); }
.analysis-card { width: min(650px, 100%); text-align: center; padding: clamp(30px, 7vw, 64px); border-radius: 30px; background: white; box-shadow: var(--shadow); }
.analysis-art { position: relative; width: 150px; height: 150px; margin: 0 auto 28px; display: grid; place-items: center; }
.analysis-art > span { position: relative; z-index: 2; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; color: white; background: linear-gradient(135deg, var(--purple), #9460d8); font: 700 37px Georgia, serif; box-shadow: 0 10px 25px rgba(101,71,206,.3); }
.pulse-ring { position: absolute; border: 2px solid #d7cdf5; border-radius: 50%; animation: listen-pulse 2.8s ease-out infinite; }.r1 { width: 96px; height: 96px; }.r2 { width: 124px; height: 124px; animation-delay: .5s; }.r3 { width: 150px; height: 150px; animation-delay: 1s; }
@keyframes listen-pulse { 0%, 25% { transform: scale(.75); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.analysis-card h1 { margin: 0; font: 700 clamp(34px, 6vw, 50px) Georgia, serif; }.analysis-card > p:not(.eyebrow,.privacy-line) { color: var(--muted); }
.progress-track { height: 13px; margin: 30px 0 14px; overflow: hidden; border-radius: 999px; background: #eee9f2; box-shadow: inset 0 1px 3px rgba(44,36,64,.1); }
#analysis-progress { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--sun), var(--teal)); transition: width .45s ease; }
.analysis-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; color: #a099aa; font-size: 10px; font-weight: 750; }
.analysis-steps span { display: grid; justify-items: center; gap: 6px; }.analysis-steps i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #f1edf4; font-style: normal; }
.analysis-steps span.active { color: var(--purple); }.analysis-steps span.active i { color: white; background: var(--purple); }
.analysis-error { margin: 24px 0 0; padding: 14px; border-radius: 12px; color: #9c403f; background: var(--coral-pale); line-height: 1.5; }
.analysis-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }.privacy-line { margin: 24px 0 0; color: #8b8392; font-size: 10px; }
.editor-view { width: min(1440px, calc(100% - 32px)); }
.editor-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 24px; }
.editor-head .back { margin: 0; justify-self: start; }.editor-title { text-align: center; }.editor-title span { color: var(--teal); font-size: 11px; font-weight: 800; }.editor-title h1 { margin: 2px 0 0; font: 700 24px Georgia, serif; }.editor-title p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.editor-actions { display: flex; gap: 9px; justify-self: end; }
.editor-approve-button { background: linear-gradient(135deg, #078b99, #18c4c7); box-shadow: 0 7px 17px rgba(8,139,153,.2); }
.history-actions { display: flex; gap: 4px; margin-right: 2px; padding-right: 9px; border-right: 1px solid #d9e4e5; }
.history-actions button { min-width: 68px; color: #08758a; border-color: #abd8dc; background: #f2fbfb; }
.history-actions button:not(:disabled):hover, .history-actions button:not(:disabled):focus-visible { color: white; border-color: var(--teal); background: var(--teal); }
.history-actions button:disabled { color: #9ca9ad; border-color: #dce3e4; background: #f6f8f8; cursor: not-allowed; opacity: .72; }
.editor-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.control-panel { position: sticky; top: 94px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 10px 30px rgba(58,39,93,.08); overflow: hidden; }
.panel-block { padding: 20px; border-bottom: 1px solid var(--line); }
.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px,1fr)); padding: 4px; border-radius: 11px; background: #f0ebf6; }
.segmented button { border: 0; border-radius: 8px; padding: 8px 4px; background: transparent; font-size: 11px; font-weight: 850; cursor: pointer; }
.segmented button.active { background: white; color: var(--purple); box-shadow: 0 2px 7px rgba(41,24,78,.12); }
.two-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two-controls select, .two-controls input { width: 100%; margin-top: 7px; padding: 9px; }
.tempo-input { position: relative; }.tempo-input span { position: absolute; right: 7px; top: 18px; font-size: 8px; color: var(--muted); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.review-summary { margin: -5px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.chord-review-panel { display: grid; gap: 9px; background: linear-gradient(145deg, #faf7ff, #effdfe 60%, #fff9e8); }
.chord-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chord-review-heading .panel-label { margin: 0; }
.chord-review-heading output { color: var(--purple); font-size: 11px; font-weight: 900; }
.chord-review-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e6dfec; }
.chord-review-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #4fd2ad); transition: width .2s ease; }
.chord-review-panel > p { margin: 0; color: #6e6376; font-size: 9px; line-height: 1.45; }
.chord-review-panel > button { width: 100%; }
.chord-review-panel > small { color: #887c91; font-size: 8px; line-height: 1.4; }
.chord-review-panel.approved { background: linear-gradient(145deg, #effff4, #f7ffed); }
.edit-tools > p:not(.panel-label) { margin: -4px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.edit-tools > div { display: grid; gap: 7px; }
.edit-tools button { width: 100%; color: var(--purple); border-color: #d9ccf4; background: #faf7ff; }
#review-items { display: grid; gap: 6px; }
.review-jump { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 9px; border: 0; border-radius: 9px; color: #76520b; background: var(--sun-pale); font-size: 10px; font-weight: 800; cursor: pointer; }
.review-jump small { color: #9a7938; font-weight: 700; }
.lyric-timing-review-panel { background: linear-gradient(180deg, rgba(232,253,254,.7), rgba(250,248,255,.9)); }
.lyric-review-summary { margin: 0 0 9px; color: var(--navy-soft); font-size: 11px; font-weight: 750; }
.lyric-review-jump { margin-top: 6px; color: #08758a; background: #e5f9fa; text-align: left; }
.lyric-review-jump small { color: #268a99; }
.lyric-review-note, .lyric-review-complete { margin: 10px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.lyric-word-chip.review-focus { animation: lyric-review-flash 1.7s ease-out; }
.happy-tip { padding: 19px; display: flex; gap: 11px; color: #7c5915; background: var(--sun-pale); }
.happy-tip > span { font-size: 23px; }.happy-tip p { margin: 0; font-size: 11px; line-height: 1.5; }.happy-tip strong { display: block; }.happy-tip code { color: #7354a9; }
.chart-workspace { min-width: 0; padding: 20px; border-radius: 22px; background: #e9e4ee; }
.chart-paper { width: min(850px, 100%); min-height: 1000px; margin: auto; padding: clamp(28px, 5vw, 60px); background: white; border-radius: 4px; box-shadow: 0 12px 35px rgba(46,31,67,.15); }
.analysis-notice { margin-bottom: 20px; padding: 12px 14px; border-radius: 12px; color: #594795; background: var(--purple-pale); font-size: 11px; line-height: 1.5; }
.analysis-notice strong { color: var(--purple-dark); }
.chord-review-workspace { margin-bottom: 22px; padding: clamp(16px, 3vw, 24px); border: 2px solid #d7c9f1; border-radius: 18px; background: radial-gradient(circle at top right, rgba(130,237,240,.35), transparent 35%), linear-gradient(145deg, #fbf9ff, #fffaf0); box-shadow: 0 10px 24px rgba(74,48,119,.1); }
.chord-review-workspace > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.chord-review-workspace > header p { margin: 0 0 4px; color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.chord-review-workspace > header h2 { margin: 0; color: var(--purple-dark); font: 750 21px Georgia, serif; }
.chord-review-workspace > header span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.chord-review-current { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 17px 0 8px; padding: 13px 15px; border-radius: 13px; color: #5e5268; background: white; box-shadow: 0 4px 12px rgba(54,38,80,.07); }
.chord-review-current > span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.chord-review-current > strong { color: var(--purple); font: 900 28px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.chord-review-current > small { color: #98700c; font-size: 9px; font-weight: 800; }
.chord-review-help { margin: 9px 0; color: #766a80; font-size: 10px; line-height: 1.45; }
.chord-review-audition-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chord-review-audition-row button, .chord-candidate button { padding: 9px 11px; border: 1px solid #b9dfe2; border-radius: 9px; color: #08758a; background: #f1fbfb; font-size: 9px; font-weight: 850; cursor: pointer; }
.review-audition-current { color: white !important; border-color: var(--teal) !important; background: var(--teal) !important; }
.chord-candidate-list { display: grid; gap: 7px; margin: 13px 0; }
.chord-candidate { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #e2daf0; border-radius: 12px; background: rgba(255,255,255,.78); }
.chord-candidate > strong { min-width: 55px; color: var(--coral); font: 900 19px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.chord-candidate > span { color: #71677a; font-size: 9px; }
.chord-candidate .use-review-candidate { color: #fff; border-color: var(--coral); background: var(--coral); }
.custom-review-chord { display: grid; gap: 8px; margin: 13px 0; padding: 13px; border: 2px dashed #cfc1eb; border-radius: 13px; background: rgba(250,247,255,.8); }
.custom-review-chord label { display: grid; gap: 2px; color: var(--purple-dark); font-size: 10px; }
.custom-review-chord label span { color: #7b7084; font-size: 9px; font-weight: 500; line-height: 1.4; }
.custom-review-chord > div { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; gap: 7px; }
.custom-review-chord input { min-width: 0; padding: 10px 12px; border: 2px solid #d8cbf1; border-radius: 9px; color: var(--purple-dark); background: white; font: 850 15px ui-rounded, "Arial Rounded MT Bold", sans-serif; text-transform: none; }
.custom-review-chord input:focus { border-color: var(--purple); outline: 3px solid var(--purple-pale); }
.custom-review-chord button { min-width: 0; padding: 9px 10px; font-size: 9px; }
.chord-review-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; margin-top: 14px; }
.chord-review-actions button { min-width: 0; padding: 10px 8px; }
#chord-review-status { min-height: 1.4em; margin: 9px 0 0; color: #08758a; font-size: 9px; font-weight: 750; }
.measure.chord-review-focus { z-index: 1; color: var(--purple-dark); background: #fff0bd; outline: 3px solid var(--sun); outline-offset: -2px; animation: review-flash 1.4s ease-out; }
.chart-locked .section-name, .chart-locked .delete-section, .chart-locked .align-words, .chart-locked .edit-timing, .chart-locked .advanced-section-editors, .chart-locked .add-section-wrap, .chart-locked .section-order-controls, .chart-locked .section-repeat-control { display: none; }
.chart-locked .measure { cursor: default; }
.chart-readonly .section-name,
.chart-readonly .delete-section,
.chart-readonly .align-words,
.chart-readonly .edit-timing,
.chart-readonly .advanced-section-editors,
.chart-readonly .add-section-wrap,
.chart-readonly .section-order-controls,
.chart-readonly .section-repeat-control,
.chart-readonly .bass-run-editor,
.chart-readonly .section-toolbar { display: none !important; }
.chart-readonly .measure { cursor: pointer; }

.chart-view-mode .editor-layout { grid-template-columns: minmax(0, 1fr); }
.chart-view-mode .control-panel,
.chart-view-mode .history-actions,
.chart-view-mode .editor-state-row,
.chart-view-mode #editor-artist,
.chart-view-mode .analysis-notice,
.chart-view-mode .analysis-candidate-panel,
.chart-view-mode #section-removal-status,
.chart-view-mode .mobile-chart-tools-toggle { display: none !important; }
.chart-view-mode .editor-head { align-items: center; }
.chart-view-mode .editor-title h1 { margin: 0; }
.chart-view-mode .chart-workspace { max-width: 980px; width: 100%; margin-inline: auto; }
.editor-edit-button { background: linear-gradient(135deg, #087c8a, #16b7c7); }
.lyrics-guide-reference { margin-bottom: 22px; overflow: hidden; border: 1px solid #ecdba5; border-radius: 14px; background: #fffaf0; }
.lyrics-guide-reference[hidden] { display: none; }
.lyrics-guide-reference summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #684a14; cursor: pointer; list-style: none; }
.lyrics-guide-reference summary::-webkit-details-marker { display: none; }
.lyrics-guide-reference summary > span:first-child { display: grid; gap: 2px; }
.lyrics-guide-reference summary strong { font: 750 13px Georgia, serif; }
.lyrics-guide-reference summary small { color: #8a795a; font-size: 9px; }
.lyrics-guide-reference summary > span:last-child { font-size: 19px; transition: transform .18s; }
.lyrics-guide-reference[open] summary > span:last-child { transform: rotate(45deg); }
.lyrics-guide-reference > p { margin: 0; padding: 0 14px 10px; color: #776a58; font-size: 10px; line-height: 1.5; }
.lyrics-guide-reference pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-top: 1px solid #eee0b8; color: #4b4355; background: rgba(255,255,255,.75); font: 500 12px/1.55 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; white-space: pre-wrap; }
.chart-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 24px; border-bottom: 3px solid var(--ink); }
.chart-kicker { margin: 0 0 4px; color: var(--coral); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.chart-header h2 { margin: 0; font: 800 clamp(28px, 5vw, 44px) Georgia, serif; }.chart-header p:last-child { margin: 5px 0 0; color: var(--muted); }
.chart-meta { display: flex; gap: 22px; text-align: center; }.chart-meta span { display: grid; gap: 3px; }.chart-meta span[hidden] { display: none; }.chart-meta small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.chart-meta strong { font-size: 13px; }
.song-section { padding: 29px 0; border-bottom: 1px solid #eee8e1; }
.section-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.section-name { width: 180px; padding: 8px 10px; border-color: #d9ccf4; background: #faf7ff; font-weight: 800; color: var(--purple); }
.confidence-chip { align-self: center; padding: 5px 8px; border-radius: 999px; color: #276d65; background: var(--teal-pale); font-size: 9px; font-weight: 850; white-space: nowrap; }
.confidence-chip.low { color: #915327; background: var(--sun-pale); }
.lyrics-alignment-chip { padding: 5px 8px; border-radius: 999px; color: #795612; background: var(--sun-pale); font-size: 9px; font-weight: 850; white-space: nowrap; }
.instrumental-chip { padding: 5px 8px; border-radius: 999px; color: #08758a; background: #e5f9fa; font-size: 9px; font-weight: 850; white-space: nowrap; }
.instrumental-section .rendered-section { border-left-color: var(--teal); }
.section-order-controls { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #d7edf0; border-radius: 10px; background: #f5fcfc; }
.section-order-controls button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #08758a; background: white; font-size: 14px; font-weight: 900; cursor: pointer; }
.section-order-controls button:hover:not(:disabled), .section-order-controls button:focus-visible { color: white; background: var(--teal); outline: none; }
.section-order-controls button:disabled { opacity: .3; cursor: not-allowed; }
.section-order-controls label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.section-order-controls select { width: 45px; padding: 5px; border: 1px solid #b9dfe2; border-radius: 7px; color: #075f73; background: white; font-size: 9px; font-weight: 850; }
.lyrics-alignment-chip.exact { color: #276d65; background: var(--teal-pale); }
.section-repeat-control { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.section-repeat-control select { padding: 6px; border: 1px solid #e9c86f; border-radius: 7px; color: #754f06; background: #fff9e8; font-size: 9px; font-weight: 850; }
.section-repeat-marker { display: inline-block; margin-left: 9px; padding: 3px 7px; border-radius: 999px; color: #754f06; background: var(--sun-pale); font: 900 .48em/1.3 ui-rounded, system-ui, sans-serif; vertical-align: middle; }
.chart-fit { display: grid; gap: 9px; }
.chart-fit-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chart-fit-heading .panel-label { margin: 0; }
.chart-fit output { color: var(--teal); font-size: 10px; font-weight: 850; }
.chart-fit input[type="range"] { width: 100%; accent-color: var(--teal); }
.rehearsal-player { display: grid; gap: 8px; background: linear-gradient(145deg, #effdfe, #fffaf0); }
.rehearsal-player-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rehearsal-player-heading .panel-label { margin: 0; }
.rehearsal-player-heading > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: white; background: var(--teal); }
.rehearsal-player > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.rehearsal-player > strong { color: #08758a; font-size: 10px; }
.rehearsal-player.playing { border-color: #8ddde2; box-shadow: inset 0 0 0 2px rgba(22,183,199,.1); }
.rehearsal-settings { border-top: 1px solid rgba(8,127,159,.14); }
.rehearsal-settings summary { padding: 8px 0 2px; color: #08758a; cursor: pointer; font-size: 9px; font-weight: 850; }
.rehearsal-settings[open] { display: grid; gap: 9px; }
.rehearsal-settings > label { display: grid; gap: 4px; color: #554b5e; font-size: 8px; font-weight: 800; }
.rehearsal-settings select { width: 100%; padding: 7px; border-color: #b9dfe2; background: white; color: #315d66; }
.rehearsal-volume > span { display: flex; justify-content: space-between; gap: 8px; }
.rehearsal-volume output { color: #087f9f; }
.rehearsal-volume input { width: 100%; accent-color: var(--teal); }
.audition-section, .line-audition { border: 1px solid #b9dfe2; border-radius: 9px; color: #087f9f; background: #f2fbfb; font-size: 9px; font-weight: 850; cursor: pointer; }
.audition-section { margin-left: auto; padding: 7px 10px; }
.audition-section + .edit-timing, .edit-timing + .align-words { margin-left: 0; }
.audition-section.playing, .line-audition.playing { color: white; border-color: var(--teal); background: var(--teal); }
.edit-timing { padding: 7px 10px; border: 1px solid #f1cc72; border-radius: 9px; color: #855d08; background: #fff9e8; font-size: 9px; font-weight: 850; cursor: pointer; }
.edit-timing.active { color: #70400b; border-color: var(--sun); background: var(--sun-pale); box-shadow: 0 0 0 2px rgba(255,200,87,.2); }
.align-words { margin-left: auto; padding: 7px 11px; border: 1px solid #d9ccf4; border-radius: 9px; color: var(--purple); background: #faf7ff; font-size: 10px; font-weight: 850; cursor: pointer; }
.icon-button { width: 34px; border: 0; border-radius: 9px; background: var(--coral-pale); color: #ba5549; cursor: pointer; font-size: 20px; }
.delete-section { padding: 7px 10px; border: 1px solid #f0b8aa; border-radius: 9px; color: #a94b3a; background: #fff5f1; font-size: 9px; font-weight: 850; cursor: pointer; }
.delete-section:hover, .delete-section:focus-visible { border-color: var(--coral); color: #863728; background: var(--coral-pale); outline: 2px solid rgba(255,122,89,.17); }
.delete-section:disabled { color: #a59da0; border-color: #ded7d8; background: #f7f5f5; cursor: not-allowed; }
.section-removal-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 17px 0 -4px; padding: 11px 13px; border: 1px solid #9ed9dd; border-radius: 12px; color: #075f73; background: linear-gradient(135deg, #eefcfc, #fff9eb); box-shadow: 0 5px 14px rgba(7,95,115,.06); }
.section-removal-status[hidden] { display: none; }
.section-removal-status > span { display: grid; gap: 2px; }
.section-removal-status strong { font-size: 11px; }
.section-removal-status small { color: #60747a; font-size: 9px; line-height: 1.4; }
.section-removal-status button { padding: 8px 13px; border: 1px solid var(--teal); border-radius: 9px; color: white; background: var(--teal); font-size: 9px; font-weight: 900; cursor: pointer; }
.advanced-section-editors { margin: 7px 0 13px; border: 1px solid #e5ddec; border-radius: 11px; background: #fdfbff; }
.advanced-section-editors summary { padding: 9px 11px; color: #776b80; cursor: pointer; font-size: 10px; font-weight: 800; }
.advanced-section-editors .section-editors { padding: 0 10px 10px; }
.section-editors { display: grid; grid-template-columns: .9fr 1.25fr; gap: 10px; }
.section-editors label > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--ink); font-size: 10px; font-weight: 850; }
.section-editors label small { color: var(--muted); font-weight: 550; }
.bars-input, .lyrics-input { width: 100%; padding: 11px; resize: vertical; line-height: 1.55; color: #6f657a; background: #fffcf8; }
.bars-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lyrics-input { font-family: inherit; }
.bars-input:focus, .lyrics-input:focus { border-color: var(--purple); outline: 3px solid var(--purple-pale); background: white; }
.rendered-section { margin-top: 20px; }.rendered-section h3 { margin: 0 0 13px; color: var(--purple); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.chart-pair { margin-bottom: 19px; }
.chart-pair:last-child { margin-bottom: 0; }
.chart-line-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0 0 5px; }
.line-tool-button { position: relative; display: inline-grid; place-items: center; width: 29px; height: 27px; min-width: 29px; margin: 0; padding: 0; border: 1px solid #d8e2e4; border-radius: 8px; color: #536871; background: #fbfdfd; font-family: inherit; font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer; }
.line-tool-button:hover, .line-tool-button:focus-visible { z-index: 1; color: white; border-color: var(--teal); outline: 2px solid rgba(22,183,199,.18); background: var(--teal); }
.line-tool-button:disabled { color: #bcc5c8; border-color: #e5e9ea; background: #f7f8f8; cursor: not-allowed; }
.line-tool-button:disabled:hover { color: #bcc5c8; border-color: #e5e9ea; outline: 0; background: #f7f8f8; }
.line-tool-button small { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border: 2px solid white; border-radius: 999px; color: white; background: var(--purple); font-size: 7px; font-weight: 900; line-height: 1; }
.line-audition { display: inline-grid; }
.line-lyric-edit { border-color: #d9ccf4; color: var(--purple); background: #faf7ff; }
.line-lyric-edit:hover, .line-lyric-edit:focus-visible { color: white; border-color: var(--purple); background: var(--purple); outline: 2px solid rgba(111,77,170,.15); }
.line-run-add { border-color: #9cced3; color: #08758a; background: #f1fbfc; }
.line-run-add:hover, .line-run-add:focus-visible { color: white; background: var(--teal); outline: 2px solid rgba(22,183,199,.15); }
.line-repeat-control { border-color: #ead080; color: #77570c; background: #fff9e8; }
.line-repeat-control:hover, .line-repeat-control:focus-within { color: #62470a; border-color: var(--sun); outline: 2px solid rgba(255,200,87,.22); background: var(--sun-pale); }
.line-repeat-control select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.line-delete { border-color: #f0c8c0; color: #a94b3a; background: #fff8f5; }
.line-delete:hover, .line-delete:focus-visible { border-color: var(--coral); color: white; background: var(--coral); }
.line-annotation-editor { display: grid; grid-template-columns: minmax(170px, 1.35fr) repeat(3, minmax(105px, .7fr)); gap: 8px; margin-top: 8px; padding: 11px; border: 1px solid #9cced3; border-radius: 11px; background: linear-gradient(135deg, #effcfd, #fffaf0); }
.line-annotation-editor > div:first-child, .line-annotation-actions { grid-column: 1 / -1; }
.line-annotation-editor > div:first-child { display: grid; gap: 2px; color: #075f73; }
.line-annotation-editor > div:first-child small { color: var(--muted); font-size: 8px; }
.line-annotation-editor label { display: grid; gap: 4px; color: #526970; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.line-annotation-editor input, .line-annotation-editor select { width: 100%; padding: 8px; border: 1px solid #b9dfe2; border-radius: 8px; color: var(--ink); background: white; font: inherit; }
.line-annotation-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.line-annotation-actions button { padding: 7px 9px; border: 0; border-radius: 7px; color: #52606a; background: #eef1f3; font-size: 8px; font-weight: 850; cursor: pointer; }
.line-annotation-actions .save-line-run { color: white; background: var(--teal); }
.inline-bass-run { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; padding: 6px 9px; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; color: #164c58; background: rgba(22,183,199,.07); }
.inline-bass-run.in-chord-area { margin: 0 0 4px; padding: 7px 10px; border-left-color: var(--purple); color: var(--ink); background: linear-gradient(90deg, rgba(111,77,170,.09), rgba(22,183,199,.06)); }
.inline-bass-run.in-chord-area > small { color: var(--purple); }
.inline-bass-run.in-chord-area > div { font-size: calc(14px * var(--chord-scale, 1)); }
.inline-bass-run.in-chord-grid { min-width: 0; min-height: 38px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin: 0; padding: 5px 10px; overflow: hidden; border: 0; border-right: 2px solid var(--ink); border-radius: 0; color: var(--ink); background: linear-gradient(90deg, rgba(111,77,170,.11), rgba(22,183,199,.08)); }
.inline-bass-run.in-chord-grid > small { color: var(--purple); font-size: 6px; }
.inline-bass-run.in-chord-grid > div { max-width: 100%; font-size: calc(13px * var(--chord-scale, 1)); line-height: 1.1; }
.inline-bass-run.editable-run { cursor: pointer; font-family: inherit; text-align: left; }
.inline-bass-run.editable-run:hover, .inline-bass-run.editable-run:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; filter: saturate(1.15); }
.run-lyric-spacer { background: linear-gradient(90deg, rgba(111,77,170,.025), transparent); }
.inline-bass-run > small { color: #08758a; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.inline-bass-run > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: calc(10px * var(--chord-scale, 1)); font-weight: 900; }
.inline-bass-run i { color: #69aab3; font-style: normal; }
.inline-bass-run-bar { margin: 0 2px; font-size: 14px; font-weight: 500; }
.line-repeat-marker { position: absolute; right: 0; bottom: 2px; padding: 3px 7px; border-radius: 999px; color: #754f06; background: var(--sun-pale); font-size: 9px; }
.line-performance-cue { display: inline-block; margin: 3px 0 0 7px; color: var(--purple-dark); font-size: 9px; font-weight: 850; font-style: italic; }
.legacy-cue-chord-row { display: flex; flex-wrap: wrap; align-items: end; gap: 5px 15px; margin: 5px 5px 0; }
.legacy-cue-chord-row button { width: auto; min-height: 0; padding: 0; border: 0; color: #075f73; background: transparent; font: 850 calc(17px * var(--chord-scale, 1))/1.15 ui-rounded, "Arial Rounded MT Bold", sans-serif; cursor: pointer; }
.legacy-cue-chord-row button:hover, .legacy-cue-chord-row button:focus-visible { color: var(--teal); outline: 2px solid rgba(22,183,199,.18); outline-offset: 2px; }
.chart-pair { position: relative; }
.chart-pair.has-line-repeat { padding-right: 38px; }
.chart-pair.editing-lyric-line > .lyric-line,
.chart-pair.editing-lyric-line > .inline-lyric-line,
.chart-pair.editing-lyric-line > .saved-aligned-lyric-grid,
.chart-pair.editing-lyric-line > .leading-lyric-strip,
.chart-pair.editing-lyric-line > .direct-word-alignment { display: none; }
.inline-lyric-line-editor { display: grid; gap: 7px; margin-top: 5px; padding: 11px; border: 2px solid #bca7e2; border-radius: 12px; background: linear-gradient(135deg, #faf7ff, #fffdf8); box-shadow: 0 7px 18px rgba(76,50,121,.09); }
.inline-lyric-line-editor label { display: grid; gap: 5px; color: var(--purple-dark); font-size: 10px; }
.inline-lyric-line-input { width: 100%; padding: 10px 11px; border: 2px solid var(--purple); border-radius: 9px; color: #393143; background: white; font: 650 15px/1.4 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
.inline-lyric-line-input:focus { outline: 3px solid var(--purple-pale); }
.inline-lyric-line-editor > small { color: #746a7d; font-size: 8px; line-height: 1.45; }
.inline-lyric-line-editor code { color: #855d08; background: #fff4c9; }
.inline-lyric-line-editor > div { display: flex; gap: 6px; }
.inline-lyric-line-editor button { padding: 7px 10px; border: 1px solid #cfc2e5; border-radius: 8px; color: var(--purple); background: white; font-size: 9px; font-weight: 850; cursor: pointer; }
.inline-lyric-line-editor .save-inline-lyric-line { color: white; border-color: var(--purple); background: var(--purple); }
.chart-pair.audition-playing { padding: 7px; border-radius: 10px; background: #effcfc; box-shadow: 0 0 0 2px rgba(22,183,199,.13); }
.song-section.audition-playing > .rendered-section { border-left: 3px solid var(--teal); padding-left: 10px; }
.bar-line { display: grid; grid-template-columns: repeat(var(--line-columns, 4), 1fr); border-left: 2px solid var(--ink); }
.measure { min-height: 38px; min-width: 0; padding: 8px 12px; overflow: hidden; border: 0; border-right: 2px solid var(--ink); border-radius: 0; color: inherit; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(19px * var(--chord-scale, 1)) ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.measure-chord-symbol { display: inline-block; }
.chord-label-stack { display: inline-grid; justify-items: start; align-items: end; gap: .12em; max-width: 100%; vertical-align: bottom; }
.chord-symbol-text { display: inline; }
.chord-number-badge { display: inline-grid; min-width: 1.75em; min-height: 1.42em; place-items: center; margin: 0; padding: .12em .48em; border: 1px solid color-mix(in srgb, var(--teal) 42%, transparent); border-radius: 999px; color: #08758a; background: #e8fafa; font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif; font-size: calc(1em - 1px); font-weight: 900; line-height: 1; white-space: nowrap; }
.chord-number-toggle.is-active, .chord-number-toggle[aria-pressed="true"],
.chord-symbol-toggle.is-active, .chord-symbol-toggle[aria-pressed="true"] { color: white; border-color: #08758a; background: #08758a; }
.music-labels-hidden :is(.inline-bass-run, .compact-run-only, .compact-run-segment > strong, .bass-run-chart) { display: none !important; }
.chord-performance-cue { display: inline-block; margin-left: .45em; color: var(--purple-dark); font: 800 .48em/1.15 ui-rounded, "Arial Rounded MT Bold", sans-serif; font-style: italic; vertical-align: .18em; }
.measure.measure-continuation { border-right-width: 1px; border-right-style: dashed; border-right-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.measure.measure-end { border-right-width: 2px; border-right-style: solid; }
button.measure { cursor: pointer; }
button.measure:hover, button.measure:focus-visible { color: var(--purple); background: var(--purple-pale); outline: 2px solid var(--purple); outline-offset: -2px; }
.inline-chord-editor { position: relative; z-index: 3; display: grid; gap: 6px; min-width: 0; padding: 5px; border: 2px solid var(--purple); border-radius: 9px; background: #fff; box-shadow: 0 6px 18px rgba(68,43,117,.18); }
.inline-chord-input { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid #d9ccf4; border-radius: 6px; color: var(--purple-dark); background: #fff; font: 800 calc(17px * var(--chord-scale, 1)) ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.inline-chord-help { color: var(--muted); font-size: 7px; line-height: 1.2; }
.inline-chord-beats { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5b4a23; font-size: 8px; font-weight: 850; }
.inline-chord-beats select { min-width: 92px; padding: 6px 8px; border: 1px solid #e9c86f; border-radius: 6px; color: #684f17; background: #fffaf0; font-weight: 800; }
.inline-chord-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.inline-chord-actions button { min-width: 0; padding: 5px 3px; border: 0; border-radius: 5px; color: #65566f; background: #f3eef8; font-size: 7px; font-weight: 850; cursor: pointer; }
.inline-chord-actions button.primary-action { color: #fff; background: var(--purple); }
.inline-chord-actions button.show-chord-action { color: #075f73; background: #e9fbfb; }
.inline-chord-actions button.build-chord-action { color: #855d08; background: #fff6dc; }
.inline-chord-actions button.bass-run-action { color: #075f73; background: #e9fbfb; }
.inline-chord-actions button.remove-chord-action { color: #a33f3b; background: #fff0ed; }
.piano-chord-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; overflow: hidden auto; border: 0; border-radius: 22px; color: var(--ink); background: #fffdf9; box-shadow: 0 24px 70px rgba(3,39,58,.3); }
.piano-chord-dialog::backdrop { background: rgba(3,27,42,.68); backdrop-filter: blur(4px); }
.piano-chord-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; color: white; background: linear-gradient(135deg, var(--navy), #0b4051); }
.piano-chord-dialog > header p { margin: 0 0 4px; color: #6fe3e4; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.piano-chord-dialog > header h2 { margin: 0; color: white; font: 750 28px/1.05 Georgia, serif; }
.piano-chord-dialog > header .icon-button { flex: 0 0 auto; background: rgba(255,255,255,.13); color: white; }
.piano-chord-dialog-actions { display: flex; align-items: center; gap: 8px; }
.piano-chord-audio { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid rgba(111,227,228,.65); border-radius: 10px; color: white; background: rgba(22,183,199,.16); cursor: pointer; }
.piano-chord-audio span { font-size: 14px; line-height: 1; }
.piano-chord-audio small { font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.piano-chord-audio:hover, .piano-chord-audio:focus-visible, .piano-chord-audio.playing { color: #062b3a; background: #75e3e3; outline: none; }
#piano-chord-guide-content { display: grid; gap: 17px; padding: 23px; }
.piano-chord-keyboard { overflow: hidden; padding: 12px; border: 1px solid #b9dfe2; border-radius: 15px; background: linear-gradient(180deg, #eafafb, #fff); box-shadow: inset 0 3px 10px rgba(3,39,58,.06); }
.piano-chord-keyboard svg { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; filter: drop-shadow(0 5px 4px rgba(3,39,58,.12)); }
.piano-white-key { fill: #fff; stroke: #526471; stroke-width: 1.2; }
.piano-black-key { fill: #102c3b; stroke: #061923; stroke-width: 1; }
.piano-key.is-active .piano-white-key { fill: #75e3e3; stroke: #08758a; stroke-width: 2; }
.piano-key.piano-black.is-active .piano-black-key { fill: #ff7a59; stroke: #b74334; stroke-width: 2; }
.piano-key.is-bass .piano-white-key { fill: #ffc857; }
.piano-key.piano-black.is-bass .piano-black-key { fill: #ffc857; stroke: #a76f00; }
.piano-key text { fill: #07364a; font: 850 10px ui-rounded, "Arial Rounded MT Bold", sans-serif; pointer-events: none; }
.piano-key.piano-black text { fill: white; font-size: 8px; }
.piano-key.is-bass text { fill: #5d3c00; }
.piano-hand-guide { display: grid; grid-template-columns: minmax(120px, .45fr) minmax(0, 1.55fr); gap: 10px; }
.piano-hand-guide > span { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #d8e9ea; border-radius: 12px; background: white; }
.piano-hand-guide > .piano-left-hand-card { border-color: #e4bb4a; color: #5d3c00; background: #fff1bd; box-shadow: inset 0 0 0 1px rgba(255,200,87,.28); }
.piano-hand-guide > .piano-left-hand-card small,
.piano-hand-guide > .piano-left-hand-card strong { color: #6a4700; }
.piano-hand-guide small { color: #08758a; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.piano-hand-guide strong { color: var(--purple-dark); font: 850 16px/1.4 ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.chord-guide-info { position: relative; justify-self: end; margin-top: -8px; }
.chord-guide-info > summary { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #b9dfe2; border-radius: 50%; color: #08758a; background: #f2fbfb; font-size: 12px; font-weight: 900; cursor: pointer; list-style: none; }
.chord-guide-info > summary::-webkit-details-marker { display: none; }
.chord-guide-info > summary:hover, .chord-guide-info > summary:focus-visible { color: white; background: var(--teal); outline: none; }
.chord-guide-info > p { position: absolute; z-index: 3; right: 0; bottom: 34px; width: min(310px, calc(100vw - 76px)); display: grid; gap: 4px; margin: 0; padding: 12px 14px; border: 1px solid #b9dfe2; border-radius: 12px; color: #315d66; background: #fffdf9; box-shadow: 0 12px 30px rgba(3,39,58,.18); }
.chord-guide-info strong { color: var(--navy); font: 750 13px Georgia, serif; }
.chord-guide-info p > span { font-size: 10px; line-height: 1.5; }
.chord-guide-info small { color: #91652a; font-size: 9px; font-weight: 800; }
.chord-guide-info small[hidden] { display: none; }
.piano-chord-note, .piano-chord-message { margin: 0; color: #655d6c; font-size: 10px; line-height: 1.55; }
.piano-chord-audio-status { margin: -6px 2px -6px; color: #08758a; font-size: 9px; font-weight: 750; }
.piano-chord-note { padding: 11px 13px; border-radius: 10px; background: #fff6dc; }
.piano-chord-note span { margin-right: 6px; color: var(--coral); }
.piano-chord-message { padding: 24px; }
.chord-guide-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 15px 23px 0; padding: 4px; border-radius: 12px; background: #e8f1f2; }
.chord-guide-tabs button { min-height: 36px; border: 0; border-radius: 9px; color: #52646a; background: transparent; font-size: 10px; font-weight: 850; cursor: pointer; }
.chord-guide-tabs button[aria-selected="true"] { color: #075f73; background: white; box-shadow: 0 3px 9px rgba(7,45,58,.1); }
#guitar-chord-guide-content { display: grid; gap: 17px; padding: 23px; }
#guitar-chord-guide-content[hidden] { display: none; }
.chord-guide-stack { display: flex; flex-direction: column; }
.piano-chord-dialog[data-dual-guide="true"] #piano-chord-guide-content,
.piano-chord-dialog[data-dual-guide="true"] #guitar-chord-guide-content { gap: 10px; padding-block: 14px; }
.piano-chord-dialog[data-dual-guide="true"] .guitar-chord-diagram { min-height: 150px; }
.piano-chord-dialog[data-dual-guide="true"] .guitar-chord-diagram svg { width: min(100%, 220px); }
.guitar-chord-diagram { display: grid; place-items: center; min-height: 255px; padding: 10px; border: 1px solid #b9dfe2; border-radius: 15px; background: linear-gradient(180deg, #eafafb, #fff); }
.guitar-chord-diagram svg { display: block; width: min(100%, 340px); height: auto; }
.guitar-string, .guitar-fret { stroke: #526471; stroke-width: 2; }
.guitar-nut { stroke: #071b29; stroke-width: 6; }
.guitar-dot { fill: #16b7c7; stroke: #08758a; stroke-width: 2; }
.guitar-marker, .guitar-fret-label, .guitar-string-label { fill: #31515e; font: 850 13px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.guitar-dot-label { fill: white; font: 900 11px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
@media (max-width: 560px) {
  .piano-chord-dialog > header { padding: 17px; }
  #piano-chord-guide-content { padding: 16px; }
  .piano-hand-guide { grid-template-columns: 1fr; }
  .piano-chord-audio { width: 36px; justify-content: center; padding: 7px; }
  .piano-chord-audio small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .piano-chord-keyboard { padding: 7px; }
  .piano-chord-keyboard svg { min-width: 0; }
  .chord-guide-tabs { margin: 12px 16px 0; }
  #guitar-chord-guide-content { padding: 16px; }
  .piano-chord-dialog[data-dual-guide="true"] .piano-hand-guide { grid-template-columns: minmax(90px, .55fr) minmax(0, 1.45fr); }
  .piano-chord-dialog[data-dual-guide="true"] .piano-hand-guide > span { padding: 9px 10px; }
}
.chord-builder-dialog { width: min(790px, calc(100vw - 24px)); max-height: min(820px, calc(100vh - 24px)); padding: 0; overflow: hidden auto; border: 0; border-radius: 22px; color: var(--ink); background: #fffdf9; box-shadow: 0 24px 70px rgba(3,39,58,.3); }
.chord-builder-dialog::backdrop { background: rgba(3,27,42,.7); backdrop-filter: blur(4px); }
.chord-builder-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 23px; color: white; background: linear-gradient(135deg, #0b1d2d, #08758a); }
.chord-builder-dialog > header p { margin: 0 0 4px; color: #71e9e4; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.chord-builder-dialog > header h2 { margin: 0; color: white; font: 750 27px/1.05 Georgia, serif; }
.chord-builder-dialog > header span { display: block; margin-top: 5px; color: #c2ecee; font-size: 9px; }
.chord-builder-dialog > header .icon-button { flex: 0 0 auto; color: white; background: rgba(255,255,255,.14); }
.approve-chart-dialog { width: min(480px, calc(100vw - 28px)); padding: 30px; overflow: hidden; border: 1px solid #b8dfe0; border-radius: 24px; color: var(--ink); background: linear-gradient(155deg, #ffffff, #f0fbfb); box-shadow: 0 24px 70px rgba(3,39,58,.3); text-align: center; }
.approve-chart-dialog::backdrop { background: rgba(3,27,42,.7); backdrop-filter: blur(4px); }
.approve-chart-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; color: white; background: linear-gradient(135deg, var(--aqua), var(--aqua-dark)); font-size: 26px; font-weight: 900; box-shadow: 0 9px 20px rgba(8,127,159,.22); }
.approve-chart-dialog > p { margin: 0; color: var(--aqua-dark); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.approve-chart-dialog > h2 { margin: 5px 0 9px; color: var(--navy); font-size: 25px; }
.approve-chart-dialog > span { display: block; color: #586b72; font-size: 12px; line-height: 1.55; }
.approve-chart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 12px; }
.approve-chart-dialog > small { display: block; color: #708087; font-size: 9px; line-height: 1.45; }
.organize-song-dialog { width: min(900px, calc(100vw - 24px)); max-height: min(860px, calc(100vh - 24px)); padding: 0; overflow: hidden auto; border: 0; border-radius: 24px; color: var(--ink); background: #fffdf9; box-shadow: 0 28px 80px rgba(3,39,58,.34); }
.organize-song-dialog::backdrop { background: rgba(3,27,42,.74); backdrop-filter: blur(5px); }
.organize-song-dialog > header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 19px 22px; color: white; background: linear-gradient(135deg, #0b1d2d, #087c8a 68%, #18c4c7); }
.organize-song-dialog > header p { margin: 0 0 3px; color: #85f1ec; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.organize-song-dialog > header h2 { margin: 0; color: white; font: 750 27px/1.1 Georgia, serif; }
.organize-song-dialog > header span { display: block; margin-top: 4px; color: #d1f4f3; font-size: 10px; }
.organize-song-dialog > header .icon-button { color: white; background: rgba(255,255,255,.15); }
.organize-song-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; color: white; background: rgba(255,255,255,.13); font-size: 23px; }
#approved-song-organization-form { display: grid; gap: 16px; padding: 20px 22px 22px; }
.organize-main-category { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border: 1px solid #cfe5e4; border-radius: 14px; background: #f1fbfa; }
.organize-main-category label, .organize-custom-tags { display: grid; gap: 6px; color: var(--navy); font-size: 10px; font-weight: 850; }
#approval-custom-category-field[hidden] { display: none; }
.organize-main-category select, .organize-main-category input, .organize-custom-tags input { min-height: 42px; padding: 9px 11px; border: 1px solid #cbd9da; border-radius: 9px; color: var(--ink); background: white; font: inherit; font-size: 11px; }
.organize-tag-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.organize-tag-groups fieldset { min-width: 0; margin: 0; padding: 13px; border: 1px solid #e1dded; border-radius: 14px; background: white; }
.organize-tag-groups legend { padding: 0 6px; color: var(--navy); font-size: 11px; font-weight: 900; }
.organize-tag-groups legend small { margin-left: 4px; color: #7d898e; font-size: 8px; font-weight: 650; }
.tag-choice-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-choice { position: relative; cursor: pointer; }
.tag-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tag-choice span { display: block; padding: 7px 9px; border: 1px solid #d9e2e3; border-radius: 999px; color: #65747a; background: #f8faf9; font-size: 8px; font-weight: 780; line-height: 1.15; transition: .15s ease; }
.tag-choice input:focus-visible + span { outline: 3px solid rgba(24,196,199,.25); outline-offset: 2px; }
.tag-choice input:checked + span { border-color: #18aeb7; color: #075a68; background: #dff8f6; box-shadow: inset 0 0 0 1px rgba(24,174,183,.16); }
.organize-tag-groups fieldset:nth-child(2) .tag-choice input:checked + span { border-color: #8c69cd; color: #563e8a; background: #f0eafd; }
.organize-tag-groups fieldset:nth-child(3) .tag-choice input:checked + span { border-color: #f0b43d; color: #7a5200; background: #fff3cf; }
.organize-tag-groups fieldset:nth-child(4) .tag-choice input:checked + span { border-color: #f27c62; color: #8b3b2a; background: #ffebe5; }
.organize-custom-tags small { color: #7c898e; font-size: 8px; font-weight: 600; }
.organization-summary { min-height: 18px; margin: 0; color: #42727a; font-size: 9px; line-height: 1.45; }
.approval-suggestion-note { display: grid; gap: 3px; margin: 16px 22px 0; padding: 11px 13px; border: 1px solid #a6dedc; border-radius: 14px; color: #315f68; background: linear-gradient(135deg, #e8faf8, #fff9df); font-size: 9px; line-height: 1.4; }
.approval-suggestion-note[hidden] { display: none; }
.approval-suggestion-note strong { color: #087482; font-size: 10px; }
.tag-choice.suggested span { border-style: dashed; }
.tag-choice span i { margin-left: 5px; color: #0b8996; font-style: normal; font-size: .85em; }
.organize-song-actions { display: flex; justify-content: flex-end; gap: 9px; }
.chord-builder-body { display: grid; gap: 14px; padding: 21px; }
.chord-builder-instructions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.chord-builder-instructions > span, .chord-builder-results > div:first-child > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 10px; font-weight: 900; }
.chord-builder-instructions p, .chord-builder-results p { display: grid; gap: 2px; margin: 0; color: #6e6376; font-size: 9px; line-height: 1.35; }
.chord-builder-instructions strong, .chord-builder-results strong { color: var(--ink); font-size: 11px; }
.chord-builder-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chord-builder-instructions button { padding: 7px 10px; border: 1px solid #d8cdef; border-radius: 8px; color: var(--purple); background: #faf7ff; font-size: 8px; font-weight: 850; cursor: pointer; }
.chord-builder-instructions button.hear-builder-notes { color: #08758a; border-color: #91dfe2; background: #ecfcfc; }
.chord-builder-instructions button.hear-builder-notes.playing { color: white; border-color: var(--teal); background: var(--teal); }
.chord-builder-instructions button:disabled { cursor: default; opacity: .45; }
.chord-builder-keyboard { height: 158px; overflow-x: auto; overflow-y: hidden; padding: 9px; border: 1px solid #b9dfe2; border-radius: 15px; background: linear-gradient(180deg, #eafafb, #fff); box-shadow: inset 0 3px 10px rgba(3,39,58,.06); }
.chord-builder-keyboard-inner { position: relative; height: 140px; filter: drop-shadow(0 5px 4px rgba(3,39,58,.12)); }
.chord-builder-key { position: absolute; top: 0; padding: 0; border-radius: 0; cursor: pointer; }
.chord-builder-key.white { z-index: 1; width: 34px; height: 140px; border: 1px solid #64727b; color: #48606b; background: white; }
.chord-builder-key.black { z-index: 2; width: 22px; height: 87px; border: 1px solid #071c27; border-radius: 0 0 5px 5px; color: white; background: #102c3b; }
.chord-builder-key span { position: absolute; right: 0; bottom: 8px; left: 0; overflow: hidden; font-size: 7px; font-weight: 900; text-align: center; white-space: nowrap; }
.chord-builder-key.black span { bottom: 7px; font-size: 6px; }
.chord-builder-key:hover, .chord-builder-key:focus-visible { outline: 3px solid #ffc857; outline-offset: -3px; }
.chord-builder-key.white.selected { color: #064c5c; background: #75e3e3; box-shadow: inset 0 -7px 0 #16b7c7; }
.chord-builder-key.black.selected { color: white; background: #ff7a59; box-shadow: inset 0 -6px 0 #c94e3f; }
.chord-builder-key.bass { color: #503600; background: #ffc857; box-shadow: inset 0 -7px 0 #e29d18; }
.chord-builder-notes { display: flex; flex-wrap: wrap; gap: 6px; min-height: 27px; align-items: center; }
.chord-builder-notes span { padding: 6px 9px; border-radius: 999px; color: #08758a; background: #e8fafa; font-size: 8px; font-weight: 850; }
.chord-builder-notes span.bass { color: #76520b; background: #fff0ba; }
.chord-builder-notes em { color: #9a919f; font-size: 9px; }
.chord-builder-audio-status { margin: -7px 2px 0; color: #08758a; font-size: 8px; font-weight: 750; }
.chord-builder-results { display: grid; gap: 10px; padding: 13px; border: 1px solid #e2d8ef; border-radius: 14px; background: linear-gradient(135deg, #faf7ff, #f0fcfc); }
.chord-builder-results > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.chord-builder-results small { color: #786e81; font-size: 8px; font-weight: 550; line-height: 1.4; }
.chord-builder-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 7px; }
.chord-builder-candidate { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; padding: 10px; border: 1px solid #d7cbed; border-radius: 10px; color: var(--purple-dark); background: white; cursor: pointer; text-align: left; }
.chord-builder-candidate.best { color: #064c5c; border-color: #72d8dd; background: #ebffff; box-shadow: 0 4px 12px rgba(8,117,138,.09); }
.chord-builder-candidate span { font: 850 17px/1 ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.chord-builder-candidate small { grid-column: 1 / -1; color: #81768a; font-size: 7px; }
.chord-builder-candidate strong { color: var(--teal-dark); font-size: 7px; white-space: nowrap; }
.chord-builder-tip { margin: 0; padding: 10px 12px; border-radius: 10px; color: #76520b; background: #fff6dc; font-size: 9px; line-height: 1.45; }
.chord-builder-tip span { margin-right: 6px; color: var(--coral); }
@media (max-width: 560px) {
  .chord-builder-dialog > header { padding: 17px; }
  .chord-builder-body { padding: 14px; }
  .chord-builder-instructions { grid-template-columns: auto 1fr; }
  .chord-builder-tools { grid-column: 2; justify-content: flex-start; }
  .chord-builder-keyboard { height: 148px; }
  .chord-builder-keyboard-inner { height: 130px; }
  .chord-builder-key.white { height: 130px; }
  .chord-builder-candidates { grid-template-columns: 1fr 1fr; }
}
.measure[data-confidence] { position: relative; }.measure[data-confidence]::after { content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }.measure.confidence-low::after { background: var(--sun); box-shadow: 0 0 0 3px var(--sun-pale); }
.measure.review-focus { animation: review-flash 1.4s ease-out; }
@keyframes review-flash { 0%, 35% { background: #ffe58c; } 100% { background: transparent; } }
@keyframes lyric-review-flash {
  0%, 50% { color: #03273a; background: #82edf0; box-shadow: 0 0 0 6px rgba(22,183,199,.22); transform: translateY(-2px); }
  100% { box-shadow: none; transform: none; }
}
.lyric-line { margin: 7px 5px 0; color: #393143; font: 550 calc(16px * var(--chart-text-scale, 1))/1.55 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; white-space: pre-wrap; }
.chart-pair.plain-chord-line > .bar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 5px 15px;
  margin: 5px 5px 0;
  border-left: 0;
}
.chart-pair.plain-chord-line > .bar-line > .measure {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: #075f73;
  text-overflow: clip;
  font-size: calc(17px * var(--chord-scale, 1));
  font-weight: 850;
  line-height: 1.15;
}
.chart-pair.plain-chord-line > .lyric-line {
  margin: 2px 5px 0;
  color: #393143;
  font-size: calc(16px * var(--chart-text-scale, 1));
  font-weight: 550;
  line-height: 1.45;
}
/* Approved charts must never depend on import metadata or lyric anchors for
   their basic chord typography. If a notation row remains visible, normalize
   it directly to the same compact chart treatment used everywhere else. */
.chart-paper.chart-locked .bar-line:not(.has-inline-run) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 5px 15px;
  margin: 5px 5px 0;
  border-left: 0;
}
.chart-paper.chart-locked .bar-line:not(.has-inline-run) > .measure {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: #075f73 !important;
  text-overflow: clip;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: calc(12px * var(--chord-scale, 1)) !important;
  font-weight: 900 !important;
  line-height: 1.05;
}
.chart-paper.chart-locked .bar-line:not(.has-inline-run) + .lyric-line {
  margin: 2px 5px 0;
  color: #393143;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: calc(15px * var(--chart-text-scale, 1));
  font-weight: 520;
  line-height: 1.32;
}
.chart-paper.chart-locked :is(.compact-chord-heading, .compact-chord-only) {
  color: #075f73 !important;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif !important;
  font-size: calc(12px * var(--chord-scale, 1)) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}
.chart-paper.chart-locked .compact-plain-lyrics {
  color: #393143;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: calc(15px * var(--chart-text-scale, 1));
  font-weight: 520;
  line-height: 1.32;
}

/* Compact fallback chords are still chord-guide buttons. Keep their reading
   color explicit on the dark performance surface instead of inheriting the
   background-facing button color. */
.performance-chart :is(
  .compact-chord-heading.view-chord-guide,
  .compact-chord-only.view-chord-guide
) {
  color: #65eee7 !important;
  font-size: max(
    calc(1rem * var(--performance-scale, 1)),
    calc(1rem * var(--performance-chord-scale, 1))
  ) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

.performance-view.performance-monochrome {
  color: #111;
  background: #fff;
}

.performance-monochrome .performance-head {
  border-bottom-color: #bdbdbd;
  background: rgba(255, 255, 255, .97);
}

.performance-monochrome .performance-brand img {
  filter: brightness(0);
}

.performance-monochrome .performance-head strong,
.performance-monochrome .performance-head small {
  color: #111;
}

.performance-monochrome .performance-control {
  border-color: #777;
  color: #111;
  background: #fff;
}

.performance-monochrome .performance-control:is(:hover, :focus-visible),
.performance-monochrome .performance-control.is-active {
  color: #fff;
  background: #111;
}

.performance-monochrome .performance-control.exit {
  color: #111;
}

.performance-monochrome .performance-chart,
.performance-monochrome .performance-chart :is(
  h2,
  .measure,
  .lyric-line,
  .inline-lyric-segment > strong,
  .inline-lyric-segment > span,
  .saved-aligned-lyric-cell,
  .compact-chord-heading,
  .compact-chord-only,
  .compact-music-segment > strong,
  .compact-music-segment > span,
  .compact-leading-lyrics > strong,
  .compact-leading-lyrics > span,
  .compact-plain-lyrics,
  .compact-run-segment > strong,
  .compact-run-only
) {
  color: #111 !important;
}

.performance-monochrome .performance-chart .measure {
  border-color: #aaa;
}
.inline-lyric-line { display: flex; flex-wrap: wrap; align-items: end; column-gap: 0; row-gap: 10px; margin: 5px 5px 0; color: #393143; }
.inline-lyric-segment { display: inline-grid; grid-template-rows: minmax(1.3em, auto) auto; align-items: end; max-width: 100%; }
.inline-lyric-segment > strong { min-height: 1.3em; color: var(--purple); font: 850 calc(17px * var(--chord-scale, 1))/1.15 ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.inline-lyric-segment > span { white-space: pre-wrap; font: 550 calc(16px * var(--chart-text-scale, 1))/1.45 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
.saved-aligned-lyric-grid { display: grid; grid-template-columns: repeat(var(--line-columns, 4), minmax(0, 1fr)); margin-top: 3px; border-left: 2px solid transparent; }
.saved-aligned-lyric-cell { min-width: 0; padding: 4px 12px 7px; border-right: 2px solid transparent; color: #393143; font: 550 calc(16px * var(--chart-text-scale, 1))/1.45 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; overflow-wrap: anywhere; }
.leading-lyric-inline { margin-right: .3em; }
.leading-lyric-strip { width: max-content; max-width: 45%; margin: 5px 0 2px; padding: 4px 11px 5px; border-left: 3px solid var(--sun); border-radius: 0 8px 8px 0; color: #393143; background: #fff9e8; font: 550 calc(16px * var(--chart-text-scale, 1))/1.45 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
.inline-lyric-segment:first-child:has(> strong:empty) { margin-right: 4px; padding: 0 8px 2px; border-left: 3px solid var(--sun); border-radius: 0 7px 7px 0; background: #fff9e8; }
.line-timing-editor { margin: 0 0 8px; padding: 10px; border: 1px solid #f1d184; border-radius: 12px; background: linear-gradient(135deg, #fffaf0, #f2fcfc); box-shadow: 0 5px 13px rgba(96,71,21,.06); }
.timing-editor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.timing-editor-head > span { display: grid; gap: 2px; color: #5b4a23; font-size: 9px; }
.timing-editor-head strong { color: #855d08; font-size: 10px; }
.timing-editor-head label { display: grid; gap: 3px; color: #6c5c72; font-size: 8px; font-weight: 800; }
.timing-editor-head select { min-width: 112px; padding: 7px; border-color: #e9c86f; color: #684f17; background: white; }
.timing-editor-head select:disabled { opacity: .55; }
.line-pattern-actions { display: grid; grid-template-columns: repeat(2, auto); align-items: center; gap: 5px; margin-left: auto; }
.line-pattern-actions button { padding: 7px 9px; border: 1px solid #a8d9dd; border-radius: 8px; color: #08758a; background: #effbfb; font-size: 8px; font-weight: 850; cursor: pointer; }
.line-pattern-actions .paste-line-chords { color: #fff; border-color: var(--teal); background: var(--teal); }
.line-pattern-actions small { grid-column: 1 / -1; max-width: 230px; color: #71657a; font-size: 7px; line-height: 1.3; }
.missing-chord-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 7px; padding: 9px 10px; border: 1px dashed #8bcdd3; border-radius: 11px; color: #075f73; background: #f1fcfc; }
.missing-chord-line > span { display: grid; flex: 1 1 190px; gap: 2px; }
.missing-chord-line > span strong { font-size: 10px; }
.missing-chord-line > span small, .missing-chord-line-status { color: #62737d; font-size: 8px; }
.missing-chord-line button { padding: 7px 9px; border: 1px solid #9ccfd4; border-radius: 8px; color: #08758a; background: #fff; font-size: 8px; font-weight: 850; cursor: pointer; }
.missing-chord-line .start-chord-line, .missing-chord-line .save-chord-line { color: #fff; border-color: var(--teal); background: var(--teal); }
.missing-chord-line.editing { display: grid; grid-template-columns: 1fr auto; }
.new-chord-line-editor { display: grid; grid-column: 1 / -1; gap: 6px; }
.new-chord-line-editor > span { display: grid; gap: 2px; }
.new-chord-line-editor input { width: 100%; padding: 9px 10px; border: 2px solid var(--aqua); border-radius: 8px; color: var(--navy); background: #fff; font: 800 14px ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.new-chord-line-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.missing-chord-line.editing .missing-chord-line-status { align-self: center; color: #a33f3b; font-weight: 750; }
.chord-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 7px; }
.chord-duration-control { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 5px; min-width: 0; padding: 6px; border: 1px solid rgba(8,127,159,.15); border-radius: 9px; background: rgba(255,255,255,.82); }
.chord-duration-control.confirmed { border-color: #70c992; background: #f1fff5; box-shadow: inset 0 0 0 1px rgba(34,197,94,.1); }
.chord-duration-control strong { min-width: 0; overflow: hidden; color: var(--purple); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chord-duration-control output { min-width: 42px; color: #08758a; font-size: 8px; font-weight: 850; text-align: center; }
.chord-duration-control button { width: 27px; height: 27px; padding: 0; border: 1px solid #b9dfe2; border-radius: 7px; color: #08758a; background: #effbfb; cursor: pointer; font-size: 16px; font-weight: 800; }
.chord-duration-control .timing-confirm-chord { color: #25754a; border-color: #a7dfb9; background: #f0fff5; }
.chord-beat-markers { display: grid; grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #dceff1; }
.chord-beat-markers i { border-right: 1px solid white; background: #8ed8df; }
.chord-beat-markers i:first-child { background: var(--teal); }
.chord-beat-markers i:last-child { border-right: 0; }
.measure.timing-confirmed { position: relative; box-shadow: inset 0 -4px 0 #70c992; }
.measure.timing-confirmed::before { content: "✓"; position: absolute; right: 15px; top: 4px; color: #2f8c59; font-size: 8px; }
.chart-pair.is-timing { padding: 9px; border: 1px solid #f4dda5; border-radius: 13px; background: #fffefa; }
.word-alignment-editor { margin: 10px 0 16px; overflow: hidden; border: 1px solid #d8caf3; border-radius: 13px; background: linear-gradient(135deg, #faf7ff, #fffaf0); box-shadow: 0 6px 16px rgba(80,55,130,.07); }
.word-aligner-head { display: flex; justify-content: space-between; gap: 15px; padding: 14px 16px; color: var(--purple-dark); background: rgba(230,221,251,.65); }
.word-aligner-head > div { display: grid; gap: 3px; }
.word-aligner-head strong { font: 750 13px Georgia, serif; }
.word-aligner-head span { color: #766b82; font-size: 9px; line-height: 1.4; }
.word-aligner-head > span { color: var(--coral); font-size: 22px; }
.word-chord-target.ready { color: #7f3f35; border-color: var(--coral); background: var(--coral-pale); animation: target-pulse 1.3s ease-in-out infinite alternate; }
.chart-pair.is-aligning .measure.word-chord-target::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px rgba(255,122,89,.22); }
@keyframes target-pulse { to { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(232,113,93,.18); } }
.lyric-word-lane { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 9px; border-radius: 11px; background: rgba(255,255,255,.75); }
.lyric-word-chip { display: inline-grid; min-width: 38px; min-height: 35px; place-items: center; padding: 5px 8px; border: 1px solid #ddd3e6; border-radius: 9px; color: #393143; background: white; font: 750 12px ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 2px 5px rgba(60,42,92,.08); }
.lyric-word-chip small { color: var(--coral); font-size: 8px; }
.lyric-word-chip.selected { border-color: var(--coral); color: #7f3f35; background: var(--coral-pale); box-shadow: 0 0 0 3px rgba(255,129,109,.18); }
.lyric-word-chip.dragging { opacity: .45; }
.direct-word-alignment { margin: 7px 0 18px; }
.unplaced-word-tray { margin-bottom: 7px; padding: 7px; border: 1px dashed #ddcdee; border-radius: 11px; background: #fcf9ff; }
.unplaced-word-tray > small { display: block; margin: 0 5px 4px; color: #83758f; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.direct-word-grid { display: grid; grid-template-columns: repeat(var(--line-columns, 4), minmax(0, 1fr)); border-left: 2px solid transparent; }
.word-chord-cell { min-height: 48px; padding: 5px 5px 7px; border-right: 2px solid transparent; border-radius: 8px; transition: background .16s, box-shadow .16s; }
.word-chord-cell.run-word-target { border: 1px dashed rgba(111,77,170,.4); color: var(--purple-dark); background: linear-gradient(135deg, rgba(111,77,170,.08), rgba(22,183,199,.07)); }
.word-chord-cell.run-word-target > small { color: var(--purple); }
.word-chord-cell > small { display: block; margin: 0 4px 3px; color: #a094aa; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.word-chord-cell .lyric-word-lane { align-content: start; min-height: 36px; padding: 2px; background: transparent; }
.chart-pair.is-aligning { margin-bottom: 24px; padding: 7px; border: 1px solid #eee6f6; border-radius: 12px; background: #fffefd; }
.chart-pair.is-aligning .bar-line { border-left-color: var(--purple); }
.chart-pair.is-aligning .measure { border-right-color: var(--purple); color: var(--purple-dark); }
.large-chords .measure { font-size: calc(24px * var(--chord-scale, 1)); min-height: 44px; }
.large-chords .lyric-line { font-size: 18px; }
.large-chords .inline-lyric-segment > strong { font-size: 21px; }
.large-chords .inline-lyric-segment > span { font-size: 18px; }
.add-section-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 26px 0; text-align: center; }.add-section { border: 2px dashed #cfc3df; border-radius: 13px; padding: 12px 20px; background: #faf7ff; color: var(--purple); font-weight: 850; cursor: pointer; }
.add-bass-run { border-color: #b9dfe2; color: #08758a; background: #f1fbfc; }
.bass-run-editor { display: grid; grid-template-columns: minmax(220px, 1fr) 110px 90px; gap: 9px; margin: 11px 0 14px; padding: 12px; border: 1px solid #b9dfe2; border-radius: 12px; background: linear-gradient(135deg, #f0fbfc, #fffaf1); }
.bass-run-editor[hidden] { display: none; }
.bass-run-editor label { display: grid; gap: 4px; color: #50656b; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.bass-run-editor input, .bass-run-editor select { width: 100%; padding: 8px; border: 1px solid #b9dfe2; border-radius: 8px; color: var(--ink); background: white; font: inherit; }
.bass-run-editor > small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.bass-run-chart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-left: 4px solid var(--teal); border-radius: 10px; background: linear-gradient(90deg, rgba(22,183,199,.09), rgba(255,200,87,.08)); }
.bass-run-label { color: #08758a; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.bass-run-sequence { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.bass-run-note { min-width: 28px; padding: 6px 8px; border: 1px solid rgba(8,117,138,.22); border-radius: 8px; color: #053f4a; background: white; font-size: calc(13px * var(--chord-scale, 1)); font-weight: 900; text-align: center; }
.bass-run-arrow { color: #69aab3; font-weight: 900; }
.bass-run-bar { margin: 0 3px; color: #08758a; font-size: 18px; font-weight: 500; }
.bass-run-rhythm { color: var(--muted); font-size: 8px; white-space: nowrap; }
.bass-run-repeat { padding: 5px 7px; border-radius: 7px; color: #754f06; background: var(--sun-pale); font-size: 11px; }
.bass-run-empty { color: var(--muted); font-size: 9px; }
.chart-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; padding-top: 11px; border-top: 1px solid #c9d9dc; color: #a39ca9; font-size: 10px; text-align: left; }.chart-footer span { color: var(--coral); }
.team-print-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; max-width: none; margin: 0; padding: 2px 0 2px 13px; border: 0; border-left: 1px solid #dce6e7; text-align: left; }
.team-print-footer[hidden] { display: none; }
.team-print-footer > img { width: 34px; height: 34px; object-fit: contain; }
.team-print-footer strong { display: block; color: #173444; font-size: 8.5px; line-height: 1.25; }
.team-print-footer p { margin: 2px 0 0; color: #68757a; font-size: 7.5px; font-style: italic; line-height: 1.32; }
.print-preview-view { width: min(1180px, calc(100% - 34px)); margin: 0 auto; padding: 28px 0 60px; }
.print-preview-toolbar { position: sticky; top: 78px; z-index: 8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 22px; padding: 15px 18px; border: 1px solid #c8dfe1; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(7,27,41,.12); backdrop-filter: blur(12px); }
.print-preview-toolbar > div { min-width: 0; text-align: center; }
.print-preview-toolbar p { margin: 0; color: var(--aqua); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.print-preview-toolbar h1 { margin: 2px 0; overflow: hidden; color: var(--navy); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.print-preview-toolbar span { color: var(--muted); font-size: 10px; }
.print-output-actions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
.print-output-actions button, .print-output-actions a { display: inline-flex; align-items: center; justify-content: center; padding: 11px 14px; text-decoration: none; white-space: nowrap; }
.print-output-actions [aria-disabled="true"] { cursor: wait; opacity: .65; box-shadow: none; }
.print-output-actions small { grid-column: 1 / -1; min-height: 14px; color: var(--aqua-dark); font-size: 8px; font-weight: 750; text-align: right; }
.print-output-actions small.has-error { color: #a94b3a; }
.print-pdf-viewer { width: min(1120px, calc(100vw - 24px)); max-width: none; height: min(900px, calc(100dvh - 24px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #b9d6d9; border-radius: 18px; background: #eef5f5; box-shadow: 0 28px 80px rgba(7,27,41,.3); }
.print-pdf-viewer::backdrop { background: rgba(7,27,41,.7); backdrop-filter: blur(5px); }
.print-pdf-viewer > section { height: 100%; display: grid; grid-template-rows: auto auto 1fr; }
.print-pdf-viewer header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid #c9dddf; background: white; }
.print-pdf-viewer header > div { text-align: center; }
.print-pdf-viewer header p { margin: 0; color: var(--aqua); font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.print-pdf-viewer header h2 { margin: 1px 0; color: var(--navy); font-size: 17px; }
.print-pdf-viewer header span { color: var(--muted); font-size: 9px; }
.print-pdf-viewer header > #print-pdf-file-link { padding: 11px 14px; text-decoration: none; white-space: nowrap; }
.print-pdf-tab-note { margin: 0; padding: 7px 16px; color: #5f7078; background: #fff8dc; border-bottom: 1px solid #eadba0; font-size: 9px; font-weight: 750; text-align: center; }
.print-pdf-document { width: 100%; height: 100%; min-height: 0; border: 0; background: #dfe9ea; }
.print-preview-controls { display: grid; grid-template-columns: 1.05fr 1.05fr .7fr .8fr .65fr .9fr 1.45fr; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #d5e4e5; border-radius: 14px; background: rgba(255,255,255,.92); }
.print-preview-controls label { display: grid; gap: 6px; color: var(--navy); font-size: 10px; }
.print-preview-controls select { width: 100%; padding: 9px 10px; }
.print-size-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.print-size-control input { width: 100%; accent-color: var(--aqua); }
.print-size-control output { min-width: 38px; color: var(--aqua-dark); font-size: 10px; font-weight: 900; text-align: right; }
.print-compact-option > span { min-height: 35px; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #b8c8cc; border-radius: 8px; background: white; color: var(--navy); font-size: 10px; font-weight: 800; }
.print-compact-option input { accent-color: var(--aqua); }
.print-break-reset { display: grid; gap: 6px; color: var(--navy); font-size: 10px; }
.print-break-reset > span { font-weight: 750; }
.print-break-reset button { min-height: 35px; border: 1px solid #efb19f; border-radius: 8px; padding: 7px 9px; color: #9b3f2c; background: #fff7f3; font-size: 9px; font-weight: 850; cursor: pointer; }
.print-break-reset button[hidden] { display: none; }
#print-page-estimate { margin: 0; padding: 9px 11px; border-left: 3px solid var(--sun); border-radius: 0 8px 8px 0; color: #5e6870; background: #fff9e8; font-size: 9px; line-height: 1.45; }
.print-preview-stage { overflow-x: auto; padding: 28px; border: 1px solid #d3e1e3; border-radius: 20px; background: repeating-linear-gradient(180deg, #eaf0f1 0 31px, #dfe8ea 32px 33px); }
.print-preview-sheet { --print-text-scale: 1; --print-section-spacing: .25; --print-page-inset: .62in; position: relative; display: flex; flex-direction: column; width: 8.5in; min-height: 11in; margin: 0 auto; padding: var(--print-page-inset) .5in; color: var(--ink); background: white; box-shadow: 0 16px 45px rgba(7,27,41,.18); }
.print-preview-sheet > #print-chart-sections { flex: 0 0 auto; }
.print-preview-sheet > .chart-footer { margin-top: auto; }
.print-preview-sheet .chart-header h2 { font-size: 29px; }
.print-preview-sheet .chart-header p { font-size: 11px; }
.print-preview-sheet .chart-meta small { font-size: 8px; }
.print-preview-sheet .chart-meta strong { font-size: 11px; }
.print-preview-sheet .chart-meta { gap: 16px; }
.print-preview-section { --preview-page-shift: 0px; position: relative; margin-top: calc(2px + (12px * var(--print-section-spacing)) + var(--preview-page-shift)); padding: calc(2px + (6px * var(--print-section-spacing))) 0; break-inside: avoid-page; page-break-inside: avoid; }
.print-preview-section .rendered-section { margin-top: 0; }
.print-preview-section.starts-new-print-page, .print-preview-section.manual-print-page-break { break-before: page; page-break-before: always; }
.print-preview-section.print-section-too-long > .rendered-section { outline: 2px dashed rgba(255, 122, 89, .48); outline-offset: 7px; }
.print-section-tools { position: absolute; z-index: 4; top: 0; right: 0; min-height: 0; display: flex; justify-content: flex-end; margin: 0; pointer-events: none; }
.print-section-tools > span { color: #87959a; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.print-section-break-toggle { pointer-events: auto; border: 1px solid #b9d6d9; border-radius: 99px; padding: 3px 7px; color: var(--aqua-dark); background: rgba(245,251,251,.94); font-size: 7px; font-weight: 850; cursor: pointer; opacity: 0; transition: opacity .15s; }
.print-preview-section:hover .print-section-break-toggle, .print-section-break-toggle:focus-visible { opacity: 1; }
.print-section-break-toggle.is-active { color: white; border-color: #ad4935; background: #ad4935; }
@media (hover: none) { .print-section-break-toggle { opacity: .48; } }
.print-continuation-header { display: none; position: absolute; z-index: 3; top: -40px; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid #cedbdd; color: #557078; }
.print-preview-section.begins-print-page .print-continuation-header { display: flex; }
.print-preview-sheet .print-preview-section.begins-print-page .print-continuation-header { display: none; }
.print-continuation-header strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.print-continuation-header span { flex: 0 0 auto; font-size: 8px; font-weight: 750; }
.print-continuation-header b { color: var(--aqua-dark); }
.print-preview-section .rendered-section > h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.print-section-order { display: inline-grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: var(--aqua-dark); font-size: 9px; font-weight: 900; letter-spacing: 0; }
.print-preview-sheet .print-section-order { display: none; }
.print-preview-sheet .rendered-section > h3 { font-size: max(11px, calc(18px * var(--print-text-scale))); line-height: 1.15; }
.print-preview-sheet .rendered-section > h3 { justify-content: flex-start; margin-left: 0; padding-left: 0; text-align: left; }
.print-preview-sheet .section-repeat-marker { margin-left: 7px; padding: 2px 6px; font-size: max(9px, calc(14px * var(--print-text-scale))); line-height: 1.2; }
.print-preview-sheet .measure { min-height: calc(38px * var(--print-text-scale)); padding: calc(8px * var(--print-text-scale)); color: var(--navy); font-size: var(--print-row-chord-size, calc(18px * var(--print-text-scale))); font-weight: 900; }
.print-preview-sheet .lyric-line, .print-preview-sheet .saved-aligned-lyric-cell { color: #46515b; font-size: max(10px, calc(18px * var(--print-text-scale))); font-weight: 650; }
.print-preview-sheet .measure::after { display: none !important; }
.print-preview-sheet .chart-pair { width: var(--print-row-width, 100%); max-width: 100%; padding-right: max(25px, calc(32px * var(--print-text-scale))); }
.print-preview-sheet .measure.measure-continuation { border-right: 0; }
.print-preview-sheet .line-repeat-marker { top: calc(2px * var(--print-text-scale)); right: 0; bottom: auto; padding: 1px 4px; color: var(--aqua-dark); background: transparent; font-size: max(8px, calc(11px * var(--print-text-scale))); line-height: 1.2; }
.print-preview-sheet .line-performance-cue { margin-left: calc(7px * var(--print-text-scale)); color: var(--purple-dark); font-size: max(7px, calc(10px * var(--print-text-scale))); }
.print-preview-sheet .legacy-cue-chord-row { gap: calc(5px * var(--print-text-scale)) calc(15px * var(--print-text-scale)); margin: calc(5px * var(--print-text-scale)) 0 0; }
.print-preview-sheet .legacy-cue-chord-row button { color: var(--navy); font-size: var(--print-row-chord-size, calc(18px * var(--print-text-scale))); font-weight: 900; }
.print-preview-sheet .chart-pair.has-saved-alignment { display: grid; grid-template-columns: var(--line-print-grid, 1fr); align-items: start; }
.print-preview-sheet .chart-pair.has-saved-alignment > .bar-line,
.print-preview-sheet .chart-pair.has-saved-alignment > .saved-aligned-lyric-grid { grid-column: 1 / -1; grid-template-columns: subgrid !important; }
.print-preview-sheet .chart-pair.has-saved-alignment > .compact-music-line {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.print-preview-sheet .chart-pair.has-saved-alignment > .inline-bass-run { grid-column: 1 / -1; }
.print-preview-sheet .saved-aligned-lyric-grid { overflow: visible; }
.print-preview-sheet .saved-aligned-lyric-cell { overflow: visible; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.print-preview-sheet .inline-lyric-segment { max-width: none; }
.print-preview-sheet .inline-lyric-segment > span { white-space: nowrap; }
.print-preview-sheet .inline-bass-run,
.print-preview-sheet .inline-bass-run.in-chord-area,
.print-preview-sheet .inline-bass-run.in-chord-grid {
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.print-preview-sheet .inline-bass-run.in-chord-grid {
  min-height: calc(38px * var(--print-text-scale));
  gap: 0;
  padding: calc(4px * var(--print-text-scale)) calc(3px * var(--print-text-scale));
  border-right: 2px solid var(--ink);
}
.print-preview-sheet .inline-bass-run > small,
.print-preview-sheet .inline-bass-run.in-chord-area > small,
.print-preview-sheet .inline-bass-run.in-chord-grid > small { color: #536871; }
.print-preview-sheet .inline-bass-run.in-chord-grid > small { font-size: max(5px, calc(6px * var(--print-text-scale))); line-height: 1; }
.print-preview-sheet .inline-bass-run.in-chord-grid > div { flex-wrap: nowrap; gap: 2px; color: var(--navy); font-size: var(--print-row-chord-size, max(8px, calc(18px * var(--print-text-scale)))); font-weight: 900; line-height: 1; white-space: nowrap; }
.print-preview-sheet .inline-bass-run.in-chord-grid i { color: #6f7e86; }
.print-preview-sheet .bass-run-chart { padding: 0; border: 0; border-radius: 0; background: transparent; }
.print-preview-sheet .bass-run-note { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.print-preview-sheet .inline-lyric-segment > strong { font-size: var(--print-row-chord-size, calc(18px * var(--print-text-scale))); }
.print-preview-sheet .inline-lyric-segment > span { font-size: max(10px, calc(18px * var(--print-text-scale))); font-weight: 650; }
.print-preview-sheet .chart-pair.print-row-fitted .measure { padding-right: 1px; padding-left: 1px; letter-spacing: -.02em; }
.print-preview-sheet .chart-pair.print-row-fitted .inline-bass-run.in-chord-grid { padding-right: 1px; padding-left: 1px; }
.print-preview-sheet .chart-pair.print-row-compacted .bar-line { justify-content: start; }
.print-preview-sheet .chart-pair { margin-bottom: max(10px, calc(18px * var(--print-text-scale))); }
.print-chart-sections.two-column-print { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .28in; row-gap: calc(var(--print-page-inset) * 2); align-items: start; }
.print-flow-column { min-width: 0; }
.print-flow-column-left { padding-right: .14in; border-right: 3px solid #aac9ce; }
.print-flow-column-right { padding-left: .14in; }
.print-chart-sections.two-column-print .print-preview-section { min-width: 0; }
.print-chart-sections.two-column-print .print-preview-section.begins-print-page .print-continuation-header { width: calc(200% + .38in); }
.print-preview-sheet.compact-print .rendered-section > h3 { margin-bottom: 3px; }
.print-preview-sheet.compact-print .chart-pair { margin-bottom: max(10px, calc(13px * var(--print-text-scale))); }
.print-preview-sheet.pdf-export-spacing .chart-pair,
.print-preview-sheet.pdf-export-spacing.compact-print .chart-pair { margin-bottom: max(22px, calc(26px * var(--print-text-scale))); }
.print-preview-sheet.pdf-export-spacing .chart-pair:last-child { margin-bottom: 0; }
.print-preview-sheet.compact-print .measure { min-height: calc(24px * var(--print-text-scale)); padding: calc(3px * var(--print-text-scale)); }
.print-preview-sheet.compact-print .inline-bass-run.in-chord-grid { min-height: calc(24px * var(--print-text-scale)); padding-top: calc(2px * var(--print-text-scale)); padding-bottom: calc(2px * var(--print-text-scale)); }
.print-preview-sheet.compact-print .lyric-line, .print-preview-sheet.compact-print .saved-aligned-lyric-cell, .print-preview-sheet.compact-print .inline-lyric-segment > span { line-height: 1.25; }
.print-page-break-guide { position: absolute; z-index: 6; left: -1px; right: -1px; height: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; transform: translateY(-12px); color: #5f7078; background: #dce7e9; border-top: 1px solid #c8d7da; border-bottom: 1px solid #c8d7da; box-shadow: 0 7px 16px rgba(7,27,41,.13); font-size: 8px; font-weight: 800; letter-spacing: .06em; pointer-events: none; }
.print-page-break-guide strong { padding: 4px 9px; border-radius: 99px; color: white; background: var(--aqua-dark); font-size: 8px; letter-spacing: .14em; }
.print-page-number { position: absolute; z-index: 4; right: 16px; padding: 4px 8px; border: 1px solid #d5e4e5; border-radius: 99px; color: #687980; background: rgba(247,251,251,.94); font-size: 8px; font-weight: 850; letter-spacing: .05em; pointer-events: none; }
.print-page-chrome { position: absolute; z-index: 2; left: .5in; right: .5in; height: 11in; color: #65757b; pointer-events: none; }
.print-page-chrome > header, .print-page-chrome > footer { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 7px; font-weight: 750; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
.print-page-chrome > header { top: .22in; padding-bottom: .08in; border-bottom: 1px solid #cfdbdd; }
.print-page-chrome > header strong { overflow: hidden; color: #314b55; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.print-page-chrome > footer { bottom: .2in; padding-top: .08in; border-top: 1px solid #dbe3e4; }
.print-page-chrome > footer span:first-child { color: var(--aqua-dark); font-weight: 900; }
.print-preview-sheet[data-print-appearance="monochrome"] { color: #111; filter: grayscale(1); }
.print-preview-sheet[data-print-appearance="monochrome"] .print-page-chrome,
.print-preview-sheet[data-print-appearance="monochrome"] .print-page-chrome > header strong,
.print-preview-sheet[data-print-appearance="monochrome"] .print-page-chrome > footer span:first-child,
.print-preview-sheet[data-print-appearance="monochrome"] .rendered-section > h3,
.print-preview-sheet[data-print-appearance="monochrome"] .measure,
.print-preview-sheet[data-print-appearance="monochrome"] .inline-bass-run.in-chord-grid > div { color: #111; }
.print-preview-sheet[data-print-appearance="dark"] { color: #f6f7f8; background: #071b29; }
.print-preview-sheet[data-print-appearance="dark"] .chart-header,
.print-preview-sheet[data-print-appearance="dark"] .print-preview-section { border-color: #52707a; }
.print-preview-sheet[data-print-appearance="dark"] .chart-header h2,
.print-preview-sheet[data-print-appearance="dark"] .chart-meta strong,
.print-preview-sheet[data-print-appearance="dark"] .rendered-section > h3,
.print-preview-sheet[data-print-appearance="dark"] .measure,
.print-preview-sheet[data-print-appearance="dark"] .inline-bass-run.in-chord-grid > div { color: #f7fbfc; }
.print-preview-sheet[data-print-appearance="dark"] .chart-header p,
.print-preview-sheet[data-print-appearance="dark"] .chart-meta small,
.print-preview-sheet[data-print-appearance="dark"] .lyric-line,
.print-preview-sheet[data-print-appearance="dark"] .saved-aligned-lyric-cell,
.print-preview-sheet[data-print-appearance="dark"] .inline-lyric-segment > span,
.print-preview-sheet[data-print-appearance="dark"] .print-page-chrome { color: #b7c9ce; }
.print-preview-sheet[data-print-appearance="dark"] .print-page-chrome > header,
.print-preview-sheet[data-print-appearance="dark"] .print-page-chrome > footer { border-color: #45616a; }
.print-preview-sheet[data-print-appearance="dark"] .print-page-chrome > header strong { color: #eff8fa; }
.print-preview-sheet[data-print-appearance="dark"] .print-page-chrome > footer span:first-child { color: #18c4c7; }
.performance-view { min-height: 100vh; background: #15121d; color: #f9f6ff; }
.performance-head { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; padding: 13px 22px; background: rgba(21,18,29,.94); border-bottom: 1px solid #393343; }
.performance-brand { justify-self: start; color: #cbbdff; font: 700 18px Georgia, serif; }.performance-brand span { color: var(--coral); }
.performance-head > div:nth-child(2) { text-align: center; display: grid; }.performance-head small { color: #a69fad; margin-top: 3px; }
.performance-actions { justify-self: end; display: flex; gap: 7px; }.performance-control { border: 1px solid #4b4456; border-radius: 9px; padding: 8px 10px; background: #26212f; color: white; cursor: pointer; }.performance-control.exit { color: #ff9c8f; }
.performance-chart { --performance-scale: 1; width: min(1050px, calc(100% - 36px)); margin: auto; padding: 48px 0 120px; font-size: calc(1rem * var(--performance-scale)); }
.performance-chart section { margin-bottom: 45px; }.performance-chart h2 { color: #d0c3ff; font-size: calc(.85rem * var(--performance-scale)); text-transform: uppercase; letter-spacing: .15em; }
.performance-chart .measure { min-height: 58px; padding: 12px 16px; border-color: #7b7185; font-size: calc(1.8rem * var(--performance-chord-scale)); }
.performance-chart .chart-pair { margin-bottom: 28px; }
.performance-chart .lyric-line { margin-top: 10px; color: #fff8e7; font-size: calc(1.35rem * var(--performance-scale)); line-height: 1.55; }
.performance-chart .inline-lyric-line { margin-top: 10px; color: #fff8e7; row-gap: calc(14px * var(--performance-scale)); }
.performance-chart .inline-lyric-segment > strong { color: #cbbdff; font-size: calc(1.55rem * var(--performance-scale)); }
.performance-chart .chord-number-badge { border-color: #79e5e0; color: #071b29; background: #79e5e0; }
.performance-monochrome .performance-chart .chord-number-badge { border-color: #ddd; color: #111; background: white; }
.print-preview-sheet .chord-number-badge { border-color: #8ebfc4; color: #075f73; background: white; }
.performance-chart .inline-lyric-segment > span { font-size: calc(1.35rem * var(--performance-scale)); }
.performance-chart .saved-aligned-lyric-grid { margin-top: 7px; }
.performance-chart .saved-aligned-lyric-cell { color: #fff8e7; font-size: calc(1.35rem * var(--performance-scale)); line-height: 1.5; }

@media (max-width: 900px) {
  .dashboard-overview { grid-template-columns: 1fr 1fr; }
  .dashboard-stats { grid-column: 1 / -1; }
  .sets-grid { grid-template-columns: repeat(2,1fr); }
  .set-details-grid { grid-template-columns: 1fr 1fr; }
  .set-details-grid label:last-child { grid-column: 1 / -1; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .setup-card { grid-template-columns: 1fr; }.setup-intro { padding: 38px; }.setup-intro h1 { font-size: 46px; }
  .editor-layout { grid-template-columns: 1fr; }.control-panel { position: static; display: grid; grid-template-columns: 1.4fr 1fr 1.5fr; }.panel-block { border-bottom: 0; border-right: 1px solid var(--line); }.happy-tip { display: none; }
  .chart-workspace { padding: 12px; }
}

@media (max-width: 640px) {
  .dashboard-overview { grid-template-columns: 1fr; margin: 14px 0 0; }
  .dashboard-stats { grid-column: auto; }
  .library-filters { grid-template-columns: 1fr 1fr; }
  .library-filters label:nth-child(3), .library-filters p { grid-column: 1 / -1; }
  .library-filters p { text-align: left; }
  .sets-view { width: min(100% - 20px,1120px); padding-top: 28px; }
  .workspace-heading, .set-detail-heading { align-items: stretch; flex-direction: column; }
  .sets-grid, .set-details-grid { grid-template-columns: 1fr; }
  .set-details-grid label:last-child { grid-column: auto; }
  .sets-summary { align-items: start; flex-direction: column; }
  .set-song-row { grid-template-columns: auto 1fr; }
  .set-song-actions { grid-column: 2; }
  .set-add-song { grid-template-columns: 1fr; }
  .line-annotation-editor {
    grid-template-columns: 1fr;
  }
  .line-annotation-editor > div:first-child, .line-annotation-actions {
    grid-column: 1;
  }
  .topbar { height: 66px; padding: 0 14px; }.brand { font-size: 24px; }.brand-mark { width: 36px; height: 36px; }.nav-button { display: none; }.primary.small { padding: 9px 12px; }
  #app { min-height: calc(100vh - 66px); }.library-view, .setup-view, .editor-view { width: min(100% - 20px, 1240px); padding-top: 18px; }
  .welcome-card { min-height: 520px; grid-template-columns: 1fr; padding: 30px; }.welcome-card h1 { font-size: 52px; }.welcome-card p:not(.eyebrow) { font-size: 16px; }.welcome-actions { flex-direction: column; }.hero-notes { position: absolute; right: -15px; bottom: -25px; width: 210px; opacity: .55; }.record { width: 140px; height: 140px; }.record div { width: 48px; height: 48px; border-width: 11px; }
  .library-heading { align-items: stretch; flex-direction: column; margin-top: 38px; }.library-tools { width: 100%; }.search { width: 100%; }.project-grid { grid-template-columns: 1fr; }.project-card-wrap, .project-card { min-height: 180px; }
  .setup-view .back { margin-left: 5px; }.setup-card { min-width: 0; border-radius: 22px; }.setup-intro { min-width: 0; padding: 32px 26px; }.setup-intro h1 { font-size: 44px; }#project-form { min-width: 0; padding: 28px 22px; }.field-grid, .analysis-detail-options { grid-template-columns: 1fr; }.option { grid-template-columns: auto auto minmax(0, 1fr); }.audio-drop { grid-template-columns: auto minmax(0, 1fr); }.choose-pill { display: none; }.chart-import-card { grid-template-columns: auto minmax(0, 1fr); }.chart-source-choices { grid-template-columns: 1fr; }.chart-import-actions { flex-direction: column; }.chart-import-actions > * { width: 100%; }.converter-panel { grid-template-columns: auto minmax(0, 1fr); }.converter-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }.converter-actions button { width: 100%; }.lyrics-guide-card { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }.lyrics-organizer-actions { align-items: stretch; flex-direction: column; }.lyrics-block-card, .instrumental-bookends { grid-template-columns: 1fr; }.form-footer { flex-direction: column-reverse; }.form-footer button { width: 100%; }
  .analysis-view { min-height: calc(100vh - 66px); padding: 18px 10px 50px; }.analysis-card { padding: 30px 20px; border-radius: 22px; }.analysis-steps { font-size: 9px; }
  .editor-head { grid-template-columns: auto 1fr; }.editor-title { text-align: left; }.editor-head .back { font-size: 0; }.editor-head .back::before { content: "←"; font-size: 24px; }.editor-actions { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; }.editor-actions > button { flex: 1; }.history-actions { flex: 1 1 100%; margin: 0; padding: 0 0 7px; border-right: 0; border-bottom: 1px solid #d9e4e5; }.history-actions button { flex: 1; }
  .control-panel { grid-template-columns: 1fr; }.panel-block { border-right: 0; border-bottom: 1px solid var(--line); }.two-controls { grid-template-columns: 1fr 1fr; }.chart-workspace { margin: 0 -10px; padding: 5px; border-radius: 14px; }.chart-paper { padding: 24px 17px; min-height: 800px; }.chart-header { align-items: start; flex-direction: column; }.chart-meta { width: 100%; justify-content: space-between; }.section-name { width: 100%; }.section-editors { grid-template-columns: 1fr; }.bar-line, .direct-word-grid, .saved-aligned-lyric-grid { grid-template-columns: repeat(2, 1fr); }.measure { font-size: calc(17px * var(--chord-scale, 1)); }.lyric-line { font-size: calc(15px * var(--chart-text-scale, 1)); }.inline-lyric-segment > strong { font-size: calc(16px * var(--chord-scale, 1)); }.inline-lyric-segment > span { font-size: calc(15px * var(--chart-text-scale, 1)); }.align-words { margin-left: 0; }
  .custom-review-chord > div { grid-template-columns: 1fr; }
  .print-preview-view { width: min(100% - 18px, 1180px); padding-top: 12px; }
  .print-preview-toolbar { position: static; grid-template-columns: 1fr; gap: 10px; }
  .print-preview-toolbar button { width: 100%; }
  .print-output-actions { grid-template-columns: 1fr 1fr; }
  .print-output-actions small { text-align: center; }
  .print-pdf-viewer header { grid-template-columns: 1fr; gap: 8px; }
  .print-pdf-viewer header > * { width: 100%; }
  .print-preview-controls { grid-template-columns: 1fr; align-items: stretch; }
  .print-preview-stage { padding: 12px; }
  .performance-head { grid-template-columns: auto 1fr; }.performance-head > div:nth-child(2) { text-align: left; }.performance-actions { grid-column: 1 / -1; width: 100%; }.performance-control { flex: 1; }.performance-chart { padding-top: 30px; }.performance-chart .bar-line { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  @page { size: letter; margin: 0; }
  body { background: white; }
  .no-print, .topbar { display: none !important; }
  #app, .editor-view, .editor-layout, .chart-workspace, .chart-paper { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; background: white; box-shadow: none; }
  .print-preview-view, .print-preview-stage { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .print-preview-sheet { display: flex; width: 8.5in; min-height: calc(var(--print-page-count, 1) * 11in) !important; margin: 0; padding: var(--print-page-inset) .5in; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .print-page-break-guide, .print-page-number { display: none !important; }
  .print-preview-section { --preview-page-shift: 0px !important; break-inside: avoid-page; page-break-inside: avoid; }
  .print-preview-section.starts-new-print-page, .print-preview-section.manual-print-page-break { break-before: page; page-break-before: always; }
  .print-preview-section.begins-print-page { padding-top: 0; }
  .print-preview-section.begins-print-page .print-continuation-header { display: none; }
  .print-preview-section.print-section-too-long > .rendered-section { outline: 0; }
  .song-section { break-inside: avoid-page; page-break-inside: avoid; }
  .lyric-line { font-size: 11pt; }
  .inline-lyric-segment > strong { font-size: 11.5pt; }
  .inline-lyric-segment > span { font-size: 11pt; }
  .saved-aligned-lyric-cell { font-size: 11pt; }
  .chart-pair.has-inline .bar-line { display: none; }
  .measure::after { display: none !important; }
  .chart-footer { display: grid; }
}

/* Update 186: guest set sharing and import. */
.set-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.share-set-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(8, 124, 138, .22);
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper, #fff);
  box-shadow: 0 24px 70px rgba(7, 27, 41, .24);
}

.share-set-dialog::backdrop {
  background: rgba(7, 27, 41, .58);
  backdrop-filter: blur(5px);
}

.share-set-dialog > header,
.share-set-dialog form,
.share-set-dialog form > footer {
  display: flex;
  gap: 14px;
}

.share-set-dialog > header {
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 18px;
  color: #f7fbfc;
  background: linear-gradient(135deg, #071b29, #0a4052);
}

.share-set-dialog > header p,
.share-set-dialog > header h2,
.share-set-dialog > header span { margin: 0; }
.share-set-dialog > header p { color: #62e4df; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.share-set-dialog > header h2 { color: #fff; font-size: clamp(24px, 7vw, 34px); }
.share-set-dialog > header span { display: block; margin-top: 5px; color: #c7dce1; }
.share-set-dialog > header .icon-button { flex: 0 0 auto; color: #fff; }
.share-set-dialog form { flex-direction: column; padding: 22px 24px 24px; }
.share-set-dialog label { display: grid; gap: 7px; font-weight: 800; }
.share-set-dialog label small { color: var(--muted); font-weight: 500; }
.share-set-dialog select { width: 100%; }
.share-set-dialog form > footer { justify-content: flex-end; }

.share-set-summary,
.share-set-privacy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(22, 183, 199, .09);
}

.share-set-summary > span,
.share-set-privacy > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #16b7c7, #6b57d9);
}

.share-set-summary div { display: grid; gap: 2px; }
.share-set-summary small,
.share-set-privacy { color: var(--muted); }
.share-set-privacy { font-size: 13px; }

.guest-set-view {
  min-height: calc(100dvh - 150px);
  display: grid;
  place-items: center;
  padding: clamp(22px, 6vw, 64px) 16px 110px;
  background:
    radial-gradient(circle at 15% 20%, rgba(22, 183, 199, .16), transparent 34%),
    radial-gradient(circle at 85% 75%, rgba(107, 87, 217, .13), transparent 32%);
}

.guest-set-card {
  width: min(620px, 100%);
  padding: clamp(24px, 6vw, 42px);
  border: 1px solid rgba(8, 124, 138, .2);
  border-radius: 28px;
  background: var(--paper, #fff);
  box-shadow: 0 22px 70px rgba(7, 27, 41, .14);
}

.guest-set-card > img { display: block; width: min(240px, 70%); margin: 0 auto 28px; }
.guest-set-card > h1 { margin: 6px 0; font-size: clamp(30px, 9vw, 48px); }
.guest-set-card > p { color: var(--muted); }
.guest-set-card ol { display: grid; gap: 8px; margin: 22px 0; padding-left: 28px; }
.guest-set-card li { padding: 10px 12px; border-radius: 12px; color: var(--ink); background: rgba(22, 183, 199, .075); }

.guest-set-organization-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  padding: 14px;
  border: 1px solid rgba(8, 124, 138, .18);
  border-radius: 16px;
}
.guest-set-organization-choice input { flex: 0 0 auto; margin-top: 3px; }
.guest-set-organization-choice span { display: grid; gap: 3px; }
.guest-set-organization-choice small { color: var(--muted); }
.guest-set-account-actions { display: grid; gap: 10px; margin-top: 18px; }
.guest-set-claim { width: 100%; margin-top: 18px; }
.guest-set-expiry { display: block; margin-top: 12px; color: var(--muted); text-align: center; }

html[data-app-appearance="dark"] .share-set-dialog,
html[data-app-appearance="dark"] .guest-set-card {
  color: #f4fafb;
  background: #0d2634;
  border-color: #294754;
}
html[data-app-appearance="dark"] .guest-set-card li { color: #f4fafb; background: #123342; }
html[data-app-appearance="dark"] .guest-set-card :is(p, small),
html[data-app-appearance="dark"] .share-set-dialog :is(label small, .share-set-privacy, .share-set-summary small) { color: #b9ccd1; }

@media (max-width: 620px) {
  .set-detail-actions { justify-content: stretch; }
  .set-detail-actions > button { flex: 1 1 150px; }
  .share-set-dialog form > footer { display: grid; grid-template-columns: 1fr; }
  .share-set-dialog form > footer .primary { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Jubal brand system — Equip Worship */
:root {
  --ink: #071b29;
  --muted: #64727a;
  --paper: #f6f5f1;
  --card: #ffffff;
  --line: #d9e0e1;
  --purple: #0b9fb3;
  --purple-dark: #083b50;
  --purple-pale: #e1f7f7;
  --coral: #f36f5d;
  --coral-pale: #fff0ec;
  --teal: #159faf;
  --teal-pale: #e1f7f7;
  --sun: #f8bd4f;
  --sun-pale: #fff6dc;
  --navy: #071b29;
  --navy-2: #0a2b3e;
  --aqua: #16b7c7;
  --aqua-bright: #50ded9;
  --off-white: #f7f6f2;
  --shadow: 0 24px 65px rgba(7, 27, 41, .13);
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
}

body {
  background:
    linear-gradient(rgba(7, 27, 41, .025) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 32px;
}

button, input, select, textarea {
  letter-spacing: .01em;
}

.topbar {
  height: 82px;
  border-bottom-color: rgba(7, 27, 41, .1);
  background: rgba(247, 246, 242, .95);
}

.brand {
  width: 225px;
  color: var(--navy);
}

.brand-logo {
  display: block;
  width: 218px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

.nav-button {
  color: var(--navy);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.primary, .secondary {
  min-height: 44px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  box-shadow: none;
}

.primary {
  background: linear-gradient(135deg, #0b9fb3, #087e9e);
  box-shadow: 0 8px 20px rgba(8, 126, 158, .23);
}

.primary:hover {
  box-shadow: 0 11px 25px rgba(8, 126, 158, .28);
}

.primary.sun {
  color: #071b29;
  background: var(--sun);
  box-shadow: 0 8px 20px rgba(248, 189, 79, .2);
}

.secondary {
  border-color: #cbd5d7;
  color: var(--navy);
  background: white;
  box-shadow: none;
}

#app {
  min-height: calc(100vh - 82px);
}

.library-view, .setup-view, .editor-view {
  padding-top: 32px;
}

.welcome-card {
  min-height: 440px;
  padding: clamp(40px, 6vw, 74px);
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  border: 1px solid rgba(79, 222, 217, .18);
  border-radius: 22px;
  color: var(--off-white);
  background:
    radial-gradient(circle at 78% 25%, rgba(22, 183, 199, .2), transparent 28%),
    radial-gradient(circle at 14% 115%, rgba(8, 127, 159, .26), transparent 42%),
    linear-gradient(135deg, #03131e, #071b29 52%, #0a2b3e);
  box-shadow: 0 30px 80px rgba(3, 19, 30, .22);
}

.welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 222, 217, .12) 32px 33px);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero-logo {
  display: block;
  width: min(500px, 100%);
  height: auto;
  margin-left: -12px;
}

.hero-subtitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.welcome-card .hero-description {
  max-width: 690px;
  margin: 22px 0 0;
  color: rgba(247, 246, 242, .8);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .015em;
}

.welcome-actions {
  margin-top: 30px;
}

.secondary.light {
  color: var(--off-white);
  border-color: rgba(80, 222, 217, .32);
  background: rgba(4, 23, 35, .4);
}

.hero-emblem {
  position: relative;
  z-index: 2;
  min-height: 300px;
  display: grid;
  place-items: center;
}

.hero-staff {
  position: absolute;
  inset: 12% -30% 8% 0;
  opacity: .35;
  transform: rotate(-7deg);
  background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(80, 222, 217, .18) 31px 33px);
}

.app-icon-frame {
  position: relative;
  width: 210px;
  height: 210px;
  padding: 14px;
  border: 1px solid rgba(80, 222, 217, .26);
  border-radius: 48px;
  background: rgba(2, 17, 27, .55);
  box-shadow: 0 28px 55px rgba(0, 0, 0, .28), inset 0 0 40px rgba(22, 183, 199, .08);
}

.app-icon-frame img {
  width: 100%;
  height: 100%;
  border-radius: 37px;
}

.hero-chip {
  position: absolute;
  padding: 7px 11px;
  border: 1px solid rgba(80, 222, 217, .28);
  border-radius: 999px;
  color: #86f1eb;
  background: rgba(3, 19, 30, .82);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.chip-one { top: 28px; right: 4px; }
.chip-two { left: -8px; bottom: 56px; }
.chip-three { right: 22px; bottom: 20px; color: #ffd17b; border-color: rgba(248, 189, 79, .3); }

.eyebrow, .eyebrow.purple {
  color: var(--aqua);
  font-size: 10px;
  letter-spacing: .22em;
}

.library-heading h2,
.trash-panel h3,
.project-card strong,
.empty-library h3,
.setup-intro h1,
.analysis-card h1,
.editor-title h1,
.chart-header h2 {
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
}

.library-heading h2 {
  color: var(--navy);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.search input, .trash-toggle {
  border-radius: 9px;
}

.project-grid {
  gap: 16px;
}

.project-card-wrap {
  min-height: 208px;
  border: 1px solid #d9e0e1;
  border-radius: 14px;
  background: white;
  box-shadow: 0 12px 28px rgba(7, 27, 41, .07);
}

.project-card-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--aqua);
}

.project-card-wrap:nth-child(3n+2)::before { background: var(--coral); }
.project-card-wrap:nth-child(3n)::before { background: var(--sun); }
.project-card-wrap:hover { transform: translateY(-3px); }

.project-card {
  min-height: 208px;
  border-radius: 14px;
  padding: 24px 24px 24px 29px;
  color: var(--navy);
}

.coral-card, .purple-card, .teal-card, .sun-card {
  color: var(--navy);
  background: transparent;
}

.project-card strong {
  font-size: 23px;
  font-weight: 650;
}

.project-note {
  color: var(--aqua);
  font-family: "Avenir Next", sans-serif;
  opacity: .08;
}

.project-status {
  color: #087b8a;
  background: var(--teal-pale);
}
.approved-card { border-color: #9fd5c2; box-shadow: 0 12px 30px rgba(26,119,88,.11); }
.approved-card::before { background: #27a56f !important; }
.approved-card .project-status { color: #116b4a; background: #ddf5e9; }

.editor-state-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.editor-approval-status { padding: 5px 9px; border: 1px solid #9bd6bf; border-radius: 999px; color: #126b4b; background: #e1f7ed; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.editor-approval-status[hidden] { display: none; }
.analysis-notice.approved-chart-notice { display: flex; align-items: center; gap: 12px; border: 1px solid #98d4ba; color: #315e4d; background: linear-gradient(135deg,#e3f8ee,#f5fcf8); }
.analysis-notice.approved-chart-notice strong { flex: 0 0 auto; color: #106d4b; font-size: 12px; }
.analysis-notice.approved-chart-notice span { font-size: 10px; line-height: 1.45; }

.dashboard-overview {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(220px, .8fr) minmax(310px, 1.4fr);
  gap: 14px;
  margin: -34px 24px 0;
}

.dashboard-action, .dashboard-stats {
  min-height: 96px;
  border: 1px solid #d8e3e4;
  border-radius: 15px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 34px rgba(7,27,41,.1);
}

.dashboard-action {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  text-align: left;
  cursor: pointer;
}

.dashboard-action > span:first-child {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #027d8c;
  background: #e3f8f7;
  font-size: 25px;
  font-weight: 500;
}

.dashboard-action-new > span:first-child { color: #80530a; background: #fff1c9; }
.dashboard-action > span:last-child { display: grid; gap: 4px; }
.dashboard-action strong { color: var(--navy); font-size: 15px; }
.dashboard-action small { color: #718087; font-size: 10px; line-height: 1.4; }
.dashboard-action:hover { border-color: var(--aqua); transform: translateY(-2px); }

.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 15px; }
.dashboard-stats span { display: grid; gap: 3px; text-align: center; }
.dashboard-stats span + span { border-left: 1px solid #e2e9ea; }
.dashboard-stats strong { color: var(--navy); font-size: 27px; font-weight: 600; }
.dashboard-stats small { color: #748188; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.phone-pilot-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #b9e1e1;
  border-radius: 20px;
  background: linear-gradient(135deg, #f0fcfb, #fffaf1 72%);
  box-shadow: 0 10px 28px rgba(3,39,58,.07);
}
.phone-pilot-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font: 800 27px Georgia, serif; box-shadow: 0 7px 16px rgba(8,124,138,.19); }
.phone-pilot-copy { min-width: 0; }
.phone-pilot-copy .eyebrow { margin: 0 0 3px; font-size: 9px; }
.phone-pilot-copy h2 { margin: 0; color: var(--navy); font: 700 22px/1.1 Georgia, serif; }
.phone-pilot-copy p:not(.eyebrow) { margin: 6px 0 2px; color: #536970; font-size: 10px; line-height: 1.45; }
.phone-pilot-copy small { color: #7d7182; font-size: 8px; line-height: 1.4; }
.phone-pilot-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.phone-pilot-actions .secondary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; font-size: 9px; text-align: center; }
.import-library-backup { position: relative; cursor: pointer; }
.import-library-backup input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.phone-pilot-status { grid-column: 2 / -1; min-height: 1em; margin: -8px 0 0; color: #08758a; font-size: 9px; font-weight: 750; }
.phone-pilot-status.has-error { color: #a03e34; }

.account-device-panel {
  margin: 0 0 20px;
  border: 1px solid #cfe1e2;
  border-radius: 17px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 9px 25px rgba(7, 39, 53, .05);
}
.account-device-panel > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  cursor: pointer;
  list-style: none;
}
.account-device-panel > summary::-webkit-details-marker { display: none; }
.account-device-panel > summary > span:nth-child(2) { display: grid; gap: 3px; }
.account-device-panel > summary small { color: #087c8a; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.account-device-panel > summary strong { color: var(--navy); font-size: 14px; }
.account-device-panel > summary b { padding: 7px 10px; border-radius: 999px; color: #087681; background: #eaf8f6; font-size: 9px; }
.account-device-panel[open] > summary b::before { content: "Close"; }
.account-device-panel[open] > summary b { font-size: 0; }
.account-device-panel[open] > summary b::before { font-size: 9px; }
.account-device-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font: 800 21px Georgia, serif; }
.account-device-panel .phone-pilot-card { margin: 0 10px 10px; border-radius: 14px; box-shadow: none; }
.legacy-library-transfer { margin: 0 10px 10px; border: 1px solid #d8e5e5; border-radius: 13px; background: #f8fbfa; }
.legacy-library-transfer > summary { padding: 11px 13px; color: #60747a; font-size: 9px; font-weight: 800; cursor: pointer; }
.legacy-library-transfer .cloud-library-claim { margin: 0 8px 8px; box-shadow: none; }

body.cloud-entry-active { padding: 0; background: #071b29; }
body.cloud-entry-active .topbar,
body.cloud-entry-active .mobile-tabbar { display: none; }
body.cloud-entry-active #app { min-height: 100dvh; }
.cloud-entry-view { min-height: 100dvh; display: grid; place-items: center; padding: clamp(18px, 4vw, 46px); background: radial-gradient(circle at 12% 10%, rgba(24,196,199,.28), transparent 28%), radial-gradient(circle at 88% 86%, rgba(255,122,89,.2), transparent 28%), linear-gradient(145deg, #071b29, #102f43 62%, #092233); }
.cloud-entry-shell { width: min(1060px, 100%); overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: rgba(255,255,255,.97); box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.cloud-entry-brand { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 70px); color: white; background: linear-gradient(155deg, rgba(7,27,41,.98), rgba(8,93,112,.94)), url('/jubal-icon.svg') 120% 112% / 54% no-repeat; }
.cloud-entry-brand img { width: min(300px, 82%); filter: drop-shadow(0 10px 24px rgba(0,0,0,.18)); }
.cloud-entry-brand > p:first-of-type { margin: 14px 0 30px; color: #42d4d6; font-size: 11px; font-weight: 850; letter-spacing: .28em; }
.cloud-entry-brand h1 { max-width: 450px; margin: 0; font-size: clamp(38px, 5vw, 62px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.cloud-entry-brand > p:last-child { max-width: 480px; margin: 22px 0 0; color: rgba(255,255,255,.73); font-size: 13px; line-height: 1.65; }
.cloud-entry-options { display: grid; align-content: center; gap: 11px; padding: clamp(28px, 5vw, 58px); padding-bottom: 24px; }
.cloud-entry-options button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 3px 14px; width: 100%; padding: 17px; border: 1px solid #dce8e7; border-radius: 17px; color: #0b1d2d; background: #fff; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.cloud-entry-options button:hover { transform: translateY(-2px); border-color: #61c8c8; box-shadow: 0 12px 26px rgba(7,55,71,.1); }
.cloud-entry-options button > span { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, #087c8a, #18c4c7); font-size: 21px; font-weight: 900; }
.cloud-entry-options button:nth-child(2) > span { background: linear-gradient(145deg, #6849c9, #9870df); }
.cloud-entry-options button:nth-child(3) > span { background: linear-gradient(145deg, #ff825f, #ffc857); }
.cloud-entry-options strong { font-size: 14px; }
.cloud-entry-options small { color: #6c7a7f; font-size: 9px; line-height: 1.45; }
.cloud-entry-options b { grid-column: 3; grid-row: 1 / 3; color: #168e98; font-size: 20px; }
.cloud-entry-existing { display: grid; justify-items: center; gap: 12px; padding: 0 clamp(28px, 5vw, 58px) 24px; }
.cloud-entry-existing .secondary { width: 100%; }
.cloud-local-link, .cloud-auth-mode-toggle { color: #087c8a; font-size: 10px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cloud-entry-safety { grid-column: 1 / -1; margin: 0; padding: 15px 24px; color: #526b72; background: #eef8f6; font-size: 9px; font-weight: 650; text-align: center; }
.cloud-entry-safety span { color: #14949b; font-weight: 900; }

.cloud-auth-shell { width: min(530px, 100%); position: relative; padding: clamp(28px, 6vw, 48px); border-radius: 27px; background: rgba(255,255,255,.98); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.cloud-auth-back { position: absolute; top: 20px; left: 22px; color: #597078; font-size: 10px; font-weight: 800; }
.cloud-auth-logo { width: 170px; display: block; margin: 8px auto 30px; }
.cloud-auth-heading { text-align: center; }
.cloud-auth-heading .eyebrow { margin-bottom: 7px; font-size: 8px; }
.cloud-auth-heading h1 { margin: 0; color: #071b29; font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.cloud-auth-heading > p:last-child { margin: 12px auto 23px; color: #687a80; font-size: 11px; line-height: 1.55; }
.cloud-auth-form { display: grid; gap: 13px; }
.cloud-auth-form > label { display: grid; gap: 6px; color: #52656c; font-size: 10px; font-weight: 750; }
.cloud-auth-form > label[hidden], .cloud-join-note[hidden] { display: none; }
.cloud-auth-form input { width: 100%; padding: 12px 13px; border: 1px solid #d5e1e1; border-radius: 11px; color: #0b1d2d; background: #fbfdfc; font-size: 14px; }
.cloud-auth-form input:focus { outline: 3px solid rgba(24,196,199,.15); border-color: #35b9bc; }
.cloud-auth-form .primary { width: 100%; min-height: 47px; margin-top: 3px; }
.cloud-auth-status { min-height: 1.4em; margin: 0; color: #087c8a; font-size: 10px; font-weight: 750; line-height: 1.45; }
.cloud-auth-status.has-error, .has-error { color: #a33d36 !important; }
.cloud-auth-status.has-success { padding: 11px; border-radius: 10px; color: #156d65; background: #e8f8f3; }
.cloud-join-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 11px; border-radius: 12px; color: #565070; background: #f1edfb; }
.cloud-join-note > span { font-size: 19px; }
.cloud-join-note p { margin: 0; font-size: 9px; line-height: 1.5; }
.cloud-auth-mode-toggle { display: block; margin: 17px auto 0; }
.cloud-auth-privacy { margin: 17px 0 0; color: #89969a; font-size: 8px; line-height: 1.5; text-align: center; }

.account-foundation-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #ded3f2;
  border-radius: 20px;
  background: linear-gradient(135deg, #f8f4ff, #fffaf1 72%);
  box-shadow: 0 10px 28px rgba(71,48,136,.07);
}
.account-foundation-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--purple), #8d66db); font: 800 24px Georgia, serif; box-shadow: 0 7px 16px rgba(78,52,173,.19); }
.account-foundation-card > div { min-width: 0; }
.account-foundation-card .eyebrow { margin: 0 0 3px; font-size: 9px; }
.account-foundation-card h2 { margin: 0; color: var(--navy); font: 700 22px/1.1 Georgia, serif; }
.account-foundation-card p:not(.eyebrow) { margin: 6px 0 0; color: #596970; font-size: 10px; line-height: 1.45; }

.account-view { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 42px 0 90px; }
.account-heading { align-items: center; }
.account-heading-actions { display: flex; align-items: center; gap: 9px; }
.account-version { display: block; margin-top: 5px; color: #839095; font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.account-save-top.has-unsaved-changes { color: #5e3d00; background: #ffc857; box-shadow: 0 7px 18px rgba(255,200,87,.25); }
.foundation-status { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #a9dcda; border-radius: 999px; color: #087582; background: #edfaf8; font-size: 10px; font-weight: 850; white-space: nowrap; }
.foundation-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(44,168,155,.13); }
.foundation-status.is-connected { border-color: #79cdbd; color: #087264; background: #eaf9f4; }
.cloud-foundation-notice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 18px; padding: 17px 19px; border: 1px solid #ecd387; border-radius: 16px; background: linear-gradient(135deg, #fff8df, #f5fbfa); }
.cloud-foundation-notice[hidden] { display: none; }
.cloud-foundation-notice > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #77540b; background: #ffe9a7; font-size: 20px; }
.cloud-foundation-notice strong { color: var(--navy); font-size: 13px; }
.cloud-foundation-notice p { margin: 4px 0 0; color: #68777d; font-size: 10px; line-height: 1.5; }
.personal-cloud-sync { margin: 0 0 18px; padding: 18px 20px; border: 1px solid #b8dbef; border-radius: 18px; background: linear-gradient(135deg, #f1f9fd, #f4fbf8 72%); box-shadow: 0 10px 28px rgba(8,105,143,.07); }
.personal-cloud-sync > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 13px; }
.personal-cloud-sync > header > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, #087c9c, #18b7c7); font-size: 22px; box-shadow: 0 8px 18px rgba(8,124,156,.17); }
.personal-cloud-sync .eyebrow { margin: 0 0 2px; font-size: 8px; }
.personal-cloud-sync h2 { margin: 0; color: var(--navy); font-size: 20px; }
.personal-cloud-sync header p:not(.eyebrow) { margin: 4px 0 0; color: #667a81; font-size: 9px; line-height: 1.45; }
.personal-cloud-sync-status { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid #d7e9ee; border-radius: 12px; color: #087681; background: rgba(255,255,255,.78); }
.personal-cloud-sync-status i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #20aa89; box-shadow: 0 0 0 4px rgba(32,170,137,.12); }
.personal-cloud-sync-status strong { font-size: 10px; }
.personal-cloud-sync-status small { margin-left: auto; color: #77898e; font-size: 8px; }
.account-sync-options { margin-top: 10px; border-top: 1px solid #d7e9ee; }
.account-sync-options > summary { padding: 10px 2px 0; color: #60747a; font-size: 8px; font-weight: 800; cursor: pointer; }
.private-material-sync { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 10px; padding: 11px 12px; border: 1px solid #d7e9ee; border-radius: 13px; background: rgba(255,255,255,.78); }
.private-material-sync[hidden] { display: none; }
.private-material-sync > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #087681; background: #e5f7f7; font-size: 15px; }
.private-material-sync strong { display: block; color: var(--navy); font-size: 10px; }
.private-material-sync p { margin: 2px 0; color: #667a81; font-size: 8px; line-height: 1.4; }
.private-material-sync small { display: block; color: #16826f; font-size: 8px; font-weight: 700; }
.private-material-sync .secondary { white-space: nowrap; }
.private-material-sync-actions { display: grid; justify-items: stretch; gap: 5px; }
.private-material-sync-stop { color: #6b7e83; font-size: 8px; text-decoration: underline; text-underline-offset: 2px; }
.cloud-sync-conflicts { display: grid; gap: 8px; margin-top: 12px; }
.cloud-sync-conflict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid #efcc8c; border-radius: 12px; background: #fff9e9; }
.cloud-sync-conflict strong { display: block; color: var(--navy); font-size: 10px; }
.cloud-sync-conflict small { display: block; margin-top: 2px; color: #7b6b4c; font-size: 8px; }
.cloud-sync-conflict div:last-child { display: flex; gap: 6px; }
.cloud-library-claim { margin: 0 0 20px; padding: 22px; border: 1px solid #9fd8d6; border-radius: 20px; background: linear-gradient(135deg, #effaf8, #fffaf1 74%); box-shadow: 0 12px 32px rgba(8,124,138,.08); }
.cloud-library-claim > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.cloud-library-claim > header > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font: 800 25px Georgia, serif; box-shadow: 0 8px 18px rgba(8,124,138,.18); }
.cloud-library-claim .eyebrow { margin: 0 0 3px; font-size: 8px; }
.cloud-library-claim h2 { margin: 0; color: var(--navy); font-size: 22px; }
.cloud-library-claim header p:not(.eyebrow) { max-width: 650px; margin: 5px 0 0; color: #64767b; font-size: 10px; line-height: 1.5; }
.cloud-library-counts { display: flex; gap: 7px; }
.cloud-library-counts span { min-width: 74px; display: grid; justify-items: center; gap: 1px; padding: 9px; border: 1px solid #cfe5e3; border-radius: 12px; background: rgba(255,255,255,.86); }
.cloud-library-counts strong { color: var(--navy); font-size: 17px; }
.cloud-library-counts small { color: #76878b; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cloud-claim-steps { display: grid; gap: 8px; margin-top: 18px; }
.cloud-claim-steps article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #dce7e6; border-radius: 13px; background: rgba(255,255,255,.88); }
.cloud-claim-steps article > b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #087681; background: #dff4f1; font-size: 11px; }
.cloud-claim-steps article > div { display: grid; gap: 2px; }
.cloud-claim-steps article strong { color: var(--navy); font-size: 10px; }
.cloud-claim-steps article p { margin: 0; color: #748388; font-size: 8px; line-height: 1.4; }
.cloud-claim-steps article.is-complete { border-color: #7dceb9; background: #effaf5; }
.cloud-claim-steps article.is-complete > b { color: white; background: #20a989; }
.cloud-library-attachment-note { margin: 12px 0 0; color: #7d6330; font-size: 8px; line-height: 1.45; }
.cloud-library-claim-status { min-height: 1.4em; margin: 9px 0 0; color: #087681; font-size: 9px; font-weight: 800; }
.cloud-library-claim-status.has-error { color: #a13f3a; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 18px; align-items: start; }
.account-panel { border: 1px solid #dce5e5; border-radius: 19px; background: rgba(255,255,255,.92); box-shadow: 0 12px 32px rgba(7,27,41,.07); }
.profile-panel { padding: 25px; }
.profile-panel > header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid #e5ebeb; }
.profile-panel > header > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--teal), #17c0c4); font-size: 24px; }
.profile-panel > header > .profile-music-icon { font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1; }

/* Update 191 — personal and church libraries */
.library-workspace-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid #b8dedc;
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 24px rgba(7,74,89,.08);
}
.library-workspace-switcher[hidden] { display: none; }
.library-workspace-switcher label { display: flex; align-items: center; gap: 10px; }
.library-workspace-switcher label > span:first-child { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font-size: 18px; }
.library-workspace-switcher label span:last-child { display: grid; gap: 1px; }
.library-workspace-switcher small { color: #75868a; font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.library-workspace-switcher strong { color: var(--navy); font-size: 13px; }
.library-workspace-switcher select { width: min(360px, 48vw); margin: 0; padding: 10px 34px 10px 12px; border-color: #c7dddd; background-color: #f8fcfb; font-weight: 800; }
.project-grid.is-list-view .project-favorite { right: 52px; }
.church-share-tools button { width: 100%; }
.church-library-panel { min-height: 460px; padding: 24px; border: 1px solid #c5dfde; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,250,248,.88)); box-shadow: 0 15px 42px rgba(6,58,73,.09); }
.church-library-panel[hidden] { display: none; }
.church-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.church-library-heading .eyebrow { margin: 0 0 3px; font-size: 8px; }
.church-library-heading h2 { margin: 0; color: var(--navy); font-size: 28px; }
.church-library-heading p:last-child { margin: 4px 0 0; color: #6c7f84; font-size: 9px; }
.church-library-tabs { display: flex; gap: 6px; margin: 20px 0 14px; padding: 5px; border-radius: 14px; background: #e9f4f2; }
.church-library-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; color: #5e7278; font-size: 10px; font-weight: 850; }
.church-library-tabs button strong { min-width: 21px; padding: 3px 6px; border-radius: 999px; color: #087681; background: rgba(255,255,255,.78); font-size: 8px; }
.church-library-tabs button.is-active { color: white; background: #087c8a; box-shadow: 0 5px 14px rgba(8,124,138,.18); }
.church-library-tabs button.is-active strong { color: #087681; background: white; }
.church-library-status { margin: 12px 0; padding: 10px 12px; border-radius: 11px; color: #087681; background: #e9f7f5; font-size: 9px; font-weight: 800; }
.church-library-status.has-error { color: #9c3f39; background: #fff0ee; }
.church-song-lock { position: absolute; z-index: 3; right: 15px; bottom: 15px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.8); font-size: 14px; }
.church-submission-list { display: grid; gap: 12px; }
.church-submission-card { padding: 17px; border: 1px solid #d8e5e4; border-left: 5px solid #ffc857; border-radius: 16px; background: white; box-shadow: 0 8px 20px rgba(7,54,67,.06); }
.church-submission-card.status-approved { border-left-color: #24a982; }
.church-submission-card.status-changes_requested { border-left-color: #ff9b62; }
.church-submission-card.status-rejected { border-left-color: #a4afb2; }
.church-submission-card > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.church-submission-card > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal); }
.church-submission-card h3 { margin: 5px 0 0; color: var(--navy); font-size: 18px; }
.church-submission-card header p { margin: 3px 0 0; color: #708186; font-size: 9px; }
.church-submission-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #71530d; background: #fff3c9; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.church-submission-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.church-submission-tags strong, .church-submission-tags i { padding: 5px 8px; border-radius: 999px; color: #087681; background: #e6f6f4; font-size: 8px; font-style: normal; }
.church-submission-card blockquote, .church-review-note, .church-review-waiting { margin: 10px 0; padding: 10px 12px; border-radius: 10px; color: #617278; background: #f6f9f8; font-size: 9px; line-height: 1.5; }
.church-submission-card label { display: grid; gap: 5px; color: #53666b; font-size: 9px; font-weight: 750; }
.church-submission-card textarea { width: 100%; margin: 0; padding: 10px; }
.church-review-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.church-submission-dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 22px; background: #fffdf9; box-shadow: 0 25px 80px rgba(4,28,42,.28); }
.church-submission-dialog::backdrop { background: rgba(3,28,41,.54); backdrop-filter: blur(3px); }
.church-submission-dialog form { position: relative; display: grid; gap: 13px; padding: 25px; }
.church-submission-dialog .dialog-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; border-radius: 50%; color: #607278; background: #edf3f2; font-size: 20px; }
.church-submission-dialog h2 { margin: -7px 0 2px; color: var(--navy); font-size: 25px; }
.church-submission-dialog label { display: grid; gap: 6px; color: #52656b; font-size: 9px; font-weight: 800; }
.church-submission-dialog select, .church-submission-dialog textarea { width: 100%; margin: 0; padding: 11px; }
.church-submission-dialog form > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
#church-submission-status { min-height: 1.3em; margin: 0; color: #a0443d; font-size: 9px; font-weight: 750; }

@media (max-width: 640px) {
  .library-workspace-switcher { align-items: stretch; flex-direction: column; }
  .library-workspace-switcher select { width: 100%; }
  .church-library-panel { padding: 15px; border-radius: 19px; }
  .church-library-heading { align-items: flex-start; }
  .church-library-heading h2 { font-size: 23px; }
  .church-library-heading .secondary { padding: 8px 9px; font-size: 8px; }
  .church-library-tabs { overflow-x: auto; }
  .church-library-tabs button { flex: 1 0 auto; justify-content: center; }
}
.profile-panel header .eyebrow { margin: 0 0 2px; font-size: 8px; }
.profile-panel h2, .account-sidebar h2 { margin: 0; color: var(--navy); font-size: 21px; }
.profile-panel header small { color: #728085; font-size: 9px; }
.account-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.account-field-grid label { display: grid; gap: 6px; color: #52646a; font-size: 10px; }
.account-field-grid label > input, .account-field-grid label > select { width: 100%; margin: 0; padding: 11px; }
.account-field-grid label > small { color: #829095; font-size: 8px; font-weight: 550; line-height: 1.4; }
.experience-field { display: grid; gap: 6px; }
.experience-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #52646a; font-size: 10px; }
.experience-help { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #9fd8d6; border-radius: 50%; color: #087582; background: #effaf8; font-size: 12px; font-weight: 900; }
.experience-field > select { width: 100%; margin: 0; padding: 11px; }
.experience-field > small { min-height: 2.8em; color: #718389; font-size: 8px; font-weight: 550; line-height: 1.4; }
.account-field-grid .wide-field { grid-column: 1 / -1; }
.account-field-grid .is-disabled { opacity: .48; }
.instrument-preference-fieldset { margin: 0; padding: 0; border: 0; }
.instrument-preference-fieldset legend { margin-bottom: 7px; color: #52646a; font-size: 10px; }
.instrument-preference-fieldset > small { display: block; margin-top: 6px; color: #829095; font-size: 8px; line-height: 1.4; }
.instrument-preference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.instrument-preference-grid label { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 8px 10px; border: 1px solid #dce7e7; border-radius: 10px; color: #53656b; background: #fff; cursor: pointer; }
.instrument-preference-grid label:has(input:checked) { border-color: #8bd4d2; color: #086f7b; background: #effaf8; }
.instrument-preference-grid input { width: auto !important; margin: 0 !important; accent-color: var(--teal); }
.account-check { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 9px !important; padding: 10px; border: 1px solid #dce7e7; border-radius: 12px; background: #f7fbfa; cursor: pointer; }
.account-check input { width: auto !important; margin: 3px 0 0 !important; accent-color: var(--teal); }
.account-check span { display: grid; gap: 2px; }
.account-check strong { color: var(--navy); font-size: 10px; }
.account-check small { color: #758389; font-size: 8px; font-weight: 550; line-height: 1.4; }
.material-preference-fieldset { margin-top: 22px; }
.material-preference-fieldset legend { font-size: 10px; }
.material-preference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.material-preference-grid label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 10px; border: 1px solid #e0e7e7; border-radius: 10px; color: #53656b; background: #fff; font-size: 9px; cursor: pointer; }
.material-preference-grid label:has(input:checked) { border-color: #8bd4d2; color: #086f7b; background: #effaf8; }
.material-preference-grid input { width: auto; accent-color: var(--teal); }
.account-print-defaults { margin-top: 18px; border: 1px solid #d8e6e6; border-radius: 14px; overflow: hidden; background: #fbfefd; }
.account-print-defaults > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: var(--navy); cursor: pointer; list-style: none; }
.account-print-defaults > summary::-webkit-details-marker { display: none; }
.account-print-defaults > summary span { display: grid; gap: 2px; }
.account-print-defaults > summary strong { font-size: 10px; }
.account-print-defaults > summary small { color: #74858a; font-size: 8px; font-weight: 600; }
.account-print-defaults > summary b { color: var(--teal); font-size: 16px; }
.account-print-defaults[open] > summary b { transform: rotate(45deg); }
.account-print-defaults .team-branding-card { border: 0; border-top: 1px solid #d8e6e6; border-radius: 0; }
.account-print-default-note { margin: 0; color: #708187; font-size: 8px; line-height: 1.4; }
.notification-check { margin-top: 16px; }
.account-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.account-form-actions p { margin: 0; color: #087783; font-size: 9px; font-weight: 750; }
.account-sidebar { display: grid; gap: 16px; }
.personal-workspace-panel, .organization-preview-panel { padding: 22px; }
.personal-workspace-panel { padding-block: 17px; }
.account-sidebar .eyebrow { margin-bottom: 8px; font-size: 8px; }
.workspace-card-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 17px; color: white; background: linear-gradient(145deg, var(--purple), #8f65df); font: 800 27px Georgia, serif; box-shadow: 0 8px 18px rgba(78,52,173,.18); }
.account-sidebar p:not(.eyebrow) { color: #68777d; font-size: 10px; line-height: 1.5; }
.personal-workspace-panel ul { display: grid; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.personal-workspace-panel li { color: #087681; font-size: 9px; font-weight: 750; }
.personal-workspace-panel li::before { content: "✓"; margin-right: 7px; color: var(--teal); }
.signed-in-account-email { overflow-wrap: anywhere; margin: 15px 0 0 !important; padding-top: 12px; border-top: 1px solid #e1e8e7; color: #087681 !important; font-weight: 750; }
.account-sign-out { margin-top: 9px; color: #785e87; font-size: 9px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.organization-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin: 16px 0; }
.organization-flow span { min-height: 42px; display: grid; place-items: center; padding: 6px; border-radius: 9px; color: #5d536f; background: #f1edfb; font-size: 7px; font-weight: 850; text-align: center; }
.organization-flow b { color: var(--teal); font-size: 12px; }
.organization-preview-panel button:disabled { opacity: .6; cursor: not-allowed; }
.organization-membership-list, .organization-invitation-list { display: grid; gap: 8px; }
.organization-membership-card { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dce7e6; border-radius: 11px; color: inherit; background: #f7fbfa; text-align: left; cursor: pointer; }
.organization-membership-card:hover, .organization-membership-card:focus-visible { border-color: #86ccc8; background: #eef9f7; box-shadow: 0 6px 16px rgba(5,87,99,.08); }
.organization-membership-card > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--teal); }
.organization-membership-card div { display: grid; gap: 2px; }
.organization-membership-card > b { color: #087681; font-size: 9px; white-space: nowrap; }
.organization-membership-list strong { color: var(--navy); font-size: 10px; }
.organization-membership-list small { color: #74858a; font-size: 8px; text-transform: capitalize; }
.organization-settings-dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 22px; background: #fffdf9; box-shadow: 0 25px 80px rgba(4,28,42,.28); }
.organization-settings-dialog::backdrop { background: rgba(3,28,41,.54); backdrop-filter: blur(3px); }
.organization-settings-dialog form { display: grid; gap: 15px; padding: 24px; }
.organization-settings-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.organization-settings-dialog header button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #5d7076; background: #edf3f2; font-size: 20px; }
.organization-settings-dialog h2 { margin: 2px 0 0; color: var(--navy); font-size: 25px; }
.organization-settings-dialog label { display: grid; gap: 6px; color: #52656b; font-size: 9px; font-weight: 800; }
.organization-settings-dialog input { width: 100%; margin: 0; padding: 11px; }
.organization-settings-dialog input[readonly] { color: #62747a; background: #f3f6f5; }
.organization-settings-role { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 12px; border-radius: 11px; color: #65787d; background: #f2f8f7; font-size: 9px; }
.organization-settings-role strong { color: #087681; }
#organization-settings-status { min-height: 1.3em; margin: 0; color: #087681; font-size: 9px; font-weight: 750; }
#organization-settings-status.has-error { color: #a0443d; }
.organization-settings-dialog form > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
.organization-empty { padding: 10px; border-radius: 10px; background: #f5f2fb; }
.organization-invitation-list h3 { margin: 15px 0 2px; color: var(--navy); font-size: 12px; }
.organization-invitation-list article { display: grid; gap: 9px; padding: 11px; border: 1px solid #e8d287; border-radius: 11px; background: #fff9e8; }
.organization-invitation-list article div { display: grid; gap: 2px; }
.organization-invitation-list article strong { color: var(--navy); font-size: 10px; }
.organization-invitation-list article small { color: #776c55; font-size: 8px; text-transform: capitalize; }
.organization-invitation-list article > span { display: flex; gap: 6px; }
.create-organization-form { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e1e8e7; }
.create-organization-form[hidden] { display: none; }
.create-organization-form label { display: grid; gap: 5px; color: #52656c; font-size: 9px; font-weight: 750; }
.create-organization-form input { width: 100%; padding: 10px; }
.create-organization-form button { width: 100%; }
.create-organization-form p { min-height: 1em; margin: 0 !important; }
.account-separation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.account-separation-grid article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 11px; padding: 16px; border: 1px solid #e0e6e6; border-radius: 14px; background: rgba(255,255,255,.72); }
.account-separation-grid article > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal); font-size: 12px; font-weight: 900; }
.account-separation-grid strong { color: var(--navy); font-size: 11px; }
.account-separation-grid p { margin: 0; color: #728086; font-size: 8px; line-height: 1.4; }
.experience-guide-dialog { width: min(650px, calc(100% - 28px)); padding: 24px; border: 0; border-radius: 22px; color: #52646a; background: #fffdf9; box-shadow: 0 24px 80px rgba(4,28,42,.24); }
.experience-guide-dialog::backdrop { background: rgba(5,27,40,.48); backdrop-filter: blur(3px); }
.experience-guide-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.experience-guide-head > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, var(--teal), #18c4c7); font-size: 21px; }
.experience-guide-head .eyebrow { margin: 0 0 2px; font-size: 8px; }
.experience-guide-head h2 { margin: 0; color: var(--navy); font-size: 23px; }
.experience-guide-head > button { width: 34px; height: 34px; border-radius: 50%; color: #6d7b80; background: #eef3f2; font-size: 20px; }
.experience-guide-intro { margin: 16px 0; color: #65767b; font-size: 11px; line-height: 1.55; }
.experience-guide-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.experience-guide-levels article { padding: 14px; border: 1px solid #dce6e5; border-radius: 14px; background: #fff; }
.experience-guide-levels article.is-selected { border-color: #69c7c5; background: #effaf8; box-shadow: inset 0 0 0 1px #69c7c5; }
.experience-guide-levels strong { color: var(--navy); font-size: 12px; }
.experience-guide-levels p { margin: 6px 0 0; color: #66787d; font-size: 9px; line-height: 1.5; }
.experience-song-choice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; margin: 14px 0; padding: 12px; border-radius: 13px; color: #4f4a68; background: #f2eefb; }
.experience-song-choice > span { color: var(--purple); font-size: 22px; font-weight: 900; }
.experience-song-choice p { margin: 0; font-size: 9px; line-height: 1.5; }
.experience-guide-dialog > .primary { width: 100%; }

.library-filters {
  display: grid;
  grid-template-columns: 1fr 1.2fr .8fr 1fr;
  align-items: end;
  gap: 10px;
  margin: -6px 0 18px;
  padding: 13px;
  border: 1px solid #dfe7e8;
  border-radius: 12px;
  background: rgba(255,255,255,.68);
}
.library-filters label { display: grid; gap: 5px; color: #5f6e73; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.library-filters select { min-height: 38px; padding: 7px 9px; background: white; }
.library-filter-panel > summary { display: none; }

.project-category {
  margin-top: 11px;
  padding: 4px 7px;
  border: 1px solid #d9e4e5;
  border-radius: 999px;
  color: #68777d;
  background: #f7faf9;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.project-tags i { padding: 3px 6px; border-radius: 999px; color: #08758a; background: #e7f8f7; font-size: 7px; font-style: normal; font-weight: 750; }
.project-favorite { position: absolute; z-index: 3; right: 15px; top: 15px; border: 0; color: #b4bec0; background: transparent; cursor: pointer; font-size: 20px; }
.project-favorite.is-favorite { color: #efb42c; filter: drop-shadow(0 2px 2px rgba(104,73,0,.14)); }

.library-view-choice {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d7e2e2;
  border-radius: 11px;
  background: #f2f7f6;
}
.library-view-choice button {
  min-width: 51px;
  min-height: 39px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #64767b;
}
.library-view-choice button span { font-size: 16px; line-height: 1; }
.library-view-choice button small { font-size: 8px; font-weight: 850; }
.library-view-choice button.is-selected {
  color: #087681;
  background: white;
  box-shadow: 0 3px 9px rgba(7, 45, 58, .1);
}

.project-grid.is-list-view {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.project-grid.is-list-view .project-card-wrap,
.project-grid.is-list-view .project-card {
  min-height: 72px;
  border-radius: 12px;
}
.project-grid.is-list-view .project-card-wrap { overflow: hidden; }
.project-grid.is-list-view .project-card-wrap:hover { transform: translateX(3px); }
.project-grid.is-list-view .project-card {
  display: grid;
  grid-template-columns: minmax(210px, 1.7fr) minmax(100px, .75fr) minmax(140px, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 16px;
  padding: 11px 102px 11px 23px;
}
.project-grid.is-list-view .project-note { display: none; }
.project-grid.is-list-view .project-card strong {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid.is-list-view .project-card small {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid.is-list-view .project-category {
  grid-column: 2;
  grid-row: 1 / 3;
  width: fit-content;
  margin: 0;
}
.project-grid.is-list-view .project-tags {
  grid-column: 3;
  grid-row: 1 / 3;
  max-height: 40px;
  overflow: hidden;
  margin: 0;
}
.project-grid.is-list-view .project-meta {
  grid-column: 4;
  grid-row: 1 / 3;
  margin: 0;
  white-space: nowrap;
}
.project-grid.is-list-view .project-status {
  grid-column: 5;
  grid-row: 1 / 3;
  white-space: nowrap;
}
.project-grid.is-list-view .project-favorite,
.project-grid.is-list-view .project-trash {
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.project-grid.is-list-view .project-favorite { right: 52px; }
.project-grid.is-list-view .project-trash { right: 11px; bottom: auto; }

.library-details-setup { margin: 0 0 24px; border: 1px solid #d7e3e4; border-radius: 12px; padding: 0; background: #f8fbfa; }
.library-details-setup summary { padding: 13px 15px; color: var(--navy); cursor: pointer; font-size: 12px; font-weight: 850; }
.library-details-setup summary span { margin-left: 6px; color: #7a898e; font-size: 9px; font-weight: 650; text-transform: uppercase; }
.library-details-setup[open] summary { border-bottom: 1px solid #e0e8e9; }
.library-details-setup .field-grid { margin: 15px 15px 8px; }
.library-details-setup > p { margin: 0 15px 15px; color: #718087; font-size: 10px; }

.sets-view {
  width: min(1120px, calc(100% - 40px));
  margin: auto;
  padding: 52px 0 90px;
}
.workspace-heading, .set-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.workspace-heading h1, .set-detail-heading h1 { margin: 0; color: var(--navy); font-size: clamp(36px,6vw,58px); font-weight: 600; letter-spacing: -.035em; }
.workspace-heading > div > p:last-child, .set-detail-heading > div > p:last-child { max-width: 650px; margin: 10px 0 0; color: #68777d; font-size: 13px; line-height: 1.6; }

.set-builder { margin-bottom: 32px; padding: 25px; border: 1px solid #b9dfe0; border-radius: 17px; background: linear-gradient(145deg,#f1fbfa,#fff9ea); box-shadow: 0 18px 42px rgba(7,27,41,.08); }
.set-builder[hidden] { display: none; }
.set-builder-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.set-builder-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #086f7c; background: #daf5f3; font-size: 20px; }
.set-builder-heading > div { display: grid; gap: 3px; }
.set-builder-heading strong { color: var(--navy); font-size: 18px; }
.set-builder-heading small { color: #6b797f; }
.set-details-grid { display: grid; grid-template-columns: 1.2fr .7fr 1fr; gap: 12px; }
.set-details-grid label, .set-add-song label { display: grid; gap: 6px; color: var(--navy); font-size: 10px; font-weight: 800; }
.set-details-grid input, .set-add-song select { width: 100%; padding: 11px; background: white; }
.set-builder fieldset { margin: 19px 0 0; padding: 0; border: 0; }
.set-builder legend { margin-bottom: 10px; color: var(--navy); font-size: 12px; font-weight: 850; }
.set-song-choices { max-height: 285px; overflow-y: auto; display: grid; gap: 7px; padding-right: 5px; }
.set-song-choice { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 11px; border: 1px solid #dce6e7; border-radius: 10px; background: white; cursor: pointer; }
.set-song-choice:has(input:checked) { border-color: var(--aqua); background: #effafa; }
.set-song-choice input { width: auto; accent-color: var(--aqua); }
.set-song-number, .set-order-number { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #067987; background: #e4f7f6; font-size: 11px; font-weight: 900; }
.set-song-choice > span:last-child { display: grid; gap: 2px; }
.set-song-choice small { color: #748187; font-size: 10px; }
.set-builder-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 17px; }
#set-form-message { min-height: 1.3em; margin: 10px 0 0; color: #a34231; font-size: 11px; font-weight: 750; }
.empty-set-note { margin: 0; padding: 30px; text-align: center; color: #78868a; border: 2px dashed #d8e2e3; border-radius: 12px; }

.sets-summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 16px; padding: 12px 15px; border-radius: 11px; color: #69777c; background: #eef7f6; }
.sets-summary span { display: flex; align-items: baseline; gap: 7px; }
.sets-summary strong { color: #057582; font-size: 23px; }
.sets-summary small { font-size: 10px; font-weight: 850; text-transform: uppercase; }
.sets-summary p { margin: 0; font-size: 10px; }
.sets-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.set-card { position: relative; min-height: 215px; overflow: hidden; border: 1px solid #dce4e5; border-radius: 15px; background: white; box-shadow: 0 12px 28px rgba(7,27,41,.07); }
.set-card::before { content:""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--aqua); }
.set-card.set-color-1::before { background: var(--sun); }.set-card.set-color-2::before { background: var(--coral); }
.set-card > button { width: 100%; min-height: 215px; display: flex; flex-direction: column; align-items: start; padding: 23px; border: 0; text-align: left; background: transparent; cursor: pointer; }
.set-card-icon { position: absolute; right: 19px; top: 20px; color: #d2eaeb; font-size: 54px; font-weight: 300; line-height: .7; }
.set-card strong { margin-top: auto; color: var(--navy); font-size: 21px; }
.set-card small { margin-top: 4px; color: #718086; font-size: 10px; }
.set-preview { margin-top: 14px; color: #087985; font-size: 9px; font-weight: 750; line-height: 1.4; }

.set-detail-songs { display: grid; gap: 9px; }
.set-song-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dce5e6; border-radius: 12px; background: white; box-shadow: 0 5px 16px rgba(7,27,41,.04); }
.set-song-open { display: grid; gap: 3px; border: 0; text-align: left; background: transparent; cursor: pointer; }
.set-song-open strong { color: var(--navy); font-size: 14px; }
.set-song-open small { color: #748288; font-size: 10px; }
.set-song-actions { display: flex; gap: 5px; }
.set-song-actions button { width: 33px; height: 33px; border: 1px solid #d5e1e2; border-radius: 9px; color: #087884; background: #f5fbfa; cursor: pointer; }
.set-song-actions button:last-child { color: #a14b3a; background: #fff6f3; }
.set-song-actions button:disabled { opacity: .35; cursor: default; }
.set-add-song { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 18px; padding: 16px; border: 1px dashed #c8d9da; border-radius: 13px; background: #f7fbfa; }

.set-performance-chart { display: grid; gap: 80px; }
.set-performance-song { padding-bottom: 65px; border-bottom: 2px solid rgba(80,222,217,.28); }
.set-performance-song:last-child { border-bottom: 0; }
.set-performance-song > header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-bottom: 34px; padding: 22px; border-radius: 14px; color: white; background: linear-gradient(135deg,#073047,#075565); }
.set-performance-song > header > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #073047; background: #55e2dc; font-size: 19px; font-weight: 900; }
.set-performance-song > header h1 { margin: 0; font-size: calc(29px * var(--performance-scale)); }
.set-performance-song > header p { margin: 5px 0 0; color: rgba(255,255,255,.74); font-size: calc(11px * var(--performance-scale)); }

.setup-card {
  border: 1px solid rgba(7, 27, 41, .09);
  border-radius: 20px;
}

.setup-intro {
  overflow: hidden;
  color: var(--off-white);
  background:
    radial-gradient(circle at 110% 0, rgba(22, 183, 199, .32), transparent 35%),
    linear-gradient(155deg, #061824, #0a2b3e);
}

.setup-intro::after {
  content: "";
  position: absolute;
  inset: auto -40px 30px -20px;
  height: 150px;
  opacity: .35;
  transform: rotate(-8deg);
  background: repeating-linear-gradient(180deg, transparent 0 24px, rgba(80, 222, 217, .2) 25px 27px);
}

.setup-intro .eyebrow { color: #50ded9; }
.setup-intro h1 { position: relative; z-index: 1; font-size: 50px; font-weight: 600; line-height: 1.05; }
.setup-intro p:not(.eyebrow) { position: relative; z-index: 1; }
.spark { color: var(--aqua-bright); }

input, select, textarea {
  border-color: #cfd9db;
  border-radius: 8px;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(22, 183, 199, .16);
  border-color: var(--aqua);
}

.rights-check > input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

.experimental-transcription-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #a8dde0;
  border-radius: 10px;
  background: linear-gradient(135deg, #effafa, #fff9ed);
  cursor: pointer;
}

.experimental-transcription-option input {
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--aqua);
}

.experimental-transcription-option span { display: grid; gap: 3px; }
.experimental-transcription-option strong { color: var(--navy); font-size: 12px; }
.experimental-transcription-option small { color: var(--muted); font-size: 9px; line-height: 1.45; }

.lyrics-model-setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 9px;
  padding: 12px 14px;
  border: 1px solid #f1c767;
  border-radius: 10px;
  color: #6f4b09;
  background: #fff8e5;
}

.lyrics-model-setup[hidden] { display: none; }
.lyrics-model-setup > div { display: grid; gap: 3px; }
.lyrics-model-setup strong { font-size: 11px; }
.lyrics-model-setup small { font-size: 9px; line-height: 1.45; }
.lyrics-model-setup button { flex: 0 0 auto; }

.enhanced-analysis-setup {
  border-color: #8bd9dc;
  background: linear-gradient(135deg, #e7fafa, #fff8df);
}

.enhanced-analysis-setup.ready {
  border-color: #85d8aa;
  background: linear-gradient(135deg, #ebfff3, #effcfc);
}

.enhanced-analysis-setup.ready strong::before {
  content: "✓ ";
  color: #168458;
}

.learned-chord-setup {
  border-color: #18c4c7;
  background: linear-gradient(135deg, #e5fbfb, #edf4ff 62%, #fff4d6);
}

.learned-chord-setup.ready {
  border-color: #85d8aa;
  background: linear-gradient(135deg, #ebfff3, #effcfc);
}

.learned-chord-setup.ready strong::before {
  content: "✓ ";
  color: #168458;
}

.option, .audio-drop, .converter-panel, .lyrics-guide-card {
  border-radius: 10px;
}

.option:has(input:checked) {
  border-color: var(--aqua);
  background: #edfafa;
  box-shadow: inset 0 0 0 1px var(--aqua);
}

.option-icon, .lyrics-guide-icon, .audio-drop-icon, .converter-icon {
  border-radius: 9px;
  box-shadow: none;
  transform: none;
}

.line-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-drop {
  border-color: #9cced3;
  background: #f4fbfb;
}

.audio-drop-icon {
  color: #087f9f;
  background: #dff6f6;
}

.converter-icon {
  color: #073b4f;
  background: #9be7e4;
}

.lyrics-guide-card {
  border-color: #e9d8ad;
  background: linear-gradient(135deg, #fffaf0, #f4fbfb);
}

.analysis-view {
  background:
    radial-gradient(circle at 50% 15%, rgba(22, 183, 199, .15), transparent 38%),
    var(--paper);
}

.analysis-card {
  border: 1px solid #d8e2e3;
  border-radius: 20px;
}

.analysis-art > span {
  width: 82px;
  height: 82px;
  padding: 7px;
  border-radius: 22px;
  background: var(--navy);
  box-shadow: 0 15px 35px rgba(7, 27, 41, .24);
}

.analysis-art > span img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.pulse-ring { border-color: rgba(22, 183, 199, .32); }

.analysis-card h1 {
  color: var(--navy);
  font-weight: 600;
}

#analysis-progress, #converter-progress {
  background: linear-gradient(90deg, #0b9fb3, #50ded9, #f8bd4f);
}

.editor-title h1 {
  color: var(--navy);
  font-weight: 650;
}

.editor-layout {
  gap: 16px;
}

.control-panel {
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #8ccbd1 #eef5f5;
  border-color: #d1dcde;
  border-radius: 13px;
  box-shadow: 0 12px 30px rgba(7, 27, 41, .08);
}

.control-panel::-webkit-scrollbar { width: 8px; }
.control-panel::-webkit-scrollbar-track { background: #eef5f5; }
.control-panel::-webkit-scrollbar-thumb { border: 2px solid #eef5f5; border-radius: 999px; background: #8ccbd1; }
.control-panel:focus-visible { outline: 3px solid rgba(22,183,199,.28); outline-offset: 3px; }

.panel-block {
  border-bottom-color: #e1e7e8;
}

.panel-label {
  color: var(--navy);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.segmented {
  border-radius: 8px;
  background: #e9f1f2;
}

.segmented button {
  border-radius: 6px;
}

.segmented button.active {
  color: #087f9f;
  box-shadow: 0 2px 7px rgba(7, 27, 41, .1);
}

.edit-tools button {
  color: #087f9f;
  border-color: #b9dfe2;
  background: #f1fbfb;
}

.happy-tip {
  color: #31515e;
  background: linear-gradient(135deg, #e9f8f7, #fff8e3);
}

.happy-tip > span {
  color: var(--aqua);
}

.chart-workspace {
  border: 1px solid #d5dfe1;
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg, #eaf0f1 0 31px, #dfe8ea 32px 33px);
}

.chart-paper {
  border-radius: 2px;
  box-shadow: 0 15px 42px rgba(7, 27, 41, .15);
}

.analysis-notice {
  color: #164d5d;
  background: #e4f6f6;
}

.analysis-notice.needs-attention {
  color: #68460b;
  border: 1px solid #efc45d;
  background: #fff6dc;
}

.analysis-notice.needs-attention strong {
  display: block;
  margin-bottom: 4px;
  color: #9a5700;
  font-size: 13px;
}

.analysis-candidate-panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #9fdde0;
  border-radius: 14px;
  color: #164d5d;
  background: linear-gradient(135deg, #e9fbfb, #fff8e3);
  box-shadow: 0 10px 26px rgba(7, 27, 41, .08);
}
.analysis-candidate-panel header { display: flex; gap: 11px; align-items: center; }
.analysis-candidate-panel header > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--aqua); }
.analysis-candidate-panel header p { margin: 0 0 2px; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.analysis-candidate-panel h2 { margin: 0; color: var(--navy); font-size: 19px; }
.analysis-candidate-list { display: grid; gap: 7px; max-height: 260px; margin: 14px 0; overflow: auto; }
.analysis-candidate-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.78); }
.analysis-candidate-item span { display: grid; gap: 2px; }
.analysis-candidate-item small { color: #55727b; }
.analysis-candidate-item strong { color: var(--navy); }
.analysis-candidate-item i { padding: 0 5px; color: var(--aqua); font-style: normal; }
.analysis-candidate-item button { padding: 7px 10px; border: 1px solid #8ccbd1; border-radius: 7px; color: #075f73; background: #fff; font-weight: 800; cursor: pointer; }
.analysis-candidate-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.analysis-candidate-panel > small { display: block; color: #55727b; }
.analysis-candidate-empty { margin: 0; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.7); }

.chart-kicker {
  color: var(--aqua);
  letter-spacing: .2em;
}

.chart-header {
  border-bottom-color: var(--navy);
}

.chart-header h2 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .01em;
}

.section-name {
  color: #087f9f;
  border-color: #b9dfe2;
  background: #f2fbfb;
}

.align-words {
  color: #087f9f;
  border-color: #b9dfe2;
  background: #f2fbfb;
}

.rendered-section h3 {
  color: #087f9f;
  letter-spacing: .18em;
}

button.measure:hover, button.measure:focus-visible {
  color: #087f9f;
  background: #e7f7f7;
  outline-color: var(--aqua);
}

.measure[data-confidence]::after {
  background: var(--aqua);
}

.inline-chord-input {
  color: var(--navy);
  border-color: var(--aqua);
  box-shadow: 0 0 0 4px rgba(22, 183, 199, .14);
}

.inline-lyric-segment > strong,
.chart-pair.is-aligning .measure {
  color: #087f9f;
}

.word-aligner-head {
  color: var(--navy);
  background: #e7f7f7;
}
.fill-lyric-anchors { margin-left: auto; padding: 7px 9px; border: 1px solid #9cced3; border-radius: 7px; color: #075f73; background: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
.inline-chord-actions button.matching-chord-action { grid-column: 1 / -1; color: #075f73; background: #e9fbfb; }

.chart-pair.is-aligning .bar-line {
  border-left-color: var(--aqua);
}

.chart-pair.is-aligning .measure {
  border-right-color: var(--aqua);
}

#chord-size,
#print-text-size {
  touch-action: none;
}

.add-section {
  color: #087f9f;
  border-color: #9cced3;
  border-radius: 9px;
  background: #f3fbfb;
}

.chart-footer > .jubal-footer-logo {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 108px;
  height: auto;
  margin: 0;
  opacity: .78;
}

.chart-footer > .team-print-footer {
  grid-column: 2;
  grid-row: 1;
}

.performance-view {
  background:
    radial-gradient(circle at 50% -20%, rgba(22, 183, 199, .12), transparent 45%),
    #03131e;
}

.performance-head {
  min-height: 76px;
  border-bottom-color: rgba(80, 222, 217, .18);
  background: rgba(3, 19, 30, .95);
}

.performance-brand img {
  display: block;
  width: 130px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.performance-head small {
  color: #90a6ad;
}

.performance-control {
  min-width: 48px;
  min-height: 44px;
  border-color: #31515e;
  border-radius: 8px;
  color: var(--off-white);
  background: #0a2b3e;
}

.performance-control.exit {
  color: #ff9c8f;
}

.performance-chart h2 {
  color: #65eee7;
  font-size: calc(1rem * var(--performance-scale));
}

.performance-chart .measure {
  border-color: #3c5b67;
}

.performance-chart .inline-lyric-segment > strong {
  color: #65eee7;
}

.performance-chart .compact-chord-heading,
.performance-chart .compact-chord-only,
.performance-chart .compact-music-segment > strong,
.performance-chart .compact-leading-lyrics > strong {
  color: #65eee7;
}

@media (max-width: 900px) {
  .welcome-card {
    grid-template-columns: 1fr;
  }
  .hero-emblem {
    min-height: 230px;
  }
  .app-icon-frame {
    width: 170px;
    height: 170px;
    border-radius: 40px;
  }
  .control-panel {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-width: auto;
  }
}

@media (max-width: 640px) {
  .bass-run-editor, .bass-run-chart {
    grid-template-columns: 1fr;
  }
  .bass-run-editor > small {
    grid-column: 1;
  }
  .topbar {
    height: 70px;
  }
  .brand {
    width: 145px;
  }
  .brand-logo {
    width: 145px;
    height: 48px;
  }
  .topbar nav {
    gap: 7px;
  }
  .nav-button {
    display: none;
  }
  .nav-button.home-nav {
    display: inline-flex;
    font-size: 10px;
  }
  .primary.small {
    padding: 9px 11px;
  }
  #app {
    min-height: calc(100vh - 70px);
  }
  .welcome-card {
    min-height: 0;
    padding: 38px 24px;
    border-radius: 16px;
  }
  .hero-logo {
    width: 330px;
  }
  .welcome-card .hero-description {
    font-size: 13px;
  }
  .welcome-actions {
    flex-direction: column;
  }
  .hero-emblem {
    display: none;
  }
  .library-heading h2 {
    font-size: 28px;
  }
  .project-card-wrap, .project-card {
    min-height: 175px;
  }
  .organize-song-dialog > header { grid-template-columns: auto 1fr auto; padding: 15px; }
  .organize-song-mark { width: 40px; height: 40px; }
  #approved-song-organization-form { padding: 15px; }
  .organize-main-category, .organize-tag-groups { grid-template-columns: 1fr; }
  .organize-song-actions { display: grid; grid-template-columns: 1fr; }
  .performance-brand img {
    width: 100px;
  }
}

@media (max-width: 900px) {
  .library-filters { grid-template-columns: 1fr 1fr 1fr; }
  .library-filters p { grid-column: 1 / -1; text-align: left; }
  .project-grid.is-list-view .project-card { grid-template-columns: minmax(190px, 1.6fr) minmax(95px, .7fr) auto auto; }
  .project-grid.is-list-view .project-tags { display: none; }
  .project-grid.is-list-view .project-meta { grid-column: 3; }
  .project-grid.is-list-view .project-status { grid-column: 4; }
}

@media (max-width: 640px) {
  .library-filters { grid-template-columns: 1fr 1fr; }
  .library-filters label:nth-child(4), .library-filters p { grid-column: 1 / -1; }
  .library-filter-panel { margin: -2px 0 10px; }
  .library-filter-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 43px;
    padding: 9px 12px;
    border: 1px solid #dce6e6;
    border-radius: 11px;
    color: #3d5962;
    background: rgba(255,255,255,.76);
    cursor: pointer;
    list-style: none;
  }
  .library-filter-panel > summary::-webkit-details-marker { display: none; }
  .library-filter-panel > summary span { font-size: 10px; font-weight: 850; }
  .library-filter-panel > summary span::before { content: "⚙ "; color: #087c8a; }
  .library-filter-panel > summary strong { color: #087c8a; font-size: 9px; }
  .library-filter-panel[open] > summary { border-radius: 11px 11px 0 0; }
  .library-filter-panel .library-filters { margin: 0; border-top: 0; border-radius: 0 0 11px 11px; }
  .library-heading { gap: 13px; }
  .library-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .library-tools .search { width: 100%; }
  .library-view-choice { grid-column: 2; grid-row: 1; }
  .trash-toggle { grid-column: 1 / -1; width: fit-content; min-height: 38px; }
  .project-grid.is-list-view .project-card-wrap,
  .project-grid.is-list-view .project-card { min-height: 72px; }
  .project-grid.is-list-view .project-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    padding: 10px 89px 10px 21px;
  }
  .project-grid.is-list-view .project-card strong { grid-column: 1; grid-row: 1; font-size: 14px; }
  .project-grid.is-list-view .project-card small { grid-column: 1; grid-row: 2; }
  .project-grid.is-list-view .project-category,
  .project-grid.is-list-view .project-tags { display: none; }
  .project-grid.is-list-view .project-meta { grid-column: 2; grid-row: 1; font-size: 8px; }
  .project-grid.is-list-view .project-status { grid-column: 2; grid-row: 2; justify-self: end; padding: 4px 7px; font-size: 7px; }
  .account-device-panel .phone-pilot-card { grid-template-columns: auto minmax(0, 1fr); }
}

@media print {
  body {
    background: white;
  }
  .chart-footer > .jubal-footer-logo {
    width: 96px;
    filter: grayscale(1);
  }
}

@media (max-width: 640px) {
  body { overflow-x: hidden; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .topbar {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    justify-content: center;
  }
  .topbar nav { display: none; }
  .brand, .brand-logo { width: 134px; }
  .brand-logo { height: 43px; }
  #app { min-height: calc(100dvh - 62px - env(safe-area-inset-top)); }
  .library-view, .setup-view, .editor-view, .sets-view, .account-view {
    width: min(100% - 24px, 1240px);
    padding-top: 18px;
    padding-bottom: 30px;
  }
  .welcome-card { min-height: 0; padding: 24px; }
  .hero-logo { width: min(235px, 84%); }
  .hero-subtitle { margin-bottom: 0; }
  .welcome-card .hero-description,
  .welcome-card .welcome-actions { display: none; }
  .dashboard-overview { grid-template-columns: 1fr 1fr; gap: 9px; margin: 11px 0 0; }
  .dashboard-action, .dashboard-stats { width: 100%; min-width: 0; }
  .dashboard-action { min-height: 72px; grid-template-columns: auto 1fr; gap: 9px; padding: 12px; }
  .dashboard-action > span:first-child { width: 37px; height: 37px; border-radius: 11px; font-size: 21px; }
  .dashboard-action small { display: none; }
  .dashboard-stats { grid-column: 1 / -1; min-height: 65px; padding: 8px; }
  .dashboard-stats strong { font-size: 21px; }
  .mobile-tabbar {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 10px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(8,117,138,.18);
    background: rgba(255,253,249,.96);
    box-shadow: 0 -10px 28px rgba(3,39,58,.1);
    backdrop-filter: blur(18px);
  }
  .mobile-tabbar button {
    min-width: 48px;
    min-height: 54px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    border-radius: 14px;
    color: #31515e;
  }
  .mobile-tabbar button:active { background: #e9f8f7; transform: scale(.97); }
  .mobile-tabbar button > span { color: var(--teal); font-size: 20px; font-weight: 900; line-height: 1; }
  .mobile-tabbar button > small { font-size: 9px; font-weight: 850; }
  .mobile-tabbar .mobile-new-song > span { width: 30px; height: 30px; display: grid; place-items: center; margin-top: -14px; border-radius: 12px; color: white; background: linear-gradient(145deg, var(--purple), #8b68db); box-shadow: 0 5px 12px rgba(78,52,173,.25); }
  body:has(.performance-view) { padding-bottom: 0; }
  body:has(.performance-view) .mobile-tabbar,
  body:has(.print-preview-view) .mobile-tabbar { display: none; }
  .phone-pilot-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px; }
  .phone-pilot-icon { width: 42px; height: 42px; border-radius: 14px; }
  .phone-pilot-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .phone-pilot-actions .secondary { min-height: 44px; white-space: normal; }
  .phone-pilot-status { grid-column: 1 / -1; margin-top: -4px; }
  .cloud-entry-view { min-height: 100dvh; padding: 0; place-items: stretch; }
  .cloud-entry-shell { min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .cloud-entry-brand { min-height: 310px; justify-content: end; padding: calc(30px + env(safe-area-inset-top)) 24px 30px; background-position: 112% 110%; }
  .cloud-entry-brand img { width: 210px; }
  .cloud-entry-brand > p:first-of-type { margin: 9px 0 23px; }
  .cloud-entry-brand h1 { font-size: 40px; }
  .cloud-entry-brand > p:last-child { margin-top: 14px; font-size: 11px; }
  .cloud-entry-options { align-content: start; padding: 22px 16px 14px; }
  .cloud-entry-options button { min-height: 76px; padding: 13px; }
  .cloud-entry-existing { padding: 0 16px 18px; }
  .cloud-entry-safety { grid-column: auto; }
  .cloud-auth-view { padding: 12px; place-items: center; }
  .cloud-auth-shell { padding: 56px 20px 28px; }
  .cloud-auth-logo { width: 145px; margin-bottom: 22px; }
  .cloud-foundation-notice { grid-template-columns: auto 1fr; }
  .cloud-foundation-notice > button { grid-column: 1 / -1; width: 100%; }
  .personal-cloud-sync { padding: 16px; }
  .personal-cloud-sync > header { grid-template-columns: auto minmax(0, 1fr); }
  .personal-cloud-sync > header .personal-cloud-sync-status { grid-column: 1 / -1; width: 100%; }
  .personal-cloud-sync > header > button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .personal-cloud-sync-status { align-items: flex-start; flex-wrap: wrap; }
  .personal-cloud-sync-status small { width: 100%; margin-left: 17px; }
  .private-material-sync { grid-template-columns: auto minmax(0, 1fr); }
  .private-material-sync-actions { grid-column: 1 / -1; width: 100%; }
  .private-material-sync-actions .secondary { width: 100%; min-height: 42px; }
  .cloud-sync-conflict { grid-template-columns: 1fr; }
  .cloud-sync-conflict div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .cloud-library-claim { padding: 16px; }
  .cloud-library-claim > header { grid-template-columns: auto minmax(0, 1fr); }
  .cloud-library-counts { grid-column: 1 / -1; width: 100%; }
  .cloud-library-counts span { flex: 1; min-width: 0; }
  .cloud-claim-steps article { grid-template-columns: auto minmax(0, 1fr); }
  .cloud-claim-steps article > button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .account-foundation-card { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .account-foundation-card > button { grid-column: 1 / -1; min-height: 44px; }
  .account-layout { grid-template-columns: 1fr; }
  .account-field-grid, .material-preference-grid, .account-separation-grid { grid-template-columns: 1fr; }
  .experience-guide-levels { grid-template-columns: 1fr; }
  .account-heading { align-items: stretch; }
  .account-heading-actions { align-items: stretch; justify-content: space-between; }
  .account-save-top { margin-left: auto; }
  .foundation-status { width: fit-content; }
  .account-form-actions { align-items: stretch; flex-direction: column; }
  .account-form-actions .primary { width: 100%; }
}
.startup-recovery {
  width: min(460px, calc(100% - 32px));
  margin: clamp(48px, 12vh, 120px) auto 120px;
  padding: 30px 24px;
  border: 1px solid color-mix(in srgb, var(--teal, #087c8a) 28%, white);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 54px rgb(11 29 45 / 10%);
  text-align: center;
}

.startup-recovery-note {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #087c8a, #18c4c7);
  font-size: 26px;
}

.startup-recovery h1 { margin: 0 0 10px; color: #0b1d2d; font-size: 24px; }
.startup-recovery p { margin: 0 auto 20px; color: #526972; line-height: 1.55; }
.startup-recovery button {
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #087c8a;
  font: inherit;
  font-weight: 700;
}
.startup-recovery small { display: block; margin: 15px auto 0; color: #6c7e84; line-height: 1.45; }
.startup-recovery details { margin-top: 18px; color: #7d8b90; font-size: 12px; }
.startup-recovery code { display: block; margin-top: 8px; overflow-wrap: anywhere; }

/* Approved charts keep their detailed timing data, but phones present it as a
   familiar lyric-first chord chart. The measure grid remains available while editing. */
.compact-music-line,
.mobile-chart-tools-toggle {
  display: none;
}

.editor-action-glyph,
.editor-action-label {
  display: inline-block;
}

@media print {
  .compact-music-line {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .editor-view {
    width: 100%;
    padding: 10px 10px 28px;
  }

  .editor-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 9px;
    margin-bottom: 9px;
  }

  .editor-head .back {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
  }

  .editor-title h1 {
    margin-top: 2px;
    font-size: 21px;
    line-height: 1.1;
  }

  .editor-title p,
  .editor-state-row {
    font-size: 8px;
  }

  .editor-actions {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    gap: 4px;
    padding: 2px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .editor-actions::-webkit-scrollbar {
    display: none;
  }

  .editor-actions .history-actions {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .editor-actions .editor-action-button,
  .editor-actions .history-actions .editor-action-button {
    flex: 1 0 41px;
    width: auto;
    min-width: 41px;
    min-height: 40px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    padding: 4px 2px;
    border-radius: 9px;
  }

  .editor-action-glyph {
    font-size: 15px;
    line-height: 1;
  }

  .editor-action-label {
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
  }

  .mobile-chart-tools-toggle {
    display: grid;
  }

  .editor-view:not(.mobile-tools-open) .control-panel {
    display: none;
  }

  .editor-view.mobile-tools-open .control-panel {
    display: grid;
    margin: 0 0 10px;
    border-radius: 13px;
  }

  .editor-layout {
    gap: 0;
  }

  .chart-workspace {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .chart-paper.chart-locked {
    min-height: 0;
    padding: 15px 12px 80px;
    border-radius: 12px;
  }

  .chart-paper.chart-locked .chart-header {
    gap: 8px;
    padding-bottom: 13px;
  }

  .chart-paper.chart-locked .chart-header h2 {
    font-size: 25px;
  }

  .chart-paper.chart-locked .chart-meta {
    gap: 12px;
    justify-content: flex-start;
  }

  .chart-paper.chart-locked .song-section {
    padding: 17px 0;
  }

  .chart-paper.chart-locked .rendered-section {
    margin-top: 0;
  }

  .chart-paper.chart-locked .rendered-section h3 {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .mobile-compact-ready > .bar-line,
  .mobile-compact-ready > .saved-aligned-lyric-grid,
  .mobile-compact-ready > .direct-word-grid,
  .mobile-compact-ready > .inline-lyric-line,
  .mobile-compact-ready > .lyric-line {
    display: none !important;
  }

  .mobile-compact-ready > .compact-music-line {
    display: flex;
  }

  .compact-music-line {
    max-width: 100%;
    color: var(--ink);
  }

  .compact-music-aligned {
    flex-wrap: wrap;
    align-items: end;
    column-gap: 14px;
    row-gap: 9px;
    margin: 1px 0 5px;
  }

  .compact-music-segment,
  .compact-leading-lyrics {
    flex: 0 0 auto;
    display: inline-grid;
    max-width: 100%;
    grid-template-rows: auto auto;
    gap: 2px;
    align-items: end;
  }

  .compact-music-segment > strong,
  .compact-leading-lyrics > strong {
    color: #075f73;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
  }

  .compact-leading-lyrics > strong {
    visibility: hidden;
  }

  .compact-music-segment > span,
  .compact-leading-lyrics > span {
    font-size: 15px;
    font-weight: 520;
    line-height: 1.32;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .compact-empty-lyric {
    visibility: hidden;
  }

  .compact-music-unaligned {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 1px 0 6px;
  }

  .compact-chord-sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
  }

  .compact-chord-only {
    color: #075f73;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  .compact-plain-lyrics {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
  }

  .compact-run-segment > strong,
  .compact-run-only {
    color: #087c8a;
  }

  .compact-run-segment small,
  .compact-run-only small {
    display: block;
    margin-bottom: 1px;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
  }

  .chart-paper.chart-locked .chart-pair {
    margin-bottom: 13px;
  }

  .performance-head {
    min-height: 54px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 6px 8px;
  }

  .performance-brand img {
    width: 70px;
    height: 30px;
  }

  .performance-head > div:nth-child(2) {
    text-align: left;
    min-width: 0;
  }

  .performance-head strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .performance-head small {
    display: block;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .performance-actions {
    grid-column: auto;
    display: flex;
    width: auto;
    gap: 3px;
  }

  .performance-control {
    flex: 0 0 auto;
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 9px;
  }

  .performance-control.exit {
    min-width: 38px;
  }

  .performance-chart {
    width: 100%;
    padding: 21px 13px 80px;
  }

  .performance-chart section {
    margin-bottom: 25px;
  }

  .performance-chart h2 {
    margin-bottom: 12px;
    color: #65eee7;
    font-size: calc(.86rem * var(--performance-scale));
  }

  .performance-chart .chart-pair {
    margin-bottom: 15px;
  }

  .performance-chart .compact-music-aligned {
    column-gap: 17px;
    row-gap: 12px;
  }

  .performance-chart .compact-music-segment > strong,
  .performance-chart .compact-music-segment > .compact-chord-heading,
  .performance-chart .compact-leading-lyrics > strong,
  .performance-chart .compact-chord-only {
    color: #65eee7;
    font-size: max(
      calc(1rem * var(--performance-scale, 1)),
      calc(1rem * var(--performance-chord-scale, 1))
    );
    line-height: 1.08;
  }

  .performance-chart .compact-music-segment > span,
  .performance-chart .compact-leading-lyrics > span,
  .performance-chart .compact-plain-lyrics {
    color: #fff8e7;
    font-size: calc(.98rem * var(--performance-scale, 1));
    line-height: 1.38;
  }

  .performance-chart .compact-run-segment > strong,
  .performance-chart .compact-run-only {
    color: #65eee7;
  }
}

/* Update 158: quiet, music-first reading and printing surfaces. */
.library-utility-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.library-utility-footer .trash-toggle {
  min-height: 34px;
  padding: 6px 9px;
  border-color: transparent;
  color: #718087;
  background: transparent;
  font-size: 9px;
}

.library-utility-footer .trash-toggle:hover,
.library-utility-footer .trash-toggle:focus-visible {
  border-color: #d7e4e4;
  color: #31515e;
  background: white;
}

.chart-kicker {
  display: none;
}

.editor-song-meta {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  margin-top: 5px;
}

.editor-song-meta[hidden] {
  display: none;
}

.editor-song-meta span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.editor-song-meta small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.editor-song-meta strong {
  color: #075f73;
  font-size: 11px;
}

.approved-song-view .editor-state-row,
.approved-song-view #editor-artist,
.approved-song-view .chart-paper > .chart-header,
.approved-song-view .history-actions {
  display: none;
}

.approved-song-view .editor-title h1 {
  margin: 0;
}

.approved-song-view .editor-head {
  align-items: center;
}

.compact-chord-heading,
.compact-chord-only.view-chord-guide {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.compact-chord-heading {
  color: #075f73;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.view-chord-guide:hover,
.view-chord-guide:focus-visible {
  color: var(--purple);
  outline: 2px solid rgba(98, 74, 183, .22);
  outline-offset: 3px;
  border-radius: 3px;
}

.chart-locked .measure {
  cursor: pointer;
}

.print-preview-toolbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 11px;
}

.print-preview-toolbar > div {
  text-align: left;
}

.print-preview-toolbar h1 {
  margin: 0;
  font-size: 16px;
}

.print-output-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.print-toolbar-button {
  min-width: 48px;
  min-height: 42px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 9px;
}

.print-toolbar-button > span {
  color: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.print-toolbar-button > small {
  color: inherit;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
}

.print-preview-view:not(.print-tools-open) .print-preview-controls {
  display: none;
}

.print-preview-controls {
  grid-template-columns: 1.05fr 1.05fr .7fr .8fr .65fr .9fr 1.2fr auto;
  scroll-margin-top: 116px;
}

.print-reset-layout {
  min-height: 38px;
  white-space: nowrap;
}

.print-preview-sheet .mobile-compact-ready > .bar-line,
.print-preview-sheet .mobile-compact-ready > .saved-aligned-lyric-grid,
.print-preview-sheet .mobile-compact-ready > .direct-word-grid,
.print-preview-sheet .mobile-compact-ready > .inline-lyric-line,
.print-preview-sheet .mobile-compact-ready > .lyric-line {
  display: none !important;
}

.print-preview-sheet .mobile-compact-ready > .compact-music-line {
  display: flex;
}

.print-preview-sheet .compact-music-aligned {
  flex-wrap: wrap;
  align-items: end;
  column-gap: calc(7px * var(--print-text-scale) * var(--print-line-fit, 1));
  row-gap: calc(7px * var(--print-text-scale) * var(--print-line-fit, 1));
  margin: 0 0 calc(5px * var(--print-text-scale) * var(--print-line-fit, 1));
}

.print-preview-sheet .compact-music-line.print-line-fitted {
  width: 100%;
}

.print-preview-sheet .compact-music-segment,
.print-preview-sheet .compact-leading-lyrics {
  flex: 0 0 auto;
  display: inline-grid;
  min-width: max-content;
  max-width: none;
  grid-template-rows: auto auto;
  gap: 1px;
  align-items: end;
}

.print-preview-sheet .compact-music-segment > strong,
.print-preview-sheet .compact-music-segment > .compact-chord-heading,
.print-preview-sheet .compact-leading-lyrics > strong,
.print-preview-sheet .compact-chord-only {
  color: var(--navy);
  font-size: calc(17px * var(--print-text-scale) * var(--print-line-fit, 1));
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.print-preview-sheet .compact-leading-lyrics > strong,
.print-preview-sheet .compact-empty-lyric {
  visibility: hidden;
}

.print-preview-sheet .compact-music-segment > span,
.print-preview-sheet .compact-leading-lyrics > span,
.print-preview-sheet .compact-plain-lyrics {
  color: #46515b;
  font-size: calc(17px * var(--print-text-scale) * var(--print-line-fit, 1));
  font-weight: 650;
  line-height: 1.3;
}
.print-preview-sheet .compact-music-segment > span,
.print-preview-sheet .compact-leading-lyrics > span { white-space: nowrap; }

.print-preview-sheet .compact-music-unaligned {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: calc(13px * var(--print-text-scale) * var(--print-line-fit, 1));
  row-gap: calc(4px * var(--print-text-scale) * var(--print-line-fit, 1));
}

.print-preview-sheet .compact-chord-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * var(--print-text-scale) * var(--print-line-fit, 1)) calc(14px * var(--print-text-scale) * var(--print-line-fit, 1));
}

.print-preview-sheet .compact-run-segment small,
.print-preview-sheet .compact-run-only small {
  display: block;
  font-size: calc(6px * var(--print-text-scale) * var(--print-line-fit, 1));
  letter-spacing: .08em;
  text-transform: uppercase;
}

.print-preview-sheet .mobile-compact-ready {
  display: block;
  width: 100% !important;
  max-width: none;
  padding-right: max(20px, calc(28px * var(--print-text-scale)));
}

.print-preview-sheet .mobile-compact-ready .line-repeat-marker {
  right: 0;
}

@media print {
  .print-preview-sheet .mobile-compact-ready > .bar-line,
  .print-preview-sheet .mobile-compact-ready > .saved-aligned-lyric-grid,
  .print-preview-sheet .mobile-compact-ready > .inline-lyric-line,
  .print-preview-sheet .mobile-compact-ready > .lyric-line {
    display: none !important;
  }

  .print-preview-sheet .mobile-compact-ready > .compact-music-line {
    display: flex !important;
  }

  .print-preview-sheet .view-chord-guide {
    outline: 0 !important;
  }
}

@media (max-width: 640px) {
  .instrument-preference-grid { grid-template-columns: 1fr 1fr; }
  .library-utility-footer {
    margin: 12px 2px 0;
  }

  .library-utility-footer .trash-toggle {
    grid-column: auto;
    width: auto;
    min-height: 32px;
  }

  .approved-song-view .editor-head {
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 7px;
  }

  .approved-song-view .editor-title h1 {
    font-size: 23px;
  }

  .approved-song-view .editor-actions {
    justify-content: flex-end;
  }

  .approved-song-view .editor-actions .editor-action-button {
    flex: 0 0 43px;
  }

  .editor-song-meta {
    gap: 5px 12px;
    margin-top: 4px;
  }

  .editor-song-meta small {
    font-size: 6px;
  }

  .editor-song-meta strong {
    font-size: 10px;
  }

  .approved-song-view .chart-paper.chart-locked {
    padding-top: 10px;
  }

  .print-preview-view {
    width: 100%;
    padding: 8px 0 22px;
  }

  .print-preview-toolbar {
    position: sticky;
    top: calc(62px + env(safe-area-inset-top));
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
    margin: 0 8px 8px;
    padding: 6px;
    border-radius: 12px;
  }

  .print-preview-toolbar button {
    width: auto;
  }

  .print-preview-toolbar h1 {
    font-size: 13px;
  }

  .print-output-actions {
    gap: 3px;
  }

  .print-toolbar-button {
    min-width: 38px;
    min-height: 38px;
    padding: 4px;
  }

  .print-toolbar-button > span {
    font-size: 13px;
  }

  .print-toolbar-button > small {
    font-size: 6px;
  }

  .print-preview-controls {
    grid-template-columns: 1fr;
    margin: 0 8px 8px;
    padding: 11px;
    scroll-margin-top: 148px;
  }

  .print-preview-stage {
    padding: 8px;
    overflow-x: hidden;
    touch-action: pan-x pan-y pinch-zoom;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .print-preview-stage.print-page-fitted {
    display: block;
  }
}

@media print {
  .print-preview-sheet { zoom: 1 !important; transform: none !important; }
}

/* Update 162: app appearance belongs to Jubal itself, never to printed paper. */
html[data-app-appearance="monochrome"] {
  color-scheme: light;
  filter: grayscale(1);
}

html[data-app-appearance="dark"] {
  color-scheme: dark;
  --ink: #f3f8f9;
  --muted: #a8bbc1;
  --paper: #061722;
  --card: #0d2634;
  --line: #294754;
  --purple: #50ded9;
  --purple-dark: #21bac5;
  --purple-pale: #103847;
  --coral-pale: #452a2a;
  --teal-pale: #103b42;
  --sun-pale: #44391e;
  --navy: #f2f9fa;
  --navy-2: #d7eef1;
  --off-white: #0d2634;
  --shadow: 0 24px 65px rgba(0, 0, 0, .34);
}

html[data-app-appearance="dark"] body {
  background:
    linear-gradient(rgba(80, 222, 217, .04) 1px, transparent 1px),
    var(--paper);
}

html[data-app-appearance="dark"] .topbar,
html[data-app-appearance="dark"] .mobile-tabbar {
  border-color: #274451;
  background: rgba(6, 23, 34, .96);
}

html[data-app-appearance="dark"] :is(
  .account-panel, .cloud-foundation-notice, .personal-cloud-sync,
  .account-device-panel, .setup-card, #project-form, .control-panel,
  .chart-paper, .chart-workspace, .dashboard-overview, .library-filters,
  .project-card-wrap, .trash-panel, .sets-summary, .set-card,
  .print-preview-toolbar, .print-preview-controls, dialog
) {
  color: var(--ink);
  border-color: var(--line);
  background-color: var(--card);
}

html[data-app-appearance="dark"] :is(input, select, textarea, .secondary, .trash-toggle) {
  color: var(--ink);
  border-color: var(--line);
  background: #102b39;
}

html[data-app-appearance="dark"] :is(.project-card, .song-list-row, .material-row) {
  color: var(--ink);
}

/* Update 163: dark account surfaces keep their own readable dark cards. */
html[data-app-appearance="dark"] .account-view :is(
  .account-foundation-card, .cloud-foundation-notice, .personal-cloud-sync,
  .personal-cloud-sync-status, .private-material-sync, .account-device-panel,
  .phone-pilot-card, .legacy-library-transfer, .cloud-library-claim,
  .cloud-sync-conflict
) {
  color: #f3f8f9 !important;
  border-color: #294754 !important;
  background: #0d2634 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

html[data-app-appearance="dark"] .account-view :is(
  .personal-cloud-sync-status, .private-material-sync, .legacy-library-transfer,
  .cloud-sync-conflict
) {
  background: #102f3e !important;
}

html[data-app-appearance="dark"] .account-view :is(h1, h2, h3, strong, summary) {
  color: #f3f8f9 !important;
}

html[data-app-appearance="dark"] .account-view :is(p, small, .legacy-library-transfer > summary) {
  color: #b9ccd1 !important;
}

html[data-app-appearance="dark"] .account-view :is(
  .foundation-status, .account-device-panel > summary b,
  .personal-cloud-sync-status, .private-material-sync > span
) {
  color: #7de7e0 !important;
}

/* Update 162: the preview is composed of real, bounded letter-size pages. */
.print-preview-sheet.is-paginated {
  display: block;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  color: #071b29;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.print-layout-source { display: none !important; }
.print-measure-rack { position: absolute; z-index: -1; top: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; visibility: hidden; pointer-events: none; }
.print-prepared-source { position: absolute; z-index: -1; top: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; visibility: hidden; pointer-events: none; }
.print-measure-rack > *, .print-prepared-source > *, .print-page-column > * { flex: 0 0 auto; }
.print-page {
  --ink: #071b29;
  --muted: #64727a;
  --navy: #071b29;
  --navy-2: #0a2b3e;
  --aqua: #16b7c7;
  --aqua-dark: #087c8a;
  position: relative;
  width: 8.5in;
  height: 11in;
  overflow: hidden;
  color: #071b29;
  background: #fff;
  break-after: page;
  page-break-after: always;
  box-shadow: 0 16px 45px rgba(7, 27, 41, .18);
}
.print-preview-sheet.is-paginated:not(.pdf-export-spacing) .print-page + .print-page { margin-top: 36px; }
.print-preview-sheet.is-paginated.pdf-export-spacing .print-page + .print-page { margin-top: 0; }
.print-preview-sheet.is-paginated.pdf-capture .print-page + .print-page { margin-top: 0; }
.pdf-capture-host {
  position: fixed;
  z-index: -9999;
  top: 0;
  left: -10000px;
  width: 8.5in;
  overflow: visible;
  pointer-events: none;
}
.pdf-capture-host .print-preview-sheet {
  margin: 0 !important;
  transform: none !important;
  transform-origin: top left !important;
}
.print-page:last-of-type { break-after: auto; page-break-after: auto; }
.print-page-body {
  position: absolute;
  z-index: 2;
  top: .62in;
  right: .5in;
  bottom: .55in;
  left: .5in;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.print-page-body > .chart-header { flex: 0 0 auto; margin-bottom: 7px; }
.print-page-columns { position: relative; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; display: grid; gap: .28in; }
.print-page-columns[data-columns="1"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
.print-page-columns[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.print-page-column { width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; }
.print-page-column-right { padding-left: 0; }
.print-page-columns[data-columns="2"] .print-page-column-left { padding-right: 0; border-right: 0; }
.print-page-columns[data-columns="2"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: #aac9ce; pointer-events: none; }
.print-page-column > .print-preview-section,
.print-page-column .rendered-section,
.print-page-column .rendered-content { width: 100%; min-width: 0; max-width: none; }
.print-page-column .chart-pair { width: 100% !important; min-width: 0; max-width: 100%; }
.print-page-body > .chart-footer { flex: 0 0 auto; margin-top: 8px; }
.print-page-chrome { position: absolute; z-index: 3; inset: 0 .5in; color: #65757b; pointer-events: none; }
.print-page-chrome > header,
.print-page-chrome > footer { position: absolute; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 7px; font-weight: 750; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
.print-page-chrome > header { top: .22in; padding-bottom: .08in; border-bottom: 1px solid #cfdbdd; }
.print-page-chrome > header strong { overflow: hidden; color: #314b55; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.print-page-chrome > footer { bottom: .2in; padding-top: .08in; border-top: 1px solid #dbe3e4; }
.print-page-chrome > footer span:first-child { color: #087c8a; font-weight: 900; }
.print-page-break-guide { top: -30px; transform: none; }
.print-section-continuation-label { margin-left: 6px; color: #687b82; font-size: .58em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.print-section-continuation-fragment { margin-top: 0; }

@media print {
  html[data-app-appearance="monochrome"] { filter: none; }
  html[data-app-appearance="dark"] { color-scheme: light; }
  html,
  body {
    width: 8.5in !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #app,
  .print-preview-view,
  .print-preview-stage {
    display: block !important;
    width: 8.5in !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: white !important;
    box-shadow: none !important;
  }
  .print-preview-sheet.is-paginated {
    display: block;
    width: 8.5in !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    box-shadow: none;
    zoom: 1 !important;
    transform: none !important;
  }
  .print-page {
    display: block;
    width: 8.5in !important;
    height: 10.98in !important;
    min-height: 10.98in !important;
    max-height: 10.98in !important;
    margin: 0 !important;
    overflow: hidden;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
    break-after: auto !important;
    page-break-after: auto !important;
    box-shadow: none;
  }
  .print-page + .print-page {
    break-before: page !important;
    page-break-before: always !important;
  }
  .print-page-break-guide { display: none !important; }
}