:root{
  /* "Copper & Smoke" — warm near-black base, copper as the single primary
     accent, forest green for positive/in-stock, rust for the third
     match-card accent. Variable names kept as-is from the prior palette
     (--gold, --teal, --pink) to avoid touching every reference across the
     app — only the values changed. */
  --bg:#14110E;
  --surface:#201A15;
  --surface-2:#2A2119;
  --line:#362C22;
  --gold:#C97C4A;
  --teal:#5CA876;
  --pink:#A6553F;
  --amber:#D4A24C;
  --ink:#F3ECE1;
  --ink-muted:#A89A87;
  --ink-faint:#6E6153;
  --danger:#C4544A;
  --r-lg:20px;
  --r-md:16px;
  --r-sm:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg);}
body{
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit; color:inherit; background:none; border:none; cursor:pointer;}
a{color:var(--gold);}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;}

.app{
  max-width:480px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; position:relative;
  background:var(--bg);
}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:22px 20px 6px;}
.brand{display:flex; align-items:center; gap:8px;}
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-0.02em;
  color:var(--gold);
}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px;}
.auth-logo{width:92px; height:92px;}
.auth-brand .brand-name{font-size:24px;}
.greeting{display:flex; align-items:center; gap:10px;}
.greeting span{font-size:13.5px; color:var(--ink-muted);}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px;
}

.content{flex:1; padding:4px 20px 104px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px;}
.section-head h2{
  font-family:var(--font-display); font-size:12.5px; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--ink);
}
.section-head .meta{font-size:12px; color:var(--ink-faint);}

.bar-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
.bottle-tile{position:relative;}
.bottle-toggle{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; transition:border-color .15s ease, opacity .15s ease, transform .1s ease;
}
.bottle-toggle:hover{border-color:#4A3B2C;}
.bottle-toggle:active{transform:scale(.96);}
.bottle-tile[data-have="false"] .bottle-toggle{opacity:.4;}
.bottle-tile .name{
  font-size:11px; font-weight:500; line-height:1.25; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; max-width:100%; min-width:0;
}
.bottle-remove{
  position:absolute; top:-6px; right:-6px; z-index:2;
  width:20px; height:20px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-faint); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:.75; transition:opacity .15s ease, color .15s ease, border-color .15s ease;
}
.bottle-remove:hover{opacity:1; color:var(--danger); border-color:var(--danger);}
.stock-pill{font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:20px; white-space:nowrap;}
.stock-pill.in{color:var(--teal); background:rgba(92,168,118,.12);}
.stock-pill.out{color:var(--ink-faint); background:rgba(110,97,83,.15);}
.stock-pill.needs-category{color:var(--gold); background:rgba(201,124,74,.14);}
.subsection-label{font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin:14px 2px 8px;}
.bar-grid + .subsection-label{margin-top:16px;}

.add-tile{
  background:transparent; border:1.5px dashed var(--line); border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--gold); font-size:10.5px; font-weight:600; padding:12px 4px;
  transition:border-color .15s ease, background .15s ease;
}
.add-tile:hover{border-color:var(--gold); background:rgba(201,124,74,.08);}

.match-row{display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
.match-row::-webkit-scrollbar{display:none;}
.match-card{
  position:relative; flex:0 0 150px; background:var(--surface); border:1px solid var(--accent, var(--line));
  border-radius:var(--r-lg); overflow:hidden; text-align:left;
}
.match-link{display:block; color:inherit; text-decoration:none;}
.match-fav{
  position:absolute; top:8px; right:8px; z-index:2;
  width:24px; height:24px; border-radius:50%;
  background:rgba(20,17,14,.55); color:var(--ink-faint); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, background .15s ease;
}
.match-fav.is-fav{color:var(--gold); background:rgba(20,17,14,.7);}
.match-fav:hover{color:var(--gold);}
.match-glass{height:118px; display:flex; align-items:center; justify-content:center; background:var(--surface-2);}
.match-body{padding:10px 12px 13px;}
.match-name{font-size:13px; font-weight:600; line-height:1.25; margin-bottom:3px;}
.match-score{font-size:11px; font-weight:700; color:var(--accent);}
.match-missing{font-size:11px; color:var(--ink-faint); margin-top:5px;}
.empty-note{font-size:12.5px; color:var(--ink-faint); padding:8px 2px;}

.favorites-list{list-style:none;}
.favorite-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500;
}
.favorites-list li + li{margin-top:8px;}
.favorite-glass{color:var(--ink-faint); font-size:12px; font-weight:400;}

