/* Versioned brand CSS for host: www.kronos.emach.pl */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* EMACH — v9_12_428
 * Brand identity: precise industrial monitoring, cool blue + graphite.
 * The operational UI stays calm and mostly neutral; semantic state colours are
 * never redefined here.
 */
:root[data-brand="emach"] {
    --brand-font-ui: "Montserrat", "Segoe UI", Arial, sans-serif;
    --brand-font-display: var(--brand-font-ui);

    --brand-identity: #2f5aae;
    --brand-identity-strong: #24498f;
    --brand-identity-soft: #e9eef9;

    --brand-primary: #2f5aae;
    --brand-primary-hover: #294f99;
    --brand-primary-pressed: #23447f;
    --brand-primary-soft: #edf1fa;
    --brand-primary-soft-alt: #e8edf8;
    --brand-primary-highlight: #6f92d6;
    --brand-primary-light: #a9bce7;
    --brand-focus: #4169b7;
    --brand-focus-ring: rgba(47,90,174,.16);
    --brand-focus-ring-soft: rgba(47,90,174,.10);
    --brand-shadow: rgba(47,90,174,.18);
    --brand-shadow-soft: rgba(47,90,174,.10);

    /* Canonical icon typography for this brand. The family uses a shared
       24x24 grid. Stroke defines optical weight; gap separates peer geometry;
       clearance reserves empty space around overlays. Gap and clearance are
       independent brand-owned values. */
    --brand-icon-stroke: 2;
    --brand-icon-stroke-secondary: 1.3;
    --brand-device-icon-stroke: 2;
    --brand-device-icon-stroke-secondary: 1.9;
    --brand-device-icon-stroke-strong: 2.3;
    --brand-icon-gap: 2;
    --brand-icon-clearance: 1.25;

    --control-selected-bg: #edf1fa;
    --control-selected-text: #264d94;

    /* Brand-linked operational LIGHT theme.
       EMACH uses a cool blue-grey hierarchy: the top strip is the darkest
       shell surface while remaining light, the sidebar is lighter, and the
       workspace is the brightest shell plane. The logo header deliberately
       shares the exact topbar colour so the upper strip reads continuously
       across the full desktop width. */
    --app-workspace-bg: #f6f8fb;
    --app-canvas: #f6f8fb;
    --app-canvas-background: #f6f8fb;

    --sidebar-bg: #edf2f7;
    --sidebar-border: #d4dee9;
    --sidebar-brand-bg: var(--topbar-bg);
    --sidebar-brand-divider: var(--topbar-border);
    --sidebar-product-text: #53677d;
    --sidebar-brand-muted: #718399;
    --sidebar-nav-text: #52667b;
    --sidebar-nav-hover-bg: #e2e9f1;
    --sidebar-nav-hover-text: #253a50;
    --sidebar-foot-bg: #e8eef5;
    --sidebar-foot-text: #697b8e;
    --sidebar-account-bg: #f4f7fa;
    --sidebar-account-border: #d2dce7;
    --sidebar-account-hover-bg: #e4ebf3;
    --sidebar-account-hover-border: #bdcad8;

    --topbar-bg: #dde6f0;
    --topbar-border: #c7d3df;
    --topbar-title: #21364d;
    --topbar-eyebrow: #687c92;
    --topbar-control-bg: #edf2f7;
    --topbar-control-border: #bdc9d6;
    --topbar-control-text: #344a61;
    --topbar-input-bg: #f6f8fb;
    --topbar-input-focus-bg: #ffffff;
    --topbar-input-border: #bcc9d7;
    --topbar-mobile-search-input-bg: #f6f8fb;
    --topbar-mobile-search-input-focus-bg: #ffffff;
    --topbar-input-text: #22384f;
    --topbar-input-placeholder: #7a8da1;
    --topbar-search-icon: #62768d;
    --topbar-input-focus-border: #7089bb;
    --topbar-search-clear: #63778d;
    --topbar-search-clear-hover-bg: #d2dce7;
    --topbar-search-clear-hover-text: #263d55;
    --topbar-search-toggle-bg: #edf2f7;
    --topbar-search-toggle-border: #bdc9d6;
    --topbar-search-toggle-text: #41586f;
    --topbar-search-toggle-query-ring: #e8eef5;
    --topbar-search-shadow: 0 5px 18px rgba(37,58,83,.14);
    --topbar-shadow: 0 5px 14px -10px rgba(31,49,74,.42);
    --topbar-workspace-shadow: linear-gradient(to bottom, rgba(31,49,74,.16) 0%, rgba(31,49,74,.07) 44%, rgba(31,49,74,0) 100%);
    /* EMACH icon relief policy: closed SVG surfaces are subtly lifted from
       the local surface. The policy is brand-owned, not a core invariant. */
    --topbar-icon-raised-fill: color-mix(in srgb, var(--topbar-bg) 84%, #ffffff 16%);
    --topbar-icon-recessed-fill: color-mix(in srgb, var(--topbar-bg) 94%, #7b8da1 6%);
    --sidebar-icon-raised-fill: color-mix(in srgb, var(--sidebar-bg) 86%, #ffffff 14%);
    --sidebar-icon-recessed-fill: color-mix(in srgb, var(--sidebar-bg) 95%, #718399 5%);
    --popup-icon-raised-fill: color-mix(in srgb, var(--popup-surface-bg) 86%, #ffffff 14%);
    --popup-icon-recessed-fill: color-mix(in srgb, var(--popup-surface-bg) 95%, #6f7f90 5%);

    /* Detail is a content/navigation mode, not a different shell surface.
       Keep its topbar and neutral controls tied to the current EMACH topbar
       tokens so LIGHT/DARK changes cannot fall back to the generic grayscale
       detail profile. Semantic device states still use their global colours. */
    --detail-topbar-bg: var(--topbar-bg);
    --detail-topbar-border: var(--topbar-border);
    --detail-topbar-text: var(--topbar-title);
    --detail-topbar-muted: var(--topbar-eyebrow);
    --detail-control-bg: var(--topbar-control-bg);
    --detail-control-bg-hover: var(--topbar-search-clear-hover-bg);
    --detail-control-border: var(--topbar-control-border);
    --detail-status-bg: var(--topbar-control-bg);
    --detail-status-border: var(--topbar-control-border);
    --detail-device-state-text: var(--topbar-title);

    --sidebar-nav-active-icon: var(--brand-primary-highlight);
    --view-switch-active-text: #294f99;
    --account-avatar-bg: #e6edf6;
    --detail-kicker: #46679f;

    /* White operational surfaces sit clearly above the cool workspace.
       Card elevation is intentionally restrained: geometry is preserved, while
       shadow opacity is reduced by roughly half so cards remain separated from
       the canvas without dominating the EMACH workspace. */
    --surface-card-bg: #ffffff;
    --surface-card-border: #d9e2eb;
    --surface-card-border-hover: #b9c8d8;
    --surface-card-shadow: 0 3px 7px rgba(31,49,74,.05), 0 14px 32px rgba(31,49,74,.07);
    --surface-card-shadow-hover: 0 4px 10px rgba(31,49,74,.06), 0 19px 42px rgba(31,49,74,.085);
    --surface-row-bg: #ffffff;
    --surface-row-border: #dde5ed;
    --surface-row-border-hover: #bfccda;
    --surface-row-shadow: 0 2px 4px rgba(31,49,74,.045), 0 7px 16px rgba(31,49,74,.065);
    --surface-row-shadow-hover: 0 3px 6px rgba(31,49,74,.065), 0 10px 22px rgba(31,49,74,.09);
    --surface-panel-bg: #ffffff;
    --surface-panel-border: #d9e2eb;
    --surface-panel-shadow: 0 3px 7px rgba(31,49,74,.085), 0 13px 30px rgba(31,49,74,.12);

    /* Public/auth identity. */
    --public-bg: #f4f6f9;
    --public-header-bg: rgba(250,251,253,.92);
    --auth-brand-bg: linear-gradient(145deg, #17253a 0%, #223f69 58%, #2f5aae 100%);
    --auth-brand-text: #f7f9fd;
    --auth-main-bg: #f7f8fa;
    --auth-heading: #182235;
    --auth-label: #46536a;
    --auth-muted: #758096;
    --auth-input-bg: #ffffff;
    --auth-input-border: #d7dce5;
    --auth-input-text: #20293a;
    --auth-focus-border: #2f5aae;
    --auth-focus-bg: #ffffff;
    --auth-focus-ring: rgba(47,90,174,.13);
    --auth-divider: #e1e5ec;
    --auth-info-border: #d8e0ef;
    --auth-info-bg: #f1f4fa;
    --auth-info-icon-bg: #e4eaf7;
}

:root[data-brand="emach"] .public-home,
:root[data-brand="emach"] .public-home-body {
    background:
        radial-gradient(circle at 82% 22%, rgba(47,90,174,.075), transparent 30%),
        linear-gradient(180deg, #f8f9fb 0%, #f1f3f6 100%) !important;
}

:root[data-brand="emach"] .public-header {
    border-bottom-color: #e0e4eb;
}

:root[data-brand="emach"] .public-brand { color: #202b3f; }
:root[data-brand="emach"] .public-brand span {
    border-left-color: #d8dde6;
    color: #6f7b90;
}

:root[data-brand="emach"] .public-eyebrow {
    margin-bottom: 16px;
    color: #526a94;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

:root[data-brand="emach"] .public-hero-copy h1 { color: #18243a; }
:root[data-brand="emach"] .public-hero-copy h1 em { color: #2f5aae; }
:root[data-brand="emach"] .public-hero-copy > p:not(.public-note) { color: #68758a; }
:root[data-brand="emach"] .public-primary {
    background: #2f5aae;
    color: #ffffff;
    box-shadow: 0 9px 24px rgba(47,90,174,.18);
}
:root[data-brand="emach"] .public-primary:hover { background: #294f99; }
:root[data-brand="emach"] .public-secondary {
    border-color: #d7dde7;
    background: rgba(255,255,255,.75);
    color: #42506a;
}
:root[data-brand="emach"] .public-note { color: #8a94a5; }

:root[data-brand="emach"] .preview-window {
    border-color: #dbe1e9;
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(34,52,78,.12);
}
:root[data-brand="emach"] .preview-logo { background: #2f5aae; }
:root[data-brand="emach"] .preview-nav.active {
    background: #edf1fa;
    box-shadow: inset 3px 0 #2f5aae;
}
:root[data-brand="emach"] .preview-grid article span {
    background: #edf1fa;
    color: #2f5aae;
}
:root[data-brand="emach"] .preview-status span:first-child {
    background: var(--state-success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-success) 16%, transparent);
}

:root[data-brand="emach"] .auth-logo { filter: brightness(0) invert(1); }
:root[data-brand="emach"] .auth-brand-panel::after {
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 0 0 54px rgba(255,255,255,.025), 0 0 0 108px rgba(255,255,255,.015);
}

/* The EMACH expanded mark is a compact 28x28 symbol, not a wordmark.
   Do not reserve the generic 78px wordmark slot: that pushed the Monitoring
   descriptor away from the logo and caused unnecessary truncation. */
:root[data-brand="emach"] body.app-shell-v246.sidebar-expanded:not(.bqs-kiosk-mode) .sidebar-brand-logo {
    flex: 0 0 28px;
    width: 28px;
    max-width: 28px;
    height: 28px;
}

:root[data-brand="emach"] body.app-shell-v246.sidebar-expanded:not(.bqs-kiosk-mode) .sidebar-product-name {
    flex: 0 1 auto;
    min-height: 22px;
}

@media (prefers-color-scheme: dark) {
    :root[data-brand="emach"] {
        --brand-primary: #88a7df;
        --brand-primary-hover: #9bb5e5;
        --brand-primary-pressed: #7294d3;
        --brand-primary-soft: #26344b;
        --brand-primary-soft-alt: #2b3951;
        --brand-primary-highlight: #9bb8ec;
        --brand-primary-light: #b5c9ee;
        --brand-focus: #9ab6e8;
        --brand-focus-ring: rgba(136,167,223,.22);
        --brand-focus-ring-soft: rgba(136,167,223,.13);
        --control-selected-bg: #344158;
        --control-selected-text: #e1e9f8;

        /* 9_12_376 — EMACH DARK is a readable dark interface, not a black one.
           The whole operational stack is lifted into a cool blue-graphite tonal
           hierarchy, similar in luminance separation to Android/Jung while
           keeping EMACH's own colour character. */
        --app-workspace-bg: #1a1f27;
        --app-canvas: #1a1f27;
        --app-canvas-background: #1a1f27;
        --app-ui-bg: #1d232b;
        --app-surface: #252c35;
        --app-surface-soft: #222831;
        --app-surface-soft-alt: #20262e;
        --app-surface-muted: #1e242c;
        --app-surface-hover: #303945;
        --app-surface-info: #242f40;

        --app-text: #edf1f6;
        --app-text-strong: #f6f8fb;
        --app-text-heading: #f3f6fa;
        --app-text-secondary: #bdc7d3;
        --app-text-muted: #99a5b2;
        --app-text-muted-alt: #a5b0bc;
        --app-text-subtle: #7f8b98;
        --app-text-inverse: #18202a;
        --text-on-dark: #f2f5f9;

        --app-border: #3c4653;
        --app-border-ui: #3c4653;
        --app-border-soft: #333d49;
        --app-border-softer: #2d3641;
        --app-border-strong: #5b6878;
        --app-control-border: #4d5968;
        --app-input-border: #4c5867;

        --surface-canvas: var(--app-canvas);
        --surface-1: #252c35;
        --surface-2: #2a323c;
        --surface-3: #303945;
        --surface-hover: #36414e;
        --surface-border: #414c59;
        --surface-border-strong: #647181;
        --surface-text: #edf1f6;
        --surface-muted: #a7b2be;

        --sidebar-bg: #252c35;
        --sidebar-border: #3b4551;
        --sidebar-brand-bg: var(--topbar-bg);
        --sidebar-brand-divider: var(--topbar-border);
        --sidebar-product-text: #aeb9c5;
        --sidebar-brand-muted: #8f9ba8;
        --sidebar-nav-text: #c2cbd5;
        --sidebar-nav-hover-bg: #343e4a;
        --sidebar-nav-hover-text: #f5f7fa;
        --sidebar-foot-bg: #222831;
        --sidebar-foot-text: #9aa6b2;
        --sidebar-account-bg: #2e3742;
        --sidebar-account-border: #4b5765;
        --sidebar-account-hover-bg: #37424f;
        --sidebar-account-hover-border: #606d7c;

        --topbar-bg: #252c35;
        --topbar-border: #3b4551;
        --topbar-title: #f4f6f9;
        --topbar-eyebrow: #a3afbb;
        --topbar-control-bg: #333d49;
        --topbar-control-border: #515e6d;
        --topbar-control-text: #d4dbe3;
        --topbar-input-bg: #303945;
        --topbar-input-focus-bg: #394451;
        --topbar-input-border: #536071;
        --topbar-mobile-search-input-bg: #303945;
        --topbar-mobile-search-input-focus-bg: #394451;
        --topbar-input-text: #f3f5f8;
        --topbar-input-placeholder: #9aa6b2;
        --topbar-search-icon: #b0bbc7;
        --topbar-input-focus-border: #8aa8df;
        --topbar-search-clear: #b0bbc7;
        --topbar-search-clear-hover-bg: #414c59;
        --topbar-search-clear-hover-text: #f6f8fb;
        --topbar-search-toggle-bg: #333d49;
        --topbar-search-toggle-border: #515e6d;
        --topbar-search-toggle-text: #d8dfe7;
        --topbar-search-toggle-query-ring: #2b3440;
        --topbar-search-shadow: 0 5px 18px rgba(5,9,14,.28);
        --topbar-shadow: 0 5px 14px -9px rgba(5,9,14,.52);
        --topbar-workspace-shadow: linear-gradient(to bottom, rgba(5,9,14,.25) 0%, rgba(5,9,14,.10) 44%, rgba(5,9,14,0) 100%);
        --topbar-icon-raised-fill: color-mix(in srgb, var(--topbar-bg) 82%, #ffffff 18%);
        --topbar-icon-recessed-fill: color-mix(in srgb, var(--topbar-bg) 94%, #10151b 6%);
        --sidebar-icon-raised-fill: color-mix(in srgb, var(--sidebar-bg) 82%, #ffffff 18%);
        --sidebar-icon-recessed-fill: color-mix(in srgb, var(--sidebar-bg) 94%, #10151b 6%);
        --popup-icon-raised-fill: color-mix(in srgb, var(--popup-surface-bg) 82%, #ffffff 18%);
        --popup-icon-recessed-fill: color-mix(in srgb, var(--popup-surface-bg) 94%, #10151b 6%);

        --view-switch-bg: #2e3742;
        --view-switch-border: #4d5968;
        --view-switch-text: #b9c4cf;
        --view-switch-active-bg: #3a4655;
        --view-switch-active-text: #e2e9f5;
        --view-switch-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
        --view-switch-active-shadow: 0 1px 5px rgba(0,0,0,.22);

        --sidebar-nav-active-icon: var(--brand-primary-highlight);
        --account-avatar-bg: #344158;
        --account-name: #f3f6fa;
        --account-meta: #a9b4c0;
        --account-chevron: #a9b4c0;
        --detail-kicker: #b1c5e8;

        --icon-neutral: #b4c0cb;
        --icon-muted: #8f9ba7;
        --icon-strong: #d5dce3;
        --icon-surface: #2b333d;
        --icon-border: #495563;
        --icon-raised-fill: #343d47;
        --device-icon-raised-fill: #3b4652;
        --icon-recessed-fill: #2b333c;
        --ui-icon-raised-fill: var(--icon-raised-fill);
        --ui-icon-recessed-fill: var(--icon-recessed-fill);

        --surface-card-bg: #282f38;
        --surface-card-border: #424c58;
        --surface-card-border-hover: #5e6b7b;
        --surface-card-shadow: 0 3px 10px rgba(5,9,14,.15), 0 12px 28px rgba(5,9,14,.12);
        --surface-card-shadow-hover: 0 4px 12px rgba(5,9,14,.20), 0 17px 36px rgba(5,9,14,.16);
        --surface-row-bg: #282f38;
        --surface-row-border: #414b57;
        --surface-row-border-hover: #5d6978;
        --surface-row-shadow: 0 2px 5px rgba(5,9,14,.10);
        --surface-row-shadow-hover: 0 4px 12px rgba(5,9,14,.18);
        --surface-panel-bg: #272e37;
        --surface-panel-border: #414b57;
        --surface-panel-shadow: 0 4px 14px rgba(5,9,14,.18);

        /* Legacy card/detail/admin tokens still used by older components are
           deliberately lifted as well, so the interface cannot fall back to
           the near-black generic DARK foundation. */
        --device-card-header: #2d3540;
        --device-card-header-2: #303946;
        --device-card-header-text: #f1f4f8;
        --device-card-header-muted: #b4bfca;
        --device-card-body: #272e37;
        --device-card-panel: #2d3540;
        --device-card-panel-border: #414c59;
        --device-card-text: #eef2f6;
        --device-card-muted: #a4afbb;
        --device-card-footer: #252c34;
        --device-card-footer-border: #3c4652;
        --device-card-action: #c0cad4;
        --device-card-action-hover: #36414e;
        --device-card-border: #414b57;
        --device-card-border-hover: #647181;
        --device-card-icon-bg: #303944;
        --device-card-icon-border: #4a5664;
        --device-card-shadow: var(--surface-card-shadow);
        --device-card-shadow-hover: var(--surface-card-shadow-hover);
        --device-card-inset-highlight: rgba(255,255,255,.025);
        --device-card-empty-bg: rgba(255,255,255,.025);

        --device-list-row-bg: #252d36;
        --device-list-row-alt: #28313a;
        --device-list-row-hover: #323c48;
        --device-list-row-border: #3d4753;
        --device-list-row-border-hover: #5d6a79;
        --device-list-row-shadow: 0 2px 5px rgba(5,9,14,.10);
        --device-list-row-shadow-hover: 0 4px 12px rgba(5,9,14,.18);
        --device-list-title: #f0f3f7;
        --device-list-description: #b8c2cd;
        --device-list-meta: #c5ced7;
        --device-list-muted: #9ba7b3;
        --device-list-divider: #3c4652;
        --device-list-control-bg: #303944;
        --device-list-control-border: #4b5765;
        --device-list-control-text: #c2ccd6;
        --device-list-control-hover-bg: #3a4653;
        --device-list-control-hover-border: #647180;
        --device-list-control-hover-text: #f4f6f9;

        --detail-topbar-bg: var(--topbar-bg);
        --detail-topbar-border: var(--topbar-border);
        --detail-topbar-text: var(--topbar-title);
        --detail-topbar-muted: var(--topbar-eyebrow);
        --detail-control-bg: var(--topbar-control-bg);
        --detail-control-bg-hover: #3d4855;
        --detail-control-border: var(--topbar-control-border);
        --detail-status-bg: #303a46;
        --detail-status-border: #4d5968;
        --detail-device-state-text: var(--topbar-title);

        --detail-surface: #242b34;
        --detail-surface-soft: #222932;
        --detail-surface-panel: #2a323c;
        --detail-surface-alt: #303945;
        --detail-surface-hover: #36414e;
        --detail-border: #414c59;
        --detail-border-soft: #37414d;
        --detail-border-strong: #647181;
        --detail-text: #edf1f6;
        --detail-text-strong: #f6f8fb;
        --detail-muted: #a0abb7;
        --detail-muted-strong: #c0c9d2;
        --detail-head-bg: linear-gradient(180deg, #303945 0%, #2a323c 100%);
        --detail-meta-bg: #2d3540;
        --detail-meta-border: #424d5a;
        --detail-tree-line: #424d5a;
        --detail-placeholder-bg: #242b34;
        --detail-placeholder-border: #4a5664;
        --detail-placeholder-text: #a4afbb;
        --detail-shadow: 0 7px 24px rgba(5,9,14,.24);
        --detail-shadow-compact: 0 5px 20px rgba(5,9,14,.18);

        --admin-surface: var(--surface-1);
        --admin-surface-soft: var(--surface-2);
        --admin-surface-hover: var(--surface-hover);
        --admin-border: var(--surface-border);
        --admin-border-soft: #37414d;
        --admin-border-strong: var(--surface-border-strong);
        --admin-text: var(--app-text);
        --admin-text-strong: var(--app-text-strong);
        --admin-text-secondary: var(--app-text-secondary);
        --admin-muted: var(--app-text-muted);
        --admin-branch: #4a5766;
        --admin-avatar-bg: #344158;
        --admin-avatar-text: #d5e0f4;
        --admin-badge-bg: #303945;
        --admin-badge-text: #bdc7d2;
        --admin-role-bg: #344158;
        --admin-role-text: #dce6f7;
        --admin-input-bg: #2d3540;
        --admin-input-border: #4b5765;
        --admin-input-text: var(--app-text);
        --admin-input-placeholder: #98a4b0;
        --admin-toggle-bg: #303944;
        --admin-toggle-hover-bg: #3a4653;
        --admin-toggle-border: #4b5765;
        --admin-toggle-text: #c7d0d9;
        --admin-shadow-hover: 0 4px 14px rgba(5,9,14,.18);

        --public-bg: #171c23;
        --public-header-bg: rgba(37,44,53,.95);
        --auth-main-bg: #1d232b;
        --auth-heading: #f2f5f9;
        --auth-label: #c6ced8;
        --auth-muted: #9ca8b5;
        --auth-input-bg: #262e38;
        --auth-input-border: #46515f;
        --auth-input-text: #eef2f6;
        --auth-focus-bg: #2d3641;
        --auth-divider: #38424e;
        --auth-info-border: #445166;
        --auth-info-bg: #242d3a;
        --auth-info-icon-bg: #303d52;
    }

    :root[data-brand="emach"] .public-home,
    :root[data-brand="emach"] .public-home-body {
        background:
            radial-gradient(circle at 82% 18%, rgba(82,116,180,.12), transparent 32%),
            #0e1116 !important;
    }
    :root[data-brand="emach"] .public-brand,
    :root[data-brand="emach"] .public-hero-copy h1 { color: #eef2f8 !important; }
    :root[data-brand="emach"] .public-logo { filter: none !important; }
    :root[data-brand="emach"] .public-brand span,
    :root[data-brand="emach"] .public-link,
    :root[data-brand="emach"] .public-secondary,
    :root[data-brand="emach"] .public-hero-copy > p:not(.public-note),
    :root[data-brand="emach"] .public-note,
    :root[data-brand="emach"] .public-footer { color: #98a3b4 !important; }
    :root[data-brand="emach"] .public-secondary {
        border-color: #303642 !important;
        background: #161a20 !important;
    }
    :root[data-brand="emach"] .preview-window,
    :root[data-brand="emach"] .preview-sidebar,
    :root[data-brand="emach"] .preview-topbar,
    :root[data-brand="emach"] .preview-grid article,
    :root[data-brand="emach"] .preview-status {
        border-color: #2d333d !important;
        background: #16191e !important;
        color: #bec7d4 !important;
        box-shadow: none !important;
    }
    :root[data-brand="emach"] .preview-content { background: #111419 !important; }
    :root[data-brand="emach"] .preview-nav { background: #252a32 !important; }
    :root[data-brand="emach"] .preview-nav.active,
    :root[data-brand="emach"] .preview-grid article span,
    :root[data-brand="emach"] .preview-topbar div:last-child { background: #202b41 !important; }
}