/* Canvas editor: one active tool group and a persistent preview. */
html[data-tool=role-customizer] .tools-main{width:min(1220px,calc(100% - 48px));padding:112px 0 56px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[data-tool=role-customizer] .tool-heading{align-items:center;margin-bottom:24px}
html[data-tool=role-customizer] .tool-heading h1{font-family:alcyone,sans-serif;font-size:2.25rem;margin:8px 0 0}
html[data-tool=role-customizer] .tool-heading p{display:none}
.role-app{--bg:#222329;--bg-secondary:#2c2d35;--label:#f5f5fa;--label-secondary:#b9bac8;--separator:#41424f;--accent:#997dff;--action:#7655ed;--selected:#3b3156;color:var(--label);background:var(--bg);border-radius:16px;box-shadow:0 16px 40px #1814201a;overflow:visible}
html[data-tool=role-customizer][data-theme=dark] .role-app{--accent:#ff936c;--action:#d74712;--selected:#4c3027}
.role-app *{min-width:0}.role-app :is(button,input,select,summary){font-family:inherit;scroll-margin-top:110px}.role-app ::selection{background:var(--action);color:#fff}.role-app :focus-visible{outline:2px solid var(--accent);outline-offset:3px}.role-app input{caret-color:var(--accent)}.role-app :is(input,select){font-size:.875rem!important;margin:0;border-radius:8px!important}.role-app input::placeholder{color:var(--label-secondary)}
.role-app button{font-size:.875rem;border-radius:8px;padding:10px 14px}.role-app button:hover{background:var(--bg-secondary)}.role-app button[aria-pressed=true]{background:var(--selected);border-color:var(--accent);color:var(--label)}
.role-bar{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--separator)}.role-set-name{width:220px}.role-set-name input{font-weight:600;background:transparent!important;border-color:transparent!important}.role-set-name input:hover,.role-set-name input:focus{border-color:var(--separator)!important}.role-history{display:flex;gap:6px}.role-history button{width:44px;height:44px;padding:11px;border-color:transparent}.role-history svg{width:20px;height:20px;display:block}.role-project-menu{margin-left:auto;position:relative}.role-project-menu summary{font-size:.875rem;padding:12px}.role-project-menu>div{position:absolute;right:0;top:48px;z-index:20;width:260px;padding:20px;display:grid;gap:16px;border-radius:12px;background:var(--bg-secondary);box-shadow:0 12px 32px #0006}
.role-rail{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--separator)}.role-list{display:flex;gap:8px;overflow-x:auto;flex:1;padding:3px;scrollbar-color:var(--separator) transparent;scrollbar-width:thin}.role-list button{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:var(--bg-secondary);border-color:transparent;min-height:50px;padding:8px 14px}.role-list button[aria-pressed=true]{border-color:var(--accent)}.role-list svg{width:32px;height:32px;flex:0 0 32px}.role-list span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-rail>#add-role{flex:0 0 44px;width:44px;height:44px;padding:10px}.role-rail>#add-role svg{display:block;width:22px;height:22px}.role-rail>#role-count{font-size:.75rem;color:var(--label-secondary);white-space:nowrap}
.role-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);align-items:start}.role-controls{min-width:0;border-right:1px solid var(--separator)}.role-tabs{display:flex;border-bottom:1px solid var(--separator);background:#1a1b20}.role-tabs button{border:0;border-radius:0;flex:1;padding:20px 12px;min-height:64px;font-weight:600;color:var(--label-secondary)}.role-tabs button[aria-selected=true]{color:var(--label);background:var(--bg);box-shadow:inset 0 -3px var(--accent)}.role-panel{padding:24px;min-height:482px}.role-panel>section+section{margin-top:24px;padding-top:24px;border-top:1px solid var(--separator)}.role-panel h2{font-size:1rem;font-weight:600;margin:0 0 16px}.role-panel label{font-size:.8125rem;line-height:1.4;margin-bottom:18px}.role-panel label.check-label{margin:0}.role-panel details{margin-top:20px}.role-panel summary{color:var(--label-secondary);font-size:.875rem}.role-panel details>label{margin-top:16px}.role-panel [hidden],.role-app [hidden]{display:none!important}
.role-symbol-filter{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:12px;margin-bottom:20px}.role-symbol-filter label{margin:0}.role-symbol-filter input,.role-symbol-filter select{background:#1b1c22!important}.role-icon-library{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.role-icon-library button{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:48px;padding:14px;border:1px solid transparent;background:var(--bg-secondary)}.role-icon-library svg{width:30px;height:30px;display:block}.role-icon-library span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.role-icon-library button:hover{background:#3a3b46}.role-icon-library button[aria-pressed=true]{background:var(--action);border-color:var(--accent)}.role-library-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;font-size:.6875rem;color:var(--label-secondary)}.role-library-foot a{color:inherit;text-underline-offset:3px}
.role-scope{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--separator)}.role-scope .check-label{font-size:.8125rem}.role-scope input{accent-color:var(--accent);margin:0}.role-scope>span{font-size:.75rem;color:var(--label-secondary)}.role-shapes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.role-shapes button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px;background:var(--bg-secondary);border-color:transparent}.role-shapes svg{width:26px;height:26px;fill:currentColor;stroke:none}.role-shapes button[data-shape=none] svg{fill:none;stroke:currentColor;stroke-width:5}.role-shapes span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.role-fill-tabs{display:flex;gap:6px;padding:4px;background:#1a1b20;border-radius:8px;margin-bottom:20px}.role-fill-tabs button{flex:1;border:0;font-size:.8125rem}.role-colors{display:grid;grid-template-columns:1fr 1fr;gap:16px}.role-color>span{display:flex;gap:8px;align-items:center}.tools-main .role-color input[type=color]{width:48px;height:44px;min-height:44px;flex:0 0 48px;margin:0;padding:4px}.role-color input[data-hex]{flex:1;width:100%;min-width:0;font-variant-numeric:tabular-nums}.role-color input[aria-invalid=true]{outline:2px solid #ff9ca8}.role-range{display:grid!important;grid-template-columns:1fr auto;gap:12px;align-items:center}.role-range output{font-size:.75rem;color:var(--label-secondary);font-variant-numeric:tabular-nums}.role-range input{grid-column:1/-1;accent-color:var(--accent);padding:0}.role-palettes{display:flex;gap:10px}.role-palettes button{width:48px;height:44px;padding:5px;background:transparent;border-color:var(--separator)}.role-palette-swatch{display:block;width:100%;height:30px;border-radius:5px}.role-identity-actions{display:flex;gap:10px}.role-identity-actions button{flex:1}.role-app .file-pick{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--bg-secondary);color:var(--label);border:1px solid var(--separator);margin:12px 0}.role-app .file-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}
.role-preview{position:sticky;top:100px}.role-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:12px 20px;border-bottom:1px solid var(--separator);font-size:.8125rem;font-weight:600}.role-proof-ground{display:flex;gap:2px}.role-proof-ground button{font-size:.6875rem;min-width:44px;min-height:44px;padding:8px;border:0;color:var(--label-secondary)}.role-proof-ground button[aria-pressed=true]{background:var(--bg-secondary);color:var(--label)}.role-large{display:flex;align-items:center;justify-content:center;min-height:290px;background:#fafafc}.role-large[data-ground=dark]{background:#17181d}.role-large[data-ground=transparent]{background-color:#edf0f3;background-image:conic-gradient(#cbd0d7 25%,transparent 0 50%,#cbd0d7 0 75%,transparent 0);background-size:24px 24px}.role-large svg{display:block;width:210px;height:210px}.role-real-proof{padding:16px 20px;display:grid;gap:8px}.role-chat-sample{display:flex;align-items:center;gap:10px;padding:12px;border-radius:8px;min-width:0}.role-chat-dark{background:#18191f;color:#f3f4fa}.role-chat-light{background:#f3f4f7;color:#252630}.role-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#7655ed;color:#fff;font-size:12px}.role-chat-name{display:flex;align-items:center;gap:6px;font-size:.8125rem}.role-chat-name strong{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tools-main .role-chat-dark strong{color:#f3f4fa}.tools-main .role-chat-light strong{color:#252630}.role-mini,.role-mini svg{display:block;width:20px;height:20px;flex:0 0 20px}.role-chat-sample p{font-size:.6875rem;line-height:1.5;margin:3px 0 0}.role-export{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 20px}.role-app .role-export button.primary{background:var(--action);color:#fff;border-color:transparent}.role-app .role-export button.primary:hover{filter:brightness(1.12)}.role-export p{grid-column:1/-1;text-align:center;font-size:.6875rem;color:var(--label-secondary);margin:0;line-height:1.4}
.role-app-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 24px;border-top:1px solid var(--separator);font-size:.6875rem;color:var(--label-secondary)}.role-app-footer p{margin:0}.role-app-footer details{position:relative;flex:0 0 auto}.role-app-footer summary{font-size:.75rem;min-height:36px;padding:10px}.role-app-footer details[open]{max-width:400px}.role-app-footer details p{font-size:.75rem;line-height:1.6}.role-app-footer a{color:var(--accent)}.role-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-tool=role-customizer] #status:empty{min-height:0;margin:0}html[data-tool=role-customizer] #status:not(:empty){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 32px));padding:12px 16px;margin:0;z-index:30;border-radius:10px;background:#17181f;color:#f5f5fa;box-shadow:0 8px 24px #0003;font-size:.875rem;pointer-events:none}html[data-tool=role-customizer] #status.is-error{color:#ffb5be}
@media(max-width:1100px){.role-workspace{grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr)}.role-panel{padding:20px}.role-icon-library{grid-template-columns:repeat(6,minmax(0,1fr))}.role-shapes{grid-template-columns:repeat(4,minmax(0,1fr))}.role-symbol-filter{grid-template-columns:1fr 130px}.role-rail>#role-count{display:none}}
@media(max-width:760px){html[data-tool=role-customizer] .tools-main{width:calc(100% - 24px);padding-top:100px}.role-workspace{display:flex;flex-direction:column}.role-preview{order:0;position:static;width:100%}.role-controls{order:1;width:100%;border-right:0;border-top:1px solid var(--separator)}.role-large{min-height:190px}.role-large svg{width:150px;height:150px}.role-preview-bar{min-height:64px;padding:10px 12px}.role-real-proof{grid-template-columns:1fr 1fr;padding:12px}.role-chat-sample{padding:10px}.role-chat-sample p{display:none}.role-chat-name strong{max-width:80px}.role-export{padding:0 12px 16px}.role-bar{padding:10px 12px;gap:4px}.role-set-name{flex:1;width:auto}.role-bar .role-history{gap:0}.role-project-menu summary{padding:12px 6px}.role-rail{padding:10px 12px;gap:8px}.role-list button{font-size:.75rem;padding:6px 10px;gap:6px}.role-list svg{width:26px;height:26px;flex-basis:26px}.role-tabs button{min-height:52px;padding:16px 8px}.role-panel{padding:20px;min-height:0}.role-icon-library{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.role-icon-library button{padding:8px;min-height:44px}.role-icon-library svg{width:24px;height:24px}.role-library-foot{gap:8px;font-size:.625rem}.role-app-footer{padding:10px 12px;gap:10px}.role-app-footer #storage-note{font-size:.625rem;line-height:1.5}.role-symbol-filter{grid-template-columns:1fr 115px;gap:8px}.role-preview-bar>span{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.role-app *{transition:none!important;animation:none!important}}

.role-app{--control-ink:var(--label);--control-bg:#1b1c22;--control-line:var(--separator);--control-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bac8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")}
.role-controls>.role-scope{padding:12px 24px;margin:0;border-bottom:1px solid var(--separator)}.role-scope>span{display:none}.role-symbol-filter select{background:var(--control-bg) var(--control-arrow) right 10px center/16px 16px no-repeat!important}
@media(max-width:760px){.role-controls>.role-scope{padding:12px 20px}.role-chat-name strong{max-width:70px}}

html[data-tool=role-customizer] .tool-heading{display:none}
html[data-tool=role-customizer] .tools-main{padding-top:100px}
.role-bar h1{font-family:alcyone,sans-serif;font-size:1.625rem;line-height:1.2;margin:0;flex:1}
.role-project-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;list-style:none;border-radius:8px}.role-project-menu>summary::-webkit-details-marker{display:none}.role-project-menu>summary svg{width:24px;height:24px}.role-project-menu>summary:hover{background:var(--bg-secondary)}.role-project-menu .role-set-name{width:auto}
.role-bar{padding:12px 24px}.role-rail{padding-block:12px}
@media(max-width:760px){html[data-tool=role-customizer] .tools-main{padding-top:90px}.role-bar{padding:10px 12px}.role-bar h1{font-size:1.25rem}.role-rail{padding:10px 12px}}
@media(max-width:760px){.role-app :is(input,select){font-size:16px!important}.role-symbol-filter{grid-template-columns:minmax(0,1fr) 140px}}

/* A visible action makes adding another icon discoverable. */
.role-rail>#add-role{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;width:auto;padding:10px 12px;font-size:.8125rem;white-space:nowrap}
.role-rail>#add-role svg{width:18px;height:18px}

/* Name the task, then reveal only the controls that serve it. */
.role-app .role-shapes{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.role-app .role-shapes button{flex-direction:column;gap:8px;padding:12px 5px;min-height:72px}
.role-app .role-shapes span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:.6875rem;line-height:1.2;white-space:nowrap}
.role-app .role-shapes svg{width:28px;height:28px}
.role-app .role-custom-source{margin:0 0 20px}
.role-app .role-custom-source[open]{padding-bottom:16px;border-bottom:1px solid var(--separator)}
.role-app .role-custom-source>label{margin-top:16px}
.role-app .role-colors{grid-template-columns:1fr}
.role-app .role-palettes{flex-wrap:wrap}
.role-app .role-next{display:block;width:100%;margin-top:24px;background:var(--bg-secondary);border-color:var(--separator);font-weight:600;min-height:44px}
.role-app .role-download-size{padding:0 20px 16px}
.role-app .role-download-size label{font-size:.8125rem;margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.role-app .role-download-size select{width:auto;max-width:65%;margin:0}
.role-app .role-manage{margin-top:32px}
.role-app .role-tabs button{font-size:.8125rem}
@media(max-width:760px){
 .role-app .role-controls{order:0;border-top:0}
 .role-app .role-preview{order:1;border-top:1px solid var(--separator)}
 .role-app .role-shapes{grid-template-columns:repeat(4,minmax(0,1fr))}
 .role-app .role-download-size{padding:0 12px 16px}
 .role-app .role-tabs button{font-size:.75rem;padding-inline:6px}
}
/* Every working field follows the active light/dark surface. */
html body[data-page=labs][data-tool-page=role-customizer] .role-app{--control-bg:var(--studio-control);--control-ink:var(--studio-ink);--control-line:var(--studio-line)}
html body[data-page=labs][data-tool-page=role-customizer] .role-app :is(input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=file]),select){background-color:var(--studio-control)!important;color:var(--studio-ink)}
html body[data-page=labs][data-tool-page=role-customizer] .role-app :is(button,input,select,summary):focus-visible{box-shadow:none;outline:2px solid var(--studio-accent)!important;outline-offset:3px}