/* ═══════════════════════════════════════════════════════════════════════════
   GrapeLog — Editorial Wine Theme
   Warm paper · Burgundy accent · Flat · No shadows · No gradients
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg-base:       #f7f5f0;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-input:      #ffffff;
  --bg-sidebar:    #ffffff;

  /* ── Accent colours ── */
  --wine:          #8b1a2e;   /* primary — active states, prices, CTAs */
  --wine-light:    #a82840;   /* hover variant */
  --wine-bright:   #a82840;   /* compat alias */
  --gold:          #c9a84c;   /* white wine left bar */
  --gold-light:    #c9a84c;
  --gold-dim:      #c9a84c;
  --rose:          #d4627a;   /* rosé left bar */
  --neutral-bar:   #8c8178;   /* review cards, other */

  /* ── Text ── */
  --text-primary:   #1a1714;
  --text-secondary: #5c5248;
  --text-muted:     #8c8178;

  /* ── Borders — always 0.5px ── */
  --border:         #e5e0d8;
  --border-med:     #d0c8be;
  --border-strong:  #b8afa5;

  /* ── Drink-window badge colours ── */
  --dw-in-bg:       #f0f7ee;
  --dw-in-text:     #4a6741;
  --dw-in-border:   #c5dbbf;
  --dw-soon-bg:     #fdf3e7;
  --dw-soon-text:   #8b5a1a;
  --dw-soon-border: #f0d0a0;
  --dw-past-bg:     #fdf3e7;
  --dw-past-text:   #8b5a1a;
  --dw-past-border: #f0d0a0;

  /* ── Semantic compat aliases (used by inline template styles) ── */
  --green:      #4a6741;
  --green-dim:  #c5dbbf;
  --amber:      #8b5a1a;
  --amber-dim:  #f0d0a0;
  --red:        #8b1a2e;
  --red-dim:    #fef2f2;
  --blue:       #1d4ed8;
  --blue-dim:   #eff6ff;

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  8px;

  /* ── Layout ── */
  --sidebar-w:  240px;
  --header-h:   56px;

  /* ── No shadows ── */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wine); text-decoration: none; }
a:hover { color: var(--wine-light); }
img { max-width: 100%; display: block; }

/* ── App shell ────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform .25s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
}
.brand-icon { font-size: 1.25rem; }
.brand-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.brand-name span { color: var(--wine); }

.sidebar-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: var(--text-muted);
  font-size: .83rem;
  font-weight: 400;
  transition: color .12s, background .12s;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.nav-link i { width: 15px; text-align: center; font-size: .85rem; }
.nav-link:hover { color: var(--text-primary); background: var(--bg-base); }
.nav-link.active {
  color: var(--wine);
  border-left-color: var(--wine);
  background: var(--bg-base);
  font-weight: 500;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-top: 0.5px solid var(--border);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-muted);
}
.logout-btn {
  color: var(--text-muted);
  font-size: .88rem;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  transition: color .12s;
}
.logout-btn:hover { color: var(--wine); }

/* ── Mobile header ────────────────────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 0.5px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 200;
}
.mobile-brand { font-size: .98rem; font-weight: 500; color: var(--text-primary); }
.mobile-brand span { color: var(--wine); }
.hamburger, .mobile-logout {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: 6px;
}
.hamburger:hover, .mobile-logout:hover { color: var(--wine); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,23,20,.3);
  z-index: 99;
}

/* ── Main content ─────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 32px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-primary);
}
.page-subtitle {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  border: 0.5px solid transparent;
}
.flash-success { background: var(--dw-in-bg);  border-color: var(--dw-in-border);  color: var(--dw-in-text); }
.flash-error   { background: #fef2f2;           border-color: #fca5a5;              color: #b91c1c; }
.flash-info    { background: #eff6ff;           border-color: #bfdbfe;              color: #1d4ed8; }
.flash-close   { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; opacity: .6; }
.flash-close:hover { opacity: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  font-weight: 500;
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--wine);
  color: #ffffff;
  border-color: var(--wine);
}
.btn-primary:hover {
  background: var(--wine-light);
  border-color: var(--wine-light);
  color: #ffffff;
}

.btn-outline {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
}
.btn-outline:hover {
  background: #faf0f2;
  color: var(--wine-light);
}

.btn-danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.btn-danger:hover {
  background: #fee2e2;
  border-color: #f87171;
}

.btn-sm { padding: 5px 11px; font-size: .77rem; }

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 5px 7px;
}
.btn-ghost:hover { color: var(--wine); background: var(--bg-base); }

.btn-wine {
  background: var(--wine);
  color: #ffffff;
  border-color: var(--wine);
}
.btn-wine:hover {
  background: var(--wine-light);
  color: #ffffff;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.card-sm { padding: 14px 16px; }
.card-title {
  font-size: .68rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.stat-label {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
  font-weight: 500;
}
.stat-value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}
.stat-value.gold { color: var(--wine); }
.stat-sub {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.stat-icon { display: none; }

/* ── Chart cards ──────────────────────────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.chart-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.chart-card canvas { max-height: 220px; }

/* ── Wine list (Cellar) ───────────────────────────────────────────────────── */
.wine-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wine-list-item {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--item-bar, var(--neutral-bar));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .1s;
}
.wine-list-item:hover { background: #faf8f5; }

.wli-main {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: block;
}
.wli-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wli-name:hover { color: var(--wine); }
.wli-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wli-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  min-width: 52px;
}
.wli-price {
  font-size: .85rem;
  font-weight: 500;
  color: var(--wine);
}
.wli-qty {
  font-size: .7rem;
  color: var(--text-muted);
}
.wli-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* legacy card grid classes — kept for wine-card usage on detail pages */
.wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.wine-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--neutral-bar);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wine-card:hover { background: #faf8f5; }
.wine-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-base); }
.wine-card-img-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--border);
}
.wine-card-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; }
.wine-card-type {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 20px;
  margin-bottom: 6px; width: fit-content;
}
.wine-card-name { font-size: .88rem; font-weight: 500; color: var(--text-primary); margin-bottom: 1px; }
.wine-card-producer { font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
.wine-card-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem; color: var(--text-secondary); margin-top: auto; }
.wine-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-top: 0.5px solid var(--border); background: var(--bg-base);
}

