::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: #030712; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
        body { touch-action: none; user-select: none; -webkit-user-select: none; background-color: #000000; }
        
        .app-height {
            height: 100vh;
            height: 100dvh;
        }

        input[type=range] { touch-action: none; }
        canvas#timelineCanvas, canvas#bezierCanvas { touch-action: none; }
        .glow-cyan { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }

        @media (orientation: landscape) {
            main#workspace-main {
                flex-direction: row-reverse !important;
            }
            div#viewport-container {
                flex: 1 !important;
                height: 100% !important;
            }
            div#control-panel-container {
                width: 360px !important;
                height: 100% !important;
                max-height: 100% !important;
                min-height: 100% !important;
                border-t: none !important;
                border-r: 1px solid rgba(30, 41, 59, 0.8) !important;
            }
        }
    

:root{--ac:#3b82f6;--ac2:#1d4ed8;--bg:#0a0a0c;--card:#17171b;--ln:#26262c}
body{background:var(--bg)!important}
#app-header{height:56px;background:var(--bg);border-bottom:1px solid var(--ln);display:flex;align-items:center;justify-content:space-between;padding:0 10px;gap:6px;flex-shrink:0;z-index:30}
.ib{width:38px;height:38px;border-radius:12px;background:var(--card);color:#e5e7eb;display:flex;align-items:center;justify-content:center;border:0}
.ib:active{transform:scale(.93)}
.pbtn{background:var(--ac);color:#fff;font-weight:800;border:0;border-radius:12px;padding:0 16px;height:38px;box-shadow:0 4px 0 var(--ac2);font-size:13px}
.pbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ac2)}
.gbtn{background:var(--card);color:#d1d5db;font-weight:700;border:0;border-radius:12px;height:44px;box-shadow:0 3px 0 #0006}
#control-panel-container{border-radius:18px 18px 0 0;background:var(--bg)!important}
#control-panel-container>.flex-1{order:1}
#control-panel-container>div:last-child{order:2}
#control-panel-container>div:first-child{order:3;border-top:1px solid var(--ln);border-bottom:0;background:var(--bg)!important;padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px))}
.nav-tab-btn{flex-direction:column!important;gap:2px!important;padding:6px 0!important;font-size:10px!important;font-weight:600!important;color:#9ca3af!important;border:0!important;background:transparent!important}
.nav-tab-btn i{font-size:20px;color:inherit!important}
.nav-tab-btn.text-cyan-400{color:var(--ac)!important}
.nav-tab-btn.text-cyan-400 i{filter:drop-shadow(0 0 6px #3b82f688)}
.text-cyan-400{color:#60a5fa}.bg-cyan-400{background:var(--ac)!important;color:#fff!important}
#viewport-container{border-radius:0}
.ov{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 20px;overflow:auto;touch-action:pan-y}
.ov.on{display:flex}
.eyebrow{font:600 12px ui-monospace,monospace;letter-spacing:.2em;color:var(--ac)}
.row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--ln);width:100%;background:none;color:#fff;text-align:left}
.row small{color:#9ca3af;font:12px ui-monospace,monospace}
.dlg{position:fixed;inset:0;z-index:110;background:#000a;display:none;align-items:center;justify-content:center;padding:16px}
.dlg.on{display:flex}
.dlg>div{background:#111114;border:1px solid var(--ln);border-radius:26px;padding:20px;width:100%;max-width:420px;max-height:92vh;overflow:auto;touch-action:pan-y}
.chip{background:var(--card);color:#d1d5db;border:2px solid transparent;border-radius:14px;padding:12px 4px;font-weight:700;font-size:13px;flex:1;box-shadow:0 3px 0 #0006}
.chip.sel{border-color:var(--ac);color:#60a5fa;background:#3b82f622}
h3.lb{font-weight:700;margin:16px 0 8px;font-size:15px}

:root{--navh:calc(60px + env(safe-area-inset-bottom,0px))}
#control-panel-container{position:relative;height:60%!important;max-height:none!important;min-height:0!important;display:flex;flex-direction:column;justify-content:flex-start!important;overflow:hidden;background:var(--bg)!important;border-top:1px solid var(--ln)}
#control-panel-container>div:first-child{order:2;position:relative;z-index:30;height:var(--navh);box-sizing:border-box;flex-shrink:0;align-items:flex-start!important;padding:6px 2px 0!important;background:#0c0c10!important;border-top:1px solid var(--ln)!important}
#control-panel-container>.flex-1{order:0;position:absolute;left:0;right:0;bottom:var(--navh);height:var(--seth,50%);z-index:20;background:#101015!important;border-top:1px solid #2a2a33;border-radius:20px 20px 0 0;box-shadow:0 -14px 30px rgba(0,0,0,.65);padding:28px 12px 12px!important;touch-action:pan-y;transition:transform .25s ease,visibility .25s}
#control-panel-container>div:last-child{order:1;flex:1 1 0;min-height:0}
#set-grab{position:absolute;left:0;right:0;bottom:calc(var(--navh) + var(--seth,50%) - 28px);height:34px;z-index:25;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;touch-action:none;cursor:ns-resize}
#set-grab i{width:48px;height:5px;border-radius:3px;background:#59606e}
body.tl-full #set-grab{visibility:hidden;pointer-events:none}
body.tl-full #control-panel-container{height:72%!important}
body.tl-full #control-panel-container>.flex-1{transform:translateY(105%);visibility:hidden;pointer-events:none}
@media (orientation:landscape){body.tl-full div#control-panel-container{height:100%!important}}
#tl-panel{display:flex;flex-direction:column;padding:6px 8px 6px!important;gap:6px;background:#08080b!important;border:0!important}
#tl-wrap{flex:1;height:auto!important;min-height:60px;border-radius:12px}
#tl-panel>div:first-child{justify-content:center;position:relative;min-height:40px}
#tl-panel>div:first-child>div:first-child{display:none}
#tl-panel>div:first-child>div:last-child{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin:0}
#tl-panel .ib{width:36px;height:36px;border-radius:10px}
#btn-prev,#btn-next{width:38px!important;height:36px!important}
#btn-play{width:46px!important;height:38px!important;border-radius:12px!important;background:var(--ac)!important;color:#fff!important;box-shadow:0 3px 0 var(--ac2)!important}
#tl-panel button{min-height:34px}
#tools-grid button{height:44px!important;flex:none!important;font-size:11px!important;border-radius:12px!important}
#tools-zoom input{width:100%!important;height:6px!important}
#viewport-container{background:#0a0f1c!important}
#viewport-container::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45))}
.fb{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:40;width:44px;height:44px;border-radius:50%;background:rgba(10,12,20,.85);color:#fff;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:17px;backdrop-filter:blur(8px)}
.fb:active{transform:scale(.93)}
#pname{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);left:50%;transform:translateX(-50%);z-index:40;max-width:40%;padding:5px 14px;border-radius:999px;background:rgba(10,12,20,.7);color:#e5e7eb;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px)}
#viewport-container>div.top-2.left-2{top:auto!important;bottom:10px!important;left:10px!important}
#btn-cam-mode,#btn-pip-toggle{border-radius:999px!important;background:rgba(10,15,28,.82)!important;padding:7px 12px!important;font-size:10px!important}
#pip-container{border-color:var(--ac)!important;border-radius:14px!important;width:132px!important;height:88px!important}
#pip-container>div:first-child{display:none!important}

body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.glow-cyan{box-shadow:none!important}
#toast-container>div{background:rgba(17,17,20,.96)!important;border-radius:10px!important;padding:8px 14px!important;font-weight:600!important;letter-spacing:.01em}
.pbtn,.gbtn{letter-spacing:.01em}
h3.lb{letter-spacing:.01em}