/* =====================================================================
   FOOD v1.0 (same logic, own essence)
   ===================================================================== */

/* FOOD (Sprint B) - reduce inline styles, add professional structure */
.food-header{ margin-bottom:12px; }
.food-header .brand-section-row{ margin-bottom:12px; }
.food-header-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.food-title{ letter-spacing:0.06em; }
.food-subtitle{ max-width:70ch; }
.food-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:12px; min-width:0; }
.food-toolbar > *{ min-width:0; }
.food-header-top{ min-width:0; }
.food-header-top > *{ min-width:0; }
.food-header-top .btn-arch{ flex:0 0 auto; }

.food-detail-actions{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }

.food-tabs{ display:flex; gap:5px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:5px; border:1px solid rgba(255,255,255,0.10); border-radius:16px; background:rgba(255,255,255,0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom:12px; scrollbar-width:none; }
.food-tabs::-webkit-scrollbar{ display:none; }
.food-tab{ flex:0 0 auto; white-space:nowrap; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.10); color:var(--txt); font-weight:800; letter-spacing:0.02em; cursor:pointer; font-size:0.78rem; }
.food-tab.active{ border-color: rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }
.food-tab-panel{ display:none; }
.food-tab-panel.active{ display:block; }

.chip-row{
  display:flex;
  gap:10px;
  flex-wrap: nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  /* Allow horizontal pan gestures on touch devices. Without this, the
     category bar on mobile could cause the entire page to shift when
     trying to scroll horizontally. */
  touch-action: pan-x;
  /* Snap children (chips) to the start when scrolling horizontally. This
     mirrors the scroll behavior of recipe categories and prevents
     partial chips from showing at the edges. */
  scroll-snap-type: x mandatory;

  /* Prevent horizontal overscroll (rubber-banding) so the chip bar doesn't
     scroll beyond its content. This mirrors the edge resistance seen in
     other sections. */
  overscroll-behavior-x: contain;
  padding-bottom:2px;
}

.chip-row::-webkit-scrollbar{ display:none; }

.chip{
  appearance:none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border:1px solid var(--border-dim);
  background:rgba(0,0,0,0);
  color:var(--txt-dim);
  padding:10px 14px;
  border-radius:20px;
  font-size:0.85rem;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  transition:all 0.2s;
  line-height: 1;
  /* Prevent chips from shrinking when container width is small. This ensures
     category chips maintain their width and remain fully visible when
     overflowing horizontally. Without this, flexbox may compress chips,
     causing them to overlap or truncate on narrow screens (as seen in the
     user-reported bug). */
  flex: 0 0 auto;
  flex-shrink: 0;

  /* Snap chips to the start when scrolling horizontally. This provides
     a consistent feel similar to the recipe categories in the drinks
     section. */
  scroll-snap-align: start;
}

.chip:hover{ border-color:rgba(255,255,255,0.16); color:var(--txt-main); }

.chip.active{
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:var(--txt-main);
}

/* Responsive adjustments for small screens (≤480px) */
@media (max-width: 480px){
  /* Keep the chip row in a single horizontal line even on small screens. Chips
     will scroll horizontally instead of wrapping to a new line. */
  .chip-row{
    flex-wrap: nowrap;
  }
  /* Reduce padding and font size so more chips fit comfortably */
  .chip{
    font-size:0.75rem;
    padding:8px 12px;
  }
  /* Align icons and text tightly on mobile */
  .chip i{
    font-size:0.85em;
  }
}

/* ------------------------------------------------------------------------
   Utility class to hide native scrollbars. Used on horizontally scrollable
   containers such as food category bars and premium chips.  */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.food-thumb,
.food-visual{
  border:1px solid var(--border-dim);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  position:relative;
  overflow:hidden;
}

.food-thumb{ width:64px; height:64px; flex:0 0 64px; }
.food-visual{ width:92px; height:92px; flex:0 0 92px; }

/* Icon-based marks (FOOD v2 base) */
.food-cat-mark{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  color:var(--accent);
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.food-cat-mark svg{ display:block; }
.food-cat-mark img{ width:26px; height:26px; border-radius:10px; object-fit:cover; display:block; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }

.food-chip-mark{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.32));
  box-shadow:0 8px 18px rgba(0,0,0,0.24);
}
.food-chip-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.food-chip-mark svg{
  width:14px;
  height:14px;
  display:block;
}
.food-chip-row .chip{
  gap:8px;
}
.food-chip-row .chip.active .food-chip-mark{
  border-color:rgba(214,162,76,0.28);
  box-shadow:0 0 0 1px rgba(214,162,76,0.14), 0 10px 22px rgba(0,0,0,0.30);
}

.food-thumb-icon{
  width:64px;
  height:64px;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid var(--border-dim);
  color:rgba(255,255,255,0.72);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  position:relative;
  overflow:hidden;
}
.food-thumb-icon::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at 30% 25%, rgba(214,162,76,0.12), rgba(0,0,0,0) 60%);
  opacity:0.55;
  pointer-events:none;
}
.food-thumb-icon svg{ position:relative; z-index:1; }
.food-thumb-icon img{ width:38px; height:38px; border-radius:12px; object-fit:cover; display:block; position:relative; z-index:1; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }

.food-card:hover .food-thumb-icon{
  border-color: rgba(214,162,76,0.30);
  color: rgba(214,162,76,0.92);
  box-shadow: 0 0 0 1px rgba(214,162,76,0.12), 0 18px 44px rgba(0,0,0,0.42);
}

.food-detail-mark{
  width:92px;
  height:92px;
  flex:0 0 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(214,162,76,0.92);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  position:relative;
  overflow:hidden;
}
.food-detail-mark::after{
  content:"";
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle at 35% 25%, rgba(214,162,76,0.16), rgba(0,0,0,0) 62%);
  opacity:0.6;
  pointer-events:none;
}
.food-detail-mark svg{ position:relative; z-index:1; }
.food-detail-mark img{ width:56px; height:56px; border-radius:16px; object-fit:cover; display:block; position:relative; z-index:1; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }

/* Visual variants (subtle, premium, non-literal) */
.food-thumb.plate::before,
.food-visual.plate::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:radial-gradient(circle at 40% 30%, rgba(255,255,255,0.10), rgba(0,0,0,0));
}

.food-thumb.tray::before,
.food-visual.tray::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0));
}

.food-thumb.jar::before,
.food-visual.jar::before{
  content:"";
  position:absolute;
  left:50%; top:12px;
  width:44%; height:70%;
  transform:translateX(-50%);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
}

.food-thumb.bowl::before,
.food-visual.bowl::before{
  content:"";
  position:absolute;
  left:50%; bottom:14px;
  width:70%; height:46%;
  transform:translateX(-50%);
  border-radius:0 0 24px 24px;
  border:1px solid rgba(255,255,255,0.14);
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0));
}

.food-card{ cursor:pointer; }

.warn{
  border:1px solid rgba(255, 186, 0, 0.35);
  background:rgba(255, 186, 0, 0.08);
  color:var(--txt-main);
  padding:12px 14px;
  border-radius:14px;
}
/* TARJETAS TECH */
.tech-card {
    background: rgba(18,18,18,0.85);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* Premium interaction (used heavily in DRINKS) */
.drinks-screen .tech-card{
    cursor: pointer;
}
.drinks-screen .tech-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.drinks-screen .tech-card:active{
    transform: translateY(0px) scale(0.99);
    background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(0,0,0,0.18));
}


/* ARCHITECTURAL BUTTONS */
.btn-arch {
    width: 100%;
    padding: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--txt-main);
    font-family: var(--font-data);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s;
}
.btn-arch:active { transform: scale(0.97); background: rgba(255,255,255,0.08); }

.btn-arch.primary {
    background: var(--txt-main);
    color: #0E0E10;
    border-color: var(--txt-main);
    font-weight: 800;
}

/* Danger variant (used for delete/irreversible actions) */
.btn-arch.danger{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.08);
  color: var(--danger);
}
.btn-arch.danger:hover{ border-color: rgba(255,80,80,0.55); background: rgba(255,80,80,0.12); }

/* Disabled state (used across Business/CRM/Operations) */
.btn-arch:disabled,
.btn-arch[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(20%);
}


/* Legacy primary CTA compatibility (prevents iOS default blue buttons) */
.btn-primary {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--txt-main);
    font-family: var(--font-data);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.btn-primary:hover {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.035);
}
.btn-primary:active {
    transform: scale(0.98);
    background: var(--bg-highlight);
}
.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(20%);
}

/* INPUTS DE DATOS */
.input-line {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-dim);
    color: var(--accent);
    font-family: var(--font-data);
    font-size: 1.5rem;
    text-align: center;
    width: 200px;
    padding: 10px;
    margin-top: 20px;
}
.input-line:focus { outline: none; border-color: var(--accent); }

/* ======================================================================
   BREW TIMER PRO (Ring + Steps Modal)
   ====================================================================== */

.brew-timer-ring {
    --p: 0;  /* 0..100 — action progress */
    --pt: 0; /* 0..100 — total recipe progress */
    width: 210px;
    height: 210px;
    margin: 0 auto;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background:
        conic-gradient(
            var(--accent) 0 calc(var(--p) * 1%),
            rgba(255,255,255,0.06) calc(var(--p) * 1%) 100%
        );
    box-shadow: 0 0 50px rgba(214,162,76,0.15), 0 0 100px rgba(214,162,76,0.06);
    transition: background 0.15s linear;
}

/* Outer ring — total recipe progress */
.brew-timer-ring::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    background:
        conic-gradient(
            rgba(214,162,76,0.40) 0 calc(var(--pt) * 1%),
            rgba(255,255,255,0.03) calc(var(--pt) * 1%) 100%
        );
    z-index: -1;
    transition: background 0.3s linear;
}

.brew-timer-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 40% 35%, rgba(22,22,26,0.92), rgba(10,10,12,0.95));
    border: 1px solid rgba(255,255,255,0.06);
}

/* Step counter badge on ring */
.brew-timer-step-badge {
    position: absolute;
    top: -4px;
    right: 16px;
    z-index: 2;
    background: linear-gradient(135deg, var(--accent), #a06420);
    color: #000;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 12px rgba(214,162,76,0.4);
}

/* Visual cue card */
.brew-stepvisual {
    margin-top: 10px;
    font-size: 0.86rem;
    color: rgba(214,162,76,0.90);
    line-height: 1.4;
    padding: 8px 14px;
    border-left: 3px solid rgba(214,162,76,0.5);
    background: rgba(214,162,76,0.06);
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(4px);
}

/* Countdown big number for wait steps */
.brew-countdown-big {
    font-family: var(--font-data);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--txt-main);
    text-align: center;
    margin: 6px 0;
    letter-spacing: 2px;
    opacity: 0.95;
    text-shadow: 0 0 20px rgba(214,162,76,0.2);
}

.brew-timer-display {
    position: relative;
    z-index: 1;
    font-family: var(--font-data);
    font-size: 3rem;
    font-weight: 800;
    color: var(--txt-main);
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 30px rgba(214,162,76,0.12);
}

.brew-timer-sub {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--txt-dim);
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.brew-flow-panel {
    margin: 18px auto 0 auto;
    width: min(100%, 360px);
    padding: 12px 12px 10px 12px;
    border-radius: 20px;
    border: 1.5px solid rgba(200,169,126,0.25);
    background: linear-gradient(180deg, rgba(22,22,28,0.98), rgba(12,12,16,0.99));
    box-shadow: 0 18px 42px rgba(0,0,0,0.35), 0 0 40px rgba(214,162,76,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    position: relative;
}

.brew-flow-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(200,169,126,0.12), transparent 60%);
    pointer-events: none;
}

/* Method-specific ambient glow — STRONG */
.brew-flow-panel.brew-flow--v60::before { background: radial-gradient(ellipse at 70% 40%, rgba(200,169,126,0.22), transparent 50%); }
.brew-flow-panel.brew-flow--chemex::before { background: radial-gradient(ellipse at 65% 35%, rgba(180,140,90,0.20), transparent 50%); }
.brew-flow-panel.brew-flow--espresso::before { background: radial-gradient(ellipse at 50% 50%, rgba(140,90,40,0.25), transparent 45%); }
.brew-flow-panel.brew-flow--moka::before { background: radial-gradient(ellipse at 50% 65%, rgba(255,170,60,0.18), transparent 50%); }
.brew-flow-panel.brew-flow--frenchpress::before { background: radial-gradient(ellipse at 60% 45%, rgba(170,140,100,0.18), transparent 50%); }
.brew-flow-panel.brew-flow--aeropress::before { background: radial-gradient(ellipse at 65% 40%, rgba(180,160,120,0.18), transparent 50%); }
.brew-flow-panel.brew-flow--syphon::before { background: radial-gradient(ellipse at 50% 55%, rgba(255,160,70,0.20), transparent 50%); }
.brew-flow-panel.brew-flow--kalita::before { background: radial-gradient(ellipse at 70% 40%, rgba(200,169,126,0.20), transparent 50%); }

.brew-flow-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.brew-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(200,169,126,0.12);
    border: 1px solid rgba(200,169,126,0.20);
    color: var(--txt-main);
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.brew-flow-chip.ghost {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
    color: var(--txt-dim);
    overflow: hidden;
    text-overflow: ellipsis;
}

.brew-flow-svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.brew-flow-grid path {
    stroke: rgba(255,255,255,0.07);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.brew-source,
.brew-target-scene {
    transition: transform 220ms ease, opacity 220ms ease;
}

.brew-source-fill {
    fill: rgba(255,255,255,0.03);
}

.brew-metal-fill {
    fill: url(#brew-metal-gradient);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

.brew-glass-fill {
    fill: url(#brew-glass-gradient);
    filter: drop-shadow(0 2px 4px rgba(255,255,255,0.08));
}

.brew-paper-fill {
    fill: url(#brew-paper-gradient);
    filter: drop-shadow(0 1px 3px rgba(200,180,140,0.2));
}

.brew-bed-fill {
    fill: url(#brew-bed-gradient);
    filter: drop-shadow(0 0 6px rgba(214,162,76,0.35));
}

.brew-shadow-soft {
    fill: rgba(0,0,0,0.28);
    filter: blur(3px);
}

.brew-highlight-line {
    fill: none;
    stroke: rgba(255,255,255,0.70);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brew-drip-line {
    fill: none;
    stroke: rgba(214,184,138,0.88);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(214,162,76,0.3));
}

.brew-source-line,
.brew-target-line {
    fill: none;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.15));
}

.brew-target-ribs,
.brew-target-accent {
    fill: none;
    stroke: rgba(214,184,138,0.65);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
}

.brew-source-nozzle {
    fill: rgba(230,195,140,1);
    filter: drop-shadow(0 0 6px rgba(230,195,140,0.7));
}

.brew-source--kettle,
.brew-source--stovetop {
    transform-origin: 60px 60px;
}

.brew-source--v60kettle {
    transform-origin: 68px 56px;
}

.brew-source--chemexkettle {
    transform-origin: 58px 52px;
}

.brew-source--kalitakettle {
    transform-origin: 54px 50px;
}

.brew-source--grouphead {
    transform-origin: 156px 44px;
}

.brew-flow-panel.is-pouring .brew-source--kettle {
    animation: brewKettleTilt 1.35s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--v60kettle {
    animation: brewKettleTilt 1.15s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--kalitakettle {
    animation: brewKettleTilt 1.18s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--stovetop {
    animation: brewStovetopPulse 1.25s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--grouphead {
    animation: brewGroupPulse 0.9s ease-in-out infinite;
}

.brew-flow-stream {
    fill: none;
    stroke: url(#brew-stream-gradient);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-dasharray: 8 9;
    animation: brewFlowDash 0.9s linear infinite;
    transition: opacity 180ms ease;
    filter: drop-shadow(0 0 12px rgba(220,180,120,0.4)) drop-shadow(0 0 4px rgba(255,230,180,0.25));
}

.brew-flow-panel.brew-flow--espresso .brew-flow-stream {
    stroke-width: 5;
    stroke-dasharray: 3 6;
    filter: drop-shadow(0 0 10px rgba(140,80,30,0.5));
}

.brew-flow-liquid {
    fill: url(#brew-liquid-gradient);
    transition: y 220ms ease, height 220ms ease;
    opacity: 0.97;
    filter: drop-shadow(0 -1px 3px rgba(214,162,76,0.15));
}

.brew-flow-bed-surface {
    fill: rgba(227,198,156,0.26);
    stroke: rgba(255,255,255,0.20);
    stroke-width: 1.0;
    transition: cy 220ms ease;
    filter: drop-shadow(0 0 2px rgba(214,162,76,0.2));
}

.brew-flow-ripple {
    fill: none;
    stroke: rgba(214,184,138,0.52);
    stroke-width: 1.4;
    transform-origin: center;
    animation: brewRipple 1.8s ease-out infinite;
    opacity: 0;
}

.brew-flow-ripple.delay {
    animation-delay: 0.6s;
}

.brew-flow-panel.is-pouring .brew-flow-ripple,
.brew-flow-panel.is-active .brew-flow-ripple {
    opacity: 1;
}

.brew-flow-panel.is-waiting .brew-flow-stream {
    animation-duration: 2.4s;
}

.brew-flow-panel.brew-flow-motion--continuous .brew-flow-stream {
    stroke-dasharray: 3 6;
    animation-duration: 0.9s;
}

.brew-flow-panel.brew-flow-motion--segmented .brew-flow-stream {
    stroke-dasharray: 14 10;
    animation-duration: 1.55s;
}

.brew-flow-panel.brew-flow-motion--orbit-center .brew-flow-stream {
    stroke-dasharray: 6 8;
    animation-duration: 1.05s;
}

.brew-flow-panel.brew-flow-motion--immersive .brew-flow-stream {
    stroke-dasharray: 16 12;
    animation-duration: 1.8s;
}

.brew-flow-panel.brew-flow-motion--pressure .brew-flow-stream,
.brew-flow-panel.brew-flow-motion--stovetop .brew-flow-stream {
    stroke-width: 4.5;
    animation-duration: 0.75s;
}

.brew-pour-guide {
    opacity: 0.18;
    transition: opacity 160ms ease, transform 160ms ease;
}

.brew-flow-panel.is-pouring .brew-pour-guide,
.brew-flow-panel.is-swirling .brew-pour-guide {
    opacity: 1;
}

.brew-flow-panel.is-waiting .brew-pour-guide {
    opacity: 0.26;
}

.brew-pour-pattern {
    fill: none;
    stroke: rgba(214,184,138,0.70);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 6;
}

.brew-pour-pattern.secondary {
    stroke: rgba(255,255,255,0.22);
    stroke-dasharray: 3 7;
    stroke-width: 1.2;
}

.brew-pour-dot {
    fill: rgba(214,184,138,0.96);
    filter: drop-shadow(0 0 6px rgba(214,184,138,0.32));
    opacity: 0;
}

.brew-pour-dot.secondary {
    fill: rgba(255,255,255,0.72);
}

.brew-flow-panel.is-pouring .brew-pour-dot,
.brew-flow-panel.is-swirling .brew-pour-dot {
    opacity: 1;
    animation: brewPourDotPulse 1.1s ease-in-out infinite;
}
.brew-flow-panel.is-pouring .brew-pour-dot.secondary,
.brew-flow-panel.is-swirling .brew-pour-dot.secondary {
    animation: brewPourDotPulse 1.4s ease-in-out infinite 0.3s;
}
@keyframes brewPourDotPulse {
    0%, 100% { opacity: 0.78; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.18); }
}

/* Subtle bob on the target vessel (bed accent) while liquid is flowing */
.brew-flow-panel.is-pouring .brew-bed-fill,
.brew-flow-panel.is-active .brew-bed-fill {
    animation: brewBedShimmer 2.4s ease-in-out infinite;
}
@keyframes brewBedShimmer {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(214,162,76,0.32)); }
    50%      { filter: drop-shadow(0 0 11px rgba(214,162,76,0.55)) drop-shadow(0 0 18px rgba(214,184,138,0.18)); }
}

.brew-flow-action {
    fill: var(--txt-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.brew-flow-pattern-label {
    fill: rgba(214,184,138,0.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.brew-flow-target {
    fill: var(--txt-dim);
    font-size: 11px;
    letter-spacing: 0.8px;
}

.brew-flow-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.brew-flow-target.footer {
    fill: none;
    color: var(--txt-dim);
    font-size: 0.92rem;
    letter-spacing: 0.4px;
    text-align: center;
}

.brew-flow-markers-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.brew-flow-markers-row .brew-flow-marker {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.72);
    font-size: 0.76rem;
    font-weight: 800;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.brew-flow-markers-row .brew-flow-marker.done {
    background: rgba(200,169,126,0.18);
    border-color: rgba(200,169,126,0.42);
    color: var(--txt-main);
}

.brew-flow-markers-row .brew-flow-marker.active {
    background: rgba(214,184,138,0.28);
    border-color: rgba(214,184,138,0.9);
    color: var(--txt-main);
    transform: scale(1.12);
}

.brew-flow-panel.brew-flow-compact {
    padding-bottom: 12px;
}

.brew-flow-panel.brew-flow-compact .brew-flow-svg {
    margin-bottom: 2px;
}

/* ── Compact timer side-by-side layout ────────────────────────── */
#brew-flow-vis-wrap .brew-flow-panel {
    margin: 0;
    width: 100%;
    padding: 6px;
    border-radius: 14px;
}
#brew-flow-vis-wrap .brew-flow-header {
    display: none;
}
#brew-flow-vis-wrap .brew-flow-footer,
#brew-flow-vis-wrap .brew-flow-label,
#brew-flow-vis-wrap .brew-flow-pour-count {
    display: none;
}
/* Shrink text labels inside compact SVG to prevent overlap */
#brew-flow-vis-wrap .brew-flow-action {
    font-size: 9px;
    letter-spacing: 1px;
}
#brew-flow-vis-wrap .brew-flow-pattern-label {
    font-size: 7.5px;
    letter-spacing: 0.6px;
}
#brew-flow-vis-wrap .brew-flow-target {
    font-size: 8px;
}

.brew-flow-marker circle {
    fill: rgba(255,255,255,0.05);
    stroke: rgba(255,255,255,0.14);
    stroke-width: 1.5;
    transition: transform 180ms ease, fill 180ms ease, stroke 180ms ease;
}

.brew-flow-marker text {
    fill: rgba(255,255,255,0.72);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.brew-flow-marker.done circle {
    fill: rgba(200,169,126,0.18);
    stroke: rgba(200,169,126,0.42);
}

.brew-flow-marker.active circle {
    fill: rgba(214,184,138,0.28);
    stroke: rgba(214,184,138,0.9);
    transform: scale(1.12);
}

.brew-flow-marker.active text,
.brew-flow-marker.done text {
    fill: var(--txt-main);
}

@keyframes brewFlowDash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -42; }
}

@keyframes brewRipple {
    0% { opacity: 0; transform: scale(0.85); }
    20% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes brewKettleTilt {
    /* More natural pour motion: slow tilt down, brief hold at extension, gentle return */
    0%   { transform: rotate(-3deg) translateY(0); }
    18%  { transform: rotate(-1.5deg) translateY(-0.5px); }
    38%  { transform: rotate(2deg) translateY(-1.2px); }
    52%  { transform: rotate(2.4deg) translateY(-1.4px); }
    65%  { transform: rotate(-4deg) translateY(0.8px); }
    82%  { transform: rotate(-5.5deg) translateY(1px); }
    100% { transform: rotate(-3deg) translateY(0); }
}

@keyframes brewStovetopPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.015); }
}

@keyframes brewGroupPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1px); }
}

@keyframes brewSwirlV60 {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(-3.2deg) translateX(-0.5px); }
    50% { transform: rotate(2.4deg) translateX(0.6px); }
    80% { transform: rotate(-1.7deg) translateX(-0.4px); }
}

@keyframes brewGuideSwirlV60 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-7deg) scale(1.01); }
    50% { transform: rotate(6deg) scale(1.01); }
    75% { transform: rotate(-4deg) scale(1.005); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ── Steam wisps (kettle + espresso) ───────────────────────────── */
.brew-steam {
    fill: none;
    stroke: rgba(255,255,255,0.42);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    filter: blur(1.5px);
    transition: opacity 300ms ease;
}

.brew-flow-panel.is-pouring .brew-steam,
.brew-flow-panel.is-active .brew-steam {
    opacity: 1;
}

.brew-steam-a {
    animation: brewSteamRise 2.6s ease-in-out infinite;
}
.brew-steam-b {
    animation: brewSteamRise 3.0s ease-in-out infinite 0.4s;
}
.brew-steam-c {
    animation: brewSteamRise 2.4s ease-in-out infinite 0.8s;
}

@keyframes brewSteamRise {
    /* Steam rises with a slight lateral drift, gets translucent, then fades out higher up */
    0%   { opacity: 0; stroke-dashoffset: 30; stroke-dasharray: 8 22; transform: translate(0, 0) scale(1); }
    15%  { opacity: 0.55; }
    45%  { opacity: 0.42; transform: translate(1px, -5px) scale(1.05); }
    75%  { opacity: 0.22; transform: translate(-1px, -10px) scale(1.10); }
    100% { opacity: 0; stroke-dashoffset: 0; stroke-dasharray: 8 22; transform: translate(0, -14px) scale(1.14); }
}

/* ── Nozzle glow when pouring (subtle warm accent right under the spout) */
.brew-flow-panel.is-pouring .brew-source-nozzle {
    animation: brewNozzleGlow 1.5s ease-in-out infinite;
}
@keyframes brewNozzleGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(230,195,140,0.45)); }
    50%      { filter: drop-shadow(0 0 9px rgba(230,195,140,0.85)) drop-shadow(0 0 16px rgba(214,162,76,0.32)); }
}

/* ── Knob highlight glow — kettle is "hot" when pouring */
.brew-knob-glow {
    transition: opacity 300ms ease;
}
.brew-flow-panel.is-pouring .brew-knob-glow,
.brew-flow-panel.is-active .brew-knob-glow {
    animation: brewKnobBreath 2.4s ease-in-out infinite;
}
@keyframes brewKnobBreath {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

/* ── Drip line — gentle flow animation when pouring (replaces flat static stroke) */
.brew-flow-panel.is-pouring .brew-drip-line {
    stroke-dasharray: 4 4;
    animation: brewDripFlow 0.7s linear infinite, brewDripBreath 1.8s ease-in-out infinite;
}
@keyframes brewDripFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -16; }
}
@keyframes brewDripBreath {
    0%, 100% { opacity: 0.85; stroke-width: 1.8; }
    50%      { opacity: 1; stroke-width: 2.2; }
}

/* ── Glass reflection arc ──────────────────────────────────────── */
.brew-glass-reflect {
    fill: none;
    stroke: rgba(255,255,255,0.28);
    stroke-width: 1.4;
    stroke-linecap: round;
    filter: blur(0.5px);
}