/* ── Wine detail ──────────────────────────────────────────────────────────── */
.wine-detail-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 24px;
}
.wine-detail-img {
  width: 180px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 0.5px solid var(--border);
}
.wine-detail-img-placeholder {
  width: 180px;
  height: 240px;
  background: var(--bg-base);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  border: 0.5px solid var(--border);
  color: var(--border);
}
.wine-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.wine-meta-item label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 1px;
  font-weight: 500;
}
.wine-meta-item span {
  font-size: .86rem;
  color: var(--text-primary);
  font-weight: 400;
}

/* ── Stars ────────────────────────────────────────────────────────────────── */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--border-med);
  font-size: .88rem;
}
.stars .filled { color: var(--gold); }

.star-picker {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.star-picker label {
  font-size: 1.5rem;
  color: var(--border);
  cursor: pointer;
  transition: color .1s;
}
.star-picker label:hover,
.star-picker label.active { color: var(--gold); }
.star-picker input { display: none; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.form-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
.col-span-2 { grid-column: span 2; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 500;
}
.form-group .required::after { content: ' *'; color: var(--wine); }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: var(--bg-input);
  border: 0.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: .86rem;
  padding: 9px 11px;
  width: 100%;
  transition: border-color .12s;
  font-family: inherit;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--wine);
}
textarea { resize: vertical; min-height: 80px; }
select option { background: #ffffff; }

.form-hint { font-size: .72rem; color: var(--text-muted); margin-top: -2px; }

.file-input-wrapper { position: relative; display: flex; align-items: center; gap: 12px; }
.file-input-wrapper input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.file-input-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0.5px dashed var(--border-med);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .83rem;
  transition: border-color .12s, color .12s;
}
.file-input-label:hover { border-color: var(--wine); color: var(--wine); }
#file-name { font-size: .77rem; color: var(--text-muted); }

.checkbox-group { display: flex; align-items: center; gap: 8px; }
.checkbox-group input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--wine); cursor: pointer; }
.checkbox-group label { font-size: .86rem; color: var(--text-secondary); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }

.form-divider { grid-column: 1 / -1; border: none; border-top: 0.5px solid var(--border); margin: 6px 0; }
.form-section-title {
  grid-column: 1 / -1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
  margin-top: 8px;
}

