/* VMS mobile-first styles */
#vms-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
#vms-app { position: relative; width: 100%; height: 100vh; background: #000; overflow: hidden; color:#fff; }
#vms-camera, #vms-overlay { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
#vms-topbar { position:absolute; top:8px; left:8px; right:8px; z-index:40; display:flex; justify-content:flex-start; gap:8px; }
.vms-btn { background: rgba(0,0,0,0.6); color:#fff; padding:8px 12px; border-radius:8px; border: none; }
.vms-btn.primary { background: linear-gradient(90deg,#FF6F91,#C21807); border:none; color:#fff; }
#vms-ui { position:absolute; left:0; right:0; bottom:0; z-index:50; padding:12px; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); display:flex; flex-direction:column; gap:10px; }
.vms-tabs { display:flex; gap:8px; justify-content:center; }
.vms-tab { padding:8px 12px; border-radius:20px; background:rgba(255,255,255,0.06); border:none; color:#fff; }
.vms-tab.active { background: rgba(255,255,255,0.12); font-weight:600; }
.vms-presets { display:flex; gap:8px; align-items:center; }
.vms-color-preset { width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,0.08); }
#vms-color-picker { width:44px; height:44px; border-radius:50%; border:none; }
.vms-actions { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.vms-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:120; }
.vms-modal-inner { background:#111; padding:16px; border-radius:12px; width:90%; max-width:420px; color:#fff; }
.vms-hidden { display:none; }
.vms-fallback { padding:20px; text-align:center; font-size:16px; color:#fff; }
@media(min-width:900px){ #vms-app { height:600px; } }