/* ZBit.UI — the shared Z-bit design system.
   Dark bands with a signal-green accent, light content sections, monospace details.
   Fonts: Rubik (headings), Roboto (body), JetBrains Mono (code and labels).

   Everything is in cascade layers, so an app's own (unlayered) CSS always wins without !important,
   and Bootstrap or Blazorise styles in the same page win over the base element styles here.
   Classes are prefixed zb- so they never collide with another framework's .card, .table or .button.

   Components read the semantic tokens (--zb-bg, --zb-text, --zb-accent, ...). .zb-dark redefines them,
   so any component works on a dark band without a dark variant. Apps re-theme by overriding tokens. */

@layer zb.tokens, zb.base, zb.layout, zb.components, zb.shell;

@layer zb.tokens {
    :root {
        /* Palette: dark surfaces */
        --zb-night: #0b1016;
        --zb-night-2: #111923;
        --zb-night-3: #17212d;
        --zb-night-line: #243243;
        --zb-on-night: #e6edf3;
        --zb-on-night-muted: #9aabbb;
        --zb-signal: #3ddc97;           /* accent on dark */
        --zb-signal-hover: #64e7ad;

        /* Palette: light surfaces */
        --zb-paper: #ffffff;
        --zb-paper-2: #f4f6f8;
        --zb-line: #e1e5ea;
        --zb-line-strong: #c5ccd4;
        --zb-ink: #0f1419;
        --zb-ink-muted: #56606b;
        --zb-link: #0b7a54;             /* accent on light, 5:1 on white */
        --zb-link-tint: rgba(11, 122, 84, 0.09);

        /* Status */
        --zb-ok: var(--zb-link);
        --zb-ok-bg: #eef7f2;
        --zb-ok-line: #b7e4cc;
        --zb-warn: #8a4a12;
        --zb-warn-bg: #fdf3ea;
        --zb-warn-line: #f0c9a8;
        --zb-danger: #9b2c1f;
        --zb-danger-bg: #fdf0ee;
        --zb-danger-line: #f2c4bc;

        /* Syntax colors (code on dark) */
        --zb-syn-muted: var(--zb-on-night-muted);
        --zb-syn-accent: var(--zb-signal);
        --zb-syn-type: #7cc4ff;
        --zb-syn-value: #c9d4de;

        /* Shape, size, type */
        --zb-radius: 10px;
        --zb-radius-sm: 8px;
        --zb-max: 1112px;               /* content width; the gutter sits outside it */
        --zb-gutter: clamp(20px, 5vw, 64px);
        --zb-section-space: 80px;
        --zb-header-height: 68px;
        --zb-shadow-raised: 0 24px 60px rgba(0, 0, 0, 0.45);
        --zb-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
        --zb-font-head: "Rubik", var(--zb-font-body);
        --zb-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

        /* Semantic tokens, light tone */
        --zb-bg: var(--zb-paper);
        --zb-bg-raised: var(--zb-paper);
        --zb-bg-sunken: var(--zb-paper-2);
        --zb-text: var(--zb-ink);
        --zb-text-muted: var(--zb-ink-muted);
        --zb-border: var(--zb-line);
        --zb-border-strong: var(--zb-line-strong);
        --zb-accent: var(--zb-link);
        --zb-focus: var(--zb-signal);
        --zb-primary-bg: var(--zb-ink);
        --zb-primary-text: var(--zb-paper);
        --zb-primary-hover: var(--zb-link);
    }

    .zb-dark {
        --zb-bg: var(--zb-night);
        --zb-bg-raised: var(--zb-night-2);
        --zb-bg-sunken: var(--zb-night-3);
        --zb-text: var(--zb-on-night);
        --zb-text-muted: var(--zb-on-night-muted);
        --zb-border: var(--zb-night-line);
        --zb-border-strong: var(--zb-night-line);
        --zb-accent: var(--zb-signal);
        --zb-primary-bg: var(--zb-signal);
        --zb-primary-text: var(--zb-night);
        --zb-primary-hover: var(--zb-signal-hover);
    }

    @media (max-width: 600px) {
        :root { --zb-section-space: 56px; }
    }
}

