@import "./platform-brand.css";
/* Change this one default colour to reskin the UI. The picker overrides it locally. */
:root {
    --sf-theme-color: #111111;
    --sf-theme-accent-light: color-mix(in srgb,var(--sf-theme-color) 70%,#000);
    --sf-theme-accent-dark: color-mix(in srgb,var(--sf-theme-color) 60%,#fff);
    --sf-theme-action-light: var(--sf-theme-accent-light);
    --sf-theme-action-dark: color-mix(in srgb,var(--sf-theme-color) 45%,#1b1823);
}
html[data-theme=light], html:not([data-theme]) {
    --sf-theme-bg: #fafafa;
    --sf-theme-surface: #fff;
    --sf-theme-raised: color-mix(in srgb,var(--sf-theme-color) 4%,#fff);
    --sf-theme-hover: color-mix(in srgb,var(--sf-theme-color) 7%,#fff);
    --sf-theme-border: #e5e7eb;
    --sf-theme-control-border: color-mix(in srgb,var(--sf-theme-text) 55%,var(--sf-theme-surface));
    --sf-theme-text: #111111;
    --sf-theme-muted: #5f636b;
    --sf-theme-subtle: #6b7078;
    --sf-theme-accent: var(--sf-theme-accent-light);
    --sf-theme-action: var(--sf-theme-action-light);
}
html[data-theme=dark] {
    --sf-theme-bg: color-mix(in srgb,var(--sf-theme-color) 9%,#131019);
    --sf-theme-surface: color-mix(in srgb,var(--sf-theme-color) 14%,#1b1823);
    --sf-theme-raised: color-mix(in srgb,var(--sf-theme-color) 18%,#24202e);
    --sf-theme-hover: color-mix(in srgb,var(--sf-theme-color) 25%,#2a2336);
    --sf-theme-border: color-mix(in srgb,var(--sf-theme-color) 28%,#3a3346);
    --sf-theme-control-border: color-mix(in srgb,var(--sf-theme-text) 55%,var(--sf-theme-surface));
    --sf-theme-text: #f5f2fa;
    --sf-theme-muted: #c4bdce;
    --sf-theme-subtle: #b0a7bd;
    --sf-theme-accent: var(--sf-theme-accent-dark);
    --sf-theme-action: var(--sf-theme-action-dark);
}
/* Achromatic selections use neutral ink and surfaces in both modes. */
html[data-theme=light][data-theme-palette=neutral] {
    --sf-theme-raised: #f3f4f5; --sf-theme-hover: #eceef0;
    --sf-theme-accent: #111111; --sf-theme-action: #111111;
}
html[data-theme=dark][data-theme-palette=neutral] {
    --sf-theme-accent: #eeeeee; --sf-theme-action: #3a3a3a;
    --sf-theme-bg: color-mix(in srgb,var(--sf-theme-color) 9%,#161616);
    --sf-theme-surface: color-mix(in srgb,var(--sf-theme-color) 14%,#202020);
    --sf-theme-raised: color-mix(in srgb,var(--sf-theme-color) 18%,#292929);
    --sf-theme-hover: color-mix(in srgb,var(--sf-theme-color) 25%,#333);
    --sf-theme-border: color-mix(in srgb,var(--sf-theme-color) 28%,#444);
    --sf-theme-control-border: color-mix(in srgb,var(--sf-theme-text) 55%,var(--sf-theme-surface));
    --sf-theme-text: #f5f5f5; --sf-theme-muted: #c4c4c4; --sf-theme-subtle: #b0b0b0;
}
/* Explicitly bridge old component tokens to this palette, including dark canvases. */
html[data-theme], html[data-theme] body, html[data-theme] body :where([data-canvas]), html[data-theme] [data-canvas=public] {
    --sf-ui-bg: var(--sf-theme-bg);
    --sf-ui-surface: var(--sf-theme-surface);
    --sf-ui-raised: var(--sf-theme-raised);
    --sf-ui-hover: var(--sf-theme-hover);
    --sf-ui-border: var(--sf-theme-border);
    --sf-ui-control-border: var(--sf-theme-control-border);
    --sf-ui-text: var(--sf-theme-text);
    --sf-ui-muted: var(--sf-theme-muted);
    --sf-ui-subtle: var(--sf-theme-subtle);
    --sf-ui-primary: var(--sf-theme-accent);
    --sf-ui-primary-hover: var(--sf-theme-accent);
    --sf-ui-on-primary: #fff;
    --sf-ui-focus: var(--sf-theme-accent);
    --sf-checkbox-accent: var(--sf-theme-accent);
    --sfq-ink: var(--sf-theme-text);
    --sfq-muted: var(--sf-theme-muted);
    --sfq-label: var(--sf-theme-muted);
    --sfq-line: var(--sf-theme-control-border);
    --sfq-line-hover: var(--sf-theme-accent);
    --sfq-surface: var(--sf-theme-surface);
    --sfq-surface-2: var(--sf-theme-raised);
    --sfq-accent: var(--sf-theme-accent);
    --sfq-accent-soft: var(--sf-theme-raised);
    --sfq-accent-ring: color-mix(in srgb,var(--sf-theme-accent) 22%,transparent);
    --sfq-off-bg: var(--sf-theme-raised);
    --sfq-off-ink: var(--sf-theme-subtle);
}
/* Fields need a visible edge at rest, including fetched dialogs outside the
   content canvas and legacy forms without .sf-control. Keep existing geometry
   and the borderless inner inputs used by composite controls. */
html[data-theme] body :where(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image],.sr-only,.sf-control--bare,.sf-phone-number),select:not(.sr-only),textarea:not(.sr-only,.sf-rich-source)) {
    border-color: var(--sf-theme-control-border) !important;
    color: var(--sf-control-color,var(--sf-theme-text)) !important;
    background-color: var(--sf-theme-surface) !important;
}
html[data-theme] body :where(input,textarea)::placeholder { color: var(--sf-theme-subtle) !important; opacity: 1; }
html[data-theme] body :where(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image],.sr-only,.sf-control--bare,.sf-phone-number),select:not(.sr-only),textarea:not(.sr-only,.sf-rich-source)):enabled:hover { border-color: var(--sf-theme-muted) !important; }
html[data-theme] body :where(input,select,textarea):focus-visible {
    outline: 2px solid var(--sf-theme-accent) !important;
    outline-offset: 3px;
}
html[data-theme] body :where(input,select,textarea):focus { border-color: var(--sf-theme-accent) !important; }
html[data-theme] body :where(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image]),select,textarea):is(:disabled,[readonly]) {
    background-color: var(--sf-theme-raised) !important;
    color: var(--sf-theme-muted) !important;
    opacity: 1;
}
html[data-theme] body :where(input,select,textarea):disabled { cursor: not-allowed; }
html[data-theme] body :where(input,select,textarea)[aria-invalid=true] { border-color: var(--sf-ui-danger) !important; }
html[data-theme] body[data-private-shell] {
    --sf-section-bg: var(--sf-theme-surface);
    --sf-section-rail: var(--sf-theme-bg);
    --sf-section-border: var(--sf-theme-border);
    --sf-section-text: var(--sf-theme-text);
    --sf-section-muted: var(--sf-theme-muted);
    --sf-section-hover: var(--sf-theme-hover);
    --sf-section-current: var(--sf-theme-raised);
    --sf-section-accent: var(--sf-theme-accent);
    --sf-private-action: var(--sf-theme-action);
    --sf-private-action-hover: color-mix(in srgb,var(--sf-theme-action) 85%,var(--sf-theme-accent));
    --sf-bar-surface: var(--sf-theme-surface);
    --sf-bar-primary: var(--sf-theme-action);
    background: var(--sf-theme-bg);
    color: var(--sf-theme-text);
}
html[data-theme] body[data-private-shell] :is(.sf-workspace-shell,.sf-workspace-stage,.sf-workspace-main,.sf-admin-stage,.sf-vsla-admin-shell,.sf-flow) { background: var(--sf-theme-bg) !important; color: var(--sf-theme-text); }
html[data-theme] body[data-private-shell] :is(.sf-flow,.sf-overview,.cf-workspace,.sf-access-page,.sf-email-settings-page) {
    --flow-page: var(--sf-theme-bg); --flow-bar: var(--sf-theme-surface); --flow-edge: var(--sf-theme-border); --flow-accent: var(--sf-theme-accent);
    --ov-panel: var(--sf-theme-surface); --ov-soft: var(--sf-theme-raised); --ov-border: var(--sf-theme-border); --ov-text: var(--sf-theme-text); --ov-muted: var(--sf-theme-muted); --ov-blue: var(--sf-theme-accent);
    --cf-surface: var(--sf-theme-surface); --cf-soft: var(--sf-theme-raised); --cf-border: var(--sf-theme-border); --cf-text: var(--sf-theme-text); --cf-muted: var(--sf-theme-muted); --cf-blue: var(--sf-theme-accent);
    --sf-access-surface: var(--sf-theme-surface); --sf-access-soft: var(--sf-theme-raised); --sf-access-ink: var(--sf-theme-text); --sf-access-muted: var(--sf-theme-muted); --sf-access-blue: var(--sf-theme-accent);
    --email-surface: var(--sf-theme-surface); --email-soft: var(--sf-theme-raised); --email-border: var(--sf-theme-border); --email-border-strong: var(--sf-theme-control-border); --email-text: var(--sf-theme-text); --email-muted: var(--sf-theme-muted); --email-input: var(--sf-theme-surface);
}
html[data-theme] #sf-platform-admin {
    --sf-admin-bg: var(--sf-theme-bg); --sf-admin-bg-deep: var(--sf-theme-bg); --sf-admin-sidebar: var(--sf-theme-surface); --sf-admin-topbar: var(--sf-theme-surface);
    --sf-admin-panel: var(--sf-theme-surface); --sf-admin-panel-deep: var(--sf-theme-bg); --sf-admin-panel-soft: var(--sf-theme-raised); --sf-admin-line: var(--sf-theme-border); --sf-admin-line-soft: var(--sf-theme-border);
    --sf-admin-text: var(--sf-theme-text); --sf-admin-muted: var(--sf-theme-muted); --sf-admin-subtle: var(--sf-theme-subtle); --sf-admin-accent: var(--sf-theme-accent); --sf-admin-accent-strong: var(--sf-theme-accent);
}
html[data-theme] body[data-private-shell] #dash-sidebar .sf-sidebar-account-menu,
html[data-theme] body[data-private-shell] :is(.sf-topbar-popover,.sf-profile-photo-dialog,.sf-workspace-modal-dialog,.sf-modal-panel) { background: var(--sf-theme-surface) !important; border-color: var(--sf-theme-border) !important; color: var(--sf-theme-text); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-card,.sf-profile-card,.sf-modal-header,.sf-modal-body,.sf-workspace-modal-content,.sf-profile-photo-preview) { background: var(--sf-theme-raised) !important; border-color: var(--sf-theme-border); }
html[data-theme] body[data-private-shell] :is(.sf-settings-section,.sf-settings-navigation,.sf-settings-savebar,.sf-locked-field) { background: var(--sf-theme-surface); border-color: var(--sf-theme-border); }
html[data-theme] body[data-private-shell] .sf-sidebar-account-menu :is(a,button) { color: var(--sf-theme-text); }
html[data-theme] body[data-private-shell] .sf-sidebar-account-menu :is(a,button):hover { background: var(--sf-theme-hover); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-card,.sf-profile-card) strong { color: var(--sf-theme-text); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-card,.sf-profile-card) small { color: var(--sf-theme-muted); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-menu,.sf-profile-popover) :is(.sf-workspace-nav-icon,.sf-profile-menu-action>svg) { color: var(--sf-theme-accent); }
/* Controls also live outside the content canvas (profile, navigation and dialogs). */
html[data-theme] body :is(.sf-shell-brandbar,#dash-sidebar,.sf-private-topbar,.sf-workspace-footer,.sf-admin-footer,.sf-settings-form,.sf-branding-page,.sf-modal-panel,.sf-workspace-modal-dialog,.sf-profile-photo-dialog) {
    --sf-ui-bg: var(--sf-theme-bg); --sf-ui-surface: var(--sf-theme-surface); --sf-ui-raised: var(--sf-theme-raised); --sf-ui-hover: var(--sf-theme-hover);
    --sf-ui-border: var(--sf-theme-border); --sf-ui-control-border: var(--sf-theme-control-border); --sf-ui-text: var(--sf-theme-text); --sf-ui-muted: var(--sf-theme-muted); --sf-ui-subtle: var(--sf-theme-subtle);
    --sf-ui-primary: var(--sf-theme-accent); --sf-ui-primary-hover: var(--sf-theme-accent); --sf-ui-on-primary: #fff; --sf-ui-focus: var(--sf-theme-accent);
}
html[data-theme] body {
    --sf-accent: var(--sf-theme-accent); --ink: var(--sf-theme-text); --paper: var(--sf-theme-bg); --mist: var(--sf-theme-raised);
    --sf-sb-thumb: var(--sf-theme-accent); --sf-sb-thumb-a: var(--sf-theme-action); --sf-sb-thumb-b: var(--sf-theme-accent);
    --sf-sb-hover-a: var(--sf-theme-accent); --sf-sb-hover-b: var(--sf-theme-accent); --sf-sb-down-a: var(--sf-theme-action); --sf-sb-down-b: var(--sf-theme-accent);
    --sf-sb-track: color-mix(in srgb,var(--sf-theme-accent) 10%,transparent); --sf-sb-edge: var(--sf-theme-border);
    --sf-action-surface: var(--sf-theme-raised); --sf-action-border: var(--sf-theme-border); --sf-action-text: var(--sf-theme-text);
}
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-card,.sf-profile-card,.sf-sidebar-account-menu a,.sf-profile-popover>a,.sf-profile-popover>button) { border-color: var(--sf-theme-border); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-menu a,.sf-profile-popover>a,.sf-profile-popover>button):not(.is-danger) { color: var(--sf-theme-text); }
html[data-theme] body[data-private-shell] :is(.sf-profile-popover>a,.sf-profile-popover>button):hover { background: var(--sf-theme-hover); }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-card,.sf-profile-card) small { color: var(--sf-theme-muted); }
html[data-theme] body[data-private-shell] :is(.sf-flow-ai>button,.sf-flow-ai [data-setup-ai-apply],.sf-flow-password button,.sf-step-flow .sf-flow-choice input:checked+span>i) { background: var(--sf-theme-action); color: #fff; }
html[data-theme] body[data-private-shell] .sf-profile-photo-stage.is-dragging .sf-profile-photo-preview { background: var(--sf-theme-hover); border-color: var(--sf-theme-accent); }
html[data-theme] body[data-private-shell] .sf-user-avatar { background: linear-gradient(135deg,var(--sf-theme-action),color-mix(in srgb,var(--sf-theme-action) 80%,var(--sf-theme-color))); color: #fff; }
html[data-theme] body[data-private-shell] .sf-profile-photo-camera { background: var(--sf-theme-action); color: #fff; }
html[data-theme-palette=neutral] body[data-private-shell] .sf-sidebar-photo-action>.sf-user-avatar { background: linear-gradient(135deg,#85898f,#42464b); }
html[data-theme=light][data-theme-palette=neutral] body[data-private-shell] .sf-private-topbar .sf-user-avatar { background: #eceef0; color: #111; }
html[data-theme] body[data-private-shell] :is(.sf-sidebar-account-menu,.sf-profile-popover) .is-danger { color: var(--sf-ui-danger); }
html[data-theme] body .sf-theme-menu { --sf-button-color: var(--sf-theme-text); --sf-button-hover: var(--sf-theme-hover); }
/* Legacy CRM controls and its opportunity dialog share the live workspace palette. */
html[data-theme] body[data-private-shell].sf-crm-workspace,
html[data-theme] body[data-private-shell] :is([data-canvas],.sf-crm-create-flow) {
    --sf-crm-primary: var(--sf-theme-accent); --sf-crm-primary-dark: var(--sf-theme-accent);
    --sf-crm-link: var(--sf-theme-accent); --sf-crm-canvas: var(--sf-theme-bg);
    --sf-crm-surface: var(--sf-theme-surface); --sf-crm-soft: var(--sf-theme-raised);
    --sf-crm-border: var(--sf-theme-border); --sf-crm-ink: var(--sf-theme-text);
    --sf-crm-slate: var(--sf-theme-muted); --sf-crm-muted: var(--sf-theme-muted);
    --sf-crm-success: var(--sf-ui-positive); --sf-crm-warning: var(--sf-ui-warning); --sf-crm-danger: var(--sf-ui-danger);
    --sf-create-accent: var(--sf-theme-accent); --sf-create-surface: var(--sf-theme-surface);
    --sf-create-soft: var(--sf-theme-raised); --sf-create-ink: var(--sf-theme-text);
    --sf-create-muted: var(--sf-theme-muted); --sf-create-border: var(--sf-theme-control-border);
}
html[data-theme] body[data-private-shell] .sf-crm-summary-icon {
    color: var(--sf-theme-accent); background: color-mix(in srgb,var(--sf-theme-accent) 10%,transparent);
}
html[data-theme] body[data-private-shell] :is(.sf-crm-tool>summary>b,.sf-crm-form-section>header>span,.sf-crm-profile-avatar,.sf-crm-edit-link,.sf-crm-stage-form button:not(.sf-button),.sf-crm-date-filter button:not(.sf-button)) {
    color: var(--sf-ui-on-primary); background: var(--sf-theme-action); border-color: var(--sf-theme-action);
}
html[data-theme] body[data-private-shell] :is(.sf-crm-count-badge,.sf-crm-activity-icon) {
    color: var(--sf-theme-accent); background: var(--sf-theme-raised); border-color: var(--sf-theme-border);
}
html[data-theme] body[data-private-shell] .sf-crm-type-picker input:checked+span {
    color: var(--sf-theme-accent); background: var(--sf-theme-raised); border-color: var(--sf-theme-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb,var(--sf-theme-accent) 12%,transparent);
}
html[data-theme] body[data-private-shell] :is(.sf-crm-search:focus-within,.sf-crm-form-grid :is(input,select,textarea):focus) {
    border-color: var(--sf-theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sf-theme-accent) 12%,transparent);
}
html[data-theme] body[data-private-shell] .sf-crm-contact-actions a {
    color: var(--sf-theme-accent); background: var(--sf-theme-surface); border-color: var(--sf-theme-control-border);
}
html[data-theme] body[data-private-shell] .sf-crm-create-meter>i { background: var(--sf-theme-accent); }
html[data-theme] body[data-private-shell] .sf-crm-report-funnel article {
    background: linear-gradient(90deg,var(--sf-theme-action),var(--sf-private-action-hover));
}
/* Public components reuse the same appearance palette as authenticated screens. */
/* Clear button boundaries on both canvases, including dark CTA panels. */
html[data-theme] [data-canvas=public] .sf-button--secondary:not([data-cycle-toggle]) {
    --sf-button-bg: var(--sf-theme-surface); --sf-button-hover: var(--sf-theme-hover);
    --sf-button-color: var(--sf-theme-text);
    --sf-button-border: color-mix(in srgb,var(--sf-theme-text) 55%,var(--sf-theme-surface));
}
html[data-theme] [data-canvas=public] .sf-button--primary { --sf-button-border: var(--sf-theme-accent); }
/* The selected billing period carries white text, so use the action colour
   rather than the lighter dark-mode accent behind that text. */
html[data-theme] [data-cycle-thumb] { background: var(--sf-theme-action); }
html[data-theme] [data-canvas=public] .sf-cta-panel .sf-button--primary {
    --sf-button-bg: var(--sf-theme-surface); --sf-button-hover: var(--sf-theme-hover);
    --sf-button-color: var(--sf-theme-accent);
}
html[data-theme] [data-canvas=public] {
    --sf-accent: var(--sf-theme-accent);
    --ink: var(--sf-theme-text); --paper: var(--sf-theme-bg); --mist: var(--sf-theme-raised);
    --sf-public-preview-bg: color-mix(in srgb,var(--sf-theme-color) 15%,#0a0a0a);
    --sf-public-preview-surface: color-mix(in srgb,var(--sf-theme-color) 18%,#131316);
    background: var(--sf-theme-bg);
    color: var(--sf-theme-text);
}
html[data-theme] [data-canvas=public] :is(.sf-arrow-link,.sf-icon-box,.sf-nav-top-link.is-active,.sf-nav-top-link[aria-expanded=true]) { color: var(--sf-theme-accent); }
html[data-theme] [data-canvas=public] .sf-list li:before { background: var(--sf-theme-accent); }
html[data-theme] [data-canvas=public] .sf-pillars>* { border-top-color: var(--sf-theme-accent); }
html[data-theme] [data-canvas=public] .pricing-choice-card.is-popular { --sf-card-border: var(--sf-theme-accent); }
html[data-theme] [data-canvas=public] .sf-calendar em { border-left-color: var(--sf-theme-accent); }
html[data-theme] [data-canvas=public] .sf-preview { background-color: var(--sf-public-preview-bg); }
html[data-theme] [data-canvas=public] .sf-preview-window { background-color: var(--sf-public-preview-surface); }
html[data-theme] [data-canvas=public] .sf-art { background-color: var(--sf-public-preview-bg); }
html[data-theme] [data-canvas=public] .sf-preview[data-motion-preview] { background-image: radial-gradient(ellipse at 80% 10%,color-mix(in srgb,var(--sf-theme-color) 15%,transparent),transparent 65%),linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px); }
html[data-theme=light] [data-canvas=public] .sf-cta-panel { background: var(--sf-theme-action); border-color: var(--sf-theme-action); }
html[data-theme=light] [data-canvas=public] .sf-cta-panel .sf-lead { color: #ffffffd9; }
html[data-theme=light] [data-canvas=public] .sf-cta-panel .sf-kicker { color: #ffffffbf; }
html[data-theme=dark] [data-canvas=public] .sf-cta-panel .sf-lead { color: var(--sf-theme-muted); }
html[data-theme=dark] [data-canvas=public] .sf-cta-panel .sf-kicker { color: var(--sf-theme-accent); }
/* Keep document previews, uploaded images and semantic error/status colours independent. */
/* Image sizing rules must not reveal the logo intended for the other surface. */
html[data-theme] body[data-private-shell] .sf-shell-brandbar .sf-org-logo-themed.is-for-light { display: block !important; }
html[data-theme] body[data-private-shell] .sf-shell-brandbar .sf-org-logo-themed.is-for-dark { display: none !important; }
html[data-theme=dark] body[data-private-shell] .sf-shell-brandbar .sf-org-logo-themed.is-for-light { display: none !important; }
html[data-theme=dark] body[data-private-shell] .sf-shell-brandbar .sf-org-logo-themed.is-for-dark { display: block !important; }
/* Transparent artwork in the bar's own tone is redrawn as a silhouette in the
   bar's text colour. A plate behind it stretched to the bar's width and shrank
   the logo inside it; self-backed artwork is never flagged, so it is untouched. */
html[data-theme=light] body[data-private-shell] .sf-shell-brandbar [data-logo-recolour-light=true] img { filter: brightness(0); }
html[data-theme=dark] body[data-private-shell] .sf-shell-brandbar [data-logo-recolour-dark=true] img { filter: brightness(0) invert(1); }
html[data-theme] body[data-private-shell] .sf-shell-brandbar [data-brand-square] { display: none; flex-shrink: 0; width: 1.5rem; height: 1.5rem; }
html[data-theme] body[data-private-shell] .sf-shell-brandbar [data-brand-square] img { width: 100%; height: 100%; object-fit: contain; }
@media(min-width:64rem) {
    html[data-sidebar=collapsed] body[data-private-shell] .sf-shell-brandbar .sf-workspace-brand.is-org-branded { display: flex; flex: 0 0 1.5rem; width: 1.5rem; min-height: 0; margin: 0; padding: 0; }
    html[data-sidebar=collapsed] body[data-private-shell] .sf-shell-brandbar [data-brand-wordmark] { display: none; }
    html[data-sidebar=collapsed] body[data-private-shell] .sf-shell-brandbar [data-brand-square] { display: grid; place-items: center; padding: .15rem; }
}
.sf-theme-menu { position: relative; flex: none; }
.sf-theme-trigger { display: grid; place-items: center; width: var(--sf-topbar-control,3.25rem); height: var(--sf-topbar-control,3.25rem); padding: .6rem; cursor: pointer; list-style: none; color: var(--sf-theme-accent); background: var(--sf-theme-surface); border: 1px solid var(--sf-theme-control-border); border-radius: .8rem; }
.sf-theme-trigger::-webkit-details-marker { display: none; }
.sf-theme-trigger svg { width: 1.2rem; height: 1.2rem; }
.sf-theme-trigger:hover { background: var(--sf-theme-hover); }
.sf-theme-trigger:focus-visible,.sf-theme-presets button:focus-visible { outline: 2px solid var(--sf-theme-accent); outline-offset: 3px; }
.sf-theme-panel { position: absolute; z-index: 100; top: calc(100% + .5rem); right: 0; width: min(18rem,calc(100vw - 2rem)); max-height: calc(100dvh - 6rem); overflow-y: auto; padding: 1rem; display: grid; gap: .8rem; color: var(--sf-theme-text); background: var(--sf-theme-surface); border: 1px solid var(--sf-theme-border); border-radius: .9rem; box-shadow: 0 12px 40px #0003; }
.sf-theme-panel>strong { font-size: .95rem; }
.sf-theme-presets { display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; }
.sf-theme-presets button { width: 100%; aspect-ratio: 1; padding: 0; background: var(--theme-choice) !important; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.sf-theme-presets button[aria-pressed=true] { outline: 2px solid var(--sf-theme-accent); outline-offset: 3px; }
.sf-theme-custom { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem .8rem; align-items: center; font-size: .85rem; }
.sf-theme-custom>span { grid-column: 1/-1; }
.sf-theme-custom input { width: 2.5rem; height: 2.5rem; padding: .15rem; border: 1px solid var(--sf-theme-control-border); border-radius: .4rem; background: var(--sf-theme-raised); cursor: pointer; }
.sf-theme-custom output { font-variant-numeric: tabular-nums; color: var(--sf-theme-muted); }
.sf-theme-menu--floating { position: fixed; top: 1rem; right: 1rem; z-index: 100; }
@media(max-width:40rem) { .sf-theme-trigger { width: 2.25rem; height: 2.5rem; padding: .45rem; } }