/* ════════════════════════════════════════════════════════════════════════════
   La Cave — Styles
   No editing needed.
   ════════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { 
  font-family: 'DM Sans', system-ui, sans-serif; 
  background: #0f0c09; 
  color: #f0e6d0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

:root {
  --bg:   #0f0c09; --bg2: #15110d; --bg3: #1d1710; --bg4: #241c12;
  --surf: rgba(255,255,255,0.04); --surf2: rgba(255,255,255,0.07);
  --bdr:  rgba(255,255,255,0.09); --bdr2: rgba(255,255,255,0.16);
  --txt:  #f0e6d0;
  --txt2: rgba(240,230,208,0.62);
  --txt3: rgba(240,230,208,0.32);
  --red:  #8b1a2e; --red2: #b02238;
  --gold: #c9a84c; --gold2: rgba(201,168,76,0.14);
  --green: #3d7a52; --amber: #b8760a;
  --r: 10px; --rl: 16px; --rx: 22px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.1); border-radius: 3px; }

.hidden { display: none !important; }

/* Skip-to-content link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg);
  color: var(--txt);
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--bdr);
  border-radius: 0 0 var(--r) 0;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--gold); }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
#auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 25% 45%, rgba(139,26,46,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(201,168,76,0.07) 0%, transparent 100%);
  animation: fadeIn 0.6s var(--transition-smooth);
}
.auth-card {
  width: 100%; max-width: 380px; margin: 20px;
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: var(--rx); padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.5s var(--transition-smooth);
  backdrop-filter: blur(10px);
}
.auth-logo       { text-align: center; margin-bottom: 32px; }
.auth-logo-icon  {
  width: 44px; height: 44px; background: var(--red); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(139,26,46,0.4);
  animation: iconPulse 2s ease-in-out infinite;
}
.auth-logo-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-name       { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: 0.5px; }
.auth-sub        { font-size: 12px; color: var(--txt3); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 3px; }
.auth-title      { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 6px; text-align: center; }
.auth-desc       { font-size: 12.5px; color: var(--txt2); text-align: center; margin-bottom: 26px; line-height: 1.6; }
.fgrp            { margin-bottom: 16px; }
.flabel          { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--txt3); display: block; margin-bottom: 6px; font-weight: 500; }
.finput {
  width: 100%; background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 11px 14px;
  color: var(--txt); font-size: 14px; font-family: var(--sans); outline: none;
  transition: border-color 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
}
.finput:focus        { border-color: rgba(201,168,76,0.45); box-shadow: 0 0 0 3px rgba(201,168,76,0.08); }
.finput.pw-input     { padding-right: 42px; }
.pw-wrap             { position: relative; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--txt3); padding: 3px;
  display: flex; align-items: center;
}
.pw-toggle:hover     { color: var(--txt2); }
.pw-toggle svg       { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.remember-row        { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.remember-row input  { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
.remember-row label  { font-size: 12.5px; color: var(--txt2); cursor: pointer; }
.auth-err            { font-size: 12px; color: #e05555; text-align: center; margin-bottom: 14px; min-height: 18px; line-height: 1.6; }
.btn-full            { width: 100%; }
.auth-footer         { margin-top: 20px; text-align: center; font-size: 12px; color: var(--txt3); line-height: 1.7; }
.auth-footer strong  { color: var(--txt2); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--surf);
  color: var(--txt2); font-family: var(--sans);
  transition: all 0.2s var(--transition-smooth);
  white-space: nowrap; line-height: 1;
  position: relative;
  overflow: hidden;
}
.btn svg         { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.2s var(--transition-smooth); }
.btn:hover       { background: var(--surf2); color: var(--txt); border-color: var(--bdr2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:hover svg   { transform: scale(1.1); }
.btn:active      { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-prim        { background: var(--red); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(139,26,46,0.3); }
.btn-prim:hover  { background: var(--red2); color: #fff; box-shadow: 0 6px 16px rgba(139,26,46,0.4); }
.btn-prim:active { box-shadow: 0 2px 8px rgba(139,26,46,0.3); }
.btn-ghost       { background: transparent; border-color: transparent; color: var(--txt2); }
.btn-ghost:hover { background: var(--surf); color: var(--txt); border-color: var(--bdr); box-shadow: none; }
.btn-danger      { color: #e05555; border-color: rgba(224,85,85,0.25); }
.btn-danger:hover{ background: rgba(224,85,85,0.1); color: #ff6b6b; }
.btn-sm          { padding: 5px 11px; font-size: 11.5px; }
.btn-icon        { padding: 7px; aspect-ratio: 1; }

/* ── App layout ───────────────────────────────────────────────────────────── */
#app             { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar         { width: 210px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--bdr); display: flex; flex-direction: column; overflow: hidden; }
.sb-logo         { padding: 20px 18px 16px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.sb-logo-row     { display: flex; align-items: center; gap: 11px; }
.sb-logo-icon    { width: 32px; height: 32px; background: var(--red); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-logo-icon svg{ width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-logo-text    { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1; }
.sb-logo-sub     { font-size: 9.5px; color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 2px; }
.sb-nav          { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ni {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  cursor: pointer; color: var(--txt2); font-size: 13px;
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--sans); font-weight: 400;
  transition: background 0.12s, color 0.12s;
}
.ni svg          { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ni:hover        { background: var(--surf); color: var(--txt); }
.ni.act          { background: var(--gold2); color: var(--gold); font-weight: 500; }
.ni.act svg      { stroke: var(--gold); }
.sb-footer       { padding: 14px 12px; border-top: 1px solid var(--bdr); flex-shrink: 0; }
.sb-stat-label   { font-size: 9.5px; color: var(--txt3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.sb-stat-val     { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; }
.sb-stat-unit    { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.sb-logout {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12px; color: var(--txt3); cursor: pointer;
  background: none; border: none; font-family: var(--sans); padding: 4px 0;
  transition: color 0.12s;
}
.sb-logout:hover { color: var(--txt2); }
.sb-logout svg   { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Sync status indicator ────────────────────────────────────────────────── */
.sync-row        { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.sync-dot        { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s; }
.sync-dot.synced { background: var(--green); }
.sync-dot.syncing{ background: var(--gold); animation: pulse 1s infinite; }
.sync-dot.error  { background: #e05555; }
.sync-dot.local  { background: var(--txt3); }
.sync-dot.offline{ background: #e05555; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }
.sync-label      { font-size: 11px; color: var(--txt3); flex: 1; }

/* ── Main area ────────────────────────────────────────────────────────────── */
#main            { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#header {
  padding: 16px 26px 14px; border-bottom: 1px solid var(--bdr);
  background: var(--bg2); display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0; gap: 12px;
}
.hd-left         { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hd-title        { font-family: var(--serif); font-size: 22px; font-weight: 400; white-space: nowrap; }
.hd-sub          { font-size: 11.5px; color: var(--txt2); white-space: nowrap; }
.hd-sep          { width: 1px; height: 18px; background: var(--bdr2); flex-shrink: 0; }
.back-btn {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--txt2); cursor: pointer; background: none; border: none;
  font-family: var(--sans); padding: 0; white-space: nowrap;
}
.back-btn:hover  { color: var(--txt); }
.back-btn svg    { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-actions      { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#content         { flex: 1; overflow-y: auto; padding: 22px 26px; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.sg              { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.sc              { background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--rl); padding: 16px 18px; }
.sc-label        { font-size: 9.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--txt3); margin-bottom: 8px; font-weight: 500; }
.sc-val          { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; }
.sc-unit         { font-size: 11px; color: var(--txt2); margin-top: 3px; }

/* ── Section title ────────────────────────────────────────────────────────── */
.sect-t {
  font-family: var(--serif); font-size: 17px; font-weight: 400;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: space-between;
}

/* ── Cellar toolbar ───────────────────────────────────────────────────────── */
.toolbar         { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-wrap     { position: relative; flex: 1; min-width: 180px; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--txt3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-inp {
  width: 100%; background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 8px 12px 8px 34px;
  font-size: 13px; color: var(--txt); font-family: var(--sans); outline: none;
}
.search-inp:focus       { border-color: rgba(201,168,76,0.4); }
.search-inp::placeholder{ color: var(--txt3); }
select.slt {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r);
  padding: 8px 12px; font-size: 12.5px; color: var(--txt2); font-family: var(--sans); outline: none; cursor: pointer;
}
select.slt:focus { color: var(--txt); }
option           { background: #1d1710; }
.pills           { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pill {
  padding: 4px 13px; border-radius: 20px; font-size: 11.5px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--bdr); background: transparent;
  color: var(--txt2); transition: all 0.12s; display: flex; align-items: center; gap: 5px; font-family: var(--sans);
}
.pill:hover      { border-color: var(--bdr2); color: var(--txt); }
.pill.act        { background: var(--gold2); color: var(--gold); border-color: rgba(201,168,76,0.3); }
.dot             { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* ── Wine grid ────────────────────────────────────────────────────────────── */
.wg              { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 13px; }
.wc {
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--rl);
  padding: 18px; cursor: pointer; 
  transition: all 0.3s var(--transition-smooth); 
  position: relative;
  overflow: hidden;
}
.wc::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--shimmer);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.wc:hover        { 
  border-color: var(--gold); 
  transform: translateY(-4px) scale(1.02); 
  box-shadow: 0 8px 24px rgba(201,168,76,0.15), 0 0 0 1px rgba(201,168,76,0.1);
}
.wc:hover::before { opacity: 1; animation: shimmer 1.5s infinite; }
.wc:active       { transform: translateY(-2px) scale(1.01); }
.wc-header       { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.wc-type         { display: flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--txt3); }
.wc-status       { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
.st-ready        { background: rgba(61,122,82,0.2); color: #5aaf7a; }
.st-aging        { background: rgba(255,255,255,0.07); color: var(--txt3); }
.st-peak         { background: rgba(184,118,10,0.2); color: #d4960e; }
.st-none         { display: none; }
.wc-name         { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.25; margin-bottom: 3px; transition: color 0.2s; }
.wc:hover .wc-name { color: var(--gold); }
.wc-prod         { font-size: 11.5px; color: var(--txt2); margin-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-foot         { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--bdr); }
.wc-vintage      { font-family: var(--serif); font-size: 21px; font-weight: 300; color: var(--gold); opacity: 0.85; transition: opacity 0.2s; }
.wc:hover .wc-vintage { opacity: 1; text-shadow: 0 0 12px rgba(201,168,76,0.3); }
.wc-right        { display: flex; align-items: center; gap: 6px; }
.qty-pill        { min-width: 0; font-size: 11px; color: var(--txt2); background: var(--surf2); padding: 3px 9px; border-radius: 20px; border: 1px solid transparent; box-shadow: 0 0 0 1px var(--bdr); white-space: nowrap; overflow: hidden; max-width: 80px; transition: max-width 0.3s var(--transition-smooth), opacity 0.25s var(--transition-smooth), padding 0.3s var(--transition-smooth); }
.wc:hover .qty-pill { max-width: 0; opacity: 0; padding: 0; }
.wc-stars        { font-size: 10px; letter-spacing: 1px; }
.wc-consume {
  max-width: 0; width: 28px; min-width: 0; overflow: hidden;
  height: 28px; flex-shrink: 0;
  border-radius: 8px; background: var(--surf2); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; white-space: nowrap;
  transition: max-width 0.3s var(--transition-smooth), opacity 0.25s var(--transition-smooth), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  color: var(--txt2); font-family: var(--sans); font-size: 14px; font-weight: 400;
}
.wc:hover .wc-consume   { max-width: 28px; opacity: 1; }
.wc-consume:hover       { background: var(--red); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(139,26,46,0.4); }

/* ── Wine list ────────────────────────────────────────────────────────────── */
.wl              { display: flex; flex-direction: column; gap: 2px; }
.wl-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  transition: background 0.12s, border-color 0.12s; background: var(--bg3);
}
.wl-row:hover    { border-color: var(--bdr); background: var(--bg4); }
.wl-name         { font-family: var(--serif); font-size: 16px; font-weight: 400; flex: 1; min-width: 120px; }
.wl-prod         { font-size: 12px; color: var(--txt2); width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.wl-region       { font-size: 12px; color: var(--txt3); width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.wl-vintage      { font-family: var(--serif); font-size: 16px; color: var(--gold); opacity: 0.8; width: 50px; text-align: right; flex-shrink: 0; }
.wl-qty          { font-size: 11.5px; color: var(--txt2); width: 50px; text-align: right; flex-shrink: 0; }
.wl-stars        { font-size: 10px; width: 50px; text-align: right; flex-shrink: 0; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty           { text-align: center; padding: 70px 30px; color: var(--txt3); }
.empty-icon      { width: 42px; height: 42px; margin: 0 auto 16px; opacity: 0.3; }
.empty-icon svg  { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-t         { font-family: var(--serif); font-size: 22px; color: var(--txt2); margin-bottom: 6px; }
.empty-s         { font-size: 12.5px; line-height: 1.7; }

/* ── Wine detail ──────────────────────────────────────────────────────────── */
.det-wrap        { max-width: 680px; }
.det-badge       { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 20px; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.det-name        { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1.15; margin-bottom: 5px; }
.det-prod        { font-size: 14px; color: var(--txt2); margin-bottom: 24px; }
.det-facts       { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--bdr); border-radius: var(--r); overflow: hidden; margin-bottom: 18px; }
.df              { background: var(--bg3); padding: 14px 10px; text-align: center; }
.df-label        { font-size: 9.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--txt3); margin-bottom: 5px; }
.df-val          { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.2; }
.det-loc         { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); font-size: 12.5px; color: var(--txt2); margin-bottom: 14px; }
.det-loc svg     { width: 13px; height: 13px; stroke: var(--txt3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.det-tags        { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tag             { font-size: 11px; padding: 3px 11px; border-radius: 20px; background: var(--surf); border: 1px solid var(--bdr); color: var(--txt2); }
.det-notes       { font-family: var(--serif); font-size: 15px; color: var(--txt2); line-height: 1.75; padding: 16px 18px; background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); font-style: italic; margin-bottom: 20px; }
.det-stars       { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.det-stars-label { font-size: 11px; color: var(--txt3); text-transform: uppercase; letter-spacing: 1.5px; }
.det-qty-row     { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.qty-label       { font-size: 11px; color: var(--txt3); text-transform: uppercase; letter-spacing: 1.5px; }
.qty-ctl         { display: flex; align-items: center; background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; }
.qb              { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--txt2); font-size: 17px; font-family: var(--sans); }
.qb:hover        { background: var(--surf2); color: var(--txt); }
.qb:disabled     { opacity: 0.3; cursor: not-allowed; }
.qv              { min-width: 40px; text-align: center; font-size: 14px; font-weight: 500; border-left: 1px solid var(--bdr); border-right: 1px solid var(--bdr); height: 34px; display: flex; align-items: center; justify-content: center; }
.det-actions     { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 4px; }

/* ── Add/Edit form ────────────────────────────────────────────────────────── */
.form-wrap       { max-width: 640px; }
.form-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fg-full         { grid-column: 1 / -1; }
.form-group      { display: flex; flex-direction: column; gap: 6px; }
.form-input, .form-textarea {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r);
  padding: 10px 13px; color: var(--txt); font-size: 13.5px; font-family: var(--sans);
  outline: none; transition: border-color 0.15s; width: 100%;
}
.form-input:focus, .form-textarea:focus { border-color: rgba(201,168,76,0.45); }
.form-input::placeholder                { color: var(--txt3); }
.form-textarea   { resize: vertical; min-height: 80px; line-height: 1.6; }
.color-picker    { display: flex; gap: 8px; flex-wrap: wrap; }
.cp {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
  font-size: 11.5px; cursor: pointer; font-weight: 500; border: 1px solid var(--bdr);
  background: transparent; color: var(--txt2); font-family: var(--sans); transition: all 0.12s;
}
.cp:hover        { border-color: var(--bdr2); color: var(--txt); }
.cp.sel          { border-color: var(--bdr2); background: var(--surf2); color: var(--txt); font-weight: 600; }
.star-rating-input { display: flex; gap: 4px; align-items: center; }
.sri             { background: none; border: none; cursor: pointer; font-size: 22px; padding: 2px; color: var(--txt3); transition: color 0.1s; line-height: 1; }
.sri.on          { color: var(--gold); }
.sri:hover       { color: var(--gold); }
.sri-label       { font-size: 11.5px; color: var(--txt3); margin-left: 6px; }
.form-actions    { margin-top: 22px; display: flex; gap: 9px; justify-content: flex-end; }

/* ── Statistics ───────────────────────────────────────────────────────────── */
.stats-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-card      { background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--rl); padding: 20px; }
.chart-title     { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--txt3); margin-bottom: 16px; font-weight: 500; }
.bar-row         { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-label       { font-size: 12px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label-w     { width: 90px; flex-shrink: 0; }
.bar-track       { flex: 1; height: 6px; background: var(--surf2); border-radius: 3px; overflow: hidden; }
.bar-fill        { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.bar-count       { font-size: 11.5px; color: var(--txt3); width: 28px; text-align: right; flex-shrink: 0; }
.val-highlight   { background: var(--bg4); border: 1px solid var(--bdr); border-radius: var(--r); padding: 16px 18px; text-align: center; }
.val-n           { font-family: var(--serif); font-size: 32px; font-weight: 300; }
.val-u           { font-size: 11px; color: var(--txt2); margin-top: 3px; }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.dash-two        { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.recent-row      { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--bdr); cursor: pointer; }
.recent-row:last-child { border-bottom: none; }
.recent-row:hover .rr-name { color: var(--gold); opacity: 0.9; }
.rr-name         { font-family: var(--serif); font-size: 15px; font-weight: 400; transition: color 0.12s; }
.rr-sub          { font-size: 11px; color: var(--txt2); margin-top: 1px; }
.rr-right        { display: flex; align-items: center; gap: 9px; }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.settings-wrap           { max-width: 560px; }
.settings-section        { background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--rl); margin-bottom: 18px; overflow: hidden; }
.settings-section-title  { padding: 14px 18px; border-bottom: 1px solid var(--bdr); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--txt3); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.settings-row            { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bdr); gap: 16px; }
.settings-row:last-child { border-bottom: none; }
.settings-row-label      { font-size: 13.5px; font-weight: 500; }
.settings-row-sub        { font-size: 12px; color: var(--txt2); margin-top: 2px; line-height: 1.5; }
.settings-row-left       { flex: 1; min-width: 0; }
.pw-form                 { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--bdr); }
.note                    { font-size: 12px; color: var(--txt2); line-height: 1.75; padding: 14px 18px; }
.note code, .settings-row-sub code { font-family: monospace; font-size: 11px; background: var(--surf2); padding: 2px 6px; border-radius: 4px; color: var(--txt); }
.note strong             { color: var(--txt); }
.info-box                { font-size: 12px; color: var(--txt2); line-height: 1.75; padding: 14px 18px; border-bottom: 1px solid var(--bdr); }
.info-box code           { font-family: monospace; font-size: 11px; background: var(--surf2); padding: 2px 6px; border-radius: 4px; color: var(--txt); }
.info-box strong         { color: var(--txt); }
.step-grid               { display: grid; grid-template-columns: 20px 1fr; gap: 6px 10px; align-items: start; }
.step-n                  { color: var(--gold); font-weight: 600; font-size: 13px; margin-top: 1px; }

/* ── Toast notifications ──────────────────────────────────────────────────── */
.toast-wrap      { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; }
.toast           { background: var(--bg4); border: 1px solid var(--bdr2); color: var(--txt); padding: 11px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 500; animation: toastIn 0.2s ease; display: flex; align-items: center; gap: 8px; }
.toast-ok::before   { content: '✓'; color: #5aaf7a; font-size: 13px; }
.toast-err::before  { content: '!'; color: #e05555; font-size: 13px; }
.toast-sync::before { content: '↑'; color: var(--gold); font-size: 13px; }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes toastOut { from { opacity:1 } to { opacity:0; transform:translateY(8px) } }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #sidebar           { display: none; }
  #mob-nav           { display: flex !important; }
  body               { padding-bottom: 68px; }
  #app               { height: calc(100vh - 68px); }
  .sg                { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .sc                { padding: 14px 16px; }
  .sc-val            { font-size: 28px; }
  .dash-two          { grid-template-columns: 1fr; gap: 16px; }
  .stats-grid        { grid-template-columns: 1fr; gap: 16px; }
  .form-grid         { grid-template-columns: 1fr; }
  .fg-full           { grid-column: 1; }
  .det-facts         { grid-template-columns: repeat(2,1fr); }
  #content           { padding: 16px; }
  #header            { padding: 12px 16px 10px; }
  .hd-title          { font-size: 20px; }
  .wl-prod, .wl-region, .wl-stars { display: none; }
  .wg                { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; }
  .wc                { padding: 14px; }
  .wc-name           { font-size: 16px; }
  .wc-vintage        { font-size: 18px; }
  .wc-consume        { max-width: 32px; width: 32px; height: 32px; font-size: 16px; opacity: 1; }
  .wc:hover .qty-pill { max-width: 80px; opacity: 1; padding: 3px 9px; }
  .auth-card         { padding: 32px 28px; margin: 16px; }
  .auth-logo-icon    { width: 52px; height: 52px; }
  .auth-logo-icon svg{ width: 26px; height: 26px; }
  .btn               { min-height: 44px; padding: 10px 16px; }
  .btn-icon          { min-width: 44px; min-height: 44px; padding: 10px; }
  .finput            { padding: 13px 16px; font-size: 16px; }
  .form-input, .form-textarea { padding: 13px 16px; font-size: 16px; }
  .search-inp        { padding: 10px 14px 10px 38px; font-size: 14px; }
  .toolbar           { gap: 8px; }
  select.slt         { padding: 10px 14px; }
  .pill              { padding: 6px 14px; font-size: 12px; min-height: 36px; }
  .det-name          { font-size: 28px; }
  .det-facts         { gap: 1px; }
  .df                { padding: 12px 8px; }
  .recent-row        { padding: 12px 0; }
  .chart-card        { padding: 16px; }
}
#mob-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg2); border-top: 1px solid var(--bdr);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom)); z-index: 50;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
}
.mob-ni {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; background: none; border: none; color: var(--txt3);
  font-size: 10px; font-family: var(--sans); padding: 6px;
  transition: all 0.25s var(--transition-smooth);
  position: relative;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.mob-ni svg  { 
  width: 22px; height: 22px; 
  stroke: currentColor; fill: none; stroke-width: 2; 
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s var(--transition-smooth);
}
.mob-ni.act  { color: var(--gold); }
.mob-ni.act svg { transform: scale(1.1); }
.mob-ni:active { transform: scale(0.95); }
.mob-ni::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
  transition: width 0.3s var(--transition-smooth);
}
.mob-ni.act::before { width: 40px; }

/* ── Scan button (centre of mob-nav) ─────────────────────────────────────── */
.mob-ni-scan { color: var(--txt2); }
.mob-ni-scan::before { display: none; } /* no top bar indicator */
.scan-btn-ring {
  width: 42px; height: 42px;
  background: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(201,168,76,0.35);
  transition: transform 0.2s var(--transition-smooth), box-shadow 0.2s;
  margin-top: -14px; /* lift above nav bar */
}
.mob-ni-scan:active .scan-btn-ring { transform: scale(0.9); box-shadow: 0 1px 6px rgba(201,168,76,0.2); }
.scan-btn-ring svg {
  width: 20px; height: 20px;
  stroke: #1a0a00; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── QR Scanner overlay ──────────────────────────────────────────────────── */
.scanner-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; flex-direction: column;
}
.scanner-overlay.hidden { display: none; }
.scanner-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px max(16px, env(safe-area-inset-top));
  padding-top: max(20px, env(safe-area-inset-top));
  background: rgba(0,0,0,0.6);
  z-index: 2;
}
.scanner-title { color: #fff; font-size: 16px; font-family: var(--sans); font-weight: 500; }
.scanner-close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scanner-close:active { background: rgba(255,255,255,0.22); }
.scanner-cam-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scanner-cam-btn:active { background: rgba(255,255,255,0.22); }

/* Camera picker sheet */
.scanner-cam-sheet {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.scanner-cam-sheet.hidden { display: none; }
.scanner-cam-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.scanner-cam-panel {
  position: relative; z-index: 1;
  background: #1c1510; border-radius: 16px 16px 0 0;
  padding: 8px 0 max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.1);
}
.scanner-cam-panel-title {
  color: rgba(240,230,208,0.4); font-size: 11px; font-family: var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 10px 20px 8px;
}
.scanner-cam-item {
  display: flex; align-items: center;
  width: 100%; padding: 14px 20px;
  background: none; border: none; cursor: pointer;
  color: #f0e6d0; font-family: var(--sans); font-size: 16px;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.scanner-cam-item:active { background: rgba(255,255,255,0.06); }
.scanner-cam-item.active { color: #fff; font-weight: 500; }
.scanner-cam-check {
  margin-left: auto; color: var(--red2, #b02238); font-size: 16px; font-weight: 700;
}

.scanner-viewport {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#scanner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Force GPU compositing — prevents blank/green frames on Android WebView */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.scanner-frame {
  position: relative; z-index: 2;
  width: min(70vw, 260px); height: min(70vw, 260px);
}
.sf-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: var(--gold); border-style: solid;
}
.sf-tl { top: 0; left: 0;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.sf-tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.sf-bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.sf-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.scanner-line {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--gold);
  opacity: 0.8;
  top: 0;
  animation: scan-sweep 2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--gold);
}
@keyframes scan-sweep {
  0%   { top: 0; }
  50%  { top: calc(100% - 2px); }
  100% { top: 0; }
}
.scanner-hint {
  padding: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px; color: rgba(255,255,255,0.7);
  font-family: var(--sans);
  background: rgba(0,0,0,0.6);
  transition: color 0.2s;
}
.scanner-hint-err { color: #e87070; }
.scanner-hint-ok  { color: #7ecb7e; }

/* ── Admin badge ──────────────────────────────────────────────────────────── */
.sb-admin-badge    { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10.5px; color: var(--txt3); }
.sb-admin-badge svg{ width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-pill        { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 500; background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.25); }
.admin-pill svg    { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Cellar tab switcher ──────────────────────────────────────────────────── */
.tab-switcher      { display: flex; gap: 3px; margin-bottom: 18px; background: var(--surf); border-radius: var(--r); padding: 3px; border: 1px solid var(--bdr); align-self: flex-start; }
.tab-btn           { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; background: none; color: var(--txt3); font-family: var(--sans); transition: all 0.12s; white-space: nowrap; }
.tab-btn svg       { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tab-btn:hover     { color: var(--txt2); }
.tab-btn.act       { background: var(--bg4); color: var(--txt); border: 1px solid var(--bdr2); }

/* ── Wishlist card ────────────────────────────────────────────────────────── */
.wc-empty                  { opacity: 0.45; }
.wc-wishlist               { border-style: dashed; border-color: rgba(201,168,76,0.25); }
.wc-wishlist:hover         { border-color: rgba(201,168,76,0.55); border-style: dashed; }
.wc-acquire {
  position: absolute; bottom: 14px; right: 14px;
  padding: 4px 11px; border-radius: 7px;
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3);
  cursor: pointer; opacity: 0; transition: opacity 0.15s; color: var(--gold);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
}
.wc-wishlist:hover .wc-acquire { opacity: 1; }
.wc-acquire:hover              { background: var(--gold); color: var(--bg); border-color: transparent; }

/* ── Form type toggle ─────────────────────────────────────────────────────── */
.form-type-toggle  { display: flex; gap: 3px; margin-bottom: 22px; background: var(--surf); border-radius: var(--r); padding: 3px; border: 1px solid var(--bdr); align-self: flex-start; }
.type-btn          { display: flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: 7px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; background: none; color: var(--txt3); font-family: var(--sans); transition: all 0.12s; }
.type-btn svg      { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.type-btn:hover    { color: var(--txt2); }
.type-btn.act      { background: var(--bg4); color: var(--txt); border: 1px solid var(--bdr2); }

/* ── Wishlist callout on dashboard ───────────────────────────────────────── */
.wishlist-callout  { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r); background: rgba(201,168,76,0.07); border: 1px solid rgba(201,168,76,0.22); cursor: pointer; font-size: 13px; color: var(--txt2); margin-top: 16px; transition: border-color 0.15s, background 0.15s; }
.wishlist-callout:hover { border-color: rgba(201,168,76,0.45); background: rgba(201,168,76,0.11); color: var(--txt); }
.wishlist-callout svg   { width: 13px; height: 13px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wishlist-callout strong { color: var(--txt); font-weight: 600; }

/* ── Hash display in admin settings ──────────────────────────────────────── */
code.hash-display  { display: block; word-break: break-all; font-size: 11px; user-select: all; cursor: text; font-family: monospace; background: var(--surf2); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--bdr); color: var(--txt); line-height: 1.6; margin-top: 6px; }

/* ── Language toggle ─────────────────────────────────────────────────────── */
.lang-toggle-auth  { display: flex; justify-content: center; gap: 4px; margin: -4px 0 16px; }
.lang-btn          { padding: 4px 13px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; border: 1px solid var(--bdr); background: none; color: var(--txt3); font-family: var(--sans); transition: all 0.12s; }
.lang-btn:hover    { color: var(--txt2); border-color: var(--bdr2); }
.lang-btn.act      { background: var(--bg4); color: var(--txt); border-color: var(--bdr2); }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(139,26,46,0.4); }
  50% { box-shadow: 0 4px 32px rgba(139,26,46,0.6), 0 0 24px rgba(139,26,46,0.3); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(30deg); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 Enhancements — Photos, Tastings, Tags, Food Pairings
   ══════════════════════════════════════════════════════════════════════════ */

/* ── V2 Section Container ──────────────────────────────────────────────────── */
.v2-section {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 16px;
  margin: 16px 0;
  animation: fadeIn 0.4s var(--transition-smooth);
}

.v2-section-empty {
  padding: 12px 16px;
  background: var(--bg3);
}

.v2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.v2-section-header span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Photo Gallery ─────────────────────────────────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer;
  transition: transform 0.2s var(--transition-smooth);
}

.photo-item:hover {
  transform: scale(1.03);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.photo-item:hover .photo-remove {
  opacity: 1;
}

.photo-remove:hover {
  background: var(--red);
}

.photo-more {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px dashed var(--bdr);
  border-radius: var(--r);
  font-size: 18px;
  font-weight: 600;
  color: var(--txt2);
  cursor: pointer;
  transition: all 0.2s var(--transition-smooth);
}

.photo-more:hover {
  background: var(--surf);
  border-color: var(--bdr2);
  color: var(--txt);
}

/* ── Gallery Full View ─────────────────────────────────────────────────────── */
.gallery-wrap {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gallery-header h2 {
  flex: 1;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3);
  transition: transform 0.2s var(--transition-smooth);
}

.gallery-item:hover {
  transform: translateY(-4px);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background-color: var(--bg2);
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-caption {
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
}

.gallery-actions {
  display: flex;
  gap: 8px;
}

.gallery-date {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ── Tags ──────────────────────────────────────────────────────────────────── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--txt);
  transition: all 0.2s var(--transition-smooth);
}

.tag-chip:hover {
  background: var(--surf);
  border-color: var(--bdr2);
}

.tag-remove {
  background: none;
  border: none;
  color: var(--txt3);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.tag-remove:hover {
  color: var(--red2);
}

.tag-add-btn {
  background: var(--bg3);
  border: 1px dashed var(--bdr);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--txt2);
  cursor: pointer;
  transition: all 0.2s var(--transition-smooth);
}

.tag-add-btn:hover {
  background: var(--surf);
  border-color: var(--bdr2);
  color: var(--txt);
  border-style: solid;
}

/* ── Food Pairings ─────────────────────────────────────────────────────────── */
.pairing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pairing-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(61,122,82,0.15);
  border: 1px solid rgba(61,122,82,0.3);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--txt);
  transition: all 0.2s var(--transition-smooth);
}

.pairing-chip:hover {
  background: rgba(61,122,82,0.25);
  border-color: rgba(61,122,82,0.5);
}

.pairing-suggest {
  background: var(--bg3);
  border: 1px dashed var(--bdr);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--txt2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s var(--transition-smooth);
}

.pairing-suggest:hover:not(:disabled) {
  background: rgba(61,122,82,0.15);
  border-color: rgba(61,122,82,0.3);
  border-style: solid;
  color: var(--txt);
}

.pairing-suggest:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Tasting Journal ───────────────────────────────────────────────────────── */
.tasting-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasting-card {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 14px;
  transition: all 0.2s var(--transition-smooth);
}

.tasting-card:hover {
  background: var(--surf);
  border-color: var(--bdr2);
}

.tasting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bdr);
}

.tasting-date {
  flex: 1;
  font-size: 12px;
  color: var(--txt2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tasting-field {
  font-size: 12px;
  color: var(--txt2);
  margin-bottom: 6px;
  line-height: 1.5;
}

.tasting-field strong {
  color: var(--txt);
  font-weight: 500;
}

.tasting-notes {
  font-size: 13px;
  color: var(--txt);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bdr);
  line-height: 1.6;
}

.btn-icon-sm {
  background: none;
  border: none;
  color: var(--txt3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.2s var(--transition-smooth);
}

.btn-icon-sm:hover {
  background: var(--red);
  color: #fff;
}

/* ── Tasting Form ──────────────────────────────────────────────────────────── */
.form-textarea {
  width: 100%;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 11px 14px;
  color: var(--txt);
  font-size: 14px;
  font-family: var(--sans);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
}

.form-textarea:focus {
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--bdr);
}

/* ── Mobile Responsive (V2) ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .v2-section {
    padding: 12px;
  }
  
  .v2-section-header {
    font-size: 11px;
  }
  
  .tag-chip,
  .pairing-chip,
  .pairing-suggest {
    font-size: 11px;
    padding: 4px 10px;
  }
  
  .tasting-card {
    padding: 12px;
  }
  
  .filter-panel {
    max-height: 400px;
  }
}

/* ── Advanced Filter Panel ─────────────────────────────────────────────────── */
.filter-toggle-btn {
  position: relative;
}

.filter-toggle-btn.active {
  color: var(--gold) !important;
}

.filter-toggle-btn.open {
  background: var(--surf) !important;
}

.filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gold);
  color: var(--bg);
  font-size: 9px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-panel {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  margin: 0 0 16px 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--transition-smooth), padding 0.3s var(--transition-smooth);
}

.filter-panel.open {
  max-height: 600px;
  padding: 16px;
  margin-bottom: 16px;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bdr);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.filter-panel-header span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-section {
  margin-bottom: 16px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--txt3);
  margin-bottom: 10px;
  font-weight: 500;
}

.rating-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rating-btn {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--txt2);
  cursor: pointer;
  transition: all 0.2s var(--transition-smooth);
  font-family: var(--sans);
}

.rating-btn:hover {
  background: var(--surf);
  border-color: var(--bdr2);
  color: var(--txt);
}

.rating-btn.active {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.range-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range-filter span {
  color: var(--txt3);
  font-size: 14px;
}

.filter-input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 8px 12px;
  color: var(--txt);
  font-size: 13px;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s var(--transition-smooth);
}

.filter-input:focus {
  border-color: rgba(201,168,76,0.45);
}

.filter-input::placeholder {
  color: var(--txt3);
}

.tag-chip.active {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Mobile Swipe Gestures ─────────────────────────────────────────────────── */
.wc-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg2);
  touch-action: pan-y;
}

.wl-row-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg2);
  margin-bottom: 8px;
  touch-action: pan-y;
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--bg4);
  z-index: 1;
}

.swipe-btn {
  border: none;
  background: none;
  color: #fff;
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0 10px;
}

.swipe-consume {
  background: var(--green);
}

.swipe-consume:hover {
  background: #2c5a3d;
}

.swipe-edit {
  background: var(--gold);
}

.swipe-edit:hover {
  background: #a6883b;
}

.swipe-delete {
  background: var(--red);
}

.swipe-delete:hover {
  background: #6a1322;
}

.wc, .wl-row {
  position: relative;
  z-index: 2;
  background: var(--bg2);
  /* The transition will be overridden during swipe via JS */
  transition: transform 0.3s var(--transition-smooth);
}

/* ── Investment Tracking ───────────────────────────────────────────────────── */
.investment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.inv-item {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 12px;
  transition: all 0.2s var(--transition-smooth);
}

.inv-item:hover {
  background: var(--surf);
  border-color: var(--bdr2);
}

.inv-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--txt3);
  margin-bottom: 6px;
  font-weight: 500;
}

.inv-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 6px;
}

.inv-value.gain {
  color: var(--green);
}

.inv-value.loss {
  color: #e05555;
}

.inv-percent {
  font-size: 12px;
  opacity: 0.7;
}

.inv-change {
  grid-column: 1 / -1;
}

/* ── V2: CSS variables additions ─────────────────────────────────────────── */
:root {
  --surf3: rgba(255,255,255,0.12);
}

/* ── V2: Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #f5f0e8; --bg2: #ede6d8; --bg3: #e4dccc; --bg4: #d8cebb;
  --surf: rgba(0,0,0,0.04); --surf2: rgba(0,0,0,0.07); --surf3: rgba(0,0,0,0.11);
  --bdr:  rgba(0,0,0,0.10); --bdr2: rgba(0,0,0,0.18);
  --txt:  #1a1208;
  --txt2: rgba(26,18,8,0.60);
  --txt3: rgba(26,18,8,0.35);
  --red:  #8b1a2e; --red2: #b02238;
  --gold: #8a6820; --gold2: rgba(138,104,32,0.14);
  --green: #2a6038; --amber: #7a4e00;
}
[data-theme="light"] body { background: #f5f0e8; color: #1a1208; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── V2: Filter panel rows ───────────────────────────────────────────────── */
.fp-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--bdr);
  flex-wrap: wrap;
}
.fp-row:last-child { border-bottom: none; }
.fp-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--txt3); font-weight: 500; min-width: 70px; padding-top: 5px; flex-shrink: 0;
}
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fp-chip {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: 20px; padding: 4px 12px; font-size: 12px;
  color: var(--txt2); cursor: pointer; font-family: var(--sans);
  transition: all 0.15s var(--transition-smooth);
}
.fp-chip:hover { border-color: var(--bdr2); color: var(--txt); }
.fp-chip.act { background: var(--gold2); border-color: var(--gold); color: var(--gold); }
.fp-input {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: 8px; padding: 5px 10px; font-size: 13px;
  color: var(--txt); font-family: var(--sans); outline: none;
}

/* ── V2: Batch select bar ────────────────────────────────────────────────── */
.batch-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: var(--r); padding: 8px 14px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.batch-bar .btn-sm { font-size: 11.5px; padding: 4px 10px; }

/* ── V2: Search clear button ─────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--txt3);
  padding: 4px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color 0.15s;
}
.search-clear:hover { color: var(--txt); }

/* ── V2: Wine card photo & strip ─────────────────────────────────────────── */
.wc { position: relative; overflow: hidden; }
.wc-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  border-radius: inherit; pointer-events: none; z-index: 0;
}
.wc > *:not(.wc-photo-overlay):not(.wc-strip) { position: relative; z-index: 1; }
.wc-strip {
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px;
}
.wc-selected { box-shadow: 0 0 0 2px var(--gold) !important; }
.wc-checkbox {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 20px; height: 20px; border: 2px solid var(--bdr2);
  border-radius: 6px; background: var(--bg2); display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--txt);
  transition: all 0.15s var(--transition-smooth);
}
.wc-checkbox.checked { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.wc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.wc-tag {
  font-size: 10px; color: var(--txt3); background: var(--surf);
  border: 1px solid var(--bdr); border-radius: 10px; padding: 1px 7px;
}
.wc-tag-more { opacity: 0.6; }

/* ── V2: List view strip & checkbox ─────────────────────────────────────── */
.wl-row { position: relative; }
.wl-strip { width: 4px; height: 100%; flex-shrink: 0; border-radius: 2px; }
.wl-check {
  width: 18px; height: 18px; border: 2px solid var(--bdr2);
  border-radius: 5px; background: var(--bg2); display: flex;
  align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  font-size: 10px; font-weight: 700; color: var(--txt); transition: all 0.15s;
}
.wl-check.checked { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.wl-selected { background: rgba(201,168,76,0.06) !important; }

/* ── V2: Detail photo header ─────────────────────────────────────────────── */
.det-photo-header {
  height: 200px; border-radius: var(--r); margin-bottom: 20px;
  position: relative; background-size: cover; background-position: center;
  overflow: hidden;
}
.det-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.6) 100%);
}
.det-photo-actions {
  position: absolute; bottom: 12px; right: 12px; z-index: 1;
}
.det-color-header {
  height: 80px; border-radius: var(--r); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px; opacity: 0.9;
}

