:root {
  color-scheme: light;
  --paper: #f5f3ec;
  --paper-bright: #fbfaf7;
  --ink: #24382e;
  --ink-soft: #66756b;
  --forest: #285441;
  --forest-dark: #173c2d;
  --moss: #dfe8dd;
  --line: #e4e2d8;
  --gold: #c08b4b;
  --white: #fff;
  --serif: "Noto Serif Telugu", Georgia, serif;
  --sans: "DM Sans", "Noto Sans Telugu", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.topbar { height: 78px; display: flex; align-items: center; gap: 44px; padding: 0 max(5vw, 24px); border-bottom: 1px solid rgba(53, 73, 60, .11); background: rgba(251,250,247,.8); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 222px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; background: var(--forest); color: white; font: 26px/1 Georgia, serif; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 14px; letter-spacing: -.025em; }
.brand-copy small { color: var(--ink-soft); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; align-self: stretch; gap: 30px; }
.main-nav a { position: relative; display: flex; align-items: center; gap: 8px; color: #778078; font-size: 13px; font-weight: 600; }
.main-nav a.active { color: var(--forest-dark); }
.main-nav a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--forest); content: ""; }
.nav-count { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 20px; background: #ebeee7; color: var(--forest); font-size: 10px; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #7b817a; font-size: 11px; }
.status-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #6a9b70; }
.page-wrap { width: min(1260px, 90vw); margin: 0 auto; padding: 52px 0 80px; }
.setup-banner { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 30px; padding: 17px 19px; border: 1px solid #ead8b9; border-radius: 13px; background: #fff9ed; color: #665334; }
.setup-icon { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e9d3ac; font-weight: 700; }
.setup-banner strong { font-size: 13px; }
.setup-banner p { margin: 3px 0 0; font-size: 12px; }
.setup-banner code { padding: 1px 5px; border-radius: 4px; background: #f4ead6; }
.notice { margin-bottom: 24px; padding: 12px 16px; border: 1px solid #cbdcc9; border-radius: 10px; background: #edf5eb; color: #31593b; font-size: 13px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.eyebrow { margin: 0 0 10px; color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.eyebrow span { padding: 0 5px; color: #b68750; }
.page-heading h1 { margin: 0; font: 500 clamp(34px, 4.6vw, 54px)/1.12 var(--serif); letter-spacing: -.065em; }
.page-heading h1 em { color: var(--forest); font-style: normal; }
.heading-copy { max-width: 580px; margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.verse-chip { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; padding: 12px 17px; border: 1px solid #e4ddcc; border-radius: 10px; background: rgba(255,255,255,.4); color: #5d665b; font: 12px/1.7 var(--serif); }
.verse-chip > span:first-child { color: var(--gold); }
.verse-chip small { display: block; color: #9a886d; font: 10px var(--sans); }

.poster-workspace { display: grid; grid-template-columns: minmax(335px, 405px) 1fr; border: 1px solid #e5e3da; border-radius: 17px; background: var(--paper-bright); box-shadow: 0 16px 48px rgba(35,51,40,.045); }
.editor-panel { padding: 27px 28px 25px; border-right: 1px solid #e9e7de; }
.section-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.step-number { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: var(--moss); color: var(--forest); font: 15px var(--serif); }
.section-topline h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.section-topline p { margin: 2px 0 0; color: #8b918a; font-size: 11px; }
.field-block { min-width: 0; margin-bottom: 19px; }
.field-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: #4d5a50; font-size: 11px; font-weight: 700; }
.optional { color: #9ca197; font-size: 10px; font-weight: 400; }
.size-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.size-option { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.size-option:hover { transform: translateY(-1px); border-color: #a6b7a8; }
.size-option.selected { border-color: var(--forest); background: #f1f6ef; box-shadow: inset 0 0 0 1px var(--forest); }
.size-option > span:last-child { display: grid; font-size: 10px; font-weight: 700; }
.size-option small { color: #91988f; font-size: 9px; font-weight: 400; }
.size-icon { display: block; border: 1.5px solid #628270; border-radius: 3px; }
.landscape-icon { width: 24px; height: 16px; }
.portrait-icon { width: 15px; height: 23px; margin: 0 4px; }
.upload-zone { display: flex; align-items: center; gap: 12px; min-height: 67px; padding: 12px 14px; border: 1px dashed #bdc9b9; border-radius: 9px; background: #f7f9f5; cursor: pointer; transition: background .2s, border-color .2s; }
.upload-zone:hover { border-color: var(--forest); background: #f0f5ee; }
.upload-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.upload-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #e3ece0; color: var(--forest); font-size: 19px; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { font-size: 11px; }
.upload-zone small { margin-top: 2px; color: #8f968c; font-size: 9px; }
.uploaded-file { overflow: hidden; margin-top: 7px; color: var(--forest); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-file button { margin-left: 8px; border: 0; background: none; color: #8c6658; cursor: pointer; text-decoration: underline; }
.toggle-row { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 2px 0 19px; padding: 10px 0; cursor: pointer; }
.toggle-row > span:first-child { display: grid; gap: 1px; }
.toggle-row strong { font-size: 11px; }
.toggle-row small { color: #91988f; font-size: 9px; }
.toggle-row input { position: absolute; right: 0; width: 39px; height: 23px; opacity: 0; cursor: pointer; }
.toggle-visual { width: 39px; height: 23px; padding: 3px; border-radius: 20px; background: #c9cec8; transition: background .2s; }
.toggle-visual::after { display: block; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0002; content: ""; transition: transform .2s; }
.toggle-row input:checked + .toggle-visual { background: var(--forest); }
.toggle-row input:checked + .toggle-visual::after { transform: translateX(16px); }
.toggle-row input:focus-visible + .toggle-visual { outline: 3px solid #a4bda4; outline-offset: 2px; }
.text-block textarea, .song-form textarea { display: block; width: 100%; resize: vertical; border: 1px solid #dfded6; border-radius: 8px; background: #fff; color: var(--ink); font: 16px/1.8 "Noto Sans Telugu", sans-serif; outline: none; transition: border-color .18s, box-shadow .18s; }
.text-block textarea { min-height: 105px; padding: 10px 12px; }
textarea:focus, input:focus, select:focus { border-color: #7b9a7c !important; box-shadow: 0 0 0 3px rgba(88,131,91,.12); outline: none; }
.text-meta { display: flex; justify-content: space-between; margin-top: 5px; color: #9ca197; font-size: 9px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.range-control { width: 100%; accent-color: var(--forest); }
#fontSizeValue { color: #90978e; font-size: 10px; font-weight: 400; }
.color-control { display: flex; align-items: center; gap: 8px; height: 32px; padding: 3px 8px; border: 1px solid #dfded6; border-radius: 7px; background: #fff; }
.color-control input { width: 21px; height: 21px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.color-control span { color: #66746a; font-size: 10px; }
.control-grid select, .song-form input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid #dfded6; border-radius: 7px; background: #fff; color: #526057; font-size: 10px; }
.position-controls { padding: 13px; border: 1px solid #dfe7da; border-radius: 10px; background: #f7faf5; }
.position-controls .position-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.position-controls .position-topline .field-label { margin: 0; }
.position-controls p, .font-help { margin: 5px 0 10px; color: #6c7b70; font-size: 10px; line-height: 1.5; }
.position-controls .control-grid { margin-top: 10px; }
.position-controls .control-grid .field-label { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.position-controls .range-control { margin-top: 8px; }
.position-reset { flex: none; padding: 4px 0; border: 0; background: transparent; color: var(--forest); font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.position-reset:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.font-customizer { margin-top: 4px; }
.font-sample { min-height: 58px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dfe7da; border-radius: 8px; background: #f8faf4; color: #2e553d; font: 600 23px/1.5 "Noto Sans Telugu", sans-serif; text-align: center; }
.font-customizer input[type=file] { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1px dashed #bccbb8; border-radius: 8px; background: #fafcf8; color: #536157; font-size: 10px; }
.font-customizer .font-help { margin: 8px 0 0; }
.font-status { min-height: 15px; margin: 5px 0 0; color: #35644a; font-size: 10px; }
.text-effects { padding: 14px; border: 1px solid #e1ddcf; border-radius: 10px; background: #fcfaf5; }
.text-effects > select { width: 100%; min-height: 39px; padding: 7px 9px; border: 1px solid #dfded6; border-radius: 7px; background: #fff; color: #526057; font-size: 11px; }
.effect-help { margin: 7px 0 0; color: #778176; font-size: 10px; line-height: 1.5; }
.effect-controls { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e8e5da; }
.effect-controls[hidden] { display: none; }
.effect-controls .field-label { font-size: 10px; }
.effect-controls .stroke-width-label { margin-top: 12px; }
.effect-controls .stroke-width-label span { color: #778176; font-weight: 400; }
.effect-controls .range-control { display: block; }
.effect-stroke-toggle { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #e8e5da; }
.effect-stroke-toggle[hidden], .shadow-controls[hidden] { display: none; }
.shadow-controls { margin-top: -12px; padding: 0 0 11px; }
.shadow-controls .control-grid { align-items: end; }
.shadow-controls .field-label { font-size: 10px; }
.shadow-controls .field-label span { color: #778176; font-weight: 400; }
.shadow-controls .shadow-offset-label { margin-top: 10px; }
#posterCanvas { cursor: grab; touch-action: none; }
#posterCanvas.dragging { cursor: grabbing; }
#posterCanvas:focus-visible { outline: 3px solid #315943; outline-offset: -4px; }
.download-button:disabled { opacity: .6; cursor: wait; }
.shadow-row { border-top: 1px solid #eeece5; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 41px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.button-primary { background: var(--forest); color: #fff; }
.button-primary:hover { transform: translateY(-1px); background: var(--forest-dark); box-shadow: 0 5px 14px rgba(34,83,59,.17); }
.button-secondary { border-color: #dce2d8; background: #fff; color: var(--forest); }
.button-secondary:hover { background: #f1f5ef; }
.download-button { width: 100%; min-height: 47px; font-size: 12px; }
.download-button > span { font-size: 17px; }
.download-button small { margin-left: auto; color: #c9d7ce; font-size: 9px; font-weight: 400; }

.preview-panel { position: sticky; top: 12px; display: flex; min-width: 0; flex-direction: column; align-self: start; padding: 23px 25px 20px; }
.preview-header { display: flex; justify-content: space-between; align-items: center; }
.preview-header > div { display: flex; align-items: baseline; gap: 10px; }
.preview-header .field-label { margin: 0; color: #839085; font-size: 9px; letter-spacing: .14em; }
.preview-size { color: #879087; font-size: 10px; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 20px; background: #edf5ed; color: #49724c; font-size: 9px; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #70a376; }
.preview-stage { display: grid; flex: 0 0 auto; height: min(570px, calc(100vh - 180px)); min-height: 300px; place-items: center; margin: 16px 0 13px; padding: 16px; border: 1px solid #efeee8; border-radius: 12px; background: #f7f6f1; }
.transparent-grid { position: relative; display: grid; width: min(100%, 790px); max-height: 510px; place-items: center; overflow: hidden; border-radius: 4px; background-color: #e9e8e2; background-image: linear-gradient(45deg,#d9d8d1 25%,transparent 25%),linear-gradient(-45deg,#d9d8d1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d8d1 75%),linear-gradient(-45deg,transparent 75%,#d9d8d1 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; transition: aspect-ratio .25s; }
.transparent-grid.landscape { aspect-ratio: 16 / 9; }
.transparent-grid.portrait { width: auto; height: min(510px, 54vw); aspect-ratio: 9 / 16; }
#posterCanvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.transparent-grid.portrait #posterCanvas { width: 100%; height: 100%; }
.preview-empty { position: absolute; display: none; max-width: 80%; color: #c5c9c0; text-align: center; pointer-events: none; }
.preview-empty.visible { display: block; }
.preview-empty span { font-size: 30px; }
.preview-empty p { margin: 4px 0 0; font-size: 11px; }
.preview-caption { display: flex; align-items: center; gap: 7px; color: #829087; font-size: 9px; }
.preview-lock { margin-left: auto; color: #a2a69f; }
.preview-tip { display: flex; gap: 10px; margin-top: 16px; padding: 11px 13px; border-radius: 9px; background: #f2f3ec; color: #748073; }
.preview-tip > span { color: var(--gold); }
.preview-tip p { margin: 0; font-size: 10px; line-height: 1.6; }
.preview-tip strong { display: block; color: #465748; font-size: 10px; }

.songbook-heading { margin-bottom: 29px; }
.songbook-count { position: relative; display: flex; min-width: 174px; flex-direction: column; gap: 2px; overflow: hidden; padding: 14px 20px; border: 1px solid #dbe3d7; border-radius: 12px; background: #edf2e9; }
.songbook-count strong { color: var(--forest); font: 500 31px var(--serif); }
.songbook-count span { color: #78877a; font-size: 10px; }
.songbook-count i { position: absolute; right: 14px; bottom: -17px; color: #dae5d5; font: 70px Georgia,serif; }
.songbook-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, .8fr); gap: 19px; align-items: start; }
.song-list-panel, .song-form-panel { border: 1px solid #e5e3da; border-radius: 15px; background: var(--paper-bright); box-shadow: 0 12px 32px rgba(35,51,40,.035); }
.song-list-panel { min-height: 410px; padding: 22px 23px; }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.list-header h2 { margin: 0; font: 500 20px var(--serif); }
.list-header p { margin: 3px 0 0; color: #92988f; font-size: 10px; }
.search-form { display: flex; align-items: center; height: 36px; gap: 5px; padding: 0 5px 0 9px; border: 1px solid #e2e1d8; border-radius: 7px; background: #fff; }
.search-form > span { color: #839185; font-size: 18px; }
.search-form input { width: 152px; min-width: 70px; border: 0; outline: 0; color: #4d5a50; font-size: 10px; }
.search-form button { height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: #edf2e9; color: var(--forest); font-size: 9px; font-weight: 700; cursor: pointer; }
.song-list { display: grid; }
.song-row { display: grid; grid-template-columns: 36px 1fr 25px auto; align-items: center; gap: 12px; min-height: 64px; border-top: 1px solid #eeece6; }
.song-index { color: #77917c; font: 15px var(--serif); }
.song-row-main { display: grid; min-width: 0; gap: 3px; }
.song-row-main strong { overflow: hidden; color: #304439; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.song-row-main span { overflow: hidden; color: #92988f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.song-open, .song-edit { display: grid; place-items: center; color: #718a74; font-size: 11px; }
.song-edit { color: #8d928b; font-size: 9px; }
.song-open:hover, .song-edit:hover { color: var(--forest); }
.empty-songs, .empty-page { display: grid; min-height: 290px; align-content: center; justify-items: center; text-align: center; }
.empty-mark { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 14px 14px 14px 4px; background: #e8efe5; color: var(--forest); font: 23px Georgia,serif; }
.empty-songs h3, .empty-page h1 { margin: 14px 0 5px; font: 500 18px var(--serif); }
.empty-songs p { max-width: 260px; margin: 0; color: #8d948b; font-size: 11px; line-height: 1.7; }
.empty-songs a { margin-top: 10px; color: var(--forest); font-size: 11px; text-decoration: underline; }
.list-limit { margin: 10px 0 0; color: #90988e; font-size: 10px; }
.song-form-panel { padding: 22px 23px; }
.song-form-panel .section-topline { margin-bottom: 20px; }
.song-form .field-block { margin-bottom: 13px; }
.song-form .field-label { margin-bottom: 6px; }
.song-form input { min-height: 37px; font-size: 11px; }
.song-form textarea { min-height: 180px; padding: 10px 11px; font: 15px/1.9 "Noto Sans Telugu",sans-serif; }
.helper-copy { display: block; margin-top: 5px; color: #999f96; font-size: 9px; }
.form-submit { width: 100%; justify-content: space-between; margin-top: 4px; font-size: 11px; }
.cancel-edit { display: block; margin-top: 11px; color: #728273; font-size: 10px; text-align: center; }
.delete-form { margin-top: 10px; text-align: center; }
.delete-button { border: 0; background: transparent; color: #a16a5b; font-size: 10px; text-decoration: underline; cursor: pointer; }
.database-needed { padding: 18px 15px; border-radius: 9px; background: #f6f4ed; color: #7e887e; font-size: 11px; }
.database-needed a { color: var(--forest); text-decoration: underline; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; width: min(1260px,90vw); margin: 0 auto; padding: 20px 0 27px; border-top: 1px solid #e4e2d9; color: #8a9188; font-size: 9px; }
.site-footer > span:first-child { color: #5d7562; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.site-footer a { color: #627c67; }
.song-detail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto 18px; }
.back-link { color: #718171; font-size: 12px; }
.song-detail-toolbar .toolbar-actions { display: flex; gap: 9px; }
.song-detail-toolbar .button-primary, .song-detail-toolbar .button-secondary { min-height: 36px; font-size: 10px; }
.song-sheet { position: relative; isolation: isolate; width: min(610px,100%); min-height: 830px; margin: 0 auto; overflow: hidden; border-radius: 5px; background: radial-gradient(ellipse at 50% 0%,#cb665a47,transparent 44%),linear-gradient(147deg,#751426 0%,#570c1b 52%,#370711 100%); box-shadow: 0 22px 58px #2d030c3d; color: #fff4dc; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.song-sheet::before { position: absolute; z-index: -1; inset: 12px; border: 1px solid #ebc570c2; content: ''; }
.song-sheet::after { position: absolute; z-index: -1; inset: 19px; border: 1px solid #ebc5703d; content: ''; pointer-events: none; }
.song-sheet-inner { display: flex; min-height: 830px; flex-direction: column; align-items: center; padding: 42px 53px 31px; }
.sheet-flourish { color: #efc76f; font-size: 22px; letter-spacing: .35em; line-height: 1; }
.sheet-kicker { margin: 13px 0 9px; color: #f1cf83; font: 600 10px/1.5 var(--sans); letter-spacing: .22em; text-align: center; text-transform: uppercase; }
.sheet-song-number { color: #ffefcc; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; }
.sheet-title { margin: 12px 0 5px; color: #f5d584; font: 600 clamp(27px,5.8vw,38px)/1.52 var(--serif); text-align: center; text-shadow: 0 2px 14px #0004; }
.sheet-category { margin: 0; color: #fff2d6; font: 13px/1.5 var(--serif); }
.sheet-ornament { display: flex; width: 100%; max-width: 360px; align-items: center; gap: 13px; margin: 19px 0 10px; color: #e6bb67; }
.sheet-ornament::before, .sheet-ornament::after { height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#ebc570bf); content: ''; }
.sheet-ornament::after { transform: rotate(180deg); }
.sheet-verses { display: grid; width: 100%; max-width: 440px; gap: 24px; margin-top: 12px; }
.sheet-verse { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 8px; align-items: start; break-inside: avoid; page-break-inside: avoid; }
.sheet-verse-number { padding-top: 2px; color: #f2cc73; font: 700 14px/1.8 var(--sans); }
.sheet-verse p { margin: 0; color: #fff7e8; font: 400 clamp(16px,2.1vw,18px)/1.9 var(--serif); white-space: normal; overflow-wrap: anywhere; }
.sheet-footer { display: flex; width: 100%; max-width: 440px; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 30px; color: #f5d584d4; font: 500 9px/1.5 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.sheet-footer-mark { font-size: 23px; line-height: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.plain-panel { padding: 28px; border: 1px solid #e5e3da; border-radius: 15px; background: var(--paper-bright); box-shadow: 0 12px 32px rgba(35,51,40,.035); }
.plain-panel h1 { margin: 0 0 10px; font: 500 30px var(--serif); }
.plain-panel > p { color: var(--ink-soft); font-size: 13px; }
.auth-panel { width: min(560px,100%); margin: 0 auto; }
.auth-panel .song-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; }
.auth-panel .song-form input:not([type=checkbox]):not([type=file]) { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dfded6; border-radius: 7px; background: #fff; }
.auth-panel .song-form .field-label { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; width: 100%; gap: 6px; align-items: stretch; justify-content: stretch; }
.songbook-layout.public-songbook { grid-template-columns: 1fr; }
.songbook-layout.public-songbook .song-list-panel { min-height: 300px; }
.song-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.song-filters a { padding: 5px 9px; border: 1px solid #e5e6dc; border-radius: 20px; background: #fff; color: #68766b; font-size: 10px; }
.song-filters a.selected, .song-filters a:hover { border-color: #9ab09a; background: #edf4eb; color: var(--forest); }
.song-filters small { color: #98a098; }
.song-filters.letters { gap: 4px; }
.song-filters.letters a { min-width: 25px; padding: 4px; text-align: center; }
.category-filters { padding-top: 8px; border-top: 1px solid #eeece6; }
.premium-tag { display: inline-block; padding: 2px 5px; border-radius: 4px; background: #f3eadb; color: #8a6332; font: 700 8px var(--sans); letter-spacing: .07em; vertical-align: middle; }
.payment-warning { padding: 13px; border-left: 3px solid #c08b4b; background: #fff8eb; color: #67522e !important; font-weight: 600; }
.payment-qr { display: block; width: min(280px,100%); height: auto; margin: 20px auto; border: 1px solid var(--line); border-radius: 10px; }
.admin-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-cards a { display: grid; gap: 6px; padding: 22px; border: 1px solid #e5e3da; border-radius: 12px; background: var(--paper-bright); }
.admin-cards strong { color: var(--forest); font: 500 20px var(--serif); }
.admin-cards span { color: var(--ink-soft); font-size: 12px; }
.user-list { display: grid; margin-top: 20px; }
.user-list article { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-top: 1px solid #eeece6; }
.user-list article > div { display: grid; min-width: 180px; flex: 1; }
.user-list article span { color: var(--ink-soft); font-size: 11px; }
.user-list button { min-height: 34px; padding: 0 11px; border: 1px solid #dce2d8; border-radius: 7px; background: white; color: var(--forest); font-size: 10px; cursor: pointer; }
.reset-link { display: grid; gap: 7px; margin: 18px 0; padding: 13px; border: 1px solid #e7d9bd; border-radius: 8px; background: #fff9ed; color: #665334; font-size: 11px; }
.reset-link input { width: 100%; padding: 8px; border: 1px solid #e5dfd3; border-radius: 5px; }
.locked-song { margin-top: 35px; text-align: center; }
.video-panel { width: min(760px,100%); margin: 24px auto 0; text-align: center; }
.video-panel h2 { font: 500 20px var(--serif); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; margin-top: 14px; }
.video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.topbar-note a, .topbar-note button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 9px 17px; border: 1px solid var(--forest); border-radius: 9px; background: var(--forest); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.topbar-note a:hover, .topbar-note button:hover { background: var(--forest-dark); }

@media (max-width: 960px) {
  .topbar { gap: 25px; }
  .brand { min-width: auto; }
  .topbar-note { display: inline-flex; }
  .poster-workspace { grid-template-columns: minmax(320px, 390px) 1fr; }
  .editor-panel { padding: 23px 20px; }
  .preview-panel { padding: 21px 17px; }
  .preview-stage { min-height: 300px; padding: 10px; }
  .songbook-layout { grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr); }
  .list-header { align-items: flex-start; flex-direction: column; }
  .search-form { width: 100%; }
  .search-form input { flex: 1; }
}
@media (max-width: 720px) {
  .topbar { height: 67px; justify-content: space-between; gap: 12px; padding: 0 5vw; }
  .brand-mark { width: 33px; height: 33px; font-size: 23px; }
  .brand-copy strong { font-size: 12px; }
  .brand-copy small { font-size: 8px; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 11px; }
  .page-wrap { width: 90vw; padding: 34px 0 55px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .page-heading h1 { font-size: clamp(33px,9vw,45px); }
  .heading-copy { max-width: 520px; font-size: 12px; }
  .verse-chip { display: none; }
  .poster-workspace { grid-template-columns: 1fr; }
  .editor-panel { order: 2; padding: 23px 19px; border-right: 0; border-top: 1px solid #e9e7de; }
  .preview-panel { position: static; order: 1; padding: 18px 15px 15px; }
  .preview-stage { height: auto; min-height: 210px; margin: 11px 0; }
  .transparent-grid.portrait { height: min(390px,96vw); }
  .preview-caption { font-size: 8px; }
  .preview-lock { display: none; }
  .songbook-count { min-width: 0; width: 100%; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; }
  .songbook-count strong { font-size: 25px; }
  .songbook-count span { font-size: 10px; }
  .songbook-count i { right: 18px; bottom: -18px; font-size: 58px; }
  .songbook-layout { grid-template-columns: 1fr; }
  .song-form-panel { grid-row: 1; }
  .song-list-panel { grid-row: 2; padding: 18px 15px; }
  .song-form-panel { padding: 20px 17px; }
  .list-header { gap: 13px; }
  .song-row { grid-template-columns: 31px minmax(0,1fr) 22px auto; gap: 8px; }
  .song-row-main strong { font-size: 11px; }
  .song-row-main span { font-size: 8px; }
  .song-detail-toolbar { align-items: flex-start; }
  .song-detail-toolbar .toolbar-actions { gap: 5px; }
  .song-detail-toolbar .button-primary, .song-detail-toolbar .button-secondary { min-height: 33px; padding: 0 9px; font-size: 9px; }
  .admin-cards { grid-template-columns: 1fr; }
  .plain-panel { padding: 20px 16px; }
  .song-sheet, .song-sheet-inner { min-height: 760px; }
  .song-sheet-inner { padding: 37px 31px 27px; }
  .sheet-verses { gap: 20px; }
  .site-footer { align-items: flex-start; flex-wrap: wrap; width: 90vw; font-size: 8px; }
}
@media (max-width: 390px) {
  .brand-copy small { letter-spacing: .03em; }
  .main-nav { gap: 10px; }
  .main-nav a { font-size: 10px; }
  .control-grid { gap: 10px; }
  .editor-panel { padding-right: 14px; padding-left: 14px; }
  .search-form button { padding: 0 6px; }
}

/* The members' songbook: marigold, coral and leaf against warm ivory. */
@media screen {
  .member-welcome {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    overflow: hidden;
    margin: 0 0 38px;
    padding: clamp(24px, 4vw, 42px) clamp(24px, 5vw, 54px);
    border: 1px solid #d4915b;
    border-radius: 24px;
    background: radial-gradient(circle at 84% 18%, #f8ca7480 0, transparent 30%), linear-gradient(115deg, #87433e 0%, #aa5848 52%, #c97449 100%);
    box-shadow: 0 18px 35px #77482e20;
    color: #fff7e9;
  }
  .member-welcome::before {
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -125px;
    width: 340px;
    height: 340px;
    border: 1px solid #ffe0a866;
    border-radius: 50%;
    box-shadow: 0 0 0 32px #ffe0a81c, 0 0 0 68px #ffe0a817, 0 0 0 110px #ffe0a812;
    content: "";
    pointer-events: none;
  }
  .member-welcome-copy { position: relative; max-width: 660px; }
  .member-welcome-copy h1, .member-welcome-copy h2 { margin: 0 0 9px; color: #fff9ec; font: 500 clamp(27px, 3.3vw, 42px)/1.25 var(--serif); letter-spacing: -.035em; }
  .member-welcome-copy p { max-width: 550px; margin: 0; color: #fff0df; font-size: 14px; line-height: 1.75; }
  .member-welcome-copy .eyebrow { color: #ffe5a7; }
  .member-status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 16px; padding: 7px 12px; border: 1px solid #ffe5b95e; border-radius: 100px; background: #fff8e91c; color: #fff5d9; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  .member-status::before { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffda80; content: ""; }
  .member-welcome-actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: none; }
  .member-welcome-actions a, .member-welcome-actions button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 17px; border: 1px solid #fff0d9b5; border-radius: 10px; background: #fff6e6; color: #733d37; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
  .member-welcome-actions a:hover, .member-welcome-actions button:hover { transform: translateY(-2px); background: #fffdf4; }
  .member-welcome-actions a + a, .member-welcome-actions button + button { background: #ffffff12; color: #fff9ed; }
  .member-welcome-actions a + a:hover, .member-welcome-actions button + button:hover { background: #ffffff28; }

  body:has(.public-songbook) .songbook-heading { align-items: center; margin-bottom: 26px; }
  body:has(.public-songbook) .songbook-heading .eyebrow { color: #a4563c; }
  body:has(.public-songbook) .songbook-heading h1 em { color: #b15d42; }
  body:has(.public-songbook) .songbook-heading .heading-copy { color: #556c59; font-size: 14px; }
  body:has(.public-songbook) .songbook-count { min-width: 185px; padding: 17px 22px; border-color: #e6c785; border-radius: 16px; background: #fff0c7; box-shadow: 0 8px 24px #bb8c3a14; }
  body:has(.public-songbook) .songbook-count strong { color: #865035; font-size: 35px; line-height: 1.15; }
  body:has(.public-songbook) .songbook-count span { color: #76573d; font-size: 11px; font-weight: 600; }
  body:has(.public-songbook) .songbook-count i { color: #e5bd73; }

  .songbook-layout.public-songbook { gap: 18px; }
  .public-songbook .song-list-panel { padding: clamp(19px, 3vw, 34px); border-color: #e5dcca; border-radius: 21px; background: #fffdf7; box-shadow: 0 16px 38px #66543b0d; }
  .public-songbook .list-header { gap: 20px; margin-bottom: 21px; }
  .public-songbook .list-header h2 { color: #243f33; font-size: 25px; }
  .public-songbook .list-header p { margin-top: 5px; color: #687b6b; font-size: 12px; }
  .public-songbook .search-form { min-height: 44px; height: auto; padding: 5px 5px 5px 13px; border-color: #d7d9c9; border-radius: 11px; background: #f8f8ee; }
  .public-songbook .search-form > span { color: #5f765e; font-size: 23px; line-height: 1; }
  .public-songbook .search-form input { width: clamp(165px, 20vw, 265px); background: transparent; color: #253f34; font-size: 13px; }
  .public-songbook .search-form input::placeholder { color: #788679; opacity: 1; }
  .public-songbook .search-form button { min-height: 34px; padding: 0 15px; border-radius: 8px; background: #285441; color: #fff8e8; font-size: 11px; }
  .public-songbook .search-form button:hover { background: #173c2d; }
  .public-songbook .song-filters { gap: 8px; margin: 16px 0; }
  .public-songbook .song-filters a { display: inline-flex; min-height: 38px; align-items: center; gap: 5px; padding: 8px 13px; border-color: #d9ddcf; border-radius: 9px; background: #f6f8ef; color: #365243; font-size: 12px; font-weight: 600; transition: transform .18s ease, background .18s ease; }
  .public-songbook .song-filters a:hover { transform: translateY(-1px); border-color: #8aaf8b; background: #e8f0df; }
  .public-songbook .song-filters a.selected { border-color: #285441; background: #285441; color: #fff9e9; }
  .public-songbook .song-filters small { color: inherit; opacity: .82; font-size: 10px; }
  .public-songbook .song-filters.letters a { min-width: 38px; justify-content: center; }
  .public-songbook .category-filters { border-top-color: #e5e7d8; }

  .public-songbook .song-list { gap: 8px; margin-top: 20px; }
  .public-songbook .letter-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .public-songbook .letter-results .song-row { min-width: 0; min-height: 88px; background: #fff; border-color: #e4e5df; }
  .public-songbook .letter-results .song-row-main strong { white-space: normal; overflow-wrap: anywhere; }
  .public-songbook .letter-results .song-row-main span { font-size: 11px; color: #896e3f; }
  .public-songbook .letter-results .song-row:nth-child(n) .song-index { background: #f2f4ef; color: #53715b; }
  .public-songbook .letter-results .song-row:hover { background: #f3f8ef; }
  .public-songbook .letter-result-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; scroll-margin-top: 20px; margin-top: 23px; padding-bottom: 6px; border-bottom: 1px solid #e9e7de; }
  .public-songbook .letter-result-title strong { font: 500 25px/1.4 var(--serif); color: #2a3e33; }
  .public-songbook .letter-result-title span { color: #758074; font-size: 12px; }
  .public-songbook .song-row { grid-template-columns: 54px minmax(0, 1fr) 42px; min-height: 76px; gap: 15px; padding: 10px 14px; border: 1px solid #e4e7d9; border-radius: 13px; background: #fafbf3; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
  .public-songbook .song-row:nth-child(3n + 2) { background: #fff9ee; border-color: #ede1c8; }
  .public-songbook .song-row:nth-child(3n + 3) { background: #fdf5f0; border-color: #eddcd5; }
  .public-songbook .song-row:hover, .public-songbook .song-row:focus-within { transform: translateY(-2px); border-color: #b7c8ac; background: #f1f6e9; }
  .public-songbook .song-index { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 10px; background: #e7efda; color: #345642; font: 600 16px var(--serif); }
  .public-songbook .song-row:nth-child(3n + 2) .song-index { background: #f8e7c4; color: #815130; }
  .public-songbook .song-row:nth-child(3n + 3) .song-index { background: #f6e2d9; color: #974d43; }
  .public-songbook .song-row-main { gap: 5px; }
  .public-songbook .song-row-main strong { color: #263e33; font-size: 15px; line-height: 1.45; }
  .public-songbook .song-row-main span { color: #647766; font-size: 11px; }
  .public-songbook .song-open { width: 40px; height: 40px; border: 1px solid #d5e1cf; border-radius: 10px; background: #fffdf7; color: #285441; font-size: 17px; }
  .public-songbook .song-open:hover { background: #285441; color: #fff8e8; }
  .public-songbook .premium-tag { margin-left: 5px; padding: 4px 7px; border-radius: 5px; background: #f9e0a6; color: #694320; font-size: 9px; }
  .public-songbook .empty-songs { min-height: 320px; padding: 30px; border: 1px dashed #d9c894; border-radius: 15px; background: #fff9e8; }
  .public-songbook .empty-mark { width: 58px; height: 58px; border-radius: 17px 17px 17px 5px; background: #f2dfaa; color: #785532; font-size: 28px; }
  .public-songbook .empty-songs h3 { color: #293f32; font-size: 22px; }
  .public-songbook .empty-songs p { max-width: 320px; color: #596c59; font-size: 13px; }
  .public-songbook .empty-songs a { color: #754532; font-size: 12px; font-weight: 700; }

  /* Details groups preserve native keyboard and disclosure behavior. */
  .public-songbook .browse-groups { display: grid; gap: 13px; margin: 20px 0 25px; }
  .public-songbook .browse-panel { min-width: 0; overflow: hidden; border: 1px solid #dedfce; border-radius: 16px; background: #f9faf3; }
  .public-songbook .browse-panel:nth-child(2) { background: #fffaf0; border-color: #e9dfc8; }
  .public-songbook .browse-panel > summary { display: flex; min-height: 54px; align-items: center; gap: 9px; padding: 13px 18px; color: #263d33; font-size: 11px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; cursor: pointer; list-style: none; }
  .public-songbook .browse-panel > summary::-webkit-details-marker { display: none; }
  .public-songbook .browse-panel > summary::after { flex: none; margin-left: auto; color: #596e58; content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
  .public-songbook .browse-panel[open] > summary::after { content: "−"; }
  .public-songbook .browse-panel > summary:hover { background: #eaf0e3; }
  .public-songbook .browse-panel > summary:focus-visible { outline: 3px solid #ae7241; outline-offset: -4px; }
  .public-songbook .letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding: 15px 18px 18px; border-top: 1px solid #e5e7d9; }
  .public-songbook .letter-grid a, .public-songbook .letter-grid span { display: grid; min-height: 46px; place-items: center; border: 1px solid #e1e5dc; border-radius: 9px; background: #f0f2ed; color: #304d3e; font: 700 15px/1.2 var(--sans); text-align: center; }
  .public-songbook .letter-grid span { color: #8d998e; opacity: .55; }
  .public-songbook .letter-grid a { transition: transform .18s ease, background .18s ease; }
  .public-songbook .letter-grid a:hover { transform: translateY(-2px); border-color: #adc6a6; background: #e4f0db; }
  .public-songbook .letter-grid a.selected, .public-songbook .letter-grid a[aria-current] { border-color: #263a35; background: #263a35; color: #fff8e8; }
  .public-songbook .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; padding: 15px 18px 18px; border-top: 1px solid #ede5d4; }
  .public-songbook .category-tile { display: flex; min-width: 0; min-height: 62px; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid #e4e5dc; border-radius: 12px; background: #fffefa; color: #293c32; box-shadow: 0 2px 7px #594e3210; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
  .public-songbook .category-tile:hover { transform: translateY(-2px); border-color: #b3c7aa; background: #f5faef; }
  .public-songbook .category-tile.selected, .public-songbook .category-tile[aria-current] { border-color: #285441; background: #edf4e7; }
  .public-songbook .category-glyph { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #f9edce; color: #8a5d2c; font-size: 18px; line-height: 1; }
  .public-songbook .category-tile:nth-child(4n + 2) .category-glyph { background: #f4e1d9; color: #a04f44; }
  .public-songbook .category-tile:nth-child(4n + 3) .category-glyph { background: #e4efdf; color: #366b50; }
  .public-songbook .category-tile:nth-child(4n + 4) .category-glyph { background: #e5e9f3; color: #4e638a; }
  .public-songbook .category-tile > span:last-child, .public-songbook .category-tile > div:last-child { display: grid; min-width: 0; gap: 2px; }
  .public-songbook .category-tile strong { overflow: hidden; color: #293c32; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .public-songbook .category-tile small { color: #657565; font-size: 10px; }

  .member-account { position: relative; width: min(650px, 100%); overflow: hidden; padding: clamp(24px, 4vw, 40px); border-color: #dfd8c2; border-radius: 22px; background: #fffdf5; box-shadow: 0 20px 48px #57493012; }
  .member-account::before { display: block; height: 7px; margin: calc(-1 * clamp(24px, 4vw, 40px)) calc(-1 * clamp(24px, 4vw, 40px)) 31px; background: linear-gradient(90deg, #315b49 0 36%, #e6b75c 36% 68%, #ba6950 68%); content: ""; }
  .member-account h1 { color: #263e32; font-size: clamp(29px, 4vw, 38px); }
  .member-account > p { margin: 0 0 28px; padding: 12px 15px; border: 1px solid #e1e8d7; border-radius: 10px; background: #eff5e9; color: #385644; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  .member-account > .eyebrow { margin-bottom: 10px; padding: 0; border: 0; background: transparent; color: #a4563c; font-weight: 800; }
  .plain-panel > .member-status { padding: 7px 12px; border-color: #e4c688; border-radius: 100px; background: #fff1cf; color: #69482c; }
  .member-account .account-section-heading { margin: 27px 0 14px; color: #293f32; font: 500 22px var(--serif); }
  .member-account .button-secondary { min-height: 40px; margin: 2px 5px 2px 0; font-size: 12px; }
  .member-account .song-form { gap: 18px; padding-top: 24px; border-top: 1px solid #e7e5d7; }
  .member-account .field-label { color: #30483a; font-size: 12px; }
  .member-account .song-form input:not([type=checkbox]):not([type=file]) { min-height: 46px; padding: 10px 13px; border-color: #cfd9c8; border-radius: 9px; background: #fafbf5; color: #253d32; font-size: 14px; }
  .member-account .song-form .button-primary { min-height: 46px; margin-top: 5px; background: #285441; font-size: 12px; }
  .member-account .song-form .button-primary:hover { background: #173c2d; }

  .public-songbook a:focus-visible, .public-songbook button:focus-visible, .member-welcome a:focus-visible, .member-welcome button:focus-visible, .member-account button:focus-visible { outline: 3px solid #a75c3e; outline-offset: 3px; }
}

@media screen and (max-width: 720px) {
  .topbar { height: auto; min-height: 67px; flex-wrap: wrap; row-gap: 8px; padding-top: 10px; padding-bottom: 9px; }
  .brand { flex: 1 1 auto; }
  .main-nav { order: 3; width: 100%; flex: 1 0 100%; align-self: auto; gap: 18px; overflow-x: auto; white-space: nowrap; }
  .main-nav a { min-height: 34px; flex: none; }
  .topbar-note { display: inline-flex; flex: none; margin-left: 0; white-space: nowrap; }
  .topbar-note a, .topbar-note button { min-height: 44px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .member-welcome { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; padding: 27px 23px; border-radius: 19px; }
  .member-welcome::before { right: -135px; bottom: -180px; }
  .member-welcome-copy p { font-size: 13px; }
  .member-welcome-actions { width: 100%; }
  .member-welcome-actions a, .member-welcome-actions button { flex: 1 1 auto; }
  body:has(.public-songbook) .songbook-heading { gap: 22px; }
  body:has(.public-songbook) .songbook-count { width: 100%; min-width: 0; }
  .public-songbook .song-list-panel { grid-row: auto; padding: 18px 14px; border-radius: 16px; }
  .public-songbook .list-header { align-items: stretch; }
  .public-songbook .search-form { width: 100%; }
  .public-songbook .search-form input { width: 100%; flex: 1; }
  .public-songbook .browse-groups { gap: 12px; }
  .public-songbook .browse-panel > summary { min-height: 52px; padding: 12px 14px; }
  .public-songbook .letter-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 12px 10px 14px; }
  .public-songbook .letter-grid a, .public-songbook .letter-grid span { min-height: 38px; font-size: 13px; }
  .public-songbook .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 12px 10px 14px; }
  .public-songbook .category-tile { min-height: 56px; gap: 7px; padding: 7px; }
  .public-songbook .category-glyph { width: 31px; height: 31px; font-size: 15px; }
  .public-songbook .category-tile strong { font-size: 11px; }
  .public-songbook .category-tile small { font-size: 9px; }
  .public-songbook .song-row { grid-template-columns: 42px minmax(0, 1fr) 38px; min-height: 68px; gap: 9px; padding: 9px; }
  .public-songbook .letter-results { grid-template-columns: 1fr; }
  .public-songbook .song-index { width: 39px; height: 39px; font-size: 14px; }
  .public-songbook .song-row-main strong { font-size: 13px; }
  .public-songbook .song-row-main span { font-size: 10px; }
  .public-songbook .song-open { width: 38px; height: 38px; }
}
@media screen and (max-width: 380px) {
  .public-songbook .letter-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .public-songbook .category-tile { gap: 5px; padding: 6px; }
  .public-songbook .category-glyph { width: 28px; height: 28px; }
  .public-songbook .category-tile strong { font-size: 10px; }
  .public-songbook .category-tile small { font-size: 8px; }
}
@media print {
  @page { size: A4 portrait; margin: 16mm; }
  body { background: #fff; }
  .screen-only, .topbar, .site-footer, .setup-banner, .notice { display: none !important; }
  .page-wrap { width: 100%; margin: 0; padding: 0; }
  .song-detail-toolbar { display: none !important; }
  .page-wrap { width: 100%; padding: 0; }
  .song-sheet { width: 100%; min-height: 0; border-radius: 0; box-shadow: none; break-inside: auto; }
  .song-sheet-inner { min-height: 0; padding: 12mm 14mm; }
}

/* Word & Song: a welcoming front door for the congregation.
   These additions are scoped so the existing songbook and poster stay intact. */
:root {
  --ws-cream: #fff8e9;
  --ws-saffron: #efbc68;
  --ws-coral: #ae604d;
  --ws-wine: #713f3a;
  --ws-leaf: #315943;
}

.site-brand-img {
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
}
.brand:has(.site-brand-img) .brand-mark { display: none; }
.brand-copy strong { color: #284b39; }
.brand:focus-visible, .main-nav a:focus-visible,
.topbar-note a:focus-visible, .topbar-note button:focus-visible {
  outline: 3px solid #b36c4a;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Sign-in, registration, setup and reset share one considered experience. */
.auth-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
  width: min(1100px, 100%);
  min-height: min(690px, calc(100dvh - 205px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #e9d9c4;
  border-radius: 26px;
  background: #fffbf2;
  box-shadow: 0 22px 68px #5d41311a;
}
.auth-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  background: radial-gradient(circle at 72% 22%, #f7c982 0, transparent 35%),
    linear-gradient(145deg, #d78a5b 0%, #a8584b 56%, #713f3a 100%);
  color: #fff9e9;
}
.auth-visual::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #5e342000 12%, #44292242 54%, #39221fd9 100%);
  content: "";
  pointer-events: none;
}
.auth-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.auth-visual > :not(.auth-backdrop) { position: relative; }
.auth-visual .site-brand-img { width: 64px; height: 64px; margin-bottom: auto; border-radius: 14px; }
.auth-visual .eyebrow { color: #ffe5aa; }
.auth-visual h1, .auth-visual h2 {
  max-width: 540px;
  margin: 0 0 16px;
  color: #fff9e9;
  font: 600 clamp(32px, 3.5vw, 52px)/1.2 var(--serif);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.auth-visual p {
  max-width: 440px;
  margin: 0;
  color: #fff1d9;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.8;
}
.auth-experience .auth-panel {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(32px, 5vw, 68px);
  border: 0;
  border-radius: 0;
  background: #fffbf2;
  box-shadow: none;
}
.auth-experience .auth-panel h1 {
  margin-bottom: 12px;
  color: #284c39;
  font: 600 clamp(26px, 2.7vw, 37px)/1.3 var(--serif);
  letter-spacing: -.04em;
}
.auth-experience .auth-panel > p {
  margin: 0 0 25px;
  color: #6b7668;
  font-size: 13px;
  line-height: 1.75;
}
.auth-experience .auth-panel > p:last-child { margin: 23px 0 0; }
.auth-experience .auth-panel > p a {
  color: #8c4c3d;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #d4a285;
  text-underline-offset: 4px;
}
.auth-experience .auth-panel .song-form { gap: 18px; }
.auth-experience .auth-panel .field-label {
  gap: 8px;
  margin: 0;
  color: #405345;
  font-size: 12px;
  font-weight: 700;
}
.auth-experience .auth-panel .song-form input:not([type=checkbox]):not([type=file]) {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #dcd9c8;
  border-radius: 10px;
  background: #fffefa;
  color: #263c31;
  font-size: 15px;
}
.auth-experience .auth-panel .song-form .button-primary {
  min-height: 50px;
  margin-top: 5px;
  border-radius: 10px;
  background: #315943;
  font-size: 13px;
}
.auth-experience .auth-panel .song-form .button-primary:hover { background: #20432f; }
.auth-experience a:focus-visible, .auth-experience button:focus-visible,
.splash-overlay button:focus-visible, .splash-overlay a:focus-visible,
.home-banner a:focus-visible, .home-banner button:focus-visible,
.song-share a:focus-visible, .song-share button:focus-visible {
  outline: 3px solid #e7a951;
  outline-offset: 3px;
}

/* Splash is a real, dismissible layer; no scripted visibility assumptions. */
.splash-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 30%, #d8a370 0%, #ad6452 48%, #653e3c 100%);
  color: #fff9ea;
}
.splash-overlay[hidden] { display: none !important; }
.splash-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.56) saturate(.82);
  pointer-events: none;
}
.splash-overlay::before {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 34%, #8b513900 0%, #432b2db3 100%);
  content: "";
  pointer-events: none;
}
.splash-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(540px, 100%);
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 7vw, 64px) clamp(25px, 6vw, 58px);
  border: 1px solid #ffeac088;
  border-radius: 28px;
  background: #673e38b5;
  box-shadow: 0 26px 80px #301f2066, inset 0 1px #fff4d73b;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: ws-arrive .65s ease-out both;
}
.splash-card .site-brand-img { width: 84px; height: 84px; margin: 0 auto 25px; border-radius: 19px; }
.splash-card h1, .splash-card h2 {
  margin: 0 0 14px;
  color: #fff9e9;
  font: 600 clamp(34px, 8vw, 55px)/1.22 var(--serif);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.splash-card p { max-width: 370px; margin: 0 auto; color: #ffebd0; font-size: 14px; line-height: 1.8; }
.splash-card .eyebrow { color: #ffdda0; }
.splash-card .button-primary, .splash-card .button-secondary {
  min-height: 48px;
  margin-top: 28px;
  padding-inline: 25px;
  border-color: #f8db9a;
  background: #f8d88e;
  color: #59362c;
}
.splash-card .button-primary:hover, .splash-card .button-secondary:hover { background: #ffe4a9; }
.splash-skip {
  position: absolute;
  z-index: 2;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid #fff2d58c;
  border-radius: 100px;
  background: #4a302b70;
  color: #fff9e9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.splash-skip:hover { background: #fff3df30; }
@keyframes ws-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Configurable homepage artwork, equally welcoming without an uploaded image. */
.home-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(270px, 32vw, 390px);
  align-items: center;
  overflow: hidden;
  margin-bottom: 38px;
  border: 1px solid #d38c65;
  border-radius: 24px;
  background: radial-gradient(circle at 85% 15%, #f4ce87 0%, transparent 33%),
    linear-gradient(110deg, #854b42 0%, #b6644f 57%, #d78a55 100%);
  box-shadow: 0 18px 40px #75483521;
  color: #fff9eb;
}
.home-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-banner::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #3e302bbf 0%, #5f403c9e 52%, #6a45384d 100%);
  content: "";
  pointer-events: none;
}
.home-banner-content {
  width: min(680px, 100%);
  padding: clamp(30px, 5vw, 64px);
}
.home-banner .eyebrow { color: #ffe3a1; }
.home-banner h1, .home-banner h2 {
  margin: 0 0 15px;
  color: #fff9e9;
  font: 600 clamp(31px, 4vw, 54px)/1.25 var(--serif);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.home-banner p { max-width: 530px; margin: 0 0 20px; color: #fff0dc; font-size: clamp(13px, 1.3vw, 16px); line-height: 1.75; }
.home-banner a:not(.eyebrow), .home-banner button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid #ffe3aa;
  border-radius: 9px;
  background: #fff3d6;
  color: #653b32;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.home-banner a:not(.eyebrow):hover, .home-banner button:hover { transform: translateY(-2px); background: #fff9ea; }

/* Sharing controls remain usable around the printable song sheet. */
.song-share { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; max-width: 760px; margin: 17px auto 23px; }
.song-share a, .song-share button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #dbcfc1;
  border-radius: 9px;
  background: #fffaf0;
  color: #365442;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.song-share a:hover, .song-share button:hover { transform: translateY(-2px); background: #f4eadb; }
.song-sheet .sheet-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.42) saturate(.85);
  pointer-events: none;
}
.song-sheet .song-sheet-inner { position: relative; }

/* Editorial but practical settings layout for image and identity uploads. */
.settings-panel { width: min(1050px, 100%); margin-inline: auto; padding: clamp(22px, 4vw, 42px); }
.settings-panel h1 { color: #284c39; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.settings-grid > * { min-width: 0; }
.settings-grid .field-label { display: grid; gap: 8px; font-size: 12px; }
.settings-panel .song-form input:not([type=checkbox]):not([type=color]),
.settings-panel .song-form textarea, .settings-panel .song-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dcd9c8;
  border-radius: 9px;
  background: #fffefa;
  color: #263c31;
  font-size: 13px;
}
.settings-panel .song-form input[type=file] { min-height: 50px; padding: 10px; }
.settings-panel .song-form input[type=checkbox] { accent-color: #315943; }
.settings-panel .button-primary { min-height: 46px; }
.settings-panel h2 { margin: 32px 0 18px; padding-top: 24px; border-top: 1px solid #eae3d3; color: #304d3e; font: 600 23px var(--serif); }
.settings-panel .song-form > .field-label { display: grid; gap: 8px; margin-top: 18px; font-size: 12px; }
.settings-upload { min-width: 0; }
.settings-upload-preview { display: block; width: min(190px, 100%); max-height: 105px; margin: 8px 0; border: 1px solid #e1ddcf; border-radius: 9px; object-fit: cover; }
.settings-remove { display: inline-flex; align-items: center; gap: 8px; color: #78574e; font-size: 12px; }
.settings-panel.payment-settings { margin-top: 22px; }
.splash-symbol { display: grid; width: 84px; height: 84px; place-items: center; margin: 0 auto 25px; border: 1px solid #ffe6b47a; border-radius: 19px; background: #fff9df25; color: #fff2cf; font: 48px Georgia,serif; }
.video-panel > p { margin: 13px auto; color: #69756a; font-size: 12px; }
.video-panel > p a { color: #285441; font-weight: 700; text-decoration: underline; }
.video-play { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; gap: 15px; border: 0; border-radius: 12px; background: radial-gradient(circle at 75% 30%, #ae695b, transparent 55%), linear-gradient(140deg,#491728,#241c29); color: #fff6df; font: 700 15px var(--sans); cursor: pointer; }
.video-play:hover { background: radial-gradient(circle at 75% 30%, #b88061, transparent 55%), linear-gradient(140deg,#622438,#2e2131); }
.video-play:focus-visible { outline: 3px solid #efbc68; outline-offset: 3px; }
.play-symbol { display: grid; width: 66px; height: 66px; place-items: center; padding-left: 4px; border: 2px solid #ffe3a9; border-radius: 50%; background: #fff5df22; font-size: 24px; }
#shareStatus { color: #516b54; font-size: 12px; }

@media screen and (max-width: 760px) {
  .auth-experience { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
  .auth-visual { min-height: 250px; padding: 28px; }
  .auth-visual .site-brand-img { width: 48px; height: 48px; margin-bottom: 25px; }
  .auth-visual h1, .auth-visual h2 { margin-bottom: 8px; font-size: clamp(27px, 7vw, 36px); }
  .auth-visual p { font-size: 12px; line-height: 1.6; }
  .auth-experience .auth-panel { padding: 32px 26px 36px; }
  .home-banner { min-height: 300px; margin-bottom: 30px; border-radius: 19px; }
  .home-banner::before { background: linear-gradient(90deg, #3e302bdb 0%, #5f403ca6 100%); }
  .settings-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 480px) {
  .site-brand-img { width: 35px; height: 35px; }
  .auth-experience { border-radius: 16px; }
  .auth-visual { min-height: 220px; padding: 25px 22px; }
  .auth-experience .auth-panel { padding: 29px 21px 33px; }
  .auth-experience .auth-panel h1 { font-size: 26px; }
  .splash-overlay { align-items: center; }
  .splash-card { min-height: 370px; padding: 40px 25px; border-radius: 22px; }
  .splash-card .site-brand-img { width: 68px; height: 68px; }
  .splash-skip { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
  .home-banner { min-height: 290px; }
  .home-banner-content { padding: 29px 24px; }
  .song-share { justify-content: stretch; }
  .song-share a, .song-share button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash-card { animation: none; }
  .home-banner a, .home-banner button, .song-share a, .song-share button,
  .auth-experience .button-primary { transition: none; }
  .home-banner a:hover, .home-banner button:hover, .song-share a:hover, .song-share button:hover,
  .auth-experience .button-primary:hover { transform: none; }
}
@media print {
  .splash-overlay, .auth-experience, .home-banner, .song-share { display: none !important; }
  .song-sheet .sheet-backdrop { filter: brightness(.42) saturate(.85); }
}