/* ============================================================
   AI-SCAN FEATURE (screen 6b)  ·  v4 "LIVE OPTICAL READING"
   Covers the photo upload step and the scan/result presentation.

   v4 EVOLUTION: the scan stops being a static overlay and becomes a
   live instrument — dormant depth rings activate around the lens, the
   frame is lit from within, the mesh and beam carry a gold glow, and
   the diagnostics read as issued by an intelligent system. EVERY
   geometry the JS drives is preserved exactly: the 230px frame, the
   148px gauge with stroke-dasharray:408, the width-driven status and
   metric bars, and all .fa-*.active/.done state classes.
   ============================================================ */
.fa-body { flex: 1; padding: 30px 24px calc(32px + var(--sig-h)); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.fa-panel { display: none; }
.fa-panel.active { display: flex; flex-direction: column; flex: 1; animation: faPanelIn .5s var(--ease-out) both; }
@keyframes faPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fa-panel.active { animation: none; } }

.fa-dropzone {
  position: relative; overflow: hidden;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 46px 22px;
  text-align: center; cursor: pointer;
  background: var(--grad-gold-soft);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
  margin-top: 6px; box-shadow: var(--edge-light);
}
.fa-dropzone:hover { border-color: var(--gold); background: var(--gold-soft); box-shadow: var(--edge-light), var(--glow-gold-sm); }
.fa-dropzone-icon { width: 48px; height: 48px; margin: 0 auto 18px; color: var(--gold-bright); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 8px rgba(221,184,104,.4)); }
.fa-dropzone-icon svg { width: 28px; height: 28px; }
.fa-dropzone-title { font-family: var(--ff-display); font-size: 17px; font-weight: 800; color: var(--snow); margin-bottom: 6px; }
.fa-dropzone-sub { font-size: var(--fs-xs); color: var(--mist-dim); line-height: 1.5; }

.fa-sample-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 10px; text-align: center; font-size: var(--fs-sm); color: var(--mist); transition: color .2s var(--ease-out); }
.fa-sample-link:hover { color: var(--snow); }
.fa-sample-link-action { color: var(--gold-bright); border-bottom: 1px solid var(--gold); font-weight: 600; }

.fa-quality-issues { display: flex; flex-direction: column; margin-top: 8px; margin-bottom: 8px; }
.fa-quality-issue-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.fa-quality-issues .fa-quality-issue-row:first-child { border-top: none; padding-top: 4px; }
.fa-quality-issue-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex-shrink: 0; margin-top: 7px; box-shadow: 0 0 8px rgba(201,132,122,.6); }
.fa-quality-issue-text { font-size: var(--fs-sm); color: var(--mist); line-height: 1.6; }
.fa-quality-actions { margin-top: 18px; }

.fa-privacy-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: 11px; color: var(--mist-dim); }
.fa-privacy-note svg { width: 13px; height: 13px; flex-shrink: 0; }

.fa-scan-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 8px; }
.fa-scan-frame-wrap { position: relative; width: 230px; height: 230px; margin-bottom: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* v4: the dormant depth rings now activate — concentric scanner
   rings pulse outward behind the lens (scanner "online"). */
.fa-scan-ring {
  display: block; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px;
  transform: translate(-50%,-50%); border-radius: var(--r-lg); pointer-events: none; z-index: 0;
}
.fa-scan-ring::before, .fa-scan-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(221,184,104,.30);
  animation: scanDepth 3s ease-out infinite;
}
.fa-scan-ring::after { animation-delay: 1.5s; }
@keyframes scanDepth { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .fa-scan-ring::before, .fa-scan-ring::after { animation: none; opacity: .2; } }

.fa-scan-frame {
  position: relative; width: 230px; height: 230px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hairline-strong); background: var(--ink-raised-2); flex-shrink: 0; z-index: 1;
  box-shadow: var(--edge-light-strong), inset 0 0 30px rgba(8,7,5,.5), 0 10px 36px rgba(8,7,5,.45);
}
.fa-user-img, .fa-placeholder-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-placeholder-face { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, var(--ink-raised), var(--ink-raised-2)); color: var(--mist-dim); }
.fa-placeholder-face svg { width: 100px; height: 100px; }

