/* ── BafGo Kitchen – Styles ── */
/* Split from index.html for maintainability */

:root {
  --bg: #1a1a1a;
  --surface: #252525;
  --surface2: #2e2e2e;
  --text: #f0ede8;
  --muted: #969086;
  --line: #3a3a3a;
  --accent: #e8652a;
  --accent-glow: rgba(232,101,42,0.25);
  --warm: #f59e0b;
  --cool: #3b82f6;
  --success: #22c55e;
  --radius: 12px;
  --radius-lg: 18px;
  --font-heading: "Sora","Segoe UI",system-ui,sans-serif;
  --font-body: "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --burner-size: clamp(72px,18vw,110px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Custom scrollbars ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
*{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg)}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
h1,h2,h3{font-family:var(--font-heading)}

/* ── Nav dropdown menu ── */
.nav-menu-wrap{
  position:relative;
  display:none;
}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.35rem;
  min-width:150px;
  z-index:300;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity 160ms,visibility 160ms,transform 160ms;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.nav-dropdown.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-dropdown-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  width:100%;
  padding:0.6rem 0.75rem;
  border:none;
  border-radius:8px;
  background:none;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:background 140ms;
}
.nav-dropdown-item:hover{
  background:var(--surface2);
}
.nav-dropdown-item svg{
  flex-shrink:0;
  color:var(--muted);
}

/* Show the more-menu only on narrow screens (when all buttons don't fit) */
@media(max-width:480px){
  .nav-menu-wrap{display:block}
  .kitchen-nav .nav-btn.nav-desktop{display:none}
}

/* ── Nav ── */
.kitchen-nav{
  display:flex;align-items:center;justify-content:center;gap:0.75rem;
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.kitchen-nav h1{
  font-size:1.05rem;font-weight:700;
  flex:1;
  letter-spacing:-0.01em;
}
.kitchen-nav .nav-btn{
  background:none;border:none;color:var(--muted);
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background 140ms,color 140ms;
  font-size:1.1rem;
}
.kitchen-nav .nav-btn:hover,.kitchen-nav .nav-btn.active{
  background:var(--surface2);color:var(--text);
}
.kitchen-nav .back-link{
  color:var(--muted);text-decoration:none;
  font-size:1.2rem;display:flex;padding:4px;
  transition:color 140ms;
}
.kitchen-nav .back-link:hover{color:var(--text)}
.nav-btn svg,.back-link svg{display:block}
.layout-tab svg{vertical-align:middle;margin-right:4px;display:inline-block}

/* ── Nav / tabs / bar inner wrappers (width limit) ── */
.nav-inner,.tabs-inner,.bar-inner{
  display:flex;align-items:center;
  width:100%;max-width:900px;
}
.nav-inner{gap:0.75rem}
.tabs-inner{gap:4px;overflow-x:auto}
.bar-inner{gap:0.75rem}

/* ── Layout tabs ── */
.layout-tabs{
  display:flex;
  padding:0.5rem 1rem;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  justify-content:center;
}
.layout-tab{
  flex-shrink:0;
  background:none;border:none;color:var(--muted);
  font-family:var(--font-body);font-size:0.78rem;font-weight:600;
  padding:0.5rem 0.75rem;border-radius:8px;
  cursor:pointer;transition:all 140ms;
  text-align:center;
  white-space:nowrap;
}
.layout-tab.active{
  background:var(--surface2);color:var(--text);
}
.layout-tab:hover:not(.active){color:var(--text)}

/* ── Main canvas ── */
.kitchen-canvas{
  max-width:600px;margin:0 auto;
  padding:1rem 1rem 6rem;
}
/* Consistent vertical spacing between sections on mobile */
.kitchen-canvas > #stoveSection,
.kitchen-canvas > #ovenSection,
.kitchen-canvas > #grillSection,
.kitchen-canvas > #generalTimersSection{
  margin-bottom:1.5rem;
}
.kitchen-canvas > #generalTimersSection:last-child{
  margin-bottom:0;
}

