/* Sunbeam Vault: shared visual language. Legacy page layouts remain in a lower cascade layer. */
:root {
  color-scheme: light;
  --ll-cream: #f7f4ec; --ll-paper: #fffefa; --ll-white: #ffffff;
  --ll-navy: #18334a; --ll-navy-hover: #254b66; --ll-ink: #203448;
  --ll-muted: #586572; --ll-line: #d5dcd9; --ll-gold: #b18838;
  --ll-gold-soft: #f2e6c8; --ll-soft: #eef2f0; --ll-focus: #926719;
  --ll-danger: #9d3432; --ll-danger-soft: #fff1ee;
  --ll-success: #246246; --ll-success-soft: #edf5ef;
  --ll-radius: 12px; --ll-card-radius: 22px;
  --ll-shadow: 0 10px 32px rgb(24 51 74 / 7%);
  --ll-heading: Georgia, 'Times New Roman', serif;
  --ll-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Compatibility aliases keep the mature category layouts working. */
  --bg: var(--ll-cream); --panel: var(--ll-paper); --ink: var(--ll-ink);
  --muted: var(--ll-muted); --line: var(--ll-line); --gold: var(--ll-gold);
  --cream: var(--ll-cream); --paper: var(--ll-paper); --navy: var(--ll-navy);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ll-cream); }
