/* ══════════════════════════════════════════════════
   Variables
═════════════════════════════════════════════════   */
:root {
  --bg:         #f7f3ed;
  --bg2:        #f0ebe1;
  --bg3:        #e8e1d4;
  --surface:    #ffffff;
  --border:     #ddd7cc;
  --border2:    #ccc5b8;
  --ink:        #1e1a14;
  --ink2:       #3d3629;
  --muted:      #8c8070;
  --accent:     #7a2e0e;
  --accent-h:   #9e3c12;
  --gold:       #a8791e;
  --leido:      #1e5c3a;
  --leido-bg:   #e8f5ee;
  --r:          8px;
  --r-lg:       14px;
  --shadow-sm:  0 1px 6px rgba(30,26,20,.08);
  --shadow:     0 3px 16px rgba(30,26,20,.12);
  --shadow-lg:  0 8px 40px rgba(30,26,20,.2);
  --header-h:   56px;
  --sidebar-w:  214px;
  --bottom-h:   62px;
  --shelf-board: #c2a87f;
}

/* ══════════════════════════════════════════════════
   Reset
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  min-height: 100dvh;
}
input, select, button, textarea { font-family: inherit; }
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════
   Config banner
══════════════════════════════════════════════════ */
.config-banner {
  background: var(--accent); color: #fff;
  text-align: center; padding: 10px 20px; font-size: .85rem;
}

/* ══════════════════════════════════════════════════
   Header
══════════════════════════════════════════════════ */
.header {
  height: var(--header-h);
  background: var(--ink);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(30,26,20,.3);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 16px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.logo {
  font-family: 'Nunito', sans-serif;
  font-size: 1.4rem; font-weight: 300; color: var(--bg);
  display: flex; align-items: center; gap: 7px;
  letter-spacing: .04em; white-space: nowrap;
}
.logo em { color: #c8a55a; font-style: italic; }
.logo svg { color: #c8a55a; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 8px; }
.stats-header {
  font-size: .75rem; color: rgba(255,255,255,.45);
  display: flex; gap: 12px; margin-right: 4px;
}
.stats-header strong { color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════════
   Buttons
══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r);
  cursor: pointer; font-size: .85rem; font-weight: 400;
  border: none; transition: all .18s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--accent-h); }
.btn-scan {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-scan:hover { background: rgba(255,255,255,.2); }
.btn-import {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-import:hover { background: rgba(255,255,255,.2); }
.btn-outline {
  background: transparent; color: var(--ink2); border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: transparent; color: #b33; border: 1px solid #d9999944; }
.btn-danger:hover { background: #fff5f5; border-color: #d99; }
.btn-sm { padding: 6px 12px; font-size: .8rem; }