/* Side-by-side sections on wider screens */
@media(min-width:700px){
  .kitchen-canvas{
    max-width:960px;
    display:flex;
    flex-wrap:wrap;
    gap:0 2.5rem;
    align-items:flex-start;
  }
  .kitchen-canvas > div{
    flex:1 1 calc(50% - 1.25rem);
    min-width:280px;
    margin-bottom:0;
  }
  #stoveSection, #ovenSection, #grillSection{
    padding:0 0.25rem;
  }
  #generalTimersSection{flex-basis:100%}
  /* Single-section tabs — visible child fills the row but content doesn't balloon */
  .kitchen-canvas.single-section > div{flex:1 1 100%}
  .kitchen-canvas.single-section .stove-grid,
  .kitchen-canvas.single-section #grillGrid{max-width:400px;margin:0 auto}
  .kitchen-canvas.single-section .oven-stack,
  .kitchen-canvas.single-section .gt-unit{max-width:400px;margin-left:auto;margin-right:auto}
}

/* ── Section ── */
.section-label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:0.6rem;padding-left:4px;
  display:flex;align-items:center;justify-content:space-between;
}
.section-label .section-actions{
  display:flex;gap:0.25rem;
}
.section-label .section-actions button{
  background:var(--surface2);
  border:1px solid var(--line);
  color:var(--muted);
  cursor:pointer;
  font-size:0.82rem;
  padding:4px 8px;
  border-radius:6px;
  transition:color 140ms,background 140ms,border-color 140ms;
  line-height:1;
}
.section-label .section-actions button:hover{
  color:var(--accent);
  background:var(--surface);
  border-color:var(--accent);
}

/* ── Stove grid ── */
.stove-grid{
  display:grid;
  gap:1rem;
  margin-bottom:1.5rem;
}
.stove-grid.cols-2{grid-template-columns:1fr 1fr}
.stove-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.stove-grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.stove-grid.cols-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.stove-grid.cols-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}

.burner{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.35rem;
  cursor:pointer;
  transition:border-color 200ms,box-shadow 200ms,background 200ms;
  position:relative;
  min-height:var(--burner-size);
  padding:0.5rem;
}
.burner:active{transform:scale(0.97)}
/* Burner sizes */
.burner--small{aspect-ratio:1;min-height:clamp(56px,14vw,80px)}
.burner--medium{aspect-ratio:1;min-height:var(--burner-size)}
.burner--large{aspect-ratio:1;min-height:clamp(88px,22vw,130px)}
/* Ring sizes */
.burner .burner-ring{
  border-radius:50%;
  border:3px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-variant-numeric:tabular-nums;
  transition:border-color 300ms,box-shadow 300ms;
  position:relative;
  flex-shrink:0;
}
.burner--small .burner-ring{
  width:clamp(28px,8vw,42px);
  height:clamp(28px,8vw,42px);
  font-size:clamp(0.55rem,2vw,0.7rem);
}
.burner--medium .burner-ring{
  width:clamp(36px,10vw,58px);
  height:clamp(36px,10vw,58px);
  font-size:clamp(0.7rem,2.5vw,0.9rem);
}
.burner--large .burner-ring{
  width:clamp(48px,13vw,72px);
  height:clamp(48px,13vw,72px);
  font-size:clamp(0.85rem,3vw,1.05rem);
  border-width:4px;
}
.burner .burner-label{
  font-size:0.65rem;color:var(--muted);font-weight:600;
  white-space:nowrap;
}
/* Griddle — rectangular, span-able */
.burner.burner--griddle{
  border-radius:var(--radius);
  aspect-ratio:auto;
  min-height:60px;
}
.burner.burner--griddle .burner-ring{
  border-radius:8px;
  width:auto;
  height:auto;
  padding:8px 24px;
  aspect-ratio:auto;
  border-width:2px;
}

/* ── Grill burner (grate appearance) ── */
.burner--grill .burner-ring{
  border-radius:6px;
  border-style:dashed;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3px,
    var(--line) 3px,
    var(--line) 5px
  );
  background-size:8px 100%;
}
.burner--grill .burner-ring .timer-text{
  background:var(--surface);
  padding:0 6px;
  border-radius:4px;
}
.burner--grill .burner-label::before{
  content:'\1F525 ';
  font-size:0.65rem;
}
/* Grill preview styling */
.grill-preview .preview-dot{
  background:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 2px,transparent 2px,transparent 5px);
}

