*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Shell ── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Toolbar ── */
.tb{height:44px;display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0;border-bottom:.5px solid var(--color-border-tertiary);background:var(--color-background-secondary)}
.tb-logo{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--color-text-primary);margin-right:4px;display:flex;align-items:center;gap:5px}
.tb-sep{width:1px;height:20px;background:var(--color-border-tertiary);flex-shrink:0}
.tb-spacer{flex:1}

/* ── Workspace ── */
.workspace{flex:1;display:flex;overflow:hidden;min-height:0}

/* ── Canvas ── */
.cv{flex:1;background:#141414;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cv-frame{position:relative;width:100%;aspect-ratio:16/9;box-shadow:0 10px 50px rgba(0,0,0,0.7)}
.cv-frame svg{display:block;width:100%;height:auto}
.cv-empty{color:rgba(255,255,255,0.28);font-size:14px;text-align:center;pointer-events:none;user-select:none}
.zoom-ctrls{position:absolute;bottom:12px;right:14px;display:flex;align-items:center;gap:3px}
.zoom-btn{font-size:12px;color:rgba(255,255,255,0.38);border:1px solid rgba(255,255,255,0.14);border-radius:4px;padding:2px 9px;background:rgba(0,0,0,0.28);cursor:pointer;user-select:none}

/* ── Right panel ── */
.rp{width:248px;flex-shrink:0;border-left:.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);overflow-y:auto;display:flex;flex-direction:column}
.rp-sec{padding:12px 14px 8px;display:flex;flex-direction:column;gap:6px}
.rp-title{font-size:12px;font-weight:600;color:var(--color-text-primary)}
.rp-sub{font-size:10px;color:var(--color-text-tertiary)}
.rp-lbl{font-size:10px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.rp-divider{border:none;border-top:.5px solid var(--color-border-tertiary);margin:2px 0}

/* ── Thumbnail strip ── */
.ts{height:100px;border-top:.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);display:flex;align-items:center;padding:0 16px;gap:9px;flex-shrink:0;overflow-x:auto}
.th{width:124px;height:70px;flex-shrink:0;position:relative;border-radius:3px;overflow:hidden;background:#0a0a0a;cursor:pointer;border:2px solid transparent;line-height:0;transition:border-color .12s}
.th:hover{border-color:var(--color-border-secondary)}
.th.active{border-color:#5B8DEF}
.th svg{display:block;width:100%;height:100%}
.th-n{position:absolute;bottom:3px;right:5px;font-size:10px;color:rgba(255,255,255,0.32);line-height:1}
.th-add{width:124px;height:70px;flex-shrink:0;border:2px dashed var(--color-border-tertiary);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--color-text-tertiary);cursor:pointer;transition:border-color .12s,color .12s}
.th-add:hover{border-color:var(--color-border-secondary);color:var(--color-text-secondary)}

/* ── Shared controls ── */
button{font-size:13px;padding:0 12px;height:32px;border-radius:var(--border-radius-md);border:.5px solid var(--color-border-secondary);background:var(--color-background-primary);color:var(--color-text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:inherit}
button:hover{background:var(--color-background-secondary)}
button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
select,input[type=text],input[type=number],textarea{font-size:13px;padding:5px 8px;border-radius:var(--border-radius-md);border:.5px solid var(--color-border-tertiary);background:var(--color-background-primary);color:var(--color-text-primary);width:100%;font-family:inherit}
textarea{resize:vertical;min-height:48px;line-height:1.5}

/* ── Right panel atoms ── */
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ar{display:flex;align-items:center;gap:6px;font-size:12px}
.row-inp{display:flex;align-items:center;gap:5px;font-size:12px}
.row-inp label{color:var(--color-text-secondary);min-width:12px;font-size:11px}
.row-inp input{font-size:12px;padding:3px 5px;width:54px;text-align:right}
.row-inp span{color:var(--color-text-tertiary);font-size:11px}
.aadd{font-size:12px;padding:4px 8px;height:auto;border-style:dashed;color:var(--color-text-secondary)}
.hint{font-size:11px;color:var(--color-text-tertiary);line-height:1.5}
.sel-header{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--border-radius-md);background:var(--color-background-primary);border:.5px solid var(--color-border-secondary)}
.del-link{all:unset;cursor:pointer;font-size:11px;color:var(--color-text-danger)}
.del-link:hover{text-decoration:underline}
.divider{border:none;border-top:.5px solid var(--color-border-tertiary);margin:3px 0}
.bdg{display:inline-block;font-size:10px;font-weight:500;padding:2px 5px;border-radius:4px;background:var(--color-background-info);color:var(--color-text-info)}
.adj-joint{font-size:12px;padding:3px 8px;height:auto;justify-content:flex-start;text-align:left}