/* ── Crema surface glow ────────────────────────────────────────── */
.brew-crema-glow {
    fill: rgba(214,170,100,0.35);
    filter: blur(2px);
    opacity: 0;
    transition: opacity 400ms ease;
}

.brew-flow-panel.is-pouring .brew-crema-glow,
.brew-flow-panel.is-active .brew-crema-glow {
    opacity: 1;
    animation: brewCremaBreath 3s ease-in-out infinite;
}

@keyframes brewCremaBreath {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.55; }
}

/* ── Moka flame pulse enhancement ──────────────────────────────── */
#brew-moka-flame-core {
    animation: brewMokaFlameCore 1.2s ease-in-out infinite;
}
#brew-moka-flame-left,
#brew-moka-flame-right {
    animation: brewMokaFlameOuter 1.6s ease-in-out infinite;
}

@keyframes brewMokaFlameCore {
    0%, 100% { opacity: 0.9; transform: scaleY(1); }
    50%      { opacity: 1; transform: scaleY(1.08); }
}

@keyframes brewMokaFlameOuter {
    0%, 100% { opacity: 0.7; transform: scaleY(1) translateY(0); }
    40%      { opacity: 0.85; transform: scaleY(1.05) translateY(-1px); }
    80%      { opacity: 0.65; transform: scaleY(0.96) translateY(1px); }
}

/* ── Syphon flame pulse ────────────────────────────────────────── */
#brew-syphon-flame path:nth-child(3) {
    animation: brewMokaFlameCore 1.3s ease-in-out infinite;
}
#brew-syphon-flame path:nth-child(1),
#brew-syphon-flame path:nth-child(2) {
    animation: brewMokaFlameOuter 1.7s ease-in-out infinite;
}

@media (max-width: 480px) {
    .brew-flow-panel {
        width: 100%;
        padding: 10px 10px 8px 10px;
    }
    .brew-flow-chip {
        font-size: 0.68rem;
        letter-spacing: 1px;
        padding: 0 10px;
    }
}

/* ======================================================================
   BREW TIMER – Step box formatting (production)
   ====================================================================== */

.brew-stephead {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    color: var(--txt-dim);
}
.brew-stephead .l { font-weight: 800; color: var(--txt-main); }
.brew-stephead .r { font-family: var(--font-data); opacity: 0.9; }

.brew-stepbody {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--txt-dim);
}
.brew-stepbody strong {
    color: var(--txt-main);
    font-weight: 800;
}

.brew-steptarget, .brew-stephint {
    margin-top: 12px;
    font-size: 0.95rem;
    color: var(--txt-dim);
}
.brew-steptarget strong, .brew-stephint strong {
    color: var(--txt-main);
}

.brew-steps-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
}

.brew-steps-modal.hidden { display: none; }

.brew-steps-sheet {
    width: 100%;
    max-width: 680px;
    border-radius: 16px;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
}

.brew-steps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--txt-main);
}

.brew-steps-list {
    max-height: 55vh;
    overflow: auto;
    padding: 10px;
}

.brew-step-item {
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--txt-main);
    cursor: pointer;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.brew-step-item .t {
    font-family: var(--font-data);
    color: var(--accent);
    font-weight: 800;
}

.brew-step-item .txt {
    color: var(--txt-dim);
    line-height: 1.25;
}

.brew-step-item.active {
    border-color: rgba(214,162,76,0.45);
    background: rgba(214,162,76,0.10);
}

/* PANTRY UI helpers */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:14px;z-index:9999;}
/* NOTE: Old .modal-overlay.pantry-modal overrides removed.
   They hardcoded padding values that ignored env(safe-area-inset-top),
   which made the modal title collide with the iOS status bar.
   The consolidated .modal-overlay rule at the bottom of this file
   honors all four safe-area insets and applies to Pantry, Drinks,
   Foods, etc. */
.modal-card{width:100%;max-width:560px;background:rgba(14,14,14,.92);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 14px 16px;box-shadow:0 20px 60px rgba(0,0,0,.55);max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;}

/* =============================
   Recipes (My recipes) — Premium editor
   ============================= */
.mr-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px 0;position:sticky;top:0;z-index:2;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 100%);backdrop-filter:blur(10px);padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);} 
.mr-tab{flex:1;min-width:84px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--txt-dim);padding:10px 12px;border-radius:10px;font-weight:800;cursor:pointer;}
.mr-tab.is-active{background:rgba(214,162,76,.16);border-color:rgba(214,162,76,.35);color:var(--txt-main);} 
.mr-panels{display:block;}
.mr-panel{display:none;}
.mr-panel.is-active{display:block;animation:fadeIn .18s ease;}

.mr-badge{font-size:.78rem;font-weight:900;letter-spacing:.6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--txt-main);white-space:nowrap;}

.mr-prev-kpis{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.10);} 
.mr-prev-kpis > div{flex:1;}
.mr-prev-list{display:grid;gap:10px;}
.mr-prev-row{display:grid;grid-template-columns: 120px 120px 1fr;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);} 
.mr-prev-left{color:var(--txt-main);font-weight:900;}
.mr-prev-mid{color:var(--txt-dim);font-family:var(--font-data);font-size:.84rem;}
.mr-prev-right{color:var(--txt-dim);font-size:.88rem;line-height:1.35;}

@media (max-width:520px){
  .mr-prev-row{grid-template-columns:1fr;}
  .mr-prev-mid{margin-top:2px;}
}
.inp{width:100%;padding:10px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--txt-main);outline:none;}
.inp:focus{border-color:rgba(255,255,255,.22);}
.pantry-item.inactive{opacity:.55;filter:saturate(.7);}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.78rem;color:var(--txt-main);}

/* Business ops badges: indicate due dates vs neutral state.
   Extend the base .pill styling without duplicating the common
   layout.  Keeping these separate classes allows the accent colours
   to be tweaked globally without editing inline HTML. */
.pill.due {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.22);
}
.pill.neutral {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Production status pills */
.pill.done {
  background: rgba(0, 255, 0, 0.08);
  border-color: rgba(0, 255, 0, 0.18);
}
.pill.pending {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.btn-delete{border-color:rgba(255,80,80,.35);}
.btn-delete:hover{border-color:rgba(255,80,80,.65);}

/* iOS/Safari: native <select> option lists may appear on a light background.
   Our theme uses light text, so options can look blank. Force readable colors. */
select.inp{color:var(--txt-main);background:rgba(255,255,255,.04);}
select.inp option{color:#111;background:#fff;}


/* ======================================================================
   PANTRY LAYOUT POLISH (Spacing / Responsiveness)
   ====================================================================== */

.muted { color: var(--txt-dim); }

.section-header { margin-bottom: 14px; }
.section-header h2 { margin: 0 0 6px; letter-spacing: 0.12em; }
.section-header p { margin: 0; color: var(--txt-dim); line-height: 1.35; }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.view { display: flex; flex-direction: column; gap: 12px; }

.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 12px;
}

.pantry-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}

.pantry-actions .btn-arch { width: auto; padding: 12px 14px; }

.pantry-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.pantry-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-top: 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(14,14,14,.88) 0%, rgba(14,14,14,.98) 34%);
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.28);
}

.pantry-modal-actions .btn-arch { width: auto; padding: 12px 14px; }

/* Make inputs + selects slightly tighter inside cards */
.pantry-item .inp { padding: 10px 10px; }

/* Responsive: avoid encimado on phones */
@media (max-width: 520px) {
  .pantry-grid { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .pantry-form-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .btn-arch { padding: 14px; }
  .pantry-actions { justify-content: space-around; align-items: stretch; gap: 12px; }
  .pantry-actions .btn-arch { width: 100%; }
  .pantry-modal-actions { justify-content: stretch; }
  .pantry-modal-actions .btn-arch { width: 100%; }
}



/* PANTRY CARD PREMIUM */

.pantry-item{position:relative; overflow:hidden;}
.pantry-item > div:first-child{gap:12px;}
.pantry-item .pill{margin-right:8px;}

/* Edit zone styling (consolidated above) */

/* Footer styling (consolidated above) */

.pantry-actions .muted{font-size:.86rem;}

/* Buttons align nicely */
.pantry-actions .btn-arch{height:44px; display:inline-flex; align-items:center; justify-content:center;}

/* PANTRY PREMIUM CARD (Step 2: cards — consolidated) */

/* PANTRY: FOOD/DRINKS tabs (non-breaking) */
.pantry-tabs{
  display:flex;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
}
.pantry-tab{
  flex:1;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--txt-main);
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pantry-tab.active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* Pantry tools (search/sort/group) */
.pantry-tools{display:flex; flex-direction:column; gap:10px;}
.pantry-tools-row{display:flex; gap:10px; align-items:center;}
.pantry-search{flex:1; min-width:0;}
.pantry-sort{width:170px;}

/* Pantry grouping (helps when there are many items) */
.pantry-group{margin-bottom:12px;}
.pantry-group-h{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.pantry-group-left{display:flex; gap:12px; align-items:center; min-width:0;}
.pantry-group-ic{font-size:1.05rem;}
.pantry-group-title{font-weight:800; letter-spacing:0.02em; line-height:1.1; color:var(--txt); text-align:left;}

.pantry-cat-media{
  width:42px;
  height:42px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.28);
  overflow:hidden;
  flex:0 0 auto;
}
.pantry-cat-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pantry-cat-media svg{
  width:18px;
  height:18px;
  display:block;
}
.pantry-cat-media--group{
  width:44px;
  height:44px;
  border-radius:14px;
}
.pantry-cat-media--pill{
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:7px;
  box-shadow:none;
  border-color:rgba(255,255,255,0.08);
}
.pantry-cat-media--item{
  width:32px;
  height:32px;
  border-radius:10px;
  box-shadow:none;
}
.pantry-cat-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.pantry-group-right{display:flex; gap:10px; align-items:center;}
.pantry-group-chevron{font-size:1.1rem; opacity:0.9;}
.pantry-group-body{margin-top:10px;}

@media (max-width: 520px){
  .pantry-tools-row{flex-direction:column; align-items:stretch;}
  .pantry-sort{width:100%;}
}


/* =============================
   PANTRY — Sprint B (Compact cards + premium toolbar)
   ============================= */
.pantry-tools-actions{justify-content:space-between;gap:10px;}
.pantry-tools-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pantry-tip{font-size:0.82rem;opacity:0.92;}

.pantry-compact-header{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pantry-title-wrap{flex:1;min-width:0;}
.pantry-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pantry-name{font-weight:800;font-size:0.98rem;line-height:1.1;word-break:break-word;color:var(--txt);}
.pantry-cat-icon{font-size:1rem;}
.pantry-subline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px; padding-left:42px;}
.pantry-buyline{font-family:var(--font-data);font-size:0.82rem;line-height:1;}
.pantry-cost-val{font-family:var(--font-data);font-weight:900;font-size:1rem;color:var(--accent);}
.pantry-lbl{font-size:0.78rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;}
.pantry-header-right{display:flex;gap:12px;align-items:center; flex:0 0 auto;}
.pantry-cost-compact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:132px;}
.pantry-cost-compact .muted{font-size:0.78rem;}
.pantry-btn-expand{white-space:nowrap;transition:background .15s;}

.pantry-details{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06);}
.pantry-details-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;}
.pantry-vis-note{margin-left:8px;font-size:0.78rem;}
.pantry-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.pantry-toggle input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px;}

.pantry-pill-warn{border-color:rgba(255,196,100,0.35);background:rgba(255,196,100,0.12);}
.pantry-pill-arch{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);}

.pantry-sugg{margin-top:6px;font-size:0.74rem;line-height:1.2;opacity:0.9;}

@media (max-width: 520px){
  .pantry-compact-header{flex-direction:column;align-items:stretch;}
  .pantry-header-right{flex-direction:row;align-items:center;justify-content:space-between;margin-top:8px;}
  .pantry-cost-compact{align-items:flex-start;min-width:auto;flex-direction:row;gap:8px;}
  .pantry-cost-compact .muted{font-size:0.78rem;}
  .pantry-subline{padding-left:42px; gap:6px;}
  .pantry-details-footer{flex-direction:column;align-items:stretch;}
  .pantry-details-footer .pantry-actions{display:flex;gap:10px;justify-content:flex-end;}
}

/* Pantry item hover (subtle) */
.pantry-item:hover{border-color:rgba(255,255,255,.12);}
.pantry-item.inactive:hover{border-color:rgba(255,255,255,.08);}

.pantry-history{margin-top:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.10);}
.pantry-history-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.pantry-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.86rem;}
/* PANTRY: visibility chips (used in the Add Item modal as the Show-In selector) */
.pantry-visibility{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;}
.pantry-vis-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  user-select:none;
}
.pantry-vis-chip input{accent-color: var(--accent);}
.pantry-vis-chip span{font-family: var(--font-data); font-weight:800; letter-spacing:0.06em; font-size:0.78rem;}

/* Pantry visibility — touch-friendly toggle variant (new Add Item modal) */
.pantry-visibility.pantry-visibility--toggle{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms ease;
  min-height:48px;
}
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px; height:1px;
}
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip span{
  display:inline-flex;
  align-items:center;
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--txt-dim, #aaa);
  transition: color 180ms ease;
}
/* Checked / on state — selector targets the label that contains the checked input.
   The .is-on class is a JS-applied fallback for engines without :has() support. */
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip:has(input:checked),
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip.is-on{
  background: rgba(214,184,138,0.14);
  border-color: rgba(214,184,138,0.55);
}
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip:has(input:checked) span,
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip.is-on span{
  color: var(--accent, #D6B88A);
}
.pantry-visibility.pantry-visibility--toggle .pantry-vis-chip:active{ transform: scale(0.985); }
@media (max-width: 380px){
  .pantry-visibility.pantry-visibility--toggle{ grid-template-columns: 1fr; }
}

/* Editable block (styling consolidated in main pantry-grid above) */

.pantry-grid .muted { margin-bottom: 6px; }

/* Footer area (styling consolidated in main pantry-actions above) */

.pantry-actions .muted { line-height: 1.2; }

/* Make the cost feel "result" */
.pantry-actions span[style*="color:var(--accent)"] {
  font-size: 1.02rem;
}

/* Pills breathe */
.pill { margin-right: 8px; }

/* Buttons alignment on larger screens */
@media (min-width: 521px) {
  .pantry-actions { align-items: center; }
}

/* =========================================================
   PREMIUM CATEGORY CHIPS + DRINK MARKS (v1)
   ========================================================= */

.cat-chip-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cat-chip-premium .cat-chip-icon {
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

/* Category icons can be SVG or image */
.cat-chip-premium .cat-chip-icon img {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.premium-section-badge img {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* DRINKS: card-stack transition (category switch) */
.drinks-screen .cat-stack-out {
  opacity: 0;
  transform: translateX(-10px) scale(0.992);
  transition: opacity 140ms ease, transform 140ms ease;
}

.drinks-screen .cat-stack-in {
  animation: catStackIn 220ms ease both;
}

@keyframes catStackIn {
  from { opacity: 0; transform: translateX(14px) scale(0.992); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.drinks-hero {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  margin: 8px 0 14px 0;
}

.drinks-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.drinks-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.88));
  pointer-events: none;
}

/* DRINKS hero: text over image (premium header) */
.drinks-hero-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px 16px 14px 16px;
  z-index: 2;
}

.drinks-hero-title{
  margin:0;
  font-size:2.05rem;
  font-weight:900;
  letter-spacing:0.01em;
}

.drinks-hero-sub{
  margin-top: 6px;
  color: var(--txt-dim);
  font-size:0.95rem;
}

.cat-chip-premium[data-active="1"] {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.28);
}

.drink-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.drink-mark svg {
  display:block;
}

.drink-mark img {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.premium-section-header {
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.premium-section-left{display:flex; align-items:center; gap: 12px;}
.premium-section-badge{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.premium-section-title{font-weight: 800; letter-spacing: 0.2px;}
.premium-section-sub{font-size: 0.75rem; color: rgba(255,255,255,0.65); margin-top: 2px;}
.premium-section-right{font-family: var(--font-data); font-weight: 800; opacity: 0.8;}


/* Premium badge finish */
.drink-mark{
  position: relative;
  overflow:hidden;
}
.drink-mark::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(120px 90px at 20% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 55%),
              linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  pointer-events:none;
  opacity:.85;
}
.drink-mark::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.12;
  pointer-events:none;
}
.drink-mark svg{
  position:relative;
  z-index:2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}


/* ============================================================
   Step 3 Polish: Section Identity Overrides (minimal, scalable)
   ============================================================ */
.drinks-screen {
  --section-accent: rgba(214,162,76,0.9);
  --section-glow: rgba(214,162,76,0.16);
  --section-bgA: rgba(255,255,255,0.02);
  --section-bgB: rgba(0,0,0,0.0);
  --section-pattern: none;
}

/* Editorial header gets a subtle identity wash */
.drinks-screen .premium-section-header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, var(--section-bgA), var(--section-bgB));
  box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.03) inset;
}

.drinks-screen .premium-section-header::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-image: var(--section-pattern);
  opacity: 0.9;
  pointer-events:none;
  mix-blend-mode: screen;
}

.drinks-screen .premium-section-header::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 42px var(--section-glow);
  pointer-events:none;
}

.drinks-screen .premium-section-badge{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.drinks-screen .premium-section-title{
  letter-spacing: 0.2px;
}

.drinks-screen .premium-section-sub{
  color: color-mix(in srgb, var(--txt-dim) 85%, var(--section-accent) 15%);
}

/* Category chips inherit a subtle accent when active */
.drinks-screen .cat-chip-premium[data-active="1"]{
  border-color: color-mix(in srgb, var(--section-accent) 35%, rgba(255,255,255,0.18) 65%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 10px 22px rgba(0,0,0,0.28);
}

/* Drink cards get a gentle per-section tint without looking like a theme switch */
.drinks-screen[data-cat=\"signature_cold\"] .tech-card,
.drinks-screen[data-cat=\"fruit_acid\"] .tech-card,
.drinks-screen[data-cat=\"mocktail\"] .tech-card,
.drinks-screen[data-cat=\"spirit\"] .tech-card,
.drinks-screen[data-cat=\"frappe\"] .tech-card,
.drinks-screen[data-cat=\"wellness\"] .tech-card,
.drinks-screen[data-cat=\"signature_hot\"] .tech-card,
.drinks-screen[data-cat=\"hot_classic\"] .tech-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.16));
}


/* ==========================================================================
   TOOLS PRO
   ========================================================================== */
.tools-root { padding: 14px 14px 40px; }
.tools-grid { display:flex; flex-direction:column; gap:10px; }
.tool-card { width:100%; text-align:left; display:flex; gap:12px; align-items:center; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.tool-card-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,255,255,0.06); }
.tool-card-title { font-weight:700; letter-spacing:0.2px; }
.tool-card-desc { font-size:0.86rem; opacity:0.85; margin-top:2px; }
.tool-card-cta { margin-left:auto; opacity:0.6; }

.tools-panel { margin-top:14px; }
.tool-view { padding: 10px 0; }
.tool-header h3 { margin: 0; }
.tool-row { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.tool-label { font-size:0.82rem; opacity:0.85; }
.tool-inp, .tool-select { padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); color:inherit; }
.tool-result { margin-top:12px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.tool-big { font-size:1.35rem; font-weight:800; }
.tool-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.tool-li { font-size:0.92rem; line-height:1.25rem; opacity:0.92; }

.tool-seg { display:flex; gap:8px; }
.tool-seg .seg { flex:1; padding:10px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:inherit; }
.tool-seg .seg.active { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.16); }

.btn-secondary { margin-top: 6px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:inherit; display:inline-flex; gap:8px; align-items:center; }



/* ==========================================================================
   BOTTOM NAV (LIQUID GLASS – SINGLE PILL, CLIPPED)
   Goal:
   - One (1) liquid-glass pill only (no extra base bar)
   - Icons NEVER escape the rounded pill when horizontal scrolling
   - Content behind remains visible via blur (true glass)
   ========================================================================== */

/* The glass pill itself (wrapper). It clips the scrolling nav inside. */
#bottom-dock{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 2px);
  height: 56px;
  border-radius: 22px;
  z-index: 999;

  /* Frosted glass — darker, more contrast */
  background:
    linear-gradient(to bottom, rgba(28,28,30,0.88), rgba(18,18,20,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.65),
    inset 0 0.5px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);

  /* Critical: clip anything that would escape the pill */
  overflow: hidden;
}

/* The scrolling nav lives INSIDE the pill */
#bottom-nav{
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;

  /* Side padding matches the visual pill edges */
  padding: 0 14px;
  scroll-padding-left: 14px;
  scroll-padding-right: 14px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  background: transparent;
  border: none;
}

#bottom-nav::-webkit-scrollbar{ display:none; }
#bottom-nav .nav-item:first-child{ margin-left: 2px; }
#bottom-nav .nav-item:last-child{ margin-right: 2px; }

/* Micro transition on view changes */
#viewport{
  transition: opacity .12s ease, transform .12s ease;
  will-change: opacity, transform;
}
#viewport.view-enter{
  opacity: 0;
  transform: translateY(6px);
}

/* Bottom nav items */
#bottom-nav .nav-item{
  flex: 0 0 auto;
  width: 52px;
  min-width: 52px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4px 4px;
  border-radius: 14px;

  border: 1px solid transparent;
  background: transparent;

  cursor:pointer;
  transition: transform .14s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  scroll-snap-align: start;
  color: rgba(255,255,255,.40);
  position: relative;
  box-shadow: none;
}

/* FOUNDATIONS tab (routeKey = lab): show full label without truncation */
#bottom-nav .nav-item.active[data-route="lab"]{
  width: 82px;
  min-width: 82px;
}
#bottom-nav .nav-item.active[data-route="lab"] span{
  font-size: 7px;
  letter-spacing: 0.04em;
  left: 4px;
  right: 4px;
}

#bottom-nav .nav-item i{
  font-size: 1.1rem;
  opacity: .65;
  transform: translateY(0);
  transition: transform .14s ease, opacity .18s ease, filter .18s ease, color .18s ease;
}

/* label sits INSIDE the pill (absolute), so it never changes layout */
#bottom-nav .nav-item span{
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;

  display: none;
  font-size: .46rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
}

#bottom-nav .nav-item.active{
  background: rgba(214,162,76,0.14);
  border-color: rgba(214,162,76,0.25);
  transform: translateY(0);
  color: var(--accent);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.30),
    0 0 12px rgba(214,162,76,0.10);
}

#bottom-nav .nav-item.active i{
  opacity: 1;
  transform: translateY(-4px);
  filter: drop-shadow(0 0 5px rgba(214,162,76,0.50));
  color: var(--accent);
}

#bottom-nav .nav-item.active span{ display:block; }

/* extra safety for long labels like FOUNDATIONS */
#bottom-nav .nav-item.active span{
  letter-spacing: .06em;
  color: var(--accent);
}

#bottom-nav .nav-item:active{ transform: translateY(0px) scale(.99); }

/* Discrete dot badge (used on HOME for new WOW) */
.nav-badge{
  position:absolute;
  top: 0px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(214,162,76,0.35);
}
.nav-badge.hidden{ display:none; }

/* Prevent horizontal drift */
html, body { overflow-x: hidden; }
body.modal-open{ overflow:hidden; }

/* ==========================================================================
   MORE SHEET
   ========================================================================== */
.more-sheet.hidden{ display:none; }
.more-sheet{ position:fixed; inset:0; z-index: 200; }
.more-sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.more-sheet-panel{
  position:absolute; left: 10px; right: 10px; bottom:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(12,12,12,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px;
}
.more-sheet-handle{
  width: 54px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 2px auto 10px;
}
.more-sheet-title{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .9;
  margin-bottom: 12px;
}
.more-sheet-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.more-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.more-item i{ opacity: .9; }
.more-item-label{
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .74rem;
  text-transform: uppercase;
  opacity: .88;
}

/* ==========================================================================
   TOOLS PRO (POLISH)
   ========================================================================== */
.tool-how{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
.tool-how-ic{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(255,255,255,0.06); }
.tool-how-title{ font-weight: 900; letter-spacing:.08em; text-transform: uppercase; font-size:.72rem; opacity:.9; }
.tool-how-text{ margin-top:4px; font-size:.92rem; line-height:1.35rem; color: var(--txt-dim); }

.tool-card{
  width:100%;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: inherit;
}
.tool-card:active{ transform: scale(.99); }

.tool-topbar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 6px 0 10px;
}
.tool-back{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.tool-back span{ font-weight: 800; letter-spacing:.14em; font-size:.70rem; text-transform:uppercase; opacity:.9; }
.tool-topmeta-kicker{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; opacity:.65; }
.tool-topmeta-title{ font-weight: 900; font-size: 1.05rem; }

.tool-inp:focus, .tool-select:focus, input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(214,162,76,0.55);
}

#viewport{ padding-bottom: 120px; }


/* TOOLS: Per-tool guide (school barista) */
.tool-guide{
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
}
.tool-guide-row{ display:flex; gap:10px; align-items:flex-start; }
.tool-guide-ic{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); opacity:0.9;
}
.tool-guide-title{ font-weight:800; letter-spacing:0.2px; }
.tool-guide-text{ font-size:0.92rem; opacity:0.9; margin-top:2px; line-height:1.25rem; }

.tool-guide-acc{ margin-top:10px; border-top:1px solid rgba(255,255,255,0.07); padding-top:10px; }
.tool-guide-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:0.78rem; letter-spacing:0.7px; text-transform:uppercase;
  color: rgba(255,255,255,0.85);
}
.tool-guide-acc summary::-webkit-details-marker{ display:none; }
.tool-guide-acc summary i{ opacity:0.65; transition: transform 0.18s ease; }
.tool-guide-acc[open] summary i{ transform: rotate(180deg); }

