@layer reset, tokens, base, layout, components, patterns, responsive, utilities;

@font-face { font-family: "Comfortaa"; src: url("../vendor/fonts/comfortaa-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Comfortaa"; src: url("../vendor/fonts/comfortaa-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Comfortaa"; src: url("../vendor/fonts/comfortaa-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; color-scheme: light; }
    html[data-effective-theme="dark"] { color-scheme: dark; }
    body { min-height: 100vh; margin: 0; }
    button, input, select, textarea { font: inherit; letter-spacing: 0; }
    button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
    img, svg, canvas, video { max-width: 100%; }
    table { border-collapse: collapse; border-spacing: 0; }
    [hidden] { display: none !important; }
}

@layer tokens {
    :root {
        --ui-canvas: var(--be-color-bg, #f4f2f2);
        --ui-surface: var(--be-color-surface, #ffffff);
        --ui-ink: var(--be-color-text, #141025);
        --ui-primary: var(--be-color-primary, #e53859);
        --ui-secondary: var(--be-color-secondary, #ed8533);
        --ui-accent: var(--ui-secondary);
        --ui-primary-text: color-mix(in srgb, var(--ui-primary) 46%, var(--ui-ink));
        --ui-secondary-text: color-mix(in srgb, var(--ui-secondary) 46%, var(--ui-ink));
        --ui-primary-rgb: var(--be-color-primary-rgb, 229, 56, 89);
        --ui-secondary-rgb: var(--be-color-secondary-rgb, 237, 133, 51);
        --ui-accent-rgb: var(--ui-secondary-rgb);
        --ui-muted: var(--be-color-muted, color-mix(in srgb, var(--ui-ink) 61%, var(--ui-canvas)));
        --ui-faint: color-mix(in srgb, var(--ui-ink) 7%, var(--ui-surface));
        --ui-line: color-mix(in srgb, var(--ui-ink) 13%, var(--ui-canvas));
        --ui-line-strong: color-mix(in srgb, var(--ui-ink) 22%, var(--ui-canvas));
        --ui-elevated: color-mix(in srgb, var(--ui-surface) 94%, var(--ui-canvas));
        --ui-control: color-mix(in srgb, var(--ui-surface) 84%, var(--ui-canvas));
        --ui-control-hover: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-surface));
        --ui-selection: color-mix(in srgb, var(--ui-primary) 13%, var(--ui-surface));
        --ui-primary-action: var(--be-color-primary-action, var(--ui-primary));
        --ui-primary-ink: var(--be-color-on-primary, #ffffff);
        --ui-success: #188c5b;
        --ui-warning: #b35b0a;
        --ui-danger: #c62847;
        --ui-info: #16739a;
        --ui-success-text: color-mix(in srgb, var(--ui-success) 78%, var(--ui-ink));
        --ui-warning-text: color-mix(in srgb, var(--ui-warning) 82%, var(--ui-ink));
        --ui-danger-text: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-ink));
        --ui-info-text: color-mix(in srgb, var(--ui-info) 82%, var(--ui-ink));
        --ui-success-soft: color-mix(in srgb, var(--ui-success) 11%, var(--ui-surface));
        --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 11%, var(--ui-surface));
        --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-surface));
        --ui-info-soft: color-mix(in srgb, var(--ui-info) 10%, var(--ui-surface));
        --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-ink) 10%, transparent);
        --ui-shadow-sm: 0 7px 20px color-mix(in srgb, var(--ui-ink) 10%, transparent);
        --ui-shadow: 0 18px 48px color-mix(in srgb, var(--ui-ink) 14%, transparent);
        --ui-tooltip-bg: color-mix(in srgb, var(--ui-ink) 92%, #000000);
        --ui-tooltip-ink: var(--ui-surface);
        --ui-radius: 8px;
        --ui-radius-sm: 5px;
        --ui-rail: 88px;
        --ui-topbar: 62px;
        --ui-font: "Open Sans", Aptos, "Segoe UI", system-ui, sans-serif;
        --ui-display: Comfortaa, "Open Sans", Aptos, "Segoe UI", system-ui, sans-serif;
        --ui-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
        --ui-fast: 140ms ease;
        --ui-slow: 240ms cubic-bezier(.2, .8, .2, 1);
        --be-bg-primary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='white' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-180 168C62-96 382-126 592 46S786 420 566 574 76 690-146 432'/%3E%3Cpath d='M-142 218C64-24 344-54 526 92S692 402 506 530 94 628-104 410'/%3E%3Cpath d='M-104 270C70 54 306 26 456 142S596 384 446 484 116 562-62 388'/%3E%3Cpath d='M-64 318C76 130 270 112 390 192S500 366 386 438 138 500-22 368'/%3E%3Cpath d='M-22 364C82 208 232 198 322 242S406 350 328 396 160 438 20 350'/%3E%3Cpath d='M342-40C494 70 512 188 444 282S250 406 170 520 112 774 246 940'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-secondary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='white' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M1780 488C1536 302 1248 322 1082 508S940 872 1160 1026'/%3E%3Cpath d='M1740 538C1528 376 1280 394 1138 550S1020 858 1208 996'/%3E%3Cpath d='M1698 588C1518 454 1314 466 1198 594S1104 844 1260 966'/%3E%3Cpath d='M1658 638C1508 532 1348 540 1258 638S1188 830 1312 934'/%3E%3Cpath d='M1616 686C1498 610 1382 616 1318 682S1270 816 1364 904'/%3E%3Cpath d='M1574 736C1488 684 1418 692 1378 728S1354 804 1416 872'/%3E%3Cpath d='M1210 352C1332 236 1500 214 1662 282'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-primary-size: cover;
        --be-bg-secondary-size: cover;
        --be-bg-primary-position: center;
        --be-bg-secondary-position: center;
        --be-bg-primary-repeat: no-repeat;
        --be-bg-secondary-repeat: no-repeat;
        --be-bg-primary-opacity: .13;
        --be-bg-secondary-opacity: .11;

        /* Compatibility aliases while page families are migrated. */
        --ui-bg: var(--ui-canvas);
        --ui-text: var(--ui-ink);
        --ui-on-shell: var(--ui-ink);
        --ui-on-shell-muted: var(--ui-muted);
        --ui-panel: var(--ui-surface);
        --ui-panel-raised: var(--ui-elevated);
        --ui-panel-hover: var(--ui-control-hover);
        --ui-input: var(--ui-control);
        --ui-control-active: var(--ui-selection);
        --ui-sunken: var(--ui-faint);
        --ui-brand: var(--ui-primary);
        --ui-brand-rgb: var(--ui-primary-rgb);
        --ui-backdrop: color-mix(in srgb, var(--ui-secondary) 46%, transparent);
        --ui-shadow-soft: var(--ui-shadow-sm);
    }

    html[data-effective-theme="dark"] {
        --ui-canvas: var(--be-color-bg, #141025);
        --ui-surface: var(--be-color-surface, #1f2630);
        --ui-ink: var(--be-color-text, #f4f2f2);
        --ui-primary: var(--be-color-primary, #e53859);
        --ui-secondary: var(--be-color-secondary, #ed8533);
        --ui-accent: var(--ui-secondary);
        --ui-muted: var(--be-color-muted, color-mix(in srgb, var(--ui-ink) 63%, var(--ui-canvas)));
        --ui-faint: color-mix(in srgb, var(--ui-ink) 7%, var(--ui-surface));
        --ui-line: color-mix(in srgb, var(--ui-ink) 13%, var(--ui-canvas));
        --ui-line-strong: color-mix(in srgb, var(--ui-ink) 23%, var(--ui-canvas));
        --ui-elevated: color-mix(in srgb, var(--ui-surface) 88%, var(--ui-ink));
        --ui-control: color-mix(in srgb, var(--ui-surface) 89%, var(--ui-ink));
        --ui-control-hover: color-mix(in srgb, var(--ui-primary) 15%, var(--ui-surface));
        --ui-selection: color-mix(in srgb, var(--ui-primary) 20%, var(--ui-surface));
        --ui-success: #52c98b;
        --ui-warning: #f0a45d;
        --ui-danger: #ff6e87;
        --ui-info: #59b8dd;
        --ui-primary-text: color-mix(in srgb, var(--ui-primary) 46%, var(--ui-ink));
        --ui-secondary-text: color-mix(in srgb, var(--ui-secondary) 46%, var(--ui-ink));
        --ui-success-text: color-mix(in srgb, var(--ui-success) 78%, var(--ui-ink));
        --ui-warning-text: color-mix(in srgb, var(--ui-warning) 82%, var(--ui-ink));
        --ui-danger-text: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-ink));
        --ui-info-text: color-mix(in srgb, var(--ui-info) 82%, var(--ui-ink));
        --ui-shadow-xs: 0 1px 2px color-mix(in srgb, black 32%, transparent);
        --ui-shadow-sm: 0 8px 22px color-mix(in srgb, black 30%, transparent);
        --ui-shadow: 0 20px 56px color-mix(in srgb, black 43%, transparent);
        --ui-tooltip-bg: color-mix(in srgb, var(--ui-surface) 78%, #000000);
        --ui-tooltip-ink: var(--ui-ink);
        --be-bg-primary-opacity: .24;
        --be-bg-secondary-opacity: .2;
    }

    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="contours"] {
        --be-bg-primary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='white' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-180 168C62-96 382-126 592 46S786 420 566 574 76 690-146 432'/%3E%3Cpath d='M-142 218C64-24 344-54 526 92S692 402 506 530 94 628-104 410'/%3E%3Cpath d='M-104 270C70 54 306 26 456 142S596 384 446 484 116 562-62 388'/%3E%3Cpath d='M-64 318C76 130 270 112 390 192S500 366 386 438 138 500-22 368'/%3E%3Cpath d='M-22 364C82 208 232 198 322 242S406 350 328 396 160 438 20 350'/%3E%3Cpath d='M342-40C494 70 512 188 444 282S250 406 170 520 112 774 246 940'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-secondary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='white' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M1780 488C1536 302 1248 322 1082 508S940 872 1160 1026'/%3E%3Cpath d='M1740 538C1528 376 1280 394 1138 550S1020 858 1208 996'/%3E%3Cpath d='M1698 588C1518 454 1314 466 1198 594S1104 844 1260 966'/%3E%3Cpath d='M1658 638C1508 532 1348 540 1258 638S1188 830 1312 934'/%3E%3Cpath d='M1616 686C1498 610 1382 616 1318 682S1270 816 1364 904'/%3E%3Cpath d='M1574 736C1488 684 1418 692 1378 728S1354 804 1416 872'/%3E%3Cpath d='M1210 352C1332 236 1500 214 1662 282'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-primary-size: cover;
        --be-bg-secondary-size: cover;
        --be-bg-primary-position: center;
        --be-bg-secondary-position: center;
        --be-bg-primary-repeat: no-repeat;
        --be-bg-secondary-repeat: no-repeat;
    }

    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="waves"] {
        --be-bg-primary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M-40 44C40-6 120 94 200 44S360-6 440 44S600 94 680 44'/%3E%3Cpath d='M-40 120C40 70 120 170 200 120S360 70 440 120S600 170 680 120'/%3E%3Cpath d='M-40 196C40 146 120 246 200 196S360 146 440 196S600 246 680 196'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-secondary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-80 82C20 12 120 152 220 82S420 12 520 82'/%3E%3Cpath d='M-80 174C20 104 120 244 220 174S420 104 520 174'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-primary-size: 480px 240px;
        --be-bg-secondary-size: 480px 240px;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="grid"] {
        --be-bg-primary-mask: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 48px);
        --be-bg-secondary-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 48px);
        --be-bg-primary-size: auto;
        --be-bg-secondary-size: auto;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="diagonals"] {
        --be-bg-primary-mask: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 38px);
        --be-bg-secondary-mask: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 76px);
        --be-bg-primary-size: auto;
        --be-bg-secondary-size: auto;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="arches"] {
        --be-bg-primary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M-50 260V150a100 100 0 01200 0v110'/%3E%3Cpath d='M50 260V118a82 82 0 01164 0v142'/%3E%3Cpath d='M160 260V150a100 100 0 01200 0v110'/%3E%3Cpath d='M260 260V118a82 82 0 01164 0v142'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-secondary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M-70 0v110a100 100 0 00200 0V0'/%3E%3Cpath d='M140 0v110a100 100 0 00200 0V0'/%3E%3Cpath d='M350 0v110a100 100 0 00200 0V0'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-primary-size: 420px 260px;
        --be-bg-secondary-size: 420px 260px;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="topography"] {
        --be-bg-primary-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 340'%3E%3Cg fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M-30 85C54 6 136 12 190 66s132 64 202 4 142-48 184 12'/%3E%3Cpath d='M-42 132C52 42 142 48 206 104s126 62 190 8 138-44 176 8'/%3E%3Cpath d='M-50 184C48 92 154 94 222 154s122 58 182 12 124-38 166 4'/%3E%3Cpath d='M-44 238C62 144 166 150 238 208s116 52 172 12 114-30 160 14'/%3E%3Cpath d='M-32 292C72 204 182 210 254 264s110 48 162 12 108-22 150 20'/%3E%3C/g%3E%3C/svg%3E");
        --be-bg-secondary-mask: radial-gradient(ellipse at center, transparent 0 44%, #000 45% 46%, transparent 47% 100%);
        --be-bg-primary-size: 520px 340px;
        --be-bg-secondary-size: 280px 190px;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="rays"] {
        --be-bg-primary-mask: repeating-conic-gradient(from -8deg at 50% 100%, #000 0deg 1.2deg, transparent 1.2deg 14deg);
        --be-bg-secondary-mask: repeating-radial-gradient(circle at 50% 100%, #000 0 1px, transparent 1px 72px);
        --be-bg-primary-size: cover;
        --be-bg-secondary-size: cover;
        --be-bg-primary-repeat: no-repeat;
        --be-bg-secondary-repeat: no-repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="dots"] {
        --be-bg-primary-mask: radial-gradient(circle, #000 0 1.5px, transparent 1.8px);
        --be-bg-secondary-mask: radial-gradient(circle, #000 0 1px, transparent 1.3px);
        --be-bg-primary-size: 34px 34px;
        --be-bg-secondary-size: 34px 34px;
        --be-bg-primary-position: 0 0;
        --be-bg-secondary-position: 17px 17px;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="weave"] {
        --be-bg-primary-mask: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 26px);
        --be-bg-secondary-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 26px);
        --be-bg-primary-size: auto;
        --be-bg-secondary-size: auto;
        --be-bg-primary-repeat: repeat;
        --be-bg-secondary-repeat: repeat;
    }
    :where(html, [data-branding-theme-preview], [data-branding-background-swatch])[data-background-style="plain"] {
        --be-bg-primary-mask: linear-gradient(transparent, transparent);
        --be-bg-secondary-mask: linear-gradient(transparent, transparent);
    }
}

@layer base {
    html { overflow-x: clip; scroll-padding-top: calc(var(--ui-topbar) + 18px); }
    body {
        overflow-x: clip;
        color: var(--ui-ink);
        font-family: var(--ui-font);
        font-size: 14px;
        line-height: 1.5;
        background: var(--ui-canvas);
        background-attachment: fixed;
    }
    body::before,
    body::after {
        position: fixed;
        z-index: -1;
        inset: 0;
        background: var(--ui-primary);
        content: "";
        opacity: var(--be-bg-primary-opacity);
        pointer-events: none;
        -webkit-mask-image: var(--be-bg-primary-mask);
        mask-image: var(--be-bg-primary-mask);
        -webkit-mask-position: var(--be-bg-primary-position);
        mask-position: var(--be-bg-primary-position);
        -webkit-mask-repeat: var(--be-bg-primary-repeat);
        mask-repeat: var(--be-bg-primary-repeat);
        -webkit-mask-size: var(--be-bg-primary-size);
        mask-size: var(--be-bg-primary-size);
    }
    body::after {
        background: var(--ui-secondary);
        opacity: var(--be-bg-secondary-opacity);
        -webkit-mask-image: var(--be-bg-secondary-mask);
        mask-image: var(--be-bg-secondary-mask);
        -webkit-mask-position: var(--be-bg-secondary-position);
        mask-position: var(--be-bg-secondary-position);
        -webkit-mask-repeat: var(--be-bg-secondary-repeat);
        mask-repeat: var(--be-bg-secondary-repeat);
        -webkit-mask-size: var(--be-bg-secondary-size);
        mask-size: var(--be-bg-secondary-size);
    }
    a { color: color-mix(in srgb, var(--ui-primary) 74%, var(--ui-ink)); text-decoration: none; }
    a:hover { color: var(--ui-primary); }
    button { color: inherit; }
    :focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 2px; }
    ::selection { color: var(--ui-ink); background: color-mix(in srgb, var(--ui-primary) 25%, var(--ui-surface)); }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1, h2, h3, h4 { color: var(--ui-ink); font-family: var(--ui-display); letter-spacing: 0; }
    h1 { font-size: 24px; line-height: 1.22; }
    h2 { font-size: 18px; line-height: 1.3; }
    h3 { font-size: 15px; line-height: 1.35; }
    code, pre, .font-monospace { font-family: var(--ui-mono) !important; }
    hr { border: 0; border-top: 1px solid var(--ui-line); }
}

@layer layout {
    .be-skip-link {
        position: fixed;
        z-index: 2000;
        top: 8px;
        left: 88px;
        padding: 8px 12px;
        color: var(--ui-surface);
        background: var(--ui-primary-action);
        border-radius: var(--ui-radius-sm);
        transform: translateY(-160%);
    }
    .be-skip-link:focus { transform: translateY(0); }

    .be-environment {
        position: fixed;
        z-index: 1400;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        min-height: 28px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 4px 12px;
        color: #fff;
        background: #b52345;
        border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
    .app-env-dev .be-topbar { top: 28px; }
    .app-env-dev .be-rail {
        top: calc(var(--ui-topbar) + 28px);
        bottom: 78px;
    }
    .app-env-dev .be-main { padding-top: calc(var(--ui-topbar) + 28px); }

    .be-workspace { min-height: 100vh; }
    .be-rail {
        position: fixed;
        z-index: 1050;
        inset: var(--ui-topbar) auto 0 0;
        display: flex;
        width: var(--ui-rail);
        flex-direction: column;
        align-items: center;
        padding: 12px 8px;
        color: var(--ui-ink);
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .be-rail-nav { display: flex; width: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 6px; overflow: visible; }
    .be-rail-divider { display: block; width: 28px; height: 1px; margin: 2px 0 3px; background: var(--ui-line); }
    .be-rail-spacer { flex: 1 1 auto; }
    .be-rail-link, .be-rail-button, .be-rail-search {
        position: relative;
        display: flex;
        width: 64px;
        height: 52px;
        flex: 0 0 52px;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--ui-muted);
        background: transparent;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        overflow: visible;
    }
    .be-rail-icon {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        background: var(--ui-control);
        border: 1px solid var(--ui-line);
        border-radius: 50%;
        box-shadow: var(--ui-shadow-xs);
        font-size: 16px;
        line-height: 1;
        transform-origin: center;
        transition: transform var(--ui-slow), color var(--ui-fast), background var(--ui-fast), box-shadow var(--ui-fast);
    }
    .be-rail-icon > i { display: grid; width: 1em; height: 1em; place-items: center; line-height: 1; }
    .be-rail-icon > i::before { display: block; width: 1em; line-height: 1; text-align: center; }
    .be-rail-link:hover > .be-rail-icon, .be-rail-button:hover > .be-rail-icon, .be-rail-search:hover > .be-rail-icon,
    .be-rail-link:focus-visible > .be-rail-icon, .be-rail-button:focus-visible > .be-rail-icon, .be-rail-search:focus-visible > .be-rail-icon {
        color: var(--ui-primary-ink);
        background: linear-gradient(145deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 66%, var(--ui-accent)));
        border-color: transparent;
        box-shadow: 0 9px 22px color-mix(in srgb, var(--ui-primary) 28%, transparent);
        transform: scale(1.4) translateX(6px);
    }
    :is(.be-rail-link, .be-rail-button, .be-rail-search):not(:hover):not(:focus-visible):has(+ :is(.be-rail-link, .be-rail-button, .be-rail-search):is(:hover, :focus-visible)) > .be-rail-icon,
    :is(.be-rail-link, .be-rail-button, .be-rail-search):is(:hover, :focus-visible) + :is(.be-rail-link, .be-rail-button, .be-rail-search):not(:hover):not(:focus-visible) > .be-rail-icon {
        transform: scale(1.14) translateX(3px);
    }
    .be-rail-link.is-active > .be-rail-icon, .be-rail-button.is-active > .be-rail-icon {
        color: var(--ui-primary-ink);
        background: var(--ui-primary-action);
        border-color: transparent;
        box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-primary) 25%, transparent);
    }
    .be-rail-link.is-active::before, .be-rail-button.is-active::before {
        position: absolute;
        left: -8px;
        width: 4px;
        height: 24px;
        background: linear-gradient(var(--ui-primary), var(--ui-accent));
        border-radius: 0 4px 4px 0;
        content: "";
    }
    .be-rail-link::after, .be-rail-button::after, .be-rail-search::after {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: calc(100% + 10px);
        max-width: 220px;
        padding: 6px 9px;
        color: var(--ui-tooltip-ink);
        white-space: nowrap;
        background: var(--ui-tooltip-bg);
        border-radius: var(--ui-radius-sm);
        box-shadow: var(--ui-shadow-sm);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        opacity: 0;
        pointer-events: none;
        transform: translate(-5px, -50%);
        transition: opacity var(--ui-fast), transform var(--ui-fast);
    }
    .be-rail-link:hover::after, .be-rail-button:hover::after, .be-rail-search:hover::after,
    .be-rail-link:focus-visible::after, .be-rail-button:focus-visible::after, .be-rail-search:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .be-topbar {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        height: var(--ui-topbar);
        align-items: center;
        gap: 14px;
        padding: 8px 18px;
        background: var(--ui-surface);
        border-bottom: 1px solid var(--ui-line);
        box-shadow: 0 5px 18px color-mix(in srgb, var(--ui-secondary) 6%, transparent);
    }
    .be-topbar-logo { display: grid; width: calc(var(--ui-rail) - 18px); height: 46px; flex: 0 0 calc(var(--ui-rail) - 18px); place-items: center; }
    .be-topbar-logo img { display: block; width: 44px; height: 34px; object-fit: contain; }
    .be-topbar-product-fallback { color: var(--ui-primary); font: 800 17px/1 var(--ui-display); text-transform: uppercase; }
    .be-topbar-title { display: flex; min-width: 0; max-height: 100%; flex: 1 1 auto; align-items: center; gap: 7px; overflow: hidden; }
    .be-topbar-kicker { color: var(--ui-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
    .be-topbar-name { min-width: 0; margin: 0; overflow: hidden; color: var(--ui-ink); font-family: var(--ui-display); font-size: 16px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .be-topbar-trail { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .be-topbar-trail nav,
    .be-topbar-trail :is(ol, ul),
    .be-topbar-trail > :is(div, span) { display: flex; min-width: 0; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .be-topbar-trail nav { overflow: hidden; }
    .be-topbar .be-topbar-trail [aria-label="breadcrumb"] :is(ol, ul) { flex-wrap: nowrap; }
    .be-topbar-trail :is(li, span, a) { min-width: 0; }
    .be-topbar-trail li { display: inline-flex; flex: 0 1 auto; align-items: center; overflow: hidden; }
    .be-topbar-trail a { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; overflow: hidden; color: var(--ui-muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .be-topbar-trail a > span { overflow: hidden; text-overflow: ellipsis; }
    .be-topbar-trail a:hover { color: var(--ui-primary); }
    .be-topbar-trail [aria-current="page"] { overflow: hidden; color: var(--ui-ink); font-family: var(--ui-display); font-size: 16px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .be-topbar-trail :is(i, svg) { width: 18px; flex: 0 0 18px; color: var(--ui-primary); text-align: center; }
    .be-topbar-trail li + li::before { margin-right: 1px; color: var(--ui-line-strong); content: "/"; font-size: 12px; }
    .be-topbar-trail [aria-current="page"] { display: inline-flex; width: 18px; min-width: 18px; align-items: center; overflow: hidden; font-size: 0; }
    .be-topbar-trail [aria-current="page"] :is(i, svg) { font-size: 14px; }
    .be-topbar-trail [aria-current="page"] > span { display: none; }
    .be-topbar-trail [aria-current="page"]:not(:has(i, svg)) { display: none; width: 0; min-width: 0; }
    .be-topbar-actions { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 7px; margin-left: auto; }
    .be-mobile-nav { display: none !important; }
    .be-credit { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 10px; color: var(--ui-ink); background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: 19px; }
    .be-credit i { color: var(--ui-accent); }
    .be-tenant-switcher { display: grid; min-width: 0; max-width: 240px; min-height: 40px; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; color: var(--ui-ink); text-align: left; background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: 20px; box-shadow: var(--ui-shadow-xs); cursor: pointer; }
    .be-tenant-switcher:hover { background: var(--ui-control-hover); border-color: var(--ui-line-strong); }
    .be-tenant-switcher.is-static { cursor: default; }
    .be-tenant-mark { display: grid; width: 28px; height: 28px; place-items: center; color: var(--ui-primary); background: var(--ui-selection); border-radius: 50%; }
    .be-tenant-name { overflow: hidden; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .be-tenant-chevron { color: var(--ui-muted); font-size: 9px; }

    .be-main { min-width: 0; min-height: 100vh; padding-top: var(--ui-topbar); padding-left: var(--ui-rail); }
    .be-main-inner { width: min(100%, 1800px); min-height: calc(100vh - var(--ui-topbar)); margin: 0 auto; padding: 14px 18px 24px; }
    .be-page-footer { display: flex; min-height: 48px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 24px; padding: 12px 16px; color: var(--ui-muted); font-size: 11px; }
    .be-page-footer-brand { display: inline-flex; min-height: 26px; align-items: center; border-radius: 2px; }
    .be-page-footer-logos { display: inline-grid; width: 86px; height: 22px; place-items: center; }
    .be-page-footer-logo { display: block; width: 86px; height: 22px; object-fit: contain; }
    .be-page-footer-logo-dark { display: none; }
    html:is([data-appearance-mode="dark"], [data-effective-theme="dark"]) .be-page-footer-logo-light { display: none; }
    html:is([data-appearance-mode="dark"], [data-effective-theme="dark"]) .be-page-footer-logo-dark { display: block; }
    @media (prefers-color-scheme: dark) {
        html[data-appearance-mode="system"] .be-page-footer-logo-light { display: none; }
        html[data-appearance-mode="system"] .be-page-footer-logo-dark { display: block; }
    }

    .be-guest-workspace { min-height: 100vh; padding: 20px; }
    .be-guest-main { width: min(100%, 1040px); margin: 0 auto; }
    .app-env-dev .be-guest-main > .be-page-footer {
        margin-top: 64px;
        transform: translateY(-40px);
    }
    .app-env-dev .be-main-inner > .be-page-footer { margin-bottom: 40px; }
}

@layer components {
    .be-sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .be-button, .be-icon-button, .be-switch-button {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px 11px;
        color: var(--ui-ink);
        background: var(--ui-control);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius-sm);
        box-shadow: var(--ui-shadow-xs);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: color var(--ui-fast), background var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast), transform var(--ui-fast);
    }
    .be-button:hover, .be-icon-button:hover, .be-switch-button:hover { color: var(--ui-ink); background: var(--ui-control-hover); border-color: var(--ui-line-strong); box-shadow: var(--ui-shadow-sm); transform: translateY(-1px); }
    .be-button:active, .be-icon-button:active, .be-switch-button:active { transform: translateY(0); }
    .be-button[disabled], .be-icon-button[disabled] { opacity: .48; cursor: not-allowed; transform: none; }
    .be-button-primary, .be-button[data-tone="primary"] { color: var(--ui-primary-ink); background: var(--ui-primary-action); border-color: transparent; }
    .be-button-danger, .be-button[data-tone="danger"] { color: #fff; background: var(--ui-danger); border-color: transparent; }
    .be-button-ghost { background: transparent; border-color: transparent; box-shadow: none; }
    .be-button-sm { min-height: 30px; padding: 5px 8px; font-size: 11px; }
    .be-button-lg { min-height: 44px; padding: 10px 15px; font-size: 14px; }
    .be-icon-button, .be-switch-button { width: 38px; min-width: 38px; padding: 0; border-radius: 50%; }

    input, select, textarea, .be-input, .be-select, .be-textarea {
        width: 100%;
        min-height: 38px;
        padding: 7px 10px;
        color: var(--ui-ink);
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius-sm);
        box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-secondary) 6%, transparent);
    }
    textarea { min-height: 96px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--ui-primary) 58%, var(--ui-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 15%, transparent); outline: 0; }
    input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; padding: 0; accent-color: var(--ui-primary); }
    label { color: var(--ui-ink); font-size: 12px; font-weight: 700; }
    .be-help, .form-text, small { color: var(--ui-muted); }
    .be-field-errors, .invalid-feedback { color: var(--ui-danger); font-size: 11px; }

    .be-panel, .be-card, .be-section, .be-surface {
        position: relative;
        min-width: 0;
        color: var(--ui-ink);
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow-sm);
    }
    .be-card::before, .be-panel[data-accent]::before {
        position: absolute;
        top: -1px;
        right: -1px;
        left: -1px;
        height: 4px;
        background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent), var(--ui-secondary));
        border-radius: var(--ui-radius) var(--ui-radius) 0 0;
        content: "";
    }
    .be-panel-header, .be-card-header, .be-section-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--ui-elevated); border-bottom: 1px solid var(--ui-line); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
    .be-panel-body, .be-card-body, .be-section-body { padding: 14px; }
    .be-panel-footer, .be-card-footer { padding: 11px 14px; background: var(--ui-elevated); border-top: 1px solid var(--ui-line); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }

    .be-notice {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        padding: 10px 12px 10px 15px;
        color: var(--ui-ink);
        background: var(--ui-info-soft);
        border: 1px solid color-mix(in srgb, var(--ui-info) 30%, var(--ui-line));
        border-left: 4px solid var(--ui-info);
        border-radius: var(--ui-radius-sm);
    }
    .be-notice[data-tone="success"] { background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-line)); border-left-color: var(--ui-success); }
    .be-notice[data-tone="warning"] { background: var(--ui-warning-soft); border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-line)); border-left-color: var(--ui-warning); }
    .be-notice[data-tone="danger"], .be-notice[data-tone="error"] { background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-line)); border-left-color: var(--ui-danger); }
    .be-notice-close { width: 30px; min-width: 30px; min-height: 30px; }

    .be-menu { position: relative; }
    .be-menu-panel, .be-popover {
        position: absolute;
        z-index: 1220;
        top: calc(100% + 6px);
        right: 0;
        display: none;
        min-width: 210px;
        margin: 0;
        padding: 6px;
        color: var(--ui-ink);
        list-style: none;
        background: var(--ui-surface);
        border: 1px solid var(--ui-line-strong);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow);
    }
    .be-menu-panel.show, .be-popover.show, .be-popover.is-open { display: block; }
    .be-menu-item, .be-menu-option { display: flex; width: 100%; min-height: 36px; align-items: center; gap: 9px; padding: 7px 9px; color: var(--ui-ink); text-align: left; background: transparent; border: 0; border-radius: var(--ui-radius-sm); cursor: pointer; }
    .be-menu-item:hover, .be-menu-option:hover, .be-menu-item.active, .be-menu-option.is-active { color: var(--ui-ink); background: var(--ui-selection); }
    .be-menu-divider { margin: 5px 0; }

    .be-drawer {
        position: fixed;
        z-index: 1510;
        top: 50%;
        left: 50%;
        display: none;
        width: min(780px, calc(100vw - 36px));
        max-height: min(720px, calc(100vh - 36px));
        overflow: auto;
        color: var(--ui-ink);
        background: var(--ui-surface);
        border: 1px solid var(--ui-line-strong);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow);
        transform: translate(-50%, -50%);
    }
    .be-drawer.is-open { display: block; }
    .be-drawer-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--ui-elevated); border-bottom: 1px solid var(--ui-line); }
    .be-drawer-title { margin: 0; }
    .be-drawer-search { display: none; }
    .be-nav-section { padding: 13px 15px 0; }
    .be-nav-section:last-of-type { padding-bottom: 15px; }
    .be-nav-section-title { margin: 0 0 8px; color: var(--ui-muted); font-size: 10px; text-transform: uppercase; }
    .be-nav-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .be-nav-item { display: grid; min-height: 82px; place-items: center; align-content: center; gap: 8px; padding: 12px; color: var(--ui-ink); text-align: center; background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
    .be-nav-item i { color: var(--ui-primary); font-size: 20px; }
    .be-nav-item:hover, .be-nav-item.is-active { color: var(--ui-ink); background: var(--ui-selection); border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-line)); transform: translateY(-1px); }

    .be-dialog, dialog, [data-ui-overlay="modal"] {
        color: var(--ui-ink);
    }
    dialog, .be-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
    dialog::backdrop { background: var(--ui-backdrop); }
    [data-ui-overlay="modal"] { position: fixed; z-index: 1520; inset: 0; display: none; place-items: center; padding: 16px; background: var(--ui-backdrop); }
    [data-ui-overlay="modal"].show { display: grid; }

    .be-page-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
    .be-page-controls-toolbar { justify-content: flex-end; }
    .be-page-toolbar-main, .be-page-toolbar-actions,
    .be-page-heading, .be-page-actions { display: flex; min-width: 0; align-items: center; gap: 8px; }
    .be-page-toolbar-actions, .be-page-actions { margin-left: auto; }
    .be-page-context { display: inline-flex; min-width: 0; max-width: 280px; align-items: center; gap: 7px; padding: 5px 9px; color: var(--ui-muted); background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: 999px; font-size: 11px; }
    .be-page-context-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .be-breadcrumb, .be-platform-breadcrumb, [aria-label="breadcrumb"] ol { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; color: var(--ui-muted); list-style: none; font-size: 11px; }
    .be-topbar-trail [aria-label="breadcrumb"] :is(ol, ul) { flex-wrap: nowrap; }
    .be-context-chip { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 5px 9px; color: var(--ui-ink); background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: 15px; }

    .be-command {
        position: fixed;
        z-index: 1540;
        inset: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(72px, 12vh, 130px) 18px 24px;
        background: color-mix(in srgb, var(--ui-secondary) 54%, transparent);
    }
    .be-command.is-open { display: flex; }
    .be-command-shell { display: flex; width: min(820px, 100%); max-height: min(690px, calc(100vh - 110px)); flex-direction: column; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
    .be-command-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px 10px; background: var(--ui-elevated); }
    .be-command-heading h2 { margin: 2px 0 0; font: 700 18px/1.25 var(--ui-display); }
    .be-command-eyebrow { color: var(--ui-primary-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .be-command-shortcut { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; color: var(--ui-muted); background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); font-size: 10px; font-weight: 800; }
    .be-command-input-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; background: var(--ui-elevated); border-bottom: 1px solid var(--ui-line); }
    .be-command-input-wrap > i { color: var(--ui-primary); font-size: 18px; }
    .be-command-input-wrap input { min-height: 46px; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 18px; }
    .be-command-input-wrap input:focus { box-shadow: none; }
    .be-command-hint { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 16px; color: var(--ui-muted); background: var(--ui-elevated); border-bottom: 1px solid var(--ui-line); font-size: 10px; }
    .be-command-results { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 8px; }
    .be-command-group { margin: 0 0 8px; }
    .be-command-group-title { padding: 6px 8px; color: var(--ui-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .be-command-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 7px 9px; color: var(--ui-ink); border-radius: var(--ui-radius-sm); }
    button.be-command-result { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
    .be-command-group-items { display: grid; gap: 2px; }
    .be-command-result-avatar { position: relative; display: grid; width: 34px; height: 34px; overflow: hidden; place-items: center; color: var(--ui-primary); line-height: 1; background: var(--ui-selection); border: 1px solid color-mix(in srgb, var(--ui-primary) 18%, var(--ui-line)); border-radius: 50%; }
    .be-command-result-avatar > :is(i, img) { grid-area: 1 / 1; }
    .be-command-result-avatar > i { display: grid; width: 1em; height: 1em; place-items: center; line-height: 1; }
    .be-command-result-avatar > i::before { display: block; width: 1em; line-height: 1; text-align: center; }
    .be-command-result-avatar > img { z-index: 1; width: 100%; height: 100%; object-fit: cover; background: var(--ui-surface); }
    .be-command-result > i::before { display: block; line-height: 1; }
    .be-command-result-copy { display: grid; min-width: 0; gap: 2px; }
    .be-command-result-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ui-ink); font-weight: 700; }
    .be-command-result-description { display: -webkit-box; overflow: hidden; color: var(--ui-muted); font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
    .be-command-result-state { display: inline-flex; min-height: 24px; align-items: center; gap: 5px; padding: 3px 7px; color: var(--ui-success-text); background: var(--ui-success-soft); border: 1px solid color-mix(in srgb, var(--ui-success) 28%, var(--ui-line)); border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .be-command-result.is-selected, .be-command-result:hover { color: var(--ui-ink); background: var(--ui-selection); }
    .be-command-result-meta { color: var(--ui-muted); font-size: 10px; }
    .be-command-empty, .be-command-loading, .be-command-error { padding: 28px; color: var(--ui-muted); text-align: center; }
    .be-command-help { display: flex; min-height: 38px; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 14px; padding: 7px 16px; color: var(--ui-muted); background: var(--ui-elevated); border-top: 1px solid var(--ui-line); font-size: 10px; }
    .be-command-help span { display: inline-flex; align-items: center; gap: 4px; }
    .be-command-help kbd { min-width: 20px; padding: 2px 5px; color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 4px; box-shadow: var(--ui-shadow-xs); font: 700 10px/1.4 var(--ui-mono); text-align: center; }

    .be-table-wrap, .beai-grid-surface { min-width: 0; overflow: auto; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
    .be-table, .beai-grid-table, table[data-responsive-table] { width: 100%; color: var(--ui-ink); background: var(--ui-surface); }
    .be-table th, .beai-grid-table th, table[data-responsive-table] th { padding: 10px 11px; color: var(--ui-muted); background: var(--ui-elevated); border-bottom: 1px solid var(--ui-line-strong); font-size: 10px; font-weight: 800; text-align: left; text-transform: none; white-space: nowrap; }
    .be-table td, .beai-grid-table td, table[data-responsive-table] td { padding: 10px 11px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
    .be-table tbody tr:last-child td, .beai-grid-table tbody tr:last-child td, table[data-responsive-table] tbody tr:last-child td { border-bottom: 0; }
    .be-table tbody tr:hover, .beai-grid-table tbody tr:hover, table[data-responsive-table] tbody tr:hover { background: var(--ui-control-hover); }
}

@layer patterns {
    .be-stat-card {
        position: relative;
        min-height: 132px;
        overflow: hidden;
        padding: 16px;
        color: var(--ui-ink);
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow-sm);
    }
    .be-stat-card::before { position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent), var(--ui-secondary)); content: ""; }
    .be-stat-card::after { position: absolute; right: -24px; bottom: -38px; width: 118px; height: 90px; background: color-mix(in srgb, var(--ui-primary) 10%, transparent); border: 24px solid color-mix(in srgb, var(--ui-accent) 8%, transparent); border-radius: 50% 50% 0 50%; content: ""; pointer-events: none; }
    .be-stat-label { color: var(--ui-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .be-stat-value { margin-top: 10px; font-family: var(--ui-display); font-size: 27px; font-weight: 700; line-height: 1.1; }
    .be-stat-note { margin-top: 9px; color: var(--ui-muted); font-size: 11px; }

    .be-empty-state { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 9px; padding: 24px; color: var(--ui-muted); text-align: center; background: var(--ui-surface); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius); }
    .be-empty-state::before { width: 112px; height: 72px; background: url("../images/ui/beai-signal-document-pattern.webp") center/cover; border-radius: var(--ui-radius); content: ""; filter: grayscale(1); opacity: .35; }

    .be-status, .be-badge, .be-chip { display: inline-flex; min-height: 24px; align-items: center; gap: 5px; padding: 3px 7px; color: var(--ui-ink); background: var(--ui-control); border: 1px solid var(--ui-line); border-radius: 12px; font-size: 10px; font-weight: 700; }
    [data-tone="success"].be-status, [data-tone="success"].be-badge { color: var(--ui-success); background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-line)); }
    [data-tone="warning"].be-status, [data-tone="warning"].be-badge { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: color-mix(in srgb, var(--ui-warning) 28%, var(--ui-line)); }
    [data-tone="danger"].be-status, [data-tone="danger"].be-badge { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 28%, var(--ui-line)); }
}

