:root{
  --sand:#DDC7AF;
  --sand-pale:#F5EEE6;
  --sand-line:rgba(150,112,81,0.20);
  --coffee:#967051;
  --coffee-deep:#7A5A40;
  --ink:#3A2C1F;
  --ink-soft:#7A6A5A;
  --card:#FFFCF9;
  --warn-bg:#FFF8EE;
  --warn-border:#E8C87A;
  --warn-text:#7A5A20;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100vh;}
body{
  background:var(--sand-pale);
  background-image:
    radial-gradient(circle at 10% 6%, rgba(150,112,81,0.10), transparent 40%),
    radial-gradient(circle at 92% 96%, rgba(221,199,175,0.55), transparent 50%);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:26px 16px 56px;
  -webkit-font-smoothing:antialiased;
}
.app{width:100%;max-width:460px;}

/* ---- BRAND ---- */
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:10px;}
.brand img{height:28px;width:auto;margin-bottom:7px;}
.brand-name{
  font-family:'Bodoni Moda',serif;
  font-weight:600;font-size:11.5px;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--coffee-deep);
}
.intro{
  text-align:center;font-size:13px;line-height:1.55;
  color:var(--ink-soft);max-width:340px;
  margin:0 auto 16px;
}

/* ---- PROGRESS ---- */
.progress-row{display:flex;gap:7px;justify-content:center;margin:12px 0 22px;}
.dot{height:5px;width:5px;border-radius:50%;background:var(--sand-line);transition:all .35s ease;}
.dot.active{background:var(--coffee);width:20px;border-radius:3px;}
.dot.done{background:var(--coffee-deep);}

/* ---- QUESTION CARD ---- */
.card{
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--sand-line);
  box-shadow:0 1px 2px rgba(58,44,31,.04),0 18px 40px -22px rgba(58,44,31,.22);
  padding:30px 24px 24px;
  display:flex;flex-direction:column;
  animation:rise .42s cubic-bezier(.19,1,.22,1);
}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.card{animation:none;}}

.eyebrow{
  font-size:11px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--coffee);margin-bottom:9px;
}
h1.q{
  font-family:'Bodoni Moda',serif;
  font-weight:500;font-size:25px;line-height:1.22;
  letter-spacing:-0.005em;color:var(--ink);margin-bottom:7px;
}
p.sub{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:22px;}

/* ---- OPTIONS ---- */
.options{display:flex;flex-direction:column;gap:9px;}
.opt{
  text-align:left;background:var(--sand-pale);
  border:1.5px solid var(--sand-line);border-radius:13px;
  padding:13px 15px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14.5px;font-weight:700;color:var(--ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:border-color .18s,background .18s,transform .12s;
}
.opt:hover{border-color:var(--coffee);background:#FBF5EE;}
.opt:active{transform:scale(0.985);}
.opt .arr{opacity:0;transform:translateX(-4px);transition:all .18s;color:var(--coffee-deep);font-size:15px;}
.opt:hover .arr{opacity:1;transform:translateX(0);}
.opt .sup{display:block;font-size:11.5px;font-weight:400;color:var(--ink-soft);margin-top:3px;}

.back-row{display:flex;justify-content:flex-start;margin-top:16px;min-height:18px;}
.back-btn{
  background:none;border:none;
  font-family:Arial,sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;padding:0;
  display:flex;align-items:center;gap:4px;
}
.back-btn:hover{color:var(--ink);}

/* ---- WARNING ---- */
.warning{
  background:var(--warn-bg);border:1.5px solid var(--warn-border);
  border-radius:14px;padding:14px 16px;
  margin-bottom:18px;
}
.warning .w-icon{font-size:18px;margin-bottom:5px;display:block;}
.warning .w-title{
  font-size:12px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--warn-text);margin-bottom:5px;
}
.warning .w-body{font-size:13px;color:var(--warn-text);line-height:1.5;}

/* ---- RESULT ---- */
.result-card{
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--sand-line);
  box-shadow:0 1px 2px rgba(58,44,31,.04),0 18px 40px -22px rgba(58,44,31,.22);
  overflow:hidden;
  animation:rise .5s cubic-bezier(.19,1,.22,1);
}
.swatch{
  height:160px;position:relative;
  display:flex;align-items:flex-end;padding:18px 22px;overflow:hidden;
}
.swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,0.34) 100%);
}
.swatch-label{position:relative;z-index:1;color:#fff;}
.swatch-label .tag{
  font-size:10.5px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;opacity:.9;margin-bottom:3px;display:block;
}
.swatch-label h2{
  font-family:'Bodoni Moda',serif;
  font-weight:600;font-size:28px;margin:0;letter-spacing:-0.01em;
}

.result-body{padding:20px 24px 24px;}

.code-stamp{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ink);border-radius:13px;
  padding:13px 17px;margin-bottom:16px;
}
.code-stamp-label{
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--sand);opacity:.85;
}
.code-stamp-value{
  font-family:'Bodoni Moda',serif;
  font-size:19px;font-weight:700;color:#fff;
}

.result-desc{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-bottom:16px;}

.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;}
.meta-box{
  background:var(--sand-pale);border-radius:11px;
  padding:11px 13px;border:1px solid var(--sand-line);
}
.meta-box .k{
  font-size:9.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--coffee);display:block;margin-bottom:3px;
}
.meta-box .v{font-size:13px;font-weight:700;color:var(--ink);}

.intensity-row{margin-bottom:16px;}
.intensity-row .k{
  font-size:9.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--coffee);display:block;margin-bottom:7px;
}
.intensity-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sand-pale);border:1.5px solid var(--coffee);
  border-radius:999px;padding:7px 15px;
  font-weight:700;font-size:13px;
}
.lvl-dots{display:flex;gap:3px;}
.lvl-dot{width:5px;height:5px;border-radius:50%;background:var(--sand-line);}
.lvl-dot.on{background:var(--coffee-deep);}

.rinse-note{
  font-size:12px;color:var(--ink-soft);
  background:var(--sand);border-radius:9px;
  padding:9px 12px;margin-bottom:18px;line-height:1.5;
}
.rinse-note b{color:var(--ink);}

.restart{
  display:block;width:100%;text-align:center;
  background:none;border:none;
  color:var(--ink-soft);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:5px;
}
.restart:hover{color:var(--ink);}

footer{
  text-align:center;margin-top:18px;
  font-size:11px;color:var(--ink-soft);opacity:.7;letter-spacing:0.02em;
}