.tool-guide-list{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.tool-guide-li{ display:flex; gap:10px; font-size:0.92rem; opacity:0.92; line-height:1.25rem; }
.tool-step{
  width:22px; height:22px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background: rgba(214,162,76,0.18); border:1px solid rgba(214,162,76,0.25);
  font-weight:900; font-size:0.78rem;
}
.tool-bullet{ width:22px; display:flex; justify-content:center; opacity:0.7; }

.tool-guide-tip{
  margin-top:10px; display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:14px; background: rgba(214,162,76,0.10);
  border:1px solid rgba(214,162,76,0.16);
  font-size:0.92rem; line-height:1.25rem;
}
.tool-guide-tip i{ margin-top:2px; opacity:0.9; }

/* Disabled input look */
.tool-inp.is-disabled, .tool-inp[disabled]{
  opacity:0.55;
  filter: grayscale(0.1);
}


/* === TOOLS PRO: KPIs / Recommendations (v15.2 polish) === */
.tool-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:520px){
  .tool-kpis{ grid-template-columns: 1fr; }
}
.tool-kpi{
  padding:12px;
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.kpi-k{
  font-size:0.72rem;
  letter-spacing:0.7px;
  text-transform:uppercase;
  opacity:0.7;
}
.kpi-v{
  margin-top:2px;
  font-size:1.1rem;
  font-weight:900;
}
.kpi-s{
  margin-top: 6px;
  font-size:0.85rem;
  opacity:0.9;
}

.tag{
  display:inline-flex;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight:800;
  font-size:0.78rem;
}
.tag.ok{
  border-color: rgba(60, 200, 120, 0.35);
  background: rgba(60, 200, 120, 0.12);
}
.tag.warn{
  border-color: rgba(240, 190, 60, 0.40);
  background: rgba(240, 190, 60, 0.12);
}

.tool-rec{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.tool-rec-title{
  font-weight:900;
  margin-bottom:8px;
}
.tool-rec-list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  line-height:1.25rem;
  opacity:0.95;
}


.tool-error{display:flex; gap:14px; padding:16px; border:1px solid rgba(255,255,255,0.12); border-radius:18px; background:rgba(255,255,255,0.04);}
.tool-error-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,120,0,0.12);border:1px solid rgba(255,120,0,0.18);}
.tool-error-title{font-weight:700; margin-bottom:4px;}
.tool-error-text{color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.35;}
.tool-error-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}


/* TOOLS PRO v2 (3 core tools) */
.tool-panel{ margin-top:10px; }

.tool-form{ margin-top:12px; }
.tool-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 430px){
  .tool-form-grid{ grid-template-columns: 1fr; }
}
.tool-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.86rem;
  opacity:0.92;
}
.tool-field.metric{ opacity:0.92; }
.tool-field.tool-check{
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.tool-field.tool-check input{ transform: scale(1.05); }

.tool-actions{ display:flex; gap:10px; margin-top:12px; }
.tool-actions .btn{ flex:1; }

.tool-out{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }

.tool-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 430px){
  .tool-kpis{ grid-template-columns: 1fr; }
}
.tool-kpi{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius:16px;
  padding:10px 12px;
}
.tool-kpi-l{ font-size:0.74rem; opacity:0.72; text-transform:uppercase; letter-spacing:0.6px; }
.tool-kpi-v{ font-weight:900; margin-top:2px; }

.tool-block{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius:18px;
  padding:12px;
}
.tool-block.primary{
  border-color: rgba(214,162,76,0.25);
  background: rgba(214,162,76,0.10);
}
.tool-block.warn{
  border-color: rgba(255,120,120,0.22);
  background: rgba(255,120,120,0.08);
}
.tool-block-tt{ font-weight:1000; letter-spacing:0.2px; margin-bottom:6px; }
.tool-block-li{ opacity:0.92; line-height:1.25rem; margin:4px 0; }

.tool-notes{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius:18px;
  padding:12px;
}
.tool-notes-tt{
  font-weight:1000;
  font-size:0.78rem;
  letter-spacing:0.8px;
  text-transform:uppercase;
  opacity:0.85;
  margin-bottom:6px;
}
.tool-note{ opacity:0.92; line-height:1.25rem; margin:4px 0; }

.tool-callout{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  opacity:0.95;
}
.tool-callout i{ margin-top:2px; opacity:0.8; }

.tool-gloss{
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
}
.tool-gloss-hd{
  font-weight:1000;
  font-size:0.78rem;
  letter-spacing:0.8px;
  text-transform:uppercase;
  opacity:0.85;
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.tool-gloss-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.tool-gloss-item{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
  align-items:start;
}
@media (max-width: 430px){
  .tool-gloss-item{ grid-template-columns: 1fr; }
}
.tool-gloss-item b{ font-weight:1000; }
.tool-gloss-item span{ opacity:0.9; line-height:1.25rem; }


/* TOOLS PRO — layout */
.tools-shell{display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 160px);padding-bottom:18px;}
.tools-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/brew/method-espresso.webp") type("image/webp"),
    url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.75) 100%
  );
  pointer-events:none;
}
.tools-hero > *{ position:relative; z-index:1; }

.tools-hero-title{
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
  font-size:2.05rem;
}
.tools-hero-sub{
  margin-top: 6px;
  color: #ffffff;
  font-size:0.95rem;
  line-height:1.25;
  max-width: 36ch;
}
.tools-grid{display:flex;flex-direction:column;gap:10px;}
.tool-card{cursor:pointer;}
.tool-spacer{flex:1 1 auto;}


/* TOOLS PRO — premium buttons */
.tool-actions{ display:flex; gap:12px; margin-top:14px; }
@media (max-width:430px){ .tool-actions{ flex-direction:column; } }

.tool-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  border-radius: 16px;
  padding: 14px 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 48px;
  width: 100%;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.tool-btn:active{ transform: scale(0.99); }
.tool-btn i{ font-size: 0.95rem; opacity:0.95; }

.tool-btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.18);
}
.tool-btn-primary:hover{ background: rgba(255,255,255,0.10); }

.tool-btn-ghost{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  opacity: 0.92;
}
.tool-btn-ghost:hover{ background: rgba(255,255,255,0.05); }


/* TOOLS PRO (CORE) */

.tools-shell{padding:16px 16px 0 16px;
  /* Hard reset of any section tint leaking from other modules */
  --tools-accent: rgba(214,162,76,0.95);
  --tools-accent-soft: rgba(214,162,76,0.18);
  --tools-accent-ink: rgba(214,162,76,0.80);
}
.tools-shell a{ color: inherit; }
.tools-shell *{ -webkit-tap-highlight-color: transparent; }
.tools-hero{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); border-radius:16px; padding:14px 14px; margin-bottom:14px;}
.tools-hero-title{font-size:14px; letter-spacing:0.18em; opacity:0.9; font-weight:700;}
.tools-hero-sub{margin-top: 6px; font-size:13px; opacity:0.75; line-height:1.35;}
.tools-body{display:flex; flex-direction:column; gap:14px;}
.tools-home{display:flex; flex-direction:column; gap:12px;}
.tools-help{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:14px; padding:12px;}
.tools-help-title{font-weight:700; font-size:13px; margin-bottom:6px;}
.tools-help-text{font-size:13px; opacity:0.8; line-height:1.35;}
.tools-help-muted{display:block; margin-top: 6px; opacity:0.7;}
.tools-grid{display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:900px){.tools-grid{grid-template-columns:1fr 1fr 1fr;}}
.tools-card{width:100%; text-align:left; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px; cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: var(--txt-main);
  -webkit-tap-highlight-color: transparent;
}

/* TOOLS cards: full image like "Tip of the day" (not mini-thumbnail only) */
.tools-card.tools-card--media{
  display:block;
  padding:0;
  overflow:hidden;
}
.tools-card.tools-card--media .tools-card-media{
  height:86px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.tools-card.tools-card--media .tools-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.62) 100%);
}
.tools-card.tools-card--media .tools-card-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
}
.tools-card.tools-card--media .tools-card-body{
  flex:1;
}

/* --------------------------------------------------------------------------
   GLOBAL iOS BUTTON/LINK COLOR LOCK
   Safari iOS applies a blue tint to <button>/<a> when color isn't explicitly
   set. Tech cards and back buttons are <button> elements in several sections
   (FOUNDATIONS, TOOLS, etc.). Force theme colors to prevent the default blue.
   -------------------------------------------------------------------------- */

button,
button:visited,
button:active,
button:focus {
  -webkit-appearance: none;
  appearance: none;
}

/* Primary system buttons */
.btn,
.btn:visited,
.btn:active,
.btn:focus {
  color: var(--txt-main);
}

/* Card-buttons used in Foundations and other menus */
button.tech-card,
button.tech-card:visited,
button.tech-card:active,
button.tech-card:focus,
button.tools-card,
button.tools-card:visited,
button.tools-card:active,
button.tools-card:focus {
  color: var(--txt-main);
  -webkit-tap-highlight-color: transparent;
}

/* Ensure inline text inherits unless explicitly set (e.g., var(--txt-dim)) */
button.tech-card *,
button.tools-card * {
  color: inherit;
}
.tools-card:active{transform:scale(0.99);}
.tools-card:focus,
.tools-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset, 0 12px 26px rgba(0,0,0,0.35);
}
.tools-card-ic{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.28));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
  color: var(--tools-accent);
}
.tools-card-title{font-weight:800; font-size:14px; color: var(--txt-main);}
.tools-card-desc{margin-top:4px; font-size:12.5px; opacity:0.72; line-height:1.35; color: color-mix(in srgb, var(--txt-main) 78%, var(--txt-dim) 22%);}
.tools-card-go{margin-left:auto; opacity:0.75; color: var(--tools-accent-ink);}

.tool-frame{display:flex; flex-direction:column; gap:12px;}
.tool-topbar{display:flex; align-items:center; gap:10px;}
.tool-back{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.02); color:inherit; border-radius:999px; padding:8px 10px; font-size:12.5px; display:flex; align-items:center; gap:8px;}
.tool-topbar-title{font-weight:900; letter-spacing:0.02em;}
.tool-topbar-spacer{flex:1;}

.tool-guide{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-guide-title{font-weight:900; margin-bottom:10px;}
.tool-guide-row{display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.06);}
.tool-guide-row:first-of-type{border-top:none;}
.tool-guide-k{font-size:12px; opacity:0.7; font-weight:700;}
.tool-guide-v{font-size:13px; opacity:0.82; line-height:1.35;}
.tool-guide-tip{margin-top:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); border-radius:12px; padding:10px; font-size:13px; opacity:0.85; display:flex; gap:8px; align-items:flex-start;}
.tool-guide-tip-tag{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:20px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); font-size:0.68rem; letter-spacing:0.18em; font-weight:900; opacity:0.9;}
.tool-guide-tip-tag{
  border-color: rgba(214,162,76,0.28);
  background: rgba(214,162,76,0.08);
  color: var(--tools-accent-ink);
}

.tool-panel{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:12px;}
.tool-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tool-grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
@media (max-width:420px){.tool-grid-2{grid-template-columns:1fr;} .tool-grid-3{grid-template-columns:1fr;}}
.tool-field span{display:block; font-size:12px; opacity:0.7; margin-bottom:6px; font-weight:700;}
.tool-input,.tool-select{width:100%; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.15); color:inherit; border-radius:12px; padding:10px 10px; font-size:14px; outline:none;}
.tools-shell .tool-input:focus,.tools-shell .tool-select:focus{
  border-color: rgba(214,162,76,0.45);
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
}
.tool-actions{display:flex; gap:10px;}
@media (max-width:420px){.tool-actions{flex-direction:column;}}
.tool-btn{border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:12px 12px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;}
.tool-btn-primary{background:rgba(255,255,255,0.10);}
.tool-btn-ghost{background:transparent; opacity:0.9;}
.tool-btn:active{transform:scale(0.99);}
.tool-output{display:flex; flex-direction:column; gap:10px; margin-top:4px;}

.tool-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:420px){.tool-kpis{grid-template-columns:1fr;}}
.tool-kpi{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:14px; padding:10px;}
.tool-kpi-k{font-size:12px; opacity:0.7; font-weight:700;}
.tool-kpi-v{font-size:16px; font-weight:900; margin-top:2px;}
.tool-actions-stack{display:flex; flex-direction:column; gap:10px;}
.tool-action-card{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px;}
.tool-action-title{font-weight:900;}
.tool-action-body{margin-top: 6px; font-size:13px; opacity:0.8; line-height:1.35;}
.tool-dont{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-dont-title{font-weight:900; margin-bottom:6px;}
.tool-dont ul{margin:0; padding-left:18px;}
.tool-dont li{margin:6px 0; font-size:13px; opacity:0.8; line-height:1.35;}

.tool-note{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-note-title{font-weight:900; margin-bottom:6px;}
.tool-note-text{font-size:13px; opacity:0.82; line-height:1.35;}
.tool-muted{opacity:0.72;}

.tool-glossary{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-glossary-title{font-weight:900; margin-bottom:6px;}
.tool-glossary-item{font-size:13px; opacity:0.82; line-height:1.35; margin-top:8px;}

.tool-sep{height:1px; background:rgba(255,255,255,0.06); margin:6px 0;}
.tool-inline-title{font-weight:900; font-size:13px; opacity:0.9; margin-top:2px;}

.tools-bottom-spacer{height:22px;}

/* =============================
   TOOLS (Sprint B) – Premium UI helpers
   ============================= */
.tools-backbtn-txt{font-weight:900;}

.tools-btn-lg{padding:10px 12px; border-radius:12px;}
.tools-btn-lg .tools-btn-lg-txt{margin-left:8px; font-weight:900;}

.tools-btn-pill{padding:8px 10px; border-radius:999px;}

.tools-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 2px;
}
.tools-tabbtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--txt-main);
  font-weight:900;
  letter-spacing:0.02em;
  cursor:pointer;
}
.tools-tabbtn i{opacity:0.9;}
.tools-tabbtn span{font-size:0.92rem;}
.tools-tabbtn.is-active,
.tools-tabbtn[aria-selected="true"]{
  background: var(--tools-accent-soft);
  border-color: color-mix(in srgb, var(--tools-accent) 40%, rgba(255,255,255,0.10));
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
}
.tools-tabbtn:active{transform:scale(0.99);}
.tools-tabbtn:focus-visible{outline:none; box-shadow: 0 0 0 2px var(--tools-accent-soft);}

/* Latte Lab panels */
.ll-panel{display:none;}
.ll-panel.is-active{display:block;}



/* =========================
   TOOLS PRO — Premium UI (v16.2)
   Align TOOLS visuals with the rest of Coffee OS (dark, copper, minimal).
   ========================= */
.tools-home{ display:flex; flex-direction:column; gap:14px; }
.tools-help{
  border:1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(0,0,0,0.20));
  border-radius: 16px;
  padding: 14px;
}
.tools-help-title{ font-weight: 900; letter-spacing: .2px; }
.tools-help-text{ margin-top: 6px; font-size:0.92rem; line-height:1.3rem; opacity:0.9; }
.tools-help-muted{ display:block; margin-top: 6px; opacity:0.72; font-size:0.86rem; }

.tools-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 860px){ .tools-grid{ grid-template-columns: 1fr 1fr 1fr; } }

.tools-card{
  width:100%;
  text-align:left;
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  border-radius: 16px;
  padding: 14px;
  cursor:pointer;
  transition: border-color 160ms ease, background 160ms ease;
  /* iOS button/link defaults can force blue text — lock to our theme */
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: var(--txt-main);
}
.tools-card:hover{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.035);
}
.tools-card:active{
  background: rgba(255,255,255,0.04);
}
.tools-card-ic{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.28));
  border: 1px solid rgba(255,255,255,0.10);
  /* Match the capsule stroke + give premium glow */
  box-shadow:
    0 0 0 1px var(--tools-accent-soft) inset,
    0 10px 22px rgba(0,0,0,0.35),
    0 0 14px color-mix(in srgb, var(--tools-accent) 28%, transparent);
  color: var(--tools-accent);
}
.tools-card-ic svg{opacity:0.98; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tools-accent) 28%, transparent));}
/* Force icon stroke to accent (prevents iOS button tint/visited weirdness) */
.tools-card-ic svg, .tools-card-ic svg *{ stroke: var(--tools-accent); }
.tools-card-title{ font-weight: 900; letter-spacing: .2px; color: var(--txt-main); }
.tools-card-desc{ margin-top:3px; font-size:0.9rem; opacity:0.75; line-height:1.25rem; color: color-mix(in srgb, var(--txt-main) 78%, var(--txt-dim) 22%); }
.tools-card-go{ margin-left:auto; opacity:0.80; font-size: 1.2rem; line-height: 1; color: var(--tools-accent-ink); }

.tool-panel{
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 14px;
}
.tool-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 520px){ .tool-grid-2{ grid-template-columns: 1fr; } }

.tool-field{ display:flex; flex-direction:column; gap:7px; }
.tool-field > span{ font-size:0.78rem; opacity:0.75; letter-spacing:0.5px; text-transform:uppercase; }

.tool-input, .tool-select{
  width:100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--txt-main);
  outline: none;
}
.tool-input{ font-family: var(--font-data); }
.tool-input:focus, .tool-select:focus{
  border-color: rgba(214,162,76,0.40);
  box-shadow: 0 0 0 3px rgba(214,162,76,0.12);
}

.tool-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}
@media (max-width: 520px){ .tool-actions{ flex-direction:column; } }

.tool-btn{
  width:100%;
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--txt-main);
  font-weight: 900;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.tool-btn i{ opacity:0.9; }
.tool-btn:active{ transform: scale(0.99); }

.tool-btn-primary{
  background: rgba(214,162,76,0.18);
  border-color: rgba(214,162,76,0.28);
}
.tool-btn-primary:hover{
  border-color: rgba(214,162,76,0.42);
  box-shadow: 0 16px 38px rgba(0,0,0,0.35), 0 0 0 1px rgba(214,162,76,0.10) inset;
}

.tool-btn-ghost{
  background: rgba(255,255,255,0.03);
}



/* ==========================================================================
   BREW | PRESET BANNER (from TOOLS)
   ========================================================================== */
.preset-banner{
  margin: 10px 0 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(1200px 400px at 10% 0%, rgba(214,162,76,0.18), transparent 55%), rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.preset-banner-top{ display:flex; flex-direction:column; gap:6px; }
.preset-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:0.9px;
  font-size: 0.72rem; color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}
.preset-badge i{ color: var(--accent); }
.preset-title{
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
}
.preset-sub{
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
}
.preset-banner-actions{
  display:flex; gap:10px; margin-top: 12px;
}
.preset-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 46px;
  width: 100%;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.preset-btn:active{ transform: scale(0.99); }
.preset-btn-primary{
  background: linear-gradient(180deg, rgba(214,162,76,0.28), rgba(214,162,76,0.10));
  border-color: rgba(214,162,76,0.35);
}
.preset-btn-ghost{
  background: rgba(255,255,255,0.04);
}
@media (max-width:430px){ .preset-banner-actions{ flex-direction:column; } }

/* Unified pro input (used in My Recipes + Tools) */
.input-pro{
  width:100%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  color:inherit;
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
.input-pro:focus{ border-color: rgba(214,162,76,0.65); box-shadow: 0 0 0 3px rgba(214,162,76,0.12); }


/* Foundations media */
.foundation-media{margin-top:12px;}
.foundation-img{display:block;width:100%;max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,140,61,0.12);}
.foundation-caption{margin-top:8px;font-size:12px;line-height:1.35;color:rgba(255,255,255,0.55);}


/* =======================
   Mini button (inline) 
   Used for small CTAs like "Add to Pantry" without breaking layout
   ======================= */
.btn-arch.btn-mini{
  width:auto;
  padding:10px 12px;
  border-radius:12px;
  font-size:0.72rem;
  letter-spacing:.6px;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-add-pantry{
  margin-top:8px;
}


/* =======================
   FOOD Manual (Guide)
   ======================= */
.food-manual section{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.food-manual h3{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.04em;
}
.food-manual p{
  margin:8px 0 0 0;
  color:rgba(255,255,255,0.80);
  line-height:1.45;
}
.food-manual ul, .food-manual ol{
  margin:10px 0 0 18px;
  padding:0;
  color:rgba(255,255,255,0.82);
  line-height:1.45;
}
.food-manual li{ margin:6px 0; }

/* FOOD | single-flow ops pack (keeps steps + standard in one card) */
.food-ops{ }
.food-ops-sep{
  height:1px;
  background:rgba(255,255,255,0.08);
  margin-top:12px;
}
.food-ops-title{
  margin-top:10px;
  font-weight:900;
  letter-spacing:0.04em;
}
.food-ops-block{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}
.food-ops-h{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.food-ops-b{ margin-top:8px; }
.food-ops-ul{ margin:8px 0 0 18px; }
.food-ops-ul li{ margin:6px 0; }

/* =====================================================================
   FOOD | SOP Renderer (tables-first)
   ===================================================================== */
.sop-table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(0,0,0,0.18);
}
.sop-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.sop-th, .sop-td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  vertical-align:top;
}
.sop-th{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:900;
  position:sticky;
  top:0;
  background:rgba(12,12,12,0.92);
  backdrop-filter: blur(10px);
}
.sop-step{ width:70px; text-align:center; font-weight:900; }
.sop-main{ font-weight:900; }
.sop-sub{ color:rgba(255,255,255,0.82); }
.sop-ok{ color:rgba(255,255,255,0.86); }
.sop-fix{ color:rgba(255,255,255,0.78); }

.sop-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.sop-param{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

/* =====================================================================
   FOOD | SOP Guided Mode (dots + play + step timer)
   ===================================================================== */
.sop-guide{
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
/* SOP: tabs (overview first, guided optional) */
.sop-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
}
.sop-shell{ margin-top:12px; }
.sop-panel{ margin-top:12px; }
.sop-tabbtn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--txt-dim);
  font-weight:900;
  letter-spacing:0.04em;
  cursor:pointer;
}
.sop-tabbtn.active{
  background:rgba(0,0,0,0.25);
  border-color:rgba(255,255,255,0.12);
  color:var(--txt);
}

.sop-guide-bar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sop-dots{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.sop-dot{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  /* Prevent iOS/Safari default blue tint on controls */
  -webkit-appearance:none;
  appearance:none;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.sop-dot-n{
  font-size:0.85rem;
  font-weight:900;
  color:rgba(255,255,255,0.78) !important;
  opacity:0.95;
}
.sop-dot:focus-visible{
  outline:none;
  border-color:rgba(214,162,76,0.65);
  box-shadow:
    0 0 0 3px rgba(214,162,76,0.14),
    0 0 0 1px rgba(214,162,76,0.20) inset;
}

/* Coffee OS sober copper accent (no "system blue") */
.sop-dot.active{
  background:rgba(214,162,76,0.18);
  border-color:rgba(214,162,76,0.55);
  box-shadow:
    0 0 0 4px rgba(214,162,76,0.10),
    0 10px 22px rgba(0,0,0,0.35);
}
.sop-dot.active .sop-dot-n{ opacity:1; color:rgba(247,236,220,0.95) !important; }

/* Optional: completed steps (when class "done" is applied) */
.sop-dot.done{
  background:rgba(214,162,76,0.10);
  border-color:rgba(214,162,76,0.35);
}
.sop-dot.done .sop-dot-n{ color:rgba(240,224,200,0.88) !important; }
.sop-guide-btns{ display:flex; gap:8px; align-items:center; }

.sop-guide-card{
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(0,0,0,0.20);
}
.sop-guide-meta{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sop-guide-row{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap:10px;
  margin-top:10px;
}
.sop-guide-k{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:900;
}
.sop-guide-v{ font-weight:700; }

.sop-timer{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.02);
}
.sop-timer-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sop-time{
  font-size:2.0rem;
  font-weight:900;
  letter-spacing:0.08em;
  margin-top:10px;
}
.sop-timer-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.sop-timer-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.sop-details summary{
  cursor:pointer;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  font-weight:900;
}
.sop-details[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.sop-k{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.sop-v{ margin-top: 6px; font-weight:900; }

.sop-qc{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.sop-qc-col{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}
.sop-qc-h{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.sop-ul{ margin:8px 0 0 18px; }
.sop-ul li{ margin:6px 0; }

@media (max-width: 520px){
  .sop-grid{ grid-template-columns:1fr; }
  .sop-qc{ grid-template-columns:1fr; }
}

/* FOOD SOP polish */
.sop-table{ border-collapse:separate; border-spacing:0; }
.sop-table tr:nth-child(even) .sop-td{ background:rgba(255,255,255,0.02); }
.sop-table tr:hover .sop-td{ background:rgba(255,255,255,0.04); }
.sop-th, .sop-td{ padding:10px 10px; }
.sop-th{ position:sticky; top:0; backdrop-filter:blur(8px); }
.sop-shell{ gap:14px; }
.sop-guide-card{ padding:14px; }
.sop-guide-row{ gap:10px; }
.sop-time{ font-variant-numeric:tabular-nums; }

/* Fix #8: SOP table → stacked cards on mobile */
@media (max-width: 520px){
  .sop-table{ min-width:0; }
  .sop-table thead{ display:none; }
  .sop-table tbody tr{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    margin-bottom:10px;
    padding:10px;
    background:rgba(255,255,255,0.02);
  }
  .sop-table .sop-td{
    display:block;
    padding:4px 0;
    border:none;
  }
  .sop-table .sop-td.sop-step{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--txt-dim);
    text-align:left;
    width:auto;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:6px;
  }
  .sop-table .sop-td .sop-sub::before{ content:'Criterio: '; font-weight:700; color:var(--txt-dim); font-size:0.78rem; }
  .sop-table .sop-td .sop-ok::before{ content:'✓ OK: '; font-weight:700; font-size:0.78rem; }
  .sop-table .sop-td .sop-fix::before{ content:'⚠ Fix: '; font-weight:700; font-size:0.78rem; }
}

/* Fix #9: Food chip row CSS class (replaces inline JS styles) */
.food-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scroll-snap-type:x proximity;
}
.food-chip-row::-webkit-scrollbar{ display:none; }

/* Fix #13: food-specific fallback icon styling */
.food-cat-mark .fa-utensils,
.food-thumb-icon .fa-utensils{ color:var(--accent); }


/* ==========================================================================
   BUSINESS (V1)
   ========================================================================== */
.biz-form{ display:block; }
.biz-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 520px){
  .biz-grid{ grid-template-columns: 1fr; }
}

.biz-help{
  display:block;
  margin-top: 6px;
  font-size:0.78rem;
  color: rgba(255,255,255,0.55);
  line-height:1.25;
}
.biz-help code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.75rem;
  color: rgba(255,255,255,0.7);
}
.biz-helpbox{
  border:1px solid var(--border-dim);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  padding:10px 12px;
  margin-bottom:12px;
  box-sizing:border-box;
  width:100%;
  grid-column: 1 / -1;
}
.biz-helpbox summary{
  cursor:pointer;
  font-weight:800;
  letter-spacing:0.02em;
  color: var(--txt);
  list-style:none;
}
.biz-helpbox summary::-webkit-details-marker{ display:none; }
.biz-helpbox ul{
  margin:10px 0 0 18px;
  color: rgba(255,255,255,0.75);
  font-size:0.88rem;
  line-height:1.35;
}
.biz-helpbox li{ margin:6px 0; }

.biz-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.85rem;
  color:var(--txt-dim);
}
.biz-field input, .biz-field select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border-dim);
  background: rgba(255,255,255,0.03);
  color: var(--txt);
  outline:none;
}
.biz-field input::placeholder{ color: rgba(255,255,255,0.35); }

