.kss-wrap {
  --kss-bg: #EFF3EE;
  --kss-card: #FFFFFF;
  --kss-ink: #1C2620;
  --kss-celadon: #7C9A82;
  --kss-celadon-deep: #5E7C67;
  --kss-clay: #E3A88F;
  --kss-slate: #6B756F;
  --kss-line: #D9E0DA;
  --kss-font-display: 'Instrument Serif', Georgia, serif;
  --kss-font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --kss-font-mono: 'IBM Plex Mono', monospace;

  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  background: var(--kss-bg);
  color: var(--kss-ink);
  font-family: var(--kss-font-body);
  border-radius: 20px;
  box-sizing: border-box;
}
.kss-wrap *{ box-sizing: border-box; }

.kss-view{ display:none; }
.kss-view-active{ display:block; }

.kss-header{ text-align:center; margin-bottom:24px; }
.kss-eyebrow{
  font-family: var(--kss-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kss-celadon-deep);
  margin-bottom: 8px;
}
.kss-h1{
  font-family: var(--kss-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 8px;
}
.kss-sub{
  font-size: 14px;
  color: var(--kss-slate);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}

/* consent */
.kss-consent-box{
  max-width: 420px; margin: 0 auto; background:var(--kss-card);
  border:1px solid var(--kss-line); border-radius:14px; padding:20px 22px;
}
.kss-consent-list{ margin:0 0 16px; padding-left:18px; }
.kss-consent-list li{ font-size:13.5px; line-height:1.55; color:var(--kss-ink); margin-bottom:8px; }
.kss-consent-list li:last-child{ margin-bottom:0; }
.kss-consent-check{
  display:flex; align-items:flex-start; gap:10px; font-size:13px;
  color:var(--kss-ink); line-height:1.4; cursor:pointer;
  border-top:1px solid var(--kss-line); padding-top:14px;
}
.kss-consent-check input{ margin-top:2px; width:16px; height:16px; accent-color: var(--kss-celadon-deep); flex:0 0 auto; }

/* scan line */
.kss-scan-line{
  position:absolute; left:6%; right:6%; height:2px; top:2%;
  background: linear-gradient(90deg, transparent, #E2554D 20%, #E2554D 80%, transparent);
  box-shadow: 0 0 10px 2px rgba(226,85,77,0.65);
  opacity:0; pointer-events:none;
}
#kss-mirror-body.kss-scanning .kss-scan-line{
  opacity:1;
  animation: kss-scan-move 1.6s ease-in-out;
}
#kss-mirror-body.kss-scanning{
  box-shadow: 0 0 0 1px var(--kss-line), 0 0 0 3px rgba(226,85,77,0.18);
}
@keyframes kss-scan-move{
  0%{ top:3%; }
  50%{ top:94%; }
  100%{ top:94%; }
}

/* mirror — óvalo tipo rostro */
.kss-mirror{ position:relative; width:196px; height:262px; margin:24px auto; }
.kss-mirror-rim{ position:absolute; inset:-12px; border:1px solid var(--kss-line); border-radius:50% / 42%; }
.kss-mirror-body{
  width:100%; height:100%; border-radius:50% / 42%; overflow:hidden;
  background:#DCE4DD; border:3px solid var(--kss-card);
  box-shadow: 0 0 0 1px var(--kss-line);
  position:relative;
}
.kss-mirror-body video{
  width:100%; height:100%; object-fit:cover;
  transform: scaleX(-1); display:block;
}

.kss-field{ max-width:320px; margin:0 auto 8px; }
.kss-field label{
  display:block; font-size:12.5px; color:var(--kss-slate); margin-bottom:6px;
}
.kss-field input{
  width:100%; padding:11px 14px; border:1px solid var(--kss-line);
  border-radius:10px; font-family:var(--kss-font-body); font-size:14px;
  background:var(--kss-card); color:var(--kss-ink);
}
.kss-field input:focus{ outline:2px solid var(--kss-celadon-deep); outline-offset:1px; }

.kss-capture-row{ display:flex; justify-content:center; margin-top:18px; }