/* ── Wine form wrapper (max-width, centred, compact inputs) ──────────────── */
.wine-form-wrap { max-width: 860px; margin: 0 auto; }
.wine-form-wrap input[type="text"],
.wine-form-wrap input[type="number"],
.wine-form-wrap input[type="date"],
.wine-form-wrap select { height: 36px; padding-top: 0; padding-bottom: 0; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: .7rem;
  font-weight: 500;
  border: 0.5px solid transparent;
}
.badge-success { background: var(--dw-in-bg);  color: var(--dw-in-text);  border-color: var(--dw-in-border); }
.badge-warning { background: var(--dw-soon-bg); color: var(--dw-soon-text); border-color: var(--dw-soon-border); }
.badge-danger  { background: #fef2f2;           color: #b91c1c;            border-color: #fca5a5; }
.badge-muted   { background: var(--bg-base);    color: var(--text-muted);  border-color: var(--border); }
.badge-blue    { background: #eff6ff;           color: #1d4ed8;            border-color: #bfdbfe; }

.dw-ready   { background: var(--dw-in-bg);   color: var(--dw-in-text);   border-color: var(--dw-in-border); }
.dw-young   { background: #eff6ff;            color: #1d4ed8;             border-color: #bfdbfe; }
.dw-past    { background: var(--dw-past-bg);  color: var(--dw-past-text); border-color: var(--dw-past-border); }
.dw-unknown { background: var(--bg-base);     color: var(--text-muted);   border-color: var(--border); }

/* ── Filters bar ──────────────────────────────────────────────────────────── */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-base);
  padding: 10px 0 12px;
  margin-top: -8px;
}
.search-wrap { position: relative; flex: 0 1 220px; min-width: 160px; }
.search-wrap i {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text-muted);
  font-size: .78rem; pointer-events: none;
}
.search-wrap input { padding-left: 30px; }
.filter-select { width: 130px; flex: 0 0 auto; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--border);
  font-weight: 500;
  white-space: nowrap;
}
tbody tr { border-bottom: 0.5px solid var(--border); transition: background .1s; }
tbody tr:hover { background: var(--bg-base); }
tbody td { padding: 10px 12px; font-size: .86rem; color: var(--text-secondary); }
tbody td a { color: var(--text-primary); font-weight: 500; }
tbody td a:hover { color: var(--wine); }

/* ── Review cards ─────────────────────────────────────────────────────────── */
.review-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--neutral-bar);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.review-date { font-size: .72rem; color: var(--text-muted); }
.review-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-note-block label {
  font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  display: block; margin-bottom: 2px; font-weight: 500;
}
.review-note-block p { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Wishlist ─────────────────────────────────────────────────────────────── */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.wishlist-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--neutral-bar);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wishlist-name { font-size: .88rem; font-weight: 500; color: var(--text-primary); }
.wishlist-producer { font-size: .78rem; color: var(--text-muted); }
.wishlist-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: var(--text-muted); }
.priority-high   { border-left-color: var(--wine); }
.priority-medium { border-left-color: var(--rose); }
.priority-low    { border-left-color: var(--gold); }

.badge-priority-high   { background: var(--wine)22; color: var(--wine);  border-color: var(--wine)44; }
.badge-priority-medium { background: var(--rose)22; color: var(--rose);  border-color: var(--rose)44; }
.badge-priority-low    { background: var(--gold)22; color: var(--gold);  border-color: var(--gold)44; }

