:root{
/* Header layout overrides */
/* Desktop defaults restored */
.app-header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(6px);z-index:1200}
.app-header h1{font-size:18px;margin:0}
.controls{display:flex;gap:8px;align-items:center}

/* Mobile: condense header */
@media (max-width: 680px){
  .app-header{ grid-template-columns: 1fr auto; grid-template-areas: 
    'brand auth' 
    'search search' 
    'isbn isbn';
    align-items:center; gap:8px; padding:8px 10px; }
  .app-header .brand{ grid-area: brand; }
  .app-header .auth-btn{ grid-area: auth; }
  .app-header .controls{ grid-column: 1 / -1; gap:6px; }
  .app-header .controls .row-search{ grid-area: search; }
  .app-header .controls .row-isbn{ grid-area: isbn; }
  .quick-toggles{ display:none; }
  .app-header h1{ font-size:16px; }
  .controls input[type=search]{ min-width: 0; width: 100%; }
  .isbn-inline input{ width: 100%; }
}

/* Menu additions for toggles */
.menu .menu-list hr{ border:none; border-top:1px solid var(--border); margin:6px 0; }
.menu .menu-list button[role=menuitemcheckbox]{ justify-content:space-between; }



  /* Core palette */
  --bg:#0b0f14; --fg:#e6eef8; --muted:#9fb3c8; --accent:#4fa3ff; --card:#121824; --border:#223044; --danger:#ff5d5d; --ok:#1fce72;
  /* UI surfaces */
  --input-bg:#0e141f; --button-bg:#0e141f; --button-hover:#111a2a; --toast-bg:#142033; --image-bg:#0a121f;
  --overlay: rgba(4,10,20,.45); --panel-bg: linear-gradient(180deg,rgba(18,28,48,.95),rgba(10,16,30,.95));
  --header-bg: rgba(11,15,20,.9);
}

/* Light theme (cream with brown accents) */
:root[data-theme="light"]{
  --bg:#faf3e8; --fg:#2f2925; --muted:#8a6f52; --accent:#8b5e3c; --card:#fff9f0; --border:#e6d8c7; --danger:#c5393e; --ok:#2e7d32;
  --input-bg:#fff7ea; --button-bg:#fff2de; --button-hover:#ffe8c7; --toast-bg:#fff5e6; --image-bg:#f0e3d2;
  --overlay: rgba(47,41,37,.35);
  --panel-bg: linear-gradient(180deg,rgba(255,252,246,.96),rgba(252,245,232,.96));
  --header-bg: rgba(250,243,232,.9);
}

/* Earthy theme (sage green with green accents) */
:root[data-theme="earthy"]{
  /* Lighter, greener sage theme */
  --bg:#A9C3A0; --fg:#203126; --muted:#5f7f69; --accent:#5FAE7A; --card:#DCE7D8; --border:#8FB28B; --danger:#ba3a3a; --ok:#2f8f57;
  --input-bg:#E9F2E6; --button-bg:#E4EEDD; --button-hover:#D7E6D1; --toast-bg:#EEF6EA; --image-bg:#E4EFDF;
  --overlay: rgba(32,49,38,.24);
  --panel-bg: linear-gradient(180deg,rgba(248,252,247,.96),rgba(236,246,237,.96));
  --header-bg: rgba(169,195,160,.90);
}

