/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-fqa0fogsaa] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--tl-bg);
    color: var(--tl-text);
    font-family: var(--tl-font);
    min-height: 100vh;
}

main[b-fqa0fogsaa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

main[b-fqa0fogsaa]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Positioned, but deliberately without a z-index of its own.

   A z-index here turns the content area into a stacking context, and everything rendered inside it
   — including the onboarding dialog, which asks for 2000 — is then trapped below whatever sits
   outside at a higher number. That is how a sticky header ended up painted on top of a modal
   backdrop: the dialog could not climb past a header at 2, however large its own number was.
   Being above the tenant wash is already handled a level up, where `main` itself is lifted. */
main > *[b-fqa0fogsaa] {
    position: relative;
}

.sidebar[b-fqa0fogsaa] {
    background-color: var(--tl-bg-raised);
    /* Positioned so it can be lifted above the tenant wash. Becomes sticky at the width where it
       turns into a column of its own; see the media query below. */
    position: relative;
}

/* --- Tenant colour ------------------------------------------------------------------------
   Which workspace you are in has to be visible at a glance, because the cost of not noticing is
   booking or deleting in the wrong one.

   The wash is laid over the whole surface as a fixed pseudo-element rather than by redefining the
   colour tokens. Redefining --tl-bg from itself is circular, and threading a second set of base
   tokens through both themes would touch every palette rule; a translucent layer tints everything
   underneath it — including raised panels and cards — with one declaration, and stays correct in
   light and dark alike.

   Only the hue is stored per person and tenant. Saturation and lightness live here, so the palette
   can be retuned without a migration. */
.page[data-tenant-hue][b-fqa0fogsaa]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: hsl(var(--tenant-hue) 70% 50% / 0.07);
    pointer-events: none;
    z-index: 1;
}

/* The sidebar carries the same hue as a solid edge — the wash alone is deliberately faint, and a
   glance at the left border should be enough. */
.page[data-tenant-hue] .sidebar[b-fqa0fogsaa] {
    border-right: 3px solid hsl(var(--tenant-hue) 70% 55%);
}

/* Everything interactive sits above the wash. Without this the layer would swallow clicks in
   browsers that disagree about pointer-events on fixed pseudo-elements.

   Deliberately z-index only. This rule once also declared position: relative, which outranks
   `.sidebar { position: sticky }` on specificity and so quietly un-stuck the sidebar — but only in
   a foreign workspace, because only there does the attribute exist. The result was a sidebar that
   behaved differently depending on whose data was on screen, which is exactly the kind of
   difference nobody thinks to test. Both children carry their own positioning instead. */
.page[data-tenant-hue] > *[b-fqa0fogsaa] {
    z-index: 2;
}

.top-row[b-fqa0fogsaa] {
    background-color: var(--tl-bg-raised);
    border-bottom: 1px solid var(--tl-border);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.user-info[b-fqa0fogsaa] {
    display: flex;
    align-items: center;
}

.top-row-actions[b-fqa0fogsaa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-email[b-fqa0fogsaa] {
    font-family: var(--tl-font);
    font-size: 0.85rem;
    color: var(--tl-text-muted);
}

.logout-btn[b-fqa0fogsaa] {
    font-family: var(--tl-font);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--tl-text-muted);
    text-decoration: none;
    border: 1px solid var(--tl-border-light);
    border-radius: var(--tl-radius-pill);
    padding: 0.35rem 1rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
}

.logout-btn:hover[b-fqa0fogsaa] {
    color: var(--tl-text);
    border-color: var(--tl-text-muted);
    background-color: var(--tl-bg-hover);
    text-decoration: none;
}

.content[b-fqa0fogsaa] {
    padding: 1.5rem;
    flex: 1;
}

@media (max-width: 640.98px) {
    .top-row[b-fqa0fogsaa] {
        justify-content: space-between;
        padding: 0 1rem;
    }

    .content[b-fqa0fogsaa] {
        padding: 1rem;
    }
}

@media (min-width: 641px) {
    .page[b-fqa0fogsaa] {
        flex-direction: row;
    }

    /* The sidebar is a column of its own height, not a block that scrolls away with the page.
       Its own overflow keeps the navigation reachable however far down the content someone is,
       and overscroll-behavior stops a flick inside it from carrying on into the page behind. */
    .sidebar[b-fqa0fogsaa] {
        width: 260px;
        height: 100dvh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        border-right: 1px solid var(--tl-border);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Above the content, not merely before it. `main > *` gives every child the same z-index, and
       on a tie the later element paints on top — so the article was covering the header the moment
       the header started staying put. */
    .top-row[b-fqa0fogsaa] {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* With the foreign-workspace strip present the viewport effectively starts lower down. Without
       this the column would be exactly the strip's height too tall — running off the bottom of the
       screen, which is what makes it look cut off — and its first rows would sit underneath the
       strip rather than below it. */
    .page[data-tenant-bar] .sidebar[b-fqa0fogsaa] {
        top: var(--tl-tenant-bar);
        height: calc(100dvh - var(--tl-tenant-bar));
    }

    .page[data-tenant-bar] .top-row[b-fqa0fogsaa] {
        top: var(--tl-tenant-bar);
    }

    .content[b-fqa0fogsaa] {
        padding: 1.5rem 2rem;
    }
}

#blazor-error-ui[b-fqa0fogsaa] {
    color-scheme: dark;
    background: var(--tl-bg-raised);
    border-top: 2px solid #e85d5d;
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--tl-text);
    font-family: var(--tl-font);
}

    #blazor-error-ui .dismiss[b-fqa0fogsaa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: var(--tl-text-muted);
    }

    #blazor-error-ui .reload[b-fqa0fogsaa] {
        color: var(--tl-accent);
        text-decoration: none;
    }

    #blazor-error-ui .reload:hover[b-fqa0fogsaa] {
        text-decoration: underline;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Nav Header / Brand ── */
.nav-header[b-sxm0hwfc8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1rem;
    background-color: var(--tl-bg-raised);
    border-bottom: 1px solid var(--tl-border);
}

.nav-brand[b-sxm0hwfc8b] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-brand-icon[b-sxm0hwfc8b] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--tl-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-brand-icon img[b-sxm0hwfc8b] {
    filter: brightness(0) invert(1);
}

.nav-brand-text[b-sxm0hwfc8b] {
    font-family: var(--tl-font);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tl-text);
    letter-spacing: 0.3px;
}

/* ── Mobile Toggle ── */
.nav-toggle[b-sxm0hwfc8b] {
    display: none;
    appearance: none;
    background: none;
    border: 1px solid var(--tl-border-light);
    border-radius: var(--tl-radius-sm);
    cursor: pointer;
    width: 40px;
    height: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
}

