.camera-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:8px; background:#f7fafc; }
.camera-controls[hidden] { display:none; }
.camera-controls label { display:grid; grid-template-columns:auto minmax(120px,1fr) auto; align-items:center; gap:9px; flex:1; font-size:.86rem; font-weight:700; }
.camera-controls input[type="range"] { width:100%; }
.guidance[data-tone="ready"] { border-color:var(--good); background:#eaf8f3; color:#075d49; }
.guidance[data-tone="warn"] { border-color:var(--warn); background:#fff7e6; color:#754700; }
.guidance[data-tone="bad"] { border-color:var(--bad); background:#fff0f0; color:#812525; }
#live-ridge { display:block; position:absolute; z-index:2; left:50%; top:50%; width:48%; height:auto; aspect-ratio:1/1.28; transform:translate(-50%,-50%); object-fit:cover; border-radius:48% 48% 44% 44%; opacity:.76; filter:contrast(1.15); pointer-events:none; }
.thumb-guide { z-index:3; }
.camera-state { z-index:4; max-width:calc(100% - 24px); }
.ridge-label { position:absolute; z-index:4; right:12px; top:12px; padding:5px 8px; border-radius:5px; background:#07111ed9; color:#ccefff; font-size:.75rem; font-weight:700; }
.diagnostics { margin-top:18px; border-top:1px solid var(--border); padding-top:12px; }
.diagnostics summary { cursor:pointer; font-weight:800; }
.diagnostics pre { max-height:260px; overflow:auto; padding:10px; border-radius:7px; background:#0b1826; color:#d6e8f6; white-space:pre-wrap; word-break:break-word; font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }