
.smartbr-mirror-demo{--smd-ink:#07131f;--smd-green:#00a859;--smd-yellow:#ffcc29;--smd-muted:#667789;background:linear-gradient(160deg,#f8fbfc,#e9f4ee);padding:82px 18px;color:var(--smd-ink);font-family:Inter,Arial,sans-serif}
.smd-wrap{max-width:1180px;margin:auto}
.smd-heading{display:flex;justify-content:space-between;gap:25px;align-items:flex-start;margin-bottom:30px}
.smd-eyebrow{color:var(--smd-green);font-size:12px;font-weight:900;letter-spacing:.14em}
.smd-heading h2{margin:10px 0;font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-.06em}
.smd-heading p{max-width:700px;color:var(--smd-muted);font-size:17px}
.smd-online{margin-top:8px;padding:10px 13px;border-radius:999px;background:#e3faec;color:#087d43;font-size:12px;font-weight:900;white-space:nowrap}
.smd-online i,.smd-live-pill::before{display:inline-block;width:8px;height:8px;border-radius:50%;background:#00c95a;margin-right:8px;content:"";box-shadow:0 0 0 5px rgba(0,201,90,.12)}
.smd-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:22px}
.smd-camera-card,.smd-choice-card,.smd-result{background:#fff;border:1px solid rgba(9,30,48,.09);box-shadow:0 20px 60px rgba(9,30,48,.10);border-radius:30px}
.smd-camera-card{padding:18px}
.smd-stage{min-height:500px;position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 20%,#355874,#0b1622 74%)}
.smd-stage video,.smd-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smd-stage video{z-index:1;display:none;background:#0b1622;transform:scaleX(-1)}
.smd-stage img{z-index:2}
.smd-placeholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;padding:24px;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(4,17,27,.28),rgba(4,17,27,.14));z-index:3}
.smd-camera-icon{font-size:42px;line-height:1}
.smd-placeholder b{font-size:22px}
.smd-placeholder span{color:rgba(255,255,255,.74);max-width:260px}
.smd-live-pill{position:absolute;left:16px;top:16px;z-index:4;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a7e43;font-size:12px;font-weight:900}
.smd-captured{position:absolute;right:16px;top:16px;z-index:4;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#07131f;font-size:12px;font-weight:900}
.smd-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.smd-btn,.smd-file-btn,.smd-generate,.smd-reset{min-height:52px;border-radius:16px;border:0;font-size:14px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.smd-btn,.smd-file-btn{padding:0 16px}
.smd-primary{background:linear-gradient(135deg,var(--smd-green),#10cf74);color:#fff}
.smd-soft{background:#eef3f7;color:#0d2235}
.smd-btn:disabled{opacity:.45;cursor:not-allowed}
.smd-file-btn{position:relative;overflow:hidden;background:#eef3f7;color:#0d2235}
.smd-file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.smd-privacy{margin-top:10px;color:#738294;font-size:12px}
.smd-choice-card{padding:25px}
.smd-step{display:flex;gap:10px;align-items:center;font-size:16px;margin-bottom:18px}
.smd-step span{width:29px;height:29px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--smd-ink);color:#fff;font-size:13px}
.smd-styles{display:grid;gap:10px}
.smd-style{display:flex;align-items:center;gap:14px;padding:11px;border:1px solid rgba(9,30,48,.10);background:#fff;border-radius:18px;text-align:left;cursor:pointer;transition:.2s ease}
.smd-style:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(9,30,48,.06)}
.smd-style.is-selected{border-color:#00a859;background:#eefbf4;box-shadow:0 0 0 2px rgba(0,168,89,.12)}
.smd-style-text strong{display:block;font-size:15px;color:#07131f}
.smd-style-text small{display:block;color:#76879a;font-size:12px;margin-top:2px}
.smd-art{width:64px;height:64px;border-radius:18px;background:linear-gradient(160deg,#f5f7fb,#e8edf5);position:relative;flex:0 0 auto;overflow:hidden;border:1px solid rgba(9,30,48,.08)}
.smd-head{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#f0c7a8;z-index:2}
.smd-hair{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:3}
.smd-escova_lisa .smd-hair{width:34px;height:40px;border-radius:18px 18px 10px 10px;background:#3b2a22;box-shadow:0 8px 0 0 #3b2a22}
.smd-escova_modelada .smd-hair{width:40px;height:34px;border-radius:20px 20px 12px 12px;background:#5d4037}
.smd-escova_modelada .smd-hair:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-10px;height:16px;border-radius:0 0 20px 20px;background:radial-gradient(circle at 20% 20%,#5d4037 0 40%,transparent 41%),radial-gradient(circle at 50% 20%,#5d4037 0 40%,transparent 41%),radial-gradient(circle at 80% 20%,#5d4037 0 40%,transparent 41%)}
.smd-ondas_glam .smd-hair{width:42px;height:36px;border-radius:22px;background:#2d2d2d}
.smd-ondas_glam .smd-hair:after{content:"";position:absolute;left:-4px;right:-4px;bottom:-8px;height:16px;background:radial-gradient(circle at 10% 35%,#2d2d2d 0 38%,transparent 39%),radial-gradient(circle at 35% 65%,#2d2d2d 0 38%,transparent 39%),radial-gradient(circle at 60% 35%,#2d2d2d 0 38%,transparent 39%),radial-gradient(circle at 85% 65%,#2d2d2d 0 38%,transparent 39%)}
.smd-tranca_lateral .smd-hair{width:38px;height:28px;border-radius:20px;background:#573322}
.smd-tranca_lateral .smd-hair:after{content:"";position:absolute;right:-8px;top:14px;width:14px;height:28px;border-radius:10px;background:repeating-linear-gradient(180deg,#573322 0 4px,#7d4f36 4px 8px)}
.smd-coque_elegante .smd-hair{width:38px;height:28px;border-radius:18px;background:#2d221b}
.smd-coque_elegante .smd-hair:after{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#2d221b}
.smd-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 14px;color:#56687a;font-size:13px}
.smd-consent input{margin-top:3px}
.smd-generate{width:100%;background:linear-gradient(135deg,#07131f,#11304a);color:#fff;gap:10px}
.smd-helper,.smd-status{margin-top:12px;font-size:13px}
.smd-helper{color:#5f7083}
.smd-status{color:#0a7e43;font-weight:800}
.smd-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:smdSpin .8s linear infinite}
@keyframes smdSpin{to{transform:rotate(360deg)}}
.smd-result{margin-top:24px;padding:22px}
.smd-result-top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:14px}
.smd-result-top h3{font-size:31px;letter-spacing:-.04em;margin-top:8px}
.smd-reset{background:#eef3f7;color:#0d2235;padding:0 18px}
.smd-result-image{border-radius:22px;overflow:hidden;background:#f2f5f8}
.smd-result-image img{display:block;width:100%;height:auto}
.smd-result p{margin-top:12px;color:#67788a;font-size:13px}
@media(max-width:900px){.smd-grid{grid-template-columns:1fr}.smd-stage{min-height:430px}}
@media(max-width:620px){.smartbr-mirror-demo{padding:56px 12px}.smd-heading{display:block}.smd-online{display:inline-flex;margin-top:14px}.smd-stage{min-height:360px}.smd-actions{grid-template-columns:1fr}.smd-style{align-items:center}.smd-result-top{flex-direction:column;align-items:flex-start}.smd-reset{width:100%}}

/* v2.5 hard override: camera instruction must stay small at top-left, never centered */
.smartbr-mirror-demo .smd-stage .smd-placeholder{
  position:absolute !important;
  left:14px !important;
  top:14px !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto auto auto auto !important;
  width:260px !important;
  max-width:calc(100% - 28px) !important;
  height:auto !important;
  min-height:0 !important;
  padding:11px 13px !important;
  display:block !important;
  text-align:left !important;
  place-items:unset !important;
  align-content:unset !important;
  justify-content:unset !important;
  align-items:unset !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.94) !important;
  color:#07131f !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
  z-index:8 !important;
}
.smartbr-mirror-demo .smd-stage .smd-placeholder .smd-camera-icon{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  margin:0 7px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#00a859 !important;
  font-size:14px !important;
  vertical-align:middle !important;
}
.smartbr-mirror-demo .smd-stage .smd-placeholder b{
  display:inline !important;
  margin:0 !important;
  color:#07131f !important;
  font-size:13px !important;
  line-height:1.2 !important;
}
.smartbr-mirror-demo .smd-stage .smd-placeholder span{
  display:block !important;
  margin:4px 0 0 22px !important;
  max-width:none !important;
  color:#5f7182 !important;
  font-size:11px !important;
  line-height:1.25 !important;
}
.smartbr-mirror-demo .smd-stage video.smd-video-live{
  display:block !important;
  z-index:1 !important;
  opacity:1 !important;
}
@media(max-width:620px){
  .smartbr-mirror-demo .smd-stage .smd-placeholder{width:230px !important;}
}

/* v2.7 commercial positioning for SmartBR Magic Mirror */
.smd-product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.smd-product-tags span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#ffffff;
  color:#0c2b40;
  border:1px solid rgba(9,30,48,.08);
  box-shadow:0 8px 20px rgba(9,30,48,.06);
  font-size:12px;
  font-weight:900;
}
.smd-heading h2{
  max-width:780px;
}