/* Business / Operations / CRM: enforce dark inputs even when not wrapped in .biz-field */
#biz-body input,
#biz-body select,
#biz-body textarea{
  border-radius:12px;
  border:1px solid var(--border-dim);
  background: rgba(255,255,255,0.03);
  color: var(--txt);
  padding:10px 10px;
  outline:none;
}
#biz-body input::placeholder,
#biz-body textarea::placeholder{ color: rgba(255,255,255,0.35); }

/* =========================================================
   BUSINESS | Stepper + Health Check
   ========================================================= */
.biz-stepper{
  display:grid;
  gap:10px;
}
.biz-step{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(0,0,0,0.10);
}
.biz-step-ic{
  font-size:1.1rem;
  width:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.biz-step-body{ flex:1; }
.biz-step-title{ font-weight:1000; }
.biz-step-hint{ color:var(--txt-dim); font-size:0.9rem; margin-top:2px; }
.biz-health{
  padding:10px;
  border:1px dashed rgba(255,255,255,0.14);
  border-radius:14px;
  background: rgba(0,0,0,0.06);
}

.biz-breakdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.biz-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border:1px solid var(--border-dim);
  border-radius:12px;
  background: rgba(255,255,255,0.02);
}
.biz-row.err{ border-color: rgba(255,120,120,0.35); background: rgba(255,120,120,0.06); }
.biz-row-main{ min-width:0; }
.biz-row-name{
  font-weight:800;
  letter-spacing:0.02em;
  color: var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.biz-row-meta{ margin-top:2px; font-size:0.8rem; color: var(--txt-dim); }
.biz-row-cost{ font-weight:900; white-space:nowrap; }
.biz-miss{
  font-weight:900;
  color: rgba(255,180,120,0.95);
}

.tool-warn{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,180,120,0.35);
  background: rgba(255,180,120,0.08);
  color: rgba(255,220,190,0.95);
  font-size:0.9rem;
}



/* BUSINESS: align action buttons in Cost Simulator */
.biz-btn-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.biz-btn-row .biz-btn{
  flex:1;
  justify-content:center;
  margin-top:0; /* override .btn-secondary margin-top */
}
.biz-btn-row .biz-btn-accent{
  border-color: rgba(214,162,76,0.45);
  background: rgba(214,162,76,0.10);
}
.biz-btn-row .biz-btn-accent:hover{
  background: rgba(214,162,76,0.16);
  border-color: rgba(214,162,76,0.60);
}


/* ==========================================================================
   DASHBOARD V2 (HOME) — REMOVED (V3 active)
   ========================================================================== */

/* (home-v2 removed — V3 is the active layout) */

/* ==========================================================================
   DASHBOARD V3 (HOME) — full-bleed hero photo (Apple-like)
   ========================================================================== */

.home-v3{ padding: 0 0 80px; }

.hero-home{
  position: relative;
  height: clamp(320px, 48vh, 520px);
  overflow: hidden;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
}

/* Taller hero on bigger screens (Pro Max, etc) */
@media (min-height: 850px) {
  .hero-home { height: clamp(360px, 50vh, 560px); }
}
@media (min-height: 920px) {
  .hero-home { height: clamp(380px, 52vh, 600px); }
}

.hero-media{
  position:absolute;
  inset:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.02);
}

.hero-scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.25) 30%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0.92) 100%
  );
}

.hero-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 78% 18%, rgba(196,138,73,.10), transparent 60%);
  pointer-events:none;
}

.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 54px 20px 22px;
}

.hero-top{
  position:absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.hero-kicker{
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.hero-gear{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .9rem;
  transition: transform .12s ease, background .15s ease;
}
.hero-gear:active{ transform: scale(.95); background: rgba(0,0,0,.45); }

/* Mini hero inside cards (Dashboard: Real progress) */
.mini-hero{
  position: relative;
  height: 138px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.mini-hero-media{
  position:absolute;
  inset:0;
}

.mini-hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 72% 55%;
  transform: scale(1.02);
}

.mini-hero-scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.50) 55%,
    rgba(0,0,0,.88) 100%
  );
}

.mini-hero-content{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}

.mini-hero-kicker{
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.mini-hero-title{
  font-weight: 900;
  font-size: 1.06rem;
  margin-top: 4px;
  color: rgba(255,255,255,.96);
}

.mini-hero-score{
  font-weight: 900;
  color: var(--accent);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  padding: 8px 10px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-brand{
  font-size: .72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}

.hero-greet{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.05;
}

.hero-sub{
  margin-top: 10px;
  font-size: .92rem;
  color: rgba(255,255,255,.62);
  line-height: 1.4;
  max-width: 32ch;
  font-style: italic;
}

.hero-actions{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-actions .hero-btn{ width: 100%; margin-top: 0; }

.hero-meta{
  margin-top: 16px;
  display:flex;
  width: 100%;
  gap: 12px;
}

/* HOME hero pills: keep the same visual style, just distribute evenly (50/50) */
.hero-meta .pill{
  flex: 1;
  min-width: 0;
  justify-content: center;
}

/* Align the rest of the dashboard to feel premium under the hero */
.home-v3 .dash-card,
.home-v3 .dash-explore,
.home-v3 .dash-bridge{
  padding: 0 14px;
}
.home-v3 .dash-card{ margin-top: 16px; }
.home-v3 .dash-explore{ margin-top: 18px; }
.home-v3 .dash-bridge{ margin-top: 16px; }

/* dash-hero V2 removed — V3 hero-home is the active layout */

/* Brand in-section rows were visually breaking layouts.
   We revert sections to the original clean layout and use ONLY the global watermark. */
.brand-section-row,
.brand-section{
  display: none !important;
}

.dash-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .76rem; color: rgba(255,255,255,.88);
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dash-card { margin-top: 14px; }
.dash-card-h { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.dash-card-k { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--txt-dim); }
.dash-card-t { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }
.dash-card-s { font-size: .88rem; color: var(--txt-dim); margin-top: 6px; line-height: 1.35; }
.dash-card-ico { font-size: 1.15rem; color: var(--accent); margin-top: 2px; }

.dash-btn { width: 100%; margin-top: 12px; }

.dash-explore { margin-top: 18px; }
.dash-section-h { margin-bottom: 10px; }
.dash-section-k { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--txt-dim); }
.dash-section-t { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dash-tile {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--txt-main);
}

/* Photo tiles (Apple-like) */
.dash-tile.photo{
  min-height: 110px;
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Taller tiles on bigger screens */
@media (min-height: 800px) {
  .dash-tile.photo { min-height: 130px; }
}
@media (min-height: 920px) {
  .dash-tile.photo { min-height: 148px; }
  .dash-grid { gap: 14px; }
}
@media (hover:hover){
  .dash-tile.photo:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .dash-tile.photo:hover::before{ transform: scale(1.12); opacity: .78; }
}
.dash-tile.photo:focus-visible{ outline: 2px solid rgba(255,255,255,.18); outline-offset: 2px; }
.dash-tile.photo:focus-visible::before{ transform: scale(1.12); opacity: .78; }
.dash-tile.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  opacity: .70;
  filter: saturate(1.04) contrast(1.02);
  transition: transform .55s ease, opacity .25s ease;
}
.dash-tile.photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.62) 70%,
    rgba(0,0,0,.78) 100%
  );
}
.dash-tile.photo > *{ position: relative; z-index: 2; }

/* Per-route backgrounds (jpg fallback + webp via image-set) */
.dash-tile.tile-brew{ --tile-bg: url("../img/hero/tiles/brew.jpg"); --tile-bg: image-set(url("../img/hero/tiles/brew.webp") type("image/webp"), url("../img/hero/tiles/brew.jpg") type("image/jpeg")); }
.dash-tile.tile-drinks{ --tile-bg: url("../img/hero/tiles/drinks.jpg"); --tile-bg: image-set(url("../img/hero/tiles/drinks.webp") type("image/webp"), url("../img/hero/tiles/drinks.jpg") type("image/jpeg")); }
.dash-tile.tile-food{ --tile-bg: url("../img/hero/tiles/food.jpg"); --tile-bg: image-set(url("../img/hero/tiles/food.webp") type("image/webp"), url("../img/hero/tiles/food.jpg") type("image/jpeg")); }
.dash-tile.tile-tools{ --tile-bg: url("../img/hero/tiles/tools.jpg"); --tile-bg: image-set(url("../img/hero/tiles/tools.webp") type("image/webp"), url("../img/hero/tiles/tools.jpg") type("image/jpeg")); }
.dash-tile.tile-foundations{ --tile-bg: url("../img/hero/tiles/foundations.jpg"); --tile-bg: image-set(url("../img/hero/tiles/foundations.webp") type("image/webp"), url("../img/hero/tiles/foundations.jpg") type("image/jpeg")); }
.dash-tile.tile-business{ --tile-bg: url("../img/hero/tiles/business.jpg"); --tile-bg: image-set(url("../img/hero/tiles/business.webp") type("image/webp"), url("../img/hero/tiles/business.jpg") type("image/jpeg")); }


/* FOUNDATIONS — module photo tiles */
.foundations-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/foundations/foundations-hero.webp") type("image/webp"),
    url("../img/hero/foundations/foundations-hero.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.foundations-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.72) 100%
  );
}
.foundations-hero > *{ position:relative; z-index:1; }

.foundations-hero-title{
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:14px;
  margin:0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.foundations-hero-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  opacity:0.82;
  max-width: 68ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.foundations-tiles{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.foundations-tiles .dash-tile.photo{
  min-height: 132px;
}

.dash-tile.tile-found-coffee_basics{ --tile-bg: image-set(url("../img/hero/foundations/coffee_basics.webp") type("image/webp"), url("../img/hero/foundations/coffee_basics.jpg") type("image/jpeg")); }
.dash-tile.tile-found-extraction_fundamentals{ --tile-bg: image-set(url("../img/hero/foundations/extraction_fundamentals.webp") type("image/webp"), url("../img/hero/foundations/extraction_fundamentals.jpg") type("image/jpeg")); }
.dash-tile.tile-found-grind_water{ --tile-bg: image-set(url("../img/hero/foundations/grind_water.webp") type("image/webp"), url("../img/hero/foundations/grind_water.jpg") type("image/jpeg")); }
.dash-tile.tile-found-beans_origins{ --tile-bg: image-set(url("../img/hero/foundations/beans_origins.webp") type("image/webp"), url("../img/hero/foundations/beans_origins.jpg") type("image/jpeg")); }
.dash-tile.tile-found-processing_methods{ --tile-bg: image-set(url("../img/hero/foundations/processing_methods.webp") type("image/webp"), url("../img/hero/foundations/processing_methods.jpg") type("image/jpeg")); }
.dash-tile.tile-found-equipment_tools{ --tile-bg: image-set(url("../img/hero/foundations/equipment_tools.webp") type("image/webp"), url("../img/hero/foundations/equipment_tools.jpg") type("image/jpeg")); }
.dash-tile.tile-found-milk_latte_art{ --tile-bg: image-set(url("../img/hero/foundations/milk_latte_art.webp") type("image/webp"), url("../img/hero/foundations/milk_latte_art.jpg") type("image/jpeg")); }
.dash-tile.tile-found-latte_art_academy{ --tile-bg: image-set(url("../img/hero/foundations/latte_art_academy.webp") type("image/webp"), url("../img/hero/foundations/latte_art_academy.jpg") type("image/jpeg")); }
.dash-tile.tile-found-caffeine_basics{ --tile-bg: image-set(url("../img/hero/foundations/caffeine_basics.webp") type("image/webp"), url("../img/hero/foundations/caffeine_basics.jpg") type("image/jpeg")); }
.dash-tile.tile-found-sensory_analysis{ --tile-bg: image-set(url("../img/hero/foundations/sensory_analysis.webp") type("image/webp"), url("../img/hero/foundations/sensory_analysis.jpg") type("image/jpeg")); }
.dash-tile.tile-found-barista_quiz{ --tile-bg: image-set(url("../img/hero/foundations/barista_quiz.webp") type("image/webp"), url("../img/hero/foundations/barista_quiz.jpg") type("image/jpeg")); }



/* Dashboard photo cards (same concept as tiles) */
.dash-card.photo,
.dash-bridge-inner.photo{
  position: relative;
  overflow: hidden;
}

.dash-card.photo{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 20px;
}

.dash-card.photo::before,
.dash-bridge-inner.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  opacity: .72;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .55s ease, opacity .25s ease;
}

.dash-card.photo::after,
.dash-bridge-inner.photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.58) 70%,
    rgba(0,0,0,.78) 100%
  );
}

.dash-card.photo > *,
.dash-bridge-inner.photo > *{
  position: relative;
  z-index: 2;
}

@media (hover:hover){
  .dash-card.photo:hover,
  .dash-bridge-inner.photo:hover{
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .dash-card.photo:hover::before,
  .dash-bridge-inner.photo:hover::before{
    transform: scale(1.12);
    opacity: .80;
  }
}

/* Card backgrounds */
/* Card backgrounds (jpg fallback + webp via image-set) */
.dash-card.card-practice{ --card-bg: url("../img/hero/cards/practice.jpg"); --card-bg: image-set(url("../img/hero/cards/practice.webp") type("image/webp"), url("../img/hero/cards/practice.jpg") type("image/jpeg")); }
.dash-card.card-wow{ --card-bg: url("../img/hero/cards/wow.jpg"); --card-bg: image-set(url("../img/hero/cards/wow.webp") type("image/webp"), url("../img/hero/cards/wow.jpg") type("image/jpeg")); }
.dash-bridge-inner.bridge-cafe{ --card-bg: url("../img/hero/cards/cafe.jpg"); --card-bg: image-set(url("../img/hero/cards/cafe.webp") type("image/webp"), url("../img/hero/cards/cafe.jpg") type("image/jpeg")); }
.dash-tile:active { transform: scale(.99); }
.dash-tile-ico { font-size: 1.05rem; color: rgba(255,255,255,.92); }
.dash-tile-t { margin-top: 8px; font-weight: 800; }
.dash-tile-s { margin-top: 3px; font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.25; }

.dash-fact { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.dash-fact-title { font-weight: 800; }
.dash-fact-body { margin-top: 6px; color: var(--txt-dim); line-height: 1.35; font-size: .88rem; }

.dash-bridge { margin-top: 16px; padding-bottom: 6px; }
.dash-bridge-inner {
  display:flex; justify-content:space-between; gap: 12px; align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.dash-bridge-t { font-weight: 800; }
.dash-bridge-s { margin-top: 3px; font-size: .85rem; color: var(--txt-dim); }

/* --------------------------------------------------------------------------
   HOME V3 — Alignment + typography polish (Dashboard)
   Goal: cards feel like the same system as tiles (same inner padding + rhythm).
   -------------------------------------------------------------------------- */

.home-v3{
  /* IMPORTANT:
     The viewport already has 20px padding.
     Adding extra horizontal padding at block-level makes cards/tiles look "off" on iPhone.
     So we keep everything aligned to the viewport rail and only tune INNER padding per component.
  */
  --dash-pad: 0px;
}

/* Ensure every block aligns to the same horizontal rhythm */
.home-v3 .dash-card,
.home-v3 .dash-explore,
.home-v3 .dash-bridge{
  padding-left: var(--dash-pad);
  padding-right: var(--dash-pad);
}

/* Cards were inheriting .tech-card padding (20px) which looked "off" vs tiles (14px).
   We keep the tech-card look, but match the tile system spacing. */
.home-v3 .dash-card.tech-card{
  padding: 18px;
  border-radius: 18px;
  margin-bottom: 0; /* avoid extra gaps between dashboard blocks */
}

.home-v3 .dash-card-h{ align-items: flex-start; }
.home-v3 .dash-card-k{
  font-size: .70rem;
  letter-spacing: 1.8px;
  opacity: .92;
}
.home-v3 .dash-card-t{
  font-size: 1.16rem;
  letter-spacing: .1px;
}
.home-v3 .dash-card-s{
  font-size: .94rem;
  line-height: 1.42;
}

/* Bridge: match the same inner padding + radius and improve text hierarchy */
.home-v3 .dash-bridge-inner{
  padding: 18px;
  border-radius: 18px;
}

/* Buttons on HOME: cleaner + more premium, without touching other modules */
.home-v3 .btn-arch{
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.82rem;
  letter-spacing: 1.2px;
}
.home-v3 .btn-arch.primary{
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}
.home-v3 .dash-bridge-t{
  font-size: 1.06rem;
  line-height: 1.15;
  letter-spacing: .2px;
}
.home-v3 .dash-bridge-s{
  font-size: .90rem;
  line-height: 1.35;
}

/* Buttons inside dashboard blocks: slightly tighter + cleaner radius.
   (Scoped to HOME only so we don't affect other modules.) */
.home-v3 .dash-btn.btn-arch{
  padding: 14px 14px;
  border-radius: 12px;
  font-size: .86rem;
  letter-spacing: 1.2px;
}
.home-v3 .dash-btn.btn-arch.primary{
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Small improvement: avoid icon jumping / inconsistent alignment */
.home-v3 .dash-card-ico,
.home-v3 .dash-tile-ico{
  line-height: 1;
}



/* --------------------------------------------------------------------------
   HOME V3 — Coffee Pulse (animated SVG command card)
   -------------------------------------------------------------------------- */
.home-v3 .coffee-pulse-card{
  overflow: hidden;
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(214,162,76,.18) 0%, rgba(214,162,76,.05) 28%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.01) 100%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.home-v3 .coffee-pulse-card::before{
  content:"";
  position:absolute;
  inset:auto -22% 52% auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(214,162,76,.18) 0%, rgba(214,162,76,.04) 46%, rgba(214,162,76,0) 72%);
  pointer-events:none;
}
.home-v3 .coffee-pulse-shell{
  display:grid;
  grid-template-columns: 1.2fr minmax(112px, 156px);
  gap: 16px;
  align-items: center;
}
.home-v3 .coffee-pulse-copy,
.home-v3 .coffee-pulse-visual{
  position: relative;
  z-index: 1;
}
.home-v3 .coffee-pulse-kicker{
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.home-v3 .coffee-pulse-title{
  margin-top: 8px;
  font-size: 1.18rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .01em;
}
.home-v3 .coffee-pulse-body{
  margin-top: 8px;
  font-size: .93rem;
  line-height: 1.46;
  color: rgba(255,255,255,.74);
}
.home-v3 .coffee-pulse-tags{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-v3 .coffee-pulse-tags .dash-pill{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.home-v3 .coffee-pulse-actions{
  margin-top: 14px;
}
.home-v3 .coffee-pulse-metric{
  margin-top: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.58);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-v3 .coffee-pulse-visual{
  min-height: 170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.home-v3 .coffee-pulse-svg{
  width: 150px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.home-v3 .coffee-pulse-track,
.home-v3 .coffee-pulse-progress{
  fill:none;
  stroke-width: 7;
  transform: rotate(-90deg);
  transform-origin: 80px 80px;
  stroke-linecap: round;
}
.home-v3 .coffee-pulse-track{
  stroke: rgba(255,255,255,.08);
}
.home-v3 .coffee-pulse-progress{
  stroke: url(#coffeePulseGradient);
  filter: drop-shadow(0 0 10px rgba(214,162,76,.24));
  animation: coffeePulseIntro 1.2s cubic-bezier(.22,.84,.28,1) both;
}
.home-v3 .coffee-pulse-core-glow{
  fill: url(#coffeePulseCore);
  animation: coffeePulseCoreGlow 3.8s ease-in-out infinite;
}
.home-v3 .coffee-pulse-core-ring{
  fill: rgba(255,255,255,.015);
  stroke: rgba(255,255,255,.08);
  stroke-width: 1.4;
}
.home-v3 .coffee-pulse-cup,
.home-v3 .coffee-pulse-saucer{
  fill: none;
  stroke: rgba(255,255,255,.90);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.home-v3 .coffee-pulse-saucer{
  stroke-width: 2.0;
  opacity: .68;
}
.home-v3 .coffee-pulse-steam{
  fill:none;
  stroke: rgba(255,255,255,.78);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: .70;
}
.home-v3 .coffee-pulse-steam.steam-a{ animation: coffeeSteam 3.3s ease-in-out infinite; }
.home-v3 .coffee-pulse-steam.steam-b{ animation: coffeeSteam 3.3s ease-in-out infinite .35s; }
.home-v3 .coffee-pulse-steam.steam-c{ animation: coffeeSteam 3.3s ease-in-out infinite .7s; }
.home-v3 .coffee-pulse-wave{
  fill:none;
  stroke: rgba(214,162,76,.72);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 10 11;
  animation: coffeeWave 5s linear infinite;
}
.home-v3 .coffee-pulse-orbit{
  transform-origin: 80px 80px;
  animation: coffeeOrbit 8.8s linear infinite;
}
.home-v3 .coffee-pulse-orbit-dot{
  fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 0 8px rgba(214,162,76,.55));
}
.home-v3 .coffee-pulse-score{
  margin-top: 2px;
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}
.home-v3 .coffee-pulse-score-sub{
  margin-top: 2px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.54);
}

/* Premium motion for the HOME hero + nav shell */
.hero-home::before{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -50px;
  top: -36px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(214,162,76,.28) 0%, rgba(214,162,76,.08) 42%, rgba(214,162,76,0) 70%);
  filter: blur(2px);
  animation: heroOrbFloat 10s ease-in-out infinite;
  pointer-events:none;
}
.hero-home::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.02) 35%, rgba(255,255,255,.08) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: heroSheen 8.5s ease-in-out infinite;
  pointer-events:none;
}

#top-bar{
  background: linear-gradient(180deg, rgba(10,10,10,.92), rgba(10,10,10,.78));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
#top-bar::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
#bottom-dock::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255,255,255,.06);
  pointer-events:none;
}
#bottom-dock::after{
  content: none;
}
#bottom-nav .nav-item{
  transition: transform .16s ease, background .22s ease, border-color .22s ease, opacity .18s ease, box-shadow .22s ease, color .22s ease;
}
#bottom-nav .nav-item.active{
  box-shadow:
    0 10px 24px rgba(0,0,0,0.40),
    0 0 20px rgba(214,162,76,0.06);
}
#bottom-nav .nav-item.active::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(214,162,76,0.55);
  opacity: 1;
}

/* Route loading overlay glyph */
.route-loader-glyph{
  width: 44px;
  height: 44px;
}
.route-loader-core{
  fill:none;
  stroke: rgba(214,162,76,.92);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 42 30;
  transform-origin: 22px 22px;
  animation: routeLoaderSpin 1.2s linear infinite;
}
.route-loader-steam{
  fill:none;
  stroke: rgba(255,255,255,.78);
  stroke-width: 2.1;
  stroke-linecap: round;
}
.route-loader-steam.s1{ animation: routeLoaderSteam 2s ease-in-out infinite; }
.route-loader-steam.s2{ animation: routeLoaderSteam 2s ease-in-out infinite .2s; }
.route-loader-steam.s3{ animation: routeLoaderSteam 2s ease-in-out infinite .4s; }
.route-loader-cup,
.route-loader-saucer{
  fill:none;
  stroke: rgba(255,255,255,.88);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-loader-saucer{ opacity:.72; }

@keyframes coffeePulseIntro{
  from{ opacity: .35; stroke-dashoffset: 289; }
  to{ opacity: 1; }
}
@keyframes coffeePulseCoreGlow{
  0%,100%{ opacity: .50; transform: scale(.96); transform-origin: 80px 84px; }
  50%{ opacity: 1; transform: scale(1.06); transform-origin: 80px 84px; }
}
@keyframes coffeeSteam{
  0%{ opacity: 0; transform: translateY(8px); }
  22%{ opacity: .86; }
  100%{ opacity: 0; transform: translateY(-12px); }
}
@keyframes coffeeWave{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -84; }
}
@keyframes coffeeOrbit{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes heroOrbFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity: .76; }
  50%{ transform: translate3d(-14px,10px,0) scale(1.08); opacity: 1; }
}
@keyframes heroSheen{
  0%,100%{ transform: translateX(-120%); opacity: 0; }
  20%{ opacity: .18; }
  55%{ transform: translateX(120%); opacity: .28; }
  75%{ opacity: 0; }
}
@keyframes routeLoaderSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes routeLoaderSteam{
  0%{ opacity: 0; transform: translateY(4px); }
  20%{ opacity: .82; }
  100%{ opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 760px){
  .home-v3 .coffee-pulse-shell{
    grid-template-columns: 1fr;
  }
  .home-v3 .coffee-pulse-visual{
    order: -1;
    min-height: 150px;
  }
  .home-v3 .coffee-pulse-svg{
    width: 136px;
  }
}
@media (max-width: 420px){
  .home-v3 .coffee-pulse-title{
    font-size: 1.08rem;
  }
  .home-v3 .coffee-pulse-body{
    font-size: .90rem;
  }
}

/* ==========================================================================
   SETTINGS
   ========================================================================== */

/* ==========================================================================
   SETTINGS — V2 (restructured, multi-card, accessible)
   ========================================================================== */
.settings-wrap { padding: 16px 14px 80px; display:flex; flex-direction:column; gap:14px; }
.settings-hero { margin-bottom: 2px; }
.settings-kicker { font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color: var(--txt-dim); }
.settings-title { margin-top: 6px; font-size: 1.35rem; font-weight: 800; }
.settings-sub { margin-top: 6px; color: var(--txt-dim); line-height: 1.35; }

.settings-card { padding: 16px; }
.settings-row { margin-top: 14px; }
.settings-row:first-child { margin-top: 0; }
.settings-label { font-weight: 800; margin-bottom: 6px; font-size: 0.9rem; }
.settings-hint { font-size: .82rem; color: var(--txt-dim); line-height: 1.35; margin-top: 6px; }

.settings-input, .settings-select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--txt-main);
  outline: none;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  transition: border-color 0.2s;
}
.settings-input:focus, .settings-select:focus {
  border-color: rgba(214,162,76,.5);
  background: rgba(0,0,0,.32);
}

.settings-split { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(214,162,76,.25);
  background: rgba(214,162,76,.08);
  font-family: var(--font-data);
  font-size: .84rem;
  font-weight: 700;
  width: fit-content;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.settings-chips { display:flex; gap: 8px; margin-top: 8px; flex-wrap:wrap; }
.settings-chips .chip { cursor: pointer; transition: all 0.2s; }
.settings-chips .chip:hover { border-color: rgba(255,255,255,.18); }
.chip.active { background: rgba(196, 138, 73, .18); border-color: rgba(196, 138, 73, .38); }

/* -- Section headers inside cards -- */
.settings-section-head {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.settings-section-head i { color: var(--accent); font-size: 0.9rem; }

/* -- Avatar -- */
.settings-avatar-row { display: flex; align-items: center; gap: 14px; }
.settings-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(214,162,76,.25), rgba(214,162,76,.08));
  border: 2px solid rgba(214,162,76,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
}

/* -- Custom toggle switch (replaces native checkbox) -- */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.settings-switch {
  position: relative;
  width: 48px; height: 28px;
  flex-shrink: 0;
}
.settings-switch input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.settings-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background 0.25s;
  border: 1px solid rgba(255,255,255,.08);
}
.settings-switch-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--txt-dim);
  transition: transform 0.25s, background 0.25s;
}
.settings-switch input:checked + .settings-switch-slider {
  background: rgba(214,162,76,.30);
  border-color: rgba(214,162,76,.40);
}
.settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(20px);
  background: var(--accent);
}

