:root { --toolbar-height: 125px; --bg-color: #111; --tool-bg: #222; --accent: #007AFF; --danger: #ff4444; --success: #4cd964; }
body { margin: 0; background-color: var(--bg-color); color: #eee; font-family: sans-serif; overflow: hidden; touch-action: none; }
#main-container { position: relative; width: 100vw; height: calc(100vh - var(--toolbar-height)); display: flex; align-items: center; justify-content: center; overflow: hidden; background:#000; }
#media-wrapper { position: relative; transform-origin: center center; flex-shrink: 0; }
#cameraVideo, #photoImage, #drawingCanvas { position: absolute; top:0; left:0; width:100%; height:100%; display:block; }
#photoImage, #cameraVideo { display: none; }

#textInputOverlay { position: absolute; display: none; z-index: 100; font-size: 16px; padding: 6px; border: 2px solid var(--accent); border-radius: 6px; background: rgba(0,0,0,0.8); color: #fff; outline: none; width: 200px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }

.overlay-btn { background: rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:10px 15px; border-radius:20px; font-size:12px; cursor:pointer; backdrop-filter:blur(4px); white-space:nowrap; }
.controls { position:absolute; z-index:10; display:flex; gap:10px; }
.top-right { top:20px; right:20px; flex-direction:column; align-items:flex-end; }
.top-left { top:20px; left:20px; flex-wrap:wrap; max-width:85%; align-items:center; }
#snapBtn { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); width:70px; height:70px; border-radius:50%; background:#fff; border:4px solid #ccc; display:none; z-index:10; }

.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:3000; flex-direction:column; align-items:center; justify-content:center; }
.modal-content { background:#333; width:90%; max-width:450px; border-radius:15px; padding:20px; max-height:80vh; overflow-y:auto; position:relative; text-align: center; }

#toolbar { position:fixed; bottom:0; width:100%; height:var(--toolbar-height); background:var(--tool-bg); border-top:1px solid #333; display:flex; flex-direction:column; z-index:20; }
.tool-row { display:flex; justify-content:space-around; align-items:center; flex:1; padding: 5px 10px; gap: 5px; }
.tool-btn { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition: all 0.2s; }
.tool-btn.active { border:2px solid var(--accent); background:rgba(0,122,255,0.15); transform: scale(1.05); }
.color-btn { width:35px; height:35px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition: all 0.2s; }
.color-btn.active { border-color:#fff; transform:scale(1.2); box-shadow: 0 0 8px rgba(255,255,255,0.8); }
.hidden { display:none !important; }
.btn-action { border: 1px solid #666; background: none; color:#fff; padding: 6px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; margin-left:5px; }
.setting-group { background:rgba(0,0,0,0.5); padding:5px 10px; border-radius:15px; display:flex; align-items:center; gap:5px; font-size:10px; color:#fff; }
select { background:#333; color:#fff; border:1px solid #555; border-radius:5px; font-size:10px; padding:2px; }