/* Active (timer running) */
.burner.active{
  border-color:var(--accent);
  box-shadow:0 0 20px var(--accent-glow);
}
.burner.active .burner-ring{
  border-color:var(--accent);
  box-shadow:inset 0 0 12px var(--accent-glow);
}
.burner.active .burner-ring .timer-text{color:var(--accent)}
/* Done */
.burner.done{
  border-color:var(--success);
  box-shadow:0 0 20px rgba(34,197,94,0.2);
  animation:pulse-done 1s ease-in-out infinite;
}
.burner.done .burner-ring{
  border-color:var(--success);
  box-shadow:inset 0 0 12px rgba(34,197,94,0.15);
}
.burner.done .burner-ring .timer-text{color:var(--success)}
@keyframes pulse-done{
  0%,100%{box-shadow:0 0 15px rgba(34,197,94,0.15)}
  50%{box-shadow:0 0 30px rgba(34,197,94,0.35)}
}
/* Sub-label for multi-timer */
.burner .sub-label{
  font-size:0.6rem;color:var(--muted);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Oven layout ── */
.oven-section{margin-bottom:1.5rem}
.oven-stack{display:flex;flex-direction:column;gap:0.5rem}
.oven-unit{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1rem;
  cursor:pointer;
  transition:border-color 200ms,box-shadow 200ms;
}
.oven-unit:active{transform:scale(0.99)}
.oven-unit.active{
  border-color:var(--accent);
  box-shadow:0 0 20px var(--accent-glow);
}
.oven-unit.done{
  border-color:var(--success);
  box-shadow:0 0 20px rgba(34,197,94,0.2);
  animation:pulse-done 1s ease-in-out infinite;
}
.oven-header{
  display:flex;align-items:center;gap:0.75rem;
  margin-bottom:0.5rem;
}
.oven-icon{display:flex;color:var(--muted)}
.oven-name{font-size:0.9rem;font-weight:600;flex:1}
.oven-timer{
  font-size:0.82rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.oven-unit.active .oven-timer{color:var(--accent)}
.oven-unit.done .oven-timer{color:var(--success)}

/* ── Racks ── */
.racks{
  display:flex;gap:0.5rem;flex-wrap:wrap;
  margin-top:0.5rem;
}
.rack{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.4rem 0.65rem;
  display:flex;align-items:center;gap:0.4rem;
  cursor:pointer;
  font-size:0.75rem;font-weight:600;
  transition:border-color 200ms;
}
.rack:active{transform:scale(0.97)}
.rack.active{
  border-color:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
.rack.done{
  border-color:var(--success);
  box-shadow:0 0 10px rgba(34,197,94,0.2);
}
.rack .rack-timer{
  font-variant-numeric:tabular-nums;
  font-weight:700;font-size:0.78rem;
  color:var(--muted);
}
.rack.active .rack-timer{color:var(--accent)}
.rack.done .rack-timer{color:var(--success)}

/* ── Preset picker (in timer modal) ── */
.preset-picker{display:none;margin-bottom:1rem}
.preset-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:0.5rem;
  margin-bottom:0.75rem;
}
.preset-btn{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.6rem 0.3rem;
  cursor:pointer;
  display:flex;flex-direction:column;
  align-items:center;gap:0.2rem;
  text-align:center;
  transition:border-color 140ms,background 140ms,transform 120ms;
  color:var(--text);
  font-family:var(--font-body);
}
.preset-btn:active{transform:scale(0.95)}
.preset-btn:hover{border-color:var(--accent);background:#333}
.preset-btn svg{color:var(--accent);flex-shrink:0}
.preset-btn .pb-name{
  font-size:0.65rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.preset-btn .pb-time{
  font-size:0.6rem;font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.preset-divider{
  display:flex;align-items:center;gap:0.75rem;
  margin-bottom:0.5rem;
}
.preset-divider::before,.preset-divider::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.preset-divider span{
  font-size:0.65rem;color:var(--muted);font-weight:600;
  white-space:nowrap;text-transform:uppercase;letter-spacing:0.05em;
}
@media(max-width:380px){
  .preset-grid{grid-template-columns:1fr 1fr 1fr}
}

/* ── Timer wheel modal ── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.65);
  display:none;align-items:flex-end;justify-content:center;
  z-index:200;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex}
.modal-sheet{
  background:var(--surface);
  width:100%;max-width:480px;
  border-radius:20px 20px 0 0;
  padding:1.5rem 1.5rem 2.5rem;
  max-height:85vh;
  overflow-y:auto;
  animation:slide-up 240ms ease-out;
}
@keyframes slide-up{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.modal-handle{
  width:40px;height:4px;border-radius:2px;
  background:var(--line);
  margin:0 auto 1.25rem;
}
.modal-title{
  font-size:1rem;font-weight:700;margin-bottom:0.25rem;
}
.modal-sub{
  font-size:0.8rem;color:var(--muted);margin-bottom:1.25rem;
}
.quick-wheel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.65rem;
  margin-bottom:1rem;
}
.quick-btn{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem 0.5rem;
  font-family:var(--font-heading);
  font-size:1.15rem;font-weight:700;
  color:var(--text);
  cursor:pointer;
  transition:background 140ms,border-color 140ms;
  text-align:center;
}
.quick-btn:active{transform:scale(0.97)}
.quick-btn:hover{border-color:var(--accent);background:#333}
.quick-btn .qb-sub{
  display:block;font-size:0.65rem;font-weight:600;
  color:var(--muted);font-family:var(--font-body);
  margin-top:0.15rem;
}
.custom-time-row{
  display:flex;gap:0.5rem;align-items:center;
}
.custom-time-input{
  flex:1;
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.75rem 1rem;
  font-family:var(--font-body);
  font-size:1.1rem;font-weight:700;
  color:var(--text);
  outline:none;
  transition:border-color 140ms;
}
.custom-time-input:focus{border-color:var(--accent)}
.custom-time-input::placeholder{color:var(--muted);font-weight:500;font-size:0.85rem}
.set-timer-btn{
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);
  padding:0.75rem 1.25rem;
  font-family:var(--font-heading);
  font-size:0.9rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:opacity 140ms;
}
.set-timer-btn:active{opacity:0.8}
.label-input{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.6rem 0.85rem;
  font-family:var(--font-body);
  font-size:0.85rem;
  color:var(--text);
  outline:none;
  margin-top:0.5rem;
  transition:border-color 140ms;
}
.label-input:focus{border-color:var(--accent)}
.label-input::placeholder{color:var(--muted)}

/* ── Mic wrap + live transcript bubble ── */
.mic-wrap{
  position:fixed;
  left:50%;bottom:4rem;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  align-items:center;
  z-index:150;
  pointer-events:none;
}
.mic-wrap .float-mic{pointer-events:auto}
.mic-transcript{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0.4rem 0.85rem;
  font-size:0.8rem;
  font-weight:600;
  color:var(--accent);
  white-space:nowrap;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:0.6rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 180ms,transform 180ms;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  pointer-events:none;
}
.mic-transcript.speaking{
  opacity:1;
  transform:translateY(0);
}

/* ── Floating mic button ── */
.float-mic{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--line);
  color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all 200ms;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.float-mic:active{transform:scale(0.92)}
.float-mic:hover{border-color:var(--accent);color:var(--accent)}
.float-mic.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 0 30px var(--accent-glow);
  animation:mic-pulse 1.5s ease-in-out infinite;
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 20px var(--accent-glow)}
  50%{box-shadow:0 0 40px var(--accent-glow),0 0 60px var(--accent-glow)}
}
@media(min-width:600px){
  .mic-wrap{bottom:4.5rem}
  .float-mic{width:64px;height:64px}
  .float-mic svg{width:32px;height:32px}
}

/* ── Summary bar ── */
.summary-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:0.65rem 1rem;
  display:flex;align-items:center;
  justify-content:center;
  z-index:100;
}
.summary-bar .summary-label{
  font-size:0.75rem;color:var(--muted);font-weight:600;
  white-space:nowrap;
}
.summary-bar .summary-timers{
  display:flex;gap:0.5rem;flex-wrap:wrap;flex:1;
}
.summary-chip{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.2rem 0.55rem;
  font-size:0.72rem;font-weight:600;
  color:var(--accent);
  display:flex;align-items:center;gap:0.3rem;
  font-variant-numeric:tabular-nums;
}
.summary-chip.done-chip{color:var(--success)}
.summary-chip .chip-close{
  cursor:pointer;opacity:0.5;font-size:0.65rem;
  line-height:1;
}
.summary-chip .chip-close:hover{opacity:1}
.summary-bar .night-toggle{
  background:none;border:none;color:var(--muted);
  font-size:1.1rem;cursor:pointer;
  padding:4px;border-radius:6px;flex-shrink:0;
  transition:color 140ms;
}
.summary-bar .night-toggle:hover{color:var(--text)}
.summary-bar .night-toggle.active{color:var(--warm)}

/* ── Custom background ── */
body.has-custom-bg{
  background-size:cover !important;
  background-position:center !important;
  background-attachment:fixed !important;
}
body.has-custom-bg::before{
  content:'';
  position:fixed;inset:0;
  background:rgba(0,0,0,var(--bg-overlay, 0.45));
  backdrop-filter:blur(var(--bg-blur, 0px));
  -webkit-backdrop-filter:blur(var(--bg-blur, 0px));
  z-index:0;
  pointer-events:none;
}
body.has-custom-bg .kitchen-nav{
  position:relative;z-index:170;
}
body.has-custom-bg .layout-tabs{
  position:relative;z-index:160;
}
body.has-custom-bg .kitchen-canvas > *{
  position:relative;z-index:1;
}
body.has-custom-bg .summary-bar{
  z-index:101;
}
body.has-custom-bg .float-mic,
body.has-custom-bg .mic-wrap{
  z-index:151;
}
.bg-preview-wrap{text-align:center}
.bg-preview{
  width:100%;height:120px;
  border-radius:var(--radius);
  background-size:cover;
  background-position:center;
  border:1px solid var(--line);
}
.bg-slider-row{
  display:flex;align-items:center;gap:0.75rem;
  margin-top:0.6rem;
}
.bg-label{
  font-size:0.75rem;font-weight:600;color:var(--muted);
  min-width:48px;
}
.bg-slider{
  flex:1;height:4px;
  -webkit-appearance:none;appearance:none;
  background:var(--line);border-radius:2px;outline:none;
  cursor:pointer;
}
.bg-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);
  cursor:pointer;
}
.bg-slider-val{
  font-size:0.75rem;font-weight:700;color:var(--text);
  min-width:38px;text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ── Night mode ── */
body.night-mode{
  --bg: #0f0f0f;
  --surface: #181818;
  --surface2: #202020;
  --text: #e8dcc8;
  --muted: #7a7268;
  --line: #2a2825;
}

/* ── Toast ── */
#toast{
  position:fixed;top:4.5rem;left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--accent);
  padding:0.55rem 1.1rem;
  border-radius:2rem;
  font-size:0.82rem;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity 240ms,transform 240ms;
  z-index:300;
  white-space:nowrap;
  max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Grill empty state ── */
