/* A compact workspace; content remains scrollable for zoom and short screens. */
body[data-flow] .hero-stage { padding: 12px 0; }
body[data-flow] .workbench { min-height: 0; height: auto; }
body[data-flow] #paConsent { position: static !important; width: min(760px, calc(100% - 24px)); padding: 6px 12px !important; box-shadow: none !important; gap: 8px !important; flex-wrap: nowrap !important; font-size: 12px !important; }
body[data-flow] #paConsent p { flex: 1 !important; min-width: 0 !important; }
body[data-flow] #paConsent button { padding: 8px 16px !important; }
.flow-back { display: none; padding: 8px 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
body[data-flow="result"] .flow-back, body[data-flow="error"] .flow-back { display: block; }
body[data-flow="result"] .control-pane, body[data-flow="processing"] .control-pane, body[data-flow="error"] .control-pane, body[data-flow="paid"] .control-pane { display: none; }
body[data-flow="result"] .workbench { grid-template-columns: 1fr 1fr; }
body[data-flow="processing"] .workbench, body[data-flow="error"] .workbench, body[data-flow="paid"] .workbench { grid-template-columns: 1fr; }
body[data-flow="paid"] .preview-pane { display: none; }
body[data-flow] .preview-pane { min-height: 0; }
body[data-flow="result"] .preview-pane { padding: 0 20px 16px; }
body[data-flow="result"] .result-state { min-height: 0; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
body[data-flow="result"] .result-image-wrap { border-width: 3px; box-shadow: none; max-height: none; margin: 0 auto; }
body[data-flow="result"] #resultImage { width: auto; height: min(40dvh, 340px); max-width: 100%; object-fit: contain; }
body[data-flow="result"] .result-summary { text-align: center; }
body[data-flow="result"] .result-summary > p { margin: 0; }
body[data-flow="result"] .result-ok, body[data-flow="result"] .result-facts, body[data-flow="result"] .result-assurance, body[data-flow="result"] #resultBuyButton { display: none; }
body[data-flow] .result-warnings { margin: 8px 0 0; text-align: left; }
body[data-flow] .result-warnings li { padding: 4px; font-size: 12px; }
body[data-flow] .workbench > .checkout, body[data-flow] .workbench > .paid-state { width: auto; margin: 0; padding: 22px; border: 0; box-shadow: none; }
body[data-flow] .checkout-head { padding: 0; border: 0; }
body[data-flow] .checkout-head h2 { font-size: 24px; }
body[data-flow] .checkout-head > p, body[data-flow] .checkout-head .eyebrow { display: none; }
body[data-flow] .plans { margin: 16px 0; gap: 8px; }
body[data-flow] .plan { padding: 12px; min-height: 0; }
body[data-flow] .plan-tag { display: none; }
body[data-flow] .plan small { margin-top: 6px; font-size: 11px; }
body[data-flow] .checkout-form { grid-template-columns: 1fr; gap: 10px; }
body[data-flow] .checkout-assurance { padding: 8px; margin: 10px 0 0; font-size: 11px; }
body[data-flow] .checkout-note { margin-top: 8px; justify-content: flex-start; }
body[data-flow] .email-field input { min-height: 48px; font-size: 16px; }
body[data-flow] #payButton { min-height: 52px; }
body[data-flow="processing"] .processing { min-height: 0; max-width: 780px; margin: 0 auto; padding: 24px; }
body[data-flow="paid"] .paid-state { min-height: 0; }
@media (max-width: 820px) {
  body[data-flow] .main-nav { display: none; }
  body[data-flow] .hero-stage { padding: 6px 0; }
  body[data-flow] .workbench { width: calc(100% - 16px); grid-template-columns: 1fr; }
  body[data-flow="example"] .preview-pane { display: none; }
  body[data-flow] .control-pane { padding: 14px; border: 0; }
  body[data-flow] .tool-intro { margin-bottom: 12px; }
  body[data-flow] .tool-intro h1 { font-size: 28px; line-height: 1.08; max-width: 540px; }
  body[data-flow] .tool-intro .eyebrow { font-size: 10px; margin-bottom: 6px; }
  body[data-flow] .tool-lead { display: none; }
  body[data-flow] .tool-price { margin-top: 10px; gap: 8px; }
  body[data-flow] .tool-price strong { font-size: 22px; }
  body[data-flow] .tool-price > span { font-size: 11px; }
  body[data-flow] .step-head { margin: 12px 0 8px; }
  body[data-flow] .document-tab { min-height: 52px; padding: 8px 10px; }
  body[data-flow] .document-tab small { font-size: 10px; }
  body[data-flow] .source-actions { margin-top: 0; }
  body[data-flow] .upload-zone, body[data-flow] .camera-action { min-height: 66px; padding: 10px; }
  body[data-flow] .upload-trust { margin-top: 10px; font-size: 10px; }
  body[data-flow] .consent-check { margin-top: 10px; font-size: 11px; }
  body[data-flow="result"] .workbench { gap: 0; }
  body[data-flow="result"] .preview-pane { padding: 0 10px; }
  body[data-flow="result"] .preview-toolbar { min-height: 30px; padding: 4px 0; font-size: 11px; }
  body[data-flow="result"] .flow-back { float: right; min-height: 30px; padding: 4px 0; font-size: 11px; }
  body[data-flow="result"] .preview-toolbar > span { display: none; }
  body[data-flow="result"] .result-state { padding: 8px; gap: 5px; }
  body[data-flow="result"] #resultImage { height: clamp(120px, 25dvh, 230px); }
  body[data-flow="result"] .result-summary > p { font-size: 11px; line-height: 1.25; }
  body[data-flow] .workbench > .checkout { padding: 10px; }
  body[data-flow] .checkout-head h2 { font-size: 18px; }
  body[data-flow] .plans { margin: 8px 0; grid-template-columns: 1fr 1fr; }
  body[data-flow] .plan { padding: 8px; }
  body[data-flow] .plan-top { gap: 4px; }
  body[data-flow] .plan-top strong { font-size: 13px; }
  body[data-flow] .plan-top b { font-size: 18px; }
  body[data-flow] .plan small { font-size: 10px; line-height: 1.2; }
  body[data-flow] .email-field > span { font-size: 11px; margin-bottom: 4px; }
  body[data-flow] .email-field input { height: 44px; min-height: 44px; padding: 8px 12px; }
  body[data-flow] .checkout-form { gap: 6px; }
  body[data-flow] .checkout-assurance { margin-top: 6px; padding: 5px; font-size: 10px; }
  body[data-flow] .checkout-note { font-size: 10px; margin-top: 4px; }
  body[data-flow] .processing { display: flex; flex-direction: column; gap: 16px; }
  body[data-flow] .processing-image { height: 24dvh; }
  body[data-flow] .paid-state { display: flex; flex-direction: column; gap: 12px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  body[data-flow="result"] #resultImage { height: 120px; }
  body[data-flow] .checkout-assurance { display: none; }
  body[data-flow] .plan small { display: none; }
}
@media (max-width: 359px) {
  body[data-flow] .header-action { padding: 8px; font-size: 10px; }
  body[data-flow] .tool-intro h1 { font-size: 24px; }
  body[data-flow] .source-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  body[data-flow] .upload-zone, body[data-flow] .camera-action { padding: 6px; gap: 6px; min-height: 58px; }
  body[data-flow] .upload-icon, body[data-flow] .camera-action-icon { width: 26px; height: 26px; }
  body[data-flow] .upload-copy strong, body[data-flow] .camera-action strong { font-size: 11px; }
  body[data-flow] .upload-copy small, body[data-flow] .camera-action small { font-size: 10px; }
  body[data-flow] .tool-price { flex-wrap: nowrap; }
  body[data-flow] .upload-trust { gap: 4px; font-size: 9px; }
  body[data-flow="result"] #resultImage { height: 95px; }
  body[data-flow="result"] .result-summary > p { font-size: 10px; }
  body[data-flow="result"] .flow-back { float: none; text-align: right; width: 100%; }
  body[data-flow="result"] .preview-toolbar { display: none; }
}
@media (min-width: 821px) {
  body[data-flow="example"] .control-pane { padding: 18px 24px; }
  body[data-flow="example"] .tool-intro { margin-bottom: 16px; }
  body[data-flow="example"] .tool-intro h1 { font-size: 36px; line-height: 1.08; }
  body[data-flow="example"] .tool-lead { margin: 10px 0; font-size: 13px; }
  body[data-flow="example"] .tool-price { margin: 12px 0 0; }
  body[data-flow="example"] .tool-price strong { font-size: 26px; }
  body[data-flow="example"] .step-head { margin: 12px 0 8px; }
  body[data-flow="example"] .document-tab { min-height: 58px; padding: 8px 12px; }
  body[data-flow="example"] .upload-zone, body[data-flow="example"] .camera-action { min-height: 76px; }
  body[data-flow="example"] .upload-trust, body[data-flow="example"] .consent-check { margin-top: 12px; }
  /* 23.09.2026: рамка слайдера — ровно 35×45, как само фото. Была 510×390, cover резал макушку и подбородок. */
  body[data-flow="example"] .compare { --compare-h: min(46dvh, 390px); height: var(--compare-h); min-height: 0; width: calc((var(--compare-h) - 16px) * 413 / 531 + 16px); --compare-image-width: calc((var(--compare-h) - 16px) * 413 / 531); }
}
@media (max-width: 359px) {
  body[data-flow="example"] .tool-intro .eyebrow, body[data-flow="example"] .upload-trust { display: none; }
  body[data-flow="example"] .control-pane { padding: 10px; }
  body[data-flow="example"] .step-head { margin-top: 8px; }
  body[data-flow="example"] .tool-intro h1 { font-size: 22px; }
  body[data-flow="example"] .tool-price > span { font-size: 10px; }
}