/* Shared materials: floating layers blur once; nested controls use reflections only. */
.be-glass, .be-floating {
  background-color:var(--surface-popover);
  background-image:var(--glass-reflection);
  border:1px solid var(--border-glass);
  box-shadow:var(--glass-highlight), var(--shadow-md);
  border-radius:var(--radius-card);
}
.be-floating { border-radius:var(--radius-floating); box-shadow:var(--glass-highlight), var(--shadow-floating); }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
  .be-glass { background-color:var(--surface-glass-strong); }
  .be-floating { background-color:var(--surface-glass-floating); backdrop-filter:blur(var(--glass-blur-md)); -webkit-backdrop-filter:blur(var(--glass-blur-md)); }
}
.be-enter { animation:be-surface-enter var(--motion-panel) var(--ease-fluid); }
@keyframes be-surface-enter { from { opacity:0; transform:translateY(var(--space-1)); } to { opacity:1; transform:translateY(0); } }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-semibold.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.be-icon { width:var(--icon-md); height:var(--icon-md); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; vertical-align:middle; }
.be-icon--sm { width:var(--icon-sm); height:var(--icon-sm); }
.be-icon--lg { width:var(--icon-lg); height:var(--icon-lg); }
/* Directional glyphs (UI.icon MIRROR set) flip with the reading direction. */
.be-icon--mirror:dir(rtl) { transform:scaleX(-1); }
a:focus-visible { outline:2px solid var(--border-focus); outline-offset:var(--space-half); }
.be-sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
.be-tooltip { position:fixed; width:max-content; white-space:normal; z-index:2147483647; padding: var(--space-2) var(--space-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-popover); color:var(--text-primary); font: 500 var(--text-sm)/1.4 var(--font-sans); max-width:calc(100vw - 16px); box-shadow:var(--glass-highlight),var(--shadow-sm); box-sizing:border-box; }
.be-tooltip__keys { display:inline-flex; white-space:nowrap; gap: var(--space-1); margin-inline-start: var(--space-2); vertical-align:middle; }
.be-tooltip kbd { display:inline-block; min-width:var(--space-5); padding: 1px var(--space-1); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:var(--radius-sm); background:var(--surface-input); color:var(--text-primary); font: 600 var(--text-sm)/1.4 var(--font-mono); text-align:center; box-sizing:border-box; }
.be-tooltip[hidden] { display:none!important; }
[data-be-feedback] { position:relative; }
[data-be-feedback='success'] { color:var(--text-success)!important; }
[data-be-feedback='error'] { color:var(--text-destructive)!important; }
/* On a filled accent button the green or red text would sit on orange (below 3:1): keep the button's own dark label. */
:is(.mini-action--primary, .cta, .button-primary, .btn--primary)[data-be-feedback] { color:var(--text-inverse)!important; }
[data-be-feedback] > .be-icon { animation:be-confirm var(--motion-state) var(--ease-fluid); }
/* Copy feedback, everywhere: the button keeps its own surface; the check and the label swap in, in one colour. */
[data-be-feedback] .be-icon { color:inherit!important; }
/* Copy feedback covers what was copied (1.0.3 pattern, the owner's choice): one look for rows, cards, chips and swatches. */
.be-copy-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap: var(--space-2); background:var(--surface-elevated); border:1px solid var(--border-selected); border-radius:inherit; font: 500 var(--text-sm)/1.3 var(--font-sans); color:var(--text-success); pointer-events:none; animation:be-confirm var(--motion-state) var(--ease-fluid); }
[data-be-feedback='success'] .be-copy-overlay { color:var(--text-success); } /* outranks a host's own span rules (.token-row span) */
[data-be-feedback='error'] .be-copy-overlay { color:var(--text-destructive); }
.be-swatch .be-copy-overlay { flex-direction:column; font-size: var(--text-sm); gap: var(--space-half); }
[data-be-feedback] .be-copy-overlay > span { color:inherit; font-size:inherit; }
.be-color-details { display:grid; gap: var(--space-3); font: 400 var(--text-base)/1.5 var(--font-sans); color:var(--text-primary); min-width:0; grid-template-columns:minmax(0, 1fr);}
.be-color-details * { box-sizing:border-box; }
.be-color-details h3,.be-color-details h4,.be-color-details p { margin:0; }
.be-color-details h3 { font-size: var(--text-md); font-weight:600; }
.be-color-details h4 { font-size: var(--text-base); font-weight:600; }
.be-color-details p { color:var(--text-muted); font-size: var(--text-sm); }
.be-color-values { display:grid; gap: var(--space-1); grid-template-columns:minmax(0, 1fr);}
.be-color-details button,.be-color-details select { font:inherit; color:inherit; background:var(--glass-reflection) var(--surface-input); border:1px solid var(--border-standard); border-radius:var(--radius-control); min-height: var(--control-md); cursor:pointer; padding: var(--space-2); transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--motion-micro) var(--ease-fluid); transform:none; }
.be-color-details button:hover:not(:disabled),.be-color-details select:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--border-strong); }
.be-color-details button:active { background:var(--surface-active); box-shadow:var(--shadow-pressed); transform:translateY(1px); }
.be-color-details :focus-visible,[data-be-ui] :focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-copy-value { display:flex; align-items:center; gap: var(--space-2); text-align:start; width:100%; }
.be-copy-value > span:first-child { font-size: var(--text-sm); color:var(--text-muted); width: var(--control-sm); }
.be-copy-value code { flex:1; font: 400 var(--text-sm)/1.5 var(--font-mono); overflow-wrap:anywhere; }
.be-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-2); border-top:1px solid var(--border-standard); padding-top: var(--space-3); }
.be-section-heading > span { color:var(--text-muted); font-size: var(--text-sm); }
.be-section-heading select { max-width:190px; font-size: var(--text-sm); }
.be-harmony-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); gap: var(--space-2); }
.be-color-details .be-swatch { display:flex; flex-direction:column; align-items:stretch; gap: var(--space-1); padding: var(--space-half); min-width:0; text-align:center; font: 400 var(--text-sm)/1.5 var(--font-mono); }
.be-swatch-paint { height:var(--control-md); border-radius:2px; border:1px solid var(--border-subtle); }
.be-shades-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap: var(--space-1); }
.be-shades-grid .be-swatch-paint { height:var(--space-6); }
.be-swatch[data-base] { border-color:var(--border-selected); box-shadow:inset 0 -2px var(--accent-indicator); }
.be-color-popover { position:fixed; width:min(344px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); display:flex; flex-direction:column; overflow:hidden; padding:0; color:var(--text-primary); box-sizing:border-box; font-family:var(--font-sans); }
.be-popover-title { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-3); font-size: var(--text-sm); color:var(--text-muted); }
.be-shades-title { display:flex; align-items:center; gap: var(--space-2); }
.be-color-details .be-shades-export { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-height:24px; padding:0; background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--text-muted); }
.be-shades-export:hover { background:var(--surface-hover); color:var(--text-secondary); }
.be-shades-export:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-shades-export .be-icon { width:var(--icon-sm); height:var(--icon-sm); }
@keyframes be-confirm { from { opacity:.35; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { [data-be-feedback] *, .be-copy-overlay, .be-color-details * { animation:none!important; transition:none!important; } }
[data-be-ui] [data-be-busy] { opacity:.7; cursor:progress; }
@media(prefers-reduced-motion:reduce) { [data-be-ui] *,[data-be-ui] *::before,[data-be-ui] *::after { animation:none!important; transition:none!important; } }

.be-color-details select { color-scheme:dark; }
.be-color-details option { background:var(--surface-popover); color:var(--text-primary); }
.be-color-details :focus-visible { box-shadow:var(--shadow-active); }
@media(prefers-reduced-transparency:reduce) { .be-glass,.be-floating { background-color:var(--surface-popover); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(prefers-reduced-motion:reduce) { .be-enter { animation:none; } .be-close,.be-color-details button { transform:none; transition:none; } }


/* AI Assistant Styles */
/* AI prompt suggestions for the referenced element: revealed one by one (delay set per chip) */
.ai-suggestions{display:flex;flex-direction:column;align-items:flex-start;gap: var(--space-2);margin-bottom: var(--space-3)}
.ai-suggestions[hidden]{display:none}
.ai-suggestions-label{font: 600 var(--text-sm)/1.4 var(--font-sans);letter-spacing: 0;text-transform: none;color:var(--text-muted);animation:ai-suggestion-in 360ms cubic-bezier(.2,.8,.2,1) both}
.ai-suggestion{display:inline-flex;align-items:center;gap: var(--space-2);max-width:100%;min-height: var(--control-md);margin:0;padding: var(--space-2) var(--space-3);border:1px solid var(--border-glass);border-radius: var(--radius-md);background:var(--surface-panel);color:var(--text-secondary);font: 500 var(--text-base)/1.4 var(--font-sans);text-align:start;cursor:pointer;animation:ai-suggestion-in 360ms cubic-bezier(.2,.8,.2,1) both;transition:border-color var(--transition-fast),color var(--transition-fast),background-color var(--transition-fast)}
.ai-suggestion .be-icon{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;color:var(--accent)}
.ai-suggestion:hover{border-color:var(--border-selected);background:var(--surface-hover);color:var(--text-primary)}
.ai-suggestion:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
@keyframes ai-suggestion-in{from{opacity:0;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ai-suggestions-label,.ai-suggestion{animation:none}}
.ai-suggestions.is-settled>*{animation:none}

/* Rating prompt (ui.js ratingPrompt): a small dismissible card, bottom right. */
.be-rating { pointer-events:auto; position:fixed; inset-inline-end: var(--space-6); bottom: var(--space-16); z-index:2147483647; width:min(300px, calc(100vw - 32px)); padding: var(--space-4) var(--space-5); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius:var(--radius-xl); background:radial-gradient(ellipse at 100% 0%, var(--accent-glow), transparent 60%), var(--glass-reflection), var(--surface-glass-floating); box-shadow:var(--shadow-floating); color:var(--text-primary); font-family:var(--font-sans); animation:be-rating-in var(--motion-panel, 240ms) var(--ease-fluid, ease) both; box-sizing:border-box; }
.be-rating * { box-sizing:border-box; }
.be-rating__title { margin: 0 var(--space-6) var(--space-1) 0; font-size:var(--text-lg); font-weight:600; }
.be-rating__body { margin: 0 0 var(--space-3); color:var(--text-secondary); font-size:var(--text-base); line-height:1.5; }
.be-rating__actions { display:flex; flex-wrap:wrap; gap: var(--space-2); }
.be-rating__actions button { flex:1 1 auto; }
.be-rating__stars { display:flex; gap: var(--space-1); margin: 0 0 var(--space-3); }
.be-rating__star { display:grid; place-items:center; width: var(--control-md); height: var(--control-md); padding:0; border:0; border-radius: var(--radius-control); background:transparent; color:var(--text-muted); cursor:pointer; transition: color var(--transition-fast), background-color var(--transition-fast); }
.be-rating__star .be-icon { width: var(--icon-lg); height: var(--icon-lg); }
.be-rating__star.is-on { color:var(--accent); }
.be-rating__star.is-on .be-icon { fill: currentColor; }
.be-rating__stars.is-static .be-rating__star { cursor:default; }
button.be-rating__star:hover { background:var(--surface-hover); }
.be-rating__note { min-height: calc(var(--control-lg) * 2); margin: 0 0 var(--space-3); }
.be-rating__error { margin: 0 0 var(--space-3); color:var(--text-warning); font-size: var(--text-sm); }
.be-rating__rate[aria-busy='true'] { cursor:progress; opacity:.7; }
.be-rating__rate, .be-rating__later { min-height:var(--control-md); padding: var(--space-2) var(--space-4); line-height:1.25; text-wrap:balance; border-radius:var(--radius-control); font:600 var(--text-base) var(--font-sans); cursor:pointer; }
.be-rating__rate { border:1px solid var(--accent-hover); background:var(--accent-reflection) var(--accent); color:var(--text-inverse); }
.be-rating__later { border:1px solid var(--border-standard); background:transparent; color:var(--text-secondary); }
.be-rating__rate:hover { background-color:var(--accent-hover); }
.be-rating__later:hover { color:var(--text-primary); background:var(--surface-hover); }
.be-rating__close { position:absolute; top:var(--space-2); inset-inline-end:var(--space-2); }
.be-rating button:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
@keyframes be-rating-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .be-rating { animation:none; } }

/* Branded select (shared/ui.js select()): replaces the OS-drawn <select> menu so every dropdown follows the theme. */
select[data-be-enhanced] { display:none!important; }
button.be-select__trigger { box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); width:100%; min-height:var(--control-md); padding: 0 var(--space-3) 0 var(--space-3); background:var(--glass-reflection) var(--surface-input); border:1px solid var(--border-standard); border-radius:var(--radius-control); box-shadow:none; color:var(--text-primary); font: 500 var(--text-sm)/1.2 var(--font-sans); text-align:start; cursor:pointer; transform:none; transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
button.be-select__trigger:hover { background:var(--surface-hover); border-color:var(--border-strong); }
button.be-select__trigger[aria-expanded='true'] { background:var(--active-reflection) var(--surface-selected-subtle); border-color:var(--border-selected); }
button.be-select__trigger:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
button.be-select__trigger:disabled { opacity:.5; cursor:not-allowed; }
.be-select__value { text-transform:none; letter-spacing:normal; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-select__trigger .be-icon { width:var(--icon-sm); height:var(--icon-sm); color:var(--text-muted); transition:transform var(--transition-fast); }
.be-select__trigger[aria-expanded='true'] .be-icon { transform:rotate(180deg); color:var(--text-accent); }
.be-section-heading button.be-select__trigger { max-width:190px; }
.be-select__popover { position:fixed; z-index:2147483647; pointer-events:auto; display:flex; flex-direction:column; gap: var(--space-1); max-width:calc(100vw - 16px); padding: var(--space-1); box-sizing:border-box; color:var(--text-primary); font: 500 var(--text-sm)/1.3 var(--font-sans); transform-origin:50% 0; animation:be-select-in var(--motion-state) var(--ease-fluid); }
.be-select__popover[data-side='top'] { transform-origin:50% 100%; --be-select-shift:4px; }
.be-select__popover-leaving { position:fixed; z-index:2147483647; pointer-events:none; display:flex; flex-direction:column; gap: var(--space-1); max-width:calc(100vw - 16px); padding: var(--space-1); box-sizing:border-box; color:var(--text-primary); font: 500 var(--text-sm)/1.3 var(--font-sans); transform-origin:50% 0; animation:be-select-out var(--motion-micro) ease-in forwards; }
.be-select__popover-leaving[data-side='top'] { transform-origin:50% 100%; }
@keyframes be-select-in { from { opacity:0; transform:translateY(var(--be-select-shift, -4px)) scale(.97); } to { opacity:1; transform:none; } }
@keyframes be-select-out { to { opacity:0; transform:scale(.98); } }
.be-select__popover * { box-sizing:border-box; }
.be-select__search { width:100%; min-height:var(--control-sm); padding: 0 var(--space-3); background:var(--surface-input); border:1px solid var(--border-standard); border-radius:var(--radius-sm); color:var(--text-primary); font: 500 var(--text-sm)/1.2 var(--font-sans); }
.be-select__search::placeholder { color:var(--text-muted); }
.be-select__search:focus-visible { outline:2px solid var(--border-focus); outline-offset:1px; }
.be-select__options { max-height:var(--be-select-max, 260px); overflow:auto; overscroll-behavior:contain; outline:0; }
.be-select__options:focus-visible { outline:0; } /* focus shows as the highlighted option (aria-activedescendant), not a ring round the list */
.be-select__option { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); min-height:32px; padding: var(--space-2) var(--space-2); border-radius:var(--radius-sm); color:var(--text-secondary); cursor:pointer; }
.be-select__option.is-active { background:var(--surface-active); color:var(--text-primary); }
.be-select__option[aria-selected='true'] { background:var(--surface-selected-subtle); color:var(--text-primary); }
.be-select__option[aria-selected='true'].is-active { background:var(--surface-selected); }
.be-select__option .be-icon { width:var(--icon-sm); height:var(--icon-sm); flex-shrink:0; color:var(--text-accent); }
.be-select__box { display:grid; place-items:center; flex:none; width:var(--icon-md); height:var(--icon-md); border:1px solid var(--border-strong); border-radius:4px; background:var(--surface-input); transition:background-color var(--transition-fast), border-color var(--transition-fast); }
.be-select__option[aria-selected='true'] .be-select__box { border-color:var(--accent); background:var(--accent); }
.be-select__option[aria-selected='true'] .be-select__box .be-icon { width:var(--icon-sm); height:var(--icon-sm); color:var(--neutral-950); }
.be-select__options[aria-multiselectable='true'] .be-select__option { justify-content:flex-start; }
.be-select__options[aria-multiselectable='true'] .be-select__option[aria-selected='true'] { background:transparent; }
.be-select__options[aria-multiselectable='true'] .be-select__option.is-active { background:var(--surface-active); }
button.be-select__trigger.is-placeholder .be-select__value { color:var(--text-muted); }
.be-select__label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-select__group { padding: var(--space-2) var(--space-2) var(--space-1); color:var(--text-muted); font: 600 var(--text-sm)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.be-select__empty { padding: var(--space-3) var(--space-2); color:var(--text-muted); }
[data-be-feedback] { white-space:nowrap; }
/* A target that confirms with an overlay keeps its own content as it was (a long stop list stays wrapped inside the overlay's box); only the overlay's words stay on one line. */
[data-be-feedback]:has(> .be-copy-overlay) { white-space:normal; }
.be-copy-overlay { white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { .be-select__popover, .be-select__popover-leaving, .be-select__trigger .be-icon { animation:none; transition:none; } }

/* Icon-only action button: copy, link, download. The label lives in aria-label and the tooltip; feedback swaps the icon. */
button.be-icon-button .be-icon { width:var(--icon-md); height:var(--icon-md); }
/* Hover card as a CSS rule: the element's live values in editor colours (tokens.css CODE SYNTAX). Also used by the landing demo. */
.be-code { box-sizing:border-box; width:284px; padding: var(--space-3) var(--space-4); border:1px solid var(--syntax-border); background:var(--syntax-surface)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 0 0 1px var(--edge-dark), var(--shadow-floating); color:var(--syntax-punctuation); font: 500 var(--text-sm)/1.65 var(--font-mono); letter-spacing:0; text-align:start; pointer-events:none; -webkit-font-smoothing:antialiased; }
.be-code * { box-sizing:border-box; margin:0; font:inherit; letter-spacing:inherit; }
.be-code__head { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom:1px solid var(--syntax-border); }
.be-code__sel { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--syntax-selector); font-weight:700; }
.be-code__sel b { color:var(--syntax-punctuation); font-weight:400; }
.be-code__pin { flex-shrink:0; padding: var(--space-half) var(--space-2); border:1px solid var(--syntax-border); border-radius:var(--radius-full); background:var(--surface-hover); color:var(--syntax-punctuation); font: 600 var(--text-sm)/1.4 var(--font-sans); }
.be-code__c { margin-top: var(--space-1); color:var(--syntax-comment); font-style:italic; }
.be-code__c:first-child { margin-top:0; }
.be-code__l { display:flex; align-items:center; gap:0; padding-inline-start:2ch; white-space:nowrap; }
.be-code__l > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.be-code .p { color:var(--syntax-property); }
.be-code .n { color:var(--syntax-number); }
.be-code .u { color:var(--syntax-keyword); }
.be-code__badges { display:flex; gap: var(--space-1); margin-inline-start:auto; flex-shrink:0; }
.be-code .k { color:var(--syntax-keyword); }
.be-code .s { color:var(--syntax-string); }
.be-code .sw { display:inline-block; width:var(--space-3); height:var(--space-3); margin-inline-end: var(--space-2); border:1px solid var(--border-strong); border-radius:2px; vertical-align:-1px; }
.be-code__end { color:var(--syntax-punctuation); }
.be-code__contrast { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top:1px solid var(--syntax-border); }
.be-code__contrast > span:first-child { white-space:nowrap; }
/* The card is 284px wide: when the ratio, "large" and both badges don't fit on one line, the badges wrap below, still at the end. */
.be-code__contrast .be-code__badge { flex-shrink:0; padding: 1px var(--space-2); border:1px solid; border-radius:var(--radius-full); font: 600 var(--text-sm)/1.4 var(--font-sans); }
.be-code__badge[data-pass='true'] { border-color:color-mix(in srgb, var(--syntax-number) 55%, transparent); background:color-mix(in srgb, var(--syntax-number) 14%, transparent); color:var(--syntax-number); }
.be-code__badge[data-pass='false'] { border-color:color-mix(in srgb, var(--syntax-keyword) 55%, transparent); background:color-mix(in srgb, var(--syntax-keyword) 14%, transparent); color:var(--syntax-keyword); }
.be-code__note { padding-inline-start:2ch; color:var(--syntax-comment); font-family:var(--font-sans); white-space:normal; }
/* Accessibility checker inside colour details (ui.js accessibilityChecker). */
.be-a11y { display:grid; gap: var(--space-2); grid-template-columns:minmax(0, 1fr);}
.be-a11y-against { display:flex; align-items:center; gap: var(--space-1); }
.be-color-details .be-a11y-against button { min-height: var(--control-sm); padding: 0 var(--space-2); font-size: var(--text-sm); font-weight:600; color:var(--text-secondary); }
.be-a11y-page { display:inline-flex; align-items:center; gap: var(--space-2); }
.be-a11y-page__dot { width:var(--space-3); height:var(--space-3); border-radius:50%; box-shadow:inset 0 0 0 1px var(--border-strong,rgba(255,255,255,.35)); flex:none; }
.be-color-details .be-a11y-against button[aria-pressed='true'] { background:var(--active-reflection) var(--surface-selected); border-color:var(--border-selected); color:var(--text-primary); box-shadow:var(--shadow-active); }
.be-a11y-custom { display:grid; place-items:center; width: var(--control-sm); height: var(--control-sm); border:1px solid var(--border-standard); border-radius:var(--radius-control); background:var(--surface-input); cursor:pointer; transition:border-color var(--transition-fast); }
.be-a11y-custom .be-color-trigger { min-width:0; min-height:0; height:100%; } /* the swatch fills its 28px box; the 36px minimum of a stand-alone color field pushed the row out */
.be-a11y-custom:hover { border-color:var(--border-strong); }
.be-a11y-custom:focus-within { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-a11y-custom input { width:var(--icon-lg); height:var(--icon-lg); padding:0; border:0; border-radius:4px; background:none; cursor:pointer; transition:transform var(--motion-micro) var(--ease-fluid); }
.be-a11y-custom input:active { transform:scale(.94); }
.be-a11y-custom input::-webkit-color-swatch-wrapper { padding:0; }
.be-a11y-custom input::-webkit-color-swatch { border:1px solid var(--border-strong); border-radius:4px; }
.be-a11y-body { display:grid; grid-template-columns:96px minmax(0,1fr); gap: var(--space-2); align-items:stretch; }
.be-a11y-preview { display:grid; align-content:center; justify-items:center; gap: var(--space-2); padding: var(--space-2); border:1px solid var(--border-standard); border-radius:var(--radius-md); background:var(--a11y-bg); grid-template-columns:minmax(0, 1fr);}
.be-a11y-text { color:var(--a11y-fg); font: 700 var(--text-xl)/1 var(--font-sans); }
.be-a11y-fill { padding: var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--a11y-fg); color:var(--a11y-bg); font: 600 var(--text-sm)/1.3 var(--font-sans); }
.be-a11y-result { display:grid; gap: var(--space-2); min-width:0; grid-template-columns:minmax(0, 1fr);}
.be-color-details .be-a11y-ratio { color:var(--text-muted); font-size: var(--text-sm); }
.be-a11y-ratio strong { color:var(--text-primary); font: 600 var(--text-md)/1.2 var(--font-mono); }
.be-a11y-checks { display:grid; gap: var(--space-half); margin:0; padding:0; list-style:none; font-size: var(--text-sm); grid-template-columns:minmax(0, 1fr);}
.be-a11y-checks li { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); color:var(--text-secondary); }
.be-a11y-badge { flex-shrink:0; padding: 1px var(--space-2); border:1px solid; border-radius:var(--radius-full); font: 600 var(--text-sm)/1.4 var(--font-sans); }
.be-a11y-checks li[data-pass='true'] .be-a11y-badge { border-color:var(--text-success); background:var(--surface-success); color:var(--text-success); }
.be-a11y-checks li[data-pass='false'] .be-a11y-badge { border-color:var(--text-destructive); background:var(--surface-error); color:var(--text-destructive); }
.be-color-details .be-a11y-fix { color:var(--text-secondary); font-size: var(--text-sm); line-height:1.5; }
.be-color-details .be-a11y-fix[hidden] { display:none; }
.be-color-details .be-a11y-shade { display:inline-flex; align-items:center; gap: var(--space-2); min-height: var(--control-sm); margin-inline-start: var(--space-1); padding: 0 var(--space-2); font: 500 var(--text-sm)/1 var(--font-mono); vertical-align:middle; }
.be-a11y-shade__swatch { width:var(--space-3); height:var(--space-3); border:1px solid var(--border-strong); border-radius:2px; }
.be-a11y-fix { display:grid; gap: var(--space-2); grid-template-columns:minmax(0, 1fr);}
.be-a11y-fix__row { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-2); }
.be-color-details .be-a11y-fix .be-a11y-shade { margin-inline-start:0; min-height: var(--control-sm); }
.be-color-details .be-a11y-apply { display:inline-flex; align-items:center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3); border-color:var(--border-selected); background:var(--active-reflection) var(--surface-selected-subtle); color:var(--text-primary); font: 600 var(--text-sm)/1 var(--font-sans); }
.be-color-details .be-a11y-apply .be-icon { width:var(--icon-md); height:var(--icon-md); }
.be-color-details .be-a11y-apply:hover { background:var(--active-reflection) var(--surface-selected); border-color:var(--border-selected); }
/* Multi-select with chips (ui.js select({ chips: true })). The field is the input; the trigger inside it is just the opener. */
.be-select__field { box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-2); width:100%; min-height:var(--control-md); padding: var(--space-1) var(--space-2); background:var(--glass-reflection) var(--surface-input); border:1px solid var(--border-standard); border-radius:var(--radius-control); cursor:pointer; transition:background-color var(--transition-fast), border-color var(--transition-fast); }
.be-select__field:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.be-select__field:has([aria-expanded='true']) { background:var(--active-reflection) var(--surface-selected-subtle); border-color:var(--border-selected); }
.be-select__field:has(.be-select__trigger:focus-visible) { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-select__chips { display:contents; margin:0; padding:0; list-style:none; }
.be-select__chips[hidden] { display:none; }
.be-select__field button.be-select__trigger { flex:1 1 40px; width:auto; min-height: var(--control-sm); padding: 0 var(--space-1) 0 var(--space-2); background:transparent; border:0; box-shadow:none; }
.be-select__field button.be-select__trigger:hover, .be-select__field button.be-select__trigger[aria-expanded='true'] { background:transparent; }
.be-select__field button.be-select__trigger:focus-visible { outline:0; }
.be-chip { order:-1; display:inline-flex; align-items:center; gap: var(--space-half); max-width:100%; min-height: var(--control-sm); padding: 0 var(--space-half) 0 var(--space-3); border:1px solid var(--border-selected); border-radius:var(--radius-full); background:var(--active-reflection) var(--surface-selected-subtle); color:var(--text-primary); font: 500 var(--text-sm)/1.2 var(--font-sans); animation:be-chip-in var(--motion-state) var(--ease-fluid); }
.be-chip > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.be-chip__remove { all:unset; box-sizing:border-box; display:grid; place-items:center; width:var(--control-sm); height:var(--control-sm); border-radius:var(--radius-full); color:var(--text-secondary); cursor:pointer; transition:background-color var(--transition-fast), color var(--transition-fast); }
button.be-chip__remove:hover { background:var(--surface-hover); color:var(--text-primary); }
button.be-chip__remove:focus-visible { outline:2px solid var(--border-focus); outline-offset:0; }
button.be-chip__remove .be-icon { width:var(--icon-sm); height:var(--icon-sm); }
@keyframes be-chip-in { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .be-chip { animation:none; } .be-select__field, button.be-chip__remove { transition:none; } }
/* Text fields: the select's box (button.be-select__trigger, .be-select__field), so a form's inputs and dropdowns are one control. */
.be-input { box-sizing:border-box; width:100%; min-width:0; min-height:var(--control-md); margin:0; padding:0 var(--space-3); background:var(--glass-reflection) var(--surface-input); border:1px solid var(--border-control); border-radius:var(--radius-control); box-shadow:none; color:var(--text-primary); font:500 var(--text-sm)/1.2 var(--font-sans); letter-spacing:normal; text-transform:none; appearance:none; outline:none; transition:background-color var(--transition-fast), border-color var(--transition-fast); }
.be-input:hover { background-color:var(--surface-hover); border-color:var(--border-control-hover); }
.be-input::placeholder { color:var(--text-muted); opacity:1; }
.be-input:focus-visible { border-color:var(--border-selected); outline:2px solid var(--border-focus); outline-offset:2px; }
.be-input:read-only { color:var(--text-secondary); }
.be-input[aria-invalid='true'] { border-color:var(--text-destructive); }
.be-input[type='number'] { font-variant-numeric:tabular-nums; }
textarea.be-input { display:block; min-height:calc(var(--control-md) * 2); padding:var(--space-2) var(--space-3); line-height:1.5; resize:vertical; }
/* Large controls: one size for every field, dropdown and button of a form that leads its screen (AI mode's waitlist). */
.be-controls-lg :is(.be-input, button.be-select__trigger, .be-select__field, .mini-action) { min-height:var(--control-lg); font-size:var(--text-md); }
.be-controls-lg :is(.be-input, button.be-select__trigger) { padding-inline:var(--space-4); }
.be-controls-lg .be-select__field { padding-inline:var(--space-4) var(--space-2); }
.be-controls-lg .be-select__field button.be-select__trigger { min-height:var(--control-sm); padding-inline:0 var(--space-1); }

/* ─── Notice: confirmation under a card, with an optional next step ─────────── */
.be-notice { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border:1px solid var(--border-standard); border-radius:var(--radius-md); background:var(--surface-elevated); color:var(--text-secondary); font: 500 var(--text-sm)/1.45 var(--font-sans); box-sizing:border-box; animation:be-confirm var(--motion-state) var(--ease-fluid); transition:opacity 180ms var(--ease-fluid); }
.be-notice > .be-icon { flex:none; width:var(--icon-md); height:var(--icon-md); color:var(--text-success); }
.be-notice[data-tone='error'] > .be-icon { color:var(--text-destructive); }
.be-notice[data-tone='info'] > .be-icon { color:var(--text-muted); }
.be-notice p { flex:1 1 180px; min-width:0; margin:0; color:inherit; font:inherit; }
.be-notice > .be-icon + p { flex-basis:calc(100% - 32px); }
.be-notice__action { margin-inline-start:auto; }
.be-notice__action ~ .be-notice__action { margin-inline-start:0; }
.be-notice.is-leaving { opacity:0; }
button.be-notice__action { flex:none; display:inline-flex; align-items:center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3); border:1px solid var(--button-tonal-border); border-radius:var(--radius-control); background:var(--button-tonal-bg); color:var(--button-tonal-text); font: 600 var(--text-sm)/1 var(--font-sans); white-space:nowrap; cursor:pointer; transition:background-color var(--transition-fast), border-color var(--transition-fast); }
button.be-notice__action:hover { background:var(--button-tonal-bg-hover); border-color:var(--accent); }
button.be-notice__action:active { background:var(--button-tonal-bg-pressed); }
button.be-notice__action:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
button.be-notice__action .be-icon { width:var(--icon-sm); height:var(--icon-sm); }

/* ─── Fix tour: walks through live fixes one by one on the page ───────────────── */
.be-tour-ring { position:fixed; box-sizing:border-box; border:2px solid var(--accent); border-radius: var(--radius-md); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 100vmax rgb(0 0 0 / .32); pointer-events:none; transition:top 240ms var(--ease-fluid), left 240ms var(--ease-fluid), width 240ms var(--ease-fluid), height 240ms var(--ease-fluid); }
.be-tour { position:fixed; box-sizing:border-box; width:min(320px, calc(100vw - 16px)); display:grid; gap: var(--space-2); padding: var(--space-4); color:var(--text-primary); font: 400 var(--text-base)/1.5 var(--font-sans); pointer-events:auto; transition:top 240ms var(--ease-fluid), left 240ms var(--ease-fluid); }
.be-tour * { box-sizing:border-box; }
.be-tour__head { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); }
.be-tour__count { color:var(--text-accent); font: 600 var(--text-sm)/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; }
.be-tour__title { margin:0; color:var(--text-primary); font: 600 var(--text-md)/1.35 var(--font-display, var(--font-sans)); }
.be-tour__what { margin:0; color:var(--text-secondary); font-size: var(--text-sm); }
.be-tour__changes { display:grid; gap: var(--space-1); margin:0; padding: var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--surface-base); list-style:none; color:var(--text-secondary); font:500 var(--text-sm)/1.5 var(--font-mono); grid-template-columns:minmax(0, 1fr);}
.be-tour__changes b { color:var(--text-primary); font-weight:600; }
.be-tour__sw { display:inline-block; width:var(--space-3); height:var(--space-3); margin-inline-end: var(--space-1); border:1px solid var(--border-strong); border-radius:2px; vertical-align:-1px; }
.be-tour__foot { display:flex; justify-content:flex-end; gap: var(--space-2); padding-top: var(--space-half); }
.be-tour__foot button { display:inline-flex; align-items:center; justify-content:center; min-width:72px; min-height:var(--control-md); padding: 0 var(--space-3); border:1px solid var(--border-standard); border-radius:var(--radius-control); background:var(--surface-elevated); color:var(--text-primary); font: 600 var(--text-sm)/1 var(--font-sans); cursor:pointer; transition:background-color var(--transition-fast), border-color var(--transition-fast); }
.be-tour__foot button:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.be-tour__foot button.be-tour__next { background:var(--accent-reflection) var(--accent); border-color:var(--accent-hover); color:var(--text-inverse); }
.be-tour__foot button.be-tour__next:hover { background-color:var(--accent-hover); }
.be-tour__foot button:disabled { opacity:.45; cursor:default; }
.be-tour__foot button:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .be-tour-ring, .be-tour, .be-notice { transition:none; animation:none; } }
/* Palette controls share the same component in the panel and inspector. */
input[data-be-palette][hidden] { display:none!important; }
.be-color-trigger { display:block; width:100%; min-width:var(--control-md); min-height:var(--control-md); padding: var(--space-1); background:var(--swatch); border:1px solid var(--border-strong); border-radius:var(--radius-control); cursor:pointer; box-shadow:inset 0 0 0 var(--space-1) var(--surface-elevated); }
.be-color-trigger:focus-visible, .be-palette button:focus-visible, .be-palette input:focus-visible { outline:2px solid var(--border-focus);outline-offset:2px; }
.be-palette { position:fixed;z-index:2147483647;box-sizing:border-box;width:280px;max-width:calc(100vw - 16px);padding:var(--space-4);color:var(--text-primary);font:var(--text-sm)/1.5 var(--font-sans); }
.be-palette-head { display:flex;align-items:center;justify-content:space-between;gap:var(--space-2); }
.be-palette button { color:var(--text-primary);cursor:pointer; }
.be-palette p { font:var(--text-xs)/1.5 var(--font-sans);color:var(--text-secondary);margin:var(--space-2) 0 var(--space-3); }
.be-palette-swatches { display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2);margin-bottom:var(--space-4); }
.be-palette-swatches button { min-height: var(--control-sm);background:var(--swatch);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0; }
.be-palette-swatches button[aria-pressed=true] { outline:2px solid var(--border-focus);outline-offset:2px; }
.be-palette form { display:flex;gap:var(--space-2);align-items:end; }
.be-palette label { display:block;flex:1;min-width:0;color:var(--text-secondary);font:var(--text-xs)/1.5 var(--font-sans); }
.be-palette input[type=range] { box-sizing:border-box;width:100%;min-height: var(--control-md);display:block; }
.be-palette .be-palette-hex { font-family:var(--font-mono); }
.be-palette .be-palette-error { color:var(--text-destructive);margin-bottom:0; }
.be-code-class { color:var(--text-accent); }.be-code-id { color:var(--text-success); }.be-code-tag { color:var(--text-primary); }.be-code-operator { color:var(--text-muted); }
.be-selector-copy .be-selector-icon { position:absolute;inset-inline-end: var(--space-2);top: var(--space-2);opacity:0;transition:opacity var(--transition-fast); }
.be-selector-copy:hover .be-selector-icon, .be-selector-copy:focus-visible .be-selector-icon, .be-selector-copy[data-be-feedback] .be-selector-icon { opacity:1; }
@media(hover:none) { .be-selector-copy .be-selector-icon { opacity:1; } }
/* Fix review shares the same controls and focus states as the rest of the extension. */
.be-tour { max-height:calc(100dvh - 16px); overflow-y:auto; overscroll-behavior:contain; }
.be-tour__changes { overflow-wrap:anywhere; }
.be-tour__state { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); }
.be-tour__status { color:var(--text-secondary); font: 500 var(--text-sm)/1.5 var(--font-sans); }
.be-tour__toggle { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-3); border:1px solid var(--border-standard); border-radius:var(--radius-control); background:var(--surface-elevated); color:var(--text-primary); font: 600 var(--text-sm)/1 var(--font-sans); cursor:pointer; }
.be-tour__toggle:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.be-tour__toggle:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-tour__toggle:disabled { opacity:.45; cursor:default; }
.be-tour__hint { margin:0; padding-top: var(--space-1); color:var(--text-secondary); font: 400 var(--text-sm)/1.6 var(--font-sans); }
.be-tour__hint kbd { display:inline-block; min-width:var(--space-5); padding: 0 var(--space-1); border:1px solid var(--border-standard); border-radius:4px; background:var(--surface-base); color:var(--text-primary); text-align:center; font: 500 var(--text-sm)/1.5 var(--font-mono); }