.buy-list{list-style:none;}
.buy-list li + li{margin-top:8px;}
.buy-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.buy-name{font-size:13.5px; font-weight:600; color:var(--ink);}
.buy-context{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.buy-btn{
  flex-shrink:0; padding:8px 16px; border-radius:var(--r-sm); background:var(--gold);
  color:var(--bg); font-size:12.5px; font-weight:700; text-decoration:none;
}

.stat-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;}
.stat-grid-single{grid-template-columns:1fr; max-width:200px;}
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 12px; text-align:center;
}
.stat-number{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--gold);}
.stat-label{font-size:11px; color:var(--ink-faint); margin-top:4px;}

.best-buy-card{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--gold); border-radius:var(--r-md);
  padding:16px;
}
.best-buy-name{font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink);}
.best-buy-context{font-size:12px; color:var(--ink-faint); margin-top:4px; max-width:340px;}

.map-list{list-style:none;}
.map-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px; margin-bottom:10px;
}
.map-name{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:10px;}

.nav{
  position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:448px; margin:0 auto;
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 8px;
  background:rgba(42,33,25,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:999px; box-shadow:0 12px 28px rgba(0,0,0,.4);
  z-index:10;
}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-faint); font-size:10px; font-weight:500; padding:4px 10px; border-radius:10px;}
.tab svg{width:20px; height:20px;}
.tab.active{color:var(--ink);}
.tab.primary{
  background:var(--gold); color:var(--bg);
  border-radius:50%; width:46px; height:46px; justify-content:center;
  margin-top:-24px; box-shadow:0 6px 18px rgba(201,124,74,.35);
}
.tab.primary span{display:none;}

.modal-backdrop{position:fixed; inset:0; background:rgba(20,17,14,.45); display:none; align-items:center; justify-content:center; padding:24px; z-index:50;}
.modal-backdrop.open{display:flex;}
.modal{
  background:rgba(32,26,21,.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:20px; width:100%; max-width:320px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal h3{font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:14px;}
.modal input{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; color:var(--ink); font-size:14px; margin-bottom:16px; font-family:inherit;
}
.modal input:focus{outline:none; border-color:var(--gold);}
.picker-label{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
.autocomplete-wrap{position:relative; margin-bottom:16px;}
.autocomplete-wrap input{margin-bottom:0;}
.autocomplete-dropdown{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  max-height:220px; overflow-y:auto; box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.autocomplete-dropdown.open{display:block;}
.autocomplete-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px; font-size:13px; color:var(--ink); cursor:pointer;
}
.autocomplete-item.is-active, .autocomplete-item:hover{background:rgba(201,124,74,.12);}
.autocomplete-cat{font-size:11px; color:var(--ink-faint); flex-shrink:0;}
.category-picker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.category-chip{
  padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:transparent;
  color:var(--ink-muted); font-size:12px; font-weight:500;
}
.category-chip.is-selected{background:var(--gold); border-color:var(--gold); color:var(--bg); font-weight:700;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px;}

.queued-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.queued-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 6px 6px 12px; border-radius:20px; background:var(--surface-2);
  border:1px solid var(--line); font-size:12.5px; color:var(--ink);
}
.queued-chip.is-new{border-color:var(--gold); color:var(--gold);}
.queued-remove{
  width:16px; height:16px; border-radius:50%; background:var(--line); flex-shrink:0;
  color:var(--ink-faint); font-size:10px; display:flex; align-items:center; justify-content:center;
}
.queued-remove:hover{background:var(--danger); color:var(--ink);}
.new-item-row{margin-bottom:14px;}
.new-item-name{font-size:12.5px; font-weight:600; color:var(--gold); margin-bottom:6px;}
#modalAdd:disabled{opacity:.5; cursor:default;}
.btn-ghost{padding:9px 14px; border-radius:var(--r-sm); color:var(--ink-muted); font-size:13px; font-weight:600;}
.btn-ghost:hover{color:var(--ink);}
.btn-primary{padding:9px 16px; border-radius:var(--r-sm); background:var(--gold); color:var(--bg); font-size:13px; font-weight:700; cursor:pointer;}
.btn-primary:disabled{opacity:.6; cursor:default;}

/* Auth pages (login / signup) */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--bg);
}
.auth-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px;}
.auth-card .brand{justify-content:center; margin-bottom:22px;}
.auth-card h1{font-family:var(--font-display); font-size:16px; font-weight:600; text-align:center; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--ink-muted); margin-bottom:6px;}
.field input, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; color:var(--ink); font-size:14px; font-family:inherit; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
.btn-block{width:100%; padding:12px; border-radius:var(--r-sm); background:var(--gold); color:var(--bg); font-size:14px; font-weight:700; margin-top:6px;}
.auth-switch{text-align:center; font-size:13px; color:var(--ink-muted); margin-top:18px;}
.error-banner{background:rgba(196,84,74,.12); border:1px solid rgba(196,84,74,.35); color:var(--danger); font-size:13px; padding:10px 12px; border-radius:var(--r-sm); margin-bottom:16px;}
.success-banner{background:rgba(92,168,118,.12); border:1px solid rgba(92,168,118,.35); color:var(--teal); font-size:13px; padding:10px 12px; border-radius:var(--r-sm); margin-bottom:16px;}
.form-intro{color:var(--ink-faint); font-size:12.5px; margin:-4px 0 18px;}

