:root{--bg-color:#121212;--panel-color:#1e1e1e;--text-color:#e0e0e0;--accent:#3b82f6;--danger:#ef4444;--success:#10b981;--btn-record:#2a9134;--btn-zip:#d97706;--btn-snap:#8b5cf6;--grid-line-color:#ffffff;--grid-gap:1px;--default-cell-bg:#aa0000}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);color:var(--text-color);margin:0;display:flex;height:100vh;overflow:hidden;user-select:none}#sidebar{width:280px;background:var(--panel-color);padding:20px;display:flex;flex-direction:column;border-right:1px solid #333;z-index:10;overflow-y:auto}#sidebar>div{margin-bottom:24px}#sidebar>div:last-child{margin-bottom:0}h2{margin:0 0 10px;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:#888}.control-group{display:flex;flex-direction:column;gap:8px}label{font-size:.8rem;color:#aaa}button{padding:10px;background:#2d2d2d;border:1px solid #444;color:#ccc;cursor:pointer;transition:all .2s;border-radius:4px;font-size:.85rem}button:hover{background:#3d3d3d;color:#fff}button.active{background:var(--accent);border-color:var(--accent);color:#fff}button.disabled{opacity:.4;pointer-events:none;cursor:not-allowed}.grid-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ratio-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.sidebar-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;width:100%}.sidebar-row>div{min-width:0;margin-bottom:0!important}input[type=color]{width:100%;height:35px;border:none;padding:0;cursor:pointer;background:none}input[type=range]{width:100%;cursor:pointer}.color-action-row{display:flex;gap:10px;align-items:center}.color-action-row input[type=color]{flex:1}.btn-overlay{flex:1;padding:0 10px;height:35px;font-size:.75rem;background:#444;border:1px solid #666;white-space:nowrap}.btn-overlay:hover{background:#555;color:#fff}#account-status{position:absolute;top:20px;right:20px;width:220px;padding:15px;background:#1e1e1ee6;backdrop-filter:blur(5px);border-radius:8px;border:1px solid #444;text-align:center;z-index:500;box-shadow:0 4px 15px #00000080}.status-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:700;margin-bottom:8px}.badge-free{background:#444;color:#aaa}.badge-pro{background:var(--success);color:#fff;box-shadow:0 0 10px #10b98166}.buy-link{display:block;width:100%;padding:8px;background:#6366f1;color:#fff;text-decoration:none;border-radius:4px;font-size:.85rem;margin-top:5px;cursor:pointer;border:none;box-sizing:border-box}.buy-link:hover{background:#4f46e5}#workspace{flex:1;display:flex;justify-content:center;align-items:center;padding:40px;position:relative;background-image:radial-gradient(#222 1px,transparent 1px);background-size:22px 22px}#editor-container{box-shadow:0 0 50px #00000080;position:relative;overflow:hidden;aspect-ratio:9/16;height:90%;display:grid;gap:var(--grid-gap);background-color:var(--grid-line-color)}.layout-2h{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.layout-2v{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.layout-3h{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr}.layout-3v{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr}.layout-2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.layout-3x2{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}.layout-2x3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}.layout-3x3{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.cell{background-color:var(--default-cell-bg);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;cursor:grab}.cell.drag-over{box-shadow:inset 0 0 0 2px var(--accent)}.cell .placeholder{pointer-events:none;color:#888;font-size:.9rem;mix-blend-mode:difference}.cell video,.cell img{position:absolute;max-width:none;max-height:none;width:auto;height:auto;pointer-events:none;transform-origin:50% 50%;display:block}.convert-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;z-index:20}.convert-progress{width:60%;height:6px;background:#444;margin-top:10px;border-radius:3px;overflow:hidden}.convert-bar{height:100%;width:0%;background:var(--accent);transition:width .2s}#context-menu{display:none;position:absolute;background:#2a2a2a;border:1px solid #444;box-shadow:2px 2px 10px #00000080;z-index:1000;width:240px;border-radius:4px;padding:5px 0}#context-menu div{padding:8px 15px;cursor:pointer;color:#ddd;font-size:.9rem}#context-menu div:hover{background:var(--accent);color:#fff}.menu-divider{height:1px;background:#444;margin:4px 0;padding:0!important;cursor:default!important}.ctx-lock{margin-right:8px;font-size:.9em;opacity:.7}#resolution-select,#grid-select,#duration-mode{width:100%;padding:10px;background:#2d2d2d;border:1px solid #444;color:#ccc;border-radius:4px;font-size:.85rem;cursor:pointer;outline:none;margin-bottom:5px}#resolution-select:hover,#grid-select:hover,#duration-mode:hover{background:#3d3d3d;color:#fff}option{background:#2d2d2d;color:#ccc;padding:5px}input[type=range]:disabled{opacity:.3;cursor:not-allowed}input[type=range]:disabled+span{color:#444!important}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:9999;justify-content:center;align-items:center}.modal-content{background:var(--panel-color);padding:30px;border-radius:8px;width:300px;border:1px solid #444;box-shadow:0 10px 25px #000c;text-align:center}.modal-content input{width:100%;padding:10px;margin:15px 0;background:#333;border:1px solid #555;color:#fff;border-radius:4px;box-sizing:border-box}.close-modal{float:right;cursor:pointer;font-size:1.2rem;margin-top:-10px;color:#aaa}.close-modal:hover{color:#fff}#color-modal{display:none;position:fixed;top:100px;left:400px;width:280px;background:#1e1e1ef2;border:1px solid #555;border-radius:8px;box-shadow:0 8px 30px #000000b3;z-index:2000;padding:0;overflow:hidden}#color-header{background:#222;padding:10px 15px;border-bottom:1px solid #444;font-weight:700;cursor:move;display:flex;justify-content:space-between;align-items:center}#color-body{padding:15px}.color-control{margin-bottom:12px}.color-control label{display:flex;justify-content:space-between;margin-bottom:4px;font-size:.8rem;color:#ccc}.color-control input{width:100%}.color-val{color:var(--accent);font-weight:700}.color-actions{display:flex;justify-content:space-between;margin-top:15px}.btn-small{padding:6px 12px;font-size:.8rem;border-radius:4px;border:1px solid #555;background:#333;color:#fff;cursor:pointer}.btn-small:hover{background:#444}.action-btn{font-weight:700;margin-top:5px;color:#fff;border:none;position:relative}.locked-icon{display:inline-block;margin-left:5px;opacity:.7}button:disabled{background:#444!important;cursor:not-allowed;opacity:.6;color:#aaa}#recording-status{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000c;border:1px solid #444;padding:10px;border-radius:6px;display:none;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 12px #0006;z-index:100}.status-text{color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px}.rec-dot{width:10px;height:10px;background:var(--danger);border-radius:50%;animation:blink 1s infinite}#stop-btn{background:var(--danger);border:none;width:100%;color:#fff;padding:6px;font-size:.8rem}#progress-container{width:100%;height:4px;background:#333;margin-top:5px;border-radius:2px;overflow:hidden;display:none}#progress-bar{width:0%;height:100%;background:var(--accent);transition:width .1s}#floating-play-btn{position:absolute;bottom:30px;left:50%;transform:translate(-50%);width:60px;height:60px;border-radius:50%;background:#00000080;border:2px solid rgba(255,255,255,.3);color:#fff;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:900;opacity:1;transition:all .3s ease;backdrop-filter:blur(4px);padding:0}#floating-play-btn:hover{background:var(--accent);border-color:#fff;transform:translate(-50%) scale(1.1);box-shadow:0 0 20px #00000080}#floating-play-btn svg{fill:currentColor;width:32px;height:32px;pointer-events:none}.export-row{display:flex;justify-content:space-around;align-items:center;margin-top:10px;gap:10px}.export-icon-btn{position:relative;width:50px;height:50px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.3);padding:0;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease}.export-icon-btn svg{width:24px;height:24px;fill:#ccc;transition:fill .2s ease}.export-icon-btn:hover{background:#ffffff1a;border-color:#fffc;transform:scale(1.05)}.export-icon-btn:hover svg{fill:#fff}#render-btn:hover svg{fill:var(--danger)}#snap-btn:hover svg{fill:var(--btn-snap)}#zip-btn:hover svg{fill:var(--btn-zip)}.export-icon-btn .locked-icon{position:absolute;bottom:-2px;right:-2px;font-size:12px;background:#222;border-radius:50%;padding:2px;border:1px solid #444}.export-icon-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;border-color:#ffffff1a}@keyframes blink{50%{opacity:0}}@media screen and (max-height:1000px){#sidebar{width:260px;padding:20px 12px}#sidebar>div{margin-bottom:16px}h2{margin:0 0 5px;font-size:.8rem}.control-group{gap:4px}button,#resolution-select,#grid-select,#duration-mode{padding:6px 8px;font-size:.8rem}.btn-overlay{height:30px;font-size:.7rem}input[type=color]{height:30px}.action-btn{margin-top:2px}}