/* Two readable selector lines, then one faded continuation line; copy retains the full selector. */
#__website_auditor_inspector_menu__ .be-selector-copy > code { display:block; overflow:hidden; padding:0; background:transparent; font:inherit; line-height:1.6; white-space:nowrap; text-overflow:ellipsis; }
#__website_auditor_inspector_menu__ .be-selector-copy .be-selector-icon { inset-inline-end:var(--space-2); top:50%; transform:translateY(-50%); padding:var(--space-1); border-radius:var(--radius-sm); background:var(--surface-input); }


.be-palette { margin:0; inset:auto; max-height:calc(100dvh - 16px); overflow:auto; border:1px solid var(--border-strong); border-radius:var(--radius-floating); }
.be-palette-preview { height:48px; margin:var(--space-3) 0; border:1px solid var(--border-strong); border-radius:var(--radius-control); }
.be-palette-controls { display:grid; gap:var(--space-2); margin-bottom:var(--space-3); grid-template-columns:minmax(0, 1fr);}
.be-palette input[type=range] { padding:0; accent-color:var(--accent); cursor:pointer; }
.be-palette-swatches { margin-bottom:0; }

/* The picker plane is colour data, not chrome: pure white to pure black over the hue. */
.be-palette-plane { position:relative; height:120px; margin-top:var(--space-3); border-radius:var(--radius-control); touch-action:none; cursor:crosshair; background:linear-gradient(to bottom,#fff,transparent 50%,#000),linear-gradient(to right,hsl(0 0% 50%),hsl(var(--hue) 100% 50%)); }
.be-palette-plane i { position:absolute; width:var(--space-3); height:var(--space-3); border:2px solid var(--text-primary); outline:1px solid var(--surface-base); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.be-palette-preview { height:20px; }
.be-palette-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }

.be-font-weights { display:flex; flex-wrap:wrap; gap:var(--space-1); width:100%; min-width:0; margin-block:var(--space-1) var(--space-2); }
:is(#__website_auditor_inspector_menu__, .demo-inspector, .font-preview-controls) .be-font-weights button { flex:0 0 auto; width: var(--control-sm); height: var(--control-sm); min-width: var(--control-sm); min-height: var(--control-sm); padding:0; text-align:center; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-standard); border-radius:var(--radius-control); background:var(--surface-base); color:var(--text-secondary); font:var(--text-xs)/1.4 var(--font-mono); cursor:pointer; transition:background-color var(--transition-fast),border-color var(--transition-fast); }
:is(#__website_auditor_inspector_menu__, .demo-inspector, .font-preview-controls) .be-font-weights button:hover { background:var(--surface-hover); }
:is(#__website_auditor_inspector_menu__, .demo-inspector, .font-preview-controls) .be-font-weights button[aria-checked="true"] { color:var(--text-primary); border-color:var(--border-selected); background:var(--surface-selected); box-shadow:inset 0 0 0 1px var(--border-selected); }
:is(#__website_auditor_inspector_menu__, .demo-inspector, .font-preview-controls) .be-font-weights button:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }

@media(prefers-reduced-motion:reduce){.be-font-weights button{transition:none!important;}}

.be-palette-switch{display:flex;gap:var(--space-1);margin:var(--space-3) 0;padding:var(--space-1);background:var(--surface-input);border-radius:var(--radius-control)}
.be-palette-switch button{flex:1;min-height:var(--control-md);padding:var(--space-1) var(--space-2);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font:500 var(--text-xs)/1.4 var(--font-sans);cursor:pointer}
.be-palette-switch button[aria-pressed=true]{background:var(--surface-selected);border-color:var(--border-selected);color:var(--text-primary)}
.be-website-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);max-height:220px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.be-website-palette>button{display:flex;align-items:center;gap:var(--space-2);min-height: var(--control-md);min-width:0;padding:var(--space-1);background:var(--surface-input);border:1px solid var(--border-standard);border-radius:var(--radius-control);color:var(--text-secondary);cursor:pointer}
.be-website-palette>button>i{width:var(--control-sm);height:var(--control-sm);flex:none;background:var(--swatch);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.be-website-palette code{font:var(--text-xs)/1.4 var(--font-mono)}.be-website-palette>button[aria-pressed=true]{border-color:var(--border-selected)}
.be-palette-switch button:focus-visible,.be-website-palette button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.be-website-palette .be-swatch-paint{width:24px;height:24px;min-height:24px;flex:none}

/* Palette rows explicitly override the stacked harmony/shade pattern. Both paint and value have stable sizing. */
.be-color-details .be-website-palette > .be-swatch { flex-direction:row; align-items:center; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); min-height:var(--control-md); text-align:start; border-radius:var(--radius-control); }
.be-website-palette > button > :last-child { min-width:0; overflow-wrap:anywhere; line-height:1.4; }
.be-color-details .be-swatch-paint { display:block; flex-shrink:0; box-sizing:border-box; border-radius:var(--radius-sm); }
.be-color-details .be-swatch > span:last-child { min-width:0; line-height:1.5; }
.be-color-details { grid-template-columns:minmax(0,1fr); }
.be-color-details > *, .be-color-details .be-copy-value code { min-width:0; }
.be-color-details .be-section-heading { flex-wrap:wrap; }
.be-action-status { position:fixed; inset:calc(var(--space-4) + env(safe-area-inset-top, 0px)) auto auto 50%; transform:translate(-50%,0); z-index:2147483647; display:flex; align-items:center; gap:var(--space-2); width:max-content; max-width:calc(100vw - var(--space-4) * 2); box-sizing:border-box; padding:var(--space-3) var(--space-4); border:1px solid var(--border-standard); border-radius:var(--radius-control); background:var(--surface-popover); color:var(--text-primary); box-shadow:var(--shadow-md); font:500 var(--text-sm)/1.5 var(--font-sans); pointer-events:none; overflow-wrap:anywhere; animation:be-status-in var(--motion-panel) var(--ease-fluid) both; }
.be-action-status > span { min-width:0; }
.be-action-status[data-tone=success] { background:var(--surface-success); border-color:var(--text-success); }
.be-action-status[data-tone=error] { background:var(--surface-error); border-color:var(--text-destructive); }
.be-action-status > .be-icon { color:var(--text-success); }
.be-action-status[data-tone=error] > .be-icon { color:var(--text-destructive); }
.be-action-status[data-state=leaving] { animation:be-status-out var(--motion-state) var(--ease-fluid) both; }
@keyframes be-status-in { from { opacity:0; transform:translate(-50%,calc(-100% - var(--space-4) - env(safe-area-inset-top, 0px))); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes be-status-out { from { opacity:1; transform:translate(-50%,0); } to { opacity:0; transform:translate(-50%,calc(-100% - var(--space-4) - env(safe-area-inset-top, 0px))); } }
@media (prefers-reduced-motion:reduce) { .be-action-status { animation:none; } }
.be-action-status[hidden] { display:none; }
.be-ai-task { position:fixed; inset:auto auto var(--space-4) var(--space-4); display:flex; align-items:center; gap:var(--space-1); max-width:calc(100vw - var(--space-4) * 2); box-sizing:border-box; padding:var(--space-2); border:1px solid var(--border-selected); border-radius:var(--radius-card); background:var(--surface-popover); box-shadow:var(--shadow-md); color:var(--text-primary); font:var(--weight-medium) var(--text-sm)/1.5 var(--font-sans); pointer-events:auto; }
.be-ai-task[hidden] { display:none; }
.be-ai-task .be-ai-task__drag { flex:none; width:var(--control-lg); height:var(--control-lg); min-height:var(--control-lg); margin:0; padding:0; cursor:grab; touch-action:none; }
.be-ai-task .be-ai-task__drag.is-dragging { cursor:grabbing; }
.be-ai-task__open { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-lg); min-width:0; padding:var(--space-2); border:1px solid transparent; border-radius:var(--radius-control); color:inherit; background:var(--button-ghost-bg); font:inherit; text-align:start; cursor:pointer; }
.be-ai-task__open:hover,.be-ai-task__drag:hover { background:var(--button-ghost-bg-hover); }
.be-ai-task__open:active { background:var(--button-ghost-bg-active); box-shadow:var(--shadow-pressed); }
.be-ai-task__open:focus-visible,.be-ai-task__drag:focus-visible { outline:2px solid var(--border-focus); outline-offset:var(--space-half); }
.be-ai-task__icon { display:flex; flex:none; color:var(--text-accent); }
.be-ai-task__copy { display:grid; min-width:0; overflow-wrap:anywhere; }
.be-ai-task__copy small { color:var(--text-secondary); font-size:var(--text-xs); }
.be-ai-task[data-state=running] .be-ai-task__icon .be-icon { animation:be-task-spin calc(var(--motion-panel) * 4) linear infinite; }
.be-ai-task[data-state=ready] { border-color:var(--text-success); }
.be-ai-task[data-state=ready] .be-ai-task__icon { color:var(--text-success); }
.be-ai-task[data-state=error] { border-color:var(--text-destructive); }
.be-ai-task[data-state=error] .be-ai-task__icon { color:var(--text-destructive); }
@keyframes be-task-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .be-ai-task .be-icon { animation:none!important; } }
.be-notice--floating { pointer-events:none; position:fixed; inset:auto var(--space-4) var(--space-4) auto; z-index:2147483647; width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; margin:0; }

.be-notice--floating .be-notice__action { pointer-events:auto; }

/* Select and field boundaries meet WCAG 1.4.11 (3:1 non-text contrast); buttons and swatch cells are named by their text or value, so their edge stays soft. Rest and hover; open, focus, error and checked states keep their own. */
button.be-select__trigger:not(:hover,[aria-expanded="true"]), .be-select__field:not(:hover,:focus-within), .be-select__search:not(:hover,:focus),
.be-color-details select:not(:hover), .be-a11y-custom:not(:hover), .be-select__box { border-color:var(--border-control); }
button.be-select__trigger:hover:not([aria-expanded="true"]), .be-select__field:hover:not(:focus-within), .be-select__search:hover:not(:focus),
.be-color-details select:hover, .be-a11y-custom:hover { border-color:var(--border-control-hover); }

/* Code, URLs, hex values and keys read left to right even inside a right-to-left interface. */
.be-ltr { direction:ltr; unicode-bidi:isolate; text-align:start; }

/* Arabic letters join: tracking and forced capitals (used on eyebrows and headings) would break the words apart. */
/* Scoped to our own UI: this sheet is also added to the inspected page's document, where an unscoped :lang(ar) rule would restyle the site itself.
   Inside our shadow roots ui.js adds the same rule unscoped. */
:is([id^="__website_auditor"], [data-be-ui], [class^="be-"], [class*=" be-"]):lang(ar), :is([id^="__website_auditor"], [data-be-ui], [class^="be-"], [class*=" be-"]):lang(ar) * { letter-spacing:normal !important; text-transform:none !important; }

/* Values read from the page (hex, CSS, selectors, keys) keep their left-to-right order inside a right-to-left interface. */
code, kbd, samp, pre, .be-code { direction:ltr; unicode-bidi:isolate; text-align:start; }

/* Localize panel (shared/localize.js): the same structure as the other in-page panels: title row, fields, a note, one primary action, results */
.be-lz { display:flex; flex-direction:column; width:min(344px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:hidden; padding:0; box-sizing:border-box; color:var(--text-primary); font: var(--text-sm)/1.5 var(--font-sans); }
.be-lz p, .be-lz dl, .be-lz dd { margin:0; }
.be-anchor-hint { position:fixed; box-sizing:border-box; max-width:min(360px, calc(100vw - 16px)); padding:var(--space-1) var(--space-2); border-radius:var(--radius-control); background:var(--surface-popover); box-shadow:var(--shadow-floating); color:var(--text-secondary); font:var(--text-xs)/1.4 var(--font-sans); pointer-events:none; animation:be-hint-in var(--motion-micro) var(--ease-fluid); }
.be-anchor-hint[data-tone='error'] { color:var(--text-warning); }
@keyframes be-hint-in { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .be-anchor-hint { animation:none; } }
.be-lz[tabindex='-1']:focus { outline:none; } /* the dialog takes focus on open so keyboard users start inside it; its controls show their own rings */
.be-lz__langs { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap: var(--space-2); }
.be-lz__field { display:grid; gap: var(--space-half); min-width:0; padding: var(--space-2) var(--space-3); border:1px solid var(--border-standard); border-radius: var(--radius-control); background:var(--surface-input); }
.be-lz__label { color:var(--text-accent); font:700 var(--text-xs)/1.2 var(--font-mono); }
.be-lz__value { min-height: var(--space-6); display:flex; align-items:center; color:var(--text-primary); font-size: var(--text-md); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.be-lz__arrow { display:flex; color:var(--text-muted); }
.be-lz__arrow .be-icon { width:var(--icon-md); height:var(--icon-md); }
.be-lz__seg { display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap: var(--space-1); min-height: var(--space-6); align-items:center; }
.be-lz__seg.is-single { display:block; }
.be-lz__opt, .be-lz__btn { min-height: var(--control-md); padding: 0 var(--space-3); border:1px solid var(--border-standard); border-radius: var(--radius-control); background:var(--surface-input); color:var(--text-primary); font: 600 var(--text-sm)/1.2 var(--font-sans); cursor:pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.be-lz__opt:hover, .be-lz__btn:hover { border-color:var(--border-strong); }
.be-lz__opt[aria-pressed='true'] { border-color:var(--border-selected); background:var(--active-reflection) var(--surface-selected-subtle); }
.be-lz__opt:focus-visible, .be-lz__btn:focus-visible, .be-lz__checks summary:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-lz__note { display:flex; gap: var(--space-2); align-items:flex-start; padding: var(--space-3); border-radius: var(--radius-control); background:var(--surface-elevated); color:var(--text-secondary); }
.be-lz__note[hidden] { display:none; }
.be-lz__note-icon { flex:none; display:inline-flex; margin-block-start: var(--space-half); color:var(--text-muted); }
.be-lz__note-icon .be-icon { width:var(--icon-md); height:var(--icon-md); }
.be-lz__note-text { display:grid; gap: var(--space-1); min-width:0; }
.be-lz__privacy { color:var(--text-muted); font-size: var(--text-xs); }
.be-lz__progress { display:grid; gap: var(--space-1); color:var(--text-secondary); font-size: var(--text-xs); }
.be-lz__progress progress { appearance:none; width:100%; height: var(--space-1); border:0; border-radius: var(--radius-full); background:var(--surface-input); overflow:hidden; }
.be-lz__progress progress::-webkit-progress-bar { background:var(--surface-input); }
.be-lz__progress progress::-webkit-progress-value { background:var(--accent-indicator); border-radius: var(--radius-full); transition: width var(--transition-fast); }
.be-lz__status { color:var(--text-secondary); }
.be-lz__status[data-tone='ok'] { color:var(--text-primary); font-weight:600; }
.be-lz__status[data-tone='warn'] { color:var(--text-warning); }
.be-lz__summary { display:grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background:var(--surface-elevated); }
.be-lz__summary div { display:flex; justify-content:space-between; gap: var(--space-3); }
.be-lz__summary dt { color:var(--text-secondary); }
.be-lz__summary dd { color:var(--text-primary); font-weight:600; font-variant-numeric:tabular-nums; }
.be-lz__extra, .be-lz__actions { display:grid; gap: var(--space-2); }
.be-lz__prompt { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2); align-items:stretch; }
.be-lz__prompt[hidden] { display:none; }
.be-lz__prompt-target { display:block; min-width:0; }
.be-lz__btn.be-lz__prompt-copy { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); min-width:0; padding: 0 var(--space-2); border-color:var(--button-tonal-border); background:var(--button-tonal-bg); color:var(--button-tonal-text); white-space:nowrap; overflow:hidden; }
.be-lz__btn.be-lz__prompt-copy:hover { background:var(--button-tonal-bg-hover); border-color:var(--accent); color:var(--button-tonal-text); }
.be-lz__prompt-copy span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.be-lz__prompt-copy .be-icon { width:var(--icon-sm); height:var(--icon-sm); color:currentColor; }
.be-lz__extra:empty { display:none; }
.be-lz__btn { width:100%; }
.be-lz__btn.is-primary { min-height: var(--control-lg); border-color:var(--accent-hover); background:var(--accent-reflection) var(--accent); color:var(--text-inverse); font-size: var(--text-md); }
.be-lz__btn.is-primary:hover:not(:disabled) { background-color:var(--accent-hover); }
/* One primary per panel; everything else is quiet: an outline, no fill */
.be-lz__btn:not(.is-primary) { background:transparent; color:var(--text-secondary); }
.be-lz__btn:not(.is-primary):hover { background:var(--surface-hover); color:var(--text-primary); }
.be-lz__hint { color:var(--text-muted); font-size: var(--text-xs); }
.be-lz__btn:disabled, .be-lz__opt:disabled { cursor:default; opacity:.6; }
.be-lz__btn[aria-busy='true'] { cursor:progress; }
/* Working: the primary button stays where it is as a disabled button (the system's disabled colours) and fills with the progress in a lighter tone of the same grey (from the reading start, so it also runs right to left). */
.be-lz__btn.is-primary[aria-busy='true'] { position:relative; overflow:hidden; opacity:1; isolation:isolate; } /* disabled colours come from the system's disabled-button rule; opacity stays 1 so the label and the fill read */
.be-lz__btn.is-primary[aria-busy='true']::before { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:var(--lz-progress, 0%); background:color-mix(in srgb, var(--button-disabled-text) 24%, transparent); z-index:-1; transition:width var(--transition-fast); }
.be-lz [hidden] { display:none !important; }
.be-lz__checks { border-top:1px solid var(--border-subtle); padding-top: var(--space-2); }
.be-lz__checks summary { list-style:none; justify-content:space-between; gap: var(--space-2); cursor:pointer; color:var(--text-secondary); font-weight:600; font-size:var(--text-md); min-height: var(--control-sm); display:flex; align-items:center; }
.be-lz__checks summary::-webkit-details-marker { display:none; }
.be-lz__checks summary .be-icon { width:var(--icon-md); height:var(--icon-md); color:var(--text-muted); transition: transform var(--transition-fast); }
.be-lz__checks[open] summary .be-icon { transform:rotate(180deg); }
.be-lz__checks summary:hover .be-icon { color:var(--text-primary); }
.be-lz__checks ul { list-style:none; margin: var(--space-2) 0 0; padding:0; display:grid; gap: var(--space-2); }
.be-lz__checks li { display:flex; gap: var(--space-2); align-items:flex-start; color:var(--text-secondary); }
.be-lz__checks li[data-level='warn'] { color:var(--text-primary); }
.be-lz__mark { flex:none; display:inline-flex; margin-block-start: var(--space-half); }
.be-lz__mark .be-icon { width:var(--icon-sm); height:var(--icon-sm); }
.be-lz__what small { display:block; margin-block-start: var(--space-half); color:var(--text-muted); font: var(--text-xs)/1.4 var(--font-mono); overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce) { .be-lz__btn.is-primary[aria-busy='true']::before, .be-lz__checks summary .be-icon, .be-lz__btn, .be-lz__opt, .be-lz__progress progress::-webkit-progress-value { transition:none; } }

/* One header for every panel and popover: the tool's own icon on an accent-tinted tile, its name over the page, actions on the end. */
.be-head { display:flex; align-items:center; gap: var(--space-3); min-width:0; }
.be-head__tile { flex:none; display:grid; place-items:center; width:var(--control-md); height:var(--control-md); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: var(--radius-control); background:color-mix(in srgb, var(--accent) 12%, var(--surface-input)); color:var(--accent); }
.be-head__tile .be-icon { width:var(--icon-md); height:var(--icon-md); }
.be-head__titles { flex:1; min-width:0; display:grid; }
.be-head__title { margin:0; font:var(--weight-semibold) var(--text-lg)/1.25 var(--font-sans); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-head__sub { margin:0; color:var(--text-muted); font-size:var(--text-sm); font-weight:500; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-head__end { flex:none; display:flex; align-items:center; gap: var(--space-2); }


/* Color inspector, softer (as in Extract): quiet cell borders, swatches without an outline, accent as a tint instead of a frame. */
.be-color-details button, .be-color-details .be-swatch { border-color:var(--border-standard); }
.be-color-details button:hover:not(:disabled) { border-color:var(--border-strong); }
.be-color-details .be-swatch { background:var(--surface-panel); padding: var(--space-1); border-radius: var(--radius-md); }
.be-swatch-paint { border:0; border-radius: var(--radius-sm); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.be-color-details button[aria-pressed='true'], .be-color-details .be-a11y-against button[aria-pressed='true'] { background:var(--surface-selected-subtle); border-color:color-mix(in srgb, var(--accent) 36%, transparent); box-shadow:none; color:var(--text-primary); }
.be-swatch[data-base] { border-color:color-mix(in srgb, var(--accent) 36%, transparent); }
.be-a11y-preview { border-color:var(--border-subtle); }

/* Popovers (Color inspector, Localize, Inspect): the quiet header: a grey icon and a small title, no tile; the context (site or element) always sits under the title. Panels keep the tile. */
.be-head--popover { gap: var(--space-2); }
.be-head--popover .be-head__tile { width:auto; height:auto; border:0; background:none; color:var(--text-muted); }
.be-head--popover .be-head__title { font:var(--weight-semibold) var(--text-sm)/1.4 var(--font-sans); color:var(--text-secondary); }
.be-head--popover .be-head__sub { font-size:var(--text-xs); }

/* Drag handle shared by the popovers. */
.be-popover-drag-bar { display:flex; justify-content:center; align-items:center; box-sizing:border-box; min-height:var(--space-6); margin:0; padding:0; color:var(--text-muted); cursor:grab; user-select:none; touch-action:none; }
.be-popover-drag-bar:hover { color:var(--text-secondary); }
.be-popover-drag-bar.is-dragging { cursor:grabbing; }
.be-popover-drag-bar > span { display:flex; }

/* Floating boxes clip their own corners (the scrollbar included) and scroll only their body, under a fixed header. */
.be-popover-top { flex:none; padding:var(--space-4) var(--space-4) var(--space-2); }
.be-popover-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:var(--space-2) var(--space-4) var(--space-4); }
.be-lz__body { display:grid; gap: var(--space-3); align-content:start; }
/* Layout grid card (G in Inspect): the Localize card's surface and fields, smaller. */
.be-grid { position:fixed; display:flex; flex-direction:column; width:min(264px,calc(100vw - 16px)); padding:0; box-sizing:border-box; color:var(--text-primary); font: var(--text-sm)/1.5 var(--font-sans); }
.be-grid__body { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.be-grid__field { display:grid; gap: var(--space-1); min-width:0; color:var(--text-secondary); font: 600 var(--text-xs)/1.2 var(--font-sans); }
.be-grid__field input { box-sizing:border-box; width:100%; min-height: var(--control-md); padding: 0 var(--space-2); border:1px solid var(--border-standard); border-radius: var(--radius-control); background:var(--surface-input); color:var(--text-primary); font: 500 var(--text-sm)/1 var(--font-mono); }
.be-grid__check { grid-column:1 / -1; display:flex; align-items:center; gap: var(--space-2); min-height: var(--control-md); color:var(--text-secondary); }
.be-grid__check input { accent-color:var(--accent); margin:0; }
.be-grid__btn { grid-column:1 / -1; min-height: var(--control-md); padding: 0 var(--space-3); border:1px solid var(--border-standard); border-radius: var(--radius-control); background:var(--surface-input); color:var(--text-primary); font: 600 var(--text-sm)/1 var(--font-sans); cursor:pointer; }
.be-grid__btn:hover, .be-grid__field input:hover { border-color:var(--border-strong); }
.be-grid__btn:focus-visible, .be-grid__field input:focus-visible, .be-grid__check input:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.be-popover-body, .be-palette, .be-tour, .be-select__options { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.be-popover-body::-webkit-scrollbar, .be-palette::-webkit-scrollbar, .be-tour::-webkit-scrollbar { width:8px; }
.be-popover-body::-webkit-scrollbar-thumb, .be-palette::-webkit-scrollbar-thumb, .be-tour::-webkit-scrollbar-thumb { border-radius:var(--radius-full); background:var(--border-strong); border:2px solid transparent; background-clip:content-box; }
.be-popover-body::-webkit-scrollbar-track, .be-palette::-webkit-scrollbar-track, .be-tour::-webkit-scrollbar-track { background:transparent; }
.be-popover-resize { position:absolute; right:var(--space-1); bottom:var(--space-1); display:grid; place-items:center; width:var(--space-4); height:var(--space-4); color:var(--text-muted); opacity:.7; cursor:nwse-resize; touch-action:none; }
.be-popover-resize:hover { opacity:1; color:var(--text-secondary); }
/* Arabic letters join; letter-spacing pulls them apart (eyebrows, kickers, tracked labels). !important beats the tracked rules in page sheets loaded after this one. */
:is([id^="__website_auditor"], [data-be-ui], [class^="be-"], [class*=" be-"]):lang(ar), :is([id^="__website_auditor"], [data-be-ui], [class^="be-"], [class*=" be-"]):lang(ar) * { letter-spacing:0 !important; }
/* JetBrains Mono has no Arabic, and Chrome falls back from a monospaced first font to a monospaced one (Courier New:
   each Arabic letter in a fixed cell, reads spaced out). In Arabic, Latin and code keep JetBrains Mono; Arabic gets a named
   proportional font per platform (macOS, Windows, Linux/ChromeOS). */
:root:lang(ar) { --font-mono:"JetBrains Mono", "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }

/* The one icon-only button component: add class be-icon-button (other classes on the button are layout or behavior hooks only). The inspector lives in the page document, so its
   ID participates in specificity rather than allowing its legacy button reset to win.
   Keep state borders reserved: hovering/focusing never shifts the icon or its hit area. */
:is(button.be-icon-button, #__website_auditor_inspector_menu__ button.be-icon-button, .demo-inspector button.be-icon-button) {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  flex:none; width:var(--control-md); height:var(--control-md);
  min-width:var(--control-md); min-height:var(--control-md); padding:0;
  border:1px solid var(--button-ghost-border); border-radius:var(--radius-sm);
  background:var(--button-ghost-bg); color:var(--button-ghost-text);
  box-shadow:none; transform:none; cursor:pointer;
  transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
:is(button.be-icon-button, #__website_auditor_inspector_menu__ button.be-icon-button, .demo-inspector button.be-icon-button):hover:not(:disabled,[aria-disabled="true"]) {
  background:var(--button-ghost-bg-hover); border-color:var(--button-ghost-border-hover);
  color:var(--button-ghost-text-hover);
}
:is(button.be-icon-button, #__website_auditor_inspector_menu__ button.be-icon-button, .demo-inspector button.be-icon-button):active:not(:disabled,[aria-disabled="true"]) {
  background:var(--button-ghost-bg-active); border-color:var(--button-ghost-border-hover);
  color:var(--button-ghost-text-hover); box-shadow:var(--shadow-pressed); transform:none;
}
:is(button.be-icon-button, #__website_auditor_inspector_menu__ button.be-icon-button, .demo-inspector button.be-icon-button):focus-visible {
  outline:2px solid var(--border-focus); outline-offset:var(--space-half);
}
/* Disabled actions remain visible and explainable, without an enabled-looking fill.
   The scoped important properties also protect the light-DOM inspector from host
   button:disabled rules. Do not suppress pointer events: tooltips still explain actions. */
:is(.popup, .ai-panel__main, .be-lz, .be-tour, .be-color-details,
    #__website_auditor_inspector_menu__) button:is(:disabled,[aria-disabled="true"]),
:is(button.be-icon-button, button.wa-tool-btn):is(:disabled,[aria-disabled="true"]) {
  background:var(--button-disabled-bg)!important;
  border-color:var(--button-disabled-border)!important;
  color:var(--button-disabled-text)!important; opacity:1!important;
  box-shadow:none!important; transform:none!important; cursor:default;
}
@media (prefers-reduced-motion:reduce) {
  :is(button.be-icon-button, #__website_auditor_inspector_menu__ button.be-icon-button) { transition:none; }
}