/* ── V2: Detail tabs ─────────────────────────────────────────────────────── */
.det-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--bdr);
  margin-bottom: 20px;
}
.det-tab {
  padding: 8px 16px; font-size: 13px; color: var(--txt3);
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.det-tab:hover { color: var(--txt2); }
.det-tab.act { color: var(--txt); border-bottom-color: var(--gold); font-weight: 500; }

/* ── V2: User tag chips in detail ────────────────────────────────────────── */
.tag-user {
  background: rgba(201,168,76,0.1) !important;
  color: var(--gold) !important;
  border-color: rgba(201,168,76,0.25) !important;
}

/* ── V2: Consumption history ─────────────────────────────────────────────── */
.consume-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--bdr);
}
.consume-entry:last-child { border-bottom: none; }

/* ── V2: Related wines grid ──────────────────────────────────────────────── */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.related-card {
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 12px; cursor: pointer;
  transition: all 0.2s var(--transition-smooth);
}
.related-card:hover { border-color: var(--bdr2); background: var(--surf); }

/* ── V2: Duplicate warning & drink hint ──────────────────────────────────── */
.dup-warning {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--amber); background: rgba(184,118,10,0.1);
  border: 1px solid rgba(184,118,10,0.25); border-radius: var(--r);
  padding: 9px 14px; margin-bottom: 14px;
}
.dup-warning a { color: var(--amber); }
.drink-hint { font-size: 11px; margin-top: 5px; font-weight: 500; }