@layer zb.base {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
        margin: 0;
        font-family: var(--zb-font-body);
        font-size: 17px;
        line-height: 1.65;
        color: var(--zb-text);
        background: var(--zb-bg);
    }
    img { max-width: 100%; height: auto; }
    [hidden] { display: none !important; }
    a { color: var(--zb-accent); text-underline-offset: 3px; }
    a:hover { text-decoration-thickness: 2px; }
    :focus-visible { outline: 2px solid var(--zb-focus); outline-offset: 3px; border-radius: 4px; }

    h1, h2, h3, h4 { font-family: var(--zb-font-head); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
    h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; }
    h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; }
    h3 { font-size: 1.2rem; font-weight: 500; }
    p { margin: 0 0 1em; }
    code, pre { font-family: var(--zb-font-mono); }
    code { font-size: 0.88em; background: var(--zb-bg-sunken); border: 1px solid var(--zb-border); border-radius: 5px; padding: 0.05em 0.35em; }

    @media (max-width: 600px) {
        body { font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
        * { transition: none !important; scroll-behavior: auto !important; }
    }
}

@layer zb.layout {
    /* Tone: any element can switch to the dark tone; text and paragraphs follow. */
    .zb-dark { background: var(--zb-bg); color: var(--zb-text); }
    .zb-dark p { color: var(--zb-text-muted); }
    .zb-dark code { color: var(--zb-text); }

    .zb-container { max-width: calc(var(--zb-max) + 2 * var(--zb-gutter)); margin-inline: auto; padding-inline: var(--zb-gutter); }

    /* Sections: the vertical rhythm of every page */
    .zb-section { padding-block: var(--zb-section-space); }
    .zb-section--flush-bottom { padding-bottom: 0; }
    .zb-section--alt { background: var(--zb-bg-sunken); border-block: 1px solid var(--zb-border); }
    .zb-section-head { margin-bottom: 40px; }
    .zb-section-head p { color: var(--zb-text-muted); font-size: 1.08rem; }

    /* Hero: the dark band that opens a page */
    .zb-hero { position: relative; overflow: hidden; padding-block: 96px 88px; }
    .zb-hero::before {
        /* faint engineering grid */
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background-image:
            linear-gradient(var(--zb-night-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--zb-night-line) 1px, transparent 1px);
        background-size: 48px 48px;
        opacity: 0.35;
        mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
    }
    .zb-hero > .zb-container { position: relative; }
    .zb-hero--compact { padding-block: 72px 64px; }
    .zb-lead { font-size: 1.2rem; color: var(--zb-text-muted); max-width: 54ch; }

    /* Split: text beside a visual, stacking below 900px */
    .zb-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }

    /* Grids of cards or tiles. Every auto-fit minimum is capped at 100% so a column never outgrows a narrow phone. */
    .zb-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(var(--zb-grid-min, 260px), 100%), 1fr)); }
    .zb-grid--2 { --zb-grid-min: 320px; }
    .zb-grid--3 { --zb-grid-min: 300px; }

    /* Media: an image beside text */
    .zb-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
    .zb-media > :first-child img, .zb-media > img { display: block; }
    .zb-media--boxed { background: var(--zb-bg-raised); border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 32px; }
    .zb-media--boxed p { color: var(--zb-text-muted); margin: 0 0 12px; font-size: 1.05rem; }

    /* Long-form text */
    .zb-prose { max-width: 76ch; }
    .zb-prose h2 { margin-top: 1.8em; font-size: 1.5rem; }
    .zb-prose h3 { margin-top: 1.4em; }
    .zb-prose ul { padding-left: 1.2em; }
    .zb-prose li { margin-bottom: 6px; }
    .zb-prose .zb-table-wrap { margin-bottom: 16px; }

    /* Call-to-action band that closes a page */
    .zb-cta { padding-block: 72px; }
    .zb-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
    .zb-cta__inner h2 { margin-bottom: 6px; }
    .zb-cta__inner p { margin: 0; max-width: 56ch; }
    .zb-cta__inner > .zb-actions { margin-top: 0; }

    .zb-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
    /* In a form or callout the container already spaces its children. */
    .zb-form .zb-actions, .zb-callout .zb-actions { margin-top: 0; }

    /* Text helpers */
    .zb-muted { color: var(--zb-text-muted); }
    .zb-note { color: var(--zb-text-muted); margin-top: 16px; }
    .zb-fine { color: var(--zb-text-muted); font-size: 0.95rem; max-width: 80ch; }
    .zb-mono { font-family: var(--zb-font-mono); }

    @media (max-width: 900px) {
        .zb-split, .zb-media { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 600px) {
        .zb-hero { padding-block: 64px 56px; }
    }
}