/* -- Stats row -- */
.settings-stats-row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 10px -4px 0;
}
.settings-stats-row::-webkit-scrollbar { display: none; }
.settings-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 4px;
}
.settings-stat-n {
  font-family: var(--font-data);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--txt-main);
}
.settings-stat-l {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
  margin-top: 2px;
}

/* -- Button groups (side by side) -- */
.settings-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-btn-group .btn-arch { margin-top: 0; }

/* -- Save area (floating feel) -- */
.settings-save-area { padding: 0; }
.settings-save-area .btn-arch { width: 100%; }

/* -- Collapsible diagnostics -- */
.settings-collapsible {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  justify-content: space-between;
  color: var(--txt-dim);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.settings-collapse-icon {
  transition: transform 0.25s;
  font-size: 0.72rem;
  color: var(--txt-dim);
}
.settings-collapsible-body { padding-top: 12px; }

/* -- Error items -- */
.settings-error-item { padding: 10px !important; }
.settings-error-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* -- About -- */
.settings-about { padding: 14px 16px; }
.settings-about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.settings-about-name {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}
.settings-about-ver {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--txt-dim);
  margin-top: 2px;
  letter-spacing: 0.06em;
}
.settings-about-badge {
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214,162,76,.25);
  background: rgba(214,162,76,.08);
  color: var(--accent);
}

/* Legacy compat: old .toggle style */
.settings-toggles { display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.toggle { display:flex; align-items:center; gap: 10px; color: var(--txt-main); }
.toggle input { transform: scale(1.05); }

@media (max-width: 480px){
  .settings-stats-row { gap: 0; }
  .settings-stat { padding: 8px 2px; }
  .settings-stat-n { font-size: 0.95rem; }
  .settings-btn-group { grid-template-columns: 1fr; }
}
@media (max-width: 360px){ .settings-split{ grid-template-columns:1fr; } .dash-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   BREW | Brew Lab Header (subtitle + hero)
   ========================================================================== */
/* Default subtitle style (used in a few places) */
.brew-lab-subtitle{
  color: var(--txt-dim);
  font-size: 0.95rem;
  margin: 6px 0 10px 0;
}

.brew-lab-hero{
  width: 100%;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: image-set(
    url("../img/hero/brew/brew-lab-hero.webp") type("image/webp"),
    url("../img/hero/brew/brew-lab-hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  /* Push focus slightly to the right so the pour stays visible on iPhone */
  background-position: 70% center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  margin: 0 0 22px 0;
}

/* Scrim for readability */
.brew-lab-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.40) 40%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events:none;
}

/* Soft vignette */
.brew-lab-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 90% at 10% 15%,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.34) 55%,
    rgba(0,0,0,0.52) 100%
  );
  pointer-events:none;
}

/* When used as a header hero, place subtitle on top of the image */
.brew-lab-hero--header .brew-lab-hero-content{
  position:absolute;
  inset:0;
  padding: 18px 18px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: space-around;
  gap: 6px;
  z-index: 2;
}


.brew-lab-title{
  font-size: 0.95rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

.brew-lab-hero--header .brew-lab-subtitle{
  margin: 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

@media (max-width: 420px){
  .brew-lab-hero{ height: 150px; }
}

/* ==========================================================================
   BREW | Visual Method Grid (photo cards)
   ========================================================================== */
.brew-method-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* More breathing room between cards */
  gap:24px;
  margin-top: 0; /* spacing handled by hero margin */
}

.brew-method-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  /* Larger cards so the grid doesn't feel cramped on mobile */
  min-height:182px;
  background: var(--tile-bg, rgba(255,255,255,0.04));
  background-size: cover;
  background-position:center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.brew-method-card:active{ transform: translateY(1px); }

.brew-method-scrim{
  position:absolute; inset:0;
  z-index:1;
  /* Stronger at the top for text readability (keeps image alive) */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.48) 38%,
    rgba(0,0,0,0.22) 100%
  );
}

.brew-method-content{
  position:absolute;
  top:12px;
  left:14px;
  right:42px;
  z-index:2;

  /* keep a clean top-left stack */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.brew-method-content::before{
  content:"";
  position:absolute;
  inset:-10px -10px -14px -10px;
  border-radius:16px;
  /* subtle local haze behind text (not a blur filter) */
  background: radial-gradient(120% 120% at 0% 0%,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.00) 100%
  );
  z-index:-1;
}

.brew-method-kicker{
  font-size:0.70rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom:6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-title{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:0.01em;
  color: rgba(255,255,255,0.96);
  line-height:1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-sub{
  margin-top:4px;
  font-size:0.88rem;
  color: rgba(255,255,255,0.72);
  line-height:1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-arrow{
  position:absolute;
  right: 10px; bottom:12px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-weight:800;
  z-index: 3;
}

/* Per-method photo backgrounds (webp + jpg fallback via image-set) */
.brew-method-card.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.brew-method-card.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.brew-method-card.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.brew-method-card.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.brew-method-card.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.brew-method-card.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.brew-method-card.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.brew-method-card.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

@media (max-width: 360px){
  .brew-method-grid{ gap:16px; }
  .brew-method-card{ min-height:148px; }
  .brew-method-title{ font-size:1.00rem; }
}

/* =========================
   TOOLS: image personalization pack (v16.11.84)
   Adds hero + tip + per-tool thumbnails without changing layout/logic.
   ========================= */

/* Hero background */
.tools-hero{
  position: relative;
  overflow: hidden;
}
.tools-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/tools/tools_hero.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
  z-index:0;
}
.tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 48%, rgba(0,0,0,0.68) 100%);
  z-index:1;
}
.tools-hero > *{ position:relative; z-index:2; }

/* Tip of the day card background */
.tech-card.tools-day{
  position: relative;
  overflow: hidden;
}
.tech-card.tools-day::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/tools/tools_tip.jpg");
  background-size:cover;
  background-position:center;
  opacity:0.38;
  transform:scale(1.02);
  z-index:0;
}
.tech-card.tools-day::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.60) 100%);
  z-index:1;
}
.tech-card.tools-day > *{ position:relative; z-index:2; }

/* Tool card thumbnails in the icon box */
.tools-card{ position:relative; }
.tools-card-ic{
  position: relative;
  overflow:hidden;
}
.tools-card-ic::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-size:cover;
  background-position:center;
  opacity:0.95;
  z-index:0;
}
.tools-card-ic::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
  z-index:1;
}
/* Keep SVG but make it subtle over the photo */
.tools-card-ic svg{
  position:relative;
  z-index:2;
  opacity:0.65;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

/* Map by tool id */
button.tools-card[data-tool-card="espresso"] .tools-card-ic::before{ background-image:url("../img/tools/tools_espresso.jpg"); }
button.tools-card[data-tool-card="pourover"] .tools-card-ic::before{ background-image:url("../img/tools/tools_pourover.jpg"); }
button.tools-card[data-tool-card="ratio"] .tools-card-ic::before{ background-image:url("../img/tools/tools_brewmat.jpg"); }
button.tools-card[data-tool-card="compass"] .tools-card-ic::before{ background-image:url("../img/tools/tools_compass.png"); }
button.tools-card[data-tool-card="latte"] .tools-card-ic::before{ background-image:url("../img/tools/tools_latte.jpg"); }
button.tools-card[data-tool-card="water"] .tools-card-ic::before{ background-image:url("../img/tools/tools_water.jpg"); }

/* Slightly increase contrast for readability on image-backed hero/cards */
.tools-hero-title, .tools-hero-sub{ text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
/* TOOLS HERO — expanded like Foundations (image background + title over image) */
.tools-shell .tools-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/brew/method-espresso.webp") type("image/webp"),
    url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")
  ) !important;
  background-size:cover !important;
  background-position:center !important;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.tools-shell .tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.75) 100%
  );
  pointer-events:none;
}
.tools-shell .tools-hero > *{ position:relative; z-index:1; }

.tools-shell .tools-hero-title{
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
  font-size:2.05rem;
  opacity: 1;
}
.tools-shell .tools-hero-sub{
  margin-top: 6px;
  color: #ffffff;
  font-size:0.95rem;
  line-height:1.25;
  max-width: 40ch;
  opacity: 1;
}


/* ===== PATCH v16.11.104: TOOLS HERO readability (match Recipes/Foundations) ===== */
.tools-hero-title,
.tools-shell .tools-hero-title{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.78) !important;
}
.tools-hero-sub,
.tools-shell .tools-hero-sub{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.78) !important;
}
/* Slightly deepen overlay only on TOOLS hero to ensure consistent legibility */
.tools-hero::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.62) 65%,
    rgba(0,0,0,.82) 100%
  ) !important;
}

/* ===== PATCH v16.11.105: TOOLS HERO stacking fix (ensure overlay stays behind text) ===== */
.tools-shell .tools-hero{ position:relative; }
.tools-shell .tools-hero::before{ content:none !important; z-index:0 !important; }
.tools-shell .tools-hero::after{ z-index:1 !important; }
.tools-shell .tools-hero > *{ position:relative; z-index:2 !important; }


/* =====================================================================
   UX: Toasts + Empty States (Production polish)
   ===================================================================== */

#toast-host{
  position:fixed;
  left:12px;
  right:12px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  pointer-events:none;
  border:1px solid var(--border-dim);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(20,20,20,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:var(--txt-main);
  font-weight:800;
  letter-spacing:0.2px;
  transform: translateY(10px);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}

.toast.show{
  transform: translateY(0px);
  opacity:1;
}

.toast-info{ border-color:rgba(255,255,255,0.14); }
.toast-success{ border-color: rgba(70, 200, 120, 0.45); }
.toast-warn{ border-color: rgba(240, 200, 90, 0.45); }
.toast-error{ border-color: rgba(240, 90, 90, 0.45); }

.empty-state{
  padding:16px;
  text-align:left;
}

.empty-kicker{
  font-size:0.7rem;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--txt-dim);
  font-weight:900;
}

.empty-title{
  margin-top:6px;
  font-size:1.05rem;
  font-weight:950;
  color:var(--txt-main);
}

.empty-body{
  margin-top:6px;
  color:var(--txt-dim);
  font-size:0.92rem;
  line-height:1.35;
}

.title-truncate{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* === TOOLS Sprint A: diagnostics + auto-run toggle === */
.tool-autotoggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--txt-dim);
  padding:6px 12px 6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
/* Hide native checkbox completely; the visible switch is built from spans */
.tool-autotoggle .tool-autotoggle-input{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  border:0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.tool-autotoggle .tool-autotoggle-switch{
  position:relative;
  display:inline-block;
  width:34px;
  height:20px;
  border-radius:999px;
  background: rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.20);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  flex:0 0 auto;
}
.tool-autotoggle .tool-autotoggle-knob{
  position:absolute;
  top:50%;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  transform: translateY(-50%);
  transition: left 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 0.5px rgba(0,0,0,0.18);
}
.tool-autotoggle .tool-autotoggle-label{
  letter-spacing:.2px;
  font-weight:700;
  transition: color 180ms ease;
}
/* Active state — driven by .is-on toggled in JS */
.tool-autotoggle.is-on{
  background: rgba(214,184,138,0.16);
  border-color: rgba(214,184,138,0.45);
  color: var(--accent, #D6B88A);
}
.tool-autotoggle.is-on .tool-autotoggle-switch{
  background: var(--accent, #D6B88A);
  border-color: rgba(214,184,138,0.65);
  box-shadow: 0 0 10px rgba(214,184,138,0.35), inset 0 0 0 0.5px rgba(255,255,255,0.20);
}
.tool-autotoggle.is-on .tool-autotoggle-knob{
  left: 16px;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.32), 0 0 0 0.5px rgba(0,0,0,0.18);
}
.tool-autotoggle.is-on .tool-autotoggle-label{
  color: var(--accent, #D6B88A);
}
/* Focus ring (keyboard accessibility) */
.tool-autotoggle .tool-autotoggle-input:focus-visible + .tool-autotoggle-switch{
  outline: 2px solid rgba(214,184,138,0.6);
  outline-offset: 2px;
}
/* Press feedback */
.tool-autotoggle:active .tool-autotoggle-switch{
  transform: scale(0.97);
}

.tool-diag{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.tool-diag-title{
  font-weight:800;
  font-size:.95rem;
  margin-bottom:8px;
}
.tool-diag-list{
  margin:0;
  padding-left:18px;
  color:var(--txt-dim);
  line-height:1.35;
  font-size:.9rem;
}



/* === DRINKS Sprint B: Premium detail tabs + My Drinks toolbar === */
.drinks-detail-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 2px 10px 2px;
  margin:0 0 6px 0;
  scrollbar-width:none;
}
.drinks-detail-tabs::-webkit-scrollbar{ display:none; }
.drinks-tab{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--txt-dim);
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.80rem;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
}
.drinks-tab[aria-selected="true"]{
  color: var(--txt-main);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.drinks-detail-panels{ padding-bottom: 80px; }
.drinks-panel{ display:none; }
.drinks-panel.is-active{ display:block; }

.drinks-my-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.drinks-my-left{ min-width:220px; }
.drinks-my-title{ font-weight:900; letter-spacing:0.04em; }
.drinks-my-sub{ margin-top:4px; }
.drinks-my-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.drinks-my-sort{
  min-width:160px;
  padding:10px 12px !important;
  border-radius:12px !important;
}

.drinks-my-search{
  min-width:180px;
  padding:10px 12px !important;
  border-radius:12px !important;
}



/* ======================================================================
   BREW | FLAGSHIP METHOD DETAILS (Hero + Recipe Preview Cards)
   ====================================================================== */

.brew-method-hero{
  width:100%;
  min-height: 280px;
  border-radius: 22px;
  overflow:hidden;
  position:relative;
  background: var(--tile-bg, rgba(255,255,255,0.04));
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 46px rgba(0,0,0,0.36);
  margin: 10px 0 18px 0;
}

.brew-method-hero .brew-method-hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}

.brew-method-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 12% 18%,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.40) 100%);
  pointer-events:none;
}

.brew-method-hero-actions{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  gap:10px;
  z-index:3;
  flex-wrap:wrap;
}

.brew-hero-btn{
  padding: 10px 12px !important;
  font-weight: 900 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,10,10,0.40) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.brew-method-hero-content{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.brew-method-hero-kicker{
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
  font-weight: 800;
}

.brew-method-hero-title{
  font-size: 1.8rem;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--txt-main);
  text-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.brew-method-hero-sub{
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 62ch;
  opacity: 0.98;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brew-method-hero-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 4px;
}

/* shared pills */
.brew-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brew-pill--ghost{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
}

.brew-pill--dim{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.10);
}

/* Map hero backgrounds to existing method assets */
.brew-method-hero.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.brew-method-hero.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.brew-method-hero.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.brew-method-hero.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.brew-method-hero.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.brew-method-hero.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.brew-method-hero.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.brew-method-hero.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

/* Recipe list header */
.brew-recipe-list-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 10px 0;
}

.brew-recipe-list-title{
  font-size: 0.92rem;
  letter-spacing: 2.2px;
  font-weight: 950;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase;
}

.brew-recipe-list{
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding-bottom: 24px;
}

/* Flagship recipe card */
.brew-recipe-card{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.brew-recipe-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

.brew-recipe-card-bg{
  position:absolute; inset:0;
  background: linear-gradient(145deg, rgba(20,20,24,0.92) 0%, rgba(14,14,18,0.97) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events:none;
}

.brew-recipe-card-accent{
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background: linear-gradient(180deg, rgba(214,162,76,1) 0%, rgba(214,162,76,0.15) 100%);
  opacity: 0.95;
  pointer-events:none;
}

.brew-recipe-main{
  position:relative;
  padding: 16px 16px 14px 16px;
  z-index:2;
}

.brew-recipe-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index:3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brew-recipe-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.brew-recipe-title{
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: 0.2px;
  color: var(--txt-main);
  line-height: 1.15;
}

.brew-recipe-arrow{
  font-size: 1.28rem;
  opacity: 0.88;
}

.brew-recipe-author{
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.70);
}

.brew-recipe-concept{
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.52;
  color: rgba(255,255,255,0.76);
}

.brew-recipe-chips{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.brew-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.brew-chip i{ opacity: 0.9; }

.brew-recipe-footer{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brew-recipe-card:active{
  transform: scale(0.985);
  box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}

.brew-recipe-card:focus{
  outline:none;
  box-shadow: 0 0 0 2px rgba(214,162,76,0.40), 0 12px 34px rgba(0,0,0,0.28);
}




/* ============================================================
   BREW | ULTRA FLAGSHIP HERO (parallax + sticky compact)
   ============================================================ */

.brew-method-stickybar{
  position: sticky;
  top: 0px;
    z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(10,10,10,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.40);
  transition: padding 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.brew-method-stickybar.is-compact{
  padding: 8px 10px;
  background: rgba(8,8,8,0.62);
  border-color: rgba(255,255,255,0.14);
}

.brew-sticky-btn{
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 160ms ease, width 220ms ease, height 220ms ease, border-radius 220ms ease, padding 220ms ease;
}

.brew-sticky-btn-label{
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.88;
  white-space: nowrap;
}

.brew-method-stickybar.is-compact .brew-sticky-btn{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
}
.brew-method-stickybar.is-compact .brew-sticky-btn-label{ display:none; }
.brew-sticky-btn:active{ transform: scale(0.96); }

.brew-method-stickybar-center{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.brew-method-stickybar-title{
  font-weight: 950;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 0.88rem;
  line-height: 1.05;
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: font-size 220ms ease, letter-spacing 220ms ease;
}
.brew-method-stickybar-sub{
  font-size: 0.72rem;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.3px;
  transition: opacity 160ms ease, max-height 220ms ease;
}
.brew-method-stickybar.is-compact .brew-method-stickybar-title{
  font-size: 0.82rem;
  letter-spacing: 1.0px;
}
.brew-method-stickybar.is-compact .brew-method-stickybar-sub{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* Hero background layer for parallax */
.brew-method-hero{
  background: transparent; /* bg is handled by .brew-method-hero-bg */
}
.brew-method-hero-bg{
  position: absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0) scale(1.10);
  will-change: transform;
  transition: transform 80ms linear;
}
.brew-method-hero-title{
  transform-origin: left bottom;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* ============================
   FOUNDATIONS (Lab) — Phase B visual polish
   ============================ */

.tech-card.foundations-topic-card{
  text-align:left;
  width:100%;
  padding:14px;
  cursor:pointer;
}

.foundations-topic-card .foundations-topic-title{
  font-weight:900;
  letter-spacing:0.04em;
}

.foundations-topic-card .foundations-topic-summary{
  color:var(--txt-dim);
  font-size:0.92rem;
  margin-top:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width: 420px){
  .foundations-topic-card{
    padding:12px;
  }
  .foundations-topic-card .foundations-topic-summary{
    -webkit-line-clamp:1;
  }
}

/* Reading mode for topic content */
.foundations-reading .fx-text,
.foundations-reading p,
.foundations-reading li{
  line-height:1.55;
  font-size:1.02rem;
}

.foundations-reading h2,
.foundations-reading h3{
  letter-spacing:0.02em;
}

.foundations-reading .fx-callout{
  border-radius:16px;
}


/* Focus ring (Business -> Pantry deep link) */
.focus-ring{ outline:2px solid rgba(255,255,255,0.55); outline-offset:2px; box-shadow:0 0 0 6px rgba(255,255,255,0.08); border-radius:14px; }

/* Business: quick fixes */
.biz-fixes{ margin-top:12px; padding:12px; border:1px solid rgba(255,255,255,0.10); border-radius:16px; background:rgba(255,255,255,0.03); }
.biz-fixes-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.biz-fixes-title{ font-weight:1000; letter-spacing:0.02em; }
.biz-fixes-sub{ color:var(--txt-dim); font-size:0.9rem; margin-top:2px; }
.biz-fix-block{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); }
.biz-fix-block-hd{ font-weight:900; font-size:0.95rem; }
.biz-fix-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.biz-fix-label{ color:var(--txt-dim); font-size:0.92rem; }
.biz-fix-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.biz-fix-chip{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,0.10); border-radius:999px; background:rgba(255,255,255,0.02); }
.biz-fix-chip-name{ font-size:0.9rem; }
.biz-fix-mini{ padding:6px 10px; font-size:0.85rem; border-radius:999px; }
.biz-fix-more{ color:var(--txt-dim); font-size:0.85rem; padding:6px 8px; }

/* CRM premium helpers */
.biz-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.72rem; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; margin-left:6px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); }
.biz-badge.vip{ border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.10); color: rgba(255,215,0,0.95); }
.biz-pill{ display:inline-block; padding:0 8px; border-radius:999px; font-size:0.8rem; font-weight:900; margin-left:6px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.10); }

.biz-dup-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (max-width: 820px){ .biz-dup-grid{ grid-template-columns: 1fr; } }
.biz-dup-card{ padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }

.biz-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.biz-modal .biz-modal-card{ width:min(720px, 100%); max-height: 88vh; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background: rgba(20,20,20,0.75); box-shadow: 0 20px 60px rgba(0,0,0,0.55); padding:16px; display:flex; flex-direction:column; }
.biz-modal .biz-modal-hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.biz-modal .biz-modal-title{ font-weight:1000; letter-spacing:0.03em; font-size:1.05rem; }
.biz-modal .biz-modal-sub{ color:var(--txt-dim); font-size:0.85rem; margin-top:4px; line-height:1.45; }
.biz-modal .biz-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); }
.biz-modal .biz-modal-body{ margin-top:12px; overflow:auto; -webkit-overflow-scrolling: touch; padding-right:4px; }


/* BUSINESS hero responsive layout */
.biz-hero-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.biz-hero-left{ flex:1 1 auto; min-width:0; }
.biz-hero-right{ flex:0 0 auto; min-width:210px; text-align:right; }
.biz-mode-card{ padding:12px; max-width:360px; margin-left:auto; }
.biz-mode-label{ color:var(--txt-dim); font-size:0.82rem; margin-bottom:8px; text-align:left; }
.biz-mode-chips{ justify-content:flex-start; }
.biz-mode-hint{ text-align:left; margin-top:8px; color:var(--txt-dim); font-size:0.85rem; line-height:1.35; }

@media (max-width: 560px){
  .biz-hero-row{ flex-direction:column; align-items:stretch; }
  .biz-hero-right{ min-width:0; text-align:left; }
  .biz-mode-card{ max-width:none; margin-left:0; }
  .biz-hero-left .tech-card{ max-width:none !important; }
}

/* CRM floating actions (always reachable on mobile) */
.crm-fab{
  position: fixed;
  right: 16px;
  bottom: 96px; /* above bottom nav */
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.crm-fab-btn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,20,20,0.65);
  color: var(--txt);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.crm-fab-btn.primary{
  border-color: rgba(220,180,120,0.35);
  background: rgba(60,40,20,0.65);
}


/* ========================================================================== 
   FOUNDATIONS | QUIZ (Prueba)
   ========================================================================== */
.quiz-card { padding: 16px; }
.quiz-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:0.85rem; opacity:0.92; margin:8px 0 14px; }
.quiz-q { padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.03); margin: 10px 0; }
.quiz-q-h { font-weight: 800; letter-spacing: 0.01em; margin-bottom: 10px; line-height:1.25; }
.quiz-opts { display:flex; flex-wrap:wrap; gap:10px; }
.quiz-opt.is-selected { outline: 2px solid rgba(0,0,0,0.18); transform: translateY(-1px); }
.quiz-fb-wrap { margin-top: 10px; }
.quiz-fb { border-radius: 14px; padding: 12px; }
.quiz-fb.ok { background: rgba(0, 0, 0, 0.04); }
.quiz-fb.bad { background: rgba(0, 0, 0, 0.06); }
.quiz-fb-h { font-weight: 900; margin-bottom: 6px; letter-spacing:0.02em; }
.quiz-fb-t { font-size: 0.95rem; line-height: 1.35; opacity: 0.96; margin: 6px 0; }
.quiz-ch { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,0.12); }
.quiz-ch-h { font-weight: 900; margin-bottom: 6px; }
.quiz-ch-t { font-size: 0.95rem; line-height: 1.35; }
.quiz-result { margin-top: 8px; }

/* ======================================================================
   QUIZ UI FIX (Foundations)
   - Adds missing button/link styles used by LabController quiz
   - Prevents broken wrapping/overflow on iOS
   ====================================================================== */

.pill-btn{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--txt-main);
  padding: 12px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pill-btn:active{ transform: scale(0.99); }
.pill-btn:hover{ border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.08); }

.primary-btn{
  -webkit-appearance:none;
  appearance:none;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--txt-main);
  color: #0b0b0b;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
.primary-btn:active{ transform: scale(0.99); }

