* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:#000; color:#fff; font-family: 'Roboto', sans-serif; overscroll-behavior:none; }
body { padding-bottom:80px; }
.app-shell { max-width:480px; margin:0 auto; background:#000; min-height:100vh; position:relative; }
.header-native { position:sticky; top:0; z-index:100; background:rgba(0,0,0,0.9); backdrop-filter:blur(20px); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #1a1a1a; }
.header-left { display:flex; align-items:center; gap:8px; }
.live-dot { width:8px; height:8px; background:#ff0000; border-radius:50%; animation: blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.live-text { color:#FFD700; font-weight:700; font-size:14px; letter-spacing:1px; }
.header-title { font-size:18px; font-weight:700; color:#FFD700; }
.header-right { color:#666; font-size:12px; }
.cam-section-native { position:relative; background:#000; }
.cam-box { width:100%; aspect-ratio:9/12; background:#0a0a0a; border-radius:0; overflow:hidden; position:relative; display:none !important; }
.cam-box.show { display:block !important; }
.cam-box video { width:100%; height:100%; object-fit:cover; }
.cam-box #ai-box { position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); border:1px solid rgba(255,215,0,0.3); border-radius:16px; padding:8px 12px; font-size:11px; color:#FFD700; max-width:160px; }
.cam-controls { display:flex; gap:8px; padding:12px 16px; justify-content:center; background:#000; flex-wrap:wrap; }
.cam-controls .btn { background:#1a1a1a; border:1px solid #333; color:#fff; padding:10px 16px; border-radius:24px; font-size:13px; }
.fab-camera { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); width:72px; height:72px; background:#FFD700; border-radius:50%; border:4px solid #000; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 4px 20px rgba(255,215,0,0.4); z-index:90; cursor:pointer; }
.fab-camera:active { transform:translateX(-50%) scale(0.9); }
.mc-section-native { padding:16px; }
.mc-bubble { background:#111; border:1px solid #222; border-radius:24px; padding:16px; }
.mc-bubble-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mc-avatar { width:32px; height:32px; background:#FFD700; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mc-name { font-size:12px; color:#FFD700; font-weight:700; }
.mc-text { color:#fff; font-size:15px; line-height:1.5; min-height:60px; }
.mc-waveform { margin-top:12px; height:24px; background:repeating-linear-gradient(90deg, #FFD700 0 2px, transparent 2px 4px); display:none; }
.mc-bubble.speaking .mc-waveform { display:block; animation: wave 1s infinite; }
@keyframes wave { 0%{opacity:0.5} 50%{opacity:1} 100%{opacity:0.5} }
.youtube-section-native { padding:0 16px; }
#youtubePlayerContainer { width:100%; aspect-ratio:16/9; background:#000; border-radius:20px; overflow:hidden; position:relative; display:none !important; border:1px solid #222; }
#youtubePlayerContainer.show { display:block !important; }
#youtubePlayer { width:100%; height:100%; }
.mini-player-native { position:fixed; bottom:80px; left:12px; right:12px; background:rgba(20,20,20,0.95); backdrop-filter:blur(20px); border:1px solid #222; border-radius:16px; padding:12px; display:flex; align-items:center; gap:12px; z-index:80; }
.mini-player-art { width:48px; height:48px; background:#1a1a1a; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.mini-player-info { flex:1; min-width:0; }
.mini-player-title { color:#fff; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-player-subtitle { color:#666; font-size:11px; }
.mini-player-controls { display:flex; gap:8px; }
.mini-player-btn { width:36px; height:36px; background:#1a1a1a; border-radius:50%; border:none; color:#fff; }
.mini-player-btn.play { background:#FFD700; color:#000; }
.bottom-sheet { position:fixed; bottom:0; left:0; right:0; background:#0a0a0a; border-top-left-radius:28px; border-top-right-radius:28px; border-top:1px solid #222; max-height:70vh; transform:translateY(100%); transition: transform 0.3s; z-index:200; display:flex; flex-direction:column; }
.bottom-sheet.show { transform:translateY(0); }
.bottom-sheet-handle { width:40px; height:4px; background:#333; border-radius:2px; margin:12px auto; }
.bottom-sheet-header { padding:0 20px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #1a1a1a; }
.bottom-sheet-content { flex:1; overflow:auto; padding:16px; }
#musicList .track-item { background:#111; border:1px solid #1a1a1a; border-radius:12px; padding:12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
#musicList .track-item.active { border-color:#FFD700; }
.bottom-nav-native { position:fixed; bottom:0; left:0; right:0; background:rgba(0,0,0,0.95); backdrop-filter:blur(20px); border-top:1px solid #1a1a1a; display:flex; justify-content:space-around; padding:8px 0; z-index:100; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 16px; color:#666; font-size:10px; cursor:pointer; border-radius:12px; }
.bottom-nav-item.active { color:#FFD700; background:rgba(255,215,0,0.1); }
.bottom-nav-icon { font-size:24px; }
.config-bar-native { padding:16px; display:flex; flex-direction:column; gap:12px; }
.config-row { display:flex; gap:12px; }
.config-item { flex:1; background:#111; border:1px solid #222; border-radius:12px; padding:12px; }
.config-item label { font-size:11px; color:#666; display:block; margin-bottom:6px; }
.config-item select, .config-item input { width:100%; background:#000; border:1px solid #333; color:#fff; padding:8px; border-radius:8px; font-size:13px; }
.btn { background:#1a1a1a; border:1px solid #333; color:#fff; padding:10px 16px; border-radius:24px; font-size:13px; cursor:pointer; }
.btn.is-on { background:#FFD700; color:#000; border-color:#FFD700; }
#camBox { display: none !important; }
#camBox.show { display: block !important; }
#youtubePlayerContainer { display: none !important; }
#youtubePlayerContainer.show { display: block !important; }
#youtubePlayerContainer.show #youtubePlayer { display: block !important; }