/* ── V2: Tag chip input ──────────────────────────────────────────────────── */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 8px 10px; min-height: 42px;
  transition: border-color 0.2s;
}
.tag-input-wrap:focus-within { border-color: var(--bdr2); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold2); border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--gold);
}
.tag-chip-rm {
  background: none; border: none; cursor: pointer; color: var(--gold);
  font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.7;
}
.tag-chip-rm:hover { opacity: 1; }
.tag-input {
  background: none; border: none; outline: none; font-family: var(--sans);
  font-size: 13px; color: var(--txt); min-width: 100px; flex: 1;
}

/* ── V2: Dashboard alert banner ──────────────────────────────────────────── */
.dash-alert {
  display: flex; align-items: center; gap: 10px;
  background: rgba(139,26,46,0.12); border: 1px solid rgba(139,26,46,0.3);
  border-radius: var(--r); padding: 11px 16px; margin-bottom: 16px;
  cursor: pointer; font-size: 13px; color: var(--txt2);
  transition: all 0.2s var(--transition-smooth);
}
.dash-alert:hover { background: rgba(139,26,46,0.18); }
.dash-alert strong { color: var(--txt); }

/* ── V2: Drink Tonight cards ─────────────────────────────────────────────── */
.dash-tonight {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.tonight-card {
  height: 130px; border-radius: var(--r); position: relative;
  cursor: pointer; overflow: hidden; border: 1px solid var(--bdr);
  transition: transform 0.2s var(--transition-smooth);
}
.tonight-card:hover { transform: translateY(-2px); }
.tonight-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
}
.tonight-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px; }
.tonight-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.tonight-sub { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }

/* ── V2: Clickable stat cards ────────────────────────────────────────────── */
.sc-link { cursor: pointer; transition: all 0.2s var(--transition-smooth); }
.sc-link:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

/* ── V2: Recent row strip & inline status ─────────────────────────────────── */
.rr-strip { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.ds-inline { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.ds-inline.ds-aging { color: var(--amber); }
.ds-inline.ds-ready { color: var(--green); }
.ds-inline.ds-peak  { color: var(--red); }

/* ── V2: Toast undo button ───────────────────────────────────────────────── */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-undo {
  background: none; border: 1px solid currentColor; border-radius: 6px;
  padding: 2px 10px; font-size: 11.5px; color: inherit; cursor: pointer;
  font-family: var(--sans); opacity: 0.85; flex-shrink: 0;
}
.toast-undo:hover { opacity: 1; }

/* ── V2: mark highlight ──────────────────────────────────────────────────── */
mark {
  background: rgba(201,168,76,0.3); color: var(--txt);
  border-radius: 2px; padding: 0 1px;
}

/* ── Rack / QR Tag system ────────────────────────────────────────────────── */
.rack-wrap { display: flex; flex-direction: column; gap: 20px; }

.rack-add-row {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 14px;
}

.rack-batch-box {
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.rack-batch-ta {
  width: 100%; resize: vertical; font-family: var(--font-mono, monospace);
  font-size: 13px; line-height: 1.6;
}
.rack-batch-actions {
  display: flex; gap: 8px;
}

.rack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.rack-tag {
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--rl); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s var(--transition-smooth);
}
.rack-tag:hover { border-color: var(--bdr2); }

.rt-qr {
  width: 110px; height: 110px; background: #fff;
  border-radius: 8px; overflow: hidden; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
}
.rt-qr img, .rt-qr canvas { display: block; width: 110px !important; height: 110px !important; }

.rt-label {
  font-size: 12px; font-weight: 600; color: var(--txt);
  text-align: center; line-height: 1.3;
}

.rt-wine {
  font-size: 11px; text-align: center; line-height: 1.3;
}
.rt-wine.has-wine { color: var(--txt2); }
.rt-wine.empty-slot { color: var(--txt3); font-style: italic; }

.rt-actions {
  display: flex; flex-direction: column; gap: 5px; margin-top: 4px;
}
.rt-select { font-size: 11.5px !important; padding: 4px 8px !important; width: 100%; }

/* Detail slot link */
.det-slot {
  cursor: pointer; transition: color 0.15s;
}
.det-slot:hover { color: var(--gold); }
.det-slot-arrow { margin-left: auto; color: var(--txt3); font-size: 11px; }

/* Slot lookup page */
.slot-lookup-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--bdr);
}
.sl-icon {
  width: 44px; height: 44px; background: var(--surf2);
  border: 1px solid var(--bdr); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sl-icon svg { width: 20px; height: 20px; }

.slot-wine-card {
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--rl); overflow: hidden; cursor: pointer;
  transition: border-color 0.2s var(--transition-smooth);
}
.slot-wine-card:hover { border-color: var(--bdr2); }
.slot-wine-photo {
  height: 140px; background-size: cover; background-position: center;
}
.slot-wine-body { padding: 18px; }

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
  /* Hide everything except the rack grid */
  body > *,
  #auth, #app > *:not(#main),
  #header, #sidebar, #mob-nav, .toast-wrap { display: none !important; }

  #app { display: block !important; }
  #main { display: block !important; }
  #content { display: block !important; overflow: visible !important; height: auto !important; }

  .rack-add-row, .rack-batch-box { display: none !important; }

  .no-print { display: none !important; }

  .print-rack {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; padding: 8px;
  }

  .rack-tag {
    border: 1.5px solid #ccc !important;
    border-radius: 0 !important; padding: 12px;
    break-inside: avoid; page-break-inside: avoid;
    background: #fff !important; color: #000 !important;
  }

  .rt-qr { background: #fff; margin-bottom: 8px; border-radius: 0 !important; overflow: visible !important; }
  .rt-label { color: #000 !important; font-size: 11px; font-weight: 700; }
  .rt-wine { color: #444 !important; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Wine database search & label scan styles
   ════════════════════════════════════════════════════════════════════════════ */

.wine-lookup-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

.scan-label-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.wine-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
}

.wine-search-inp {
  width: 100%;
}

.wine-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.wine-suggestions:empty {
  display: none;
}

.ws-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt1);
  border-bottom: 1px solid var(--bdr);
}