.grill-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  padding:2rem 1.5rem;
  text-align:center;
  background:var(--surface);
  border:2px dashed var(--line);
  border-radius:var(--radius-lg);
  grid-column:1/-1;
}
.grill-empty .ge-icon{
  color:var(--muted);
  opacity:0.5;
}
.grill-empty .ge-title{
  font-family:var(--font-heading);
  font-size:0.95rem;
  font-weight:700;
}
.grill-empty .ge-desc{
  font-size:0.78rem;
  color:var(--muted);
  line-height:1.4;
  max-width:260px;
}
.grill-empty .ge-btn{
  margin-top:0.25rem;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:0.6rem 1.25rem;
  font-family:var(--font-heading);
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  transition:opacity 140ms;
}
.grill-empty .ge-btn:active{opacity:0.8}

/* ── General timers section ── */
#generalTimersSection{margin-top:1.5rem;margin-bottom:1.5rem}

/* ── Install banner ── */
.install-banner{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 0.75rem;
  margin:0 0.75rem 1rem;
  background:var(--accent-dim);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  animation:fadeIn 0.4s ease;
}
.install-banner.hidden{display:none}
.install-banner-link{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex:1;
  text-decoration:none;
  color:var(--text);
  font-size:0.78rem;
  font-weight:600;
  transition:opacity 140ms;
}
.install-banner-link:hover{opacity:0.8;text-decoration:none}
.install-banner-link .ib-icon{display:flex;color:var(--accent);flex-shrink:0}
.install-banner-link .ib-text{flex:1;line-height:1.3}
.install-banner-link .ib-arrow{color:var(--accent);flex-shrink:0;transition:transform 140ms}
.install-banner-link:hover .ib-arrow{transform:translateX(2px)}
.ib-dismiss{
  display:flex;
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  padding:4px;
  border-radius:4px;
  transition:color 140ms,background 140ms;
  flex-shrink:0;
}
.ib-dismiss:hover{color:var(--text);background:var(--surface2)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.gt-unit{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1rem;
}
.gt-unit-icon{display:flex;color:var(--muted)}
.add-timer-pill{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.4rem 0.75rem;
  display:flex;align-items:center;gap:0.35rem;
  cursor:pointer;
  font-size:0.75rem;font-weight:600;
  color:var(--muted);
  font-family:var(--font-body);
  transition:color 140ms,background 140ms,border-color 140ms;
  white-space:nowrap;
}
.add-timer-pill:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--surface);
}
.add-timer-pill svg{display:block}
.gt-cancel{
  background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:1rem;padding:0 4px;
  line-height:1;margin-left:auto;
  transition:color 140ms;
  flex-shrink:0;
}
.gt-cancel:hover{color:var(--accent)}
.rack .gt-cancel{font-size:0.9rem}

