/* Workflow redesign (October 2026): stepper, stage toolbar, Plan / Check / Publish pages, Add blocks panel, library.
   Uses the studio tokens (--e-*), so light and dark both work. Learner player styles are not touched. */
@font-face{font-family:'Figtree';src:url(../fonts/figtree-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Figtree';src:url(../fonts/figtree-latin-600-normal.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Figtree';src:url(../fonts/figtree-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Figtree';src:url(../fonts/figtree-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url(../fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url(../fonts/be-vietnam-pro-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--e-font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;--wf-display:'Be Vietnam Pro','Figtree',system-ui,sans-serif;--wf-head:136px;--wf-x:#B42318;--wf-x-soft:#FDECEA;--wf-w:#855800;--wf-w-soft:#FBF1CF;--wf-k:#17785A;--wf-k-soft:#E4F3EC}
:root[data-theme="dark"]{--wf-x:#F28B82;--wf-x-soft:#3A1E1C;--wf-w:#E8D56A;--wf-w-soft:#332E14;--wf-k:#5CC39C;--wf-k-soft:#15302A}
body,.e-app,#lib,.e-dialog,.e-btn,.e-in,.e-sel{font-family:var(--e-font)}
.e-name b,.studio-heading h1,.wf-page h2,.wf-head b,.e-dialog h2{font-family:var(--wf-display)}
.e-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frame ---------- */
.e-app{display:flex!important;flex-direction:column;height:100dvh;min-height:0}
.e-app>.e-body{flex:1 1 0;min-height:0;height:auto!important}
.e-app>.wf-top,.e-app>.wf-bar{flex:none}
.e-dscrim{top:var(--wf-head)!important}
.e-app[data-stage="plan"]>.e-body,.e-app[data-stage="check"]>.e-body,.e-app[data-stage="publish"]>.e-body{display:none!important}
.wf-view{flex:1 1 0;min-height:0;overflow:auto;background:var(--e-bg);outline:0}
.e-app .ai-drawer,.e-app~.ai-drawer,.ai-drawer,.e-media{top:var(--wf-head)!important}

/* ---------- top bar with the stepper ---------- */
.e-app>.e-top.wf-top{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 20px;gap:12px;position:relative;z-index:21}
.wf-top .e-name{flex:1 1 150px;min-width:0}
.wf-top .e-name b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-top .e-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-top #eHome{width:44px;height:44px;padding:0;justify-content:center;border:1px solid var(--e-line);border-radius:10px}
.wf-top #eHome .lbl{display:none}
.wf-steps{flex:0 1 auto;display:flex;justify-content:center;min-width:0}
.wf-steps ol{list-style:none;margin:0;padding:4px;display:flex;gap:2px;background:var(--e-sunk);border-radius:12px}
.wf-steps button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 8px;border:0;border-radius:9px;background:transparent;color:var(--e-muted);font:600 14px var(--e-font);cursor:pointer;white-space:nowrap}
.wf-steps button:hover{background:var(--e-fill);color:var(--e-ink)}
.wf-steps button:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px}
.wf-steps button[aria-current="step"]{background:var(--e-panel);color:var(--e-ink);box-shadow:0 1px 3px rgba(23,36,47,.15),inset 0 -3px 0 var(--e-hl)}
.wf-dot{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--e-panel);border:1px solid var(--e-line2);color:var(--e-muted)}
.wf-steps [aria-current="step"] .wf-dot{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-panel)}
.wf-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#B42318;color:#FFFFFF;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.wf-badge[hidden]{display:none}
[data-stage="review"]>.wf-badge{background:#855800}
.wf-end{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wf-top #ePreview{width:auto;padding:0 14px}
.wf-top #ePreview .lbl,.wf-top #eSave .lbl{display:inline}
.wf-top #eSave{width:auto;padding:0 18px}

/* ---------- stage toolbar ---------- */
.wf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 20px;background:var(--e-panel);border-bottom:1px solid var(--e-line);min-height:58px;box-sizing:border-box;position:relative;z-index:20}
.wf-head{display:flex;flex-direction:column;min-width:0;margin-right:4px}
.wf-head b{font-size:15px;font-weight:700;color:var(--e-ink)}
.wf-head span{font-size:12px;color:var(--e-muted)}
.wf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-left:12px;border-left:1px solid var(--e-line);min-height:40px}
.wf-tools[hidden]{display:none}
.wf-tools:empty{display:none}
.wf-tools .e-btn{width:auto;height:40px;padding:0 12px;gap:6px}
.wf-tools .e-btn .lbl{display:inline}
.wf-tools .e-icbtn{width:40px;height:40px}
.wf-tools .e-btn[aria-pressed="true"]{background:var(--e-accent-soft);color:var(--e-accent-text);border-color:transparent}
.wf-addbtn{background:var(--e-accent-soft)!important;color:var(--e-accent-text)!important;border-color:transparent!important}
.wf-mode{margin-left:auto}
.wf-mode button{min-height:36px;padding:0 12px;font-size:13px}
.wf-ess #eAudioAI,.wf-ess #wfSettings,.wf-ess #eLeftTabs [data-t="settings"],.wf-ess .th-tabs [data-theme-tab]:not([data-theme-tab="styles"]):not([data-theme-tab="brand"]):not([data-theme-tab="flow"]){display:none!important}

