/* Glow-Up Studio styles. */

.privacy-card {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  margin: var(--space-4) 0;
}

.start-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

/* Camera */
.cam-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 3 / 4; max-height: 62svh; margin: 0 auto var(--space-3);
}
#cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-oval {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 33% 42% at 50% 46%, transparent 98%, rgba(5, 6, 10, 0.55) 100%);
  border-radius: inherit;
}
.cam-oval::after {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 66%; height: 84%; transform: translate(-50%, -50%);
  border: 3px dashed color-mix(in srgb, var(--accent) 80%, white);
  border-radius: 50%;
  opacity: 0.85;
}

/* Analyzing */
.pulse-orb {
  font-size: 4rem; margin: var(--space-6) auto var(--space-3); width: fit-content;
  animation: orbPulse 1.4s ease-in-out infinite;
}
@keyframes orbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pulse-orb { animation: none; } }

/* Results */
.glow-card { margin-bottom: var(--space-3); }
.r-kicker { letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 800; color: var(--accent-text); }
.glow-score {
  font-size: 4.6rem; font-weight: 850; line-height: 1.1; letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fda4af, #f0abfc 60%, #fcd34d);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.area-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.area {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3);
}
.area .head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 750; }
.area .head .pct { color: var(--accent-text); }
.area .strength { color: var(--text-dim); font-size: 0.92rem; margin: 6px 0; }
.area details { font-size: 0.88rem; }
.area summary { cursor: pointer; color: var(--accent-text); font-weight: 650; }
.area ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-dim); }
.area li { margin-bottom: 4px; }

.tip-card { border-color: color-mix(in srgb, #fcd34d 40%, transparent); }