/* Dysnomia Cosmétique — Skin Analyzer.
   Mobile-first, RTL-safe (logical props), light/dark via inherited :root vars.
   Accent = brand turquoise (--color-primary). */

.skin{width:min(920px,94%);margin-inline:auto;padding-block:2rem 4rem}
.skin-screen{animation:skin-fade .4s ease both}
@keyframes skin-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.skin-screen{animation:none}}

.skin-kicker{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-primary);font-weight:700;margin-bottom:.6rem}

/* ---------- Intro ---------- */
.skin-intro{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media (min-width:760px){.skin-intro{grid-template-columns:1.3fr .7fr}}
.skin-intro__card{background:var(--color-surface);border-radius:calc(var(--radius) * 1.4);
  padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--color-primary) 40%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 12%,transparent)}
.skin-intro__title{font-size:clamp(1.5rem,4.5vw,2.3rem)}
.skin-intro__text{color:color-mix(in srgb,var(--color-text) 74%,transparent);font-size:1.05rem}
.skin-intro__meta{list-style:none;padding:0;margin:.4rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;
  font-size:.92rem;color:color-mix(in srgb,var(--color-text) 66%,transparent)}
.skin-intro__start{font-size:1.05rem;padding-inline:2rem}
.skin-orb{aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--color-primary) 70%,#fff),
    var(--color-primary) 55%,color-mix(in srgb,var(--color-primary) 60%,#000) 100%);
  box-shadow:0 30px 70px -20px var(--color-primary);animation:skin-float 6s ease-in-out infinite}
@keyframes skin-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.skin-orb{animation:none}}
.skin-disclaimer{font-size:.8rem;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin-top:1.2rem;line-height:1.5}
.skin-disclaimer--intro{margin-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);padding-top:1rem}

/* ---------- Progress + steps ---------- */
.skin-progress{height:8px;border-radius:99px;background:color-mix(in srgb,var(--color-text) 12%,transparent);overflow:hidden;margin-bottom:.6rem}
.skin-progress__bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 70%,#fff),var(--color-primary));
  transition:width .4s cubic-bezier(.4,0,.2,1)}
.skin-stepno{font-size:.82rem;letter-spacing:.05em;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin:0 0 1.2rem}

.skin-qcard{background:var(--color-surface);border-radius:calc(var(--radius) * 1.3);
  padding:clamp(1.2rem,3.5vw,2rem);border:1px solid color-mix(in srgb,var(--color-primary) 10%,transparent);
  box-shadow:0 18px 44px -30px color-mix(in srgb,var(--color-primary) 50%,transparent)}
.skin-qcard__prompt{font-size:clamp(1.15rem,3vw,1.5rem);margin-bottom:.4rem}
.skin-qcard__help{color:color-mix(in srgb,var(--color-text) 62%,transparent);font-size:.92rem;margin-bottom:1.2rem}
.skin-multi-hint{font-size:.82rem;color:var(--color-primary);margin:0 0 .8rem}

.skin-options{display:grid;gap:.7rem}
@media (min-width:560px){.skin-options{grid-template-columns:1fr 1fr}}
.skin-opt{display:flex;align-items:center;gap:.7rem;text-align:start;width:100%;
  padding:.9rem 1.1rem;border-radius:var(--radius);cursor:pointer;font:inherit;color:var(--color-text);
  background:color-mix(in srgb,var(--color-text) 4%,transparent);
  border:1.5px solid color-mix(in srgb,var(--color-text) 12%,transparent);
  transition:border-color .18s,background .18s,transform .12s}
.skin-opt:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);transform:translateY(-2px)}
.skin-opt__tick{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;font-size:.75rem;color:#fff;
  background:transparent;border:2px solid color-mix(in srgb,var(--color-text) 25%,transparent);flex:0 0 auto;transition:all .18s}
.skin-opt__label{font-weight:500;line-height:1.3}
.skin-opt.is-selected{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent)}
.skin-opt.is-selected .skin-opt__tick{background:var(--color-primary);border-color:var(--color-primary)}

.skin-hint{color:#c0392b;font-size:.9rem;margin:.9rem 0 0;font-weight:600}
[data-theme="dark"] .skin-hint{color:#ff8a80}

.skin-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.skin-nav .btn{min-width:120px;justify-content:center}

/* ---------- Photo ---------- */
.skin-photo{display:flex;flex-direction:column;align-items:center;gap:1rem}
.skin-photo__preview{position:relative;inline-size:170px;block-size:170px;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--color-primary) 10%,transparent);display:grid;place-items:center;
  border:2px dashed color-mix(in srgb,var(--color-primary) 40%,transparent)}
.skin-photo__img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.skin-photo__placeholder{font-size:3rem;opacity:.5}
.skin-photo__actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.skin-photo__note{font-size:.82rem;color:color-mix(in srgb,var(--color-text) 60%,transparent);text-align:center;max-width:46ch}

/* ---------- Loading ---------- */
.skin-loading{text-align:center;padding-block:3rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.skin-loading__spinner{inline-size:64px;block-size:64px;border-radius:50%;
  border:5px solid color-mix(in srgb,var(--color-primary) 18%,transparent);border-top-color:var(--color-primary);
  animation:skin-spin 1s linear infinite}
@keyframes skin-spin{to{transform:rotate(360deg)}}
.skin-loading__steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;text-align:start}
.skin-loading__step{position:relative;padding-inline-start:1.8rem;color:color-mix(in srgb,var(--color-text) 45%,transparent);
  transition:color .3s}
.skin-loading__step::before{content:"◌";position:absolute;inset-inline-start:0}
.skin-loading__step.is-done{color:var(--color-text)}
.skin-loading__step.is-done::before{content:"✓";color:var(--color-primary);font-weight:700}

/* ---------- Result ---------- */
.skin-type{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 14%,var(--color-surface)),var(--color-surface));
  border-radius:calc(var(--radius) * 1.4);padding:clamp(1.4rem,4vw,2.4rem);text-align:center;
  border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);margin-bottom:1.4rem}
.skin-type__label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);font-weight:700}
.skin-type__name{font-size:clamp(1.6rem,5vw,2.4rem);margin:.3rem 0 .5rem}
.skin-type__desc{color:color-mix(in srgb,var(--color-text) 74%,transparent);max-width:60ch;margin-inline:auto}

