/* ─── SideKit Shared Styles ─── */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Theme: Dark (default) */
:root,html[data-theme="dark"]{
  --bg:#181818;--surface:#222;--surface2:#252525;--surface3:#2c2c2c;
  --border:#2e2e2e;--border2:#3a3a3a;
  --accent:#1D9E75;--accent-hover:#24b888;--accent-dim:rgba(29,158,117,.12);
  --danger:#c53030;--success:#1D9E75;
  --text:#e0e0e0;--text2:#888;--text3:#555;
  --canvas-bg:#1e1e1e;--canvas-checker1:#1c1c1c;--canvas-checker2:#232323;
  --handle-border:rgba(0,0,0,.4);--handle-bg:rgba(255,255,255,.9);--vid-border:rgba(29,158,117,.6);
  --radius:5px;--radius-sm:4px;
  --font:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono','SF Mono','Menlo',monospace;
}

/* Theme: Light */
html[data-theme="light"]{
  --bg:#f5f5f5;--surface:#fff;--surface2:#fafafa;--surface3:#f0f0f0;
  --border:#e0e0e0;--border2:#d0d0d0;
  --accent:#178a63;--accent-hover:#1D9E75;--accent-dim:rgba(29,158,117,.08);
  --danger:#c53030;--success:#178a63;
  --text:#1a1a1a;--text2:#666;--text3:#999;
  --canvas-bg:#e0e0e0;--canvas-checker1:#d8d8d8;--canvas-checker2:#e8e8e8;
  --handle-border:rgba(0,0,0,.2);--handle-bg:#fff;--vid-border:rgba(23,138,99,.7);
}

/* Base */
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;line-height:1.5;overflow-x:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#4a4a4a}
button{cursor:pointer;font:inherit;border:none;background:none;color:var(--text)}
input,select{font-family:var(--mono);color:var(--text);background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:4px 8px;font-size:11px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
input[type=number]{width:64px;text-align:center;font-family:var(--mono)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--border2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:-4.5px;border:none}

#app{padding:0 0 32px}

/* Title bar */
.header{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.header h1{font-size:12px;font-weight:500;color:var(--text2);letter-spacing:.02em}
.header .badge{font-size:9px;background:var(--accent-dim);color:var(--accent);padding:2px 6px;border-radius:3px;font-weight:500}

/* Upload */
#upload-zone{border:1px dashed var(--border2);border-radius:var(--radius);padding:40px 24px;text-align:center;cursor:pointer;margin:16px auto;max-width:70%}
#upload-zone:hover,#upload-zone.is-dragover{border-color:var(--accent);background:var(--accent-dim)}
#upload-zone .icon{font-size:28px;margin-bottom:6px;opacity:.4}
#upload-zone p{color:var(--text2);font-size:11px}
#upload-zone .formats{font-size:10px;color:var(--text3);margin-top:4px}
#file-input{display:none}

/* Section */
.section{background:var(--surface);border-top:1px solid var(--border);overflow:visible}
.section-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 14px 4px}

/* Canvas / Artboard area */
#player-section.is-hidden{display:none}
.canvas-outer{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;min-height:240px;background:var(--canvas-bg);padding:32px;cursor:default}
.canvas-inner{position:relative}
.canvas-stage{position:relative;background:repeating-conic-gradient(var(--canvas-checker1) 0% 25%,var(--canvas-checker2) 0% 50%) 0 0/10px 10px;overflow:hidden;box-shadow:0 0 0 1px var(--border)}
.canvas-stage video,.canvas-stage canvas.src-canvas{position:absolute;transform-origin:center center;display:block;pointer-events:none;object-fit:fill}

/* Handle wrap */
.vid-handle-wrap{position:absolute;pointer-events:auto;z-index:5}
.vid-handle-wrap .vid-border{position:absolute;inset:0;border:1px solid var(--vid-border);pointer-events:none}
.vid-handle-wrap .vid-diag{display:none}
.vid-anchor{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:4}
.vid-anchor-gfx{display:none}
.vid-anchor-gfx::before,.vid-anchor-gfx::after{content:'';position:absolute;background:var(--accent)}
.vid-anchor-gfx::before{width:12px;height:1px;top:5.5px;left:0}
.vid-anchor-gfx::after{width:1px;height:12px;top:0;left:5.5px}
.vid-anchor-ring{position:absolute;inset:1px;border:1px solid var(--accent);border-radius:50%}

/* Handles */
.vid-handle{position:absolute;width:7px;height:7px;background:var(--handle-bg);border:1px solid var(--handle-border);pointer-events:auto;z-index:3;border-radius:1px;cursor:pointer;padding:4px;margin:-4px}
.vid-handle.tl,.vid-handle.br{cursor:nwse-resize}
.vid-handle.tr,.vid-handle.bl{cursor:nesw-resize}
.vid-handle.tm,.vid-handle.bm{cursor:ns-resize}
.vid-handle.ml,.vid-handle.mr{cursor:ew-resize}
.vid-handle.tl{top:0;left:0;margin:0;transform:translate(-50%,-50%)}
.vid-handle.tr{top:0;right:0;margin:0;transform:translate(50%,-50%)}
.vid-handle.bl{bottom:0;left:0;margin:0;transform:translate(-50%,50%)}
.vid-handle.br{bottom:0;right:0;margin:0;transform:translate(50%,50%)}
.vid-handle.tm{top:0;left:50%;margin:0;transform:translate(-50%,-50%)}
.vid-handle.bm{bottom:0;left:50%;margin:0;transform:translate(-50%,50%)}
.vid-handle.ml{top:50%;left:0;margin:0;transform:translate(-50%,-50%)}
.vid-handle.mr{top:50%;right:0;margin:0;transform:translate(50%,-50%)}
.vid-move-area{position:absolute;inset:0;pointer-events:auto;z-index:1;cursor:move}
.vid-size-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:10px;font-family:var(--mono);color:var(--text3);background:rgba(0,0,0,.6);padding:1px 5px;border-radius:3px;white-space:nowrap;pointer-events:none}

