/* «Ваша усмішка після відбілювання»: the canvas with before/after, the controls beside it */
.smile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.smile-stage { --x: 50%; position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; background: var(--teal-soft); }
.smile-canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.smile-video { display: none; }
.smile-split { position: absolute; inset: 0; pointer-events: none; }
.smile-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 20, 22, .2); }
.smile-split span { position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(6, 20, 22, .6); color: #fff; font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.smile-split span:first-child { right: calc(100% - var(--x) + 10px); }
.smile-split span:last-child { left: calc(var(--x) + 10px); }
.smile-split::after { content: "‹ ›"; position: absolute; top: 26%; left: var(--x); width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); font: 700 16px/1 var(--f-text); box-shadow: 0 6px 20px rgba(6, 20, 22, .3); }
/* the before/after line is dragged on the photo itself: an invisible range whose thumb sits under the knob, above the smile */
.smile-split-range { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 52%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.smile-stage:has(.smile-split-range:focus-visible) { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.smile-badge { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); }
.smile-status { position: absolute; left: 14px; right: 14px; bottom: 52px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(6, 20, 22, .72); color: #fff; font-weight: 600; }
.smile-status:empty { display: none; }
.smile-panel { display: grid; gap: 16px; }
.smile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.smile-file { position: relative; }
.smile-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.smile-file:focus-within { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.smile-shade { display: grid; gap: 8px; font-weight: 700; }
.smile-shade output { font-family: var(--f-mono); color: var(--teal-ink); }
.smile-shade input { width: 100%; accent-color: var(--teal-ink); }
.smile-compare { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.smile-compare input { width: 18px; height: 18px; accent-color: var(--teal-ink); }
.smile-panel .btn-teal { justify-self: start; }
.smile-note { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 860px) { .smile { grid-template-columns: minmax(0, 1fr); } }

/* «Що бачить AI?» */
.smile-ai { display: grid; gap: 10px; margin-top: 6px; }
.smile-ai > .btn, .ai-look > .btn { justify-self: start; }
.ai-consent { margin: 0; font-size: 13px; color: var(--ink-3); }
.ai-look { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.ai-look:empty { display: none; }
.ai-look h3 { margin: 4px 0 0; font: 600 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.ai-look ul { margin: 0; padding-left: 18px; }
.ai-look-msg, .ai-tip, .ai-disclaimer { margin: 0; }
.ai-disclaimer { font-size: 13px; color: var(--ink-3); }
.ai-demo { justify-self: start; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-size: 11px; }
.ai-urgent { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FDECEC; color: #8A1C12; font-weight: 700; }
.ai-urgent a { color: inherit; }
.ai-svcs { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-svc { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ai-svc:hover, .ai-svc:focus-visible { border-color: var(--teal-ink); }
.ai-svc span { font-size: 13px; color: var(--ink-2); }