/* ── Theme picker ── */
.theme-picker{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:0.5rem;
}
.theme-opt{
  cursor:pointer;
  text-align:center;
  padding:0.5rem 0.25rem;
  border-radius:var(--radius);
  transition:background 140ms;
}
.theme-opt:hover{background:var(--surface2)}
.theme-opt.active{background:var(--surface2)}
.theme-swatch{
  width:48px;height:48px;
  border-radius:50%;
  border:3px solid var(--line);
  margin:0 auto 0.35rem;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 140ms,transform 140ms;
}
.theme-opt.active .theme-swatch{
  border-color:var(--accent);
  transform:scale(1.1);
}
.theme-icon{font-size:1.2rem;line-height:1}
.theme-name{
  display:block;
  font-size:0.72rem;font-weight:600;
}
@media(max-width:380px){
  .theme-picker{grid-template-columns:1fr 1fr}
}

/* ── Active timers count badge ── */
.active-count{
  background:var(--accent);color:#fff;
  border-radius:999px;
  min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.65rem;font-weight:700;
  padding:0 5px;
}

/* ── Config / layout builder ── */
.config-modal .modal-sheet{max-height:85vh;overflow-y:auto}
.config-section{margin-bottom:1.25rem}
.config-section:last-child{margin-bottom:0}
.config-section h3{
  font-size:0.85rem;font-weight:700;
  margin-bottom:0.6rem;color:var(--muted);
}
.config-presets{
  display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;
  margin-bottom:0.75rem;
}
.config-preset{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.75rem;
  cursor:pointer;
  text-align:center;
  transition:border-color 140ms;
}
.config-preset:hover{border-color:var(--accent)}
.config-preset.active{border-color:var(--accent);background:#333}
.config-preset .cp-name{
  font-weight:700;font-size:0.85rem;display:block;
}
.config-preset .cp-desc{
  font-size:0.7rem;color:var(--muted);display:block;
  margin-top:0.15rem;
}
.config-item{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.5rem 0;
  border-bottom:1px solid var(--line);
}
.config-item:last-child{border-bottom:none}
.config-item .ci-icon{font-size:1rem;width:24px;text-align:center}
.config-item .ci-info{flex:1}
.config-item .ci-name{font-size:0.82rem;font-weight:600}
.config-item .ci-desc{font-size:0.7rem;color:var(--muted)}
.config-item .ci-remove{
  background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:1rem;padding:4px;
  border-radius:4px;transition:color 140ms,background 140ms;
}
.config-item .ci-remove:hover{color:var(--accent);background:var(--surface2)}
.config-add-row{
  display:flex;gap:0.5rem;margin-top:0.5rem;
}
.config-add-row select,.config-add-row input{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.5rem 0.75rem;
  font-family:var(--font-body);font-size:0.8rem;
  color:var(--text);outline:none;flex:1;
}
.config-add-row select:focus,.config-add-row input:focus{border-color:var(--accent)}
.config-add-row button{
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);padding:0.5rem 1rem;
  font-family:var(--font-heading);font-size:0.8rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.config-stove-preview{
  display:grid;gap:4px;padding:0.75rem;
  background:var(--surface2);border-radius:var(--radius);
  margin-top:0.5rem;
}
.config-stove-preview .preview-dot{
  border-radius:8px;
  background:var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;color:var(--muted);font-weight:600;
  min-height:28px;
  transition:background 140ms;
}
.config-stove-preview .preview-dot.pd-small{aspect-ratio:1;min-height:24px;font-size:0.5rem}
.config-stove-preview .preview-dot.pd-medium{aspect-ratio:1;min-height:32px}
.config-stove-preview .preview-dot.pd-large{aspect-ratio:1;min-height:42px;font-size:0.85rem}
.config-stove-preview .preview-dot.pd-griddle{
  aspect-ratio:auto;
  min-height:22px;
  border-radius:4px;
  background:var(--accent-glow);
  color:var(--accent);
}

/* ── Responsive ── */
@media(min-width:600px){
  .kitchen-canvas{padding:1.5rem 2rem 6rem}
  .stove-grid{gap:1.25rem}
}
@media(max-width:380px){
  .burner .burner-ring{width:36px;height:36px;font-size:0.6rem}
  .quick-wheel{grid-template-columns:1fr 1fr}
  .config-presets{grid-template-columns:1fr}
}