.ingredient-row-input{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px;}
.ingredient-row-input .ingredient-name-wrap{flex:2; position:relative;}
.ingredient-row-input .ingredient-name-input,
.ingredient-row-input .ingredient-measure-input{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--ink); font-size:13.5px; font-family:inherit;
}
.ingredient-row-input .ingredient-measure-input{flex:1;}
.ingredient-row-input .ingredient-name-input:focus,
.ingredient-row-input .ingredient-measure-input:focus{outline:none; border-color:var(--gold);}
.remove-row-btn{
  flex-shrink:0; width:38px; height:38px; border-radius:var(--r-sm); background:var(--surface);
  border:1px solid var(--line); color:var(--ink-faint); font-size:15px;
}
.remove-row-btn:hover{color:var(--danger); border-color:var(--danger);}
.add-row-btn{
  color:var(--gold); font-size:13px; font-weight:600; padding:8px 4px; margin-bottom:16px;
}

/* Recipe detail page */
.app-solo{max-width:560px;}
.recipe-topbar{display:flex; align-items:center; justify-content:space-between; padding:22px 20px 6px;}
.back-link{color:var(--ink-muted); font-size:13.5px; text-decoration:none;}
.back-link:hover{color:var(--ink);}
.fav-toggle{
  width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  color:var(--ink-faint); font-size:16px; display:flex; align-items:center; justify-content:center;
}
.fav-toggle.is-fav{color:var(--gold); border-color:var(--gold);}
.recipe-title{font-family:var(--font-display); font-size:22px; font-weight:700; margin:8px 0 4px;}
.recipe-meta{color:var(--ink-muted); font-size:13px; margin-bottom:20px; text-transform:capitalize;}
.recipe-credit{color:var(--ink-faint); font-size:12.5px; margin:-12px 0 20px;}
.recipe-credit a{color:var(--ink-muted); text-decoration:underline;}
.ingredient-list{list-style:none;}
.ingredient-row{
  display:flex; align-items:center; gap:10px; padding:10px 0; font-size:14px;
  border-bottom:1px solid var(--line);
}
.ingredient-status{width:18px; text-align:center; flex-shrink:0;}
.ingredient-row.have .ingredient-status{color:var(--teal);}
.ingredient-row.missing .ingredient-status{color:var(--ink-faint);}
.ingredient-row.missing .ingredient-name{color:var(--ink-faint);}
.ingredient-name{flex:1;}
.optional-tag{color:var(--ink-faint); font-size:12px;}
.ingredient-measure{color:var(--ink-muted); font-size:12.5px;}
.recipe-instructions{font-size:14px; line-height:1.6; color:var(--ink); padding-bottom:20px;}

.profile-info{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:4px 16px; margin-bottom:20px;}
.profile-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; font-size:13.5px;}
.profile-row + .profile-row{border-top:1px solid var(--line);}
.profile-label{color:var(--ink-muted);}
.logout-link{display:block; text-align:center; margin-top:22px; font-size:13px; color:var(--ink-faint);}
.logout-link:hover{color:var(--danger);}

@media (min-width: 900px){
  .app{
    max-width:1160px; flex-direction:row;
    background:var(--bg);
  }
  .nav{
    position:sticky; top:0; left:auto; right:auto; bottom:auto; margin:0; order:-1;
    width:96px; height:100vh; flex:0 0 96px;
    flex-direction:column; justify-content:flex-start; gap:30px; padding:32px 0 0;
    background:transparent; backdrop-filter:none; border-right:1px solid var(--line);
    border-radius:0; box-shadow:none;
  }
  .tab.primary{margin-top:0;}
  .tab.primary span{display:block; font-size:9.5px;}
  .shell{flex:1; min-width:0;}
  .topbar{padding:30px 40px 8px;}
  .content{padding:4px 40px 60px;}
  .bar-grid{grid-template-columns:repeat(7, minmax(0,1fr)); gap:14px;}
  .match-row{overflow-x:visible; flex-wrap:wrap;}
  .match-card{flex:0 0 208px;}
  .match-glass{height:150px;}
}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }