:root{
  --bg:#f5efe6;
  --bg-deep:#ede4d3;
  --terra:#c75d3c;
  --terra-deep:#a04a30;
  --sage:#7d8c6a;
  --sage-deep:#5d6b4d;
  --mustard:#d4a04a;
  --ink:#2c241c;
  --ink-soft:#5c4f42;
  --paper:#fefaf2;
  --line:rgba(44,36,28,.1);
  --line-strong:rgba(44,36,28,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Outfit',sans-serif;
  line-height:1.5;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* PROGRESS RAIL */
.progress{
  position:fixed;
  top:0;left:0;right:0;
  height:6px;
  background:var(--bg-deep);
  z-index:50;
}
.progress-fill{
  height:100%;
  background:var(--terra);
  transition:width .4s cubic-bezier(.4,0,.2,1);
  width:40%;
}
/* TOP BAR */
.topbar{
  position:fixed;
  top:6px;left:0;right:0;
  height:64px;
  background:rgba(245,239,230,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  z-index:40;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.recipe-name{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1;
}
.recipe-thumb{
  width:40px;height:40px;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-deep);
  flex-shrink:0;
}
.recipe-thumb svg{width:100%;height:100%;display:block}
.recipe-name h1{
  font-family:'DM Serif Display',serif;
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recipe-name h1 i{color:var(--terra)}
.step-counter{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}
.top-controls{
  display:flex;
  gap:6px;
  align-items:center;
}
.control-btn{
  background:transparent;
  border:1px solid var(--line);
  width:40px;height:40px;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  display:grid;place-items:center;
  color:var(--ink-soft);
  font-size:16px;
}
.control-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--ink-soft)}
.control-btn.active{background:var(--terra);color:white;border-color:var(--terra)}
.exit-btn{
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:0 18px;
  height:40px;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.exit-btn:hover{background:var(--terra)}
/* STAGE — the active step lives here */
.stage{
  position:fixed;
  top:70px;
  bottom:96px;
  left:0;right:0;
  overflow:hidden;
}
.step-track{
  display:flex;
  height:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.step-card{
  flex:0 0 100%;
  height:100%;
  padding:32px 48px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:center;
  overflow:hidden;
}
.step-content{
  max-width:680px;
  padding:24px 0;
  overflow-y:auto;
  max-height:100%;
}
.step-num{
  display:inline-block;
  font-family:'DM Serif Display',serif;
  font-size:14px;
  color:var(--terra);
  text-transform:uppercase;
  letter-spacing:.2em;
  margin-bottom:14px;
  font-style:italic;
  font-weight:400;
}
.step-num::before{
  content:'';
  display:inline-block;
  width:32px;height:1px;
  background:var(--terra);
  margin-right:14px;
  vertical-align:middle;
}
.step-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(48px,6vw,84px);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:24px;
}
.step-title i{color:var(--terra)}
.step-body{
  font-size:clamp(20px,1.8vw,26px);
  line-height:1.5;
  color:var(--ink);
  margin-bottom:32px;
  max-width:600px;
}
/* INLINE INGREDIENTS for the step */
.step-ingredients{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 24px;
  margin-bottom:24px;
  max-width:540px;
}
.step-ingredients-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ink-soft);
  font-weight:700;
  margin-bottom:10px;
}
.step-ingredients ul{list-style:none}
.step-ingredients li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
  font-size:17px;
  cursor:pointer;
}
.step-ingredients li input{
  appearance:none;
  width:24px;height:24px;
  border:2px solid var(--line-strong);
  border-radius:7px;
  cursor:pointer;
  flex-shrink:0;
  transition:all .15s;
}
.step-ingredients li input:checked{
  background:var(--sage);
  border-color:var(--sage);
}
.step-ingredients li input:checked::after{
  content:'✓';
  color:white;
  font-weight:800;
  display:grid;place-items:center;
  height:100%;
  font-size:14px;
}
.step-ingredients li input:checked + .ing-text{
  text-decoration:line-through;
  opacity:.45;
}
.ing-text strong{color:var(--terra);font-weight:600;margin-right:4px}
/* TIMER PANEL */
.timer-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  text-align:center;
  box-shadow:0 30px 60px -30px rgba(44,36,28,.2);
  width:100%;
  max-width:380px;
  justify-self:center;
}
.timer-panel.no-timer{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:24px;
}
.timer-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--ink-soft);
  font-weight:700;
  margin-bottom:14px;
}
.timer-display{
  font-family:'DM Serif Display',serif;
  font-size:96px;
  line-height:.95;
  letter-spacing:-.04em;
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.timer-display.running{color:var(--terra)}
.timer-display.paused{color:var(--mustard)}
.timer-display.done{
  color:var(--sage-deep);
  animation:pulse 1.2s ease infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
.timer-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:28px;
}
.timer-controls{
  display:flex;
  gap:10px;
  justify-content:center;
}
.timer-btn{
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:14px 28px;
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  transition:all .15s;
  min-width:110px;
}
.timer-btn:hover{transform:translateY(-1px);background:var(--terra)}
.timer-btn.start{background:var(--terra)}
.timer-btn.start:hover{background:var(--terra-deep)}
.timer-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.timer-btn.ghost:hover{background:var(--paper)}
/* TIMER PROGRESS RING (SVG) */
.timer-ring{
  position:relative;
  width:240px;height:240px;
  margin:0 auto 16px;
}
.timer-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}
.timer-ring circle{
  fill:none;
  stroke-width:6;
}
.timer-ring .bg{stroke:var(--bg-deep)}
.timer-ring .fg{
  stroke:var(--terra);
  stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke .3s;
}
.timer-ring.running .fg{stroke:var(--terra)}
.timer-ring.paused .fg{stroke:var(--mustard)}
.timer-ring.done .fg{stroke:var(--sage)}
.timer-ring .center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
/* NO-TIMER PROMPT */
.no-timer-content{
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.5;
}
.no-timer-content .ico{
  font-size:64px;
  margin-bottom:14px;
  display:block;
  opacity:.25;
}
/* BOTTOM NAV */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  height:96px;
  background:var(--paper);
  border-top:1px solid var(--line);
  z-index:40;
  padding:0 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
}
.nav-btn{
  background:var(--bg);
  border:1px solid var(--line);
  padding:14px 22px;
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .15s;
  height:64px;
}
.nav-btn:hover:not(:disabled){
  background:var(--bg-deep);
  transform:translateY(-1px);
}
.nav-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.nav-btn.next{
  background:var(--terra);
  color:white;
  border-color:var(--terra);
  padding:14px 32px;
  font-size:16px;
}
.nav-btn.next:hover:not(:disabled){background:var(--terra-deep)}
.nav-btn .arrow{font-size:18px;line-height:1}
/* STEP DOTS */
.step-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
}
.step-dot{
  background:var(--bg-deep);
  border:1px solid var(--line);
  height:10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s;
  width:10px;
  position:relative;
}
.step-dot:hover{background:var(--line-strong)}
.step-dot.active{
  width:48px;
  background:var(--terra);
  border-color:var(--terra);
}
.step-dot.done{
  background:var(--sage);
  border-color:var(--sage);
}
.step-dot.done::after{
  content:'✓';
  position:absolute;inset:0;
  color:white;
  font-size:8px;
  font-weight:800;
  display:grid;place-items:center;
}
.step-dot-label{
  position:absolute;
  bottom:100%;left:50%;
  transform:translateX(-50%);
  margin-bottom:8px;
  font-size:11px;
  background:var(--ink);
  color:var(--paper);
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}
.step-dot:hover .step-dot-label{opacity:1}
/* COMPLETION SCREEN */
.completion{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
  z-index:60;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  text-align:center;
}
.completion.show{display:flex}
.completion .badge{
  width:120px;height:120px;
  border-radius:50%;
  background:var(--terra);
  color:white;
  display:grid;place-items:center;
  font-size:56px;
  margin-bottom:32px;
  box-shadow:0 20px 60px -20px rgba(199,93,60,.5);
}
.completion h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(48px,7vw,88px);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.completion h2 i{color:var(--terra)}
.completion p{
  font-size:20px;
  color:var(--ink-soft);
  max-width:520px;
  margin-bottom:32px;
  line-height:1.5;
}
.completion-stats{
  display:flex;
  gap:32px;
  margin-bottom:40px;
  padding:24px 40px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
}
.completion-stat .v{
  font-family:'DM Serif Display',serif;
  font-size:32px;
  line-height:1;
}
.completion-stat .l{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-soft);
  margin-top:4px;
  font-weight:600;
}
.completion-rate{margin-bottom:32px}
.completion-rate .label{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.rate-stars{
  display:flex;
  gap:10px;
  justify-content:center;
}
.rate-stars button{
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:36px;
  color:var(--bg-deep);
  transition:all .15s;
  padding:6px;
}
.rate-stars button:hover,.rate-stars button.active{color:var(--mustard);transform:scale(1.1)}
.completion-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.completion-actions a{
  padding:14px 28px;
  border-radius:14px;
  text-decoration:none;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  transition:all .15s;
}
.completion-actions .primary{
  background:var(--terra);
  color:white;
}
.completion-actions .primary:hover{background:var(--terra-deep)}
.completion-actions .ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.completion-actions .ghost:hover{background:var(--paper)}
/* CONFETTI dots animated */
@keyframes drop{
  0%{transform:translateY(-20px) rotate(0);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}
.confetti{
  position:absolute;
  width:10px;height:10px;
  pointer-events:none;
  animation:drop linear infinite;
}
/* TIMER ALERT (when timer ends) */
.timer-alert{
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%) translateY(-200%);
  background:var(--sage);
  color:white;
  padding:16px 28px;
  border-radius:14px;
  box-shadow:0 20px 40px -10px rgba(125,140,106,.5);
  z-index:55;
  transition:transform .4s cubic-bezier(.5,1.5,.5,1);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:16px;
}
.timer-alert.show{transform:translateX(-50%) translateY(0)}
.timer-alert .ico{
  width:36px;height:36px;
  background:rgba(255,255,255,.25);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:18px;
}
.timer-alert .dismiss{
  background:rgba(255,255,255,.2);
  border:none;
  color:white;
  width:28px;height:28px;
  border-radius:50%;
  cursor:pointer;
  margin-left:8px;
  font-size:14px;
}
/* RESPONSIVE */
@media (max-width:900px){
  .step-card{
    grid-template-columns:1fr;
    padding:24px;
    gap:24px;
    align-items:flex-start;
    overflow-y:auto;
  }
  .step-content{padding-top:0;max-height:none}
  .timer-panel{padding:24px;max-width:100%}
  .timer-display{font-size:64px}
  .timer-ring{width:180px;height:180px}
  .step-title{font-size:42px}
  .step-body{font-size:18px}
  .topbar{padding:0 16px}
  .recipe-name h1{font-size:15px}
  .bottom-nav{padding:0 16px;gap:12px}
  .nav-btn{padding:12px 16px;font-size:14px;height:56px}
  .nav-btn.next{padding:12px 22px}
  .step-counter{display:none}
}
@media (max-width:600px){
  .top-controls .control-btn:nth-child(2){display:none}
  .step-dot:not(.active){width:8px;height:8px}
  .step-dot.active{width:32px}
}
/* SWIPE INDICATOR */
.swipe-hint{
  position:fixed;
  bottom:110px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(44,36,28,.85);
  color:white;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  z-index:30;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.swipe-hint.show{opacity:1}