.nav-toggle-bar[b-sxm0hwfc8b] {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--tl-text-muted);
    border-radius: 1px;
    transition: background-color 0.2s ease;
}

.nav-toggle:hover .nav-toggle-bar[b-sxm0hwfc8b] {
    background-color: var(--tl-text);
}

/* ── Nav Body ──
   Scrollt nur am Handy, wo es die eingeschobene Schublade selbst ist. Am Desktop scrollt die
   Spalte darum herum (`.sidebar` in MainLayout.razor.css) — beide zugleich ergaben zwei
   Bildlaufleisten nebeneinander. */
.nav-body[b-sxm0hwfc8b] {
    display: block;
    background-color: var(--tl-bg-raised);
    padding: 0.5rem 0;
}

.nav-body.collapse[b-sxm0hwfc8b] {
    display: none;
}

/* ── Nav Groups ── */
.nav-group[b-sxm0hwfc8b] {
    margin-bottom: 0.25rem;
}

/* The heading is a button now — the group folds away. Twenty-plus entries do not fit in a
   laptop's viewport, and what did not fit was simply not there until somebody found the
   scrollbar. */
.nav-group-title[b-sxm0hwfc8b] {
    font-family: var(--tl-font);
    color: var(--tl-text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    padding: 1rem 1.25rem 0.4rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.nav-group-title:hover[b-sxm0hwfc8b] {
    color: var(--tl-text-muted);
}

.nav-group-title:focus-visible[b-sxm0hwfc8b] {
    outline: 2px solid var(--tl-accent);
    outline-offset: -2px;
}

.nav-group-chevron[b-sxm0hwfc8b] {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.nav-group-collapsed .nav-group-chevron[b-sxm0hwfc8b] {
    transform: rotate(-90deg);
}

.nav-group-collapsed .nav-group-body[b-sxm0hwfc8b] {
    display: none;
}

/* The gear: at the bottom, quiet, and stuck there.
   Twenty-plus entries are taller than the column, so anything placed after them is below the fold
   — the first version of this sat at the end of the list and was, in practice, unreachable
   without scrolling past everything. Sticky keeps it in view while staying out of the way. */
.nav-foot[b-sxm0hwfc8b] {
    position: sticky;
    bottom: 0;
    margin-top: 1.25rem;
    padding: 0.5rem 0.625rem 1rem;
    border-top: 1px solid var(--tl-border);
    background: var(--tl-bg-raised);
}

.nav-foot[b-sxm0hwfc8b]  .nav-link-quiet {
    opacity: 0.6;
}

.nav-foot[b-sxm0hwfc8b]  .nav-link-quiet:hover {
    opacity: 1;
}

/* ── Nav Items ── */
.nav-item[b-sxm0hwfc8b] {
    padding: 1px 0.625rem;
}

.nav-item[b-sxm0hwfc8b]  .nav-link {
    font-family: var(--tl-font);
    color: var(--tl-text-muted);
    background: none;
    border: none;
    border-radius: var(--tl-radius-sm);
    height: 2.6rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 450;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.nav-item[b-sxm0hwfc8b]  .nav-link:hover {
    background-color: var(--tl-bg-hover);
    color: var(--tl-text);
}

.nav-item[b-sxm0hwfc8b]  .nav-link:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* Active state */
.nav-item[b-sxm0hwfc8b]  a.active {
    background-color: var(--tl-accent-soft);
    color: var(--tl-accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--tl-accent-border);
}

.nav-item[b-sxm0hwfc8b]  a.active i.bi {
    color: var(--tl-accent);
}

/* Light mode: amber-on-pale-amber is too low-contrast for the active item — darken the text/icon */
html[data-theme="light"] .nav-item[b-sxm0hwfc8b]  a.active,
html[data-theme="light"] .nav-item[b-sxm0hwfc8b]  a.active i.bi {
    color: #a86a05;
}

/* Icons */
.nav-item[b-sxm0hwfc8b]  i.bi {
    font-size: 1.05rem;
    margin-right: 0.65rem;
    width: 1.25rem;
    text-align: center;
    color: var(--tl-text-dim);
    transition: color 0.2s ease;
}

.nav-item[b-sxm0hwfc8b]  .nav-link:hover i.bi {
    color: var(--tl-text);
}

/* ── Mobile Backdrop ── */
.mobile-nav-backdrop[b-sxm0hwfc8b] {
    display: none;
}

/* ── Mobile Styles ── */
@media (max-width: 640px) {
    .nav-toggle[b-sxm0hwfc8b] {
        display: flex;
    }

    .nav-body[b-sxm0hwfc8b] {
        position: fixed;
        top: 56px;
        left: 0;
        width: 280px;
        height: calc(100vh - 56px);
        background-color: var(--tl-bg-raised);
        border-right: 1px solid var(--tl-border);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
        z-index: 1050;
        overflow-y: auto;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
    }

    .nav-body.collapse[b-sxm0hwfc8b] {
        transform: translateX(-100%);
        display: block !important;
    }

    .mobile-nav-backdrop[b-sxm0hwfc8b] {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1040;
        display: block;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .mobile-nav-backdrop.hidden[b-sxm0hwfc8b] {
        display: none;
        opacity: 0;
    }
}

/* Count badge on an admin entry. Sits at the far right of the row so a glance down the menu
   reads as a column of numbers rather than text of varying length. */
.nav-badge[b-sxm0hwfc8b] {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    background: var(--tl-accent-soft);
    color: var(--tl-accent);
}

.nav-badge-alert[b-sxm0hwfc8b] {
    background: rgba(227, 100, 100, 0.18);
    color: #e68a8a;
}

/* ── Desktop Styles ── */
@media (min-width: 641px) {
    .nav-toggle[b-sxm0hwfc8b] {
        display: none;
    }

    /* Nur sichtbar machen — Höhe, Bildlauf, Hintergrund und Rand gehören der Spalte darum
       (`.sidebar`), und die hatte sie schon.

       Hier stand bis 2026-08 `height: calc(100vh - 56px)` samt eigenem `overflow-y: auto`. Zwei
       Scroller ineinander, beide auf Fensterhöhe, also zwei Bildlaufleisten nebeneinander. Die
       56px sind zudem die Höhe des Kopfbalkens am *Handy*; am Desktop steht die Marke innerhalb
       der Spalte, es gibt nichts abzuziehen. Mit dem Streifen für den fremden Bereich fiel es
       zwangsläufig auf: die Spalte rechnet ihn ab, dieser Block nicht — die innere Fläche war
       dann garantiert höher als die äußere. */
    .nav-body[b-sxm0hwfc8b] {
        display: block !important;
    }
}
/* /Components/Pages/Admin/AdminConfiguration.razor.rz.scp.css */
/* Styles moved to global app.css as tl-* components */
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
.tl-stat-card[b-0puwos2tlv] {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
}

.tl-stat-card h3[b-0puwos2tlv] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.tl-stat-card p[b-0puwos2tlv] {
    color: var(--tl-text-muted);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

.language-chart[b-0puwos2tlv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.language-item[b-0puwos2tlv] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.language-name[b-0puwos2tlv] {
    width: 100px;
    font-weight: 500;
}

.language-bar-container[b-0puwos2tlv] {
    flex-grow: 1;
    height: 1.25rem;
    background-color: var(--tl-bg-inset, #1a1a1a);
    border-radius: 4px;
    overflow: hidden;
}

.language-bar[b-0puwos2tlv] {
    height: 100%;
    background: linear-gradient(90deg, var(--tl-accent), var(--tl-accent-hover, #2c5082));
    border-radius: 4px;
}

.language-count[b-0puwos2tlv] {
    width: 80px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
}

.tl-progress-bar[b-0puwos2tlv] {
    height: 25px;
    background-color: var(--tl-bg-inset, #1a1a1a);
    border-radius: 6px;
    overflow: hidden;
}

.tl-progress-fill[b-0puwos2tlv] {
    height: 100%;
    background: linear-gradient(90deg, #226644, #184f34);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    min-width: 2.5rem;
}
/* /Components/Pages/Admin/ApiAuditLogAdmin.razor.rz.scp.css */
.admin-scope[b-nen22z6ues] {
    display: inline-block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tl-accent);
    background: rgba(245, 166, 35, .12);
    border: 1px solid rgba(245, 166, 35, .35);
    border-radius: 999px;
    padding: .15rem .55rem;
    vertical-align: middle;
    margin-left: .55rem;
}

.audit-filters[b-nen22z6ues] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}

.audit-filter[b-nen22z6ues] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.audit-filter label[b-nen22z6ues] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tl-text-dim);
}

.audit-filter-grow[b-nen22z6ues] {
    grid-column: span 2;
}

.audit-filter-actions[b-nen22z6ues] {
    flex-direction: row;
    align-items: flex-end;
    gap: .4rem;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.audit-table th[b-nen22z6ues],
.audit-table td[b-nen22z6ues] {
    font-size: .85rem;
    padding: .55rem .8rem;
}

.audit-method[b-nen22z6ues] {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}

.audit-method-get[b-nen22z6ues]    { background: rgba(76, 175, 124, .15); color: #4caf7c; }
.audit-method-post[b-nen22z6ues]   { background: rgba(245, 166, 35, .15); color: var(--tl-accent); }
.audit-method-patch[b-nen22z6ues]  { background: rgba(168, 130, 240, .18); color: var(--tl-purple); }
.audit-method-delete[b-nen22z6ues] { background: rgba(232, 93, 93, .15);  color: #e85d5d; }

.audit-path[b-nen22z6ues] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--tl-text);
    background: transparent;
    border: 0;
    padding: 0;
    word-break: break-all;
}

.audit-status[b-nen22z6ues] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
}

.audit-status-success[b-nen22z6ues] { background: rgba(76, 175, 124, .15); color: #4caf7c; }
.audit-status-client[b-nen22z6ues]  { background: rgba(245, 166, 35, .15); color: var(--tl-accent); }
.audit-status-server[b-nen22z6ues]  { background: rgba(232, 93, 93, .15);  color: #e85d5d; }
.audit-status-other[b-nen22z6ues]   { background: var(--tl-bg-raised); color: var(--tl-text-muted); }

/* Marks a request that crossed between two workspaces — see the user-facing page for why it is
   the one thing on this table worth spotting at a glance. */
.audit-cross[b-nen22z6ues] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    white-space: nowrap;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: rgba(245, 166, 35, .12);
    color: var(--tl-accent);
}

.audit-pager[b-nen22z6ues] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.audit-pager-info[b-nen22z6ues] {
    color: var(--tl-text-muted);
    font-size: .82rem;
    margin-right: .8rem;
}
/* /Components/Pages/Admin/LinkTracking.razor.rz.scp.css */
.tl-progress-bar[b-awurkd1wic] {
    background-color: var(--tl-bg-inset, #1a1a1a);
    border-radius: 4px;
    overflow: hidden;
}

.tl-progress-fill[b-awurkd1wic] {
    height: 100%;
    background: linear-gradient(90deg, var(--tl-accent), var(--tl-accent-hover, #2c5082));
    border-radius: 4px;
}
/* /Components/Pages/ApiAuditLog.razor.rz.scp.css */
.audit-filters[b-6xm7uea6aj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}

.audit-filter[b-6xm7uea6aj] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.audit-filter label[b-6xm7uea6aj] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tl-text-dim);
}

.audit-filter-grow[b-6xm7uea6aj] {
    grid-column: span 2;
}

.audit-filter-actions[b-6xm7uea6aj] {
    flex-direction: row;
    align-items: flex-end;
    gap: .4rem;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.audit-table th[b-6xm7uea6aj],
.audit-table td[b-6xm7uea6aj] {
    font-size: .85rem;
    padding: .55rem .8rem;
}

.audit-method[b-6xm7uea6aj] {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}

.audit-method-get[b-6xm7uea6aj]    { background: rgba(76, 175, 124, .15); color: #4caf7c; }
.audit-method-post[b-6xm7uea6aj]   { background: rgba(245, 166, 35, .15); color: var(--tl-accent); }
.audit-method-patch[b-6xm7uea6aj]  { background: rgba(168, 130, 240, .18); color: var(--tl-purple); }
.audit-method-delete[b-6xm7uea6aj] { background: rgba(232, 93, 93, .15);  color: #e85d5d; }

.audit-path[b-6xm7uea6aj] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--tl-text);
    background: transparent;
    border: 0;
    padding: 0;
    word-break: break-all;
}

.audit-status[b-6xm7uea6aj] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
}

.audit-status-success[b-6xm7uea6aj] { background: rgba(76, 175, 124, .15); color: #4caf7c; }
.audit-status-client[b-6xm7uea6aj]  { background: rgba(245, 166, 35, .15); color: var(--tl-accent); }
.audit-status-server[b-6xm7uea6aj]  { background: rgba(232, 93, 93, .15);  color: #e85d5d; }
.audit-status-other[b-6xm7uea6aj]   { background: var(--tl-bg-raised); color: var(--tl-text-muted); }

/* Carries the accent because it is the one thing on this page worth spotting from across the
   table: a request that crossed between two workspaces. Everything else here is one's own. */
.audit-cross[b-6xm7uea6aj] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    white-space: nowrap;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: rgba(245, 166, 35, .12);
    color: var(--tl-accent);
}

.audit-pager[b-6xm7uea6aj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.audit-pager-info[b-6xm7uea6aj] {
    color: var(--tl-text-muted);
    font-size: .82rem;
    margin-right: .8rem;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* ── Wrapper — uses global --tl-* design tokens from app.css ── */
.landing-wrap[b-0nz0316nyb] {
    --bg: var(--tl-bg);
    --bg-raised: var(--tl-bg-raised);
    --bg-hover: var(--tl-bg-hover);
    --border: var(--tl-border);
    --border-light: var(--tl-border-light);
    --text: var(--tl-text);
    --text-muted: var(--tl-text-muted);
    --text-dim: var(--tl-text-dim);
    --accent: var(--tl-accent);
    --accent-soft: var(--tl-accent-soft);
    --accent-border: var(--tl-accent-border);
    --purple: var(--tl-purple);
    --purple-soft: var(--tl-purple-soft);
    --green: var(--tl-green);
    --green-soft: var(--tl-green-soft);
    --coral: var(--tl-coral);
    --coral-soft: var(--tl-coral-soft);
    font-family: var(--tl-font);
    color: var(--text);
    background: var(--bg);
    position: relative;
    overflow-x: hidden;
}

.landing-wrap[b-0nz0316nyb]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* ── Nav ── */
.nav[b-0nz0316nyb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
    background: rgba(27,29,35,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}

.nav-logo[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.01em;
}

.nav-logo-icon[b-0nz0316nyb] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.nav-logo-icon img[b-0nz0316nyb] {
    filter: brightness(0) invert(1);
}

.nav-links[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.nav-links a[b-0nz0316nyb] {
    font-size: .85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .2s;
}

.nav-links a:hover[b-0nz0316nyb] {
    color: var(--text);
}

.nav-cta[b-0nz0316nyb] {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 600 !important;
    padding: .4rem 1rem;
    border-radius: 6px;
    font-size: .82rem !important;
    transition: opacity .2s;
}

.nav-cta:hover[b-0nz0316nyb] {
    opacity: .88;
}

/* ── Buttons ── */
.btn[b-0nz0316nyb] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: inherit;
    font-weight: 600;
    font-size: .92rem;
    border-radius: 8px;
    padding: .65rem 1.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
    border: none;
}

.btn:hover[b-0nz0316nyb] {
    opacity: .9;
    transform: translateY(-1px);
}

.btn-primary[b-0nz0316nyb] {
    background: var(--accent);
    color: #000;
}

.btn-ghost[b-0nz0316nyb] {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.btn-ghost:hover[b-0nz0316nyb] {
    border-color: var(--text-dim);
    color: var(--text);
}

/* ── Hero ── */
.hero[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 1.5rem 4rem;
    position: relative;
    z-index: 1;
}

.hero-inner[b-0nz0316nyb] {
    width: 100%;
    max-width: 1140px;
}

.hero-grid[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 3rem;
    row-gap: 1.5rem;
    align-items: start;
}

.hero-text-top[b-0nz0316nyb] {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    align-self: end;
}

.hero-text-bottom[b-0nz0316nyb] {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    align-self: start;
}

.hero-visual[b-0nz0316nyb] {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.pill[b-0nz0316nyb] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    padding: .4rem 1rem;
    margin-bottom: 1.6rem;
    letter-spacing: .01em;
}

/* .pill-dot moved to wwwroot/css/pages.css: the validator page uses the same pill, and a scoped
   rule never reached it. */

.hero h1[b-0nz0316nyb] {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.028em;
    color: var(--text);
    margin: 0 0 1.1rem;
}

.hero h1 strong[b-0nz0316nyb] {
    color: var(--accent);
    font-weight: 700;
}

.hero-sub[b-0nz0316nyb] {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 540px;
    margin: 0 0 1.8rem;
    line-height: 1.6;
}

.hero-buttons[b-0nz0316nyb] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hero-bullets[b-0nz0316nyb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.hero-bullets li[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    color: var(--text-muted);
}

.bullet-check[b-0nz0316nyb] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
}

/* Hero visual (invoice mock + QR) */
.hero-visual[b-0nz0316nyb] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.hero-visual-glow[b-0nz0316nyb] {
    position: absolute;
    inset: -10% -5%;
    background: radial-gradient(60% 50% at 50% 50%, var(--accent-soft), transparent 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

.invoice-mock[b-0nz0316nyb] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, var(--bg-raised), color-mix(in srgb, var(--bg-raised) 92%, var(--accent) 8%));
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55),
                0 12px 30px -10px rgba(0, 0, 0, .35);
    transform: rotate(-1.5deg);
    transition: transform .35s ease;
}

.invoice-mock:hover[b-0nz0316nyb] {
    transform: rotate(0) translateY(-4px);
}

.invoice-mock-head[b-0nz0316nyb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 1rem;
}

.invoice-mock-id[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.invoice-mock-label[b-0nz0316nyb] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-dim);
}

.invoice-mock-id strong[b-0nz0316nyb] {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.invoice-mock-badge[b-0nz0316nyb] {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 600;
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    border-radius: 999px;
    padding: .25rem .65rem;
    white-space: nowrap;
}

.invoice-mock-rows[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}

.invoice-mock-row[b-0nz0316nyb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.invoice-mock-row span:last-child[b-0nz0316nyb] {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.invoice-mock-row-total[b-0nz0316nyb] {
    border-top: 1px solid var(--border);
    padding-top: .7rem;
    margin-top: .3rem;
    font-size: .9rem;
}

.invoice-mock-row-total span:first-child[b-0nz0316nyb] {
    font-weight: 600;
    color: var(--text);
}

.invoice-mock-row-total strong[b-0nz0316nyb] {
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.invoice-mock-pay[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.invoice-mock-qr[b-0nz0316nyb] {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 8px;
    padding: 5px;
    display: grid;
    place-items: center;
}

.invoice-mock-qr svg[b-0nz0316nyb] {
    width: 100%;
    height: 100%;
    display: block;
}

.invoice-mock-pay-text[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.invoice-mock-pay-label[b-0nz0316nyb] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-dim);
}

.invoice-mock-pay-text strong[b-0nz0316nyb] {
    font-size: .95rem;
    color: var(--text);
    font-weight: 600;
}

.invoice-mock-pay-hint[b-0nz0316nyb] {
    font-size: .76rem;
    color: var(--text-muted);
}

/* Trust strip */
.hero-trust[b-0nz0316nyb] {
    margin-top: 4rem;
    width: 100%;
    max-width: 1140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.hero-trust-label[b-0nz0316nyb] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-dim);
}

.hero-trust-row[b-0nz0316nyb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}

.trust-chip[b-0nz0316nyb] {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .4rem .9rem;
    transition: color .2s, border-color .2s;
}

.trust-chip:hover[b-0nz0316nyb] {
    color: var(--text);
    border-color: var(--border-light);
}

/* ── Shared section helpers ── */
.eyebrow[b-0nz0316nyb] {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    padding: .3rem .9rem;
    margin-bottom: 1rem;
}

/* ── Alternating sections (E-Invoicing / Self-Billing / API) ── */
.alt-sect[b-0nz0316nyb] {
    padding: 6rem 2rem;
    position: relative;
    z-index: 1;
}

.alt-sect-inner[b-0nz0316nyb] {
    max-width: 1140px;
    margin: 0 auto;
}

.alt-sect-grid[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.alt-sect-visual-right .alt-sect-text[b-0nz0316nyb]   { order: 1; }
.alt-sect-visual-right .alt-sect-visual[b-0nz0316nyb] { order: 2; }
.alt-sect-visual-left  .alt-sect-visual[b-0nz0316nyb] { order: 1; }
.alt-sect-visual-left  .alt-sect-text[b-0nz0316nyb]   { order: 2; }

.alt-sect h2[b-0nz0316nyb] {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--text);
    margin: .6rem 0 1rem;
}

.alt-sect h2 strong[b-0nz0316nyb] { color: var(--accent); }

.alt-sub[b-0nz0316nyb] {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 1.4rem;
}

.alt-sub em[b-0nz0316nyb] {
    color: var(--text);
    font-style: italic;
    font-weight: 500;
}

.alt-bullets[b-0nz0316nyb] {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.alt-bullets li[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .95rem;
    color: var(--text-muted);
}

.alt-chips[b-0nz0316nyb] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.alt-note[b-0nz0316nyb] {
    font-size: .85rem;
    color: var(--text-dim);
    margin: .2rem 0 0;
    line-height: 1.5;
}

.alt-note a[b-0nz0316nyb] {
    color: var(--accent);
    text-decoration: none;
}
.alt-note a:hover[b-0nz0316nyb] { text-decoration: underline; }

.alt-cta-row[b-0nz0316nyb] {
    margin-top: .3rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.pg-btn-disabled[b-0nz0316nyb] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

.pg-footer-coming[b-0nz0316nyb] {
    font-size: .88rem;
    color: var(--text-dim);
    cursor: not-allowed;
}

.pg-footer-coming small[b-0nz0316nyb] {
    font-size: .72rem;
    color: var(--text-dim);
    margin-left: .2rem;
    font-style: italic;
}

/* ── E-Invoicing visual ── */
.einv-mock[b-0nz0316nyb] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 460px;
    margin: 0 auto;
}

.einv-mock-pdf[b-0nz0316nyb],
.einv-mock-xml[b-0nz0316nyb] {
    background: linear-gradient(180deg, var(--bg-raised), color-mix(in srgb, var(--bg-raised) 92%, var(--accent) 8%));
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.2rem;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5);
    transition: transform .35s ease;
}

.einv-mock-pdf[b-0nz0316nyb] { transform: rotate(-1.2deg); }
.einv-mock-xml[b-0nz0316nyb] { transform: rotate(1deg); }
.einv-mock-pdf:hover[b-0nz0316nyb],
.einv-mock-xml:hover[b-0nz0316nyb] { transform: rotate(0) translateY(-3px); }

.einv-mock-label[b-0nz0316nyb] {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-dim);
    margin-bottom: .4rem;
}

.einv-mock-pdf strong[b-0nz0316nyb] {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
}

.einv-mock-rows[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .75rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.einv-mock-rows > div[b-0nz0316nyb] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.einv-mock-total[b-0nz0316nyb] {
    border-top: 1px dashed var(--border);
    padding-top: .4rem;
    margin-top: .25rem;
    color: var(--text);
    font-weight: 500;
}

.einv-mock-total strong[b-0nz0316nyb] {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.einv-mock-xml pre[b-0nz0316nyb] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem .9rem;
    margin: 0;
    overflow-x: auto;
    font-size: .72rem;
    line-height: 1.6;
}

.einv-mock-xml code[b-0nz0316nyb] {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.xml-tag[b-0nz0316nyb] { color: var(--accent); }

/* ── Self-Billing visual ── */
.selfbill-mock[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 440px;
    margin: 0 auto;
    align-items: stretch;
}

.selfbill-card[b-0nz0316nyb] {
    background: linear-gradient(180deg, var(--bg-raised), color-mix(in srgb, var(--bg-raised) 92%, var(--purple) 8%));
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.3rem;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5);
    transform: rotate(-1.5deg);
    transition: transform .35s ease;
}
.selfbill-card:hover[b-0nz0316nyb] { transform: rotate(0) translateY(-3px); }

.selfbill-card-label[b-0nz0316nyb] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--purple);
    margin-bottom: .25rem;
}

.selfbill-card strong[b-0nz0316nyb] {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
}

.selfbill-card-rows[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .8rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.selfbill-card-rows > div[b-0nz0316nyb] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.selfbill-card-total[b-0nz0316nyb] {
    border-top: 1px dashed var(--border);
    padding-top: .4rem;
    margin-top: .2rem;
    color: var(--text);
    font-weight: 500;
}
.selfbill-card-total strong[b-0nz0316nyb] {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.selfbill-arrow[b-0nz0316nyb] {
    display: flex;
    justify-content: center;
    color: var(--text-dim);
    height: 14px;
}
.selfbill-arrow svg[b-0nz0316nyb] {
    width: 80px;
    height: 14px;
}

.selfbill-recipient[b-0nz0316nyb] {
    background: var(--bg-raised);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    transform: rotate(1deg);
    transition: transform .35s ease;
}
.selfbill-recipient:hover[b-0nz0316nyb] { transform: rotate(0) translateY(-3px); }

.selfbill-recipient-avatar[b-0nz0316nyb] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--purple-soft);
    color: var(--purple);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    letter-spacing: .04em;
}

.selfbill-recipient-info[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.selfbill-recipient-info strong[b-0nz0316nyb] {
    font-size: .92rem;
    color: var(--text);
    font-weight: 600;
}

.selfbill-recipient-info span[b-0nz0316nyb] {
    font-size: .78rem;
    color: var(--text-muted);
}

/* ── API visual ── */
.api-mock[b-0nz0316nyb] {
    background: #0f1117;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
    max-width: 520px;
    margin: 0 auto;
    transform: rotate(-1deg);
    transition: transform .35s ease;
}
.api-mock:hover[b-0nz0316nyb] { transform: rotate(0) translateY(-3px); }

.api-mock-bar[b-0nz0316nyb] {
    background: rgba(255, 255, 255, .04);
    padding: .55rem .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.api-mock-dot[b-0nz0316nyb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.api-mock-dot:nth-child(1)[b-0nz0316nyb] { background: #ff5f57; }
.api-mock-dot:nth-child(2)[b-0nz0316nyb] { background: #febc2e; }
.api-mock-dot:nth-child(3)[b-0nz0316nyb] { background: #28c840; }

.api-mock-title[b-0nz0316nyb] {
    font-size: .7rem;
    color: var(--text-dim);
    margin-left: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.api-mock pre[b-0nz0316nyb] {
    margin: 0;
    padding: 1.1rem 1.2rem;
    background: transparent;
    color: #d4d4d8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.65;
    overflow-x: auto;
}

.api-mock code[b-0nz0316nyb] { font-family: inherit; }

.cl-cmd[b-0nz0316nyb]     { color: var(--accent); font-weight: 700; }
.cl-flag[b-0nz0316nyb]    { color: #c8a6ff; }
.cl-str[b-0nz0316nyb]     { color: #98d4a8; }
.cl-num[b-0nz0316nyb]     { color: #e8c47a; }
.cl-key[b-0nz0316nyb]     { color: #8ec5ff; }
.cl-bool[b-0nz0316nyb]    { color: #e8c47a; }
.cl-comment[b-0nz0316nyb] { color: #6a737d; font-style: italic; }

/* ── Basics strip ── */
.basics-strip[b-0nz0316nyb] {
    padding: 4rem 2rem;
    position: relative;
    z-index: 1;
}

.basics-strip-inner[b-0nz0316nyb] {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.basics-strip-title[b-0nz0316nyb] {
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-dim);
    margin: 0 0 1.5rem;
    letter-spacing: .01em;
}

.basics-strip-grid[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 920px;
    margin: 0 auto;
}

.basics-strip-item[b-0nz0316nyb] {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem .9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    transition: border-color .2s, transform .2s;
}

.basics-strip-item:hover[b-0nz0316nyb] {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.basics-icon[b-0nz0316nyb] {
    font-size: 1.6rem;
    line-height: 1;
}

.basics-strip-item strong[b-0nz0316nyb] {
    font-size: .82rem;
    color: var(--text);
    font-weight: 500;
    text-align: center;
}

/* ── Testimonials ── */
.tst-section[b-0nz0316nyb] {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.tst-section h2[b-0nz0316nyb] {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
    margin: .4rem 0 3rem;
}

.tst-section h2 strong[b-0nz0316nyb] { color: var(--accent); }

.tst-grid[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.4rem;
    max-width: 920px;
    margin: 0 auto;
}

.tst-grid-single[b-0nz0316nyb] {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

.tst-card[b-0nz0316nyb] {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem 1.6rem;
    margin: 0;
    text-align: left;
    transition: border-color .2s;
}

.tst-card:hover[b-0nz0316nyb] { border-color: var(--border-light); }

.tst-card blockquote[b-0nz0316nyb] {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 1.2rem;
    font-weight: 500;
    font-style: italic;
}

.tst-card figcaption strong[b-0nz0316nyb] {
    font-size: .92rem;
    color: var(--text);
    display: block;
    font-style: normal;
}

.tst-card figcaption span[b-0nz0316nyb] {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ── FAQ ── */
.faq-section[b-0nz0316nyb] {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.faq-section h2[b-0nz0316nyb] {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
    margin: .4rem 0 2.5rem;
}

.faq-section h2 strong[b-0nz0316nyb] { color: var(--accent); }

.faq-list[b-0nz0316nyb] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}

.faq-item[b-0nz0316nyb] {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}

.faq-item[open][b-0nz0316nyb] { border-color: var(--border-light); }

.faq-item > summary[b-0nz0316nyb] {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .95rem;
    user-select: none;
}

.faq-item > summary[b-0nz0316nyb]::-webkit-details-marker { display: none; }
.faq-item > summary[b-0nz0316nyb]::marker { content: ""; }

.faq-item > summary[b-0nz0316nyb]::after {
    content: "›";
    margin-left: auto;
    color: var(--text-dim);
    font-size: 1.35rem;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .2s;
    flex-shrink: 0;
}

.faq-item[open] > summary[b-0nz0316nyb]::after { transform: rotate(-90deg); }

.faq-item > summary:hover[b-0nz0316nyb] { background: var(--bg-hover); }

.faq-body[b-0nz0316nyb] {
    padding: 0 1.2rem 1.2rem;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.faq-body a[b-0nz0316nyb] {
    color: var(--accent);
    text-decoration: none;
}
.faq-body a:hover[b-0nz0316nyb] { text-decoration: underline; }

/* ── Pricing ── */
.pricing[b-0nz0316nyb] {
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.pricing h2[b-0nz0316nyb] {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 .6rem;
}

.pricing h2 strong[b-0nz0316nyb] {
    color: var(--accent);
}

.pricing-sub[b-0nz0316nyb] {
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 3rem;
    font-size: .95rem;
    line-height: 1.6;
}

.pricing-grid[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    max-width: 960px;
    margin: 0 auto;
}

.price-card[b-0nz0316nyb] {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    position: relative;
    transition: border-color .2s;
}

.price-card:hover[b-0nz0316nyb] {
    border-color: var(--border-light);
}

.price-card.featured[b-0nz0316nyb] {
    border-color: var(--accent-border);
    box-shadow: 0 0 40px rgba(245,166,35,.08);
}

.price-badge[b-0nz0316nyb] {
    position: absolute;
    top: -11px;
    background: var(--accent);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .85rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.price-tier[b-0nz0316nyb] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.price-amount[b-0nz0316nyb] {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.03em;
}

.price-amount .per[b-0nz0316nyb] {
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-dim);
}

.price-vat[b-0nz0316nyb] {
    font-size: .72rem;
    color: var(--text-dim);
    margin-top: -.15rem;
    margin-bottom: .3rem;
}

.pricing-vat-note[b-0nz0316nyb] {
    max-width: 560px;
    margin: 1.6rem auto 0;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.price-desc[b-0nz0316nyb] {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: .8rem;
}

.price-list[b-0nz0316nyb] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    width: 100%;
    text-align: left;
}

.price-list li[b-0nz0316nyb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--text);
    padding: .4rem 0;
    border-top: 1px solid var(--border);
}

.price-list li:last-child[b-0nz0316nyb] {
    border-bottom: 1px solid var(--border);
}

.price-list li.excluded[b-0nz0316nyb] {
    color: var(--text-dim);
}

.check[b-0nz0316nyb] {
    font-size: .8rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.check-yes[b-0nz0316nyb] {
    color: var(--green);
}

.check-no[b-0nz0316nyb] {
    color: var(--text-dim);
}

.price-btn[b-0nz0316nyb] {
    display: block;
    width: 100%;
    text-align: center;
    padding: .6rem 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    margin-top: auto;
    transition: opacity .2s, transform .15s;
    cursor: pointer;
}

.price-btn:hover[b-0nz0316nyb] {
    opacity: .88;
    transform: translateY(-1px);
}

.pbtn-filled[b-0nz0316nyb] {
    background: var(--accent);
    color: #000;
}

.pbtn-outline[b-0nz0316nyb] {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.pbtn-outline:hover[b-0nz0316nyb] {
    border-color: var(--text-dim);
    color: var(--text);
}

/* ── CTA Banner ── */
.cta-banner[b-0nz0316nyb] {
    padding: 5rem 2rem;
    position: relative;
    z-index: 1;
}

.cta-inner[b-0nz0316nyb] {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3.5rem 2rem;
}

.cta-inner h2[b-0nz0316nyb] {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 .6rem;
}

.cta-inner h2 strong[b-0nz0316nyb] {
    color: var(--accent);
}

.cta-inner p[b-0nz0316nyb] {
    color: var(--text-muted);
    font-size: .92rem;
    max-width: 440px;
    margin: 0 auto 1.6rem;
    line-height: 1.6;
}

.cta-buttons[b-0nz0316nyb] {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Footer (4-col grid + full-width Trust row, overrides shared .pg-footer flex from pages.css) ── */
.pg-footer-grid[b-0nz0316nyb] {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem 2rem;
    align-items: start;
}

.pg-footer-trust-col[b-0nz0316nyb] {
    grid-column: 1 / -1;
    margin-top: .5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.pg-footer-trust-row[b-0nz0316nyb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.5rem;
}

.pg-footer-trust-left[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

.pg-footer-col[b-0nz0316nyb] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.pg-footer-col h3[b-0nz0316nyb] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-dim);
    margin: 0 0 .4rem;
}

.pg-footer-col a[b-0nz0316nyb] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .88rem;
    transition: color .2s;
}

.pg-footer-col a:hover[b-0nz0316nyb] { color: var(--text); }

.pg-footer-brand .pg-footer-logo[b-0nz0316nyb] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: .25rem;
}

.pg-footer-tagline[b-0nz0316nyb] {
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0 0 .75rem;
    max-width: 240px;
    line-height: 1.5;
}

.pg-footer-copy[b-0nz0316nyb] {
    font-size: .75rem;
    color: var(--text-dim);
    margin-top: .4rem;
}

.pg-footer-trust[b-0nz0316nyb] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.pg-footer-trust .trust-chip[b-0nz0316nyb] {
    font-size: .75rem;
    padding: .3rem .7rem;
}

.pg-footer-trust-note[b-0nz0316nyb] {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 560px;
}

.pg-footer-verified[b-0nz0316nyb] {
    display: inline-block;
    flex-shrink: 0;
    transition: transform .2s, filter .2s;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.pg-footer-verified:hover[b-0nz0316nyb] {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.pg-footer-verified img[b-0nz0316nyb] {
    width: 280px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav[b-0nz0316nyb] {
        padding: 0 1rem;
    }

    .nav-links[b-0nz0316nyb] {
        gap: .8rem;
    }

    .hero[b-0nz0316nyb] {
        padding: 5rem 1rem 3rem;
    }

    .hero-grid[b-0nz0316nyb] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 0;
        row-gap: 2rem;
        text-align: center;
    }

    .hero-text-top[b-0nz0316nyb] {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
        align-self: auto;
    }

    .hero-visual[b-0nz0316nyb] {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
    }

    .hero-text-bottom[b-0nz0316nyb] {
        grid-column: 1;
        grid-row: 3;
        text-align: center;
    }

    .hero h1[b-0nz0316nyb] {
        font-size: 2rem;
    }

    .hero-sub[b-0nz0316nyb] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons[b-0nz0316nyb] {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-bullets[b-0nz0316nyb] {
        align-items: flex-start;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .invoice-mock[b-0nz0316nyb] {
        transform: rotate(0);
        max-width: 380px;
        margin: 0 auto;
    }

    .hero-trust[b-0nz0316nyb] {
        margin-top: 3rem;
    }

    .alt-sect[b-0nz0316nyb] {
        padding: 4rem 1rem;
    }

    .alt-sect-grid[b-0nz0316nyb] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .alt-sect-visual-left .alt-sect-visual[b-0nz0316nyb],
    .alt-sect-visual-right .alt-sect-visual[b-0nz0316nyb] {
        order: 2;
    }
    .alt-sect-visual-left .alt-sect-text[b-0nz0316nyb],
    .alt-sect-visual-right .alt-sect-text[b-0nz0316nyb] {
        order: 1;
    }

    .alt-sub[b-0nz0316nyb] {
        margin-left: auto;
        margin-right: auto;
    }

    .einv-mock-pdf[b-0nz0316nyb],
    .einv-mock-xml[b-0nz0316nyb],
    .selfbill-card[b-0nz0316nyb],
    .selfbill-recipient[b-0nz0316nyb],
    .api-mock[b-0nz0316nyb] {
        transform: rotate(0);
    }

    .basics-strip[b-0nz0316nyb] {
        padding: 3rem 1rem;
    }

    .tst-section[b-0nz0316nyb],
    .faq-section[b-0nz0316nyb] {
        padding: 4rem 1rem;
    }

    .pricing[b-0nz0316nyb] {
        padding: 4rem 1rem;
    }

    .pricing-grid[b-0nz0316nyb] {
        grid-template-columns: 1fr;
    }

    .cta-banner[b-0nz0316nyb] {
        padding: 3rem 1rem;
    }

    .cta-inner[b-0nz0316nyb] {
        padding: 2.5rem 1.5rem;
    }

    .cta-buttons[b-0nz0316nyb] {
        flex-direction: column;
        align-items: stretch;
    }

    .pg-footer-grid[b-0nz0316nyb] {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .pg-footer-brand[b-0nz0316nyb],
    .pg-footer-trust-col[b-0nz0316nyb] {
        grid-column: 1 / -1;
    }

    .pg-footer-trust-row[b-0nz0316nyb] {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .pg-footer-verified img[b-0nz0316nyb] {
        width: 240px;
    }
}

@media (max-width: 480px) {
    .pg-nav-links a:not(.pg-nav-cta)[b-0nz0316nyb] {
        display: none;
    }

    .hero h1[b-0nz0316nyb] {
        font-size: 1.7rem;
    }

    .hero-sub[b-0nz0316nyb] {
        font-size: .92rem;
    }

    .alt-sect h2[b-0nz0316nyb],
    .tst-section h2[b-0nz0316nyb],
    .faq-section h2[b-0nz0316nyb],
    .pricing h2[b-0nz0316nyb],
    .cta-inner h2[b-0nz0316nyb] {
        font-size: 1.4rem;
    }

    .pg-footer-grid[b-0nz0316nyb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/ApiReferenceContent.razor.rz.scp.css */
.api-docs[b-dwmu8lh7tr] {
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.5rem;
}

.api-group-heading[b-dwmu8lh7tr] {
    margin: 1.6rem 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tl-text-dim);
}

.api-section[b-dwmu8lh7tr] {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}

.api-section[open][b-dwmu8lh7tr] {
    border-color: var(--tl-border-light);
}

.api-section > summary[b-dwmu8lh7tr] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: .9rem;
    color: var(--tl-text);
}

.api-section > summary[b-dwmu8lh7tr]::-webkit-details-marker { display: none; }
.api-section > summary[b-dwmu8lh7tr]::marker { content: ""; }

.api-section > summary[b-dwmu8lh7tr]::after {
    content: "›";
    margin-left: auto;
    color: var(--tl-text-dim);
    font-size: 1.2rem;
    transform: rotate(90deg);
    transition: transform .2s;
    flex-shrink: 0;
}

.api-section[open] > summary[b-dwmu8lh7tr]::after {
    transform: rotate(-90deg);
}

.api-section > summary:hover[b-dwmu8lh7tr] {
    background: var(--tl-bg-hover);
}

.api-section-title[b-dwmu8lh7tr] {
    font-weight: 600;
}

.api-method[b-dwmu8lh7tr] {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 4px;
    letter-spacing: .04em;
    min-width: 52px;
    text-align: center;
}

.api-method-get[b-dwmu8lh7tr]   { background: rgba(76, 175, 124, .15); color: #4caf7c; }
.api-method-post[b-dwmu8lh7tr]  { background: rgba(245, 166, 35, .15); color: var(--tl-accent); }
.api-method-patch[b-dwmu8lh7tr] { background: rgba(168, 130, 240, .18); color: var(--tl-purple); }
.api-method-put[b-dwmu8lh7tr]   { background: rgba(80, 160, 235, .16);  color: #50a0eb; }
.api-method-delete[b-dwmu8lh7tr]{ background: rgba(232, 93, 93, .15);  color: #e85d5d; }

.api-path[b-dwmu8lh7tr] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    color: var(--tl-text);
    background: transparent;
    padding: 0;
}

.api-summary[b-dwmu8lh7tr] {
    color: var(--tl-text-muted);
    font-size: .82rem;
    margin-left: .3rem;
}

.api-section-body[b-dwmu8lh7tr] {
    padding: .2rem 1.2rem 1.2rem 1.2rem;
    border-top: 1px solid var(--tl-border);
    background: var(--tl-bg);
    color: var(--tl-text-muted);
    font-size: .88rem;
    line-height: 1.55;
}

/* h3, not h4: the page runs h1 → h2 (group heading) → these, and a skipped level leaves the
   outline unable to say which section a block belongs to. Visual size is unchanged. */
.api-section-body h3[b-dwmu8lh7tr] {
    margin: 1rem 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tl-text-dim);
}

.api-section-body p[b-dwmu8lh7tr] {
    margin: .6rem 0;
}

.api-section-body a[b-dwmu8lh7tr] {
    color: var(--tl-accent);
    text-decoration: none;
}
.api-section-body a:hover[b-dwmu8lh7tr] { text-decoration: underline; }

.api-section-body code[b-dwmu8lh7tr] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82em;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    padding: .05rem .35rem;
    border-radius: 4px;
    color: var(--tl-text);
}

.api-section-body pre[b-dwmu8lh7tr] {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    padding: .8rem 1rem;
    overflow-x: auto;
    margin: .6rem 0;
}

.api-section-body pre code[b-dwmu8lh7tr] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--tl-text);
    font-size: .8rem;
    line-height: 1.55;
}

.api-table[b-dwmu8lh7tr] {
    width: 100%;
    border-collapse: collapse;
    margin: .6rem 0;
    font-size: .82rem;
}

.api-table th[b-dwmu8lh7tr],
.api-table td[b-dwmu8lh7tr] {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--tl-border);
    vertical-align: top;
}

.api-table th[b-dwmu8lh7tr] {
    color: var(--tl-text-dim);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--tl-bg-raised);
}

.api-table tr:last-child td[b-dwmu8lh7tr] {
    border-bottom: 0;
}

.api-note[b-dwmu8lh7tr] {
    margin-top: .8rem;
    padding: .55rem .8rem;
    background: var(--tl-bg-raised);
    border-left: 3px solid var(--tl-accent);
    border-radius: 4px;
    font-size: .82rem;
    color: var(--tl-text-muted);
}

/* Collapsible endpoint groups — collapsed by default, ordered basic → special.
   The summary is styled as a card like the endpoint rows so it reads as clickable. */
.api-group[b-dwmu8lh7tr] {
    margin-top: .6rem;
}

.api-group > summary[b-dwmu8lh7tr] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    transition: border-color .2s, background .2s;
}

.api-group > summary[b-dwmu8lh7tr]::-webkit-details-marker { display: none; }
.api-group > summary[b-dwmu8lh7tr]::marker { content: ""; }

.api-group > summary[b-dwmu8lh7tr]::after {
    content: "›";
    margin-left: auto;
    color: var(--tl-text-dim);
    font-size: 1.2rem;
    transform: rotate(90deg);
    transition: transform .2s;
    flex-shrink: 0;
}

.api-group[open] > summary[b-dwmu8lh7tr]::after {
    transform: rotate(-90deg);
}

.api-group > summary:hover[b-dwmu8lh7tr] {
    background: var(--tl-bg-hover);
    border-color: var(--tl-border-light);
}

.api-group[open] > summary[b-dwmu8lh7tr] {
    border-color: var(--tl-border-light);
    margin-bottom: .5rem;
}

.api-group > summary .api-group-heading[b-dwmu8lh7tr] {
    margin: 0;
}

.api-group-count[b-dwmu8lh7tr] {
    font-size: .72rem;
    color: var(--tl-text-dim);
    letter-spacing: .04em;
}

.api-group > .api-section[b-dwmu8lh7tr] {
    margin: 0 0 .5rem 1rem;
}