:root { --ink:#292822; --muted:#77736a; --paper:#f7f4ed; --card:#fffdf8; --line:#ded9ce; --accent:#bd5b3c; --accent-dark:#963f29; --shadow:0 16px 45px rgba(62,50,35,.1); }
* { box-sizing:border-box; }
:focus-visible { outline:3px solid #00adc4; outline-offset:3px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Lato",Helvetica,Arial,sans-serif; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
.topbar { height:82px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; gap:42px; border-bottom:1px solid var(--line); background:rgba(247,244,237,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; background:none; border:0; cursor:pointer; text-align:left; padding:0; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; color:white; background:var(--accent); border-radius:50% 50% 46% 54%; font-family:Georgia,serif; font-size:22px; font-style:italic; transform:rotate(-4deg); }
.brand strong,.brand small { display:block; }.brand strong { font:700 18px "Lato",Helvetica,Arial,sans-serif; }.brand small { color:var(--muted); font-size:11px; letter-spacing:.04em; }
nav { display:flex; gap:6px; height:100%; }
.nav-button { border:0; background:none; padding:0 15px; cursor:pointer; color:var(--muted); font-weight:600; position:relative; }
.nav-button.active { color:var(--ink); }.nav-button.active:after { content:""; height:3px; position:absolute; bottom:0; left:12px; right:12px; border-radius:3px 3px 0 0; background:var(--accent); }
.header-actions { display:flex; gap:9px; margin-left:auto; }
.button { border-radius:9px; border:1px solid var(--line); background:var(--card); padding:10px 15px; cursor:pointer; font-weight:600; }
.button:hover { transform:translateY(-1px); }.button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }.button.primary:hover { background:var(--accent-dark); }.button.danger { color:#a03f2c; }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:58px 0 90px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:38px; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:700; color:var(--accent); margin:0 0 10px; }
h1,h2,h3 { font-family:"Lato",Helvetica,Arial,sans-serif; margin-top:0; } h1 { font-size:clamp(34px,5vw,57px); letter-spacing:-.05em; margin-bottom:12px; line-height:1; } h2 { letter-spacing:-.035em; } .hero p:last-child { color:var(--muted); margin:0; font-size:16px; }
.stats { display:flex; gap:25px; }.stat { border-left:1px solid var(--line); padding-left:18px; min-width:90px; }.stat strong { font:700 26px "Lato",Helvetica,Arial,sans-serif; display:block; }.stat span { color:var(--muted); font-size:12px; }
.toolbar { display:flex; gap:11px; margin-bottom:24px; }.search { position:relative; flex:1; }.search:before { content:"⌕"; position:absolute; left:16px; top:9px; font-size:20px; color:var(--muted); }.search input { width:100%; padding:12px 15px 12px 43px; border:1px solid var(--line); background:var(--card); border-radius:10px; outline:0; }.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #bd5b3c18; }
.song-grid,.playlist-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.song-card,.playlist-card { background:var(--card); border:1px solid var(--line); border-radius:13px; padding:21px; cursor:pointer; transition:.18s ease; min-height:170px; display:flex; flex-direction:column; }.song-card:hover,.playlist-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfc6b8; }
.song-number { color:var(--accent); font:700 12px "Lato",Helvetica,Arial,sans-serif; letter-spacing:.08em; }.song-card h3 { margin:15px 0 6px; font-size:19px; }.song-card .artist { color:var(--muted); font-size:13px; }.card-footer { display:flex; align-items:end; justify-content:space-between; margin-top:auto; padding-top:20px; color:var(--muted); font-size:12px; }.tag { background:#eee8dc; border-radius:20px; padding:4px 8px; margin-right:4px; }
.empty { text-align:center; padding:80px 20px; border:1px dashed #cfc8bb; border-radius:15px; background:#ffffff45; }.empty-symbol { font:italic 48px Georgia;color:var(--accent); }.empty h2 { margin:15px 0 8px; }.empty p { color:var(--muted); margin:0 auto 23px; max-width:450px; }
.playlist-card { min-height:190px; }.playlist-card h2 { margin:20px 0 8px; }.playlist-card .count { color:var(--muted); }.playlist-card .line { width:38px; border-top:2px solid var(--accent); margin-top:auto; }
dialog { width:min(680px,calc(100% - 28px)); padding:0; border:0; border-radius:15px; background:var(--card); box-shadow:0 30px 90px #221b1470; } dialog::backdrop { background:#3b352e99; backdrop-filter:blur(3px); } dialog form { padding:27px; }.dialog-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; }.dialog-heading h2 { margin:0; }.icon-button { border:0; background:none; font-size:28px; cursor:pointer; color:var(--muted); }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:9px; }
.dialog-panel { padding:27px; }.playlist-picker-list,.export-options { display:grid; gap:9px; }.playlist-choice { width:100%; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; text-align:left; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; font-weight:700; }.playlist-choice:hover:not(:disabled) { border-color:var(--accent); background:#effcfd; }.playlist-choice small { color:var(--muted); font-weight:400; }.playlist-choice:disabled { cursor:default; opacity:.62; background:#f4f6f7; }
.metadata-results { display:grid; gap:9px; max-height:55vh; overflow:auto; }.metadata-result { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; text-align:left; }.metadata-result:hover { border-color:var(--accent); background:#effcfd; }.metadata-result strong,.metadata-result span { display:block; }.metadata-result strong { color:var(--navy); margin-bottom:4px; }.metadata-result span { color:var(--muted); font-size:12px; line-height:1.45; }.loading { padding:30px; text-align:center; color:var(--muted); }
.bulk-progress { margin:24px 0 12px; padding:18px; border:1px solid var(--line); border-radius:10px; background:#f8fbfc; }.bulk-progress strong,.bulk-progress>span { display:block; }.bulk-progress strong { margin:14px 0 5px; color:var(--navy); }.bulk-progress>span { color:var(--muted); font-size:13px; }.progress-track { height:9px; overflow:hidden; border-radius:10px; background:#dce5e8; }.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .2s; }
label { display:block; font-weight:600; font-size:13px; margin:0 0 15px; } input,textarea { display:block; width:100%; margin-top:7px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:white; outline:0; } textarea { resize:vertical; line-height:1.5; }.form-row { display:grid; grid-template-columns:2fr 1fr; gap:12px; }.help { color:var(--muted); font-size:14px; line-height:1.6; }.file-picker { border:1px dashed var(--line); text-align:center; padding:15px; border-radius:9px; cursor:pointer; }.file-picker input { display:none; }
.reader { max-width:860px; margin:0 auto; }.reader-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }.reader-actions { display:flex; align-items:center; gap:8px; }.reader-sheet { background:var(--reader-bg,#fffdf8); color:var(--reader-ink,#292822); padding:clamp(28px,7vw,75px); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); }.reader-sheet h1 { font-size:clamp(35px,6vw,60px); margin-bottom:8px; }.reader-meta { color:var(--reader-muted,#77736a); border-bottom:1px solid currentColor; opacity:.7; padding-bottom:24px; margin-bottom:34px; }.lyrics { white-space:pre-wrap; font-family:Georgia,serif; font-size:var(--lyric-size,22px); line-height:1.65; }.theme-buttons { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }.swatch { width:34px;height:34px;border:0;border-right:1px solid var(--line);cursor:pointer; }.swatch:last-child { border:0; }.swatch[data-theme=paper]{background:#fffdf8}.swatch[data-theme=cream]{background:#f2dfb4}.swatch[data-theme=contrast]{background:#111}.swatch[data-theme=night]{background:#182027}.size-button { width:36px;height:36px;padding:0; }
.playlist-detail header { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:25px; }.playlist-detail h1 { margin-bottom:0; }.playlist-song { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:15px; padding:15px 8px; border-bottom:1px solid var(--line); }.playlist-song .order { color:var(--muted); }.playlist-song strong,.playlist-song small { display:block; }.playlist-song small { color:var(--muted);margin-top:3px; }.playlist-song-title { text-align:left; }.playlist-song-actions { display:flex; align-items:center; gap:2px; }.mini { background:none;border:0;cursor:pointer;color:var(--muted);padding:7px; }.mini:hover{color:#008ba2}.mini:disabled { cursor:not-allowed; opacity:.3; }.reorder { width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:var(--card); font-size:17px; line-height:1; }
#toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,30px); opacity:0; background:#292822;color:#fff;padding:11px 17px;border-radius:8px;transition:.2s;z-index:30;pointer-events:none; }#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.topbar{height:auto;min-height:72px;padding:12px 18px;gap:15px;flex-wrap:wrap}.brand small{display:none}nav{order:3;width:100%;height:38px}.header-actions .quiet{display:none}.nav-button{flex:1}.song-grid,.playlist-grid{grid-template-columns:1fr}.hero{align-items:start;flex-direction:column}.stats{width:100%}.reader-toolbar{align-items:start;flex-wrap:wrap}.reader-actions{flex-wrap:wrap}.form-row{grid-template-columns:1fr}main{padding-top:35px}}
@media print { .topbar,.reader-toolbar,#toast { display:none!important; } body { background:white; } main { width:100%; padding:0; }.reader-sheet { border:0;box-shadow:none;padding:0;color:#000!important;background:#fff!important; }.lyrics { font-size:14pt;line-height:1.45; }.reader-sheet h1 { font-size:28pt; } }

/* Tuneless Choir-inspired default theme: navy, cyan, white, and friendly type. */
:root { --ink:#222; --muted:#696969; --paper:#f5f9fa; --card:#fff; --line:#dce5e8; --accent:#00cfe6; --accent-dark:#00adc4; --navy:#000f33; --shadow:0 16px 45px rgba(0,15,51,.1); }
body { font-family:"Lato",Helvetica,Arial,sans-serif; }
.topbar { border-color:#102244; background:rgba(0,15,51,.97); box-shadow:0 4px 18px rgba(0,15,51,.14); }
.brand-mark { width:41px; height:41px; color:var(--navy); background:var(--accent); border-radius:50%; font:600 25px "Dancing Script",cursive; }
.brand strong { color:#fff; font:900 18px "Lato",sans-serif; }
.brand small { color:var(--accent); }
.nav-button { color:#fff; font-weight:700; }
.nav-button:hover,.nav-button.active { color:var(--accent); }
.button { border-radius:7px; font-weight:700; }
.button.primary { color:var(--navy); }
.topbar .button.quiet { color:#fff; background:transparent; border-color:#52617c; }
.topbar .button.quiet:hover { color:var(--accent); border-color:var(--accent); }
.topbar .button.primary { box-shadow:0 5px 18px rgba(0,207,230,.2); }
h1,h2,h3 { color:var(--navy); font-family:"Lato",Helvetica,Arial,sans-serif; }
h1,h2 { font-weight:900; }
.reader-sheet h1 { color:inherit; }
.eyebrow,.song-number { color:#008ba2; font-family:"Lato",sans-serif; font-weight:900; }
.stat { border-left:3px solid var(--accent); }
.stat strong { color:var(--navy); font-family:"Lato",sans-serif; font-weight:900; }
.search input:focus { box-shadow:0 0 0 3px rgba(0,207,230,.18); }
.song-card:hover,.playlist-card:hover { border-color:#a8dfe5; }
.tag { color:#005c69; background:#dff9fc; }
.empty { border-color:#b9dce0; background:rgba(255,255,255,.55); }
.empty-symbol { color:#008ba2; font:600 52px "Dancing Script",cursive; }
.playlist-card .line { border-color:var(--accent); }
#toast { background:var(--navy); }
/* Account and reviewed PDF-import controls */
[hidden] { display: none !important; }
.auth-screen { max-width: 34rem; margin: 4rem auto; }
.auth-screen form { display: grid; gap: 1rem; text-align: left; }
.auth-screen label, #user-form label { display: grid; gap: .35rem; }
.auth-screen input, #user-form input, #user-form select { width: 100%; padding: .65rem; border: 1px solid #9ba7af; border-radius: .5rem; }
#account-name { margin-right: .5rem; font-size: .9rem; color: white; align-self: center; }
#user-form { display: grid; gap: .8rem; margin-top: 1.5rem; }
.user-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid #ddd; }
.user-row strong { min-width: 7rem; }
.pdf-results { max-height: 45vh; overflow: auto; margin-top: 1rem; }
.pdf-entry { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem; border-bottom: 1px solid #ddd; }
.pdf-entry input[type="checkbox"] { width: auto; flex: none; margin: .2rem 0 0; }
.pdf-entry span { min-width: 0; }
.pdf-entry small { display: block; color: #555; }
.pdf-entry pre { max-height: 12rem; overflow: auto; white-space: pre-wrap; font: .85rem/1.35 monospace; }
@media (max-width: 760px) {
  .header-actions { flex-wrap: wrap; }
  .header-actions .quiet { display: inline-flex; }
  .header-actions .button { padding: 7px 9px; font-size: .8rem; }
}