.ac-page .ac-camera { --camera-ink: #092744; --camera-blue: #2358d8; color: var(--camera-ink); }
.ac-page .ac-camera-layout { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr); gap: 28px; align-items: start; }
.ac-page .ac-camera-stage { position: relative; aspect-ratio: 3 / 4; max-height: 470px; overflow: hidden; border-radius: 20px; background: #e8edf3; isolation: isolate; }
.ac-page .ac-camera-video, .ac-page .ac-camera-photo, .ac-page .ac-camera-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-page .ac-camera-video { transform: scaleX(-1); }
.ac-page .ac-camera [hidden] { display: none !important; }
.ac-page .ac-camera-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: radial-gradient(ellipse at 50% 25%, #f8fafc, #e3eaf2); }
.ac-page .ac-camera-placeholder > span { padding: 0 22px; font-size: 13px; line-height: 1.5; text-align: center; color: #42576c; }
.ac-page .ac-camera-avatar { position: relative; width: 138px; height: 178px; overflow: hidden; opacity: .62; }
.ac-page .ac-camera-avatar i { position: absolute; left: 34px; top: 0; width: 70px; height: 84px; background: #b2c4d5; border-radius: 48%; }
.ac-page .ac-camera-avatar b { position: absolute; left: 0; top: 100px; width: 138px; height: 125px; border-radius: 50% 50% 10px 10px; background: #b2c4d5; }
.ac-page .ac-camera-frame { pointer-events: none; position: absolute; inset: 11% 13% 16%; border: 2px solid rgba(255,255,255,.92); border-radius: 45% 45% 38% 38%; box-shadow: 0 0 0 150px rgba(5,23,42,.16); }
.ac-page .ac-camera-indicator { position: absolute; z-index: 2; bottom: 15px; left: 15px; max-width: calc(100% - 30px); padding: 7px 11px; border-radius: 18px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(9,39,68,.78); backdrop-filter: blur(8px); }
.ac-page .ac-camera-indicator::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #b4c4d4; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.ac-page .ac-camera-indicator.is-live::before { background: #86edbc; box-shadow: 0 0 0 3px rgba(134,237,188,.15); }
.ac-page .ac-camera-content { padding: 9px 0; min-width: 0; }
.ac-page .ac-camera-eyebrow { display: block; margin-bottom: 15px; font-size: 10px; letter-spacing: .1em; line-height: 1.5; font-weight: 800; color: #59748b; }
.ac-page .ac-camera-content h3 { margin: 0 0 12px; font-size: clamp(23px, 2.6vw, 30px); letter-spacing: -.035em; line-height: 1.12; }
.ac-page .ac-camera-content p { margin: 0 0 18px; color: #53687c; font-size: 14px; line-height: 1.65; }
.ac-page .ac-camera-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 20px 0; }
.ac-page .ac-camera-actions .button { white-space: normal; text-align: left; min-height: 42px; }
.ac-page .ac-camera-content .ac-camera-privacy { padding-top: 19px; border-top: 1px solid #dfe6ed; font-size: 12px; line-height: 1.6; }
.ac-page .ac-camera-scenarios { margin-top: 20px; border-top: 1px solid #dfe6ed; padding-top: 15px; }
.ac-page .ac-camera-scenarios summary { cursor: pointer; color: #526b84; font-size: 12px; font-weight: 700; line-height: 1.5; }
.ac-page .ac-camera-scenarios .ac-camera-actions { margin: 13px 0; }
.ac-page .ac-camera-scenarios p { font-size: 12px; }
.ac-page .ac-camera[data-state="denied"] .ac-camera-stage, .ac-page .ac-camera[data-state="unavailable"] .ac-camera-stage, .ac-page .ac-camera[data-state="capture_error"] .ac-camera-stage { box-shadow: inset 0 0 0 1px #d7bd8d; }
.ac-page .ac-camera[data-state="captured"] .ac-camera-stage { box-shadow: 0 0 0 2px #347365; }
@media (max-width: 650px) {
  .ac-page .ac-camera-layout { grid-template-columns: 1fr; gap: 20px; }
  .ac-page .ac-camera-stage { width: min(100%, 280px); max-height: 360px; justify-self: center; }
  .ac-page .ac-camera-content { padding: 0; }
  .ac-page .ac-camera-actions .button { flex: 1 1 180px; justify-content: center; text-align: center; }
}