/* Layers use the same product tokens as the workspace chrome. */
body.layers-ready #threeLayer{opacity:0}
#layersPanel{position:absolute;left:80px!important;top:72px!important;width:320px!important;max-width:calc(100vw - 96px);max-height:calc(100dvh - 160px);padding:var(--space-3)!important;border:1px solid var(--line)!important;border-radius:var(--radius-card)!important;background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--shadow-panel)!important;font-family:var(--font-ui);font-size:var(--text-sm);z-index:var(--layer-stack-45);overflow:auto}
#layersPanel.hidden{display:none}
#layersList{max-height:calc(100dvh - 330px)!important;overflow:auto!important;scrollbar-width:thin}
.layer-row{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;margin-block:var(--space-1);min-height:44px}
.layer-row:hover{background:var(--surface-hover)}
.layer-row.selected{background:var(--state-active-bg);border-color:var(--state-active-border)}
.layer-row.drop-target{border-top:2px solid var(--state-active-border)}
.layer-row:focus-visible,#layersPanel button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.layer-thumb{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}
.layer-ico{width:16px;height:16px;flex:none;color:var(--muted);display:block}
.layer-name,.layer-row input{width:0;min-width:0;flex:1;border:0;background:transparent;color:var(--ink);font-size:var(--text-xs);padding:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#layersPanel button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:var(--text-xs);cursor:pointer;min-height:30px;padding:var(--space-1) var(--space-2)}
.layer-row button{width:30px;padding:var(--space-1)!important;flex:none;display:inline-flex;align-items:center;justify-content:center}
.layer-row button .layer-ico{color:var(--ink)}
.layer-fold-scroll{max-height:280px;overflow:auto;margin-inline:var(--space-1)}
#layersPanel button:hover{background:var(--surface-hover)}
#layersPanel button:disabled{opacity:.4;cursor:default}
.layer-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);padding-block:var(--space-2)}
.layer-menu{position:absolute;z-index:var(--layer-stack-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-panel);width:160px}
.layer-menu:not([hidden]){display:flex;flex-direction:column;gap:var(--space-1)}
.layers-empty{padding:var(--space-4);color:var(--muted)}
@media(max-width:760px){#layersPanel{left:60px!important;top:64px!important;max-width:calc(100vw - 72px);max-height:calc(100dvh - 145px)}#layersList{max-height:calc(100dvh - 330px)!important}.layer-actions button{min-height:36px!important}#layersPanel .layer-row button{min-height:36px;width:32px}}

body.layers-ready [data-layer-composited] video{opacity:0}
.board-export-busy{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-6);background:var(--surface);color:var(--ink);font-family:var(--font-ui)}
.board-export-busy::backdrop{background:var(--surface-hover)}