/* Pastel theme (pink with rainbow pastel accents) */
:root[data-theme="pastel"]{
  --bg:#fce7f1; --fg:#3a2a32; --muted:#8c6b7a; --accent:#ff8ac5; --card:#fff0f6; --border:#f3cfe0; --danger:#e2557a; --ok:#6cc8a7;
  --input-bg:#ffeaf4; --button-bg:#ffeaf4; --button-hover:#ffddee; --toast-bg:#fff1f7; --image-bg:#f6dfe9;
  --overlay: rgba(58,42,50,.20);
  --panel-bg: linear-gradient(180deg,rgba(255,248,252,.96),rgba(254,240,247,.96));
  --header-bg: rgba(252,231,241,.9);
}
/* Pastel accent variants for buttons/inputs */
:root[data-theme="pastel"][data-pastel="purple"]{
  --accent:#d9a7ff; --button-bg:#f3e6ff; --button-hover:#ead6ff; --input-bg:#f7efff;
}
:root[data-theme="pastel"][data-pastel="yellow"]{
  --accent:#ffd27e; --button-bg:#fff3d9; --button-hover:#ffe8bf; --input-bg:#fff7e6;
}
:root[data-theme="pastel"][data-pastel="green"]{
  --accent:#a7f0c1; --button-bg:#e9fff4; --button-hover:#dcffef; --input-bg:#f2fff8;
}
:root[data-theme="pastel"][data-pastel="blue"]{
  --accent:#9ed7ff; --button-bg:#e6f4ff; --button-hover:#d9eeff; --input-bg:#eef7ff;
}
:root[data-theme="pastel"][data-pastel="orange"]{
  --accent:#ffb38a; --button-bg:#ffe9df; --button-hover:#ffdccc; --input-bg:#fff0e8;
}

*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.app-header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(6px);z-index:1200}
.app-header h1{font-size:18px;margin:0}
.controls{display:flex;gap:8px;align-items:center}
.controls input[type=search]{min-width:260px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--fg)}
button{padding:12px 14px;min-height:44px;min-width:44px;border:1px solid var(--border);border-radius:10px;background:var(--button-bg);color:var(--fg);cursor:pointer}
.app-header button#toggle-handsfree, .app-header button#toggle-voice{ font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; padding:0; }
button[aria-pressed=true]{background:var(--accent);color:#00122a}
button:focus{outline:2px solid var(--accent);outline-offset:2px}
button:hover{background:var(--button-hover)}
main{padding:16px}
#toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{background:var(--toast-bg);border:1px solid var(--border);color:var(--fg);padding:10px 12px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.toast.ok{border-color:var(--ok)}.toast.error{border-color:var(--danger)}
button.accent{border-color:var(--accent);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));}
button.accent:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent) 45%, transparent))}
button.danger{border-color:var(--danger);color:var(--danger);background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 30%, transparent), color-mix(in srgb, var(--danger) 15%, transparent))}
button.danger:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 40%, transparent), color-mix(in srgb, var(--danger) 25%, transparent))}

/* Settings panel */
#settings-panel{position:fixed;inset:0;z-index:1500}
#settings-panel[hidden]{display:none}
.settings-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(10px) saturate(120%);display:flex;align-items:center;justify-content:center;padding:12px}
.settings-panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);width:min(94vw,1035px);max-width:1035px;max-height:96vh;/* no internal scroll */overflow:hidden;padding:18px}

.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:8px}
.settings-header h2{margin:0;font-size:18px}
.settings-header .muted{color:var(--muted);font-size:13px}
.settings-body{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:12px;overflow:auto;max-height:calc(96vh - 120px)}
.settings-section{border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;background:color-mix(in srgb, var(--card) 80%, transparent)}
.settings-section h3{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.settings-row label{color:var(--fg);font-size:14px}
.settings-row select,.settings-row input[type=range]{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--fg)}
.settings-row input[type=checkbox]{width:20px;height:20px}
.settings-section.appearance{padding:10px 12px}.settings-section.appearance .settings-row{margin:6px 0}.settings-section.appearance select{max-width:280px}

.settings-section.handsfree .settings-row label{max-width:46%}

.range-wrap{display:flex;align-items:center;gap:10px;width:100%}
.settings-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
/* Bottom-right fixed inside the modal */
.settings-panel{ position: relative; padding-bottom: 56px; }
.settings-actions{ position: absolute; right: 14px; bottom: 10px; margin-top: 0; background: transparent; padding-top: 0; }
button.icon.close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:color-mix(in srgb, var(--card) 60%, transparent);color:var(--muted)}
button.icon.close:hover{background:color-mix(in srgb, var(--card) 80%, transparent);color:var(--fg)}
@media (max-width:980px){.settings-body{grid-template-columns:1fr}}

/* Header hamburger menu */
@media (min-width: 681px){ .app-header .controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } }

.menu{ position:relative; }
.menu > button.menu-toggle{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer; }
.menu > .menu-list{ position:absolute; right:0; top:calc(100% + 6px); background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.15); min-width:160px; padding:6px; display:none; z-index:1300; }
.menu.open > .menu-list{ display:block; }
.menu-list button{ width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px; border:none; background:transparent; color:var(--fg); border-radius:8px; cursor:pointer; }
.menu-list button:hover{ background:color-mix(in srgb, var(--card) 85%, transparent); }

/* Pager styles */
.pager{ position: fixed; right: 16px; bottom: 16px; display:flex; gap:16px; z-index:1400; pointer-events:none; }
.pager .pager-btn{ width:96px; height:96px; min-width:96px; min-height:96px; border-radius:20px; font-size:42px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.15); opacity:.35; transition: opacity .15s ease, transform .1s ease; pointer-events:auto; background:var(--card); color:var(--fg); border:1px solid var(--border); }
.pager .pager-btn:hover, .pager .pager-btn:not(:disabled).hf-hover{ opacity:1; transform: translateY(-1px); }
.pager .pager-btn:disabled{ opacity:.18; cursor:not-allowed; }
@media (max-width: 680px){ .pager .pager-btn{ width:84px; height:84px; min-width:84px; min-height:84px; font-size:36px; } }

/* Layout to avoid vertical scrolling: let content area be viewport height minus header, and paginate shelves */
html, body { height: 100%; overflow: hidden; }
main{ height: calc(100vh - 64px); overflow: hidden; display:block; }
#shelves{ height: 100%; overflow: hidden; }

/* Restore scrolling on mobile */
@media (max-width: 680px){
  html, body { height: auto; overflow: auto; }
  main { height: auto; overflow: auto; }
  #shelves { height: auto; overflow: visible; }
}

  /* Maintain fixed header height hint for layout calc */
  .app-header{ min-height:64px; }

/* Raise z-index on hover/focus to ensure pager sits above grid for motion cursor */
.pager .pager-btn:hover, .pager .pager-btn:focus, .pager .pager-btn:not(:disabled).hf-hover{ z-index: 2300; }
/* Sort dropdown */
#sort-select{ padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--fg); }
#sort-select:focus{ outline:2px solid var(--accent); outline-offset:2px; }

/* Search wrap styles */
.search-wrap{ position: relative; display:flex; align-items:center; gap:6px; }
.search-wrap input[type=search]{ min-width:260px; padding-right:30px; }
.search-wrap button.icon.small{ width:28px; height:28px; min-width:28px; min-height:28px; padding:0; border-radius:8px; border:1px solid var(--border); background:var(--button-bg); color:var(--muted); }
.search-wrap button.icon.small:hover{ color:var(--fg); background:var(--button-hover); }
.results-count{ margin-left:6px; color:var(--muted); font-size:12px; }
/* ISBN input (header) */
.isbn-inline input{ width:180px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--fg); }


/* Voice HUD (bottom-left) */
.voice-hud{ position:fixed; left:16px; bottom:16px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb, var(--card) 85%, transparent); color:var(--fg); z-index:3000; max-width:60vw; font-size:12px; line-height:1.35; opacity:.98; backdrop-filter:saturate(1.3) blur(4px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.voice-hud .hud-status{ white-space:pre-wrap; }
.voice-hud .hud-isbn{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.voice-hud .hud-isbn input{ flex:1; min-width:160px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--fg); }
.voice-hud .hud-isbn button.mini{ font-size:12px; padding:6px 8px; border-radius:8px; background:var(--button-bg); color:var(--fg); border:1px solid var(--border); }
.voice-hud .hud-isbn button.mini:hover{ background:var(--button-hover); }

/* Pastel theme multi-color overlay for buttons and inputs */
:root[data-theme="pastel"] button,
:root[data-theme="pastel"] .search-wrap input[type=search],
:root[data-theme="pastel"] .isbn-inline input,
:root[data-theme="pastel"] .settings-row select,
:root[data-theme="pastel"] .inline-overlay .dialog input,
:root[data-theme="pastel"] input[type=text],
:root[data-theme="pastel"] input[type=search],
:root[data-theme="pastel"] select,
:root[data-theme="pastel"] textarea{
  background:
    linear-gradient(135deg,
      rgba(217,167,255,.23) 0%,
      rgba(255,210,126,.21) 20%,
      rgba(167,240,193,.21) 40%,
      rgba(158,215,255,.21) 60%,
      rgba(255,179,138,.21) 80%),
    var(--button-bg);
}
:root[data-theme="pastel"] button:hover{
  background:
    linear-gradient(135deg,
      rgba(217,167,255,.32) 0%,
      rgba(255,210,126,.28) 20%,
      rgba(167,240,193,.28) 40%,
      rgba(158,215,255,.28) 60%,
      rgba(255,179,138,.28) 80%),
    var(--button-hover);
}

/* Force-hide auth overlay when signed in or explicitly hidden */
#auth-overlay[hidden],
#auth-overlay.gone {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* When signed out, hide main app content and pager to prevent interaction */
body.signed-out main{ display:none !important; }
body.signed-out #pager{ display:none !important; }

/* Inline info badges next to header buttons */
#toggle-handsfree{ margin-right:2px; }
#toggle-voice{ margin-right:2px; }
.info-badge{
  position:relative;
  width:22px; height:22px; min-width:22px; min-height:22px;
  padding:0;
  margin-left:2px;
  border-radius:50%;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--muted);
  font-weight:700; font-size:11px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:help;
}
.info-badge:hover, .info-badge:focus{ color:var(--fg); background:color-mix(in srgb, var(--card) 85%, transparent); }
.info-badge .info-card{ position:absolute; top:calc(100% + 8px); right:0; width:max(280px, 32ch); max-width:min(360px, 80vw); padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 85%, transparent); color:var(--fg); box-shadow:0 10px 30px rgba(0,0,0,.15); display:none; text-align:left; z-index: 200; }
.info-badge .info-card strong{ display:block; margin-bottom:6px; color:var(--muted); }
.info-badge .info-card ul{ margin:0; padding-left:16px; display:grid; gap:4px; }
.info-badge:hover .info-card, .info-badge:focus .info-card{ display:block; }

/* Mobile header layout: compact and reflowed */
@media (max-width: 680px){
  .app-header{ display:grid; grid-template-columns: 1fr auto; grid-template-areas:
    'brand auth'
    'search search'
    'isbn isbn';
    gap:8px; padding:8px 10px; }
  .app-header .brand{ grid-area: brand; display:flex; align-items:center; gap:8px; }
  .app-header .auth-btn{ grid-area: auth; justify-self:end; }
  .app-header .controls{ grid-column: 1 / -1; display:grid; gap:6px; }
  .app-header .controls .row-search{ grid-area: search; display:flex; align-items:center; gap:8px; }
  .app-header .controls .row-isbn{ grid-area: isbn; display:flex; align-items:center; gap:8px; }
  .quick-toggles{ display:none; }
  .app-header h1{ font-size:16px; margin:0; }
  .controls input[type=search]{ min-width: 0; width: 100%; }
  .isbn-inline input{ width: 100%; }
}

/* Menu divider + checkbox style entries */
.menu .menu-list hr{ border:none; border-top:1px solid var(--border); margin:6px 0; }
.menu .menu-list button[role=menuitemcheckbox]{ justify-content:space-between; }

/* Mobile compact controls sizing */
@media (max-width: 680px){
  .app-header .controls{ gap:6px; }
  button{ min-height: 36px; padding: 8px 10px; }
  .menu > button.menu-toggle{ width:32px; height:32px; }
  .auth-btn{ min-height:36px; }
  #sort-select{ padding:6px 8px; }
  .search-wrap button.icon.small{ width:24px; height:24px; }
}

/* Mobile header polish: enforce single-line rows and compact sizing */
@media (max-width: 680px){
  .app-header{ padding:6px 8px; gap:6px; min-height:auto; }
  .app-header h1{ font-size:14px; line-height:1.1; margin:0; }
  .app-header .controls .row-search{ display:grid; grid-template-columns: 1fr auto; gap:6px; align-items:center; }
  .app-header .controls .row-isbn{ display:grid; grid-template-columns: 1fr auto; gap:6px; align-items:center; }
  .search-wrap{ width:100%; }
  .search-wrap .results-count{ display:none; }
  .isbn-inline{ display:grid !important; grid-template-columns: 1fr auto; gap:6px; align-items:center; }
  button{ min-height:32px; padding:6px 8px; border-radius:8px; }
  .menu > button.menu-toggle{ width:28px; height:28px; }
  #sort-select{ padding:6px 8px; font-size:12px; }
}

/* Mobile header: brand row and control row hardening */
@media (max-width: 680px){
  /* Brand row: keep title on one line with ellipsis */
  .app-header .brand{ display:grid; grid-template-columns: 28px 1fr; align-items:center; gap:8px; }
  .app-header .brand h1{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .menu > .menu-toggle{ width:28px; height:28px; }

  /* Search row: two columns, input can shrink */
  .app-header .controls .row-search{ display:grid; grid-template-columns: 1fr max-content; column-gap:6px; }
  .search-wrap{ min-width:0; }
  .search-wrap input[type=search]{ min-width:0; width:100%; }
  #sort-select{ width:auto; max-width:40vw; font-size:12px; }

  /* ISBN row: two columns, ISBN+Add grouped, Scan on the right */
  .app-header .controls .row-isbn{ display:grid; grid-template-columns: 1fr max-content; column-gap:6px; }
  .isbn-inline{ display:grid !important; grid-template-columns: 1fr max-content; column-gap:6px; }
  .isbn-inline input{ min-width:0; width:100%; }
  .isbn-inline button{ min-width:unset; padding:6px 10px; }
  #btn-scan{ padding:6px 10px; }
}

/* FINAL mobile header enforcement (high-specificity) */
@media (max-width: 680px){
  .app-header{ display:grid !important; grid-template-columns: 1fr auto !important; grid-template-areas:
    'brand auth'
    'search search'
    'isbn isbn' !important;
    gap:6px !important; padding:6px 8px !important; min-height:auto !important; }
  .app-header .brand{ grid-area: brand !important; display:grid !important; grid-template-columns: 28px 1fr !important; align-items:center !important; gap:8px !important; }
  .app-header .brand h1{ font-size:14px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; }
  .app-header .auth-btn{ grid-area: auth !important; justify-self:end !important; }
  .app-header .controls{ grid-column: 1 / -1 !important; display:grid !important; gap:6px !important; }
  .app-header .controls .row-search{ grid-area: search !important; display:grid !important; grid-template-columns: 1fr max-content !important; column-gap:6px !important; align-items:center !important; }
  .app-header .controls .row-isbn{ grid-area: isbn !important; display:grid !important; grid-template-columns: 1fr max-content !important; column-gap:6px !important; align-items:center !important; }
  .quick-toggles, #toggle-handsfree, #toggle-voice, #info-handsfree, #info-voice{ display:none !important; }
  .search-wrap{ width:100% !important; min-width:0 !important; }
  .search-wrap input[type=search]{ min-width:0 !important; width:100% !important; }
  #sort-select{ width:auto !important; max-width:40vw !important; padding:6px 8px !important; font-size:12px !important; }
  .isbn-inline{ display:grid !important; grid-template-columns: 1fr max-content !important; column-gap:6px !important; align-items:center !important; }
  .isbn-inline input{ min-width:0 !important; width:100% !important; }
  .isbn-inline button, #btn-scan{ min-width:unset !important; padding:6px 10px !important; }
}

/* Mobile-only top bar compaction without touching desktop */
@media (max-width: 680px){
  /* Condense header height and gaps */
  .app-header{ padding:6px 8px; gap:6px; }
  .app-header h1{ font-size:14px; margin:0; }

  /* Put Search + Sort on one row */
  .app-header .controls{ display:grid; grid-template-columns: 1fr auto; grid-auto-rows:min-content; gap:6px; align-items:center; }
  .app-header .controls .search-wrap{ grid-column: 1 / 2; min-width:0; }
  .app-header .controls #sort-select{ grid-column: 2 / 3; width:auto; max-width:40vw; padding:6px 8px; }

  /* Replace full Add button with compact + icon on mobile */
  #btn-add{ display:none; }
  #btn-add-mobile{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 8px; border-radius:8px; }

  /* Put ISBN+Add(+) + Scan on one row below */
  .app-header .controls .isbn-inline{ grid-column: 1 / 2; display:grid !important; grid-template-columns: 1fr auto; gap:6px; }
  #btn-scan{ grid-column: 2 / 3; padding:6px 8px; height:32px; }

  /* Hide info badges to save space; toggles can be accessed via hamburger */
  #info-handsfree, #info-voice{ display:none; }

  /* Smaller elements */
  button{ min-height:32px; padding:6px 8px; }
  .search-wrap .icon.small{ width:24px; height:24px; }
}

/* Mobile header: final condensed layout without touching desktop */
@media (max-width: 680px){
  .app-header{ position:sticky; top:0; padding:6px 8px; }
  /* Small hamburger top-left */
  .menu#hamburger{ position:absolute; left:8px; top:6px; }
  .menu#hamburger > .menu-toggle{ width:28px; height:28px; }
  /* Small sign out top-right */
  #btn-login{ position:absolute; right:8px; top:6px; min-height:28px; padding:4px 8px; font-size:12px; }
  /* Title centered and single-line */
  .app-header h1{ font-size:14px; margin:0 48px; line-height:1.1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Compact two-row controls */
  .app-header .controls{ display:grid; grid-template-columns: 1fr auto; grid-auto-rows:min-content; gap:6px; align-items:center; margin-top:4px; }
  /* Row 1: Search (flex) + Sort (auto) */
  .app-header .controls .row-search{ display:grid; grid-template-columns: 1fr auto; gap:6px; align-items:center; grid-column: 1 / -1; }
  .app-header .controls .row-search .search-wrap{ min-width:0; }
  .app-header .controls .row-search #sort-select{ width:auto; max-width:40vw; padding:6px 8px; }
  /* Row 2: ISBN+Add (flex) + Scan (auto) */
  .app-header .controls .row-isbn{ display:grid; grid-template-columns: 1fr auto; gap:6px; align-items:center; grid-column: 1 / -1; }
  .app-header .controls .row-isbn .isbn-inline{ display:grid !important; grid-template-columns: 1fr auto; gap:6px; }
  #btn-scan{ padding:6px 8px; min-height:32px; }

  /* Keep full Add button; hide experimental mobile + icon */
  #btn-add{ display:inline-flex !important; min-height:32px; padding:6px 10px; }
  #btn-add-mobile{ display:none !important; }

  /* Hide verbose badges and quick toggles on mobile to save space */
  #info-handsfree, #info-voice, #toggle-handsfree, #toggle-voice{ display:none !important; }
}

/* Mobile tweak: align Sort with Search and enlarge title */
@media (max-width: 680px){
  /* Bigger title on mobile per request */
  .app-header h1{ font-size:18px !important; }
  /* Ensure search input and sort are the same height and vertically centered */
  .app-header .controls .row-search{ align-items:center !important; }
  .app-header .controls .row-search input[type=search]{ height:36px; padding:6px 10px; }
  .app-header .controls .row-search #sort-select{
    height:36px; padding:0 10px; vertical-align:middle; margin-top:2px; /* slight nudge to match baseline */
  }
}

/* Mobile fine-tune: nudge title and filter further down */
@media (max-width: 680px){
  .app-header h1{ margin-top: 6px !important; }
  .app-header .controls .row-search #sort-select{ margin-top: 6px !important; transform: translateY(2px); }
}

/* Mobile: make Sort match Search height and drop slightly */
@media (max-width: 680px){
  .app-header .controls .row-search{ align-items:center !important; }
  .app-header .controls .row-search input[type=search]{ height:40px !important; padding:8px 10px !important; box-sizing:border-box; }
  .app-header .controls .row-search #sort-select{
    height:40px !important; line-height:40px !important; padding:0 12px !important; box-sizing:border-box;
    margin-top:0 !important; align-self:center !important; transform: translateY(4px);
  }
}