@layer zb.components {
    /* Buttons. primary follows the tone (ink on light, signal on dark); accent is always signal green. */
    .zb-button {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 20px; border-radius: var(--zb-radius-sm); border: 1px solid transparent;
        font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .zb-button:disabled { opacity: 0.6; cursor: not-allowed; }
    .zb-button[aria-busy="true"] { cursor: progress; }
    .zb-button--primary { background: var(--zb-primary-bg); color: var(--zb-primary-text); }
    .zb-button--primary:hover:not(:disabled) { background: var(--zb-primary-hover); color: var(--zb-primary-text); }
    .zb-button--secondary { border-color: var(--zb-border); color: var(--zb-text); background: transparent; }
    .zb-button--secondary:hover:not(:disabled) { border-color: var(--zb-accent); color: var(--zb-text); }
    .zb-button--accent { background: var(--zb-signal); color: var(--zb-night); }
    .zb-button--accent:hover:not(:disabled) { background: var(--zb-signal-hover); color: var(--zb-night); }
    .zb-button--sm { padding: 8px 14px; font-size: 0.97rem; }

    .zb-link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--zb-accent); text-decoration: underline; cursor: pointer; }

    /* Cards */
    .zb-card {
        position: relative; background: var(--zb-bg-raised); border: 1px solid var(--zb-border); border-radius: var(--zb-radius);
        padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px;
        transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .zb-card:hover { border-color: var(--zb-border-strong); box-shadow: 0 10px 30px rgba(15, 20, 25, 0.07); }
    .zb-card p { color: var(--zb-text-muted); margin-bottom: 0.6em; }
    .zb-card ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--zb-text-muted); }
    .zb-card ul li { margin-bottom: 4px; }
    .zb-card__link { margin-top: auto; padding-top: 10px; font-weight: 500; text-decoration: none; }
    .zb-card__link::after { content: " \2192"; }
    .zb-card__link--stretch::before { content: ""; position: absolute; inset: 0; border-radius: var(--zb-radius); }
    .zb-card:has(.zb-card__link--stretch):hover { transform: translateY(-2px); }
    /* An arrow link outside a card */
    .zb-arrow-link { font-weight: 500; text-decoration: none; }
    .zb-arrow-link::after { content: " \2192"; }

    /* Tags and status chips */
    .zb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
    .zb-tag {
        font-family: var(--zb-font-mono); font-size: 0.72rem; line-height: 1.65; padding: 3px 8px; border-radius: 999px;
        background: var(--zb-bg-sunken); border: 1px solid var(--zb-border); color: var(--zb-text-muted);
    }
    .zb-tag--ok { border-color: var(--zb-ok-line); background: var(--zb-ok-bg); color: var(--zb-ok); }
    .zb-tag--warn { border-color: var(--zb-warn-line); background: var(--zb-warn-bg); color: var(--zb-warn); }
    .zb-tag--danger { border-color: var(--zb-danger-line); background: var(--zb-danger-bg); color: var(--zb-danger); }

    /* Check list: feature bullets as tiles */
    .zb-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
    .zb-checks li { position: relative; padding: 16px 18px 16px 46px; background: var(--zb-bg-raised); border: 1px solid var(--zb-border); border-radius: var(--zb-radius); color: var(--zb-text-muted); }
    .zb-checks li::before { content: ""; position: absolute; left: 20px; top: 1.45em; width: 11px; height: 6px; border-left: 2px solid var(--zb-accent); border-bottom: 2px solid var(--zb-accent); transform: rotate(-45deg); }
    .zb-checks strong { color: var(--zb-text); font-weight: 500; }

    /* Numbered steps */
    .zb-steps { list-style: none; counter-reset: zb-step; margin: 0 0 24px; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
    .zb-steps li { counter-increment: zb-step; position: relative; background: var(--zb-bg-raised); border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 22px 22px 18px 64px; }
    .zb-steps li::before { content: counter(zb-step); position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--zb-link); color: #fff; font-family: var(--zb-font-mono); font-weight: 700; font-size: 0.9rem; }
    .zb-steps h3 { margin-bottom: 6px; }
    .zb-steps p { color: var(--zb-text-muted); margin: 0; }

    /* Timeline */
    .zb-timeline { list-style: none; margin: 0; padding: 0; max-width: 74ch; position: relative; }
    .zb-timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--zb-border), var(--zb-link)); }
    .zb-timeline li { position: relative; padding: 0 0 34px 40px; color: var(--zb-text-muted); }
    .zb-timeline li:last-child { padding-bottom: 0; }
    .zb-timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--zb-bg); border: 2px solid var(--zb-link); box-sizing: border-box; }
    .zb-timeline li.zb-timeline__now::before { background: var(--zb-link); box-shadow: 0 0 0 5px rgba(11, 122, 84, 0.15); }
    .zb-timeline__phase { display: block; font-family: var(--zb-font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zb-link); margin-bottom: 2px; }
    .zb-timeline strong { display: block; color: var(--zb-text); font-family: var(--zb-font-head); font-weight: 500; font-size: 1.12rem; margin-bottom: 4px; }

    /* Tables */
    .zb-table-wrap { overflow-x: auto; border: 1px solid var(--zb-border); border-radius: var(--zb-radius); background: var(--zb-bg-raised); }
    .zb-table-wrap table { border-collapse: collapse; width: 100%; }
    .zb-table-wrap th, .zb-table-wrap td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--zb-border); }
    .zb-table-wrap tr:last-child td { border-bottom: 0; }
    .zb-table-wrap th { font-family: var(--zb-font-mono); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zb-text-muted); background: var(--zb-bg-sunken); }
    .zb-table-wrap td:first-child { white-space: nowrap; }
    .zb-table-wrap td code { background: none; border: 0; padding: 0; color: var(--zb-link); font-weight: 500; }

    /* Code: a block on any tone, a pair side by side, and a terminal window */
    .zb-code { background: var(--zb-night); color: var(--zb-on-night); border-radius: var(--zb-radius); padding: 18px 20px; overflow-x: auto; font-size: 0.9rem; margin: 0 0 16px; border: 1px solid var(--zb-night-line); }
    .zb-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
    .zb-code-pair { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin-bottom: 16px; }
    .zb-code-pair .zb-code { margin: 0; line-height: 1.6; font-size: 0.84rem; }
    .zb-syn-muted { color: var(--zb-syn-muted); }
    .zb-syn-accent { color: var(--zb-syn-accent); }
    .zb-syn-type { color: var(--zb-syn-type); }
    .zb-syn-value { color: var(--zb-syn-value); }
    .zb-syn-prompt { color: var(--zb-syn-accent); user-select: none; }

    .zb-terminal {
        background: var(--zb-night-2); border: 1px solid var(--zb-night-line); border-radius: var(--zb-radius);
        box-shadow: var(--zb-shadow-raised); overflow: hidden; min-width: 0;
    }
    .zb-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--zb-night-line); background: var(--zb-night-3); }
    .zb-terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--zb-night-line); }
    .zb-terminal__title { margin-left: 8px; font-family: var(--zb-font-mono); font-size: 0.78rem; color: var(--zb-on-night-muted); }
    .zb-terminal pre { margin: 0; padding: 18px 18px 20px; overflow-x: auto; font-size: 0.8rem; line-height: 1.9; color: var(--zb-on-night); }
    .zb-terminal__note { display: block; padding: 0 18px 14px; font-family: var(--zb-font-mono); font-size: 0.72rem; color: var(--zb-on-night-muted); }

    /* Screenshot in a frame */
    .zb-shot { margin: 0; min-width: 0; }
    .zb-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--zb-night-line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

    /* Pricing */
    .zb-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: stretch; margin-bottom: 28px; }
    .zb-price-card { border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 28px; background: var(--zb-bg-raised); display: flex; flex-direction: column; }
    .zb-price-card--featured { border: 2px solid var(--zb-link); box-shadow: 0 14px 40px rgba(11, 122, 84, 0.12); }
    .zb-price { font-family: var(--zb-font-head); font-size: 2.2rem; font-weight: 700; line-height: 1; margin: 8px 0 4px; }
    .zb-price small { font-size: 0.95rem; font-weight: 400; color: var(--zb-text-muted); }
    .zb-price-card > .zb-button { margin-top: auto; align-self: flex-start; }
    .zb-terms { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 18px 0; font-size: 0.97rem; }
    .zb-terms dt { font-weight: 500; }
    .zb-terms dd { margin: 0; color: var(--zb-text-muted); }

    /* Callout: a boxed message with an accent edge (sign-in prompts, notices) */
    .zb-callout {
        margin: 0 0 28px; padding: 22px 24px; border: 1px solid var(--zb-border); border-left: 4px solid var(--zb-link);
        border-radius: var(--zb-radius); background: var(--zb-bg-sunken);
    }
    .zb-callout h2 { font-size: 1.3rem; margin: 0 0 8px; }
    .zb-callout p { margin: 0 0 16px; }
    .zb-callout > :last-child { margin-bottom: 0; }
    .zb-alert { border-radius: var(--zb-radius-sm); padding: 10px 14px; border: 1px solid var(--zb-border); }
    .zb-alert--danger { color: var(--zb-danger); background: var(--zb-danger-bg); border-color: var(--zb-danger-line); }
    .zb-alert--ok { color: var(--zb-ok); background: var(--zb-ok-bg); border-color: var(--zb-ok-line); }

    /* Disclosure: <details> with an accent summary, optionally boxed */
    .zb-disclosure summary { cursor: pointer; color: var(--zb-accent); font-weight: 500; }
    .zb-disclosure[open] > summary { margin-bottom: 12px; }
    .zb-disclosure--boxed { border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 14px 18px; }
    .zb-disclosure--boxed[open] { display: flex; flex-direction: column; gap: 16px; }
    .zb-disclosure--boxed[open] > summary { margin-bottom: 0; }

    /* Forms */
    .zb-form { display: flex; flex-direction: column; gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
    .zb-form:disabled { opacity: 0.5; }
    .zb-field { display: flex; flex-direction: column; gap: 6px; }
    .zb-field > span { font-weight: 500; }
    .zb-field em, .zb-field small, .zb-check small { font-style: normal; font-weight: 400; color: var(--zb-text-muted); font-size: 0.88rem; }
    .zb-field textarea, .zb-field input, .zb-field select {
        font: inherit; color: var(--zb-text); background: var(--zb-bg-raised); border: 1px solid var(--zb-border); border-radius: var(--zb-radius-sm);
        padding: 10px 12px; width: 100%; resize: vertical;
    }
    .zb-field input { font-family: var(--zb-font-mono); font-size: 0.9rem; }
    .zb-field textarea:focus, .zb-field input:focus, .zb-field select:focus { outline: 2px solid var(--zb-focus); outline-offset: 1px; border-color: transparent; }
    .zb-check { display: flex; gap: 10px; align-items: flex-start; }
    .zb-check input { margin-top: 0.35em; accent-color: var(--zb-link); }
    .zb-check small { display: block; }

    /* File drop zone: a <label> around a file input. Script adds .zb-drop--dragging and .zb-drop--filled. */
    .zb-drop {
        position: relative; display: flex; flex-direction: column; gap: 4px; padding: 28px; border: 1.5px dashed var(--zb-border-strong); border-radius: var(--zb-radius);
        background: var(--zb-bg-sunken); cursor: pointer; transition: border-color 0.15s, background 0.15s;
    }
    .zb-drop:hover, .zb-drop--dragging { border-color: var(--zb-link); background: var(--zb-ok-bg); }
    .zb-drop--filled { border-style: solid; border-color: var(--zb-link); }
    .zb-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .zb-drop:focus-within { outline: 2px solid var(--zb-focus); outline-offset: 3px; }
    .zb-form:disabled .zb-drop { cursor: not-allowed; }
    .zb-drop__title { font-family: var(--zb-font-head); font-weight: 500; font-size: 1.1rem; overflow-wrap: anywhere; }
    .zb-drop__hint { color: var(--zb-text-muted); font-size: 0.92rem; }

    /* Working indicator: text followed by animated dots */
    .zb-pending { color: var(--zb-text-muted); }
    .zb-pending::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: zb-dots 1.2s steps(4) infinite; }
    @keyframes zb-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

    @media (max-width: 600px) {
        .zb-table-wrap td:first-child { white-space: normal; }
    }
}