.kss-btn{
  font-family: var(--kss-font-body);
  font-size: 14px; font-weight: 500; border:none; cursor:pointer;
  border-radius: 999px; padding: 13px 28px;
  transition: transform 120ms ease, background 120ms ease;
}
.kss-btn:focus-visible{ outline:2px solid var(--kss-celadon-deep); outline-offset:3px; }
.kss-btn-primary{ background: var(--kss-celadon); color:#fff; }
.kss-btn-primary:hover{ background: var(--kss-celadon-deep); }
.kss-btn-primary:active{ transform: scale(0.97); }
.kss-btn-ghost{ background:transparent; color:var(--kss-celadon-deep); border:1px solid var(--kss-line); }
.kss-btn-ghost:hover{ border-color: var(--kss-celadon); }

.kss-secondary-row{ display:flex; justify-content:center; margin-top:10px; }
.kss-link-btn{
  background:none; border:none; cursor:pointer; padding:6px;
  font-family: var(--kss-font-body); font-size:13px;
  color:var(--kss-slate); text-decoration:underline;
}
.kss-link-btn:hover{ color:var(--kss-celadon-deep); }

.kss-status-line{
  text-align:center; font-family:var(--kss-font-mono); font-size:12px;
  color:var(--kss-slate); margin-top:14px; min-height:16px;
}

/* loading */
#kss-loading-view{ text-align:center; padding: 20px 0; }
.kss-pulse-ring{
  width:220px; height:220px; margin:0 auto; border-radius:50%;
  border:3px solid var(--kss-line); border-top-color: var(--kss-celadon);
  position:relative;
}
@media (prefers-reduced-motion: no-preference){
  .kss-pulse-ring{ animation: kss-spin 1.1s linear infinite; }
}
@keyframes kss-spin{ to{ transform: rotate(360deg);} }
.kss-loading-copy{
  font-family:var(--kss-font-mono); font-size:12px; color:var(--kss-slate);
  margin-top:20px; letter-spacing:0.04em;
}

/* results */
.kss-demo-tag{
  text-align:center; font-family:var(--kss-font-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--kss-clay);
  margin-bottom:14px;
}
.kss-gauge-wrap{ position:relative; width:220px; height:220px; margin:0 auto; }
.kss-gauge-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.kss-gauge-score{ font-family:var(--kss-font-mono); font-size:34px; font-weight:500; color:var(--kss-ink); }
.kss-gauge-score span{ font-size:14px; color:var(--kss-slate); }
.kss-gauge-type{
  font-family:var(--kss-font-body); font-size:12.5px; color:var(--kss-celadon-deep);
  margin-top:4px; text-transform:capitalize;
}

.kss-summary{
  text-align:center; font-size:15px; line-height:1.55; color:var(--kss-ink);
  max-width:420px; margin:22px auto 0;
}

.kss-section-label{
  font-family:var(--kss-font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--kss-slate); margin:38px 0 14px;
  display:flex; align-items:center; gap:10px;
}
.kss-section-label::after{ content:""; flex:1; height:1px; background:var(--kss-line); }

.kss-metric{ margin-bottom:16px; }
.kss-metric-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.kss-metric-name{ font-size:14px; font-weight:500; }
.kss-metric-score{ font-family:var(--kss-font-mono); font-size:12.5px; color:var(--kss-slate); }
.kss-metric-bar-track{ height:5px; background:var(--kss-line); border-radius:3px; overflow:hidden; }
.kss-metric-bar-fill{ height:100%; background:var(--kss-celadon); border-radius:3px; }
.kss-metric-note{ font-size:12.5px; color:var(--kss-slate); margin-top:6px; line-height:1.4; }

.kss-routine-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.kss-routine-card{
  flex:0 0 auto; width:200px; background:var(--kss-card);
  border:1px solid var(--kss-line); border-radius:14px; padding:16px;
}
.kss-routine-step{ font-family:var(--kss-font-display); font-style:italic; font-size:20px; margin:0 0 6px; }
.kss-routine-when{
  display:inline-block; font-family:var(--kss-font-mono); font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--kss-celadon-deep);
  background:#EAF0EA; border-radius:999px; padding:3px 9px; margin-bottom:8px;
}
.kss-routine-amount{ font-size:12.5px; font-weight:600; color:var(--kss-clay); margin-bottom:6px; }
.kss-routine-why{ font-size:12.5px; color:var(--kss-slate); line-height:1.45; }

.kss-routine-product{
  display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--kss-line);
  text-decoration:none; color:inherit;
}
.kss-routine-product-img{
  width:100%; height:90px; border-radius:8px; background-color:var(--kss-line);
  background-size:cover; background-position:center; margin-bottom:8px;
}
.kss-routine-product-brand{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--kss-slate); }
.kss-routine-product-name{ font-size:13px; font-weight:500; margin:2px 0; }
.kss-routine-product-price{ font-family:var(--kss-font-mono); font-size:12.5px; color:var(--kss-celadon-deep); }
.kss-routine-product-empty{ font-size:12px; color:var(--kss-slate); margin-top:14px; padding-top:14px; border-top:1px solid var(--kss-line); }

@media (min-width: 640px) {
  .kss-wrap{ padding:44px 40px 60px; }
}