.link-btn{
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background: transparent;
  color: inherit;
  opacity: 0.92;
  padding: 8px 0;
  font-family: var(--font-ui);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:active{ opacity: 0.75; }

/* Quiz options: stack full width for readability (no broken wrap) */
.quiz-opts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.quiz-opt{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  padding: 12px 14px;
  border-radius: 14px;
}
.quiz-opt.is-selected{
  outline: 2px solid rgba(255,255,255,0.22);
}

/* Make feedback blocks clearer on dark glass */
.quiz-fb.ok{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.quiz-fb.bad{ background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); }

/* Prevent horizontal “rubber band” inside quiz cards on iOS */
.quiz-card, .quiz-q{ max-width: 100%; overflow-x: hidden; }

/* ============================================================
   BUSINESS: Quick Sale product grid + search
   ============================================================ */
.qs-prod-btn:hover, .qs-prod-btn:focus{
  border-color: var(--accent) !important;
  background: rgba(255,255,255,0.04);
}
.biz-search-results{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.biz-search-item:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* ============================================================
   BUSINESS: Thermal ticket print styles (58/80mm)
   ============================================================ */
@media print {
  .biz-ticket-print {
    width: 80mm !important;
    max-width: 80mm !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    color: #000 !important;
    background: #fff !important;
    padding: 4mm !important;
    margin: 0 auto !important;
  }
  .biz-ticket-print * {
    color: #000 !important;
    background: transparent !important;
  }
  .biz-ticket-print .ticket-divider {
    border-top: 1px dashed #000;
    margin: 4px 0;
  }
}

/* ============================================================
   BUSINESS: Tab chip row scrollable on mobile
   ============================================================ */
#biz-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  gap: 6px;
}
#biz-tabs::-webkit-scrollbar { display: none; }
#biz-tabs .chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   BUSINESS: Empty state styling
   ============================================================ */
.biz-empty-state{
  text-align: center;
  padding: 32px 16px;
  color: var(--txt-dim);
}
.biz-empty-state .biz-empty-icon{
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.biz-empty-state .biz-empty-title{
  font-weight: 900;
  font-size: 1rem;
  color: var(--txt);
  margin-bottom: 6px;
}
.biz-empty-state .biz-empty-hint{
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ============================================================
   CRM: Improved mobile layout & alignment
   ============================================================ */
#crm-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}
#crm-tabs::-webkit-scrollbar { display: none; }
#crm-tabs .chip { white-space: nowrap; flex-shrink: 0; }

/* Better table styling for CRM on smaller screens */
.table td, .table th {
  padding: 8px 10px;
  font-size: 0.88rem;
  vertical-align: middle;
}
.table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.table tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Quick Sale modal product grid - better mobile sizing */
.qs-prod-btn:hover,
.qs-prod-btn:focus {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Food tabs responsive fix */
@media (max-width: 420px) {
  .food-tabs {
    gap: 4px;
    padding: 4px;
  }
  .food-tab {
    padding: 7px 8px;
    font-size: 0.72rem;
    letter-spacing: 0;
  }
  .drinks-detail-tabs {
    gap: 5px;
  }
  .drinks-tab {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}

/* CRM Insights grid cards consistent spacing */
.tech-card .data-table + .data-table {
  margin-top: 0;
}

/* Chip row improvements for CRM filters */
.chip-row {
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

/* ============================================================
   CRM / Business: Comprehensive alignment & spacing fixes
   ============================================================ */

/* Consistent card padding across all business sections */
#biz-body .tech-card {
  box-sizing: border-box;
}

/* Fix flex containers that wrap awkwardly */
#biz-body [style*="display:flex"] {
  box-sizing: border-box;
}

/* Better CRM ticket list row alignment */
#biz-body .table tr td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Fix button groups alignment in CRM */
#biz-body .btn-arch {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure chip rows don't wrap unexpectedly — but keep nowrap for sub-tab rows that need scroll */
#biz-body .chip-row {
  display: flex;
  gap: 6px;
}
/* Only allow wrapping on chip rows that are explicitly NOT meant for scrolling (e.g. filter chips).
   Sub-tab chip rows keep nowrap + overflow-x:auto from the base .chip-row rule. */
#biz-body .chip-row.chip-row-wrap {
  flex-wrap: wrap;
}

/* Better data-table grid on mobile */
.data-table {
  gap: 8px !important;
}

/* CRM section headers consistent size */
#biz-body .tech-card > div:first-child > div[style*="font-weight:900"] {
  line-height: 1.3;
}

/* Fix overlapping text in small screens */
@media (max-width: 480px) {
  #biz-body .tech-card {
    padding: 12px !important;
  }
  
  #biz-body .biz-grid {
    gap: 8px;
  }
  
  /* Stack buttons vertically on very small screens */
  #biz-body [style*="display:flex"][style*="gap:10px"] {
    gap: 8px;
  }
  
  .data-cell {
    padding: 8px 10px !important;
  }
  
  /* Make action buttons smaller */
  #biz-body .btn-mini {
    padding: 6px 8px;
    font-size: 0.82rem;
  }
}

/* CRM manual ticket details section */
#crm-manual-ticket summary {
  font-size: 0.95rem;
}

/* CRM ticket history better row spacing */
#biz-body .table tbody tr {
  transition: background 0.15s ease;
}
#biz-body .table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

/* CRM customer filters chip-row fix */
#biz-body .chip {
  font-size: 0.82rem;
  padding: 8px 12px;
}

/* Fix the data-table cells alignment */
.data-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

/* Quick Sale modal improvements */
.modal-card .chip {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.modal-card .chip:hover {
  background: rgba(255,255,255,0.08);
}
.modal-card .chip.active {
  border-color: var(--accent);
}

/* Tighter btn-mini inside tables */
.table .btn-arch.btn-mini {
  padding: 7px 9px;
  gap: 4px;
}

/* ============================================================
   BUSINESS PREMIUM: Enhanced styling for plan premium feel
   ============================================================ */

/* KPI cards subtle gradient accent */
#biz-body .tech-card > div > div[style*="font-weight:1000"][style*="font-size:1.25"] {
  background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.95));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Progress bars smooth animation */
#biz-body div[style*="background: var(--accent)"][style*="border-radius:999px"] {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quick Sale product grid: better tap targets on mobile */
@media (max-width: 480px) {
  .qs-prod-btn {
    padding: 12px 10px !important;
    min-height: 56px;
  }
}

/* Better Quick Sale cart spacing */
#qs-cart > div {
  transition: background 0.15s ease;
}
#qs-cart > div:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Stepper (Ruta recomendada) better visual flow */
.biz-stepper {
  position: relative;
}
.biz-step + .biz-step::before {
  content: '';
  position: absolute;
  left: 15px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.10);
  transform: translateY(-12px);
}

/* Dashboard alert cards hover */
#biz-body .tech-card[style*="border-radius:12px"]:hover {
  border-color: rgba(255,255,255,0.18);
  transition: border-color 0.2s ease;
}

/* Exports section buttons consistent sizing */
#biz-body [id*="export"] {
  font-size: 0.85rem;
}

/* Better ops tab overflow */
#ops-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}
#ops-tabs::-webkit-scrollbar { display: none; }
#ops-tabs .chip { white-space: nowrap; flex-shrink: 0; }


/* ========================================================================
   PRE-BREW SCREEN — step-by-step preparation before the timer
   ======================================================================== */

.prebrew-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 4px 24px 4px;
}

.prebrew-topbar {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 6px 6px 16px;
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Top bar buttons must NOT inherit the global .btn-arch width:100% */
.prebrew-topbar .btn-arch{
    width: auto;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    letter-spacing: 1px;
}

.prebrew-topbar .prebrew-skip{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}
.prebrew-topbar .prebrew-skip:hover{
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.09);
}

.prebrew-topbar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 0 6px;
}

.prebrew-topbar-kicker{
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: rgba(255,255,255,0.62);
}
.prebrew-topbar-recipe{
    margin-top: 2px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.6px;
    font-size: 0.88rem;
    font-weight: 900;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prebrew-topbar > button,
.prebrew-topbar .prebrew-skip{
    flex-shrink: 0;
}

/* HERO (pro) */
.prebrew-hero{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    padding: 16px 14px;
    margin: 4px 6px 14px;
}
.prebrew-hero-bg{
    position:absolute;
    inset:0;
    background-image: var(--tile-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    opacity: 0.28;
    transform: scale(1.06);
}
.prebrew-hero-scrim{
    position:absolute;
    inset:0;
    background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.68) 60%, rgba(0,0,0,0.75) 100%);
}
.prebrew-hero-content{
    position: relative;
    z-index: 1;
}
.prebrew-hero-kicker{
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.prebrew-hero-title{
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.95);
}
.prebrew-hero-sub{
    margin-top: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
}
.prebrew-hero-meta{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Reuse existing method hero assets */
.prebrew-hero.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.prebrew-hero.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.prebrew-hero.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.prebrew-hero.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.prebrew-hero.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.prebrew-hero.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.prebrew-hero.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.prebrew-hero.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

/* Progress Dots */
.prebrew-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.prebrew-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(255,255,255,0.08);
}

.prebrew-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(214,162,76,0.45);
    transform: scale(1.3);
}

.prebrew-dot.done {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.5;
}

/* Step Counter */
.prebrew-counter {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt-dim);
    margin-bottom: 20px;
}

/* Step Card */
.prebrew-step-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 36px 24px 32px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.prebrew-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
    opacity: 0.6;
}

.prebrew-step-icon {
    font-size: 2.8rem;
    color: var(--accent);
    margin-bottom: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
    filter: drop-shadow(0 2px 8px rgba(214,162,76,0.3));
}

.prebrew-step-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt-main);
    margin-bottom: 12px;
    line-height: 1.3;
}

.prebrew-step-detail {
    font-size: 0.95rem;
    color: var(--txt-dim);
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto;
}

/* Checklist of completed steps */
.prebrew-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0 8px;
}

.prebrew-checklist-item {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: var(--txt-dim);
    opacity: 0.7;
    line-height: 1.3;
}

.prebrew-checklist-item span {
    text-decoration: line-through;
    text-decoration-color: rgba(214,162,76,0.4);
}

/* Controls */
.prebrew-controls {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
}

.prebrew-btn-prev,
.prebrew-btn-next {
    flex: 1;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prebrew-btn-start {
    width: 100%;
    padding: 22px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    animation: prebrew-pulse 2s ease-in-out infinite;
}

@keyframes prebrew-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214,162,76,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(214,162,76,0); }
}

.prebrew-skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    opacity: 1;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
    font-family: inherit;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.prebrew-skip:hover,
.prebrew-skip:active {
    border-color: rgba(214,162,76,0.55);
    background: rgba(214,162,76,0.08);
    transform: translateY(-1px);
}

.prebrew-skip i{ opacity: 0.95; }
.prebrew-skip span{ font-size: 0.78rem; font-weight: 800; }

.prebrew-skip--bottom{
    width: 100%;
    margin-top: 10px;
    padding: 14px 12px;
}

.prebrew-skip--top{
    height: 40px;
    padding: 0 12px;
}
.prebrew-skip--top span{ font-size: 0.72rem; }

/* ==========================================================================
   PANTRY v2 — Visual Upgrade + Inventory Stock
   ========================================================================== */

/* ── Hero ── */
.pantry-hero {
  padding: 24px 20px 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(214,162,76,.12) 0%, transparent 70%);
  border-radius: 0 0 18px 18px;
}
.pantry-hero-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-top: 8px;
}
.pantry-hero-sub {
  margin-top: 4px;
  font-size: .88rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.34);
}

/* ── Dashboard Stats ── */
.pantry-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pantry-dash-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.pantry-dash-n {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-data);
}
.pantry-dash-l {
  font-size: .7rem;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}
.pantry-dash-warn { color: var(--danger); }

/* ── Alert rows ── */
.pantry-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.1);
  margin-bottom: 4px;
  transition: background .15s;
}
.pantry-alert-row:hover { background: rgba(0,0,0,.2); }
.pantry-alert-row:last-child { margin-bottom: 0; }