/* rail: only the panels that belong to the stage */
.e-app[data-stage] #eLeftTabs button{display:none}
.e-app[data-stage="build"] #eLeftTabs [data-t="outline"],.e-app[data-stage="build"] #eLeftTabs [data-t="add"],.e-app[data-stage="build"] #eLeftTabs [data-t="props"],.e-app[data-stage="build"] #eLeftTabs [data-t="review"],
.e-app[data-stage="build"] #eLeftTabs [data-t="media"],.e-app[data-stage="build"] #eLeftTabs [data-t="ai"],
.e-app[data-stage="style"] #eLeftTabs [data-t="theme"],.e-app[data-stage="style"] #eLeftTabs [data-t="settings"],.e-app[data-stage="style"] #eLeftTabs [data-t="media"],
.e-app[data-stage="review"] #eLeftTabs [data-t="suggest"],.e-app[data-stage="review"] #eLeftTabs [data-t="outline"],.e-app[data-stage="review"] #eLeftTabs [data-t="props"]{display:flex}
#eLeftTabs .e-ro-hide{display:none!important}
/* the rail reads as two groups: work on the lesson (top), tools (foot) */
.e-rail-gap{flex:1 1 0;min-height:8px}
@media (max-width:1024px){.e-rail-gap{display:none}}
/* the Build bar keeps one primary action; Media and AI check live on the rail */
.wf-tools[data-for="build"] #eMedia,.wf-tools[data-for="build"] #eAI{display:none!important}
@media (max-width:1024px){.wf-tools[data-for="build"] #eMedia,.wf-tools[data-for="build"] #eAI{display:inline-flex!important}.e-app[data-stage] #eLeftTabs [data-t="media"],.e-app[data-stage] #eLeftTabs [data-t="ai"]{display:none}}

/* ---------- Build: block list in the lesson outline ---------- */
.e-bl{list-style:none;margin:2px 0 8px 22px;padding:0 0 0 10px;border-left:2px solid var(--e-line);display:flex;flex-direction:column;gap:1px}
.e-bl-i{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:36px;padding:5px 8px;border:0;border-radius:8px;background:none;color:var(--e-ink);text-align:left;cursor:pointer;font:500 12.5px var(--e-font)}
.e-bl-i b{font-weight:700;font-size:12px}
.e-bl-i span{color:var(--e-muted);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-bl-i:hover{background:var(--e-fill)}
.e-bl-i[aria-current="true"]{background:var(--e-ink);color:var(--e-panel)}
.e-bl-i[aria-current="true"] span{color:inherit;opacity:.85}
.e-bl-more{padding:4px 8px;font-size:12px;color:var(--e-muted)}

/* ---------- Build: Add blocks panel in the inspector ---------- */
.wf-instabs{display:flex;gap:4px;padding:6px 12px 0;border-bottom:1px solid var(--e-line);flex:none}
.wf-instabs button{min-height:44px;padding:0 12px;border:0;background:none;font:600 14px var(--e-font);color:var(--e-muted);cursor:pointer}
.wf-instabs button[aria-selected="true"]{color:var(--e-ink);box-shadow:inset 0 -3px 0 var(--e-accent)}
.wf-instabs button[hidden]{display:none}
.e-app:not([data-stage="build"]) .wf-instabs,.e-app:not([data-stage="build"]) #wfAddPanel{display:none!important}
.wf-add{flex:1 1 auto;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.wf-add[hidden]{display:none}
.wf-search{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--e-line2);border-radius:10px;background:var(--e-panel);color:var(--e-muted)}
.wf-search:focus-within{outline:2px solid var(--e-accent);outline-offset:1px}
.wf-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:14px var(--e-font);color:var(--e-ink)}
.wf-libtabs{display:flex}
.wf-libtabs button{flex:1}
.wf-where{margin:0;font-size:12px;color:var(--e-muted)}
.wf-cat h3{margin:4px 0 8px;font:700 12px var(--e-font);letter-spacing:0;color:var(--e-muted)}
.wf-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wf-tiles li{position:relative}
.wf-tile{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 34px 8px 8px;border:1px solid var(--e-line);border-radius:10px;background:var(--e-panel);color:var(--e-ink);font:600 13px/1.25 var(--e-font);text-align:left;cursor:pointer}
.wf-tile:hover{border-color:var(--e-accent);background:var(--e-accent-soft)}
.wf-tile .gi{flex:none;width:30px;height:30px;border-radius:8px;background:var(--e-sunk);display:flex;align-items:center;justify-content:center}
.wf-tile .gi svg{width:16px;height:16px}
.wf-star{position:absolute;top:3px;right:3px;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:none;color:var(--e-faint);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wf-star svg{width:15px;height:15px}
.wf-star[aria-pressed="true"]{color:#B7791F}
.wf-star[aria-pressed="true"] svg{fill:currentColor}
.wf-star:hover{background:var(--e-fill)}

/* ---------- pages (Plan, Check, Publish) ---------- */
.wf-page{max-width:1360px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;box-sizing:border-box}
.wf-main,.wf-struct{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.wf-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.wf-card{background:var(--e-panel);border:1px solid var(--e-line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.wf-card h2{margin:0;font-size:16px;font-weight:600;color:var(--e-ink)}
.wf-card p{margin:0;line-height:1.5}
.wf-card-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.wf-dark{background:#17242F;color:#FFFFFF;border-color:#17242F}
.wf-dark h2{color:#FFFFFF}
.wf-dark p{color:#D6E2EA}
.wf-soft{background:var(--e-accent-soft);border-color:transparent}
.wf-cta{align-self:flex-start;height:44px;padding:0 16px;gap:8px;background:#EADA24!important;color:#17242F!important;border-color:#EADA24!important;font-weight:700}
.wf-link{align-self:flex-start;padding:0;border:0;background:none;color:var(--e-accent-text);font:700 14px var(--e-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.wf-dark .wf-link{color:#EADA24}
.wf-in{width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:8px;padding:6px 8px;background:transparent;color:var(--e-ink);font:600 14px var(--e-font)}
.wf-in:hover{border-color:var(--e-line2)}
.wf-in:focus{border-color:var(--e-accent);outline:2px solid var(--e-accent-soft);background:var(--e-panel)}
textarea.wf-in{font-weight:500;resize:vertical;line-height:1.4}

/* Plan */
.wf-struct{padding:0;gap:0;overflow:hidden}
.wf-struct>.wf-card-h{padding:18px 20px 12px}
.wf-sec-h{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 20px;border-top:1px solid var(--e-line);background:var(--e-sunk);font:700 12px var(--e-font);letter-spacing:0;color:var(--e-ink)}
.wf-sec-n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--e-muted);margin-left:auto}
.wf-sec-h .e-btn{text-transform:none;letter-spacing:0}
.wf-lessons{list-style:none;margin:0;padding:0}
.wf-lrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:6px 14px 6px 20px;border-top:1px solid var(--e-line)}
.wf-lno{flex:none;width:28px;height:28px;border-radius:8px;background:var(--e-sunk);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--e-ink)}
.wf-ltitle{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:8px}
.wf-opt{flex:none;font-size:12px;font-weight:600;color:var(--e-muted)}
.wf-los{display:flex;align-items:center;gap:4px}
.wf-lo{padding:2px 7px;border-radius:6px;background:var(--e-accent-soft);color:var(--e-accent-text);font-size:12px;font-weight:700;white-space:nowrap}
.wf-lobtn{width:32px;height:32px;border:1px dashed var(--e-line2);border-radius:8px;background:none;color:var(--e-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.wf-lobtn svg{width:16px;height:16px}
.wf-lsize{width:118px;font-size:13px;color:var(--e-muted)}
.wf-st{width:76px;text-align:center;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.wf-st.built{background:var(--wf-k-soft);color:var(--wf-k)}
.wf-st.draft{background:var(--wf-w-soft);color:var(--wf-w)}
.wf-st.empty{background:var(--e-sunk);color:var(--e-muted)}
.wf-lacts{display:flex;gap:2px}
.wf-lacts .e-icbtn{width:36px;height:36px}
.wf-card-f{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--e-line)}
.wf-form{display:flex;flex-direction:column;gap:2px}
.wf-row{display:flex;gap:12px;flex-wrap:wrap}
.wf-row>.e-field{flex:1 1 140px}
.wf-est{font-size:13px;color:var(--e-muted)}
.wf-est.warn{color:var(--wf-w);font-weight:600}
.wf-objs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wf-objs li{display:flex;gap:8px;align-items:flex-start}
.wf-objs .wf-lo{margin-top:7px}
.wf-obj{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wf-cov{font-size:12px;font-weight:600;padding-left:8px}
.wf-cov.ok{color:var(--wf-k)}.wf-cov.warn{color:var(--wf-w)}
.wf-ready{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wf-ready li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.wf-ready svg{flex:none;width:18px;height:18px;margin-top:1px}
.wf-ready .ok svg{color:#7DD3A8}.wf-ready .todo svg{color:#EADA24}
.wf-pick{border:0;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:10px}

/* Check */
.wf-tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wf-tiles3 .t{padding:14px 12px;border-radius:14px;display:flex;flex-direction:column}
.wf-tiles3 b{font:700 28px var(--wf-display)}
.wf-tiles3 span{font-size:12px;font-weight:600}
.wf-tiles3 .x{background:var(--wf-x-soft);color:var(--wf-x)}.wf-tiles3 .w{background:var(--wf-w-soft);color:var(--wf-w)}.wf-tiles3 .i{background:var(--e-sunk);color:var(--e-ink)}
.wf-cats{padding:8px}
.wf-cats ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wf-cats button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--e-ink);font:600 14px var(--e-font);cursor:pointer;text-align:left}
.wf-cats button:hover{background:var(--e-fill)}
.wf-cats button[aria-pressed="true"]{background:var(--e-accent-soft);color:var(--e-accent-text)}
.wf-count{min-width:24px;text-align:center;padding:1px 7px;border-radius:999px;font-size:12px;background:var(--e-ink);color:var(--e-panel)}
.wf-count.ok{background:var(--wf-k-soft);color:var(--wf-k)}
.wf-gh{margin:0 0 10px;font-size:16px;font-weight:600}
.wf-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wf-issue{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--e-panel);border:1px solid var(--e-line);border-left:4px solid var(--e-line2);border-radius:14px;padding:14px 16px}
.wf-issue.sev-x{border-left-color:var(--wf-x)}.wf-issue.sev-w{border-left-color:#C99A1A}
.wf-sev{flex:none;width:10px;height:10px;border-radius:50%;background:var(--e-faint)}
.sev-x .wf-sev{background:var(--wf-x)}.sev-w .wf-sev{background:#C99A1A}
.wf-issue-b{flex:1 1 300px;min-width:0}
.wf-issue-b p{margin:4px 0 0;line-height:1.5;color:var(--e-ink)}
.wf-allgood{flex-direction:row;align-items:center;gap:14px}
.wf-allgood>svg{width:36px;height:36px;color:var(--wf-k);flex:none}
.wf-passed summary{min-height:32px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.wf-passed ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wf-passed li{display:flex;gap:8px;align-items:center}
.wf-passed svg{width:16px;height:16px;color:var(--wf-k)}

/* Publish */
.wf-ready3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.wf-rcard{background:var(--e-panel);border:1px solid var(--e-line);border-left:4px solid var(--e-accent);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.wf-rcard .k{font-size:12px;font-weight:700;letter-spacing:0;color:var(--e-muted)}
.wf-rcard.x{border-left-color:var(--wf-x)}.wf-rcard.w{border-left-color:#C99A1A}.wf-rcard.k{border-left-color:var(--wf-k)}
.wf-export{padding:0;overflow:hidden}
.wf-export .ex-wrap{padding:20px 22px}
.wf-export [data-x]{display:none}
.wf-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wf-hist li{display:flex;flex-direction:column;gap:2px;padding-left:16px;position:relative}
.wf-hist li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--wf-k)}
.wf-hist span{font-size:13px;color:var(--e-muted)}

/* ---------- responsive ---------- */
@media (max-width:1365px){.wf-steps button:not([aria-current]) .wf-lbl{display:none}.wf-steps button:not([aria-current]){padding:0 8px}.wf-head span{display:none}}
@media (max-width:1024px){
  .e-app>.e-top.wf-top{padding:8px 12px;gap:8px}
  .wf-steps{order:10;flex:1 1 100%}
  .wf-steps ol{flex:1;justify-content:space-between}
  .wf-steps button{flex:1;justify-content:center}
  .wf-bar{padding:8px 12px}
  .wf-tools{border-left:0;padding-left:0}
  .wf-mode{margin-left:0}
  .wf-view{padding-bottom:20px}
}
@media (max-width:700px){
  .wf-top .e-status{display:none}
  .wf-top #ePreview .lbl{display:none}.wf-top #ePreview{width:44px;padding:0}
  .wf-steps button{padding:0 4px;gap:4px}
  .wf-page{padding:14px}
  .wf-lsize{width:auto}
  .wf-lrow{padding-left:12px}
  .wf-tools .e-btn{padding:0 10px}
  .wf-head,.wf-mode{display:none}
  .wf-bar{min-height:0;padding:6px 8px;gap:4px}
  .wf-tools{gap:2px;min-height:0}
  .wf-tools .e-btn:not(#wfAdd) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wf-tools .e-btn:not(#wfAdd){width:40px;padding:0;justify-content:center}
  .wf-tools .e-group .e-icbtn{width:36px}
}

/* ---------- library ---------- */
.wf-eyebrow{font-size:12px;font-weight:700;letter-spacing:0;color:var(--e-muted)}
.wf-cont{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;background:var(--e-panel);border:1px solid var(--e-line);border-radius:16px;padding:22px 24px;margin:0 0 28px}
.wf-cont-b{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
.wf-cont h2{margin:0;font:600 21px/1.25 var(--wf-display);color:var(--e-ink)}
.wf-cont p{margin:0;color:var(--e-muted)}
.wf-cont-a{display:flex;flex-wrap:wrap;gap:10px}
.wf-cont-a .e-btn{height:44px;padding:0 16px;width:auto}
.wf-dark-btn{background:var(--e-ink)!important;color:var(--e-panel)!important;border-color:var(--e-ink)!important;gap:8px}
.wf-pipe-l{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;max-width:560px}
.wf-pipe-l li{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--e-muted)}
.wf-pipe-l i,.wf-pipe i{display:block;height:6px;border-radius:3px;background:var(--e-line)}
.wf-pipe-l .d i,.wf-pipe .d{background:var(--e-accent)}
.wf-pipe-l .c i,.wf-pipe .c{background:var(--e-hl)}
.wf-pipe-l .c{font-weight:700;color:var(--e-ink)}
.wf-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.wf-fbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--e-line2);background:var(--e-panel);color:var(--e-ink);font:600 13px var(--e-font);cursor:pointer}
.wf-fbtn span{font-size:12px;padding:1px 7px;border-radius:999px;background:var(--e-sunk);color:var(--e-muted)}
.wf-fbtn[aria-pressed="true"]{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-panel)}
.wf-fbtn[aria-pressed="true"] span{background:rgba(255,255,255,.2);color:inherit}
.wf-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}
.wf-lcard{border-radius:16px!important}
.wf-cover{position:relative;height:112px;background:linear-gradient(135deg,var(--c1),var(--c2));overflow:hidden;display:flex;align-items:flex-start;padding:14px 16px;box-sizing:border-box}
.wf-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf-cover b{position:absolute;right:18px;bottom:6px;font:700 64px/1 var(--wf-display);color:rgba(255,255,255,.35)}
.wf-chip{position:relative;z-index:1;padding:4px 10px;border-radius:999px;background:#FFFFFF;color:#17242F;font-size:12px;font-weight:700}
.wf-cb{padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.wf-cb h3{margin:0;font:600 16px/1.35 var(--wf-display);color:var(--e-ink)}
.wf-meta{font-size:13px;color:var(--e-muted)}
.wf-pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:4px}
.wf-detail{margin:0;font-size:13px;font-weight:600;color:var(--e-muted)}
.wf-detail.warn{color:var(--wf-w)}.wf-detail.bad{color:var(--wf-x)}.wf-detail.ok{color:var(--wf-k)}
.wf-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--e-line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.wf-foot .studio-updated{margin:0;font-size:12px}
.wf-foot .e-btn{width:auto;height:38px;padding:0 14px}
.wf-acts{display:flex!important;justify-content:flex-end;padding:0!important;border:0!important;gap:2px!important}
.wf-acts .e-icbtn{width:36px!important;height:36px!important}
.studio-list .wf-cover{width:180px;height:auto;min-height:100%;flex-shrink:0}
@media (max-width:700px){.wf-cont{padding:18px}.wf-pipe-l span{font-size:11px}.studio-list .wf-cover{width:100%;height:96px}}

/* ---------- Brand & player tab (Theme) ---------- */
.br-slot{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.br-file{display:flex;align-items:center;justify-content:center;height:72px;border-radius:10px;border:1px dashed var(--e-line2);background:repeating-conic-gradient(var(--e-sunk) 0 25%,var(--e-panel) 0 50%) 0 0/16px 16px}
.br-file img{max-height:52px;max-width:80%;object-fit:contain}
.br-acts{display:flex;gap:6px;flex-wrap:wrap}
.br-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.br-pair figure{margin:0;display:flex;flex-direction:column;gap:4px}
.br-pair figcaption{font-size:12px;color:var(--e-muted)}
.br-on{display:flex;align-items:center;justify-content:center;height:64px;border-radius:10px;border:1px solid var(--e-line)}
.br-on.light{background:#FFFFFF}
.br-lg{display:inline-flex;line-height:0;border-radius:6px}
.br-lg.plate{background:#FFFFFF;padding:4px 8px}
.br-lg img{max-height:34px;max-width:120px;object-fit:contain}
.br-seg{display:flex;flex-wrap:wrap}
.br-seg button{flex:1;min-height:40px}
.br-where{border:0;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.br-players{display:grid;grid-template-columns:1fr;gap:8px}
.br-player{text-align:left}
.br-th{position:relative;display:flex;flex-direction:column;width:96px;height:64px;flex:none;border-radius:8px;overflow:hidden;border:1px solid var(--e-line)}
.br-th .tb{display:flex;align-items:center;gap:4px;height:14px;padding:0 5px;flex:none;position:relative}
.br-th .tb.mh{justify-content:center;height:18px}
.br-th .tm{width:7px;height:5px;border:1.5px solid;border-radius:1px;flex:none}
.br-th .tl{display:inline-flex;align-items:center;height:8px;line-height:0;margin-left:auto}
.br-th .tb.mh .tl{margin-left:0}
.br-th .tl img{height:8px;max-width:34px;object-fit:contain}
.br-th .tl.tx{width:20px;height:4px;border-radius:2px}
.br-th .tp{position:absolute;left:0;bottom:-1px;width:45%;height:2px}
.br-th .tbody{flex:1;display:flex;min-height:0}
.br-th .ts{width:22px;flex:none}
.br-th .tc{flex:1;display:flex;flex-direction:column;gap:3px;padding:5px 6px}
.br-th .tc.narrow{padding:5px 22px}
.br-th .tc i{display:block;height:4px;border-radius:2px;width:60%}
.br-th .tc i+i{height:10px;width:100%;border-radius:3px}
.br-pv{gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.br-level{border:0;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.br-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--e-line);border-radius:10px;cursor:pointer}
.br-radio:has(input:checked){border-color:var(--e-accent);background:var(--e-accent-soft)}
.br-radio input{margin-top:3px;width:18px;height:18px;flex:none}
.br-radio span{display:flex;flex-direction:column;gap:2px}
.br-radio small{font-size:12px;color:var(--e-muted);line-height:1.45}
.br-report{font-size:12.5px;padding:10px 12px;border-radius:10px;background:var(--e-sunk);margin:0 0 12px}
.br-report.ok{background:var(--wf-k-soft);color:var(--wf-k)}
.br-report ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.br-report li{display:flex;align-items:center;gap:6px}
.br-report .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--e-line2);flex:none}
.pv-dev button{min-height:36px;padding:0 12px}

/* ---------- Course library: folders, search, sort, select (October 2026) ---------- */
.lib-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.lib-side{position:sticky;top:16px;background:var(--e-panel);border:1px solid var(--e-line);border-radius:16px;padding:14px 10px;max-height:calc(100vh - 32px);overflow:auto}
.lib-side-sum{display:none}
.lib-nav ul{list-style:none;margin:0;padding:0}
.lib-views{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:8px!important;border-bottom:1px solid var(--e-line)}
.lib-vbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--e-ink);font:500 14px/1.3 var(--e-font);text-align:left;cursor:pointer}
.lib-vbtn .e-ico{width:18px;height:18px;flex:none;color:var(--e-muted)}
.lib-vbtn .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-vbtn .ct{font-size:12px;color:var(--e-muted);min-width:20px;text-align:right}
.lib-vbtn:hover{background:var(--e-fill)}
.lib-vbtn[aria-current="page"]{background:var(--e-accent-soft);color:var(--e-accent-text);font-weight:700}
.lib-vbtn[aria-current="page"] .e-ico,.lib-vbtn[aria-current="page"] .ct{color:var(--e-accent-text)}
.lib-fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 10px}
.lib-fhead h3{margin:0;font:700 12px/1 var(--e-font);letter-spacing:0;color:var(--e-muted)}
.lib-fhead .e-btn{width:auto;min-height:36px;padding:0 10px;gap:6px}
.lib-row{display:flex;align-items:center}
.lib-tog,.lib-tog-sp{flex:none;width:28px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--e-muted);border-radius:8px;cursor:pointer;padding:0}
.lib-tog .e-ico{width:14px;height:14px;transition:transform .15s}
.lib-tog[aria-expanded="true"] .e-ico{transform:rotate(90deg)}
.lib-tog:hover{background:var(--e-fill)}
.lib-sub{padding-left:18px!important}
.lib-hint{margin:4px 10px 8px;font-size:13px;color:var(--e-muted)}
.lib-dropping>.lib-row .lib-vbtn,.lib-views .lib-dropping,.lib-tiles .lib-dropping .lib-tile{outline:2px dashed var(--e-accent);outline-offset:-2px;background:var(--e-accent-soft)}
.lib-main{min-width:0}
.lib-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:14px}
.lib-crumbs{min-width:0}
.lib-crumbs h2{margin:0;font:600 22px/1.25 var(--wf-display,var(--e-font));color:var(--e-ink);outline-offset:4px}
.lib-sub-h{margin:4px 0 0;color:var(--e-muted);font-size:14px}
.lib-path ol{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:13px}
.lib-path li+li:before{content:'›';margin-right:4px;color:var(--e-muted)}
.lib-link{border:0;background:none;padding:6px 2px;min-height:32px;color:var(--e-accent-text);font:600 13px var(--e-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lib-tools{flex-wrap:wrap}
.lib-sort .e-sel{height:42px;width:auto;min-width:160px}
#libSelect{width:auto;min-height:42px;gap:6px}
#libSelect[aria-pressed="true"]{background:var(--e-ink);color:var(--e-panel);border-color:var(--e-ink)}
.lib-fbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.lib-fbar .e-btn{width:auto;min-height:40px;gap:6px}
.lib-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0 0 18px}
.lib-tile{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;border:1px solid var(--e-line2);border-radius:14px;background:var(--e-panel);color:var(--e-ink);text-align:left;cursor:pointer;font:inherit}
.lib-tile .e-ico{width:26px;height:26px;flex:none;color:var(--e-accent-text)}
.lib-tile b{display:block;font-size:15px;font-weight:600}
.lib-tile small{display:block;font-size:12px;color:var(--e-muted);margin-top:2px}
.lib-tile:hover{border-color:var(--e-accent);box-shadow:var(--e-shadow)}
.lib-bulk{position:sticky;top:8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin:0 0 14px;border-radius:14px;background:var(--e-ink);color:var(--e-panel)}
.lib-bulk .e-btn{width:auto;min-height:40px;gap:6px}
.lib-bulk .e-btn:not(.primary){background:transparent;color:var(--e-panel);border-color:rgba(255,255,255,.5)}
.lib-bulk .e-btn[disabled]{opacity:.6;cursor:not-allowed;background:var(--e-fill);color:var(--e-faint)}
.lib-bulk-n{font-weight:700;margin-right:6px}
.lib-tagl{font-size:12px;font-weight:700;color:var(--e-muted);margin-right:2px}
.studio-filter [data-tagf]{min-height:36px}
.wf-lcard{position:relative}
.wf-lcard[draggable="true"]{cursor:grab}
.lib-dragging{opacity:.5}
.lib-picked{outline:3px solid var(--e-accent);outline-offset:-1px}
.lib-check{position:absolute;z-index:3;top:10px;left:10px;width:44px;height:44px;display:grid;place-items:center;background:var(--e-panel);border-radius:10px;box-shadow:var(--e-shadow);cursor:pointer}
.lib-check input{width:22px;height:22px;accent-color:var(--e-accent);cursor:pointer}
.lib-check~.wf-cover .wf-chip{margin-left:48px}
.lib-star{position:absolute;z-index:2;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#3F4C57;cursor:pointer}
.lib-star .e-ico{width:20px;height:20px}
.lib-star[aria-pressed="true"]{color:#8A5A00}
.lib-star[aria-pressed="true"] .e-ico{fill:#F2B705;stroke:#8A5A00}
.lib-star[disabled]{display:none}
.lib-where{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--e-muted);min-width:0}
.lib-where .e-ico{width:14px;height:14px;flex:none}
.lib-pick{border:0;margin:0 0 8px;padding:0;max-height:min(46vh,420px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.lib-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 calc(10px + var(--d,0) * 20px);border-radius:10px;cursor:pointer;color:var(--e-ink)}
.lib-opt:hover{background:var(--e-fill)}
.lib-opt input{width:18px;height:18px;accent-color:var(--e-accent);flex:none}
.lib-opt .e-ico{width:18px;height:18px;color:var(--e-muted);flex:none}
.lib-opt:has(input:checked){background:var(--e-accent-soft);font-weight:600}
.lib-newin{margin:4px 0 10px;border-top:1px solid var(--e-line);padding-top:10px}
.lib-newin summary{cursor:pointer;font-weight:600;color:var(--e-accent-text);min-height:32px;display:flex;align-items:center}
.lib-empty{padding:36px 20px}
@media (max-width:900px){
  .lib-wrap{grid-template-columns:1fr;gap:14px}
  .lib-side{position:static;max-height:none;padding:0;overflow:visible}
  .lib-side-sum{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;cursor:pointer;font-weight:600;list-style:none}
  .lib-side-sum::-webkit-details-marker{display:none}
  .lib-side-sum>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lib-side-hint{font-size:12px;font-weight:600;color:var(--e-muted);padding:4px 10px;border-radius:999px;background:var(--e-sunk)}
  .lib-side[open] .lib-side-sum{border-bottom:1px solid var(--e-line)}
  .lib-nav{padding:10px}
  .lib-head{align-items:stretch}
  .lib-tools{width:100%}
  .lib-tools .studio-search{flex:1 1 100%}
  #libSearch{width:100%!important}
}

/* ---------- Smooth, steady layout (October 2026) ----------
   1. Scrollbars never move the page: the library keeps a gutter for its scrollbar; panels that scroll keep theirs too.
   2. Bars keep one height in every stage, so the canvas does not jump when you switch stage.
   3. Thin, quiet scrollbars that darken on hover (light and dark themes).
   4. A short fade when a stage or page appears, turned off for people who prefer reduced motion. */
html.ab-lib{scrollbar-gutter:stable}
#wfView,.e-canvas,.e-scroll,#eLeft,#eRight,.lib-side,.e-dialog,.xp-dialog .xp-panel,.xp-dialog .xp-nav,.e-media,.ai-body,.e-pop .e-lib,#wfAddPanel,.xp-list ul,.lib-pick{scrollbar-gutter:stable}
html{scrollbar-color:var(--e-line2) transparent}
*{scrollbar-width:thin;scrollbar-color:var(--e-line2) transparent}
*:hover{scrollbar-color:var(--e-faint) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--e-line2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--e-faint);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* Scrolling inside a panel never drags the whole page with it. */
#wfView,.e-canvas,#eLeft,#eRight,.lib-side,.xp-panel{overscroll-behavior:contain}
/* Stage toolbar: one height in every stage. */
@media (min-width:821px){.wf-bar{min-height:65px}}
@media (max-width:820px){.wf-bar{min-height:53px}}
/* Lesson switcher: the title keeps its width, so the next / previous arrows stay put. */
.e-lessonpick{flex:0 1 clamp(180px,30vw,380px);width:clamp(180px,30vw,380px)}
.e-lessonpick>span:not(.no):not(.chev),#eLessonTtl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Library heading area: same height for a folder, a view and search results. */
.lib-crumbs{min-height:64px;display:flex;flex-direction:column;justify-content:flex-end}
.lib-head{align-items:flex-end}
/* Cards and counts change without nudging their neighbours. */
.lib-vbtn .ct,.wf-fbtn span,.studio-count{font-variant-numeric:tabular-nums}
/* Gentle entrance when a stage, page or dialog appears. */
@keyframes ab-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ab-fade{from{opacity:0}to{opacity:1}}
.e-app.wf-swap #wfView>*,.e-app.wf-swap #wfBar>*{animation:ab-fade .16s ease-out both}
#libMain>*{animation:ab-fade .14s ease-out both}
.e-dialog{animation:ab-in .16s ease-out both}
.xp-panel>*{animation:ab-fade .14s ease-out both}
button,.e-btn,.e-icbtn,.lib-vbtn,.xp-tab,.wf-fbtn,.lib-tile{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){
  .e-app.wf-swap #wfView>*,.e-app.wf-swap #wfBar>*,#libMain>*,.e-dialog,.xp-panel>*{animation:none}
  button,.e-btn,.e-icbtn,.lib-vbtn,.xp-tab,.wf-fbtn,.lib-tile{transition:none}
}

/* ---------- Steady layout: nothing jumps when a scrollbar appears (October 2026) ---------- */
/* The course library scrolls as a page: keep room for its scrollbar, so the page never shifts sideways
   when a list gets longer or shorter. The editor is an app whose panels scroll on their own, so the page itself never scrolls. */
html:has(#lib:not([hidden])){scrollbar-gutter:stable}
html:has(.e-app:not([hidden])),html:has(.e-app:not([hidden]))>body{overflow:clip;height:100%}
/* Every scrolling panel keeps room for its scrollbar, keeps its scrolling to itself (no scroll chaining into the page)
   and contains anything positioned inside it (screen-reader text can no longer stretch the page). */
.e-scroll,#eLeft,#eRight,.e-canvas,#wfView,.e-dialog,.e-media,.ai-body,.lib-side,.xp-panel,.xp-nav,.e-pop .e-lib,.lib-pick,.xp-list ul,.e-tracklog{scrollbar-gutter:stable;overscroll-behavior:contain}
.e-scroll,#eLeft,#eRight,.e-canvas,#wfView,.xp-panel,.xp-nav,.lib-side,.lib-pick{position:relative}
.e-sr{margin:-1px!important;padding:0!important;border:0!important;top:0;left:0}
/* One quiet scrollbar style everywhere, in light and dark. */
html,.e-scroll,.e-canvas,#wfView,.e-dialog,.e-media,.ai-body,.lib-side,.xp-panel,.xp-nav,.e-pop .e-lib,.lib-pick,.xp-list ul,.e-tracklog,#eLeft,#eRight{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--e-ink) 22%,transparent) transparent}
@supports not (scrollbar-width:thin){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--e-ink) 22%,transparent);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--e-ink) 36%,transparent)}
}
/* Dialogs open from a fixed top line, so when their content grows (wizard steps, Move, Export) they grow
   downwards instead of jumping to re-centre. */
.e-scrim{align-items:start;padding-top:max(16px,min(8vh,72px))}
/* Library: the toolbar sits on its own row and the heading always has the same height, so typing in Search
   or switching folders never moves the toolbar or the cards. The list area keeps at least a screen of height,
   so filtering to a short list doesn't make the page jump. */
.lib-head{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:12px}
.lib-head .lib-tools{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;width:100%}
.lib-head .lib-tools .studio-search{flex:1 1 auto;min-width:0}
.lib-head .lib-tools #libSearch{width:100%!important}
.lib-crumbs h2{display:flex;align-items:center;gap:8px;min-height:32px}
.lib-ctx{display:flex;align-items:center;gap:6px;min-height:32px;margin:2px 0 0;color:var(--e-muted);font-size:14px;white-space:nowrap;overflow:hidden}
.lib-ctx>span{overflow:hidden;text-overflow:ellipsis}
.lib-ctx .lib-path ol{margin:0}
.lib-main{min-height:calc(100vh - 24px)}
@media (max-width:900px){.lib-head .lib-tools{flex-wrap:wrap}.lib-head .lib-tools .studio-search{flex-basis:100%}}
/* Course cards keep their size while their content is drawn. */
.wf-lcard{contain:layout}
@media (prefers-reduced-motion:reduce){.e-scrim,.e-dialog,.e-panel{animation:none!important}}
/* Anything scrolled into view in the library stops below the sticky top bar, not under it. */
.lib-head,.lib-wrap,#lib-h2{scroll-margin-top:calc(var(--e-top,76px) + 12px)}

/* ---------- Editor side panels: one layout system for the left panel and the right inspector (October 2026) ----------
   Same inner padding, label and help styles everywhere; button rows that never clip; sticky bars with a solid
   background and a divider, so scrolled content never shows through them. Container queries let the controls
   adapt to the panel's own width instead of the window's. */
:root{--p-x:16px;--p-xr:10px;--p-y:16px}
@media (min-width:1180px){
  .e-app:not(.e-focus) .e-body{grid-template-columns:88px auto minmax(0,1fr)}
  .e-panel{width:var(--e-pw)}
}
@media (min-width:1025px) and (max-width:1179px){.e-panel{width:var(--e-pw)}}
.e-scroll,.wf-add{padding:var(--p-y) var(--p-xr) 24px var(--p-x);container-type:inline-size;container-name:panel}
.wf-add{gap:14px}
/* panel headers */
@media (min-width:1025px){.e-phead{gap:8px;padding:0 10px 0 var(--p-x)}}
.e-phead b,#eInspectorTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-app:not([data-stage="build"]) #eInspector.wf-adding>.e-phead{display:flex}
.wf-instabs{padding:4px 10px 0 calc(var(--p-x) - 12px)}
/* labels, help and section headings */
.e-field{margin:0 0 18px}
.e-field>label,.e-lbl,.br-where>legend,.br-level>legend{display:block;font-size:12.5px;font-weight:600;color:var(--e-ink);margin:0 0 6px;line-height:1.35;padding:0}
.e-help{margin-top:6px;font-size:12px;line-height:1.5;color:var(--e-muted)}
.e-h{font-size:12px;font-weight:700;letter-spacing:0!important;color:var(--e-muted);margin:26px 0 12px;padding:0 0 8px;border-bottom:1px solid var(--e-line);line-height:1.3}
.e-h:first-child,#th-content>.e-h:first-child{margin-top:4px}
.e-row{gap:8px}
.e-row>.e-field{margin-bottom:0}
.e-row+.e-help{margin-top:6px!important}
.e-row:has(>.e-field){margin-bottom:18px}
.e-row:has(>.e-field)+.e-help{margin-top:-12px!important}
.e-check{min-height:36px;align-items:flex-start;padding:6px 0;line-height:1.45;font-size:13px}
.e-check input{margin-top:1px}
.e-typechip{margin:0 0 8px}
/* buttons inside panels: one height, never clipped (they shrink their padding before their text) */
.e-scroll .e-btn.sm,.wf-add .e-btn.sm{height:36px;padding:0 12px;gap:6px;font-size:12.5px;border-radius:10px}
.e-scroll .e-btn.sm .e-ico{width:16px;height:16px}
.e-scroll .e-btn{min-width:0}
/* Theme: section tabs as a solid sticky bar (3 + 2 grid, one-line labels) */
.th-tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:calc(var(--p-y) * -1) calc(var(--p-xr) * -1) 18px calc(var(--p-x) * -1);padding:12px var(--p-xr) 12px var(--p-x);background:var(--e-panel);border:0;border-bottom:1px solid var(--e-line);border-radius:0;box-shadow:none}
.th-tabs .e-btn{grid-column:span 2;height:36px;padding:0 4px;border:1px solid var(--e-line);border-radius:9px;background:var(--e-sunk);color:var(--e-muted);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center;box-shadow:none}
.th-tabs .e-btn{grid-column:auto}
.th-tabs .e-btn:hover:not([disabled]){color:var(--e-ink);border-color:var(--e-line2);box-shadow:none}
.th-tabs .e-btn[aria-selected=true]{background:var(--e-accent-soft);border-color:var(--e-accent);color:var(--e-accent-text)}
.wf-ess .th-tabs{grid-template-columns:1fr 1fr 1fr}.wf-ess .th-tabs .e-btn{grid-column:auto}
/* Brand and partner logo slots: preview, then one row of actions */
.br-slot{gap:8px;margin:0 0 18px}
.br-slot>.e-lbl{margin:0}
.br-slot .e-help{margin-top:0}
.br-file{height:76px}
.br-file.empty{background:var(--e-sunk);color:var(--e-muted);font-size:12.5px;border-style:dashed}
.br-file.dark img{max-height:44px}
.e-row.br-acts{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
.e-row.br-acts>.e-btn{flex:1 1 0;min-width:0}
.e-row.br-acts>.br-rm{flex:none;width:36px;height:36px;border:1px solid var(--e-line2);border-radius:10px;color:var(--e-danger)}
.e-row.br-acts>.br-rm:hover:not([disabled]){background:var(--e-danger-soft);color:var(--e-danger);border-color:transparent}
.br-pair{gap:8px}
.br-seg{display:flex;flex-wrap:nowrap}
.br-seg button{flex:1 1 0;min-width:0;min-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-pv{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 18px}
.br-pv .e-btn{width:100%}
.br-players .e-style.br-player{flex-direction:row;align-items:center;gap:12px;padding:8px;min-height:80px}
.br-player .e-style-t{padding:0;flex:1;min-width:0}
.br-player .e-style-t small{-webkit-line-clamp:3}
.br-radio b{font-size:13px}
/* image, video and audio fields: preview, then a two-column grid of actions */
.e-img{gap:8px}
.e-img img,.e-img .ph{height:132px;border-radius:10px}
.e-img .bts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.e-img .bts .e-btn{width:100%;justify-content:center;padding:0 8px}
.iu-src{display:flex;align-items:center;gap:6px}
/* item lists (cards, tabs, steps, options): a steady header row with a two-line title and an action group */
.e-items{gap:8px}
.e-item{padding:0 10px;background:var(--e-panel);border:1px solid var(--e-line);border-radius:10px}
details.e-item[open]{padding-bottom:12px;background:var(--e-sunk);border-color:var(--e-line2)}
.e-item-h,details.e-item:not([open])>.e-item-h{display:flex;align-items:center;gap:6px;min-height:46px;margin:0}
details.e-item[open]>.e-item-h{margin:0 -10px 12px;padding:0 10px;border-bottom:1px solid var(--e-line)}
div.e-item>.e-item-h{margin:0 -10px 10px;padding:0 10px;border-bottom:1px solid var(--e-line)}
div.e-item{padding-bottom:10px}
.e-item-h b{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:13px;font-weight:600;line-height:1.35}
.e-item-acts{display:flex;align-items:center;gap:0;flex:none;margin-right:-4px}
.e-item-h>span:not(.e-item-acts){flex:none}
.e-item .e-item-acts .e-icbtn,.e-item .e-icbtn{width:30px;height:30px;border-radius:8px}
.e-item .e-icbtn .e-ico{width:15px;height:15px}
.e-item-acts .e-icbtn[data-rm]:hover:not([disabled]){color:var(--e-danger);background:var(--e-danger-soft)}
.e-items+.e-btn,.e-items~.e-row{margin-top:8px}
/* block properties footer: one primary action, two icon actions, stuck to the bottom of the panel */
.e-pfoot{position:sticky;bottom:-24px;z-index:4;display:flex;align-items:center;gap:8px;margin:22px calc(var(--p-xr) * -1) -24px calc(var(--p-x) * -1);padding:12px var(--p-xr) 12px var(--p-x);background:var(--e-panel);border-top:1px solid var(--e-line)}
.e-pfoot .e-btn{flex:1 1 auto;height:40px}
.e-pfoot .e-icbtn{flex:none;width:40px;height:40px;border:1px solid var(--e-line2);border-radius:10px;color:var(--e-ink)}
.e-pfoot .e-icbtn.danger{color:var(--e-danger)}
.e-pfoot .e-icbtn.danger:hover:not([disabled]){background:var(--e-danger-soft);border-color:transparent}
/* Add blocks: equal tabs; tiles with the icon above the name, so long names wrap instead of running under the star */
.wf-libtabs{display:flex;width:100%}
.wf-libtabs button{flex:1 1 0;justify-content:center;min-width:0}
.wf-tiles{gap:8px}
.wf-tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:86px;padding:10px 12px;font-size:13px;line-height:1.3}
.wf-tile .tt{display:block;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.wf-star{top:6px;right:6px;width:30px;height:30px}
.wf-where{line-height:1.45}
/* lessons outline and block list */
.e-les .pick{min-height:44px;padding:8px 10px}
.e-les .pick .tt{line-height:1.4}
.e-bl{margin:4px 0 10px 18px;padding-left:10px}
.e-bl-i{min-height:40px;justify-content:center;padding:6px 10px}
.e-bl-i:empty{display:none}
/* other inspector bits */
.e-hlv{margin:0 0 16px}
.e-note,.e-warnline{margin-bottom:14px}
.e-align{display:flex}
.th-color{padding:8px 10px;gap:10px}
.th-font-add{grid-template-columns:minmax(0,1fr) auto}
/* narrow panels (small laptops, the phone sheet is wider): single-column action grids */
@container panel (max-width:220px){
  .e-img .bts,.br-pv{grid-template-columns:1fr}
  .e-row.br-acts{flex-wrap:wrap}
  .e-row.br-acts>.e-btn{flex:1 1 100%}
  .th-palettes{grid-template-columns:1fr}
}
@media (max-width:1024px){
  :root{--p-x:18px;--p-xr:12px}
  /* the bottom bar is 68px tall; :root[data-theme] used to keep the desktop rail width (88px) here, leaving a gap under the sheet */
  :root,:root[data-theme]{--e-rail:68px}
  .e-phead{height:60px;align-items:center;gap:8px;padding:14px 10px 0 var(--p-x)}
  /* the sheet always opens below the stage toolbar, never over the stepper */
  .e-panel{max-height:calc(100dvh - 190px - var(--e-rail));height:min(70dvh,calc(100dvh - 190px - var(--e-rail)))}
  .e-panel.tall{height:calc(100dvh - 190px - var(--e-rail))}
}
.e-bl-i span:empty{display:none}
.e-img .bts .e-btn.ghost.danger{border-color:var(--e-line2);background:var(--e-panel)}
.e-img .bts .e-btn.ghost.danger:hover:not([disabled]){background:var(--e-danger-soft);border-color:transparent}

/* ---------- Text formatting toolbar and menus (October 2026) ---------- */
.e-richbar{display:flex;flex-direction:column;gap:2px;padding:4px}
.e-richbar .rb-row{display:flex;flex-wrap:wrap;align-items:center;gap:1px}
.e-richbar .rb-type{gap:4px;padding:0 0 4px;margin-bottom:2px;border-bottom:1px solid var(--e-line)}
.e-richbar .e-rb-sep{height:20px;margin:0 3px}
.e-richbar button.rb-menu,.rb-menu{display:inline-flex;align-items:center;gap:4px;width:auto;height:32px;padding:0 6px 0 9px;border:1px solid var(--e-line2);border-radius:7px;background:var(--e-panel);color:var(--e-ink);font:600 12.5px/1 var(--e-font);cursor:pointer;min-width:0}
.e-richbar button.rb-menu:hover{background:var(--e-sunk);color:var(--e-ink)}
.e-richbar .rb-font{flex:1 1 auto}.e-richbar .rb-size{flex:0 0 78px}
.rb-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.e-richbar .rb-chev{width:12px;height:12px;flex:none;color:var(--e-muted)}
.e-richbar button.rb-col{position:relative;width:33px;height:29px;padding:0 10px 0 2px;border:0;background:none;gap:0;justify-content:center}
.e-richbar button.rb-col .e-ico:not(.rb-chev){width:15px;height:15px}
.e-richbar button.rb-col .rb-chev{position:absolute;right:1px;width:10px;height:10px}
.rb-sw{position:absolute;left:7px;right:13px;bottom:4px;height:3px;border-radius:2px;background:currentColor;box-shadow:0 0 0 .5px rgba(0,0,0,.25)}
.e-richbar button[aria-expanded=true]{background:var(--e-accent-soft);color:var(--e-accent-text)}
.fx-menu{position:fixed;z-index:100;min-width:210px;max-width:290px;max-height:min(380px,60vh);overflow:auto;overscroll-behavior:contain;padding:6px;background:var(--e-panel);border:1px solid var(--e-line);border-radius:12px;box-shadow:var(--e-shadow-lg);display:flex;flex-direction:column;gap:1px;animation:ab-fade .12s ease-out both}
.fx-menu button[data-v]{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--e-ink);font:500 13.5px/1.25 var(--e-font);text-align:left;cursor:pointer;flex:none}
.fx-menu button[data-v]>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-menu button[data-v]:hover,.fx-menu button[data-v]:focus-visible{background:var(--e-fill);outline:none}
.fx-menu button[data-v]:focus-visible{box-shadow:inset 0 0 0 2px var(--e-accent)}
.fx-menu button[aria-pressed=true]{color:var(--e-accent-text);font-weight:700}
.fx-menu button[aria-pressed=true]::after{content:"";flex:none;width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-2px)}
.fx-h{flex:none;font-size:12px;font-weight:700;letter-spacing:0!important;color:var(--e-muted);padding:10px 10px 4px}
.fx-sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--e-line2);flex:none}
.fx-sw.none{background:linear-gradient(to top right,transparent 44%,var(--e-danger) 44% 56%,transparent 56%),var(--e-panel)}
.fx-sw.auto{background:linear-gradient(135deg,var(--e-ink) 50%,var(--e-accent) 50%)}
.fx-custom{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 6px;margin-top:4px;border-top:1px solid var(--e-line);font-size:13px;color:var(--e-ink)}
.fx-custom input[type=number]{width:72px;height:32px;padding:0 8px;border:1px solid var(--e-line2);border-radius:7px;background:var(--e-panel);color:var(--e-ink);font:inherit}
.fx-custom input[type=color]{width:40px;height:30px;padding:2px;border:1px solid var(--e-line2);border-radius:7px;background:var(--e-panel);cursor:pointer}
/* Text style section in block properties */
.e-ts{border:1px solid var(--e-line);border-radius:10px;padding:12px 12px 2px;margin:0 0 18px;background:var(--e-sunk)}
.e-ts>.e-row{margin-bottom:12px}
.e-ts .e-field{margin-bottom:12px}
.e-ts-col{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.e-ts-col input[type=color]{width:42px;height:38px;padding:2px;border:1px solid var(--e-line2);border-radius:8px;background:var(--e-panel);cursor:pointer;flex:none}
.e-ts-col .e-btn{flex:none}
.e-ts-col .e-help{margin:0;flex:1 1 100%;min-width:0}
.e-richbar .rb-row>button:not(.rb-menu){width:28px;height:29px}

/* ---------- Player text dialog ---------- */
.e-dialog.pt-dialog{width:min(780px,100%);padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - max(16px,min(8vh,72px)) - 16px);overflow:hidden}
.pt-head{padding:24px 28px 14px;border-bottom:1px solid var(--e-line);flex:none}
.pt-head h2{margin:0 0 6px}
.pt-head p{margin:0 0 12px;max-width:62ch}
.pt-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pt-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1px solid var(--e-line2);border-radius:10px;background:var(--e-panel);color:var(--e-muted)}
.pt-search:focus-within{outline:2px solid var(--e-accent);outline-offset:1px}
.pt-search .e-in{border:0;background:transparent;height:40px;padding:0;box-shadow:none!important}
.pt-tools .e-seg button{min-height:34px}
.pt-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 18px 16px 28px}
.pt-grp{border-bottom:1px solid var(--e-line)}
.pt-grp>summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:14px 0;align-items:baseline}
.pt-grp>summary::-webkit-details-marker{display:none}
.pt-grp>summary::before{content:"";grid-row:span 2;align-self:center;width:7px;height:7px;border-right:2px solid var(--e-muted);border-bottom:2px solid var(--e-muted);transform:rotate(-45deg);transition:transform .15s}
.pt-grp[open]>summary::before{transform:rotate(45deg)}
.pt-grp>summary b{font-size:14.5px}
.pt-grp>summary small{grid-column:2 / span 2;color:var(--e-muted);font-size:12.5px;font-weight:400;line-height:1.45}
.pt-gc{font-size:12px;font-weight:700;color:var(--e-accent-text);margin-left:8px}
.pt-grp>summary b{grid-column:2;grid-row:1}.pt-grp>summary .pt-gc{grid-column:3;grid-row:1;margin:0}
.pt-row.has-v .pt-chip{display:none}
.pt-rows{display:flex;flex-direction:column;gap:12px;padding:4px 0 18px 17px}
.pt-row label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--e-ink)}
.pt-src{flex-basis:100%;font-weight:500;font-size:12px;color:var(--e-muted)}
.pt-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--e-warn-soft);color:var(--e-warn)}
.pt-in{display:flex;gap:6px;align-items:flex-start}
.pt-in .e-in,.pt-in .e-ta{flex:1;min-width:0}
.pt-in .e-ta{min-height:64px}
.pt-in .pt-rs{flex:none;width:40px;height:40px;border:1px solid var(--e-line2);border-radius:10px}
.pt-ph code{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--e-sunk);padding:1px 5px;border-radius:5px}
.pt-w{margin-top:6px}
.pt-dialog>.foot{flex:none;margin:0;padding:14px 28px;border-top:1px solid var(--e-line);background:var(--e-panel)}
@media (max-width:640px){.pt-head{padding:18px 18px 12px}.pt-body{padding:6px 10px 12px 18px}.pt-dialog>.foot{padding:12px 18px}}
/* Learner variable menu */
.lv-menu{max-width:340px;min-width:280px}
.lv-menu button[data-v]{justify-content:space-between}
.lv-menu button[data-v]>span{flex:0 1 auto}
.lv-menu code{flex:none;font:500 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--e-muted);background:var(--e-fill);border-radius:5px;padding:3px 6px}
.lv-menu .lv-fb{flex-wrap:wrap}.lv-menu .lv-fb input{flex:1 1 120px;min-width:0;height:32px;padding:0 8px;border:1px solid var(--e-line2);border-radius:7px;background:var(--e-panel);color:var(--e-ink);font:inherit}
.lv-note{flex:none;margin:4px 10px 6px;font-size:12px;line-height:1.4;color:var(--e-muted)}
.pv-who{display:inline-flex;align-items:center;gap:6px}.pv-who .e-sel{height:32px;width:auto}

