/* =========================================================
   Smile Lab — tooth explorer, smile check, brush timer
   ========================================================= */
.lab-section{ padding:96px 0; }
@media (max-width:720px){ .lab-section{ padding:64px 0; } }
.lab-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .lab-grid{ grid-template-columns:1fr; gap:34px; } }

/* ---------- Tooth explorer ---------- */
.tooth-stage{
  position:relative; width:100%; max-width:500px; aspect-ratio:300/380; margin:0 auto; perspective:1100px;
  touch-action:pan-y; cursor:grab; outline:none; user-select:none; -webkit-user-select:none;
  --rx:-8deg; --ry:0deg; --explode:0;
}
.tooth-stage.dragging{ cursor:grabbing; }
.tooth-stage:focus-visible{ box-shadow:0 0 0 3px var(--gold-500); border-radius:24px; }
.tooth-stage::before{
  content:''; position:absolute; left:8%; right:8%; bottom:-4%; height:12%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(79,216,255,.3), transparent 70%); filter:blur(6px);
}
.sway{ position:absolute; inset:0; transform-style:preserve-3d; animation:sway 9s ease-in-out infinite; pointer-events:none; }
.tooth-stage.touched .sway, .tooth-stage:hover .sway{ animation-play-state:paused; }
@keyframes sway{ 0%,100%{ transform:rotateY(-11deg); } 50%{ transform:rotateY(11deg); } }
.tooth3d{ position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .12s linear; }
.layer{
  position:absolute; inset:0; transform-style:preserve-3d;
  --z:calc((var(--i) - 2.5) * (12px + var(--explode) * 54px));
  transform:translateZ(var(--z)) translateY(calc(var(--dy,0) * var(--explode) * 1px));
  transition:opacity .35s; pointer-events:none;
}
.layer svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 0 12px rgba(79,216,255,.3)); pointer-events:none; }
.layer.is-dim{ opacity:.2; }
.layer.is-active svg{ filter:drop-shadow(0 0 20px rgba(79,216,255,.85)); }
.hs{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:2px solid var(--glow);
  background:rgba(7,27,46,.78); color:#fff; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-tech); font-size:.7rem; font-weight:700; transform:translateZ(1px); pointer-events:auto;
}
.hs::before{ content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--glow); animation:halo 2.4s ease-out infinite; }
.hs:focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; }
.layer.is-active .hs{ background:var(--glow); color:var(--deep-900); }
.hs-label{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  font-size:.74rem; font-weight:600; letter-spacing:.04em; color:#fff; background:rgba(7,27,46,.85); border:1px solid rgba(79,216,255,.4); padding:4px 10px; border-radius:8px; opacity:0; transition:opacity .25s;
}
.hs:hover .hs-label,.hs:focus-visible .hs-label,.layer.is-active .hs-label{ opacity:1; }
.hs.left .hs-label{ left:auto; right:calc(100% + 10px); }

.explode-control{ display:flex; align-items:center; gap:14px; margin:22px 0 18px; font-family:var(--font-tech); font-weight:600; font-size:.82rem; color:#b9cfe1; }
.explode-control input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--glow) var(--v,0%), rgba(255,255,255,.18) var(--v,0%)); outline:none; }
.explode-control input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--glow); box-shadow:0 0 14px var(--glow-soft); cursor:pointer; }
.explode-control input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--glow); cursor:pointer; }
.layer-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.layer-tabs button{ padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#d4e4f1; font-family:var(--font-tech); font-weight:600; font-size:.8rem; cursor:pointer; transition:all .2s; }
.layer-tabs button:hover{ border-color:var(--glow); }
.layer-tabs button[aria-selected="true"]{ background:var(--glow); color:var(--deep-900); border-color:var(--glow); }
.layer-card{ padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid var(--line-glass); min-height:178px; }
.layer-card h3{ margin:0 0 8px; font-size:1.3rem; }
.layer-card p{ margin:0 0 10px; font-size:.95rem; }
.layer-card .lc-help{ font-size:.9rem; color:#e6d3a2; }
.layer-card .lc-help a{ color:var(--glow); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.layer-card.swap{ animation:swapIn .45s var(--ease); }
@keyframes swapIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lab-hint{ font-family:var(--font-tech); font-size:.78rem; color:#8fb0c9; margin-top:14px; letter-spacing:.04em; }

/* ---------- Smile check ---------- */
.quiz-card{ position:relative; max-width:780px; margin:0 auto; background:#fff; border-radius:var(--radius-l); padding:34px; box-shadow:var(--shadow-m); border:1px solid rgba(15,66,112,.1); overflow:hidden; }
@media (max-width:560px){ .quiz-card{ padding:24px 18px; } }
.quiz-top{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.quiz-ring{ width:46px; height:46px; flex:none; }
.quiz-ring circle{ fill:none; stroke-width:5; }
.quiz-ring .track{ stroke:var(--line); }
.quiz-ring .prog{ stroke:url(#quizGrad); stroke-linecap:round; stroke-dasharray:126; stroke-dashoffset:126; transition:stroke-dashoffset .6s var(--ease); transform:rotate(-90deg); transform-origin:50% 50%; }
.quiz-step-label{ font-family:var(--font-tech); font-weight:600; font-size:.78rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.quiz-q{ font-family:var(--font-head); font-size:clamp(1.3rem,3vw,1.7rem); color:var(--navy-900); margin:2px 0 0; }
.quiz-stage{ position:relative; }
.quiz-panel{ animation:stepIn .45s var(--ease); }
.quiz-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .quiz-opts{ grid-template-columns:1fr; } }
.opt{
  text-align:left; padding:16px 18px; border-radius:16px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; font-size:.98rem; font-weight:700; color:var(--navy-900);
  display:flex; align-items:center; gap:12px; transition:all .22s var(--ease);
}
.opt i{ width:38px; height:38px; flex:none; border-radius:12px; background:var(--bg-alt); color:var(--blue-600); display:flex; align-items:center; justify-content:center; transition:all .22s; }
.opt i svg{ width:20px; height:20px; }
.opt:hover{ border-color:var(--blue-500); transform:translateY(-2px); box-shadow:var(--shadow-s); }
.opt:hover i{ background:var(--navy-800); color:#fff; }
.opt.is-picked{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.quiz-back{ background:none; border:0; color:var(--blue-600); font-weight:700; font-family:inherit; cursor:pointer; padding:14px 0 0; }
.quiz-result{ animation:stepIn .5s var(--ease); }
.quiz-result .r-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-tech); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:#E8F6F3; color:#1B7A6E; margin-bottom:12px; }
.quiz-result .r-badge.urgent{ background:#FDECEA; color:#B4392B; }
.quiz-result h3{ font-size:1.6rem; margin-bottom:8px; }
.quiz-result .r-note{ padding:12px 14px; border-radius:12px; background:var(--bg-alt); font-size:.9rem; margin:14px 0; }
.quiz-result .r-warn{ padding:12px 14px; border-radius:12px; background:#FFF6E5; border:1px solid #F3D9A0; color:#6B4B05; font-size:.88rem; margin:14px 0; }
.quiz-result .btn-row{ margin-top:18px; }
.quiz-result .r-fine{ font-size:.8rem; color:var(--muted); margin-top:16px; }
.quiz-spark{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.quiz-spark i{ position:absolute; top:40%; left:50%; width:8px; height:8px; border-radius:50%; background:var(--gold-500); animation:burst 1.1s var(--ease) forwards; }
@keyframes burst{ to{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }

/* ---------- Brush timer ---------- */
.timer-grid{ display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; }
@media (max-width:820px){ .timer-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:30px; } }
.timer-ring{ position:relative; width:min(320px,80vw); aspect-ratio:1/1; }
.timer-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.timer-ring .seg-bg{ fill:none; stroke:rgba(15,66,112,.12); stroke-width:16; stroke-linecap:round; }
.timer-ring .seg{ fill:none; stroke:url(#timerGrad); stroke-width:16; stroke-linecap:round; }
.timer-ring .seg.is-now{ filter:drop-shadow(0 0 8px rgba(79,216,255,.7)); }
.timer-centre{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20%; }
.timer-time{ font-family:var(--font-tech); font-weight:700; font-size:clamp(2.6rem,9vw,3.4rem); color:var(--navy-900); line-height:1; letter-spacing:-.02em; }
.timer-zone{ font-family:var(--font-tech); font-weight:600; font-size:.82rem; color:var(--blue-600); margin-top:8px; min-height:2.4em; }
.timer-ctrls{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 14px; }
@media (max-width:820px){ .timer-ctrls{ justify-content:center; } }
.timer-tips{ display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.timer-tips li{ position:relative; padding-left:24px; font-size:.94rem; color:var(--ink-soft); text-align:left; }
.timer-tips li::before{ content:''; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--aqua-500); box-shadow:0 0 0 4px rgba(63,167,154,.15); }
.sound-opt{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted); cursor:pointer; }
.timer-done{ animation:pop .6s var(--ease); }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

html.lite .sway{ animation:none; }