.phone-page { margin: 0; padding: 24px; background: #080d12; color: #edf6f9; font: 16px/1.5 system-ui, sans-serif; }
.phone-card, .phone-dialog { box-sizing: border-box; width: min(100%, 480px); margin: 24px auto; padding: 24px; border: 1px solid #34515d; border-radius: 16px; background: #101c24; color: #edf6f9; font: 16px/1.5 system-ui, sans-serif; }
.phone-dialog { max-height: 90dvh; overflow: auto; margin: auto; }
.phone-dialog::backdrop { background: #000b; }
.phone-card h1, .phone-dialog h2 { color: #fff; border: 0; letter-spacing: normal; margin: 0 0 12px; font-size: 26px; }
.phone-eyebrow { color: #00f0ff; font-size: 12px; letter-spacing: 3px; }
.phone-note { color: #adc1cb; font-size: 13px; }
.phone-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.phone-card button, .phone-dialog button, .phone-card select { padding: 12px 16px; border: 1px solid #00d6e5; border-radius: 8px; background: #15323c; color: #efffff; font: inherit; cursor: pointer; }
.phone-card button:disabled, .phone-dialog button:disabled { opacity: .45; cursor: default; }
.phone-dialog input { box-sizing: border-box; width: 100%; padding: 10px; background: #080d12; color: #fff; border: 1px solid #65828e; border-radius: 6px; }
.phone-dialog [hidden] { display: none !important; }
#phone-preview { display: block; width: 100%; max-height: 45dvh; aspect-ratio: 3/4; object-fit: contain; background: #000; border-radius: 10px; margin: 16px 0; }
#phone-qr { margin: 18px auto; width: min(100%, 260px); background: white; }
#phone-qr svg { display: block; width: 100%; height: auto; }
#phone-camera-btn { white-space: nowrap; }
#camera-mixer { position:absolute; z-index:110; bottom:64px; left:16px; right:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:12px; background:#101c24ed; color:#d9e8e4; border:1px solid #34515d; border-radius:8px; font:13px system-ui; }
#camera-mixer[hidden] { display:none; }
#camera-mixer select { background:#101c24; color:#fff; padding:6px; border:1px solid #65828e; border-radius:4px; }
#camera-mixer input { width:90px; vertical-align:middle; }
#mixer-status { flex-basis:100%; color:#adc1cb; }
#background-settings { position:absolute; z-index:115; right:16px; top:130px; display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid #34515d; border-radius:8px; background:#101c24f2; color:#d9e8e4; font:13px system-ui; }
#background-settings[hidden] { display:none; }
#background-settings label { display:grid; grid-template-columns:90px 120px 42px; align-items:center; gap:8px; }
#background-settings { max-height:calc(100dvh - 160px); overflow:auto; }
#background-settings select { background:#101c24; color:#fff; border:1px solid #65828e; padding:6px; }
#point-cloud-note { max-width:280px; color:#adc1cb; font-size:12px; }
#phone-connection-status { position:absolute; left:20px; bottom:38px; display:flex; gap:16px; color:#bacac7; font:11px system-ui; pointer-events:none; }
.phone-dialog textarea, .phone-card textarea { width:100%; box-sizing:border-box; background:#080d12; color:#bacac7; border:1px solid #34515d; font:11px monospace; }
@media(max-width: 1000px) { #controls { padding: 10px; height: auto; flex-wrap: wrap; gap: 10px; } #controls .panel { flex-wrap: wrap; gap: 8px; } }