.fa-mesh-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.fa-mesh-line { fill: none; stroke: var(--gold-bright); stroke-width: 0.9; stroke-linecap: round; opacity: 0; stroke-dasharray: 60; stroke-dashoffset: 60; animation: faLineTrace .7s var(--ease) forwards; filter: drop-shadow(0 0 2px rgba(221,184,104,.55)); }
@keyframes faLineTrace { to { opacity: .55; stroke-dashoffset: 0; } }
.fa-mesh-dot { fill: var(--gold-bright); opacity: 0; transform-origin: center; animation: faDotPulse .5s var(--ease) forwards; filter: drop-shadow(0 0 3px rgba(221,184,104,.8)); }
@keyframes faDotPulse { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .fa-mesh-line { animation: none; opacity: .45; stroke-dashoffset: 0; }
  .fa-mesh-dot  { animation: none; opacity: 1; transform: scale(1); }
}

.fa-status-line { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; margin-bottom: 8px; }
.fa-status-text { font-size: var(--fs-xs); letter-spacing: .02em; color: var(--gold-bright); font-weight: 600; }
.fa-status-bar { width: 100%; max-width: 280px; height: 2px; background: var(--hairline-strong); overflow: hidden; margin-bottom: 22px; border-radius: 999px; }
.fa-status-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .5s var(--ease-out); box-shadow: 0 0 10px rgba(221,184,104,.5); }

@keyframes faMetricIn { to { opacity: 1; transform: translateY(0); } }

.fa-scan-corner { position: absolute; width: 20px; height: 20px; z-index: 4; pointer-events: none; opacity: .85; }
.fa-scan-corner svg { width: 100%; height: 100%; stroke: var(--gold-bright); fill: none; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(221,184,104,.6)); }
.fa-scan-corner.tl { top: 8px; left: 8px; }
.fa-scan-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.fa-scan-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.fa-scan-corner.br { bottom: 8px; right: 8px; transform: scale(-1,-1); }

.fa-scan-grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .25;
  background-image:
    repeating-linear-gradient(0deg, rgba(221,184,104,.08) 0px, rgba(221,184,104,.08) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(221,184,104,.08) 0px, rgba(221,184,104,.08) 1px, transparent 1px, transparent 24px);
}

.fa-scan-beam {
  position: absolute; left: 0; width: 100%; height: 36px; top: -36px; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(221,184,104,.3) 45%, var(--gold-bright) 50%, rgba(221,184,104,.3) 55%, transparent);
  animation: faBeamMove 2.4s cubic-bezier(.45,0,.55,1) infinite;
  mix-blend-mode: screen; filter: drop-shadow(0 0 8px rgba(221,184,104,.5));
}
@keyframes faBeamMove { 0% { top: -36px; } 50% { top: 100%; } 100% { top: -36px; } }
@media (prefers-reduced-motion: reduce) { .fa-scan-beam { animation: none; top: 50%; } }

.fa-big-counter { font-family: var(--ff-mono); font-size: 36px; font-weight: 700; color: var(--snow); letter-spacing: -0.01em; line-height: 1; margin-bottom: 2px; }
.fa-big-counter-suffix { font-size: 17px; color: var(--gold-bright); margin-left: 2px; }
[dir="rtl"] .fa-big-counter-suffix { margin-left: 0; margin-right: 2px; }
.fa-counter-wrap { text-align: center; margin-bottom: 4px; }

.fa-detect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 300px; margin-top: 16px; }
.fa-detect-chip {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: rgba(247,242,230,.015);
  font-size: 11px; color: var(--mist-dim);
  opacity: 0; transform: translateY(6px); animation: faChipIn .4s var(--ease-out) forwards;
  transition: opacity .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
@keyframes faChipIn { to { opacity: .55; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fa-detect-chip { animation: none; opacity: .55; transform: none; } }
.fa-detect-chip-label { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-detect-chip-status { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fa-detect-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mist-dim); }
.fa-detect-chip.active { opacity: 1; border-color: var(--gold-soft); background: var(--gold-soft); color: var(--bone); box-shadow: var(--glow-gold-sm); }
.fa-detect-chip.active .fa-detect-chip-dot { background: var(--gold-bright); box-shadow: 0 0 6px rgba(221,184,104,.8); animation: faChipPulse 1s ease-in-out infinite; }
@keyframes faChipPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
.fa-detect-chip.done { opacity: 1; border-color: var(--hairline-strong); background: var(--ink-raised-2); color: var(--snow); box-shadow: var(--edge-light); }
.fa-detect-chip.done .fa-detect-chip-status::after { content: '✓'; color: var(--gold-bright); font-size: 11px; font-weight: 700; }
.fa-detect-chip.done .fa-detect-chip-dot { display: none; }
@media (prefers-reduced-motion: reduce) { .fa-detect-chip.active .fa-detect-chip-dot { animation: none; } }

.fa-report-visual { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.fa-report-photo-wrap { position: relative; width: 100px; height: 100px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline-strong); flex-shrink: 0; background: var(--ink-raised-2); box-shadow: var(--edge-light), var(--shadow-1); }
.fa-report-photo-wrap img, .fa-report-photo-wrap .fa-placeholder-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-report-photo-wrap .fa-placeholder-face svg { width: 44px; height: 44px; }
.fa-overlay-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(7px); opacity: 0; transition: opacity 1.1s var(--ease-out); mix-blend-mode: screen; }
.fa-overlay-blob.in { opacity: var(--blob-o, .45); }
.fa-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.fa-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--mist-dim); }
.fa-legend-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.fa-gauge-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.fa-gauge-wrap { position: relative; width: 148px; height: 148px; margin-bottom: 10px; }
.fa-gauge-wrap::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(221,184,104,.12), transparent 70%); }
.fa-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); position: relative; }
.fa-gauge-track { fill: none; stroke: var(--hairline-strong); stroke-width: 7; }
.fa-gauge-fill { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 1.4s var(--ease-out); filter: drop-shadow(0 0 6px rgba(221,184,104,.5)); }
.fa-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fa-gauge-number { font-family: var(--ff-mono); font-size: 32px; font-weight: 700; color: var(--snow); line-height: 1; }
.fa-gauge-of100 { font-size: 10.5px; color: var(--mist-dim); margin-top: 2px; }
.fa-gauge-name { font-size: 12.5px; font-weight: 700; color: var(--mist); margin-top: 4px; }
.fa-gauge-tag { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700; padding: 4px 0; margin-top: 9px; letter-spacing: .04em; text-transform: uppercase; background: transparent !important; }

.fa-submetrics { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.fa-bar-row { opacity: 0; transform: translateY(8px); animation: faMetricIn .45s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) { .fa-bar-row { animation: none; opacity: 1; transform: none; } }
.fa-bar-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.fa-bar-row-label { font-size: 12px; font-weight: 700; color: var(--mist); }
.fa-bar-row-val { font-family: var(--ff-mono); font-size: 12px; color: var(--snow); }
.fa-bar-row-track { height: 3px; background: var(--hairline-strong); overflow: hidden; border-radius: 999px; }
.fa-bar-row-fill { display: block; height: 100%; width: 0%; transition: width 1.1s var(--ease-out) .1s; box-shadow: 0 0 8px rgba(221,184,104,.35); }

.fa-reco-section { margin-bottom: 20px; }
.fa-reco-heading { font-family: var(--ff-display); font-size: 16px; font-weight: 800; color: var(--snow); margin-bottom: 12px; }
.fa-reco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 16px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fa-reco-card { padding: 14px 12px; }
.fa-reco-card:first-child { border-right: 1px solid var(--hairline); }
[dir="ltr"] .fa-reco-card:first-child { border-right: none; border-left: 1px solid var(--hairline); }
.fa-reco-card-label { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }
.fa-reco-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fa-reco-card li { font-size: 12px; color: var(--mist); line-height: 1.5; padding-left: 12px; position: relative; }
[dir="rtl"] .fa-reco-card li { padding-left: 0; padding-right: 12px; }
.fa-reco-card li::before { content: '–'; position: absolute; left: 0; color: var(--gold-bright); }
[dir="rtl"] .fa-reco-card li::before { left: auto; right: 0; }
.fa-ingredient-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fa-ingredient-chip { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600; color: var(--gold-bright); border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px; }
.fa-tip-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.fa-tip-row { font-size: 12px; color: var(--mist); line-height: 1.6; padding-right: 12px; border-right: 1px solid var(--hairline-strong); }
[dir="ltr"] .fa-tip-row { padding-right: 0; padding-left: 12px; border-right: none; border-left: 1px solid var(--hairline-strong); }

.fa-disclaimer { display: flex; gap: 9px; align-items: flex-start; padding: 13px 0; margin: 8px 0 18px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fa-disclaimer svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; stroke: var(--mist-dim); }
.fa-disclaimer-text { font-size: 11px; line-height: 1.6; color: var(--mist-dim); }