/* Bar Calc — Responsive & Mobile */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0f0f0d; --card: #1a1c17; --card2: #22251d; --text: #f0ede5;
    --muted: #7a7d72; --border: #2e3028; --inp: #1e211a;
  }
}
@media(prefers-color-scheme:dark){
@media(max-width:600px){
  .hdr-acts{gap:4px;}
  .hbtn{width:36px;height:36px;font-size:16px;}
}
.hbtn-menu{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:1.5px solid var(--border);
  cursor:pointer;transition:all .18s;color:var(--muted);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.hbtn-menu:hover{ background:var(--card);border-color:var(--g);color:var(--text); }
.hbtn-menu:active{ transform:scale(.95); }
/* Main menu panel */
#mainMenuPanel{
  position:fixed;right:10px;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:18px;
  z-index:8000;
  width:min(240px,calc(100vw - 20px));
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  overflow:hidden;
  animation:fadeIn .15s ease;
}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;cursor:pointer;
  border:none;background:transparent;
  width:100%;text-align:left;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);transition:background .12s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.menu-item:hover{ background:var(--card2); }
.menu-item:active{ background:var(--card2);transform:scale(.98); }
.menu-item svg{ flex-shrink:0;color:var(--muted); }
.menu-item .menu-label{ flex:1; }
.menu-item .menu-badge{
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:6px;
  background:var(--card2);color:var(--muted);
}
.menu-divider{ height:1px;background:var(--border);margin:4px 0; }
.hbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--card2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .18s;color:var(--text);}
.hbtn:hover{border-color:#2d8c50;transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,140,80,0.15);}
.hbtn:active{transform:translateY(0);}
.hbtn-svg{color:var(--muted);}
.hbtn-svg:hover{color:#2d8c50;}
.hbtn:hover{border-color:var(--g);background:var(--gl);}

@media(max-width:400px){
  .fresh-ing-fields{grid-template-columns:1fr 1fr;}
}
.fresh-ing-field label{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;}

/* Yield info */
.fresh-ing-yield{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;background:rgba(42,140,63,0.07);border-radius:8px;
  font-size:11.5px;color:var(--muted);
}
.fresh-ing-yield b{color:var(--fresh-primary);font-family:'Fraunces',serif;font-size:13px;}
@media(max-width:400px){
  .capsate-metrics{grid-template-columns:1fr 1fr;}
}
.capsate-metric{
  background:var(--card2);
  border-radius:9px;
  padding:7px 8px;
  text-align:center;
}
.capsate-metric-lbl{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--muted);
  margin-bottom:3px;
}
.capsate-metric-val{
  font-family:'Fraunces',serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

/* Saved items */
.capsate-saved-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:7px;
  cursor:pointer;
  transition:all .2s;
}
.capsate-saved-item:hover{
  border-color:#5c35a8;
  transform:translateX(3px);
  background:rgba(92,53,168,0.05);
  box-shadow:0 3px 10px rgba(92,53,168,0.12);
}
.capsate-saved-name{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--text);}
.capsate-saved-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.capsate-saved-meta b{color:#5c35a8;}
@media (max-width: 440px){
  .coffee-ing-fields{
    grid-template-columns:1fr 1fr;
  }
  .coffee-ing-fields > div:last-child{grid-column:span 2;}
}
.coffee-ing-field label{
  display:block;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:3px;
}
.coffee-ing-cost{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  background:rgba(45,140,80,0.06);
  border-radius:9px;
  font-size:12px;
  color:var(--muted);
}
.coffee-ing-cost b{
  font-family:'Fraunces',serif;
  font-size:14px;
  font-weight:700;
  color:#2d8c50;
}
@media (max-width: 440px){
  .sj-hero, .cord-hero, .pb-hero, .cost-hero{
    padding: 1.25rem !important;
  }
  .sj-hero-title, .cord-hero-title, .pb-hero-title, .cost-hero-title{
    font-size: 22px !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   PREMIUM SAVE BUTTONS — adaptive per section
   Base class .save-btn + section modifiers:
   - .save-btn-cost      → emerald + gold (Cost section)
   - .save-btn-coffee    → emerald + warm amber (Coffee mode in Cost)
   - .save-btn-prebatch  → teal + coral (Pre-Batch section)
   ═══════════════════════════════════════════════════════════ */
.save-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 20px;
  margin:14px 0 6px 0;
  border:none;
  border-radius:14px;
  font-family:'Outfit',sans-serif;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:#fff;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s ease,
             filter .25s ease;
}
.save-btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
  transition:left .6s ease;
  pointer-events:none;
}
.save-btn:hover::before{left:100%;}
.save-btn:hover{transform:translateY(-2px);}
.save-btn:active{transform:translateY(0) scale(0.98);transition-duration:.1s;}

.save-btn svg{
  flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

@media(hover:none){
  .card:hover,.an-card:hover{transform:none;box-shadow:none;}
  .capsate-saved-item:hover{transform:none;}
  .card:active{transform:scale(.99);box-shadow:0 4px 16px rgba(0,0,0,.2);}
}