/* Mobile: drop Sort even further per request */
@media (max-width: 680px){
  .app-header .controls .row-search #sort-select{
    margin-top: 12px !important;
    transform: translateY(10px) !important;
  }
}

/* Mobile: force grid placement and align Search + Sort on same row (direct selector) */
@media (max-width: 680px){
  .app-header .controls{ display:grid; grid-template-columns: 1fr auto; grid-auto-flow: row; grid-auto-rows:min-content; gap:6px; align-items:center; }
  .app-header .controls .search-wrap{ grid-column:1; grid-row:1; min-width:0; }
  .app-header .controls #sort-select{
    grid-column:2; grid-row:1;
    height:40px !important; line-height:40px !important; padding:0 12px !important;
    margin-top: 0 !important; transform: none !important;
    align-self:center !important;
  }
  .app-header .controls .isbn-inline{ grid-column:1; grid-row:2; display:grid !important; grid-template-columns: 1fr auto; gap:6px; }
  .app-header .controls #btn-scan{ grid-column:2; grid-row:2; }
}

/* Mobile: adjust Sort drop and reduce Search width to avoid overlap */
@media (max-width: 680px){
  /* Reduce over-drop and align with search */
  .app-header .controls .row-search #sort-select{
    height:36px !important;
    margin-top: 6px !important;
    transform: none !important;
    align-self: center !important;
    padding: 0 10px !important;
  }
  /* Keep search slightly narrower so rows don't collide */
  .app-header .controls .row-search .search-wrap{ min-width:0 !important; }
  .app-header .controls .row-search .search-wrap input[type=search]{
    height:36px !important;
    max-width: 65vw !important;
  }
  /* Add a bit more row gap so Sort never clips into ISBN/Scan row */
  .app-header .controls{ row-gap: 10px !important; }
}