/* ── Auth pages ───────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 24px;
}
.auth-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px;
  width: 100%;
  max-width: 400px;
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand .logo-emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.auth-brand h1 { font-size: 1.4rem; font-weight: 500; color: var(--text-primary); }
.auth-brand h1 span { color: var(--wine); }
.auth-brand p { font-size: .82rem; color: var(--text-muted); margin-top: 4px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: .82rem; color: var(--text-muted); }
.auth-flash { margin-bottom: 16px; }

/* ── Country breakdown rows ──────────────────────────────────────────────── */
.country-row {
  display: grid;
  grid-template-columns: 120px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--border);
}
.country-row:last-child { border-bottom: none; }
.country-name {
  font-size: .83rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.country-bar {
  height: 100%;
  background: var(--wine);
  border-radius: 3px;
  min-width: 4px;
}
.country-count {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: right;
}

/* ── Drinking window panel ────────────────────────────────────────────────── */
.dw-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dw-block {
  background: var(--bg-base);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.dw-block .dw-count { font-size: 1.2rem; font-weight: 500; color: var(--text-primary); line-height: 1; }
.dw-block .dw-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 3px; }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state i { font-size: 2.2rem; margin-bottom: 14px; opacity: .3; }
.empty-state h3 { font-size: .95rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.empty-state p  { font-size: .83rem; max-width: 300px; }

/* ── Data page ────────────────────────────────────────────────────────────── */
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.data-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 0.5px solid var(--border);
}
.data-stat:last-child { border-bottom: none; }
.data-stat i { color: var(--text-muted); width: 18px; text-align: center; }
.data-stat span { font-size: .86rem; color: var(--text-secondary); }
.data-stat strong { color: var(--text-primary); font-weight: 500; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mt-4  { margin-top: 16px; }
.gap-2 { gap: 8px; }
.flex  { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted { color: var(--text-muted); font-size: .83rem; }
.text-gold  { color: var(--wine); }
.fw-bold    { font-weight: 500; }

/* ── Action strip (wine detail page) ─────────────────────────────────────── */
.action-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.action-strip-form {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.action-strip-count {
  flex: 1;
  min-width: 40px;
  padding: 9px 6px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: .82rem;
  background: var(--bg-input);
  color: var(--text-primary);
}
.action-strip-count:focus { outline: none; border-color: transparent; }
.action-strip-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 13px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
  font-family: inherit;
}
.action-strip-btn:hover { border-color: var(--wine); color: var(--wine); }
.action-strip-btn.primary {
  background: var(--wine);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  flex: 1 1 auto;
}
.action-strip-btn.primary:hover { background: var(--wine-light); color: #fff; }

/* ── Quick add bottles (cellar list item) ─────────────────────────────────── */
.wli-add-bottles {
  display: none;
  flex-basis: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  margin-top: 6px;
}
.wli-add-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wli-add-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wli-add-controls input[type="number"] {
  width: 54px !important;
  padding: 6px 8px !important;
  font-size: .82rem !important;
  text-align: center;
}

/* ── Form footer (submit button row) ─────────────────────────────────────── */
.form-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── Page header actions (desktop) ───────────────────────────────────────── */
.page-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Bottom navigation (mobile) ───────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-surface);
  border-top: 0.5px solid var(--border);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-inner {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: stretch;
}
.bnav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 6px 2px;
  transition: color .12s;
}
.bnav-item span { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.bnav-item i { font-size: 1.5rem; }
.bnav-item.active { color: var(--wine); }
.bnav-item:hover { color: var(--wine); }

/* ── More sheet ───────────────────────────────────────────────────────────── */
.more-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,23,20,.35);
  z-index: 300;
}
.more-overlay.visible { display: block; }
.more-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-surface);
  border-top: 0.5px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0));
  z-index: 301;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.more-sheet.open { transform: translateY(0); }
.more-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-med);
  border-radius: 2px;
  margin: 4px auto 12px;
}
.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  color: var(--text-primary);
  font-size: .9rem;
  text-decoration: none;
  transition: background .1s;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.more-sheet-item:hover { background: var(--bg-base); color: var(--text-primary); }
.more-sheet-item i { width: 18px; text-align: center; color: var(--text-muted); font-size: .9rem; }
.more-sheet-divider { height: 0.5px; background: var(--border); margin: 4px 0; }