/* ── Stock inline section (inside item details) ── */
.pantry-stock-inline {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

/* ── Stock bar pulse ── */
@keyframes pantry-bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.pantry-bar-pulse { animation: pantry-bar-pulse 1.8s ease-in-out infinite; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .pantry-dash-grid { grid-template-columns: 1fr 1fr; }
  .pantry-stock-inline .pantry-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   UX Modal System v2.0 — Professional confirm/alert dialogs
   ========================================================================== */
.ux-modal-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.0);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity .22s ease, backdrop-filter .22s ease, background .22s ease;
}
.ux-modal-overlay.ux-modal-in {
  opacity: 1;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px);
}
.ux-modal-overlay.ux-modal-out {
  opacity: 0;
  background: rgba(0,0,0,0.0);
  backdrop-filter: blur(0px);
}
.ux-modal-card {
  width: min(480px, 94vw);
  background: rgba(20,20,20,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  color: var(--txt-main, #fff);
  transform: scale(0.96) translateY(8px);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.ux-modal-in .ux-modal-card {
  transform: scale(1) translateY(0);
}
.ux-modal-out .ux-modal-card {
  transform: scale(0.96) translateY(8px);
}
.ux-modal-title {
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.ux-modal-body {
  color: var(--txt-dim, #aaa);
  font-size: 0.94rem;
  line-height: 1.5;
  white-space: pre-line;
}
.ux-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px; flex-wrap: wrap;
}
.ux-modal-actions .btn-arch {
  min-width: auto; padding: 11px 18px;
  font-weight: 800; font-size: 0.88rem;
}
.ux-modal-actions .btn-arch.danger {
  color: var(--danger, #CF6679);
  border-color: rgba(207,102,121,0.3);
}
.ux-modal-actions .btn-arch.primary {
  background: var(--accent, #C27C2E);
  color: #fff; border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ux-modal-overlay, .ux-modal-card {
    transition-duration: 0.01ms !important;
  }
}

/* Post-sale notification slide up */
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Pulse for loyalty badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}


.brew-flow-panel.brew-flow--v60 .brew-flow-action {
    font-size: 11px;
    letter-spacing: 1.05px;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-pattern-label {
    font-size: 8.3px;
    letter-spacing: 0.62px;
    fill: rgba(214,184,138,0.88);
}

.brew-flow-panel.brew-flow--v60 .brew-pour-guide {
    opacity: 0.22;
}

.brew-flow-panel.brew-flow--v60.is-pouring .brew-pour-guide {
    opacity: 0.92;
}



.brew-flow-panel.brew-flow--chemex .brew-target-line {
    stroke-width: 1.95;
}

.brew-flow-panel.brew-flow--chemex .brew-target-ribs,
.brew-flow-panel.brew-flow--chemex .brew-target-accent {
    stroke-width: 1.22;
    opacity: 0.88;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-stream {
    stroke-width: 4.35;
    stroke-dasharray: 4 7;
    filter: drop-shadow(0 0 7px rgba(200,169,126,0.22));
}

.brew-flow-panel.brew-flow--chemex .brew-flow-target.footer {
    font-size: 0.84rem;
    letter-spacing: 0.18px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-markers-row {
    gap: 6px;
    flex-shrink: 0;
}


.brew-flow-panel.brew-flow--kalita .brew-flow-action {
    font-size: 11px;
    letter-spacing: 1.08px;
}

.brew-flow-panel.brew-flow--kalita .brew-flow-pattern-label {
    font-size: 8.4px;
    letter-spacing: 0.64px;
    fill: rgba(214,184,138,0.88);
}

.brew-flow-panel.brew-flow--kalita .brew-target-line {
    stroke-width: 1.85;
}

.brew-flow-panel.brew-flow--kalita .brew-target-ribs,
.brew-flow-panel.brew-flow--kalita .brew-target-accent {
    stroke-width: 1.15;
    opacity: 0.90;
}

.brew-flow-panel.brew-flow--kalita .brew-flow-stream {
    stroke-width: 4.4;
    stroke-dasharray: 4 7;
    filter: drop-shadow(0 0 7px rgba(200,169,126,0.22));
}

.brew-flow-panel.brew-flow--kalita .brew-pour-guide {
    opacity: 0.22;
}

.brew-flow-panel.brew-flow--kalita.is-pouring .brew-pour-guide {
    opacity: 0.94;
}

.brew-flow-panel.brew-flow--kalita .brew-flow-target.footer {
    font-size: 0.84rem;
    letter-spacing: 0.18px;
}

.brew-flow-panel.brew-flow--kalita .brew-flow-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.brew-flow-panel.brew-flow--kalita .brew-flow-markers-row {
    gap: 6px;
    flex-shrink: 0;
}


.brew-flow-panel.brew-flow--chemex .brew-flow-markers-row .brew-flow-marker {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}

.brew-flow-panel.brew-flow--chemex.is-pouring .brew-pour-guide {
    opacity: 0.92;
}

.brew-flow-panel.brew-flow--chemex.is-swirling .brew-target-scene {
    transform-origin: 259px 112px;
    animation: brewSwirlV60 0.88s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--chemex.is-swirling .brew-pour-guide {
    transform-origin: 259px 72px;
    animation: brewGuideSwirlV60 0.9s linear infinite;
    opacity: 1;
}

.brew-flow-panel.brew-flow--chemex.is-swirling .brew-flow-stream {
    opacity: 0 !important;
}

.brew-flow-panel.brew-flow--v60 .brew-target-line {
    stroke-width: 2.05;
}

.brew-flow-panel.brew-flow--v60 .brew-target-ribs {
    stroke-width: 1.28;
    opacity: 0.86;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-stream {
    stroke-width: 4.2;
    stroke-dasharray: 3 6;
    filter: drop-shadow(0 0 7px rgba(200,169,126,0.24));
}

.brew-flow-panel.brew-flow--v60 .brew-flow-liquid {
    opacity: 0.94;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-target.footer {
    font-size: 0.84rem;
    letter-spacing: 0.22px;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-markers-row {
    gap: 6px;
    flex-shrink: 0;
}

.brew-flow-panel.brew-flow--v60 .brew-flow-markers-row .brew-flow-marker {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}

.brew-flow-panel.brew-flow--v60 .brew-source--v60kettle {
    transform-origin: 82px 82px;
}

.brew-flow-panel.brew-flow--v60.is-swirling .brew-target-scene {
    transform-origin: 246px 108px;
    animation: brewSwirlV60 0.78s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--v60.is-swirling .brew-pour-guide {
    transform-origin: 246px 80px;
    animation: brewGuideSwirlV60 0.82s linear infinite;
    opacity: 1;
}

.brew-flow-panel.brew-flow--v60.is-swirling .brew-flow-stream {
    opacity: 0 !important;
}


/* Chemex premium visual pass v18 */
.brew-source--chemexkettle {
    transform-origin: 88px 78px;
}

.brew-flow-panel.is-pouring .brew-source--chemexkettle {
    animation: brewKettleTilt 1.18s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-action {
    font-size: 10.7px;
    letter-spacing: 1.02px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-pattern-label {
    font-size: 8.4px;
    letter-spacing: 0.62px;
    fill: rgba(214,184,138,0.90);
}

.brew-flow-panel.brew-flow--chemex .brew-flow-stream {
    stroke-width: 4.0;
    stroke-dasharray: 5 7;
    filter: drop-shadow(0 0 7px rgba(200,169,126,0.24));
}

.brew-flow-panel.brew-flow--chemex .brew-glass-fill {
    opacity: 0.95;
}

.brew-flow-panel.brew-flow--chemex .brew-target-line {
    stroke-width: 1.85;
}

.brew-flow-panel.brew-flow--chemex .brew-target-ribs,
.brew-flow-panel.brew-flow--chemex .brew-target-accent {
    stroke-width: 1.10;
    opacity: 0.82;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-target.footer {
    font-size: 0.80rem;
    letter-spacing: 0.12px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-footer {
    margin-top: -2px;
    gap: 10px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-markers-row {
    gap: 5px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-markers-row .brew-flow-marker {
    width: 23px;
    height: 23px;
    font-size: 0.70rem;
}

.brew-flow-panel.brew-flow--chemex.is-swirling .brew-target-scene {
    transform-origin: 259px 122px;
    animation: brewSwirlV60 0.88s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--chemex.is-swirling .brew-pour-guide {
    transform-origin: 259px 76px;
    animation: brewGuideSwirlV60 0.9s linear infinite;
    opacity: 1;
}


/* v20 brew timer polish: keep kettle scale stable + prevent text collisions */
.brew-source--v60kettle,
.brew-source--chemexkettle,
.brew-source--kalitakettle {
    transform-box: fill-box;
}

.brew-source--v60kettle .brew-source-anim,
.brew-source--chemexkettle .brew-source-anim,
.brew-source--kalitakettle .brew-source-anim {
    transform-box: fill-box;
    will-change: transform;
}

.brew-source--v60kettle .brew-source-anim {
    transform-origin: 72px 42px;
}

.brew-source--chemexkettle .brew-source-anim {
    transform-origin: 84px 80px;
}

.brew-source--kalitakettle .brew-source-anim {
    transform-origin: 88px 80px;
}

.brew-flow-panel.is-pouring .brew-source--v60kettle {
    animation: none;
}

.brew-flow-panel.is-pouring .brew-source--chemexkettle,
.brew-flow-panel.is-pouring .brew-source--kalitakettle {
    animation: none;
}

.brew-flow-panel.is-pouring .brew-source--v60kettle .brew-source-anim {
    animation: brewKettleTiltV60Fixed 1.15s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--chemexkettle .brew-source-anim {
    animation: brewKettleTiltChemexFixed 1.18s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--kalitakettle .brew-source-anim {
    animation: brewKettleTiltKalitaFixed 1.18s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-action,
.brew-flow-panel.brew-flow--kalita .brew-flow-action {
    font-size: 10px;
    letter-spacing: 0.86px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-pattern-label,
.brew-flow-panel.brew-flow--kalita .brew-flow-pattern-label {
    font-size: 7.2px;
    letter-spacing: 0.44px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-footer,
.brew-flow-panel.brew-flow--kalita .brew-flow-footer {
    width: 100%;
    padding: 0 8px;
}

.brew-flow-panel.brew-flow--chemex .brew-flow-target.footer,
.brew-flow-panel.brew-flow--kalita .brew-flow-target.footer {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brew-flow-panel.brew-flow--kalita.is-swirling .brew-target-scene {
    transform-origin: 259px 108px;
    animation: brewSwirlV60 0.86s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--kalita.is-swirling .brew-pour-guide {
    transform-origin: 259px 76px;
    animation: brewGuideSwirlV60 0.88s linear infinite;
    opacity: 1;
}

.brew-flow-panel.brew-flow--kalita.is-swirling .brew-flow-stream,
.brew-flow-panel.brew-flow--chemex.is-swirling .brew-flow-stream {
    opacity: 0 !important;
}

@keyframes brewKettleTiltV60Fixed {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    35% { transform: rotate(1deg) translateY(-1px); }
    65% { transform: rotate(-6deg) translateY(1px); }
}

@keyframes brewKettleTiltChemexFixed {
    0%, 100% { transform: rotate(-2.6deg) translateY(0); }
    35% { transform: rotate(1deg) translateY(-1px); }
    65% { transform: rotate(-5.4deg) translateY(1px); }
}

@keyframes brewKettleTiltKalitaFixed {
    0%, 100% { transform: rotate(-2.6deg) translateY(0); }
    35% { transform: rotate(0.8deg) translateY(-1px); }
    65% { transform: rotate(-5deg) translateY(1px); }
}


/* v21 French Press premium visual pass */
.brew-source--fpkettle,
.brew-source--fpkettle .brew-source-anim {
    transform-box: fill-box;
}

.brew-source--fpkettle .brew-source-anim {
    transform-origin: 90px 82px;
    will-change: transform;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-svg {
    margin-bottom: 2px;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-action {
    font-size: 8.7px;
    letter-spacing: 0.58px;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-pattern-label {
    font-size: 6.4px;
    letter-spacing: 0.28px;
    fill: rgba(214,184,138,0.88);
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-stream {
    stroke-width: 4.05;
    stroke-dasharray: 5 8;
    filter: drop-shadow(0 0 7px rgba(200,169,126,0.22));
}

.brew-flow-panel.brew-flow--frenchpress .brew-target-line {
    stroke-width: 1.9;
}

.brew-flow-panel.brew-flow--frenchpress .brew-target-ribs,
.brew-flow-panel.brew-flow--frenchpress .brew-target-accent {
    stroke-width: 1.16;
    opacity: 0.86;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-footer {
    width: 100%;
    padding: 1px 8px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: -1px;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-target.footer {
    width: 100%;
    max-width: 232px;
    font-size: 0.75rem;
    line-height: 1.14;
    letter-spacing: 0.08px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    min-height: 1.9em;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-markers-row {
    gap: 6px;
    flex-shrink: 0;
}

.brew-flow-panel.brew-flow--frenchpress .brew-flow-markers-row .brew-flow-marker {
    width: 23px;
    height: 23px;
    font-size: 0.70rem;
}

.brew-flow-panel.is-pouring .brew-source--fpkettle {
    animation: none;
}

.brew-flow-panel.is-pouring .brew-source--fpkettle .brew-source-anim {
    animation: brewKettleTiltFrenchPress 1.16s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress #brew-fp-crust,
.brew-flow-panel.brew-flow--frenchpress #brew-fp-foam,
.brew-flow-panel.brew-flow--frenchpress #brew-fp-plunger,
.brew-flow-panel.brew-flow--frenchpress #brew-fp-spoon {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

.brew-flow-panel.brew-flow--frenchpress.is-waiting #brew-fp-crust {
    animation: brewFrenchCrustBreathe 2.6s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring .brew-pour-guide {
    opacity: 0.18;
}

.brew-flow-panel.brew-flow--frenchpress #brew-fp-spoon {
    transform-origin: 244px 73px;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring .brew-flow-stream,
.brew-flow-panel.brew-flow--frenchpress.is-pressing .brew-flow-stream {
    opacity: 0 !important;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring .brew-target-scene {
    transform-origin: 257px 104px;
    animation: brewFrenchBodyRock 0.92s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring #brew-fp-crust {
    animation: brewFrenchCrustBreak 0.92s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring #brew-fp-foam {
    animation: brewFrenchFoamSkim 0.92s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-stirring #brew-fp-spoon {
    animation: brewFrenchSpoonSweep 1.05s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-pressing #brew-fp-plunger {
    animation: brewFrenchPressDown 1.45s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-pressing .brew-target-scene {
    transform-origin: 257px 104px;
    animation: brewFrenchBodySettle 1.45s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--frenchpress.is-pressing .brew-pour-guide {
    opacity: 0.24;
}


@keyframes brewKettleTiltFrenchPress {
    0%, 100% { transform: rotate(-2.4deg) translateY(0); }
    35% { transform: rotate(0.8deg) translateY(-1px); }
    65% { transform: rotate(-5.1deg) translateY(1px); }
}

@keyframes brewFrenchCrustBreathe {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.96; }
    50% { transform: scale(1.018) translateY(-0.4px); opacity: 1; }
}

@keyframes brewFrenchCrustBreak {
    0%, 100% { transform: translate(0,0) scale(1); opacity: 0.98; }
    20% { transform: translate(-1.2px,-0.4px) scale(0.985); }
    50% { transform: translate(1.4px,0.6px) scale(1.02); }
    75% { transform: translate(-0.8px,0.2px) scale(0.992); }
}

@keyframes brewFrenchFoamSkim {
    0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.78; }
    40% { transform: translateX(1.2px) translateY(-0.8px) scaleX(0.94); opacity: 0.52; }
    70% { transform: translateX(-1px) translateY(0.4px) scaleX(0.90); opacity: 0.42; }
}

@keyframes brewFrenchBodyRock {
    0%, 100% { transform: rotate(0deg); }
    35% { transform: rotate(-0.6deg); }
    65% { transform: rotate(0.7deg); }
}

@keyframes brewFrenchSpoonSweep {
    0%, 100% { transform: translate(-9px,-1px) rotate(-22deg); opacity: 0.92; }
    35% { transform: translate(2px,2px) rotate(4deg); opacity: 1; }
    65% { transform: translate(10px,-1px) rotate(17deg); opacity: 0.96; }
}

@keyframes brewFrenchPressDown {
    0% { transform: translateY(-5px); }
    30% { transform: translateY(6px); }
    70% { transform: translateY(22px); }
    100% { transform: translateY(16px); }
}

@keyframes brewFrenchBodySettle {
    0%, 100% { transform: translateY(0); }
    55% { transform: translateY(0.8px); }
}


.brew-source--grouphead,
.brew-source--grouphead .brew-source-anim {
    transform-box: fill-box;
}

.brew-source--grouphead .brew-source-anim {
    transform-origin: 168px 66px;
    will-change: transform;
}

.brew-flow-panel.is-pouring .brew-source--grouphead {
    animation: none;
}

.brew-flow-panel.is-pouring .brew-source--grouphead .brew-source-anim {
    animation: brewEspressoGroupPulse 0.78s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-svg {
    margin-bottom: 1px;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-action {
    font-size: 8.7px;
    letter-spacing: 0.6px;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-pattern-label {
    font-size: 6.4px;
    letter-spacing: 0.30px;
    fill: rgba(214,184,138,0.88);
}

.brew-flow-panel.brew-flow--espresso .brew-flow-stream {
    stroke-width: 4.35;
    stroke-dasharray: 2 0;
    animation: brewEspressoTail 0.34s linear infinite;
    filter: drop-shadow(0 0 9px rgba(170,96,40,0.24));
}

.brew-flow-panel.brew-flow--espresso .brew-target-line {
    stroke-width: 1.95;
}

.brew-flow-panel.brew-flow--espresso .brew-target-accent {
    stroke-width: 1.2;
    opacity: 0.92;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-footer {
    width: 100%;
    padding: 1px 8px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: -1px;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-target.footer {
    width: 100%;
    max-width: 228px;
    font-size: 0.75rem;
    line-height: 1.14;
    letter-spacing: 0.08px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    min-height: 1.9em;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-markers-row {
    gap: 6px;
    flex-shrink: 0;
}

.brew-flow-panel.brew-flow--espresso .brew-flow-markers-row .brew-flow-marker {
    width: 23px;
    height: 23px;
    font-size: 0.70rem;
}

.brew-flow-panel.brew-flow--espresso #brew-espresso-leg-left,
.brew-flow-panel.brew-flow--espresso #brew-espresso-leg-right,
.brew-flow-panel.brew-flow--espresso #brew-espresso-blonding,
.brew-flow-panel.brew-flow--espresso #brew-espresso-crema,
.brew-flow-panel.brew-flow--espresso #brew-espresso-crema-sheen,
.brew-flow-panel.brew-flow--espresso #brew-espresso-tiger {
    transform-box: fill-box;
    will-change: transform, opacity, d;
}

.brew-flow-panel.brew-flow--espresso #brew-espresso-leg-left,
.brew-flow-panel.brew-flow--espresso #brew-espresso-leg-right {
    filter: drop-shadow(0 0 7px rgba(141,82,34,0.20));
    transition: opacity 180ms ease, stroke-width 180ms ease;
}

.brew-flow-panel.brew-flow--espresso #brew-espresso-crema,
.brew-flow-panel.brew-flow--espresso #brew-espresso-crema-sheen,
.brew-flow-panel.brew-flow--espresso #brew-espresso-tiger {
    transition: opacity 180ms ease, transform 180ms ease;
}

.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-crema-group {
    animation: brewEspressoCremaSettle 1.7s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--espresso.is-pouring .brew-pour-guide {
    opacity: 0.82;
}

.brew-flow-panel.brew-flow--espresso.is-waiting .brew-pour-guide,
.brew-flow-panel.brew-flow--espresso.is-finished .brew-pour-guide {
    opacity: 0.18;
}

@keyframes brewEspressoGroupPulse {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-0.9px); }
    60% { transform: translateY(0.6px); }
}

@keyframes brewEspressoTail {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -18; }
}

@keyframes brewEspressoCremaSettle {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-0.6px); }
    70% { transform: translateY(0.25px); }
}


.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-left,
.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-right,
.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-main,
.brew-flow-panel.brew-flow--espresso #brew-espresso-tiger-2 {
    will-change: transform, opacity;
}

.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-left,
.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-right,
.brew-flow-panel.brew-flow--espresso #brew-espresso-bead-main {
    filter: drop-shadow(0 0 4px rgba(255,220,170,0.34));
    transition: opacity 180ms ease;
}

.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-bead-left,
.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-bead-right,
.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-bead-main {
    animation: brewEspressoBeadPulse 0.42s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-crema-group {
    animation: brewEspressoCremaSettle 1.4s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-tiger,
.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-tiger-2 {
    animation: brewEspressoTigerFlicker 0.95s linear infinite;
    transform-origin: center;
}

.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-crema,
.brew-flow-panel.brew-flow--espresso.is-pouring #brew-espresso-crema-sheen {
    animation: brewEspressoCremaBreath 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes brewEspressoCremaSettle {
    0%, 100% { transform: translateY(0px) scaleX(1); }
    35% { transform: translateY(0.3px) scaleX(1.012); }
    70% { transform: translateY(-0.25px) scaleX(0.995); }
}

@keyframes brewEspressoCremaBreath {
    0%, 100% { transform: scaleX(1) translateY(0); }
    50% { transform: scaleX(1.018) translateY(-0.2px); }
}

@keyframes brewEspressoTigerFlicker {
    0%, 100% { opacity: .5; transform: translateY(0); }
    40% { opacity: .72; transform: translateY(0.2px); }
    70% { opacity: .42; transform: translateY(-0.18px); }
}

@keyframes brewEspressoBeadPulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255,220,170,0.28)); }
    50% { filter: drop-shadow(0 0 6px rgba(255,220,170,0.52)); }
}

/* --- MOKA POT premium visual --- */
.brew-flow-panel.brew-flow--moka .brew-flow-svg {
    min-height: 214px;
}

.brew-flow-panel.brew-flow--moka .brew-flow-action {
    font-size: 0.98rem;
    letter-spacing: 0.16em;
}

.brew-flow-panel.brew-flow--moka .brew-flow-pattern-label {
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    opacity: 0.68;
}

.brew-flow-panel.brew-flow--moka .brew-flow-footer {
    gap: 10px;
    padding-top: 8px;
}

.brew-flow-panel.brew-flow--moka .brew-flow-target.footer {
    font-size: 0.94rem;
}

.brew-flow-panel.brew-flow--moka .brew-flow-markers-row {
    gap: 10px;
}

.brew-flow-panel.brew-flow--moka .brew-flow-markers-row .brew-flow-marker {
    width: 42px;
    height: 42px;
}

.brew-flow-panel.brew-flow--moka .brew-pour-guide {
    opacity: 0 !important;
}

.brew-flow-panel.brew-flow--moka .brew-flow-stream {
    stroke-width: 4.1;
    stroke-dasharray: 2 3.2;
    filter: drop-shadow(0 0 8px rgba(176, 97, 39, 0.30));
}

.brew-flow-panel.brew-flow--moka .brew-target-line {
    stroke: rgba(255,255,255,0.74);
}

.brew-flow-panel.brew-flow--moka .brew-target-ribs,
.brew-flow-panel.brew-flow--moka .brew-target-accent {
    stroke: rgba(236,198,145,0.60);
}

.brew-source--mokapot {
    transform-origin: 170px 93px;
}

.brew-flow-panel.brew-flow--moka #brew-moka-flame,
.brew-flow-panel.brew-flow--moka #brew-moka-steam,
.brew-flow-panel.brew-flow--moka #brew-moka-sputter,
.brew-flow-panel.brew-flow--moka #brew-moka-crema,
.brew-flow-panel.brew-flow--moka #brew-moka-crema-sheen,
.brew-flow-panel.brew-flow--moka #brew-moka-cool-ring,
.brew-flow-panel.brew-flow--moka #brew-moka-lid,
.brew-flow-panel.brew-flow--moka #brew-moka-lid-knob,
.brew-flow-panel.brew-flow--moka #brew-moka-top-pool,
.brew-flow-panel.brew-flow--moka #brew-moka-column {
    transition: opacity 180ms ease, transform 180ms ease, stroke-width 180ms ease;
}

.brew-flow-panel.brew-flow--moka.is-waiting .brew-source--mokapot .brew-source-anim {
    animation: brewMokaBodyWarm 1.7s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--moka.is-pouring .brew-source--mokapot .brew-source-anim {
    animation: brewMokaBodyWarm 0.98s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--moka.is-waiting #brew-moka-flame-left,
.brew-flow-panel.brew-flow--moka.is-waiting #brew-moka-flame-right,
.brew-flow-panel.brew-flow--moka.is-waiting #brew-moka-flame-core,
.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-flame-left,
.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-flame-right,
.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-flame-core {
    animation: brewMokaFlameFlicker 0.88s ease-in-out infinite;
    transform-origin: center;
}

.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-flame-right {
    animation-delay: 0.12s;
}

.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-flame-core {
    animation-delay: 0.06s;
}

.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-sputter {
    animation: brewMokaSputter 0.40s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-crema,
.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-crema-sheen,
.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-top-pool {
    animation: brewMokaCremaPulse 0.80s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--moka.is-pouring #brew-moka-lid {
    animation: brewMokaLidChatter 0.86s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--moka.is-cooling #brew-moka-cool-ring {
    animation: brewMokaCoolPulse 0.9s ease-in-out infinite;
}



.brew-flow-panel.brew-flow--aeropress .brew-flow-stream {
    stroke-width: 3.8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(171, 109, 51, 0.24));
}

.brew-flow-panel.brew-flow--aeropress .brew-target-line {
    stroke: rgba(255,255,255,0.76);
}

.brew-flow-panel.brew-flow--aeropress .brew-target-ribs,
.brew-flow-panel.brew-flow--aeropress .brew-target-accent {
    stroke: rgba(234,196,146,0.62);
}


.brew-flow-panel.brew-flow--aeropress #brew-ap-device text {
    paint-order: stroke;
    stroke: rgba(8,10,15,0.28);
    stroke-width: 0.8px;
}

.brew-flow-panel.brew-flow--aeropress #brew-ap-drips {
    filter: drop-shadow(0 0 7px rgba(160,94,38,0.18));
}

.brew-flow-panel.brew-flow--aeropress #brew-ap-cup-surface {
    filter: drop-shadow(0 0 6px rgba(164,96,41,0.14));
}

.brew-source--apkettle {
    transform-origin: 96px 84px;
}

.brew-flow-panel.brew-flow--aeropress #brew-ap-plunger {
    transform-origin: 269px 62px;
}

.brew-flow-panel.brew-flow--aeropress #brew-ap-stirrer {
    transform-origin: 268px 72px;
}

.brew-source--apkettle,
.brew-source--apkettle .brew-source-anim,
.brew-flow-panel.brew-flow--aeropress #brew-ap-device,
.brew-flow-panel.brew-flow--aeropress #brew-ap-plunger,
.brew-flow-panel.brew-flow--aeropress #brew-ap-piston,
.brew-flow-panel.brew-flow--aeropress #brew-ap-foam,
.brew-flow-panel.brew-flow--aeropress #brew-ap-stirrer,
.brew-flow-panel.brew-flow--aeropress #brew-ap-drips,
.brew-flow-panel.brew-flow--aeropress #brew-ap-cup-fill,
.brew-flow-panel.brew-flow--aeropress #brew-ap-cup-surface {
    transition: opacity 180ms ease, transform 180ms ease, stroke-width 180ms ease, d 180ms ease, filter 180ms ease;
}

.brew-flow-panel.is-pouring .brew-source--apkettle {
    animation: brewKettleTiltAeroPress 1.18s ease-in-out infinite;
}

.brew-flow-panel.is-pouring .brew-source--apkettle .brew-source-anim {
    animation: brewAeroKettleBody 1.18s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--aeropress.is-waiting .brew-target-scene {
    animation: brewAeroBodySettle 2.0s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--aeropress.is-stirring #brew-ap-foam {
    animation: brewAeroFoamSwirl 0.92s ease-in-out infinite;
}

.brew-flow-panel.brew-flow--aeropress.is-pressing #brew-ap-cup-surface {
    animation: brewAeroCupPulse 0.76s ease-in-out infinite;
}

@keyframes brewKettleTiltAeroPress {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    35% { transform: rotate(-3.6deg) translateY(-1px); }
    70% { transform: rotate(-5.4deg) translateY(-1.4px); }
}

@keyframes brewAeroKettleBody {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.8px, -1px); }
}

@keyframes brewAeroFoamSwirl {
    0%, 100% { transform: translateX(0) scaleX(1); }
    50% { transform: translateX(2px) scaleX(0.98); }
}

@keyframes brewAeroCupPulse {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.02); }
}

@keyframes brewAeroBodySettle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(0.6px); }
}

@keyframes brewMokaFlameFlicker {
    0%, 100% { transform: translateY(0) scale(0.98, 0.98); opacity: 0.82; }
    50% { transform: translateY(-1.3px) scale(1.06, 1.10); opacity: 1; }
}

@keyframes brewMokaBodyWarm {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-0.6px) scale(1.004); }
}

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

@keyframes brewMokaCremaPulse {
    0%, 100% { transform: scaleX(1) translateY(0); }
    50% { transform: scaleX(1.022) translateY(-0.55px); }
}

@keyframes brewMokaCoolPulse {
    0%, 100% { transform: scale(1); opacity: 0.34; }
    50% { transform: scale(1.04); opacity: 0.74; }
}

@keyframes brewMokaLidChatter {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: drop-shadow(0 0 5px rgba(255,225,190,0.10)); }
}



.brew-flow-panel.brew-flow--aeropress.is-sealing #brew-ap-plunger {
    filter: drop-shadow(0 0 6px rgba(236,205,160,0.10));
}

.brew-flow-panel.brew-flow--aeropress.is-pressing #brew-ap-drips {
    filter: drop-shadow(0 0 8px rgba(156,87,36,0.20));
}


/* =====================================================================
   RESPONSIVE DOCK / TABLET / DESKTOP
   ===================================================================== */
#bottom-dock {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), var(--dock-max-width));
    bottom: calc(var(--safe-area-bottom) + 2px);
    transition: transform .24s ease, opacity .2s ease;
}

body.keyboard-open #bottom-dock {
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
}

#header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

input,
textarea,
select,
[contenteditable="true"] {
    scroll-margin-top: calc(var(--header-height) + 20px);
    scroll-margin-bottom: calc(var(--nav-base-height) + var(--safe-area-bottom) + 32px);
}

@media (min-width: 820px) {
    :root {
        --viewport-pad-x: clamp(20px, 3vw, 34px);
        --dock-max-width: 900px;
    }

    #bottom-nav {
        justify-content: center;
        overflow-x: visible;
        padding-left: 16px;
        padding-right: 16px;
    }

    #bottom-nav .nav-item:first-child,
    #bottom-nav .nav-item:last-child {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    :root {
        --app-max-width: 1480px;
        --content-max-width: 1220px;
    }

    #viewport > * {
        max-width: var(--content-max-width);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --header-base-height: 54px;
        --nav-base-height: 80px;
        --viewport-pad-top-gap: 12px;
        --viewport-pad-bottom-gap: 14px;
    }

    #bottom-dock {
        height: 50px;
        border-radius: 18px;
    }

    #bottom-nav {
        gap: 4px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #bottom-nav .nav-item {
        width: 48px;
        min-width: 48px;
        height: 40px;
    }

    #bottom-nav .nav-item.active[data-route="lab"] {
        width: 72px;
        min-width: 72px;
    }

    #bottom-nav .nav-item span {
        font-size: 0.42rem;
    }
}


/* ==========================================================================
   FINAL SAFE VISUAL POLISH — premium shells for non-photo sections
   Keeps logic intact and leaves image integration ready for the next pass.
   ========================================================================== */

.business-hero-shell,
.food-hero-shell,
.settings-hero,
.pantry-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

.business-hero-shell::before,
.food-hero-shell::before,
.settings-hero::before,
.pantry-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(214,162,76,0.16) 0%, rgba(214,162,76,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.015) 100%);
}

.business-hero-shell > *,
.food-hero-shell > *,
.settings-hero > *,
.pantry-hero > *{
  position:relative;
  z-index:1;
}

.business-hero-shell,
.food-hero-shell{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,0.02);
}

.food-hero-shell .food-subtitle{
  margin-top:8px;
}

.settings-hero{
  margin-bottom:2px;
  padding:18px 18px 16px;
  border-radius:20px;
  background:rgba(255,255,255,0.02);
}

.pantry-hero{
  position:relative;
  min-height: 196px;
  padding:18px 18px 16px;
  margin-bottom:14px;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pantry-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:image-set(url("../img/hero/sections/pantry_hero.webp") type("image/webp"), url("../img/hero/sections/pantry_hero.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
  z-index:0;
}
.pantry-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(214,162,76,0.12) 0%, rgba(214,162,76,0) 54%),
    linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.56) 100%);
  z-index:1;
}
.pantry-hero > *{
  position:relative;
  z-index:2;
}

.pantry-hero-title,
.pantry-hero-sub{
  color:#fff;
}

.pantry-hero-title,
.settings-title,
.food-title,
.business-hero-shell h2{
  text-shadow:0 2px 12px rgba(0,0,0,0.24);
}

@media (max-width: 560px){
  .food-header-top{
    flex-direction:column;
    align-items:stretch;
  }
  .food-header-top .btn-arch{
    width:100%;
  }
  .business-hero-shell .biz-hero-right .tech-card{
    width:100%;
  }
}

/* FOOD section hero image — aligned to the TOOLS hero style so the photo stays visible */
.food-hero-shell{
  position:relative;
  min-height: 196px;
  border-radius:20px;
  padding:16px;
  display:flex;
  flex-direction:column;
}

.food-hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:image-set(url("../img/hero/sections/foods_hero.webp") type("image/webp"), url("../img/hero/sections/foods_hero.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
  z-index:0;
}

.food-hero-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(214,162,76,0.12) 0%, rgba(214,162,76,0) 54%),
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.58) 100%);
  z-index:1;
}

.food-hero-shell > *{ position:relative; z-index:2; }

.food-hero-shell .brand-section-row{
  margin-bottom: auto;
}

.food-hero-shell .food-header-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:14px;
  min-height: 128px;
}

.food-hero-copy{
  display:block;
  max-width:min(760px, 100%);
  padding:0;
  border-radius:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.food-hero-shell .food-title{
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,0.46);
}

.food-hero-shell .food-subtitle{
  max-width: 780px;
  color:rgba(255,255,255,0.94);
  text-shadow:0 2px 12px rgba(0,0,0,0.44);
}

.food-hero-shell .btn-arch.primary{
  width:auto !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

@media (max-width: 560px){
  .pantry-hero{ min-height:214px; }
  .pantry-hero::before{ background-position:54% center; }
  .food-hero-shell{
    min-height: 214px;
    background-position: 54% center;
  }
  .food-hero-shell::before{
    background-position: 54% center;
  }
  .food-hero-shell .food-header-top{
    min-height: 138px;
    gap:12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   BUSINESS HERO — Image-based (matches Drinks/Foundations style)
   ═══════════════════════════════════════════════════════════════════ */
.business-hero-img {
  position: relative;
  width: 100%;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  margin: 8px 0 14px 0;
}
.business-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}
.business-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.82) 100%
  );
  pointer-events: none;
}
.business-hero-img-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 16px 14px 16px;
  z-index: 2;
}
.business-hero-img-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.business-hero-img-sub {
  margin-top: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS HERO — Image background override
   ═══════════════════════════════════════════════════════════════════ */
.settings-hero {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.82) 100%
    ),
    url("../img/hero/sections/settings_hero.jpg") center / cover no-repeat !important;
  height: 170px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 16px 16px 14px 16px !important;
}
.settings-hero::before {
  display: none !important;
}
.settings-kicker {
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  font-weight: 700 !important;
}
.settings-title {
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.settings-sub {
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.78) !important;
}

/* Compass: prevent iOS scroll/zoom while spinning */
.cc-wheel { touch-action: none; }

/* Generic modal overlay used by Pantry, Drinks, Foods (and similar fullscreen
   forms that are NOT bottom sheets). Honors iOS safe areas so the title never
   collides with the status bar/notch and the action buttons never get clipped
   behind the home indicator or the floating tab dock.

   IMPORTANT: #viewport uses `will-change: transform` which creates a new
   stacking context, breaking `position:fixed` for any descendant. When a
   modal-overlay is rendered inside #viewport, we neutralize the will-change
   and transform on the parent so position:fixed reverts to viewport-relative.
   This block uses :has() which is supported on iOS Safari 16.4+ (i.e. all
   currently shipping iOS versions). */
#viewport:has(> .modal-overlay){
  will-change: auto !important;
  transform: none !important;
  transition: none !important;
}
.modal-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.78) !important;
  z-index:99999 !important;
  display:flex !important;
  /* flex-start so the card sits at the top with a known height bound,
     instead of stretching ambiguously which broke iOS overflow:auto. */
  align-items:flex-start !important;
  justify-content:center !important;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) env(safe-area-inset-right, 0px) calc(env(safe-area-inset-bottom, 0px) + 8px) env(safe-area-inset-left, 0px) !important;
  margin:0 !important;
}
.modal-overlay > .modal-card{
  width:100%;
  max-width:560px;
  /* Hard cap on the card height so iOS Safari has a real bound for
     overflow:auto. We use 100dvh (dynamic viewport height) instead of
     100vh — on iOS standalone PWA, 100vh refers to the LARGEST possible
     viewport (including hidden URL bar), but the visible area is
     smaller, so 100vh causes the card to overflow off-screen and lose
     its bottom buttons. 100dvh tracks the current visible area. */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow-y:auto !important;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-radius:20px;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background:var(--card-bg, #16181d);
  box-sizing:border-box;
  /* Critical for iOS: flex children default to min-height:auto which means
     they can grow beyond their flex container, breaking overflow:auto. */
  min-height:0;
}
@media(min-width:600px){
  .modal-overlay{ align-items:center !important; padding:24px !important; }
  .modal-overlay > .modal-card{ max-height:calc(100dvh - 48px); }
}

/* Fix ticket modal on mobile — scoped to business modals so it does not
   override the standard .modal-overlay used by Pantry, Drinks, Foods, etc. */
.biz-modal.modal-overlay,
#biz-body .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:9990; padding:8px; }
.biz-modal .modal-card,
#biz-body .modal-card { max-width:94vw !important; max-height:88vh !important; overflow:auto !important; border-radius:20px; background:var(--card-bg, #1a1c22); padding:16px; box-sizing:border-box; }
#biz-body .modal-card input, #biz-body .modal-card select { max-width:100% !important; box-sizing:border-box; }
#biz-body .modal-card .biz-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:500px){ #biz-body .modal-card .biz-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }

/*
 * Modal overlays (Sale ticket modal, comanda, "Add to ticket" picker, Wallet share)
 * are appended to document.body, NOT to #biz-body. Without these rules, the
 * responsive behavior of biz-grid (single column on mobile) is lost and 3
 * fields end up squashed side-by-side. Mirror the same rules here.
 */
.modal-overlay .modal-card { max-width:94vw; max-height:88vh; overflow:auto; box-sizing:border-box; }
.modal-overlay .modal-card input,
.modal-overlay .modal-card select,
.modal-overlay .modal-card textarea { max-width:100%; box-sizing:border-box; }
.modal-overlay .modal-card .biz-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:500px){ .modal-overlay .modal-card .biz-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }

/* Business final polish: tickets, docs, history, invoice preview */
#biz-body .modal-card,
.biz-modal .biz-modal-card {
  overscroll-behavior: contain;
}

#biz-body .modal-card input,
#biz-body .modal-card select,
#biz-body .modal-card textarea,
#biz-body .biz-modal input,
#biz-body .biz-modal select,
#biz-body .biz-modal textarea {
  min-width: 0;
}

#biz-body [id="sale-items"] > div,
#biz-body [id="docs-items"] > div {
  min-width: 0;
}

#biz-body [data-doc-open],
#biz-body [data-doc-del],
#biz-body [data-order-view],
#biz-body [data-order-share],
#biz-body [data-order-print],
#biz-body [data-order-add] {
  white-space: nowrap;
}

@media (max-width: 640px) {
  #biz-body .modal-card {
    width: min(96vw, 760px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #biz-body .modal-card button,
  #biz-body .biz-modal button {
    max-width: 100%;
  }

  #biz-body [id="sale-items"] [data-it-qty],
  #biz-body [id="sale-items"] [data-it-price] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 110px;
  }

  #biz-body [id="doc-print"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #biz-body [id="doc-print"] .biz-hero-row,
  #biz-body [id="docs-items"],
  #biz-body [id="sale-items"] {
    min-width: 0;
  }

  #biz-body [id="doc-print"] img {
    max-width: 120px !important;
    height: auto;
  }
}