.skin-warn{background:color-mix(in srgb,#e6a817 16%,var(--color-surface));border:1px solid color-mix(in srgb,#e6a817 40%,transparent);
  color:var(--color-text);padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:.8rem;font-size:.92rem}

.skin-sec{margin-top:2rem}
.skin-sec__title{font-size:1.25rem;margin-bottom:1rem;position:relative;padding-inline-start:.8rem}
.skin-sec__title::before{content:"";position:absolute;inset-inline-start:0;top:.15em;bottom:.15em;inline-size:4px;border-radius:4px;background:var(--color-primary)}

.skin-ind-grid{display:grid;gap:1rem}
@media (min-width:620px){.skin-ind-grid{grid-template-columns:1fr 1fr;gap:1rem 2rem}}
.skin-ind__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.skin-ind__label{font-weight:600;font-size:.95rem}
.skin-ind__level{font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:99px}
.skin-ind__level--low{background:color-mix(in srgb,#3fb27f 22%,transparent);color:#1f7a52}
.skin-ind__level--medium{background:color-mix(in srgb,#e6a817 22%,transparent);color:#9a6b00}
.skin-ind__level--high{background:color-mix(in srgb,#e0574f 22%,transparent);color:#b02c24}
[data-theme="dark"] .skin-ind__level--low{color:#7fe0b3}
[data-theme="dark"] .skin-ind__level--medium{color:#ffce6b}
[data-theme="dark"] .skin-ind__level--high{color:#ff9a92}
.skin-ind__track{height:8px;border-radius:99px;background:color-mix(in srgb,var(--color-text) 12%,transparent);overflow:hidden}
.skin-ind__fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.skin-ind__fill--low{background:#3fb27f}.skin-ind__fill--medium{background:#e6a817}.skin-ind__fill--high{background:#e0574f}

.skin-needs{display:grid;gap:.8rem}
.skin-need{display:flex;gap:1rem;align-items:flex-start;background:var(--color-surface);border-radius:var(--radius);
  padding:1rem 1.2rem;border:1px solid color-mix(in srgb,var(--color-primary) 10%,transparent)}
.skin-need__no{flex:0 0 auto;inline-size:30px;block-size:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary);color:#fff;font-weight:700}
.skin-need__name{font-size:1.02rem;margin:.1rem 0 .2rem}
.skin-need__desc{margin:0;font-size:.9rem;color:color-mix(in srgb,var(--color-text) 66%,transparent)}

.skin-routine{display:grid;gap:1rem}
@media (min-width:720px){.skin-routine{grid-template-columns:repeat(3,1fr)}}
.skin-routine__col{background:var(--color-surface);border-radius:var(--radius);padding:1.1rem 1.2rem;
  border:1px solid color-mix(in srgb,var(--color-primary) 10%,transparent)}
.skin-routine__title{font-size:1rem;color:var(--color-primary);margin-bottom:.7rem}
.skin-routine__list{margin:0;padding-inline-start:1.1rem;display:flex;flex-direction:column;gap:.45rem;font-size:.92rem}

.skin-prod-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.skin-prod-grid{grid-template-columns:1fr 1fr}}
.skin-prod{background:var(--color-surface);border-radius:var(--radius);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--color-primary) 12%,transparent);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .2s}
.skin-prod:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px var(--color-primary)}
.skin-prod__media{position:relative;display:block;aspect-ratio:1;background:color-mix(in srgb,var(--color-text) 6%,transparent)}
.skin-prod__media img{inline-size:100%;block-size:100%;object-fit:cover}
.skin-prod__match{position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;background:var(--color-primary);color:#fff;
  font-weight:700;font-size:.85rem;padding:.3rem .6rem;border-radius:99px;box-shadow:0 6px 16px -6px var(--color-primary)}
.skin-prod__body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.skin-prod__compat{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--color-primary);text-transform:uppercase}
.skin-prod__name{font-weight:600;font-size:1.02rem;color:var(--color-text)}
.skin-prod__name:hover{color:var(--color-primary)}
.skin-prod__reason{margin:0;font-size:.86rem;color:color-mix(in srgb,var(--color-text) 66%,transparent);flex:1}
.skin-prod__price{font-weight:700;color:var(--color-primary)}
.skin-prod__actions{display:flex;gap:.5rem;margin-top:.4rem}
.skin-prod__actions .btn{flex:1;justify-content:center}
.btn--sm{padding:.5rem .8rem;font-size:.85rem}

.skin-retake{display:block;margin:2rem auto 0}

/* ---------- Toast ---------- */
.skin-toast{position:fixed;inset-block-end:1.4rem;inset-inline:0;margin-inline:auto;width:max-content;max-width:90%;
  background:var(--color-text);color:var(--color-bg);padding:.7rem 1.2rem;border-radius:99px;font-weight:600;font-size:.9rem;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;z-index:1000}
.skin-toast.is-in{opacity:1;transform:none}
.skin-toast--success{background:#2e9c6b;color:#fff}
.skin-toast--error{background:#d0453c;color:#fff}

/* Analysis error / recovery box */
.skin-errbox{max-width:520px;margin:1rem auto;text-align:center;background:var(--color-surface);
  border:1px solid color-mix(in srgb,#d0453c 40%,transparent);border-radius:var(--radius);padding:1.6rem}
.skin-errbox__msg{color:var(--color-text);font-weight:600;margin-bottom:1rem;line-height:1.6}