/* ── Floating Action Button ───────────────────────────────────────────────── */
.fab {
  display: none;
  position: fixed;
  right: 20px;
  bottom: calc(68px + env(safe-area-inset-bottom, 0));
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1.3rem;
  text-decoration: none;
  z-index: 150;
}
.fab:hover { background: var(--wine-light); color: #fff; }
.fab i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* ── Wine card grid (Cellar) ─────────────────────────────────────────────── */
.wine-cg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.wine-cg-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--item-bar, var(--neutral-bar));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: background .1s;
}
.wine-cg-card:hover { background: #faf8f5; }

.wine-cg-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.wine-cg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.wine-cg-acts {
  display: flex;
  flex-shrink: 0;
  margin: -4px -4px 0 0;
}

.wine-cg-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wine-cg-name:hover { color: var(--wine); }

.wine-cg-producer {
  font-size: .73rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wine-cg-meta {
  font-size: .71rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  flex: 1;
}

.wine-cg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
  margin-top: auto;
}
.wine-cg-price { font-size: .84rem; font-weight: 500; color: var(--wine); }
.wine-cg-qty   { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

.wine-cg-add {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wine-cg-add input[type="number"] {
  width: 52px;
  padding: 5px 6px;
  font-size: .78rem;
  text-align: center;
  flex-shrink: 0;
}
.wine-cg-add .btn { flex: 1; justify-content: center; }

/* ── Wine detail info card (horizontal layout) ───────────────────────────── */
.wdl-info-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.wdl-info-photo-col {
  border-right: 0.5px solid var(--border);
  align-self: stretch;
}

.wdl-info-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wdl-info-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--border-med);
  background: var(--bg-base);
}

@media (max-width: 600px) {
  .wdl-info-grid {
    grid-template-columns: 1fr;
  }
  .wdl-info-photo-col {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
  .wdl-info-photo-placeholder {
    min-height: 120px;
    font-size: 2rem;
  }
}

.wdl-body { padding: 16px; }

.wdl-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }

.wdl-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.wdl-meta { margin: 0; }
.wdl-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--border);
  gap: 10px;
}
.wdl-meta-row:last-child { border-bottom: none; }
.wdl-meta-dt {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.wdl-meta-dd {
  font-size: .84rem;
  color: var(--text-primary);
  text-align: right;
  margin: 0;
}

.wdl-notes-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
.wdl-notes-label {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 5px;
}
.wdl-notes-block p { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; }

.wdl-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wdl-section-title {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Drink tonight panel (dashboard) ─────────────────────────────────────── */
.drink-tonight-list { display: flex; flex-direction: column; }
.drink-tonight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.drink-tonight-item:last-child { border-bottom: none; padding-bottom: 0; }
.drink-tonight-item:hover .dti-name { color: var(--wine); }
.dti-bar {
  width: 4px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--dti-colour, var(--neutral-bar));
}
.dti-info { flex: 1; min-width: 0; }
.dti-name { font-size: .88rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dti-meta { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.dti-price { font-size: .82rem; font-weight: 500; color: var(--wine); flex-shrink: 0; }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — tablet & mobile
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet / small desktop (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {

  /* Sidebar: slide off-screen, no hamburger any more */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }

  /* Mobile header: centered brand, no hamburger/logout */
  .mobile-header { display: flex; justify-content: center; }

  /* Main content: top padding for mobile header, bottom padding for bottom nav */
  .main-content {
    margin-left: 0;
    padding: 16px 14px;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0));
  }

  /* Bottom nav & FAB: visible on mobile */
  .bottom-nav { display: flex; }
  .fab        { display: block; }

  /* Hide elements flagged as desktop-only */
  .hide-on-mobile { display: none !important; }

  /* Page header: stack title + actions vertically */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-header-actions {
    width: 100%;
    gap: 8px;
  }
  .page-header-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Form grid: single column */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.three-col { grid-template-columns: 1fr 1fr; }
  .col-span-2 { grid-column: span 1; }

  /* Form footer: full-width buttons on mobile */
  .form-footer {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .form-footer .btn {
    width: 100%;
    justify-content: center;
    padding: 13px;
  }

  /* Filters bar: push below mobile header, search full-width */
  .filters-bar { top: var(--header-h); }
  .search-wrap { flex: 1 1 100%; max-width: 100%; }
  .filter-select { flex: 1 1 calc(50% - 4px); width: auto; }
  .filters-bar > .btn { flex: 0 0 auto; }

  /* Wine list: wrap so add-bottles row fits below */
  .wine-list-item { flex-wrap: wrap; }
  .wli-add-bottles { display: flex; }

  /* Wine detail: stack photo above meta on tablet */
  .wine-detail-header { grid-template-columns: 1fr; }
  .wine-detail-img, .wine-detail-img-placeholder { width: 100%; height: 180px; object-fit: contain; }

  /* Data grid: single column */
  .data-grid { grid-template-columns: 1fr; }

  /* Wishlist: compact priority buttons */
  .filters-bar.wishlist-filters { flex-wrap: wrap; }

  /* Review note blocks: single column */
  .review-notes { grid-template-columns: 1fr; }

  /* Drinking window panel: keep 3 cols on tablet */
  .dw-panel { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* Dashboard stat grid: 3 columns on tablet */
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Wine card grid: 2 columns on tablet */
  .wine-cg { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Wine detail: single column on tablet */
  .wine-detail-layout { grid-template-columns: 1fr; }

  /* Action strip: 2 per row on tablet */
  .action-strip { flex-wrap: wrap; }
  .action-strip-form { flex: 1 1 100%; }
  .action-strip-btn { flex: 1 1 calc(50% - 4px); }

  /* Table responsive columns */
  .col-md-hide { display: none; }

  /* Touch targets */
  .btn-ghost { min-width: 40px; min-height: 40px; justify-content: center; }
}

/* ── Mobile (≤ 768px) — dashboard overflow + nav fixes ──────────────────── */
@media (max-width: 768px) {

  /* Overflow containment: prevent any child from pushing past the viewport */
  .main-content {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* All cards must not overflow */
  .card, .chart-card, .stat-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Dashboard page-header: keep title + Add Wine button on one row */
  .page-header--inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }
  .page-header--inline .page-subtitle { white-space: nowrap; }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }
  .stat-card { padding: 8px 10px; }
  .stat-value { font-size: 1rem; }
  .stat-sub { display: none; }

  /* Chart grids: minmax(0,1fr) prevents column children from overflowing */
  .chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  /* Lower row (Drinking Windows + Recently Added): stack vertically */
  .chart-grid--stack {
    grid-template-columns: 1fr;
  }

  /* Chart containers: constrain width so Chart.js doesn't break layout */
  .chart-card {
    width: 100%;
    overflow: hidden;
  }
  .chart-card canvas {
    width: 100% !important;
    max-width: 100%;
  }
  #typeChart    { max-height: 160px; }
  #countryChart { max-height: 160px; }
  #vintageChart { max-height: 140px; }

  /* Reduce section spacing */
  .page-header { margin-bottom: 16px; }
  .stat-grid   { margin-bottom: 12px; }
  .chart-grid  { margin-bottom: 12px; }
}

/* ── Phone (≤ 600px) ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Tighter padding */
  .main-content { padding-left: 12px; padding-right: 12px; }
  .page-title { font-size: 1.1rem; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid--stack { grid-template-columns: 1fr; }

  /* Wishlist: single column */
  .wishlist-grid { grid-template-columns: 1fr; }

  /* Auth card: tighter padding */
  .auth-card { padding: 24px 16px; }

  /* Form grid: always single column */
  .form-grid.three-col { grid-template-columns: 1fr; }

  /* Wine card grid: single column on phone */
  .wine-cg { grid-template-columns: 1fr; }

  /* Action strip: single column */
  .action-strip-btn { flex: 1 1 100%; }
  .action-strip-form { flex: 1 1 100%; }

  /* Page header buttons: each full width */
  .page-header-actions { flex-direction: column; }
  .page-header-actions form { width: 100%; }
  .page-header-actions form .btn { width: 100%; justify-content: center; }

  /* Drinking window panel: stack on small phones */
  .dw-panel { grid-template-columns: repeat(3, 1fr); }
  .dw-block { padding: 10px 8px; }
  .dw-count { font-size: 1rem !important; }

  /* Table: hide type/vintage columns */
  .col-sm-hide { display: none; }

  /* Review cards: tighter */
  .review-card { padding: 12px 12px; }

  /* Card padding: tighter */
  .card { padding: 14px; }
  .chart-card { padding: 12px 14px; }
}

/* ── Consume modal ────────────────────────────────────────────────────────── */
.consume-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, .45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.consume-modal-box {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  min-width: 300px;
  max-width: 380px;
  width: 90%;
}
.consume-modal-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.consume-modal-text {
  font-size: .88rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.consume-count-input {
  width: 100px;
  padding: 10px 12px;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  border: 0.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: inherit;
}
.consume-count-input:focus {
  outline: none;
  border-color: var(--wine);
}
.consume-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: space-evenly;
}

/* ── Post-consume prompt banner ──────────────────────────────────────────── */
.consume-prompt-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--wine);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.consume-prompt-text {
  font-size: .9rem;
  color: var(--text-primary);
}
.consume-prompt-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Consume button on cards ──────────────────────────────────────────────── */
.consume-btn {
  color: var(--wine);
}
.consume-btn:hover {
  color: var(--wine-light);
  background: var(--wine-bg, rgba(139,26,46,.06));
}

/* ── Wine card: identity header (producer + label/varietal + actions) ──────── */
.wine-cg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.wine-cg-identity {
  flex: 1;
  min-width: 0;
}

.wine-cg-producer-link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wine-cg-producer-link:hover { color: var(--wine); }

.wine-cg-label-var {
  font-size: .84rem;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Card name dot separator ─────────────────────────────────────────────── */
.wine-cg-dot {
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Previously Consumed list ────────────────────────────────────────────── */
.consumed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.consumed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left: 5px solid var(--item-bar, var(--neutral-bar));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background .1s;
}
.consumed-row:hover { background: #faf8f5; }
.consumed-main { flex: 1; min-width: 0; }
.consumed-title {
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.consumed-meta {
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.consumed-dot { color: var(--text-muted); font-weight: 400; }
.consumed-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.consumed-rating {
  font-size: .82rem;
  color: var(--gold);
  white-space: nowrap;
}
.consumed-notes {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.consumed-price {
  font-size: .84rem;
  font-weight: 500;
  color: var(--wine);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Quick Taste — Rating slider
══════════════════════════════════════════════════════════════════════════ */
.qt-rating-row {
  margin-bottom: 4px;
}
.qt-rating-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-primary);
}
.qt-rating-val {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--wine);
  min-width: 60px;
  text-align: right;
}
.qt-rating-slider {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 3px;
  background: linear-gradient(to right, var(--wine) var(--fill, 50%), var(--border-med) var(--fill, 50%));
  outline: none;
  cursor: pointer;
  display: block;
}
.qt-rating-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--wine);
  cursor: pointer;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border-med);
}
.qt-rating-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--wine);
  cursor: pointer;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border-med);
}
.qt-rating-scale {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Quick Taste — Taste sliders
══════════════════════════════════════════════════════════════════════════ */
.qt-sliders { display: flex; flex-direction: column; gap: 10px; }

.qt-row {
  display: grid;
  grid-template-columns: 88px 46px 1fr 46px 36px 22px;
  align-items: center;
  gap: 0 8px;
}
.qt-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-primary);
}
.qt-anchor {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.qt-left  { text-align: right; }
.qt-right { text-align: left; }

.qt-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  background: linear-gradient(to right, var(--wine) var(--fill, 50%), var(--border-med) var(--fill, 50%));
  outline: none;
  cursor: pointer;
  transition: opacity .15s;
}
.qt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--wine);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border-med);
}
.qt-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--wine);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border-med);
}
/* Unset state — muted until touched */
.qt-slider:not(.is-set) {
  opacity: .35;
}
.qt-slider:not(.is-set)::-webkit-slider-thumb { background: var(--text-muted); box-shadow: none; }
.qt-slider:not(.is-set)::-moz-range-thumb     { background: var(--text-muted); box-shadow: none; }