@layer zb.shell {
    /* Site header: one row — logo, nav, actions. Below 640px the nav moves into the menu button's panel. */
    .zb-header { position: sticky; top: 0; z-index: 10; background: rgba(11, 16, 22, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--zb-night-line); }
    .zb-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--zb-header-height); }
    .zb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
    .zb-brand img { display: block; }
    .zb-header__nav { margin-left: auto; }
    .zb-header__actions { display: flex; align-items: center; gap: 8px; min-height: 32px; }
    .zb-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
    .zb-nav__link, .zb-nav__menu > summary {
        display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--zb-radius-sm);
        color: var(--zb-on-night-muted); text-decoration: none; font-weight: 500; font-size: 0.97rem; white-space: nowrap;
    }
    .zb-nav__link:hover, .zb-nav__menu > summary:hover, .zb-nav__menu[open] > summary { color: var(--zb-on-night); background: var(--zb-night-3); }
    .zb-nav__link[aria-current="page"], .zb-nav__menu > summary.zb-nav__link--active { color: var(--zb-on-night); box-shadow: inset 0 -2px 0 var(--zb-signal); border-radius: 0; }

    /* Dropdown menu (a <details>, so it works without script; zbit.js closes it on outside click or Escape) */
    .zb-nav__item--menu { position: relative; }
    .zb-nav__menu > summary { list-style: none; cursor: pointer; }
    .zb-nav__menu > summary::-webkit-details-marker { display: none; }
    .zb-nav__menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
    .zb-nav__menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
    .zb-menu {
        position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; list-style: none; margin: 0; padding: 8px;
        background: var(--zb-night-2); border: 1px solid var(--zb-night-line); border-radius: var(--zb-radius); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    }
    .zb-menu a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--zb-radius-sm); text-decoration: none; }
    .zb-menu a:hover, .zb-menu a[aria-current="page"] { background: var(--zb-night-3); }
    .zb-menu__name { color: var(--zb-on-night); font-weight: 500; }
    .zb-menu__summary { color: var(--zb-on-night-muted); font-size: 0.85rem; font-weight: 400; }
    .zb-menu__ext { color: var(--zb-on-night-muted); font-size: 0.85em; margin-left: 2px; }

    /* Mobile menu: a button that opens a full-width panel under the header bar */
    .zb-mobile-nav { display: none; }
    .zb-mobile-nav > summary {
        list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
        border-radius: var(--zb-radius-sm); color: var(--zb-on-night);
    }
    .zb-mobile-nav > summary::-webkit-details-marker { display: none; }
    .zb-mobile-nav > summary:hover, .zb-mobile-nav[open] > summary { background: var(--zb-night-3); }
    /* Three bars that turn into a cross when open */
    .zb-mobile-nav__icon, .zb-mobile-nav__icon::before, .zb-mobile-nav__icon::after {
        display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.15s, background 0.15s;
    }
    .zb-mobile-nav__icon { position: relative; }
    .zb-mobile-nav__icon::before, .zb-mobile-nav__icon::after { content: ""; position: absolute; left: 0; }
    .zb-mobile-nav__icon::before { top: -6px; }
    .zb-mobile-nav__icon::after { top: 6px; }
    .zb-mobile-nav[open] .zb-mobile-nav__icon { background: transparent; }
    .zb-mobile-nav[open] .zb-mobile-nav__icon::before { transform: translateY(6px) rotate(45deg); }
    .zb-mobile-nav[open] .zb-mobile-nav__icon::after { transform: translateY(-6px) rotate(-45deg); }
    .zb-mobile-nav__panel {
        position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--zb-gutter) 16px;
        max-height: calc(100vh - var(--zb-header-height)); overflow-y: auto;
        background: var(--zb-night-2); border-bottom: 1px solid var(--zb-night-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    }
    .zb-mobile-nav__list, .zb-mobile-nav__list ul { list-style: none; margin: 0; padding: 0; }
    .zb-mobile-nav__list > li { border-bottom: 1px solid var(--zb-night-line); }
    .zb-mobile-nav__list > li:last-child { border-bottom: 0; }
    .zb-mobile-nav__list a {
        display: flex; flex-direction: column; gap: 1px; padding: 12px 0 12px 14px; margin-left: -14px;
        border-left: 2px solid transparent; color: var(--zb-on-night); text-decoration: none; font-weight: 500; font-size: 1.05rem;
    }
    .zb-mobile-nav__list a[aria-current="page"] { border-left-color: var(--zb-signal); }
    .zb-mobile-nav__list ul a { padding-block: 8px; }
    .zb-mobile-nav__list ul li:last-child a { padding-bottom: 14px; }
    .zb-mobile-nav__list .zb-menu__name { font-size: 1rem; }
    .zb-mobile-nav__group {
        display: block; padding: 14px 0 4px; font-family: var(--zb-font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
        text-transform: uppercase; color: var(--zb-on-night-muted);
    }

    /* Site footer */
    .zb-footer { color: var(--zb-on-night-muted); border-top: 1px solid var(--zb-night-line); font-size: 0.95rem; }
    .zb-footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 36px; }
    .zb-footer__inner p { margin: 4px 0; }
    .zb-footer a { color: var(--zb-on-night); }
    .zb-footer strong { color: var(--zb-on-night); }
    .zb-footer__links { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; flex-wrap: wrap; }

    @media (max-width: 640px) {
        .zb-header__nav { display: none; }
        .zb-header__actions { margin-left: auto; }
        .zb-mobile-nav { display: block; }
    }
}