/* Canvas size bar */
.canvas-bar{display:flex;align-items:center;gap:5px;padding:4px 12px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:10px;color:var(--text2)}
.canvas-bar .cb-lbl{color:var(--text3);font-size:10px;letter-spacing:.03em;margin-right:1px;cursor:ew-resize}
.canvas-bar .cb-lbl:hover{color:var(--text2)}
.canvas-bar .cb-lbl:active{color:var(--accent)}
.canvas-bar .cb-input{width:52px;text-align:center;padding:2px 4px;font-size:10px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);color:var(--text);height:18px;outline:none;border-radius:3px;-moz-appearance:textfield}
.canvas-bar .cb-input::-webkit-inner-spin-button,.canvas-bar .cb-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.canvas-bar .cb-input:focus{border-color:var(--accent)}
.canvas-bar .cb-x{color:var(--text3);font-size:9px}
.canvas-bar .cb-unit{color:var(--text3);font-size:9px}

/* Reference point grid */
.ref-grid{display:inline-grid;grid-template:repeat(3,7px)/repeat(3,7px);gap:0;margin-right:6px;border:1px solid var(--border2);cursor:pointer;flex-shrink:0;border-radius:2px;overflow:hidden}
.ref-grid .ref-dot{width:7px;height:7px;background:var(--surface3);border:0.5px solid var(--border2);position:relative}
.ref-grid .ref-dot:hover{background:#3a3a3a}
.ref-grid .ref-dot.is-active{background:var(--accent)}
.ref-grid .ref-dot.is-active::after{content:'';position:absolute;inset:1.5px;background:#fff;border-radius:50%}

/* Transform toolbar */
.canvas-toolbar{display:flex;gap:0;align-items:center;padding:0 8px;background:var(--surface);border-bottom:1px solid var(--border);font-size:10px;color:var(--text2);height:26px;overflow-x:auto;white-space:nowrap}
.canvas-toolbar .tb-field{display:flex;align-items:center;gap:0;padding:0 5px;height:100%;border-right:1px solid var(--border)}
.canvas-toolbar .tb-field:last-child{border-right:none}
.canvas-toolbar .tb-lbl{color:var(--text3);font-size:10px;margin-right:2px;user-select:none;cursor:ew-resize}
.canvas-toolbar .tb-lbl:hover{color:var(--text2)}
.canvas-toolbar .tb-lbl:active{color:var(--accent)}
.canvas-toolbar .tb-val{width:56px;text-align:right;padding:1px 4px;font-size:10px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:3px;height:17px;outline:none;-moz-appearance:textfield}
.canvas-toolbar .tb-val::-webkit-inner-spin-button,.canvas-toolbar .tb-val::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.canvas-toolbar .tb-val:focus{border-color:var(--accent)}
.canvas-toolbar .tb-unit{color:var(--text3);font-size:9px;margin-left:1px;user-select:none}
.canvas-toolbar .tb-link{display:flex;align-items:center;justify-content:center;padding:0 3px;cursor:pointer;user-select:none;height:100%;border-right:1px solid var(--border)}
.canvas-toolbar .tb-link svg{width:10px;height:10px;display:block}
.canvas-toolbar .tb-link:hover svg{stroke:var(--text2)}
.canvas-toolbar .tb-link.is-active svg{stroke:var(--text2)}
.canvas-toolbar .tb-link:not(.is-active) svg{stroke:var(--text3)}
.canvas-toolbar .tb-link:not(.is-active) svg .lk-shackle{d:path("M7 11V7a5 5 0 0 1 9 0");transform:translateX(2px)}
.canvas-toolbar .tb-btn{font-size:9px;color:var(--text2);cursor:pointer;background:var(--surface3);border:1px solid var(--border2);border-radius:3px;padding:0 5px;height:17px;margin:0 1px;display:inline-flex;align-items:center;justify-content:center}
.canvas-toolbar .tb-btn:hover{background:var(--border2);color:var(--text)}
.canvas-toolbar .tb-btn svg{display:block}

/* Video controls */
.video-controls{padding:8px 14px;display:flex;flex-direction:column;gap:6px;background:var(--surface2);border-top:1px solid var(--border)}
.seek-row{display:flex;align-items:center;gap:8px}
.seek-row input[type=range]{flex:1}
.time-display{font-size:10px;font-family:var(--mono);color:var(--text3);white-space:nowrap;min-width:110px}
.ctrl-row{display:flex;align-items:center;gap:4px}
.ctrl-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:var(--radius-sm);background:var(--surface3);border:1px solid var(--border);font-size:12px}
.ctrl-btn:hover{background:var(--border2)}
.ctrl-btn svg{width:14px;height:14px;fill:currentColor}
.add-frame-btn{margin-left:auto;background:var(--accent);color:#fff;padding:4px 12px;border-radius:var(--radius-sm);font-weight:500;font-size:11px;display:flex;align-items:center;gap:5px}
.add-frame-btn:hover{background:var(--accent-hover)}
.fps-badge{font-size:10px;font-family:var(--mono);color:var(--text3);margin-left:6px}

/* Frames */
#frames-section.is-hidden{display:none}
.frames-scroll{padding:8px 14px;overflow-x:auto;display:flex;gap:6px;min-height:80px;align-items:flex-start}
.frame-thumb{position:relative;flex-shrink:0;width:72px;border-radius:var(--radius-sm);overflow:hidden;border:1.5px solid transparent;cursor:grab;user-select:none}
.frame-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.frame-thumb:hover{border-color:var(--accent)}
.frame-thumb.dragging{opacity:.4;transform:scale(.95)}
.frame-thumb.drag-over{border-color:var(--accent);transform:scale(1.05)}
.frame-thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;pointer-events:none}
.frame-thumb .frame-idx{position:absolute;top:2px;left:2px;font-size:8px;font-family:var(--mono);background:rgba(0,0,0,.7);color:#fff;padding:0 3px;border-radius:2px;font-weight:500}
.frame-thumb .frame-time{position:absolute;bottom:0;left:0;right:0;font-size:8px;font-family:var(--mono);background:rgba(0,0,0,.75);color:var(--text3);padding:1px 3px;text-align:center}
.frame-thumb .frame-del{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;opacity:0}
.frame-thumb:hover .frame-del{opacity:1}
.frame-thumb .frame-del:hover{background:var(--danger)}
.frame-delay{display:flex;justify-content:center;padding:2px 0}
.frame-delay input{width:44px;text-align:center;font-size:9px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);color:var(--text2);padding:1px 2px;border-radius:2px;height:16px}
.frame-delay input:focus{border-color:var(--accent);color:var(--text)}
.frame-delay-unit{font-size:8px;color:var(--text3);margin-left:1px}
.frames-empty{color:var(--text3);font-size:11px;display:flex;align-items:center;justify-content:center;width:100%;padding:14px}

/* Settings */
#settings-section.is-hidden{display:none}
.settings-grid{display:flex;flex-wrap:wrap;gap:12px;padding:8px 14px 12px;align-items:flex-end}
.setting-group{display:flex;flex-direction:column;gap:3px}
.setting-group label{font-size:10px;color:var(--text3);font-weight:500}
.toggle-wrap{display:flex;align-items:center;gap:6px;height:24px}
.toggle{position:relative;width:30px;height:16px;background:var(--border2);border-radius:8px;cursor:pointer;flex-shrink:0}
.toggle.is-active{background:var(--accent)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .15s}
.toggle.is-active::after{transform:translateX(14px)}
.toggle-label{font-size:11px;color:var(--text3)}
.btn-row{display:flex;gap:6px;padding:0 14px 12px;flex-wrap:wrap}
.btn{padding:5px 14px;border-radius:var(--radius-sm);font-weight:500;font-size:11px}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--accent-hover)}
.btn-secondary{background:var(--surface3);color:var(--text2);border:1px solid var(--border2)}
.btn-secondary:hover:not(:disabled){background:var(--border2);color:var(--text)}
.btn-success{background:var(--accent);color:#fff}
.btn-success:hover:not(:disabled){background:var(--accent-hover)}

/* Output */
#output-section.is-hidden{display:none}
.output-wrap{padding:12px 14px}
.preview-area{background:var(--bg);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;min-height:140px;position:relative;overflow:hidden;border:1px solid var(--border)}
.preview-area img{max-width:100%;max-height:280px}
.size-info{margin-top:8px;font-size:11px;font-family:var(--mono);color:var(--text2);display:flex;gap:14px;flex-wrap:wrap}
.size-info span{display:flex;align-items:center;gap:3px}
.size-info .label{color:var(--text3)}
.size-info .compressed{color:var(--accent)}
.download-row{margin-top:10px;display:flex;gap:6px;align-items:center}

/* Progress */
.progress-bar{height:2px;background:var(--border);border-radius:1px;overflow:hidden;margin:6px 14px 8px}
.progress-bar .fill{height:100%;background:var(--accent);transition:width .3s;width:0%}
#status-msg{font-size:10px;color:var(--text3);padding:0 14px 8px;min-height:18px}

/* Loading overlay */
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:10px}
.loading-overlay .spinner{width:28px;height:28px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.loading-overlay p{color:var(--text2);font-size:11px}
@keyframes spin{to{transform:rotate(360deg)}}
.is-hidden{display:none!important}

/* App shell */
.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.sidebar-overlay.is-open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:51;transform:translateX(-100%);transition:transform .2s}
.sidebar.is-open{transform:translateX(0)}
.sidebar-brand{padding:12px 14px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.sidebar-brand .brand-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.sidebar-nav{padding:8px 0;flex:1}
.sidebar-nav .nav-label{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:8px 14px 4px}
.sidebar-nav .nav-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:11px;color:var(--text2);cursor:pointer;border-left:2px solid transparent;text-decoration:none}
.sidebar-nav .nav-item:hover{background:var(--surface2);color:var(--text)}
.sidebar-nav .nav-item.is-active{color:var(--accent);background:var(--accent-dim);border-left-color:var(--accent)}
.sidebar-nav .nav-item .nav-icon{width:16px;height:16px;opacity:.5;flex-shrink:0}
.sidebar-nav .nav-item.is-active .nav-icon{opacity:1}
.sidebar-footer{padding:10px 14px;border-top:1px solid var(--border);font-size:9px;color:var(--text3)}
.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.app-main-scroll{flex:1;overflow-y:auto}

/* Theme toggle */
.theme-toggle{margin-left:auto;display:flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:var(--radius-sm);color:var(--text2)}
.theme-toggle:hover{background:var(--surface3);color:var(--text)}

/* Hamburger */
.hamburger{display:flex;align-items:center;justify-content:center;width:28px;height:24px;cursor:pointer;border-radius:var(--radius-sm);margin-right:4px;flex-shrink:0}
.hamburger:hover{background:var(--surface3)}
.hamburger svg{width:16px;height:16px;stroke:var(--text2);fill:none;stroke-width:2;stroke-linecap:round}