:root{--bg-color: #0d1117;--panel-bg: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--text-main: #f0f6fc;--text-muted: #8b949e;--accent-color: #58a6ff;--accent-hover: #79c0ff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);min-height:100dvh;display:flex;justify-content:center;align-items:center;overflow:auto;-webkit-overflow-scrolling:touch}#root{width:100%;height:100%;padding:20px 0}.app-container{display:flex;flex-direction:column;padding:16px;max-width:900px;margin:0 auto}header{text-align:center;margin-bottom:24px}h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#58a6ff,#bc8cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}p.subtitle{color:var(--text-muted);font-size:1rem}.main-content{flex:1;display:flex;flex-direction:column;gap:24px;align-items:center}.video-container{position:relative;width:100%;aspect-ratio:16/10;background:#00000080;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px #0009;border:1px solid var(--panel-border)}.video-canvas{width:100%;height:100%;object-fit:cover}.video-container:fullscreen{aspect-ratio:auto;border-radius:0;border:none;box-shadow:none;background:#000}.video-container:-webkit-full-screen{aspect-ratio:auto;border-radius:0;border:none;box-shadow:none;background:#000}.controls-panel{width:100%;max-width:600px;background:var(--panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:20px;box-shadow:0 8px 32px #0000004d}.control-group{display:flex;flex-direction:column;gap:12px}.control-header{display:flex;justify-content:space-between;align-items:center}.control-label{font-weight:600;font-size:1rem}.delay-value{background:#58a6ff26;color:var(--accent-color);padding:4px 12px;border-radius:10px;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;border:1px solid rgba(88,166,255,.3)}input[type=range]{-webkit-appearance:none;width:100%;height:10px;background:#ffffff26;border-radius:5px;outline:none;transition:background .2s}input[type=range]:hover{background:#ffffff40}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--accent-color);cursor:pointer;box-shadow:0 0 16px #58a6ff99;transition:transform .15s ease,background .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--accent-hover)}.permission-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#0d1117d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;gap:24px;padding:24px;text-align:center}.permission-overlay h2{font-size:1.5rem;color:#fff}.permission-overlay p{font-size:1rem;line-height:1.6;max-width:500px;color:var(--text-muted)}button.primary-btn{background:var(--accent-color);color:#0d1117;border:none;padding:14px 28px;font-size:1.1rem;font-weight:700;border-radius:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #58a6ff66}button.primary-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #58a6ff99}.status-indicator{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;background:#000000bf;padding:6px 12px;border-radius:16px;font-size:.85rem;font-weight:500;z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.pulse-dot{width:10px;height:10px;background-color:#f55;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #ff5555b3}70%{transform:scale(1);box-shadow:0 0 0 8px #f550}to{transform:scale(.95);box-shadow:0 0 #f550}}.buffer-info{font-size:.85rem;color:var(--text-muted);text-align:center;margin-top:4px}.fullscreen-btn{position:absolute;top:12px;right:12px;background:#000000bf;border:1px solid rgba(255,255,255,.1);color:#fff;width:36px;height:36px;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.fullscreen-btn:hover{background:#58a6ff33;border-color:var(--accent-color);transform:scale(1.05)}.fullscreen-icon{width:18px;height:18px;fill:currentColor}.switch-camera-btn{position:absolute;top:12px;right:56px;background:#000000bf;border:1px solid rgba(255,255,255,.1);color:#fff;width:36px;height:36px;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.switch-camera-btn:hover{background:#58a6ff33;border-color:var(--accent-color);transform:scale(1.05)}.switch-camera-icon{width:18px;height:18px;fill:currentColor}.pose-toggle-btn{position:absolute;top:12px;right:100px;background:#000000bf;border:1px solid rgba(255,255,255,.1);color:#fff;width:36px;height:36px;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.pose-toggle-btn:hover{background:#58a6ff33;border-color:var(--accent-color);transform:scale(1.05)}.pose-toggle-btn.pose-active{background:#e040fb40;border-color:#e040fb;box-shadow:0 0 16px #e040fb66}.pose-toggle-btn.pose-active:hover{background:#e040fb59}.pose-toggle-btn:disabled{cursor:wait;opacity:.7}.pose-icon{width:20px;height:20px;fill:none;stroke:currentColor}.pose-icon circle{fill:currentColor}.pose-loading-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#e040fb;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
    #root { padding: 8px 0; }
    .app-container { padding: 10px; }
    header { margin-bottom: 16px; }
    h1 { font-size: 1.4rem; margin-bottom: 4px; }
    p.subtitle { font-size: 0.85rem; }
    .main-content { gap: 16px; }
    .video-container {
        aspect-ratio: auto;
        width: 100%;
        height: 45vh;
        min-height: 200px;
        border-radius: 12px;
    }
    .controls-panel {
        padding: 16px;
        border-radius: 12px;
        gap: 16px;
    }
    .control-label { font-size: 0.9rem; }
    .delay-value { padding: 3px 10px; font-size: 0.85rem; }
    input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
    .status-indicator { top: 8px; left: 8px; font-size: 0.75rem; padding: 4px 10px; }
    .fullscreen-btn { top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 8px; }
    .fullscreen-icon { width: 16px; height: 16px; }
    .switch-camera-btn { top: 8px; right: 48px; width: 32px; height: 32px; border-radius: 8px; }
    .switch-camera-icon { width: 16px; height: 16px; }
    .pose-toggle-btn { top: 8px; right: 88px; width: 32px; height: 32px; border-radius: 8px; }
    .permission-overlay h2 { font-size: 1.2rem; }
    .permission-overlay p { font-size: 0.9rem; }
    button.primary-btn { padding: 12px 24px; font-size: 1rem; }
}

@media (max-width: 380px) {
    h1 { font-size: 1.2rem; }
    .video-container { height: 40vh; min-height: 180px; }
    .controls-panel { padding: 12px; }
}

/* Landscape phone - make video bigger */
@media (max-height: 500px) and (orientation: landscape) {
    #root { padding: 4px 0; }
    .app-container { padding: 8px; }
    header { margin-bottom: 8px; }
    h1 { font-size: 1.2rem; margin-bottom: 2px; }
    p.subtitle { font-size: 0.8rem; }
    .main-content { gap: 8px; }
    .video-container { height: 55vh; min-height: 150px; }
    .controls-panel { padding: 12px; gap: 12px; }
    .control-label { font-size: 0.85rem; }
}