@layer responsive {
    @media (max-width: 900px) {
        :root { --ui-rail: 82px; }
        .be-main-inner { padding: 12px 12px 22px; }
        .be-topbar { padding-inline: 12px; }
        .be-topbar-title { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
        .be-topbar-trail { width: 100%; flex: 0 1 auto; }
        .be-topbar-trail a { min-height: 24px; font-size: 10px; }
        .be-topbar-name { width: 100%; font-size: 14px; }
        .be-topbar-kicker { display: none; }
        .be-credit strong { display: none; }
        .be-tenant-switcher { max-width: 190px; }
        .be-nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 680px) {
        :root { --ui-rail: 74px; --ui-topbar: 58px; }
        .be-rail { padding-inline: 5px; }
        .be-rail-link, .be-rail-button, .be-rail-search { width: 54px; height: 48px; flex-basis: 48px; }
        .be-rail-icon { width: 40px; height: 40px; }
        .be-rail-link:hover > .be-rail-icon, .be-rail-button:hover > .be-rail-icon, .be-rail-search:hover > .be-rail-icon,
        .be-rail-link:focus-visible > .be-rail-icon, .be-rail-button:focus-visible > .be-rail-icon, .be-rail-search:focus-visible > .be-rail-icon {
            transform: scale(1.35) translateX(5px);
        }
        .be-topbar-title { max-width: 46vw; }
        .be-topbar-trail a { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
        .be-page-toolbar { align-items: flex-start; }
        .be-page-toolbar, .be-page-toolbar-actions, .be-page-heading, .be-page-actions { flex-wrap: wrap; }
        .be-page-toolbar-actions, .be-page-actions { width: 100%; margin-left: 0; }
        .be-drawer { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
        .be-nav-list { grid-template-columns: minmax(0, 1fr); }
        .be-command { padding: 42px 9px 12px; }
        .be-command-shell { max-height: calc(100vh - 54px); }
        .be-command-result { grid-template-columns: 32px minmax(0, 1fr); }
        .be-command-result-meta { grid-column: 2; }
        .be-command-result-state { grid-column: 2; width: max-content; }
    }

    @media (max-height: 620px) {
        .be-rail { padding-block: 5px; }
        .be-rail-nav { gap: 1px; }
        .be-rail-divider { margin-block: 0; }
        .be-rail-link, .be-rail-button, .be-rail-search { width: 41px; height: 41px; flex-basis: 41px; }
        .be-rail-icon { width: 35px; height: 35px; font-size: 14px; }
    }

    @media (max-width: 820px) {
        .be-credit { display: none; }
        .be-topbar-actions > .be-menu { flex: 0 0 auto; }
        table[data-responsive-table].is-card-table,
        table[data-responsive-table].is-card-table tbody,
        table[data-responsive-table].is-card-table tr,
        table[data-responsive-table].is-card-table td,
        .beai-grid-table.is-card-table,
        .beai-grid-table.is-card-table tbody,
        .beai-grid-table.is-card-table tr,
        .beai-grid-table.is-card-table td { display: block; width: 100%; }
        table[data-responsive-table].is-card-table thead,
        .beai-grid-table.is-card-table thead { display: none; }
        table[data-responsive-table].is-card-table tbody,
        .beai-grid-table.is-card-table tbody { display: grid; gap: 9px; padding: 9px; background: var(--ui-canvas); }
        table[data-responsive-table].is-card-table tr,
        .beai-grid-table.is-card-table tr { overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-xs); }
        table[data-responsive-table].is-card-table td,
        .beai-grid-table.is-card-table td { display: grid; grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--ui-line); text-align: right; }
        table[data-responsive-table].is-card-table td::before,
        .beai-grid-table.is-card-table td::before { color: var(--ui-muted); content: attr(data-label); font-size: 9px; font-weight: 800; text-align: left; text-transform: none; }
        table[data-responsive-table].is-card-table td:last-child,
        .beai-grid-table.is-card-table td:last-child { border-bottom: 0; }
        table[data-responsive-table].is-card-table td[data-priority="primary"],
        .beai-grid-table.is-card-table td[data-priority="primary"] { display: block; padding: 11px; text-align: left; background: var(--ui-elevated); border-top: 3px solid var(--ui-primary); }
        table[data-responsive-table].is-card-table td[data-priority="primary"]::before,
        .beai-grid-table.is-card-table td[data-priority="primary"]::before { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
        .be-rail-link:hover > .be-rail-icon, .be-rail-button:hover > .be-rail-icon, .be-rail-search:hover > .be-rail-icon,
        .be-rail-link:focus-visible > .be-rail-icon, .be-rail-button:focus-visible > .be-rail-icon, .be-rail-search:focus-visible > .be-rail-icon { transform: none; }
    }
}

@layer utilities {
    .be-u-flex { display: flex !important; }
    .be-u-grid { display: grid !important; }
    .be-u-block { display: block !important; }
    .be-u-inline-flex { display: inline-flex !important; }
    .be-u-wrap { flex-wrap: wrap !important; }
    .be-u-items-center { align-items: center !important; }
    .be-u-items-start { align-items: flex-start !important; }
    .be-u-justify-between { justify-content: space-between !important; }
    .be-u-justify-end { justify-content: flex-end !important; }
    .be-u-gap-1 { gap: 4px !important; }
    .be-u-gap-2 { gap: 8px !important; }
    .be-u-gap-3 { gap: 12px !important; }
    .be-u-mb-0 { margin-bottom: 0 !important; }
    .be-u-mb-2 { margin-bottom: 8px !important; }
    .be-u-mb-3 { margin-bottom: 12px !important; }
    .be-u-mt-2 { margin-top: 8px !important; }
    .be-u-px-2 { padding-inline: 8px !important; }
    .be-u-py-2 { padding-block: 8px !important; }
    .be-u-small { font-size: 11px !important; }
    .be-u-muted { color: var(--ui-muted) !important; }
    .be-u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .be-u-text-center { text-align: center !important; }
    .be-u-text-end { text-align: right !important; }
    .be-u-w-full { width: 100% !important; }
}