:root{
  /* Korean-inspired, quiet, paper-like */
  --bg: #F6F1E8;          /* warm off-white */
  --surface: #F0E9DD;     /* barely darker */
  --ink: #2C2B28;         /* soft charcoal */
  --muted: #6C6A64;       /* desaturated gray */
  --line: rgba(44,43,40,.12);
  --accent: #7C6A4F;      /* muted earthy */
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 18px;         /* organic, not too round */
  --pad: 28px;
  --max: 520px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 900px at 20% 10%, rgba(124,106,79,.09), transparent 60%),
              radial-gradient(900px 700px at 80% 30%, rgba(0,0,0,.05), transparent 55%),
              var(--bg);
  color: var(--ink);
  letter-spacing: .1px;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 42px 18px;
}

.card{
  width: min(100%, var(--max));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(240,233,221,.62);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
  position: relative;
  overflow:hidden;
}

.hairline{
  height:1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 18px 0;
}

.brand{
  font-weight: 550;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(44,43,40,.75);
  margin-bottom: 10px;
  user-select:none;
}

h1{
  margin: 0;
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 560;
  letter-spacing: .02em;
}

.sub{
  margin-top: 12px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 42ch;
}

.actions{
  margin-top: 26px;
  display:flex;
  gap: 12px;
  align-items:center;
}

button{
  appearance:none;
  border:1px solid var(--line);
  background: rgba(246,241,232,.7);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1;
  cursor:pointer;
  transition: transform .15s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .3s var(--ease);
  user-select:none;
}
button:hover{ background: rgba(246,241,232,.92); }
button:active{ transform: scale(.98); }
button.primary{
  border-color: rgba(124,106,79,.28);
  background: rgba(124,106,79,.12);
}
button.primary:hover{ background: rgba(124,106,79,.16); }

.quiet{
  color: rgba(44,43,40,.55);
  font-size: 12.5px;
  margin-top: 16px;
  line-height: 1.5;
}

/* Language toggle */
.lang-toggle{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
  border-radius: 4px;
  transition: color .2s var(--ease);
}
.lang-toggle:hover{
  background: transparent;
  color: var(--ink);
}
.lang-toggle:active{
  transform: none;
}

/* Screens */
.screen{
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hidden{
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  position:absolute;
  inset: 0;
  padding: clamp(22px, 4vw, 36px);
}

.promptline{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(44,43,40,.82);
  max-width: 44ch;
}

.micro{
  margin-top: 22px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.dish{
  margin-top: 26px;
  padding: 18px 18px;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(246,241,232,.55);
  border: 1px solid var(--line);
}
.dish h2{
  margin: 0;
  font-size: 20px;
  font-weight: 560;
  letter-spacing: .01em;
}
.dish p{
  margin: 10px 0 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14.5px;
  max-width: 52ch;
}

.footer-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.linkbtn{
  background: transparent;
  border-color: transparent;
  color: rgba(44,43,40,.72);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 8px;
}
.linkbtn:hover{ color: rgba(44,43,40,.9); background: transparent; }
.linkbtn:active{ transform:none; }

/* Gentle grain (subtle) */
.grain{
  pointer-events:none;
  position:absolute;
  inset:-40%;
  opacity:.08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  transform: rotate(2deg);
  mix-blend-mode: multiply;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .screen, button{ transition:none !important; }
}

/* -----------------------------------------------------------------------------
   Weather opt-in
   ----------------------------------------------------------------------------- */

.weather-optin{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.weather-link{
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(44,43,40,.45);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.weather-link:hover{
  background: transparent;
  color: rgba(44,43,40,.65);
}

.weather-link:active{
  transform: none;
}

.weather-link.weather-active{
  color: rgba(44,43,40,.55);
  cursor: default;
}

.weather-link.weather-active:hover{
  color: rgba(44,43,40,.55);
}

.weather-link.weather-unavailable{
  color: rgba(44,43,40,.35);
  cursor: default;
}

.weather-link.weather-unavailable:hover{
  color: rgba(44,43,40,.35);
}

/* -----------------------------------------------------------------------------
   Recipe View
   ----------------------------------------------------------------------------- */

.recipe-image-wrap{
  margin: -4px -4px 20px -4px;
  overflow: hidden;
  border-radius: calc(var(--radius) - 6px);
}

.recipe-image{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.recipe-header{
  margin-bottom: 20px;
}

.recipe-header h2{
  margin: 0;
  font-size: 18px;
  font-weight: 540;
  letter-spacing: .01em;
  color: var(--ink);
}

.recipe-why{
  margin: 8px 0 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.recipe-modes{
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.mode-btn{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease);
}

.mode-btn:hover{
  background: transparent;
  color: var(--ink);
}

.mode-btn.active{
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: -13px;
}

.mode-btn:active{
  transform: none;
}

.recipe-content{
  min-height: 100px;
}

.recipe-list{
  margin: 0;
  padding: 0 0 0 18px;
  line-height: 1.75;
  font-size: 14px;
  color: rgba(44,43,40,.85);
}

.recipe-ingredients{
  list-style: none;
  padding-left: 0;
  margin-bottom: 18px;
}

.recipe-ingredients li{
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}

.recipe-ingredients li::before{
  content: "·";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.recipe-steps{
  padding-left: 20px;
  margin-bottom: 0;
}

.recipe-steps li{
  padding-left: 4px;
  margin-bottom: 8px;
}

.recipe-steps li::marker{
  color: var(--muted);
  font-size: 12px;
}

.recipe-soul{
  padding: 0;
}

.recipe-soul p{
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(44,43,40,.78);
  font-style: italic;
}

.recipe-soul p:last-child{
  margin-bottom: 0;
}

.recipe-footer{
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.recipe-empty{
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* -----------------------------------------------------------------------------
   Ingredient Reality
   ----------------------------------------------------------------------------- */

.ingredient-reality{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ingredient-reality.hidden{
  display: none;
  position: static;
  opacity: 1;
  transform: none;
  padding: 0;
  margin: 0;
  border: none;
}

.ingredient-prompt{
  margin: 0 0 10px 0;
  font-size: 12px;
  color: rgba(44,43,40,.5);
}

.ingredient-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ingredient-link{
  background: transparent;
  border: none;
  padding: 2px 0;
  font-size: 12px;
  color: rgba(44,43,40,.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.ingredient-link:hover{
  background: transparent;
  color: rgba(44,43,40,.75);
}

.ingredient-link:active{
  transform: none;
}

.ingredient-link:disabled{
  color: rgba(44,43,40,.35);
  cursor: default;
  text-decoration: none;
}

.ingredient-link:disabled:hover{
  color: rgba(44,43,40,.35);
}

/* -----------------------------------------------------------------------------
   Feedback
   ----------------------------------------------------------------------------- */

.feedback-section{
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.feedback-question{
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--muted);
}

.feedback-options{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feedback-btn{
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: rgba(44,43,40,.72);
  cursor: pointer;
}

.feedback-btn:hover{
  background: rgba(246,241,232,.5);
  color: var(--ink);
}

.feedback-btn:active{
  transform: scale(.98);
}

.feedback-btn:disabled{
  cursor: default;
}

.feedback-btn:disabled:hover{
  background: transparent;
  color: rgba(44,43,40,.72);
}

/* After feedback given */
.feedback-section.feedback-given{
  opacity: 0.45;
  pointer-events: none;
}