/* ---- Review by file (review-file.js) ---- */
.e-app.is-filereview #eShare{display:none}
.rf{display:flex;flex-direction:column;gap:14px;font-size:13px;color:var(--e-ink)}
.rf+.rf,.rf-sep{border-top:1px solid var(--e-line);padding-top:14px}
.rf h3{margin:0;font-size:14px;font-weight:700;color:var(--e-ink)}
.rf .rf-h4{margin:6px 0 0;font-size:13px;font-weight:700}
.rf p{margin:0}
.rf-intro{background:var(--e-accent-soft);color:var(--e-ink);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rf-intro b{color:var(--e-accent-text);font-size:13px}
.rf-intro p{line-height:1.45}
.rf-field{display:flex;flex-direction:column;gap:4px}
.rf-verdict{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rf-verdict .e-lbl{width:100%}
.rf-verdict .e-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--e-accent);color:var(--e-accent-text);font-weight:700}
.rf-sec,.rf-set{display:flex;flex-direction:column;gap:8px}
.rf-set{border:1px solid var(--e-line);border-radius:14px;padding:12px;background:var(--e-sunk)}
.rf-sh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid var(--e-line);padding-bottom:6px}
.rf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rf-item,.rf-c{border:1px solid var(--e-line);border-radius:12px;padding:10px 12px;background:var(--e-panel);display:flex;flex-direction:column;gap:6px}
.rf-item.done,.rf-c.done{opacity:.78}
.rf-item.focus{box-shadow:0 0 0 2px var(--e-accent)}
.rf-ih{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rf-ih b{font-size:13px;line-height:1.35}
.rf-pill{flex:none;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--e-warn-soft);color:var(--e-warn)}
.rf-pill.accepted{background:var(--e-ok-soft);color:var(--e-ok)}
.rf-pill.rejected{background:var(--e-danger-soft);color:var(--e-danger)}
.rf-meta{font-size:12px;color:var(--e-muted)}
.rf-rows{display:flex;flex-direction:column;gap:6px}
.rf-row{display:flex;flex-direction:column;gap:2px}
.rf-k{font-size:12px;font-weight:700;color:var(--e-muted)}
.rf-diff{line-height:1.5;word-break:break-word;background:var(--e-sunk);border-radius:8px;padding:6px 8px}
.rf-set .rf-diff{background:var(--e-panel);border:1px solid var(--e-line)}
.rf-diff ins{background:var(--e-ok-soft);color:var(--e-ok);text-decoration:none;border-bottom:2px solid currentColor}
.rf-diff del{background:var(--e-danger-soft);color:var(--e-danger);text-decoration:line-through}
.rf-media{display:flex;gap:8px}
.rf-media figure{margin:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.rf-media img{width:96px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--e-line);background:var(--e-sunk)}
.rf-media figcaption{font-size:12px;color:var(--e-muted)}
.rf-none{display:flex;align-items:center;justify-content:center;width:96px;height:64px;border-radius:6px;border:1px dashed var(--e-line);font-size:12px;color:var(--e-muted)}
.rf-order{margin:0;padding-left:20px;font-size:12.5px;line-height:1.5}
.rf-warn{font-size:12px;font-weight:600;color:var(--e-warn);background:var(--e-warn-soft);border-radius:8px;padding:6px 8px}
.rf-note{font-size:12px;color:var(--e-ok)}
.rf-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rf-acts .e-btn{min-height:32px;padding:0 10px}
.rf-save{padding:2px 0}
.rf-body{white-space:pre-wrap;line-height:1.45;word-break:break-word}
.rf textarea.e-in{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;font:inherit}
.rf-verdict-line{font-weight:700}.rf-verdict-line.approved{color:var(--e-ok)}.rf-verdict-line.changes{color:var(--e-warn)}
.rf-sync{margin:6px 0 0;font-size:13px;color:var(--e-ink-2,#555)}
.rf-sync.ok{color:var(--e-ok,#1e7a3c)}
.rf-sync.warn{color:var(--e-warn,#8a4b00);font-weight:600}
/* item lists: the move / copy / delete buttons sit beside the item header, not inside it (a <summary> must not contain buttons) */
.e-item-w{position:relative;min-width:0}
.e-item-w>.e-item-acts{position:absolute;top:8px;right:6px;z-index:1}
.e-item-w>.e-item>.e-item-h{padding-right:128px}
.e-item-w>details.e-item[open]>.e-item-h{padding-right:138px}
.e-item-w>.e-item-acts .e-icbtn{width:30px;height:30px;border-radius:8px}
.e-item-w>.e-item-acts .e-icbtn[data-rm]:hover:not([disabled]){color:var(--e-danger);background:var(--e-danger-soft)}

/* Theme › Flow: My designs list and the designer dialog */
.fl-dlist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.fl-dlist li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px;border:1px solid var(--e-line);border-radius:10px;background:var(--e-panel)}
.fl-dsw{flex:0 0 auto;width:40px;height:28px;border-radius:7px;border:1px solid var(--e-line2);display:inline-block;vertical-align:middle}
.fl-dz-starts .fl-dsw{width:22px;height:16px;margin-right:6px;border-radius:4px}
.fl-dn{flex:1;min-width:0;display:grid}.fl-dn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fl-dn small{color:var(--e-muted);font-size:12px}
.fl-dact{display:flex;gap:4px;align-items:center;flex:1 0 100%;justify-content:flex-end}
.e-dialog.fl-dz-dlg{width:min(1040px,100%);max-width:none}
.fl-dz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.fl-dz-form{max-height:min(66vh,680px);overflow:auto;padding-right:8px}
.fl-dz-side{position:sticky;top:0;display:grid;gap:10px}
.fl-dz-pv{height:min(52vh,460px);border:1px solid var(--e-line2);border-radius:12px;overflow:hidden;background:#fff}
.fl-dz-cr{font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--e-line)}
.fl-dz-cr.ok{border-color:#1F7A4D;background:rgba(31,122,77,.08)}.fl-dz-cr.bad{border-color:#B42318;background:rgba(180,35,24,.08)}
.fl-dz-g{border:1px solid var(--e-line);border-radius:10px;padding:10px 12px 12px;margin:0 0 14px;min-width:0}
.fl-dz-g legend{padding:0 6px;font-weight:700;font-size:13px}
.fl-dz-c{display:flex;align-items:center;gap:10px;margin:8px 0}
.fl-dz-r label{display:flex;justify-content:space-between;gap:8px}.fl-dz-r output{color:var(--e-muted);font-variant-numeric:tabular-nums}
.fl-dz-r input[type=range]{width:100%}
.fl-dz-starts{display:flex;flex-wrap:wrap;gap:6px}
.fl-dz-img{display:flex;gap:10px;align-items:center;margin:4px 0 10px}.fl-dz-img img{width:84px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--e-line)}.fl-dz-img div{display:flex;flex-wrap:wrap;gap:6px}
.fl-dz-l{border:1px solid var(--e-line);border-radius:8px;padding:6px 10px;margin:0 0 8px;background:var(--e-sunk)}
.fl-dz-l summary{cursor:pointer;font-weight:600;padding:4px 0}
.fl-dz-l[open]{background:var(--e-panel)}
@media (max-width:820px){.fl-dz{grid-template-columns:1fr}.fl-dz-side{position:static;order:-1}.fl-dz-pv{height:260px}.fl-dz-form{max-height:none}}