.qt-val {
  font-size: .8rem;
  font-weight: 500;
  color: var(--wine);
  text-align: right;
  min-width: 28px;
}
.qt-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.qt-clear:hover { color: var(--wine); }

/* Disabled row (tannin for white/rosé/sparkling/orange) */
.qt-row--disabled .qt-label,
.qt-row--disabled .qt-anchor,
.qt-row--disabled .qt-val   { opacity: .35; }
.qt-row--disabled .qt-slider { opacity: .2; cursor: not-allowed; }
.qt-row--disabled .qt-clear  { opacity: .2; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   Flavour Descriptor System
══════════════════════════════════════════════════════════════════════════ */
.flavour-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Suggestion pill row */
.flavour-pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 34px;
  margin-bottom: 10px;
}
.flavour-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Individual suggestion pills (unselected state) */
.flavour-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 0.5px solid #e5e0d8;
  background: #ffffff;
  color: var(--text-secondary);
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .1s, color .1s, background .1s;
  white-space: nowrap;
  line-height: 1.3;
}
.flavour-pill:hover  { opacity: .85; }
.flavour-pill:active { opacity: .7; }

/* Category colour variants — border + text */
.flavour-pill--fruit     { border-color: #b54040; color: #b54040; }
.flavour-pill--earth     { border-color: #4a7a55; color: #4a7a55; }
.flavour-pill--oak       { border-color: #7a5c3a; color: #7a5c3a; }
.flavour-pill--structure { border-color: #3a6b8a; color: #3a6b8a; }

.flavour-pill--fruit:hover     { background: #b5404010; }
.flavour-pill--earth:hover     { background: #4a7a5510; }
.flavour-pill--oak:hover       { background: #7a5c3a10; }
.flavour-pill--structure:hover { background: #3a6b8a10; }

/* Refresh button */
.flavour-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 0.5px solid #e5e0d8;
  background: #ffffff;
  color: var(--text-muted);
  font-size: .75rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .1s, color .1s;
}
.flavour-refresh-btn:hover:not(:disabled) {
  border-color: #8b1a2e;
  color: #8b1a2e;
}
.flavour-refresh-icon {
  font-size: .9rem;
  line-height: 1;
}
.flavour-refresh-btn--disabled,
.flavour-refresh-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Selected chips area */
.flavour-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 6px 0 2px;
}
.flavour-empty-hint {
  font-size: .75rem;
  color: var(--text-muted);
  align-self: center;
  font-style: italic;
}

/* Selected chips (active/filled state) */
.flavour-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 12px;
  border-radius: 20px;
  border: 0.5px solid #8b1a2e;
  background: #8b1a2e;
  color: #ffffff;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
  transition: background .1s, border-color .1s;
}
.flavour-chip:hover { background: #a01e35; border-color: #a01e35; }

/* Selected chips retain burgundy bg; category shown via subtle left border */
.flavour-chip--fruit     { border-left: 3px solid #d47070; }
.flavour-chip--earth     { border-left: 3px solid #7ab885; }
.flavour-chip--oak       { border-left: 3px solid #c09a70; }
.flavour-chip--structure { border-left: 3px solid #70a8c8; }

.flavour-chip-x {
  font-size: .85rem;
  opacity: .75;
  line-height: 1;
}

/* Flavour tags in review cards (wine detail) */
.flavour-tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 4px;
}
.flavour-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  border: 0.5px solid #e5e0d8;
  background: #ffffff;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   Character chips
══════════════════════════════════════════════════════════════════════════ */
.char-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.char-chip {
  display: inline-flex;
  cursor: pointer;
}
.char-chip input { display: none; }
.char-chip span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 0.5px solid var(--border-med);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--text-secondary);
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
}
.char-chip input:checked + span {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}
.char-chip:hover span { border-color: var(--wine); color: var(--wine); }
.char-chip input:checked + span:hover { background: var(--wine-light, #a0243c); }

/* ══════════════════════════════════════════════════════════════════════════
   Buy Again segmented control
══════════════════════════════════════════════════════════════════════════ */
.buy-again-ctrl {
  display: inline-flex;
  width: fit-content;
  border: 0.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.buy-again-opt { display: contents; }
.buy-again-opt input { display: none; }
.buy-again-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 24px;
  font-size: .83rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-right: 0.5px solid var(--border-med);
  transition: background .12s, color .12s;
  user-select: none;
  white-space: nowrap;
}
.buy-again-opt:last-of-type span { border-right: none; }
.buy-again-opt input:checked + span {
  background: var(--wine);
  color: #fff;
}
.buy-again-opt:hover span { background: var(--bg-base); }
.buy-again-opt input:checked + span:hover { background: var(--wine); }

/* ══════════════════════════════════════════════════════════════════════════
   Rating display badges
══════════════════════════════════════════════════════════════════════════ */
.rating-pill {
  font-size: .78rem;
  font-weight: 500;
  color: var(--wine);
}
.review-rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--wine);
}
.wdl-rating {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}
.wdl-rating-num  { font-size: 1.6rem; font-weight: 600; color: var(--wine); line-height: 1; }
.wdl-rating-denom { font-size: .95rem; color: var(--text-muted); }

/* Buy again badge in review cards */
.review-buy-badge {
  font-size: .72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  border: 0.5px solid currentColor;
}
.review-buy-badge.buy-yes   { color: #2d7a4a; background: #2d7a4a12; }
.review-buy-badge.buy-maybe { color: var(--amber, #b07a20); background: #b07a2012; }
.review-buy-badge.buy-no    { color: var(--text-muted); background: var(--bg-base); }

/* Character tag pills in review cards */
.review-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.review-tag {
  font-size: .7rem;
  padding: 2px 8px;
  border: 0.5px solid var(--border-med);
  border-radius: 10px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   Taste profile bars (in review cards)
══════════════════════════════════════════════════════════════════════════ */
.taste-profile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 20px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}
.taste-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 24px;
  align-items: center;
  gap: 6px;
}
.taste-bar-label {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.taste-bar-track {
  height: 4px;
  background: var(--border-med);
  border-radius: 2px;
  overflow: hidden;
}
.taste-bar-fill {
  height: 100%;
  background: var(--wine);
  border-radius: 2px;
  transition: width .3s ease;
}
.taste-bar-val {
  font-size: .72rem;
  color: var(--wine);
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   Occasion Reminders
══════════════════════════════════════════════════════════════════════════ */
.reminder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border);
}
.reminder-row:last-child { border-bottom: none; }
.reminder-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-med);
  flex-shrink: 0;
}
.reminder-dot--soon { background: var(--wine); }
.reminder-info { flex: 1; min-width: 0; }
.reminder-label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reminder-wine {
  font-size: .75rem;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reminder-wine:hover { color: var(--wine); }
.reminder-date {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reminder form (in wine detail) */
.reminder-form-panel {
  background: var(--bg-base);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}
.reminder-list { margin-top: 12px; }
.reminder-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: .83rem;
}
.reminder-list-item:last-child { border-bottom: none; }

@media (max-width: 600px) {
  .qt-row {
    grid-template-columns: 76px 38px 1fr 38px 30px 20px;
    gap: 0 5px;
  }
  .qt-label  { font-size: .75rem; }
  .qt-anchor { font-size: .67rem; }
  .taste-profile { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Grape Varietal Multi-select
══════════════════════════════════════════════════════════════════════════ */
.grape-input-wrap { position: relative; }

.grape-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.grape-chips:empty { display: none; }

.grape-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 10px;
  background: var(--bg-base);
  border: 0.5px solid var(--border-med);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
}

.grape-chip-x {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .6rem;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color .1s, background .1s;
}
.grape-chip-x:hover { color: var(--wine); background: rgba(139,26,46,.08); }

.grape-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 3px 0;
}
.grape-dropdown[hidden] { display: none; }

.grape-dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .08s;
  font-size: .86rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.grape-dropdown-item:hover,
.grape-dropdown-item.active { background: var(--bg-base); }

.grape-dropdown-syn {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 1px;
}