/* Mobile: lower Search input to match vertical rhythm */
@media (max-width: 680px){
  .app-header .controls .row-search .search-wrap input[type=search]{
    margin-top: 12px !important;
  }
}

/* Mobile: hard-align Search and Sort on the same baseline (final override) */
@media (max-width: 680px){
  .app-header .controls .row-search{ display:grid !important; grid-template-columns: 1fr auto !important; align-items:center !important; column-gap:6px !important; }
  .app-header .controls .row-search #search-input{
    height:40px !important; margin-top:0 !important; padding:8px 10px !important; box-sizing:border-box !important;
  }
  .app-header .controls .row-search #sort-select{
    height:40px !important; margin-top:0 !important; transform:none !important; padding:0 12px !important; box-sizing:border-box !important; align-self:center !important;
  }
}

/* Mobile: make hamburger dropdown open to the right of the button (not to the left) */
@media (max-width: 680px){
  .menu#hamburger > .menu-list{
    left: 0 !important;
    right: auto !important;
    max-width: 80vw;
  }
}

/* Hide experimental mobile "+" add button by default (desktop and mobile) */
#btn-add-mobile{ display:none !important; }

/* Settings: let sections size to content; avoid forced equal heights */
.settings-body{ align-items: start; }
.settings-section{ height: auto; }
.settings-section.appearance{ grid-column: 1; }
.settings-section.handsfree{ grid-column: 2; }
.settings-section.voice{ grid-column: 2; }

/* Ensure actions are visible without internal scroll and closer to content */
.settings-actions{ position: static; margin-top: 8px; }