body { margin: 0; color: var(--ll-ink); background: var(--ll-cream); font: 16px/1.55 var(--ll-body); }
[hidden] { display: none !important; }
h1,h2,h3 { color: var(--ll-navy); font-family: var(--ll-heading); line-height: 1.15; font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.035em; }
h2 { font-size: clamp(25px, 3vw, 34px); }
h3 { font-size: 22px; }
p { line-height: 1.65; }
a { color: var(--ll-navy); text-underline-offset: .23em; text-decoration-thickness: 1px; }
a:hover { color: var(--ll-navy-hover); }
:focus-visible { outline: 3px solid var(--ll-focus); outline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, .button, .ll-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid #9aaab2;
  border-radius: var(--ll-radius); background: var(--ll-paper); color: var(--ll-navy);
  font: 650 14px/1.35 var(--ll-body); letter-spacing: .015em;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: none; transition: background .16s, border-color .16s, box-shadow .16s;
}
:is(button,.button,.ll-button):hover:not(:disabled) { background: var(--ll-soft); border-color: var(--ll-navy); transform: none; }
:is(button,.button,.ll-button).ll-primary, button.primary, .enter, .account-save, .start-stash {
  background: var(--ll-navy); color: var(--ll-white); border-color: var(--ll-navy);
}
:is(button,.button,.ll-button).ll-primary:hover:not(:disabled), button.primary:hover:not(:disabled),
.enter:hover:not(:disabled), .account-save:hover:not(:disabled), .start-stash:hover:not(:disabled) {
  background: var(--ll-navy-hover); color: var(--ll-white); border-color: var(--ll-navy-hover);
}
:is(button,.button).secondary { background: var(--ll-paper); color: var(--ll-navy); }
:is(button,.button).ll-tertiary { background: transparent; border-color: transparent; text-decoration: underline; }
:is(button,.button).danger { color: var(--ll-danger); border-color: #c78378; background: var(--ll-danger-soft); }
:is(button,.button).danger:hover:not(:disabled) { color: #772725; background: #f9dcd7; border-color: var(--ll-danger); }
:is(button,.button):disabled, :is(button,.button).ll-primary:disabled, button.primary:disabled, [aria-disabled='true'] {
  background: #e7eae7; color: #606965; border-color: #c5ccc8; opacity: 1;
  cursor: not-allowed; box-shadow: none; transform: none;
}
input:not([type='checkbox']):not([type='radio']), select, textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px;
  border: 1px solid #8d9da6; border-radius: var(--ll-radius);
  background: var(--ll-white); color: var(--ll-ink); font: 16px/1.45 var(--ll-body);
}
input::placeholder, textarea::placeholder { color: #65737c; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--ll-focus); outline: 3px solid var(--ll-gold-soft); outline-offset: 1px; }
input:disabled,select:disabled,textarea:disabled { background: var(--ll-soft); color: var(--ll-muted); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--ll-navy); width: 19px; height: 19px; flex: 0 0 auto; }
textarea { resize: vertical; }
label, .label, .account-field label { color: var(--ll-ink); font: 600 14px/1.5 var(--ll-body); letter-spacing: 0; text-transform: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.ll-nav { display: flex; gap: 12px 24px; align-items: center; flex-wrap: wrap; }
.ll-nav a, .account, .back { display: inline-flex; align-items: center; min-height: 44px; color: var(--ll-navy); font: 650 13px/1.3 var(--ll-body); letter-spacing: .06em; text-decoration: none; opacity: 1; }
.ll-nav a:hover, .account:hover, .back:hover { text-decoration: underline; }
.ll-nav #signupLink { border: 1px solid var(--ll-navy); padding: 9px 14px; border-radius: var(--ll-radius); }
.ll-wordmark { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ll-navy); }
.ll-wordmark img { width: 46px; height: 46px; }
.ll-wordmark strong { display: block; font: 600 23px/1.05 var(--ll-heading); letter-spacing: -.03em; }
.ll-wordmark small { display: block; font: 600 10px/1.7 var(--ll-body); letter-spacing: .18em; text-transform: uppercase; }
.ll-auth .ll-wordmark { justify-content: center; margin: 0 auto 12px; }
.ll-auth .ll-wordmark img { width: 52px; height: 52px; }
.ll-account .ll-wordmark { margin-bottom: 10px; }
.ll-account .ll-wordmark img { width: 48px; height: 48px; }
.ll-brand-stamp { display: inline-flex; align-items: center; gap: 8px; color: var(--ll-navy); }
.ll-brand-stamp img { width: 27px; height: 27px; }
.ll-brand-stamp b { color: var(--ll-navy); font-weight: 650; }
.ll-collection .powered { display: inline-flex; align-items: center; gap: 8px; font: 650 12px/1.4 var(--ll-body); letter-spacing: .09em; }
.ll-collection .powered img { width: 26px; height: 26px; }
.ll-eyebrow, .eyebrow { color: #7b5a20; font: 700 12px/1.5 var(--ll-body); letter-spacing: .16em; text-transform: uppercase; }
.brand { color: var(--ll-navy); text-shadow: none; }
.brand small { font-family: var(--ll-body); }
.tagline { color: var(--ll-muted); }
.card, .panel, .shelf, .empty-stash {
  background: var(--ll-paper); color: var(--ll-ink); border: 1px solid var(--ll-line);
  border-radius: var(--ll-card-radius); box-shadow: var(--ll-shadow);
}
.note,.context,.hint,.helper,.help,.privacy-help,.access-username,.access-status,.access-empty,.access-coming,
.identity-qr-link,.account-message,.intro,.author,.small,.artist,.events,.photo-meta,.gallery-empty,.discogs-help,.copyline { color: var(--ll-muted); }
.status,.message { color: var(--ll-navy); }
.error,#error { color: var(--ll-danger); }
.loading { color: var(--ll-muted); padding: 30px; background: var(--ll-paper); border: 1px dashed var(--ll-line); border-radius: var(--ll-radius); }
.ll-page [role='status']:empty, .ll-page [role='alert']:empty { padding: 0; border: 0; }
/* Entrance: an open, sunlit threshold rather than an inventory dashboard. */
.ll-entrance { display: block; padding: 30px clamp(20px,5vw,76px) 50px; }
.ll-entrance .entrance { width: min(1200px,100%); margin: auto; padding: 0; text-align: left; }
.ll-masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ll-line); }
.ll-masthead .account { margin: 0; }
.ll-entrance-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px,7vw,100px); padding: 48px 0 16px; }
.ll-welcome h1 { font-size: clamp(44px,5.6vw,76px); max-width: 580px; margin: 20px 0 24px; }
.ll-welcome p { max-width: 430px; color: var(--ll-muted); font-size: 18px; }
.ll-welcome .ll-welcome-foot { border-top: 1px solid var(--ll-line); padding-top: 24px; margin-top: 36px; font-size: 14px; }
.ll-entrance .arch { padding: 14px; border: 1px solid #c8c7b8; border-radius: 240px 240px 24px 24px; background: #e7e4d8; box-shadow: 0 20px 60px rgb(24 51 74 / 9%); }
.ll-entrance .door { min-height: 520px; padding: 60px 28px 28px; border: 1px solid #c4cbbc; border-radius: 225px 225px 14px 14px; background: linear-gradient(145deg,#fffdf5,#f0e4c5); box-shadow: inset 0 0 0 8px rgb(255 255 255 / 50%); text-align: center; }
.ll-vault-symbol { width: 96px; height: 96px; margin: 12px 0 14px; }
.ll-entrance .brand { font: 500 clamp(28px,3vw,40px)/1.2 var(--ll-heading); margin: 0; letter-spacing: .03em; }
.ll-entrance .brand small { font: 650 11px/1.8 var(--ll-body); letter-spacing: .2em; }
.ll-entrance .tagline { font: italic 17px/1.5 var(--ll-heading); margin: 16px 0 32px; }
.ll-entrance .destination { font: 500 26px/1.25 var(--ll-heading); color: var(--ll-navy); margin: 8px 0; }
.ll-entrance .status { color: var(--ll-muted); font-size: 14px; margin-bottom: 24px; }
.ll-entrance .enter { width: 100%; max-width: 340px; margin-top: auto; font-size: 13px; padding: 16px 20px; letter-spacing: .04em; }
.ll-entrance .door.locked { filter: none; background: var(--ll-soft); }
.ll-entrance .lock { font-size: 25px; }
.ll-entrance .archer { font-size: 22px; opacity: .7; margin: 15px 0 0; order: 10; filter: none; }
/* Narrow screens use the same hierarchy, not a second visual theme. */
@media(max-width:760px) {
  .ll-entrance { padding: 20px 18px 32px; }
  .ll-masthead { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .ll-masthead .ll-nav { gap: 16px; }
  .ll-entrance-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; }
  .ll-welcome h1 { font-size: 42px; margin: 12px 0 16px; }
  .ll-welcome p { font-size: 16px; }
  .ll-welcome .ll-welcome-foot { display: none; }
  .ll-entrance .arch { width: min(440px,100%); margin: auto; }
  .ll-entrance .door { min-height: 440px; padding-top: 38px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* Shared account and authentication surfaces. */
.ll-auth { display: grid; place-items: center; padding: 48px 20px; min-height: 100vh; background: radial-gradient(ellipse at 80% 0%,#efe4c9,transparent 55%),var(--ll-cream); }
.ll-auth .wrap, .ll-auth .login { width: min(520px,100%); padding: 0; margin: auto; text-align: center; }
.ll-auth .panel, .ll-auth .card { padding: clamp(24px,5vw,40px); text-align: left; }
.ll-auth .brand { font: 500 38px/1.1 var(--ll-heading); letter-spacing: -.025em; text-align: center; }
.ll-auth .brand small { font-size: 11px; letter-spacing: .22em; margin-top: 8px; }
.ll-auth .tagline { font: italic 17px/1.5 var(--ll-heading); text-align: center; margin: 12px 0 28px; }
.ll-auth h1 { font-size: 34px; margin: 12px 0; }
.ll-auth .intro, .ll-auth .context { font-size: 15px; margin-bottom: 26px; }
.ll-auth .field { margin: 0 0 20px; }
.ll-auth label { margin-bottom: 7px; display: block; }
.ll-auth .hint { font-size: 13px; margin-top: 6px; }
.ll-auth button[type='submit'] { width: 100%; margin-top: 12px; }
.ll-auth .signin { color: var(--ll-muted); font-size: 14px; }
.ll-auth .signin a { color: var(--ll-navy); }
.ll-account { padding: 36px 20px 70px; }
.ll-account .wrap { width: min(1040px,100%); }
.ll-account .top { text-align: left; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--ll-line); }
.ll-account .top .brand { font: 500 34px/1.15 var(--ll-heading); letter-spacing: -.03em; }
.ll-account .top .brand small { font-size: 10px; letter-spacing: .2em; }
.ll-account h1 { font-size: 44px; margin: 26px 0 8px; }
.ll-account .card { padding: clamp(22px,4vw,34px); margin: 20px 0; }
.ll-account .card h2 { font-size: 28px; margin-bottom: 24px; }
.ll-account .grid { row-gap: 16px; }
.ll-account .url, .grant-candidate, .qr-scanner { border: 1px solid var(--ll-line); border-radius: var(--ll-radius); background: var(--ll-soft); padding: 16px; }
.ll-account .url { font-size: 14px; }
.ll-account .access-person,.ll-account .access-divider { border-color: var(--ll-line); }
.ll-account .access-name { color: var(--ll-navy); font-size: 17px; }
.ll-account .qr, .ll-account #identityQr { box-shadow: 0 0 0 1px var(--ll-line); }
.ll-account .grant-input { min-width: min(300px,100%); }
/* Collection home and category entrances. */
.ll-collection { padding: 32px clamp(18px,5vw,64px) 70px; }
.ll-collection .wrap { max-width: 1160px; }
.ll-collection header { text-align: left; margin-bottom: 40px; }
.ll-collection header .ll-nav { padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--ll-line); }
.ll-collection h1 { margin: 0 0 12px; }
.powered, #lovelightBranding { color: var(--ll-muted); font: 13px/1.6 var(--ll-body); }
.powered b, #lovelightBranding b { color: var(--ll-navy); font-weight: 650; }
.ll-collection .tagline { margin-top: 8px; font: italic 18px/1.5 var(--ll-heading); }
.ll-collection .collections { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 24px; }
.ll-collection .card { padding: 28px; min-height: 280px; position: relative; overflow: hidden; }
.ll-collection .card::after { content: 'Explore collection ↗'; display: block; margin-top: 24px; color: var(--ll-navy); font: 650 13px/1.5 var(--ll-body); }
.ll-collection .card:hover { border-color: var(--ll-gold); box-shadow: 0 14px 36px rgb(24 51 74 / 12%); transform: translateY(-2px); color: var(--ll-ink); }
.ll-collection .crate { display: grid; place-items: center; font: 64px/1 var(--ll-heading); width: 100px; height: 92px; color: var(--ll-navy); background: var(--ll-gold-soft); border-radius: 8px 28px 8px 8px; margin-bottom: 26px; }
.ll-collection .card h2 { font-size: 34px; margin: 0 0 8px; }
.ll-collection .card p { color: var(--ll-muted); font-size: 15px; margin: 0; }
.ll-collection .empty-stash { grid-column: 1/-1; width: 100%; padding: clamp(26px,6vw,70px); max-width: none; }
.ll-collection .empty-stash h2 { font-size: clamp(30px,4vw,42px); }
.ll-collection .empty-stash p { color: var(--ll-muted); max-width: 520px; margin: 16px auto 24px; }
.category-chooser, .start-choice { border-color: var(--ll-line); }
.category-options { gap: 10px; }
.category-option, .import-option { color: var(--ll-navy); background: var(--ll-paper); border-radius: var(--ll-radius); }
.start-action { justify-content: flex-start; display: block; text-align: left; padding: 22px; background: var(--ll-paper); }
.start-action span { color: var(--ll-muted); font-size: 14px; }
.start-action strong { font-size: 15px; }
.start-actions { max-width: 620px; }
/* Records retains the physical crate and flip-through interaction. */
.ll-records .app { max-width: 1240px; padding: 28px clamp(18px,3vw,40px) 60px; }
.ll-records header { display: block; }
.ll-records header .ll-nav { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--ll-line); }
.ll-records .brand h1 { font: 500 clamp(34px,4.5vw,56px)/1.1 var(--ll-heading); margin: 0 0 12px; }
#lovelightBranding { display: flex; flex-wrap: wrap; gap: 6px 18px; }
#lovelightTagline { font-style: italic; }
.ll-records .brand p { margin: 12px 0 18px; color: var(--ll-muted); }
.ll-records .top-actions { display: inline-flex; gap: 10px; margin: 0; }
.ll-records .controls { display: grid; grid-template-columns: minmax(140px,180px) minmax(220px,1fr); gap: 12px; margin-top: 20px; }
.ll-records .controls input, .ll-records .controls select { width: 100%; }
.vault-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.vault-btn { flex: 0 1 auto; min-width: 92px; }
.vault-btn.active { background: var(--ll-navy); color: var(--ll-white); border-color: var(--ll-navy); }
.meta { color: var(--ll-muted); font-size: 13px; margin: 16px 2px; gap: 12px; }
.stage { min-height: 555px; border: 1px solid #d4d6c9; border-radius: var(--ll-card-radius); background: radial-gradient(ellipse at 50% 20%,#fffefa,#ede9dc 78%); box-shadow: inset 0 1px 0 white; }
.ll-records .crate { height: 495px; }
.crate-back { background: linear-gradient(90deg,#97704b,#c9a578 35%,#b48960 70%,#8d6b4c); border: 1px solid #8d6b4c; }
.crate-front { background: linear-gradient(95deg,#b9956b,#dab88a 46%,#b18a5f); border: 1px solid #9c7954; border-radius: 5px; box-shadow: 0 16px 18px rgb(69 48 23 / 12%); }
.crate-label { background: var(--ll-paper); color: var(--ll-navy); border: 1px solid #b59767; border-radius: 5px; font: 700 13px/1.4 var(--ll-body); padding: 8px; text-align: center; }
.sleeve { background: var(--ll-paper); box-shadow: 0 8px 22px rgb(24 51 74 / 18%); border: 1px solid #ced3d0; }
.fallback { background: linear-gradient(145deg,#eff3ef,#dce6e6); color: var(--ll-navy); }
.fallback b { font: 500 30px/1.2 var(--ll-heading); }
.fallback span { color: var(--ll-muted); }
.status-badge { background: var(--ll-paper); color: var(--ll-ink); border: 1px solid var(--ll-line); font: 700 11px/1.4 var(--ll-body); letter-spacing: .04em; padding: 7px 11px; }
.status-in_vault { color: var(--ll-success); background: var(--ll-success-soft); border-color: #9dbdaa; }
.status-listening_queue { color: #79551b; background: #fbf0d3; border-color: #ceac62; }
.status-on_loan { color: #934131; background: #fff0e8; border-color: #d9ac94; }
.status-temporarily_moved { color: #305579; background: #edf3fa; border-color: #aac0d4; }
.status-sold_removed { color: #58616a; background: #eef0f1; }
.nav { max-width: 720px; width: 100%; gap: 12px; margin-top: 18px; }
.nav .info { border-color: var(--ll-navy); color: var(--ll-navy); }
.out-placeholder { background: #eff2ec; color: var(--ll-navy); border-color: #a1ada8; }
.out-placeholder span { color: var(--ll-muted); }
/* Detail and management components share the same paper surfaces. */
dialog { max-height: calc(100dvh - 32px); width: min(820px,calc(100vw - 32px)); color: var(--ll-ink); background: var(--ll-paper); border: 1px solid var(--ll-line); border-radius: var(--ll-card-radius); box-shadow: 0 28px 90px rgb(24 51 74 / 25%); padding: 0; }
dialog::backdrop { background: rgb(20 40 55 / 48%); backdrop-filter: blur(3px); }
.detail { padding: clamp(20px,4vw,34px); }
.detail-top { align-items: flex-start; }
.detail h2 { font-family: var(--ll-heading); font-size: 34px; }
.detail .artist { color: var(--ll-muted); font-size: 17px; }
.kicker, .id { color: #77571e; font: 700 12px/1.5 var(--ll-body); letter-spacing: .05em; }
.section,.grid,.admin-box,.event { border-color: var(--ll-line); }
.grid .k { color: var(--ll-muted); }
.notes { background: var(--ll-soft); border: 1px solid var(--ll-line); color: var(--ll-ink); }
.links { flex-wrap: wrap; }
.links a { color: var(--ll-navy); background: var(--ll-paper); border-color: #9aaab2; border-radius: var(--ll-radius); font-size: 14px; }
.links a:hover { background: var(--ll-soft); }
.admin-lock,.admin-panel,.discogs-tool,.upload-box,.manage-card,.photo-card { background: var(--ll-soft); color: var(--ll-ink); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); }
.admin-panel { padding: 20px; }
.admin-row { gap: 8px 16px; align-items: start; }
.admin-row label { padding-top: 11px; }
.admin-actions { flex-wrap: wrap; gap: 12px; }
.upload-box { border-style: dashed; }
.upload-progress { color: var(--ll-success); }
.photo-meta b { color: var(--ll-ink); }
.primary-photo { color: var(--ll-navy); background: var(--ll-paper); border-color: var(--ll-line); }
.photo-tools button { min-height: 40px; padding: 7px 10px; font-size: 12px; }
.search-results { background: var(--ll-paper); color: var(--ll-ink); }
.result { border-color: var(--ll-line); border-radius: 8px; }
.result:hover,.manage-card:hover { background: #e3ebe8; }
.diff-table .head,.diff-old { color: var(--ll-muted); }
.diff-new { color: var(--ll-success); }
.discogs-preview .warn { color: var(--ll-danger); }
.photo-viewer { background: rgb(18 34 46 / 94%); }
/* Books uses its own shelf metaphor with the same typography and controls. */
.ll-books header,.ll-book header { padding: 22px max(20px,calc((100vw - 1120px)/2)); background: var(--ll-paper); border-bottom: 1px solid var(--ll-line); flex-wrap: wrap; }
.ll-books header a,.ll-book header a { min-height: 44px; display: inline-flex; align-items: center; font: 650 13px/1.4 var(--ll-body); color: var(--ll-navy); }
.ll-books main { width: min(1040px,calc(100% - 40px)); margin: 42px auto; }
.ll-book main { width: min(800px,calc(100% - 40px)); margin: 42px auto; }
.ll-books .shelf { padding: 30px; margin-bottom: 24px; }
.ll-books .book { background: var(--ll-soft); color: var(--ll-ink); border-left: 5px solid var(--ll-gold); border-radius: 3px 12px 12px 3px; padding: 20px 24px; margin-bottom: 10px; }
.ll-books .book:hover { background: var(--ll-gold-soft); }
.ll-books .book strong { font: 500 24px/1.3 var(--ll-heading); }
.ll-books .book span { font: 14px/1.65 var(--ll-body); color: var(--ll-muted); }
.ll-book .card { padding: clamp(22px,4vw,40px); }
.ll-book dl { border-top: 1px solid var(--ll-line); padding-top: 24px; }
.ll-book dd { overflow-wrap: anywhere; }
@media(max-width:640px) {
  .ll-records .controls { grid-template-columns: 1fr; }
  .ll-nav { gap: 8px 16px; }
  .ll-records .app { padding-top: 18px; }
  .ll-records .stage { min-height: 465px; padding: 12px; }
  .ll-records .crate { width: 100%; height: 400px; }
  .ll-records .stack { width: min(280px,66vw); height: min(280px,66vw); bottom: 96px; }
  .crate-label { inset: 22px 20%; }
  .ll-records .crate-back { height: 260px; }
  .ll-records .crate-front { height: 115px; }
  .edit-grid,.upload-grid,.qr-row,.ll-book dl { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .admin-row label { padding: 0; }
  .grid { grid-template-columns: minmax(0,1fr); }
  .grid .k { margin-top: 8px; font-weight: 650; }
  .ll-account .grid { grid-template-columns: 1fr; gap: 6px; }
  .ll-account .value { margin-bottom: 12px; }
  .ll-account .access-person { align-items: flex-start; }
  .ll-account .access-buttons { justify-content: flex-start; }
  .ll-auth { padding: 24px 16px; }
  .ll-auth .panel,.ll-auth .card { padding: 24px; }
  .nav { grid-template-columns: 1fr 1fr; }
  .nav .info { grid-column: 1/-1; grid-row: 2; }
  .ll-collection .start-actions { grid-template-columns: 1fr; }
  .ll-books .shelf { padding: 22px; }
}

/* Records browsing controls: always visible in the primary viewport. */
.ll-records .stage {
  padding-bottom: 92px;
}

.ll-records .record-browse-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  width: min(760px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 1fr minmax(180px, 1.15fr) 1fr;
  gap: 10px;
  align-items: stretch;
}

.ll-records .record-browse-controls button {
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid rgb(18 35 58 / 18%);
  background: rgb(255 253 247 / 94%);
  color: var(--ll-navy);
  box-shadow: 0 10px 26px rgb(31 39 50 / 10%);
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.ll-records .record-browse-controls button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 13px 30px rgb(31 39 50 / 14%);
}

.ll-records .record-browse-controls button:disabled {
  opacity: .42;
  cursor: default;
}

.ll-records .browse-info {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background: linear-gradient(180deg, #f1dca7, #d8b665);
  border-color: rgb(143 107 37 / 35%);
  color: #14253d;
}

.ll-records .browse-info-kicker {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .68;
}

.ll-records .browse-info-label {
  font-family: var(--ll-heading);
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 720px) {
  .ll-records .stage {
    padding-bottom: 82px;
  }

  .ll-records .record-browse-controls {
    bottom: 12px;
    width: calc(100% - 20px);
    grid-template-columns: .9fr 1.2fr .9fr;
    gap: 7px;
  }

  .ll-records .record-browse-controls button {
    min-height: 52px;
    border-radius: 13px;
    padding: 8px;
    font-size: 13px;
  }

  .ll-records .browse-info-label {
    font-size: 18px;
  }

  .ll-records .browse-prev span,
  .ll-records .browse-next span {
    display: none;
  }
}

/* ==========================================================
   RECORDS SCENE — viewport composition foundation
   The environment is the experience; controls live within it.
   ========================================================== */

.ll-records .app {
  max-width: none;
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  padding: 14px clamp(18px, 4vw, 72px) 20px;
}

/* Compact the utility/header area so the physical collection
   remains the dominant thing in the initial viewport. */
.ll-records header {
  gap: 10px 24px;
  margin-bottom: 8px;
}

.ll-records header .brand h1 {
  font-size: clamp(38px, 4.3vw, 66px);
  line-height: .92;
  margin: 4px 0 5px;
}

.ll-records #lovelightBranding {
  margin-top: 4px;
}

.ll-records #collectionSubtitle {
  margin: 7px 0 0;
}

.ll-records .top-actions {
  margin-top: 10px;
  gap: 8px;
}

.ll-records .controls {
  align-self: end;
  margin-bottom: 2px;
}

.ll-records .controls select,
.ll-records .controls input {
  min-height: 46px;
}

.ll-records .vault-strip {
  margin: 8px 0 6px;
  gap: 7px;
}

.ll-records .vault-strip button {
  min-height: 42px;
  padding: 8px 13px;
}

.ll-records .meta {
  margin: 4px 2px 7px;
}

/* The scene itself. This is deliberately viewport-aware.
   At normal desktop/laptop heights the whole browsing interaction
   remains visible without page scrolling. */
.ll-records .stage {
  min-height: 0;
  height: auto;
  container-type: size;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  isolation: isolate;

  /* temporary environmental foundation; realistic scene assets
     will build on this instead of another generic card */
  background:
    radial-gradient(ellipse at 50% 30%,
      rgb(255 250 234 / 92%) 0%,
      rgb(231 218 190 / 72%) 48%,
      rgb(185 153 111 / 38%) 100%),
    linear-gradient(180deg,#eee4cf,#d7c19d);
  border: 1px solid rgb(96 70 40 / 22%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 0 -50px 90px rgb(77 46 21 / 10%);
}

/* A tabletop/floor plane begins to give the scene depth. */
.ll-records .stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 32%;
  background:
    linear-gradient(90deg,
      rgb(94 57 31 / 10%),
      rgb(255 255 255 / 8%) 32%,
      rgb(77 43 24 / 9%) 68%),
    linear-gradient(180deg,#b98d5e,#8f6039);
  border-top: 1px solid rgb(87 52 28 / 24%);
  box-shadow: inset 0 16px 28px rgb(65 39 22 / 10%);
}

/* Recompose the crate to live INSIDE the scene instead of
   consuming another 500+ vertical pixels. */
.ll-records .crate {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  width: min(650px, 62vw);
  height: calc(100% - 24px);
  max-height: 475px;
}

.ll-records .stack {
  width: min(300px, 31vw, calc((100cqh - 160px) / 1.5));
  height: min(300px, 31vw, calc((100cqh - 160px) / 1.5));
  min-width: 120px;
  min-height: 120px;
  bottom: 88px;
}

.ll-records .crate-back {
  left: 8%;
  right: 8%;
  bottom: 70px;
  height: 68%;
}

.ll-records .crate-front {
  left: 3%;
  right: 3%;
  bottom: 12px;
  height: 112px;
}

.ll-records .crate-label {
  inset: 23px 32%;
}

/* Navigation belongs to the physical browsing scene. */
.ll-records .record-browse-controls {
  bottom: 12px;
  width: min(650px, 62vw);
  grid-template-columns: 1fr minmax(165px,1.12fr) 1fr;
  gap: 9px;
}

.ll-records .record-browse-controls button {
  min-height: 46px;
  border-radius: 13px;
}

.ll-records .browse-info-label {
  font-size: 19px;
}

/* Status belongs with the object, not floating at page level. */
.ll-records .status-badge {
  top: 12px;
  right: 16px;
  z-index: 60;
}

@media (max-height: 820px) and (min-width: 721px) {
  .ll-records header .brand h1 {
    font-size: 40px;
  }

  .ll-records #lovelightBranding {
    display: none;
  }

  .ll-records .top-actions {
    margin-top: 6px;
  }

  .ll-records .vault-strip button {
    min-height: 38px;
  }

  .ll-records .stage {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .ll-records .app {
    padding: 10px 10px 12px;
    height: 100svh;
    display: grid;
  }

  .ll-records header .brand h1 {
    font-size: 32px;
  }

  .ll-records .stage {
    height: auto;
    min-height: 290px;
  }

  .ll-records .crate {
    width: 96%;
    height: calc(100% - 18px);
    bottom: 58px;
  }

  .ll-records .stack {
    width: min(270px,68vw,calc((100cqh - 145px) / 1.5));
    height: min(270px,68vw,calc((100cqh - 145px) / 1.5));
    min-width: 0;
    min-height: 0;
    bottom: 84px;
  }

  .ll-records .crate-front {
    height: 104px;
  }

  .ll-records .record-browse-controls {
    width: calc(100% - 14px);
    bottom: 8px;
  }
}

/* Compact utility space without making essential actions smaller. */
.ll-records header .ll-nav { padding-bottom: 6px; margin-bottom: 8px; }
.ll-records .controls { margin-top: 8px; }
.ll-records .brand #collectionSubtitle { margin: 4px 0 8px; }
.ll-records .browse-info:disabled { opacity: .55; cursor: not-allowed; }
@media (max-height: 599px) {
  .ll-records .app { height: auto; display: block; }
  .ll-records .stage { height: 400px; }
}

/* Architectural study: the crate sits in a sunlit record room, not a UI card.
   Decorative surroundings never represent selectable collection categories. */
.ll-records .stage { border-radius: 4px; background: linear-gradient(105deg,#fffdf2,#e9e3d2 62%,#d3cab8); }
.record-room { position:absolute; inset:0; pointer-events:none; z-index:0; }
.room-window { position:absolute; left:4%; top:8%; width:17%; height:49%;
  border:9px solid #f8f6e9; outline:1px solid #bfb9a8;
  background:linear-gradient(180deg,#d6e6e6,#f7f9e9 72%);
  box-shadow:inset 8px 6px 15px #53626830, 14px 12px 24px #72674925;
  transform:perspective(900px) rotateY(12deg); }
.room-window::before { content:"";position:absolute;left:48%;height:100%;width:5px;background:#f8f6e9; }
.room-window::after { content:"";position:absolute;top:48%;width:100%;height:5px;background:#f8f6e9; }
.room-shelves { position:absolute;right:3%;top:13%;width:18%;height:51%;
  border:10px solid #aa8157;background:#806443;box-shadow:inset 7px 7px 18px #3b281e55,10px 14px 18px #46362535;
  transform:perspective(900px) rotateY(-12deg); display:grid;grid-template-rows:1fr 1fr; }
.room-shelves>div { margin:12px 7px 0;border-bottom:9px solid #b28a60;
 background:repeating-linear-gradient(90deg,#263e4d 0 5px,#e5d7ac 5px 10px,#83553d 10px 13px,#ded9c5 13px 17px,#415550 17px 25px,#b99859 25px 29px);
 box-shadow:0 8px 10px #31271f45; }
.room-skirting { position:absolute;bottom:32%;left:0;right:0;height:12px;
 background:linear-gradient(#f8f3e5,#c7b99e);box-shadow:0 4px 6px #5c453030; }
.ll-records .stage::before { background:repeating-linear-gradient(96deg,transparent 0 95px,#51382022 96px 98px),linear-gradient(180deg,#c39a6d,#926744); }
.ll-records .crate-front { background:repeating-linear-gradient(2deg,#ffffff05 0 3px,#63482708 4px 5px),linear-gradient(95deg,#b48b58,#d2ae76 44%,#a87d4f);
 box-shadow:inset 0 4px 2px #f5dca680,inset 5px 0 4px #73512a35,0 18px 22px #3d2c2740; }
@media(max-width:900px) { .room-window {left:2%;width:20%;} .room-shelves {right:2%;width:20%;} }
@media(max-width:720px) { .room-shelves {display:none;} .room-window {width:25%;height:40%;opacity:.75;} }

@media (max-width:720px) {
 .ll-records #lovelightBranding { display:none; }
 .ll-records .controls { grid-template-columns:100px minmax(0,1fr); gap:8px; }
 .ll-records .controls input,.ll-records .controls select { padding:10px 8px; }
 .ll-records .vault-strip { flex-wrap:nowrap; overflow-x:auto; }
 .ll-records .vault-strip button { flex-shrink:0; }
 .ll-records .record-browse-controls { grid-template-columns:1fr 1.3fr 1fr; }
}

/* Physical jacket motion is driven by the browsing action, never a layout swap. */
.ll-records .crate { perspective: 1100px; }
.ll-records .stack { touch-action: pan-y; user-select:none; }
.ll-records .flip-jacket { position:absolute;inset:auto;pointer-events:none;
 transform-origin:50% 88%;transition:none;border-right:3px solid #d8d2c3;
 box-shadow:3px 12px 22px #211c194d;backface-visibility:hidden;will-change:transform; }
.ll-records .sleeve.current { border-right:3px solid #e0dacd; }

/* Get Info: a readable overview, with tools opened only when needed. */
.ll-records .record-disclosure{border-top:1px solid var(--ll-line, #d5cab7);padding:16px 0}
.ll-records .record-disclosure > summary{cursor:pointer;font-weight:700;line-height:1.5;padding:4px 0;color:var(--ll-navy, #24364b)}
.ll-records .record-disclosure > summary:focus-visible{outline:2px solid #94743d;outline-offset:5px;border-radius:3px}
.ll-records .record-disclosure[open] > summary{margin-bottom:16px}
.ll-records #details .section[hidden]{display:none}
.ll-records #details .copyline{overflow-wrap:anywhere}

/* Controls are anchored to the sleeve inside the crate, never the stage footer. */
.ll-records .crate{--jacket-size:min(300px,31vw,calc((100cqh - 160px)/1.5));--jacket-bottom:96px}
.ll-records .stack{width:var(--jacket-size);height:var(--jacket-size);bottom:var(--jacket-bottom);touch-action:none;cursor:grab}
.ll-records .stack:active{cursor:grabbing}
.ll-records .crate .record-browse-controls{position:absolute;left:0;right:0;top:auto;bottom:var(--jacket-bottom);width:100%;height:var(--jacket-size);transform:none;display:block;pointer-events:none;z-index:45}
.ll-records .crate .record-browse-controls button{position:absolute;pointer-events:auto;min-width:0;min-height:44px;margin:0;backdrop-filter:none}
.ll-records .crate .record-browse-controls .browse-prev,.ll-records .crate .record-browse-controls .browse-next{top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:52px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff9;filter:drop-shadow(0 1px 2px #182128);font-size:34px}
.ll-records .crate .record-browse-controls .browse-prev{left:max(0px,calc(50% - var(--jacket-size)/2 - 48px))}
.ll-records .crate .record-browse-controls .browse-next{right:max(0px,calc(50% - var(--jacket-size)/2 - 48px))}
.ll-records .crate .record-browse-controls .browse-prev span,.ll-records .crate .record-browse-controls .browse-next span{display:none}
.ll-records .crate .record-browse-controls .browse-info{left:calc(50% + var(--jacket-size)/2 - 42px);top:8px;bottom:auto;transform:none;width:56px;height:56px;padding:0;border:1px solid #eee6;border-radius:50%;background:repeating-radial-gradient(circle at center,#181e24b3 0 3px,#62666c80 4px,#181e24b3 5px);box-shadow:0 3px 9px #0003;color:#fff}
.ll-records .crate .record-browse-controls .browse-info::before{content:"";position:absolute;inset:16px;border-radius:50%;background:#c6a560b3}
.ll-records .crate .record-browse-controls .browse-info-label{position:relative;font-size:10px;letter-spacing:0;text-shadow:0 1px 2px #000;font-family:var(--ll-body);line-height:1}
.ll-records .crate .record-browse-controls .browse-info-kicker{display:none}
.ll-records .crate .record-browse-controls button:hover:not(:disabled){opacity:1;filter:brightness(1.2)}
@media(max-width:720px){.ll-records .crate{--jacket-size:min(270px,68vw,calc((100cqh - 145px)/1.5));--jacket-bottom:84px}}

/* Compact record information with persistent navigation. */
.ll-records #details{width:min(760px,calc(100vw - 24px));max-height:85svh}
.ll-records #details>.detail{padding:22px}
.ll-records .record-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #d5cab7;position:sticky;top:-22px;background:#fffdf6;z-index:5;padding:10px 0}
.ll-records .record-tabs button{flex:1;min-height:44px;border:0;background:transparent;padding:8px 12px;color:#24364b;border-radius:8px;font-weight:600}
.ll-records .record-tabs button[aria-selected=true]{background:#24364b;color:#fff7e3}
.ll-records .record-tab-panel{padding-top:12px;max-height:48svh;overflow:auto;overscroll-behavior:contain}
.ll-records .record-tab-panel[hidden],.ll-records .record-tabs button[hidden]{display:none}
.ll-records #recordEditor>summary,.ll-records #recordCare>summary,.ll-records #recordEnrichment>summary{display:none}
@media(max-width:720px){.ll-records #details>.detail{padding:16px}.ll-records .record-tabs{top:-16px}.ll-records .record-tabs button{padding:8px}.ll-records .record-tab-panel{max-height:52svh}}
.ll-records #details,.ll-records #details *{box-sizing:border-box}
.ll-records #details .detail-top{display:flex;gap:12px;align-items:flex-start}
.ll-records #details .detail-top>div{min-width:0;flex:1}
.ll-records #details .detail-top h2{overflow-wrap:anywhere;font-size:clamp(24px,5vw,36px)}
.ll-records #closeDetails{flex-shrink:0}
.ll-records #details .record-tabs{width:100%;min-width:0;flex-wrap:wrap;overflow:visible}
.ll-records #details .record-tabs button{flex:1 0 auto;font-size:13px;padding:8px 9px}
.ll-records #details .record-tabs button[aria-selected="false"]{background:transparent;color:#24364b}
.ll-records #details .record-tabs button[aria-selected="true"]{background:#24364b;color:#fff7e3}
/* Keep the title, Close button and tabs visible while a panel scrolls. */
.ll-records #details{overflow:hidden}
.ll-records #details>.detail{display:flex;flex-direction:column;max-height:85svh;min-height:0}
.ll-records #details .detail-top,.ll-records #details .record-tabs{flex-shrink:0}
.ll-records #details .record-tab-panel{flex:1 1 auto;min-height:0;max-height:48svh;overflow:auto}
.ll-records #details .record-tab-panel>.grid{margin-top:0}

/* Stable, faint controls; hover never changes their placement. */
.ll-records .crate .record-browse-controls .browse-prev,
.ll-records .crate .record-browse-controls .browse-next{color:rgb(255 255 255 / 40%);display:grid;place-items:center;filter:drop-shadow(0 1px 1px #17202966);transition:color .15s}
.ll-records .crate .record-browse-controls .browse-prev:hover:not(:disabled),
.ll-records .crate .record-browse-controls .browse-next:hover:not(:disabled){transform:translateY(-50%);background:transparent;box-shadow:none;color:rgb(255 255 255 / 60%);filter:drop-shadow(0 1px 1px #17202966)}
.ll-records .crate .record-browse-controls .browse-info{width:48px;height:48px;opacity:.65;background:repeating-radial-gradient(circle,#242b30 0 4px,#52595c 5px,#242b30 6px);border:1px solid #ffffff50;display:grid;place-items:center}
.ll-records .crate .record-browse-controls .browse-info::before{inset:14px;background:#dfd4b7}
.ll-records .crate .record-browse-controls .browse-info-label{font:italic bold 16px Georgia,serif;color:#24364b;text-shadow:none}
.ll-records .crate .record-browse-controls .browse-info:hover:not(:disabled){transform:none;opacity:.8;background:repeating-radial-gradient(circle,#242b30 0 4px,#52595c 5px,#242b30 6px);filter:none}

/* A record's information is its jacket reverse. */
.ll-records .crate .record-browse-controls .browse-info{opacity:.12;transition:opacity .18s}
.ll-records .crate .record-browse-controls .browse-info:hover:not(:disabled),
.ll-records .crate .record-browse-controls .browse-info:focus-visible{opacity:.85}
@media(hover:none){.ll-records .crate .record-browse-controls .browse-info{opacity:.25}}
.ll-records #details{border-radius:3px;border:1px solid #c5bba4;background:repeating-linear-gradient(0deg,#ffffff09 0 2px,#78634305 3px 4px),#eee8d8;box-shadow:inset 0 0 0 6px #faf6e880,2px 3px 0 #b7ad98,0 24px 70px #171a2459}
.ll-records #details>.detail{background:transparent;padding:28px}
.ll-records #details .detail-top{border-bottom:2px solid #33403b;padding-bottom:16px}
.ll-records #details .kicker{font-family:monospace;letter-spacing:.12em}
.ll-records #details .record-tabs{background:transparent}
.ll-records #details .record-tabs button{border-radius:2px}
.ll-records #details .notes{background:#ffffff25;border-radius:2px}
.ll-records #closeDetails{font-size:12px;padding:9px 12px;background:transparent}
@media(max-width:720px){.ll-records #details>.detail{padding:18px}.ll-records #closeDetails{max-width:92px}}

/* Liner-note proportions: label and value share a row, including on phones. */
.ll-records #details #dGrid{display:grid;grid-template-columns:minmax(80px,.8fr) minmax(0,1.5fr);gap:10px 16px;font-size:14px;line-height:1.45;margin:0;padding:8px 0 16px}
.ll-records #details #dGrid>div{min-width:0;overflow-wrap:anywhere;padding:0}
.ll-records #details #dGrid .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#656452}
.ll-records #details .detail-top h2{font-size:clamp(23px,4vw,34px);line-height:1.12;margin:8px 0}
.ll-records #details .detail-top .artist{font-size:15px;line-height:1.35}
.ll-records #details .kicker{font-size:10px;letter-spacing:.05em}
.ll-records #details .record-tab-panel{max-height:48svh}
.ll-records #details .links{gap:8px;flex-wrap:wrap}
.ll-records #details .links a{padding:7px 10px;font-size:12px}

/* Book information is presented as an inside back page, with a cloth cover. */
.ll-book main{width:min(580px,calc(100% - 36px))}
.ll-book .book-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:100%;min-height:min(640px,74svh);padding:40px 30px;border:1px solid #182e30;border-left:14px solid #1e3435;border-radius:3px 8px 8px 3px;background:repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 3px),#30494a;color:#e7d5a7;box-shadow:inset 3px 0 8px #0004,5px 4px 0 #e9e1ce,8px 7px 0 #a89d84,0 18px 40px #182e3026;text-align:center}
.ll-book .book-cover:hover:not(:disabled){background-color:#385354;color:#f3e5c3;transform:none}
.ll-book .book-cover-title{font:clamp(28px,5vw,44px)/1.2 var(--ll-heading);overflow-wrap:anywhere}
.ll-book .book-cover-author{font:18px/1.5 var(--ll-heading)}
.ll-book .book-cover-id,.ll-book .book-cover-cue{font:11px/1.5 var(--ll-body);letter-spacing:.12em;text-transform:uppercase}
.ll-book .book-cover-cue{margin-top:28px;opacity:.75}
.ll-book .book-endpaper{background:linear-gradient(90deg,#b9aa8b55,transparent 8%),repeating-linear-gradient(0deg,#fff1 0 2px,transparent 2px 4px),#f2ead6;border:1px solid #c5b797;border-left:10px solid #30494a;border-radius:2px;box-shadow:4px 3px 0 #d8cdb6,0 16px 32px #172b2926}
.ll-book .endpaper-label{font:italic 14px var(--ll-heading);margin-top:24px;color:#73694f}
.ll-book #backToBookCover{background:transparent;border:0;padding:4px 0;font-size:12px}
.ll-book .book-endpaper h1{font-size:clamp(26px,5vw,38px);overflow-wrap:anywhere}
.ll-book .book-endpaper dl{grid-template-columns:90px minmax(0,1fr);gap:12px;font-size:14px}

/* Compact sections on the book's inside back page. */
.ll-book .book-tabs{display:flex;gap:4px;border-block:1px solid #baad8c;padding:7px 0;margin-top:20px}
.ll-book .book-tabs button{flex:1;min-width:0;min-height:44px;padding:8px 5px;border:0;border-radius:2px;background:transparent;color:#30494a;font-size:13px}
.ll-book .book-tabs button[aria-selected=true]{background:#30494a;color:#f2ead6}
.ll-book .book-panel{max-height:42svh;overflow:auto;padding-top:10px}
.ll-book .book-panel dl{border:0;margin:0;padding:8px 0}
.ll-book .book-notes{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6}

.ll-books .books-search-label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}
.ll-books #bookSearch{width:100%;max-width:580px;min-height:46px}
.ll-books #bookSearchStatus{font-size:13px;color:var(--ll-muted);min-height:20px;margin:12px 0 24px}

.ll-book #bookEditForm{display:grid;gap:8px}.ll-book #bookEditForm label{font-size:12px;font-weight:650}.ll-book #bookEditForm input,.ll-book #bookEditForm textarea{width:100%;min-width:0}.ll-book #bookEditForm textarea{min-height:100px}.ll-book .book-tabs{flex-wrap:wrap}

/* Village Vanguard-inspired stage study. Foreground remains interactive HTML. */
.ll-records .stage{background:#261b16 url('/vanguard-stage-v3.png') center 65% / cover no-repeat;border:1px solid #39291e;border-radius:3px}
.ll-records .stage::before,.ll-records .stage::after,.ll-records .record-room{display:none}
.ll-records .crate{bottom:20px;width:min(440px,90%);height:calc(100% - 20px);--jacket-size:min(280px,54vw,calc((100cqh - 100px)/1.25));--jacket-bottom:76px}
.ll-records .crate-back{left:calc(50% - var(--jacket-size)/2 - 15px);right:calc(50% - var(--jacket-size)/2 - 15px);height:calc(var(--jacket-size)*.55);bottom:65px;background:linear-gradient(90deg,#503724,#8e6239 50%,#493120);border-color:#472f20}
.ll-records .crate-front{left:calc(50% - var(--jacket-size)/2 - 24px);right:calc(50% - var(--jacket-size)/2 - 24px);height:94px;bottom:8px;background:repeating-linear-gradient(2deg,#ffffff03 0 2px,#21150c18 3px 5px),linear-gradient(95deg,#674423,#a07442 48%,#614021);border-color:#4d341f;box-shadow:inset 0 3px 1px #d4a66b66,0 17px 24px #0009}
.ll-records .crate-label{inset:27px 25%;font-size:11px;letter-spacing:.14em;background:#ded0aa;color:#302a20;box-shadow:1px 2px 4px #0005}
.ll-records .sleeve.current{box-shadow:4px 7px 14px #0008}
/* The front board must cover the lower edge of the jacket in every crate view. */
.ll-records .crate{isolation:isolate}
.ll-records .stack{z-index:2}
.ll-records .crate-front{z-index:90;pointer-events:none}
.ll-records .crate .record-browse-controls{z-index:95}
@media(max-width:720px){.ll-records .stage{background-position:center 65%}.ll-records .crate{bottom:14px;--jacket-size:min(250px,54vw,calc((100cqh - 100px)/1.25));--jacket-bottom:76px}}