.ws-item:last-child {
  border-bottom: none;
}

.ws-item:hover,
.ws-item:focus {
  background: var(--bg2);
}

.ws-name {
  font-weight: 600;
  font-size: 14px;
}

.ws-meta {
  font-size: 12px;
  color: var(--txt3);
  margin-top: 2px;
}

.ws-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--txt3);
  text-align: center;
}


.form-photo-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px;
  background: var(--bg2);
  border-radius: 8px;
}

.label-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--bdr);
}

/* Scanner shutter button */
.scanner-shutter {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 4px solid #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
}

.scanner-shutter:active .shutter-ring {
  transform: scale(0.92);
}

.shutter-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.1s ease;
}

/* OCR results modal */
.ocr-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.ocr-modal-panel {
  position: relative;
  background: var(--bg1);
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.ocr-modal-panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.ocr-modal-hint {
  font-size: 12px;
  color: var(--txt3);
  margin-bottom: 12px;
}

.ocr-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ocr-line {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--txt1);
}

.ocr-line:hover {
  background: var(--bg3);
}

.ocr-dismiss {
  width: 100%;
  padding: 10px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--txt1);
}

/* ── DB loading indicator ──────────────────────────────────────────────── */

.db-loading {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: var(--rl);
  box-shadow: var(--shadow-lg);
  animation: dbLoadingIn 0.3s ease;
}

@keyframes dbLoadingIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.db-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surf3);
  border-top-color: var(--prim);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.db-loading-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
}

.db-loading-sub {
  font-size: 11px;
  color: var(--txt3);
}

/* ── Wine database match UI ──────────────────────────────────────────────── */

.det-classification {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 20px;
  padding: 4px 12px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.det-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0;
}

.det-stars-ext {
  opacity: 0.85;
}

.det-stars-ext .det-stars-label {
  color: var(--txt2);
}

/* Form DB match badge */
.db-match-info {
  margin: 8px 0 12px;
}

.db-match-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  font-size: 13px;
}

.db-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.db-match-name {
  color: var(--txt2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-match-rating {
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.db-match-unlink {
  font-size: 11px;
  color: var(--txt3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  white-space: nowrap;
}

.db-match-unlink:hover {
  color: var(--red);
  text-decoration: underline;
}