/* Business docs + ticket final mobile polish */
.biz-docs-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
  gap:12px;
  align-items:start;
}
.biz-docs-main,.biz-docs-side,.biz-docs-card{min-width:0;}
.biz-docs-card{padding:14px;}
.biz-docs-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.biz-docs-title{font-weight:900;letter-spacing:.04em;}
.biz-docs-subtitle{color:var(--txt-dim);font-size:.9rem;margin-top:4px;line-height:1.45;}
.biz-docs-kind-row,.biz-docs-payment-row,.biz-docs-footer-actions,.biz-doc-history-actions,.biz-docs-actions-inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.biz-docs-inline-card{padding:12px;margin-top:12px;min-width:0;}
.biz-docs-grid-2,.biz-docs-grid-3{
  display:grid;
  gap:10px;
}
.biz-docs-grid-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.biz-docs-grid-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.biz-docs-items > div{min-width:0;}
.biz-docs-notes{
  width:100%;
  margin-top:8px;
  resize:vertical;
  min-height:90px;
  box-sizing:border-box;
}
.biz-docs-totals-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin-top:12px;
}
.biz-doc-total-card{padding:10px;min-width:0;}
.biz-doc-total-label{color:var(--txt-dim);font-size:.8rem;line-height:1.35;}
.biz-doc-total-value{font-weight:900;margin-top:4px;word-break:break-word;}
.biz-docs-payment-block{margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;}
.biz-docs-history-wrap{margin-top:12px;min-width:0;}
.biz-docs-history-title{font-weight:900;margin-bottom:8px;}
.biz-docs-history-list{display:grid;gap:10px;min-width:0;}
.biz-doc-history-card{padding:12px;min-width:0;}
.biz-doc-history-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.biz-doc-history-main{min-width:0;flex:1 1 240px;}
.biz-doc-history-title-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.biz-doc-history-title{font-weight:900;}
.biz-doc-history-number{color:var(--txt-dim);font-weight:700;word-break:break-word;}
.biz-doc-history-meta{color:var(--txt-dim);font-size:.9rem;margin-top:4px;line-height:1.45;word-break:break-word;}
.biz-doc-history-total{font-weight:900;font-size:1rem;white-space:nowrap;}
.biz-doc-history-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;padding:3px 7px;border-radius:999px;font-weight:800;}
.biz-doc-history-actions{justify-content:flex-end;margin-top:10px;}
.biz-doc-empty{padding:12px;color:var(--txt-dim);}
.biz-doc-profile-logo{
  margin-top:12px;
  width:100%;
  max-height:140px;
  object-fit:contain;
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.biz-doc-modal-card{min-width:0;}
.biz-doc-preview-card{padding:14px;margin-top:12px;background:#0b0f14;}
.biz-doc-preview-head{align-items:flex-start;gap:14px;flex-wrap:wrap;}
.biz-doc-preview-logo{max-width:180px;max-height:86px;object-fit:contain;}
.biz-doc-preview-side{text-align:right;min-width:140px;flex:0 0 auto;}
.biz-doc-preview-meta-row{margin-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.biz-doc-preview-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  align-items:flex-start;
}
.biz-doc-preview-notes{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.biz-doc-preview-totals{min-width:240px;max-width:100%;}
.biz-doc-preview-total-row{display:flex;justify-content:space-between;color:var(--txt-dim);gap:12px;margin-top:6px;}
.biz-doc-preview-total-row:first-child{margin-top:0;}
.biz-doc-preview-total-strong{font-weight:900;color:var(--text,#fff);margin-top:8px;}

@media (max-width: 860px){
  .biz-docs-layout{grid-template-columns:1fr;}
}

@media (max-width: 640px){
  .biz-docs-header > *{width:100%;}
  .biz-docs-header .btn-arch,
  .biz-docs-footer-actions .btn-arch,
  .biz-doc-history-actions .btn-arch,
  .biz-docs-actions-inline .btn-arch{
    flex:1 1 100%;
    justify-content:center;
  }
  .biz-doc-history-total{white-space:normal;}
  .biz-doc-preview-side{text-align:left;min-width:0;}
  .biz-doc-preview-meta-row,
  .biz-doc-preview-line,
  .biz-doc-preview-total-row{display:grid;grid-template-columns:1fr;}
  .biz-doc-preview-totals{min-width:0;width:100%;}
  #biz-body #sale-items > div{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
  #biz-body #sale-items > div > div:last-child{
    width:100%;
    justify-content:stretch !important;
  }
  #biz-body #sale-items .btn-arch{
    flex:1 1 100%;
  }
  #biz-body #sale-items input[data-it-qty],
  #biz-body #sale-items input[data-it-price]{
    width:100% !important;
    min-width:0 !important;
    flex:1 1 100%;
  }
}


/* Foundations meta cards — prevent label/value overlap on small screens */
.foundations-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.foundations-meta-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  min-height:84px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.foundations-meta-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.foundations-meta-ico{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.foundations-meta-card .data-label{
  display:block;
  margin:0;
  font-size:0.68rem;
  line-height:1.1;
}
.foundations-meta-card .data-val{
  display:block;
  font-size:1.06rem;
  line-height:1.15;
  font-weight:900;
  letter-spacing:0.01em;
  text-wrap:balance;
}

/* Business dashboard — premium stepper and quick-fixes polish */
.biz-step{
  position:relative;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:hidden;
}
.biz-step::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(200,169,126,0.08), transparent 45%);
  opacity:.55;
}
.biz-step-ic{
  position:relative;
  z-index:1;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size:1rem;
}
.biz-step-ic::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,0.04);
}
.biz-step-ic .biz-step-status{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#121212;
  border:1px solid rgba(255,255,255,0.12);
  font-size:0.62rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
}
.biz-step.mod-settings .biz-step-ic{ color:#d9c29a; }
.biz-step.mod-pantry .biz-step-ic{ color:#cfb07c; }
.biz-step.mod-recipes .biz-step-ic{ color:#d8b56f; }
.biz-step.mod-reports .biz-step-ic{ color:#d5bf8f; }
.biz-step-body,
.biz-step > .btn-arch{ position:relative; z-index:1; }
.biz-step-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  line-height:1.1;
}
.biz-step-index{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--txt-dim);
}
.biz-step-hint{
  margin-top:4px;
  line-height:1.35;
}
.biz-step-btn{
  min-width:84px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.12);
}
.biz-health{
  padding:12px;
  border-style:solid;
  border-color:rgba(255,255,255,0.09);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}
.biz-health-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.biz-health-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  color:var(--accent);
}
.biz-health-copy{ color:var(--txt-dim); font-size:0.9rem; line-height:1.5; }
.biz-fixes{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.biz-fixes-hd{ align-items:flex-start; gap:12px; }
.biz-fixes-title{ font-size:1.06rem; font-weight:1000; line-height:1.1; }
.biz-fixes-sub{ margin-top:4px; line-height:1.4; }
.biz-fix-block{ margin-top:14px; padding-top:12px; }
.biz-fix-block-hd{ display:flex; align-items:center; gap:10px; font-size:0.98rem; }
.biz-fix-block-hd::before{
  content:'';
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(200,169,126,1), rgba(200,169,126,.55));
  box-shadow:0 0 0 6px rgba(200,169,126,0.08);
  flex:0 0 auto;
}
.biz-fix-row{ align-items:center; gap:12px; margin-top:10px; }
.biz-fix-label{ color:var(--txt-dim); font-size:0.94rem; line-height:1.35; }
.biz-fix-btn{ min-width:108px; border-radius:16px; background:rgba(255,255,255,0.05); }
.biz-fix-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.biz-fix-chip{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
}
.biz-fix-chip::before{
  content:'•';
  flex:0 0 auto;
  color:var(--accent);
  font-size:1.2rem;
  line-height:1;
  opacity:.9;
}
.biz-fix-chip-name{ flex:1; min-width:0; font-size:0.96rem; line-height:1.3; }
.biz-fix-mini{ flex:0 0 auto; min-width:92px; border-radius:14px; background:rgba(255,255,255,0.045); }
.biz-fix-more{
  align-self:flex-start;
  margin-top:2px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

/* Reports polish */
.biz-report-shell{
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.biz-report-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:end;
}
.biz-report-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:var(--txt-dim);
  font-size:0.9rem;
  line-height:1.45;
}
.biz-report-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.biz-report-kpi,
.biz-report-mini,
.biz-report-panel,
.biz-report-export-card,
.biz-report-empty{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.biz-report-kpi{ padding:12px; }
.biz-report-kpi-label{
  color:var(--txt-dim);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.biz-report-kpi-value{
  font-weight:1000;
  font-size:1.18rem;
  margin-top:8px;
  line-height:1.05;
}
.biz-report-kpi-sub{ color:var(--txt-dim); font-size:0.88rem; margin-top:6px; line-height:1.35; }
.biz-report-mini-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.biz-report-mini{ padding:10px; }
.biz-report-mini .biz-report-mini-label{ color:var(--txt-dim); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; }
.biz-report-mini .biz-report-mini-value{ font-weight:900; font-size:1rem; margin-top:6px; }
.biz-report-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.biz-report-panel{ padding:12px; }
.biz-report-panel-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.biz-report-panel-title{ font-weight:900; }
.biz-report-panel-sub{ color:var(--txt-dim); font-size:0.84rem; margin-top:3px; line-height:1.4; }
.biz-report-list{ display:grid; gap:8px; }
.biz-report-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
}
.biz-report-row-name{ min-width:0; flex:1; }
.biz-report-row-title{ font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.biz-report-row-copy{ color:var(--txt-dim); font-size:0.82rem; margin-top:4px; line-height:1.3; }
.biz-report-pill{
  padding:5px 9px;
  border-radius:999px;
  font-size:0.76rem;
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
}
.biz-report-export-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.biz-report-export-card{ padding:12px; }
.biz-report-export-top{ display:flex; gap:10px; align-items:flex-start; }
.biz-report-export-ic{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.11);
  background:rgba(255,255,255,0.05);
  color:var(--accent);
  flex:0 0 auto;
}
.biz-report-export-title{ font-weight:900; }
.biz-report-export-copy{ color:var(--txt-dim); font-size:0.86rem; margin-top:4px; line-height:1.4; }
.biz-report-export-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.biz-report-status-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.biz-report-status-card{ padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.biz-report-status-label{ color:var(--txt-dim); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; }
.biz-report-status-value{ font-weight:1000; font-size:1.06rem; margin-top:6px; }
.biz-report-duration-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.biz-report-empty{ padding:14px; color:var(--txt-dim); }

@media (max-width: 640px){
  .foundations-meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .foundations-meta-card{
    min-height:unset;
    padding:10px 11px;
    border-radius:16px;
  }
  .foundations-meta-card .data-label{
    font-size:0.62rem;
    letter-spacing:0.1em;
  }
  .foundations-meta-card .data-val{
    font-size:0.96rem;
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .biz-step,
  .biz-fix-row,
  .biz-fix-chip{ align-items:flex-start; }
  .biz-step,
  .biz-fix-row,
  .biz-fix-chip{ flex-wrap:wrap; }
  .biz-step > .btn-arch,
  .biz-fix-btn,
  .biz-fix-mini{ width:100%; }
  .biz-fix-chip::before{ margin-top:4px; }
  .biz-report-controls,
  .biz-report-kpi-grid,
  .biz-report-mini-grid,
  .biz-report-split,
  .biz-report-export-grid,
  .biz-report-status-grid,
  .biz-report-duration-grid{ grid-template-columns:1fr; }
  .biz-report-export-actions{ grid-template-columns:1fr; }
}


/* ======================================================================
   WEB PARITY + DESKTOP POLISH
   Shared logic stays the same. These rules only enhance larger screens.
   ====================================================================== */
@media (min-width: 980px) and (hover:hover) and (pointer:fine) {
  .foundations-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
}

@media (min-width: 1440px) and (hover:hover) and (pointer:fine) {
  .foundations-tiles{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width: 980px) and (hover:hover) and (pointer:fine) {
  .foundations-meta{
    grid-template-columns:repeat(3,minmax(220px,1fr));
    gap:12px;
  }
  .foundations-meta-card{
    min-height:96px;
    padding:14px 16px;
  }
  .biz-stepper{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .biz-step{
    min-height:112px;
  }
  .biz-fixes{
    padding:18px;
  }
  .biz-fixes-hd{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }
  .biz-fix-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .biz-fix-chip{
    min-height:80px;
  }
  .biz-report-shell{
    padding:18px !important;
  }
  .biz-report-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 220px;
  }
  .biz-report-export-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .biz-report-split{
    grid-template-columns:1.05fr 0.95fr;
  }
}

@media (min-width: 1280px) and (hover:hover) and (pointer:fine) {
  .biz-report-export-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}


/* Final compact-form polish for Pantry / Foods / Drinks / Business reports */
@media (max-width: 640px) {
  #mydrink-rows .pantry-grid,
  #myfood-rows .pantry-grid {
    grid-template-columns: 1fr !important;
  }

  #mydrink-rows .pantry-grid > div:last-child,
  #myfood-rows .pantry-grid > div:last-child {
    padding-bottom: 0 !important;
  }

  #mydrink-rows .ing-del,
  #myfood-rows .ing-del {
    width: 100% !important;
  }

  #biz-body [id^="biz-rep-export-"] {
    min-height: 58px;
    padding: 12px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    flex-wrap: wrap;
  }
}


/* FINAL_QA_TOOLS_VISUALS_PATCH_v1 */
.tool-field-help{display:block;margin-top:6px;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.58)}
.tool-glossary{margin-top:12px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 18px 44px rgba(0,0,0,.22)}
.tool-glossary-title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:rgba(255,255,255,.68);margin-bottom:8px}.tool-glossary-item{font-size:.88rem;color:rgba(255,255,255,.74);line-height:1.45;margin-top:5px}
.tool-panel,.tool-guide,.tool-output{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.tool-action-card{position:relative;overflow:hidden}.tool-action-card:before{content:"";position:absolute;inset:-40% -30% auto auto;width:150px;height:150px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.18),transparent 68%);pointer-events:none}.tool-note{position:relative;overflow:hidden}.tool-note:after{content:"";position:absolute;right:-35px;top:-35px;width:90px;height:90px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%)}
.tech-card,.recipe-card,.brew-recipe-card,.method-card,.fx-card,.foundation-card,.foundation-topic-card{transform-style:preserve-3d}.brew-recipe-card,.recipe-card{position:relative;overflow:hidden;box-shadow:0 22px 56px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.brew-recipe-card:before,.recipe-card:before{content:"";position:absolute;inset:-35% -20% auto auto;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(200,169,126,.22),rgba(200,169,126,.06) 42%,transparent 70%);filter:blur(.2px);pointer-events:none}.brew-recipe-card:after,.recipe-card:after{content:"";position:absolute;left:14%;bottom:-70px;width:170px;height:110px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.09),transparent 68%);pointer-events:none}.brew-recipe-card:hover,.recipe-card:hover{transform:translateY(-2px) perspective(900px) rotateX(1.2deg);box-shadow:0 30px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.1)}
.brew-flow-panel,#brew-flow-vis-wrap,.brew-timer-visual,.method-timer-card{position:relative;overflow:hidden;transform-style:preserve-3d;box-shadow:0 24px 64px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)}.brew-flow-panel:before,#brew-flow-vis-wrap:before,.brew-timer-visual:before,.method-timer-card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 30% 10%,rgba(200,169,126,.18),transparent 32%),radial-gradient(circle at 82% 18%,rgba(255,255,255,.08),transparent 28%);pointer-events:none}.brew-flow-stream,.brew-stream,.timer-stream{filter:drop-shadow(0 12px 18px rgba(200,169,126,.22)) saturate(1.08)}
.cc-card{background:linear-gradient(155deg,rgba(19,16,13,.96),rgba(37,26,18,.88));box-shadow:0 26px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)}.cc-section{border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);padding:12px}.cc-actions .cc-action,.cc-rule{line-height:1.45}.cc-sca-chart{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.22)}
.foundations-reading,.foundation-reader,.lesson-content,.lab-lesson-content{position:relative;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032));border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 62px rgba(0,0,0,.28);overflow:hidden}.foundations-reading:before,.foundation-reader:before,.lesson-content:before,.lab-lesson-content:before{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.18),transparent 70%);pointer-events:none}.foundation-topic-card,.lesson-card{box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .18s ease,box-shadow .18s ease}.foundation-topic-card:hover,.lesson-card:hover{transform:translateY(-2px);box-shadow:0 26px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.09)}
.ll-panel{box-shadow:0 24px 62px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}#ll-cupvis{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 42px rgba(0,0,0,.24)}
@media (prefers-reduced-motion: reduce){.brew-recipe-card,.recipe-card,.foundation-topic-card,.lesson-card{transition:none}.brew-recipe-card:hover,.recipe-card:hover,.foundation-topic-card:hover,.lesson-card:hover{transform:none}}


/* FINAL_QA_DEEP_VISUAL_v2 - perceptible premium depth without touching logic */
.tools-home{position:relative;isolation:isolate}.tools-home:before{content:"";position:absolute;left:-80px;top:-40px;width:240px;height:240px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.16),transparent 68%);filter:blur(2px);pointer-events:none;z-index:-1}.tools-grid{perspective:1100px}.tools-grid .tech-card{position:relative;overflow:hidden;border-color:rgba(200,169,126,.16)!important;background:linear-gradient(145deg,rgba(37,28,20,.82),rgba(14,12,10,.92))!important;box-shadow:0 24px 58px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)!important}.tools-grid .tech-card:before{content:"";position:absolute;right:-70px;top:-75px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.24),rgba(200,169,126,.05) 48%,transparent 72%);pointer-events:none}.tools-grid .tech-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.055) 36%,transparent 58%);opacity:.55;pointer-events:none}.tool-frame{position:relative;isolation:isolate}.tool-frame:before{content:"";position:absolute;right:-100px;top:20px;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.13),transparent 70%);filter:blur(4px);pointer-events:none;z-index:-1}.tool-topbar{border:1px solid rgba(200,169,126,.14);border-radius:20px;padding:10px 12px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08)}.tool-guide,.tool-panel,.tool-output{border-color:rgba(200,169,126,.13)!important;background:linear-gradient(160deg,rgba(37,28,20,.86),rgba(13,12,11,.92))!important;box-shadow:0 26px 68px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09)!important}.tool-guide-title,.tool-output-title{letter-spacing:.08em;text-transform:uppercase}.tool-field{border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.028);border-radius:18px;padding:10px}.tool-field span{font-weight:900;letter-spacing:.02em}.tool-input,.tool-select{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.18)}.tool-action-card,.tool-note,.tool-kpi,.tool-pill{border-color:rgba(200,169,126,.14)!important}.tool-action-card{background:linear-gradient(145deg,rgba(200,169,126,.105),rgba(255,255,255,.035))!important;box-shadow:0 18px 46px rgba(0,0,0,.28)}.tool-action-card strong{color:var(--accent)}.tool-btn-primary,.tool-btn-primary:visited{background:linear-gradient(135deg,var(--accent),#f1d6a6)!important;color:#22170e!important;box-shadow:0 15px 36px rgba(200,169,126,.22)!important}.cc-card{position:relative;overflow:hidden;border:1px solid rgba(200,169,126,.16)!important}.cc-card:before{content:"";position:absolute;right:-120px;top:-120px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.20),transparent 70%);pointer-events:none}.cc-card:after{content:"";position:absolute;left:10%;bottom:-80px;width:260px;height:150px;border-radius:999px;background:radial-gradient(ellipse,rgba(255,255,255,.07),transparent 68%);pointer-events:none}.cc-section,.cc-action,.cc-rule{position:relative;z-index:1}.cc-sca-chart{border:1px solid rgba(200,169,126,.15)!important;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important}.brew-recipe-card,.recipe-card{border:1px solid rgba(200,169,126,.14)!important;background:linear-gradient(150deg,rgba(36,27,19,.92),rgba(12,11,10,.96))!important}.brew-recipe-card .recipe-title,.recipe-card .recipe-title,.brew-recipe-card h3,.recipe-card h3{position:relative;text-shadow:0 8px 26px rgba(0,0,0,.34)}.brew-recipe-card .recipe-meta,.recipe-card .recipe-meta{position:relative}.brew-recipe-card:hover,.recipe-card:hover{border-color:rgba(200,169,126,.34)!important}.brew-flow-panel,#brew-flow-vis-wrap,.brew-timer-visual,.method-timer-card{border:1px solid rgba(200,169,126,.16)!important;background:linear-gradient(180deg,rgba(36,26,18,.88),rgba(12,11,10,.96))!important}.brew-timer-ring,.timer-ring,.method-timer-ring{filter:drop-shadow(0 18px 32px rgba(200,169,126,.16)) drop-shadow(0 24px 44px rgba(0,0,0,.26))}.brew-flow-step,.brew-step,.method-step{border-color:rgba(200,169,126,.12)!important;background:rgba(255,255,255,.038)!important}.foundations-reading,.foundation-reader,.lesson-content,.lab-lesson-content{padding:clamp(18px,4vw,30px)!important;border-color:rgba(200,169,126,.13)!important;background:linear-gradient(160deg,rgba(36,27,20,.88),rgba(12,11,10,.94))!important}.foundations-reading h1,.foundation-reader h1,.lesson-content h1,.lab-lesson-content h1,.foundations-reading h2,.foundation-reader h2,.lesson-content h2,.lab-lesson-content h2{letter-spacing:-.02em;text-shadow:0 12px 32px rgba(0,0,0,.32)}.foundation-topic-card,.lesson-card,.foundation-card{border-color:rgba(200,169,126,.12)!important;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.026))!important}.foundation-topic-card:before,.lesson-card:before,.foundation-card:before{content:"";position:absolute;right:-55px;top:-55px;width:140px;height:140px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.16),transparent 70%);pointer-events:none}.ll-panel,#ll-cupvis{border-color:rgba(200,169,126,.16)!important;background:linear-gradient(155deg,rgba(37,27,18,.85),rgba(12,11,10,.94))!important}.tools-help{border:1px solid rgba(200,169,126,.13);background:linear-gradient(145deg,rgba(200,169,126,.09),rgba(255,255,255,.028));box-shadow:0 18px 44px rgba(0,0,0,.24)}
@media (max-width:640px){.tool-topbar{border-radius:18px}.tool-field{padding:9px}.tool-guide,.tool-panel,.tool-output{border-radius:20px}.foundations-reading,.foundation-reader,.lesson-content,.lab-lesson-content{padding:18px!important}}

/* FINAL_QA_FOUNDATIONS_ACCORDION_UX_v1 - visible lesson affordance, no content rewrite */
.foundations-reading details.fx-details.foundations-accordion{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.105);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.026));box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.foundations-reading details.fx-details.foundations-accordion:not([open]){border-color:rgba(200,169,126,.16);background:linear-gradient(145deg,rgba(200,169,126,.085),rgba(255,255,255,.025))}.foundations-reading details.fx-details.foundations-accordion[open]{border-color:rgba(200,169,126,.28);background:linear-gradient(155deg,rgba(35,26,18,.92),rgba(14,12,10,.96));box-shadow:0 22px 56px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085)}.foundations-reading .fx-details-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px;min-height:66px;position:relative;z-index:1}.foundations-reading .fx-details-sum::-webkit-details-marker{display:none}.foundations-reading .fx-details-sum::before{content:"";position:absolute;right:-48px;top:-62px;width:156px;height:156px;border-radius:999px;background:radial-gradient(circle,rgba(200,169,126,.16),transparent 70%);pointer-events:none;z-index:-1}.foundations-reading .fx-details-title{font-weight:950;line-height:1.22;letter-spacing:.01em;color:rgba(255,255,255,.94)}.foundations-reading .fx-details-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(200,169,126,.20);background:rgba(200,169,126,.10);color:rgba(255,255,255,.72);border-radius:999px;padding:7px 10px;font-size:.74rem;font-weight:850;letter-spacing:.03em;white-space:nowrap}.foundations-reading .fx-details-chevron{font-size:.78rem;color:var(--accent);transition:transform .18s ease}.foundations-reading details.fx-details.foundations-accordion[open] .fx-details-chevron{transform:rotate(180deg)}.foundations-reading .fx-details-cta-open{display:none}.foundations-reading details.fx-details.foundations-accordion[open] .fx-details-cta-closed{display:none}.foundations-reading details.fx-details.foundations-accordion[open] .fx-details-cta-open{display:inline}.foundations-reading .fx-details-body{padding:0 14px 14px}.foundations-reading .fx-details-body>.fx-card{margin:0;border-color:rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.024));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}@media (max-width:560px){.foundations-reading .fx-details-sum{align-items:flex-start;flex-direction:column;padding:15px}.foundations-reading .fx-details-cta{font-size:.72rem}.foundations-reading .fx-details-body{padding:0 12px 12px}}


/* ============================================================
   v1.90.19 — HEADER SIN DESBORDES (web + iOS)
   Título trunca, chips encogen con ellipsis, y en pantallas
   angostas el rol pasa a solo-ícono y el operador se abrevia.
   El sync chip vive dentro del flujo de #header-actions.
   ============================================================ */
#top-bar{ gap: 10px; }
#header-title{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header-actions{ flex: 0 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; }
#header-actions #role-chip,
#header-actions #operator-chip{ flex: 0 1 auto; min-width: 0; }
#header-actions #role-chip span,
#header-actions #operator-chip span{ display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
#header-actions #cloud-sync-chip{ position: static !important; top: auto !important; right: auto !important; }
@media (max-width: 560px){
  #header-actions{ gap: 7px; }
  #header-actions #role-chip span{ display: none; }
  #header-actions #role-chip{ padding: 6px 9px !important; }
  #header-actions #operator-chip span{ max-width: 9ch; }
}
@media (max-width: 400px){
  #header-actions #operator-chip span{ display: none; }
  #header-actions #operator-chip{ padding: 6px 9px !important; }
}


/* ============================================================
   v1.90.20 — DOCK v2 (5 destinos) + HEADER UNIFORME
   Etiqueta SIEMPRE visible en el dock (staff nuevo no adivina
   íconos); chips del header con altura idéntica (fin del
   "descuadre" iOS: corona, operador y sync a la misma línea).
   ============================================================ */
#bottom-nav .nav-item span{
  display: block;
  opacity: .78;
  font-size: .5rem;
  letter-spacing: .05em;
}
#bottom-nav .nav-item.active span{ opacity: 1; }

#header-actions #role-chip,
#header-actions #operator-chip{
  height: 34px;
  box-sizing: border-box;
  align-items: center;
}
#header-actions #cloud-sync-chip{
  width: 34px !important; min-width: 34px !important; max-width: 34px !important;
  height: 34px !important; min-height: 34px !important; max-height: 34px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}
#header-actions #cloud-sync-chip #cloud-sync-chip-label{ display: none !important; max-width: 0 !important; opacity: 0 !important; }
body.is-ios #header-actions #role-chip,
body.is-ios #header-actions #operator-chip{ height: 32px; }
body.is-ios #header-actions #cloud-sync-chip{
  width: 32px !important; min-width: 32px !important; max-width: 32px !important;
  height: 32px !important; min-height: 32px !important; max-height: 32px !important;
}


/* ============================================================
   v1.90.21 — DOCK v3: iconografía propia + activo con presencia
   ============================================================ */
#bottom-nav .nav-item svg{
  width: 21px; height: 21px;
  display: block; margin: 0 auto;
}
#bottom-nav .nav-item.active svg{
  filter: drop-shadow(0 0 7px rgba(224,169,62,.55));
}
#bottom-nav .nav-item.active{
  color: var(--accent, #AEB98C);
}


/* ============================================================
   v1.90.23 — DOCK MÓVIL LIMPIO (la web usa sidebar; ver web.css)
   Sin cajitas: ícono + etiqueta, activo dorado con punto indicador.
   ============================================================ */
#bottom-nav .nav-item .nav-ic{
  width: 26px; height: 24px;
  display: grid; place-items: center;
  margin: 0 auto;
  color: var(--txt-dim, #A39A89);
  transition: color .16s ease, transform .14s ease;
}
#bottom-nav .nav-item svg{
  width: 21px; height: 21px; display: block;
}
#bottom-nav .nav-item .nav-ic i{ font-size: 17px; }
#bottom-nav .nav-item span{
  display: block;
  opacity: .7;
  font-size: .5rem;
  letter-spacing: .05em;
}
#bottom-nav .nav-item.active .nav-ic{
  color: #E8C989;
  transform: translateY(-1px);
}
#bottom-nav .nav-item.active span{ opacity: 1; color: #E8C989; }
#bottom-nav .nav-item.active::after{
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #E8C989;
  box-shadow: 0 0 8px rgba(232,201,137,.8);
}
#bottom-nav .nav-item{ position: relative; }