/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   Silk & Pastel chrome — rewritten 1:1 from the design pack.

   Layout model:
     <aside.sp-sidebar>  position: fixed, left: 0, width: 280px
     <header.sp-topbar>  position: fixed, left: 280px, height: 80px
     <main.sp-main>      margin-left: 280px, padding-top: 80px

   Token references: --color-* and --font-* come from app.css.
   --silk-edge / --shadow-silk-* / --transition-silk come from
   admin-pages.css.
   ============================================================ */

/* ============================================================
   Sidebar — fixed, frosted white glass, 280px wide
   ============================================================ */

.sp-sidebar[b-j02ce5dzkl] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 50;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--silk-edge);
    box-shadow: 4px 0 24px rgba(15, 12, 30, 0.02);
    overflow: hidden;
}

:root[data-theme*="-dark"] .sp-sidebar[b-j02ce5dzkl] {
    background: color-mix(in oklab, var(--color-surface-container-lowest) 70%, transparent);
    border-right-color: color-mix(in oklab, white 8%, transparent);
}

/* ---------- Brand block ---------- */

.sp-brand[b-j02ce5dzkl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    /* mb-10 in the design pack — extra breathing room between the
       wordmark and the nav so the brand reads as a distinct zone. */
    margin-bottom: 2.5rem;
    flex-shrink: 0;
}

/* The 2.5rem rounded-xl gradient tile with diamond glyph — exactly
   the attachment's brand tile recipe. ::after paints a 16% white
   gloss across the top-left half to give the gradient a "silk"
   sheen rather than a flat block of color. */
.sp-brand-tile[b-j02ce5dzkl] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px -4px color-mix(in oklab, var(--color-primary) 45%, transparent);
    flex-shrink: 0;
    overflow: hidden;
}
.sp-brand-tile[b-j02ce5dzkl]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 50%);
    pointer-events: none;
}
.sp-brand-tile .material-symbols-outlined[b-j02ce5dzkl] {
    font-size: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
    position: relative;
    z-index: 1;
}

.sp-brand-stack[b-j02ce5dzkl] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

/* Wordmark — primary→secondary gradient clipped to text. */
.sp-brand-title[b-j02ce5dzkl] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg,
        var(--color-primary) 0%,
        var(--color-secondary) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.1;
}

.sp-brand-eyebrow[b-j02ce5dzkl] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-primary);
    opacity: 0.85;
    margin-top: 2px;
}

/* ============================================================
   Nav
   ============================================================ */

/* Nav sits inside the sidebar's padding. The design pack
   INTENTIONALLY indents menu icons 1rem from the brand tile column
   via the link's px-4 padding (see component_zoo_comprehensive_
   edition). No negative-margin outdent. */
.sp-nav[b-j02ce5dzkl] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* space-y-2 in the design pack — 0.5rem between adjacent
       nav rows. Bigger than 0.25rem; the menu reads cleaner. */
    gap: 0.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Slight negative inline margin so the row's full-width pill
       background lines up flush with the sidebar's content column
       even with internal padding. */
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}
.sp-nav[b-j02ce5dzkl]::-webkit-scrollbar { width: 4px; }
.sp-nav[b-j02ce5dzkl]::-webkit-scrollbar-track { background: transparent; }
.sp-nav[b-j02ce5dzkl]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
    border-radius: 10px;
}

/* ============================================================
   THE root cause of every "menu doesn't align" iteration:

   Blazor's CSS isolation appends the scope attribute `[b-xxx]` to
   the LAST simple selector of every rule, so `.sp-nav-link`
   compiles to `.sp-nav-link[b-xxx]`. That attribute is only added
   to elements declared LITERALLY in MainLayout.razor — it is NOT
   propagated to elements rendered by child components like
   `<NavLink>`. Result: every `<a class="sp-nav-link">` rendered
   by NavLink lacks `b-xxx`, my `.sp-nav-link[b-xxx]` rule never
   matches them, and the anchor falls back to UA-default styling
   (display: block, no padding, no flex). Meanwhile `<summary>` IS
   literal HTML, so it gets the attribute, my rule matches, and the
   summary IS styled. That's why summaries appeared "indented" — they
   were the only rows actually getting padding.

   `::deep` is Blazor's escape hatch: prefixing a rule with
   `::deep` (or `.parent ::deep .child`) moves the scope attribute
   onto the PARENT selector, so the child no longer needs it. With
   `.sp-sidebar ::deep .sp-nav-link`, the rule matches every
   `.sp-nav-link` descendant of `.sp-sidebar` (which IS literal HTML
   and has the scope), regardless of whether the descendant has it.

   This is why I've been chasing this misalignment for many turns —
   I kept tightening padding/flex/list-item layout on the SUMMARY
   when the actual bug was that the SISTER rule never reached the
   NavLink anchor at all.
   ============================================================ */

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
    transition:
        transform var(--transition-silk),
        background var(--transition-silk),
        color var(--transition-silk);
}

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link:hover {
    transform: translateX(4px);
    color: var(--color-primary);
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link:hover .sp-nav-icon {
    color: var(--color-primary);
}

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link.active,
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link.active:hover {
    color: var(--color-primary);
    background: color-mix(in oklab, var(--color-primary-container) 35%, transparent);
    font-weight: 600;
    transform: none;
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom,
        var(--color-primary),
        var(--color-secondary));
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-link.active .sp-nav-icon {
    color: var(--color-primary);
}

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-icon {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-on-surface-variant);
    transition: color var(--transition-silk);
}

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-label {
    flex: 1;
    min-width: 0;
}

/* ---------- Nav group (collapsible) ---------- */

.sp-nav-group[b-j02ce5dzkl] {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Summary alignment — deep fix combining both prior attempts.

   <summary> defaults to `display: list-item` with a
   disclosure-closed `::marker`. Even after `list-style: none` and
   `display: flex`, Blink and WebKit have residual quirks that
   leave the summary's first child shifted ~6-12px to the right
   of an identically-styled <a> would. Two layers of cause:

   1. Stylesheet cascade — Tailwind v4's preflight in app.css
      `@layer base` re-asserts `summary { display: list-item }`,
      which can beat a plain `.sp-nav-toggle` rule. Bumping the
      selector to `summary.sp-nav-toggle` (specificity 0,1,1)
      definitively beats both UA and preflight rules.

   2. Rendering layer — the ::marker pseudo-element still occupies
      inline-start space until its `content` is removed AND its
      display is collapsed (Blink bugs 590014 / 1054579). Some
      Chromium channels also apply an internal "marker offset"
      based on `list-style-position` even after display:flex.
      These leak in via the rendering layer rather than the
      cascade, so normal specificity is not enough — `!important`
      on padding/display/list-style locks them out.

   Forcing every potential indent source — display, padding,
   margin, text-indent, list-style*, marker pseudo — to a known
   value defeats the cumulative drift. The end state: summary
   lines up byte-for-byte with a sibling <a class="sp-nav-link">.
   ============================================================ */
/* Summary marker reset — via .sp-sidebar ::deep so the selector
   uniformly matches summary (which DOES have the scope attribute
   as literal HTML) AND any future case where the toggle might be
   inside a child component. The type-qualified `summary.foo` form
   on main worked but only because <summary> is literal — fragile
   against future markup changes. ::deep is the future-proof shape. */
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-toggle {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    padding-inline-start: 1rem !important;
    margin: 0 !important;
    text-indent: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    list-style-position: outside !important;
    cursor: pointer;
    user-select: none;
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-toggle::-webkit-details-marker {
    display: none !important;
}
/* Standards-track marker kill. `content` alone is ignored on
   some impls; combining empty string + display:none + font-size:0
   neutralises Blink's reserved space across every supported
   engine. */
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-toggle::marker {
    content: "" !important;
    display: none !important;
    font-size: 0 !important;
}

/* Smaller than the main 24px nav icon — design pack uses
   `text-sm` for the chevron in collapsible group summaries. */
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-chev {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-variant);
    opacity: 0.7;
    transition: transform var(--transition-silk);
    flex-shrink: 0;
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-group[open] .sp-nav-chev {
    transform: rotate(180deg);
}

/* Sub-list — design pack exactly: ml-10 mt-1 space-y-1, no rail.
   Indented 2.5rem from the group container so sub-items sit
   clearly under their parent header without competing for the
   icon column. */
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.25rem 0 0.5rem 2.5rem;
    padding: 0;
}

.sp-sidebar[b-j02ce5dzkl]  .sp-nav-sublink {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-family: var(--font-headline);
    font-size: 0.875rem;
    font-weight: 500;
    transition:
        background var(--transition-silk-fast),
        color var(--transition-silk-fast);
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-sublink:hover {
    background: var(--color-surface-container-low);
    color: var(--color-primary);
}
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-sublink.active,
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-sublink.active:hover {
    background: color-mix(in oklab, var(--color-primary-container) 25%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

/* Count badge for newly-received items (diagnostics Packages link).
   Lives inside a <NavLink>, so it must be reached via ::deep. The
   label carries flex:1 and shoves this pill to the trailing edge. */
.sp-sidebar[b-j02ce5dzkl]  .sp-nav-badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-headline);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--color-primary) 40%, transparent);
}

/* ============================================================
   Sidebar foot — premium / version block + meta links
   ============================================================ */

.sp-sidebar-foot[b-j02ce5dzkl] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklab, white 35%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
}

.sp-premium[b-j02ce5dzkl] {
    padding: 1rem 1.125rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--color-primary-container) 35%, rgba(255,255,255,0.55)) 0%,
            color-mix(in oklab, var(--color-tertiary-container) 25%, rgba(255,255,255,0.55)) 100%);
    border: 1px solid var(--silk-edge);
    box-shadow: var(--shadow-silk-rest);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-premium-eyebrow[b-j02ce5dzkl] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-primary);
    margin: 0;
}

.sp-premium-version[b-j02ce5dzkl] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.sp-premium-sub[b-j02ce5dzkl] {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0.5rem;
}

.sp-premium-btn[b-j02ce5dzkl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition:
        transform var(--transition-silk),
        box-shadow var(--transition-silk);
    box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.sp-premium-btn:hover[b-j02ce5dzkl] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px color-mix(in oklab, var(--color-primary) 45%, transparent);
}

.sp-sidebar-meta[b-j02ce5dzkl] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in oklab, white 35%, transparent);
}

.sp-sidebar-meta-link[b-j02ce5dzkl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 0.8125rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--transition-silk);
}
.sp-sidebar-meta-link:hover[b-j02ce5dzkl] {
    color: var(--color-primary);
}
.sp-sidebar-meta-link .material-symbols-outlined[b-j02ce5dzkl] {
    font-size: 20px;
}
.sp-sidebar-meta-danger:hover[b-j02ce5dzkl] {
    color: var(--color-error);
}
.sp-sidebar-meta-form[b-j02ce5dzkl] {
    margin: 0;
}

/* ============================================================
   Top bar — fixed, semi-transparent, sits to the right of sidebar
   ============================================================ */

.sp-topbar[b-j02ce5dzkl] {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    height: 5rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2.5rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid var(--silk-edge);
    box-shadow: 0 10px 40px rgba(15, 12, 30, 0.03);
}

:root[data-theme*="-dark"] .sp-topbar[b-j02ce5dzkl] {
    background: color-mix(in oklab, var(--color-surface) 75%, transparent);
    border-bottom-color: color-mix(in oklab, white 8%, transparent);
}

.sp-topbar-left[b-j02ce5dzkl] {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-width: 0;
    flex: 1;
}

.sp-topbar-title[b-j02ce5dzkl] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
    flex-shrink: 0;
}

/* Search field — pill-shape, soft pastel container background.
   Focus lifts to a primary-tinted glow. */
.sp-topbar-search[b-j02ce5dzkl] {
    position: relative;
    flex: 1;
    max-width: 22rem;
    display: flex;
    align-items: center;
    margin: 0;
}
.sp-topbar-search > .material-symbols-outlined[b-j02ce5dzkl] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
    pointer-events: none;
}
.sp-topbar-search input[b-j02ce5dzkl] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.625rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--color-surface-container-low);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
    transition:
        background var(--transition-silk-fast),
        border-color var(--transition-silk-fast),
        box-shadow var(--transition-silk-fast);
}
.sp-topbar-search input[b-j02ce5dzkl]::placeholder {
    color: var(--color-on-surface-variant);
    opacity: 0.55;
}
.sp-topbar-search input:focus[b-j02ce5dzkl] {
    background: white;
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* ---------- Right cluster ---------- */

.sp-topbar-right[b-j02ce5dzkl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sp-topbar-iconbtn[b-j02ce5dzkl] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    border-radius: 9999px;
    color: var(--color-on-surface-variant);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-silk-fast), color var(--transition-silk-fast);
}
.sp-topbar-iconbtn:hover[b-j02ce5dzkl] {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-primary);
}
.sp-topbar-iconbtn .material-symbols-outlined[b-j02ce5dzkl] {
    font-size: 22px;
}

.sp-topbar-dot[b-j02ce5dzkl] {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-error);
    box-shadow: 0 0 0 2px var(--color-surface);
}

.sp-topbar-divider[b-j02ce5dzkl] {
    width: 1px;
    height: 1.5rem;
    background: color-mix(in oklab, var(--color-outline-variant) 70%, transparent);
    margin: 0 0.25rem;
}

/* User pill — meta on the left, gradient avatar on the right per
   the attachment's right-anchored profile pattern. */
.sp-topbar-user[b-j02ce5dzkl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.25rem 0.875rem;
    border-radius: 9999px;
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-silk-fast);
}
.sp-topbar-user:hover[b-j02ce5dzkl] {
    background: rgba(255, 255, 255, 0.5);
}

.sp-topbar-user-meta[b-j02ce5dzkl] {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.15;
    min-width: 0;
}
.sp-topbar-user-name[b-j02ce5dzkl] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
}
.sp-topbar-user-role[b-j02ce5dzkl] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    opacity: 0.75;
    margin-top: 1px;
    white-space: nowrap;
}

.sp-topbar-avatar[b-j02ce5dzkl] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
    border: 2px solid white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 12px -2px color-mix(in oklab, var(--color-primary) 35%, transparent);
}

/* ============================================================
   Main canvas — ml-280, pt-80 (5rem), p-10 (2.5rem)
   ============================================================ */

.sp-main[b-j02ce5dzkl] {
    margin-left: 280px;
    /* 5rem clears the fixed topbar; +2rem more gives the page-head
       breathing room so heavy action buttons (Send email / Actions
       on user-profile pages) don't visually crash into the topbar's
       bottom edge. */
    padding: 7rem 2.5rem 3rem 2.5rem;
    min-height: 100dvh;
}

/* Blazor error tray — keeps the original tonal treatment. */
#blazor-error-ui[b-j02ce5dzkl] {
    color-scheme: light only;
    background: var(--color-error-container);
    color: var(--color-on-error-container);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.875rem 1.25rem;
    box-shadow: 0 -6px 20px rgba(43, 52, 51, 0.08);
}
#blazor-error-ui .reload[b-j02ce5dzkl] {
    color: var(--color-on-error-container);
    font-weight: 700;
    margin-left: 0.5rem;
}
#blazor-error-ui .dismiss[b-j02ce5dzkl] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    opacity: 0.75;
}

/* ============================================================
   Mobile drawer — hamburger + off-canvas sidebar (CSS-only)

   On desktop the checkbox, hamburger, and backdrop are all hidden
   and the layout is unchanged. Below 1024px the sidebar becomes an
   off-canvas drawer that slides over the content; the topbar gains a
   hamburger and the main canvas reclaims the full width.

   NOTE: the previous narrow-screen rules collapsed the rail to 5rem
   and tried to hide labels via `.sp-nav-label` / `.sp-nav-link` —
   but those plain selectors never reach the <NavLink>-rendered
   anchors (see the ::deep explanation above), so the labels never
   actually hid and the menu clipped. A full-labelled drawer sidesteps
   the scope problem entirely: nothing needs hiding, it just slides in.
   ============================================================ */

/* Drawer plumbing — inert on desktop. */
.sp-drawer-toggle[b-j02ce5dzkl] { display: none; }
.sp-drawer-backdrop[b-j02ce5dzkl] { display: none; }

.sp-hamburger[b-j02ce5dzkl] {
    display: none; /* shown only in the mobile media query */
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background var(--transition-silk-fast),
        color var(--transition-silk-fast);
}
.sp-hamburger:hover[b-j02ce5dzkl] {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-primary);
}
.sp-hamburger .material-symbols-outlined[b-j02ce5dzkl] {
    font-size: 26px;
}

@media (max-width: 1024px) {
    /* Sidebar → off-canvas drawer (keeps its full labelled layout). */
    .sp-sidebar[b-j02ce5dzkl] {
        width: min(86vw, 320px);
        transform: translateX(-100%);
        transition: transform var(--transition-silk);
        will-change: transform;
    }
    .sp-drawer-toggle:checked ~ .sp-sidebar[b-j02ce5dzkl] {
        transform: translateX(0);
        box-shadow: 12px 0 48px rgba(15, 12, 30, 0.22);
    }

    /* Dim backdrop — sits under the drawer (z 50), over everything
       else. Hidden + non-interactive until the drawer opens. */
    .sp-drawer-backdrop[b-j02ce5dzkl] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(15, 12, 30, 0.38);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--transition-silk),
            visibility var(--transition-silk);
    }
    .sp-drawer-toggle:checked ~ .sp-drawer-backdrop[b-j02ce5dzkl] {
        opacity: 1;
        visibility: visible;
    }

    /* Hamburger appears; topbar + main reclaim the full width. */
    .sp-hamburger[b-j02ce5dzkl] {
        display: inline-flex;
    }
    .sp-topbar[b-j02ce5dzkl] {
        left: 0;
        padding: 0 1rem;
        gap: 0.5rem;
    }
    .sp-topbar-left[b-j02ce5dzkl] {
        gap: 0.75rem;
    }
    .sp-topbar-search[b-j02ce5dzkl] {
        max-width: 12rem;
    }
    .sp-topbar-user-meta[b-j02ce5dzkl] {
        display: none;
    }
    .sp-main[b-j02ce5dzkl] {
        margin-left: 0;
        padding: 6.5rem 1.25rem 2rem 1.25rem;
    }
}

/* Phones — drop the search field and tighten the title so the
   hamburger + brand + user avatar fit without crowding. */
@media (max-width: 640px) {
    .sp-topbar-search[b-j02ce5dzkl] {
        display: none;
    }
    .sp-topbar-title[b-j02ce5dzkl] {
        font-size: 1.0625rem;
    }
}

/* Honour reduced-motion: no slide, just appear. */
@media (prefers-reduced-motion: reduce) {
    .sp-sidebar[b-j02ce5dzkl],
    .sp-drawer-backdrop[b-j02ce5dzkl] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jgmqfqenzs],
.components-reconnect-repeated-attempt-visible[b-jgmqfqenzs],
.components-reconnect-failed-visible[b-jgmqfqenzs],
.components-pause-visible[b-jgmqfqenzs],
.components-resume-failed-visible[b-jgmqfqenzs],
.components-rejoining-animation[b-jgmqfqenzs] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-retrying[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-failed[b-jgmqfqenzs],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-jgmqfqenzs] {
    display: block;
}


#components-reconnect-modal[b-jgmqfqenzs] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-jgmqfqenzs 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-jgmqfqenzs 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-jgmqfqenzs 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-jgmqfqenzs]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-jgmqfqenzs 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-jgmqfqenzs {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-jgmqfqenzs {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-jgmqfqenzs {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-jgmqfqenzs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-jgmqfqenzs] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-jgmqfqenzs] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-jgmqfqenzs] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-jgmqfqenzs] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-jgmqfqenzs] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-jgmqfqenzs] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-jgmqfqenzs 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-jgmqfqenzs] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-jgmqfqenzs {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/BugReports/BugReportDetail.razor.rz.scp.css */
/* Bug report detail — conversation thread + add-note form. */

.br-thread[b-b2uzbvhzh4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.br-thread-item[b-b2uzbvhzh4] {
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low, #f6f6f6);
}
.br-thread-admin[b-b2uzbvhzh4] {
    border-left: 3px solid var(--color-primary);
}
.br-thread-user[b-b2uzbvhzh4] {
    border-left: 3px solid var(--color-outline-variant);
}

.br-thread-meta[b-b2uzbvhzh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.br-thread-author[b-b2uzbvhzh4] {
    font-weight: 700;
    font-size: 0.85rem;
}
.br-thread-time[b-b2uzbvhzh4] {
    color: var(--color-on-surface-variant);
    font-size: 0.75rem;
    margin-left: auto;
}
.br-thread-body[b-b2uzbvhzh4] {
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 0.9rem;
}

.br-note-form[b-b2uzbvhzh4] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.br-note-visible[b-b2uzbvhzh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    cursor: pointer;
}
.br-note-visible input[b-b2uzbvhzh4] { width: 1.05rem; height: 1.05rem; }

/* Screenshots grid — thumbnails, click to enlarge */
.br-attach-grid[b-b2uzbvhzh4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
.br-attach-item[b-b2uzbvhzh4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.br-thumb-btn[b-b2uzbvhzh4] {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--color-outline-variant);
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--color-surface-container-low, #1b1b1f);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-variant);
    transition: border-color 0.12s ease;
}
.br-thumb-btn:hover[b-b2uzbvhzh4] { border-color: var(--color-primary); }
.br-thumb-btn img[b-b2uzbvhzh4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Full-size lightbox */
.br-full-modal[b-b2uzbvhzh4] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.8);
}
.br-full-modal img[b-b2uzbvhzh4] {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.br-full-close[b-b2uzbvhzh4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
}
.br-attach-note[b-b2uzbvhzh4] {
    font-size: 0.85rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
    white-space: pre-wrap;
    margin: 0;
}

/* Changelog / release-note linking */
.br-note-links[b-b2uzbvhzh4] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.br-note-link[b-b2uzbvhzh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low, #f6f6f6);
}
.br-note-link-text[b-b2uzbvhzh4] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.br-note-shipped[b-b2uzbvhzh4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-tertiary-container, #d7f0d9);
    color: var(--color-on-tertiary-container, #0d3814);
}
.br-note-state-icon[b-b2uzbvhzh4] {
    font-size: 1rem;
    line-height: 1;
}
.br-note-unlink[b-b2uzbvhzh4] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.br-note-unlink:hover:not(:disabled)[b-b2uzbvhzh4] {
    background: var(--color-surface-container-high, #e7e7e7);
    color: var(--color-error, #b3261e);
}
.br-note-unlink:disabled[b-b2uzbvhzh4] { opacity: 0.4; cursor: default; }
.br-note-unlink .material-symbols-outlined[b-b2uzbvhzh4] { font-size: 1.2rem; }

.br-note-empty[b-b2uzbvhzh4] {
    color: var(--color-on-surface-variant);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.br-note-add[b-b2uzbvhzh4] { margin-bottom: 1rem; }

.br-note-existing[b-b2uzbvhzh4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-outline-variant);
}
.br-note-existing-row[b-b2uzbvhzh4] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.br-note-existing-row .input[b-b2uzbvhzh4] { flex: 1 1 auto; min-width: 0; }
.br-note-existing-row .btn-secondary[b-b2uzbvhzh4] { flex: 0 0 auto; }
/* /Components/Pages/BugReports/BugReportsList.razor.rz.scp.css */
/* Bug reports — flat list rows + screenshot quick-view modal. */

/* "User responded" prominence */
.brl-responded-banner[b-o0o0yjwit5] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface, transparent));
}
.brl-responded-icon[b-o0o0yjwit5] { color: var(--color-primary); font-size: 26px; flex-shrink: 0; }
.brl-responded-text[b-o0o0yjwit5] { flex: 1; }

.chip-responded[b-o0o0yjwit5] {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}
.chip-waiting[b-o0o0yjwit5] {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

.brl-list[b-o0o0yjwit5] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem; /* clear the filter card — no overlap */
}

.brl-row[b-o0o0yjwit5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface, #16161c);
    border: 1px solid var(--color-outline-variant, rgba(255, 255, 255, 0.1));
    border-radius: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.brl-row:hover[b-o0o0yjwit5] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface, #16161c));
}
.brl-row-hidden[b-o0o0yjwit5] { opacity: 0.5; }

.brl-row-kind[b-o0o0yjwit5] {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.brl-row-main[b-o0o0yjwit5] { flex: 1; min-width: 0; }
.brl-row-title[b-o0o0yjwit5] {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brl-row-meta[b-o0o0yjwit5] {
    color: var(--color-on-surface-variant);
    font-size: 0.8rem;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brl-row-actions[b-o0o0yjwit5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.brl-row-btn[b-o0o0yjwit5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    border: 1px solid var(--color-outline-variant);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.brl-row-btn:hover[b-o0o0yjwit5] { color: var(--color-on-surface); background: color-mix(in srgb, var(--color-on-surface) 8%, transparent); }
.brl-row-btn:disabled[b-o0o0yjwit5] { opacity: 0.5; cursor: default; }
.brl-row-btn .material-symbols-outlined[b-o0o0yjwit5] { font-size: 19px; }

.brl-row-chevron[b-o0o0yjwit5] { color: var(--color-on-surface-variant); font-size: 22px; }

.brl-row-skeleton[b-o0o0yjwit5] {
    height: 4rem;
    cursor: default;
    animation: brl-pulse-b-o0o0yjwit5 1.4s ease-in-out infinite;
}
@keyframes brl-pulse-b-o0o0yjwit5 { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

@media (max-width: 640px) {
    .brl-row-meta[b-o0o0yjwit5] { white-space: normal; }
}

.br-shot-modal[b-o0o0yjwit5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.78);
    animation: br-shot-fade-b-o0o0yjwit5 0.16s ease-out;
}

.br-shot-modal-inner[b-o0o0yjwit5] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
}

.br-shot-modal-inner img[b-o0o0yjwit5] {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.br-shot-close[b-o0o0yjwit5] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: var(--color-surface, #fff);
    color: var(--color-on-surface, #1a1a1a);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

@keyframes br-shot-fade-b-o0o0yjwit5 { from { opacity: 0; } to { opacity: 1; } }
/* /Components/Pages/Dev/Components.razor.rz.scp.css */
/* ============================================================
   Components zoo — scoped styles for the /dev/components page.

   Every class is `cz-*` (component zoo) so this stylesheet is
   self-contained. Tokens (--color-*, --silk-edge-*, --shadow-silk-*,
   --transition-silk*) come from app.css + admin-pages.css. Nothing
   here leaks to other pages.
   ============================================================ */

/* ============================================================
   Hero
   ============================================================ */

.cz-hero[b-wot3abv40m] {
    margin-bottom: 3rem;
    max-width: 48rem;
}

.cz-eyebrow[b-wot3abv40m] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.cz-display[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-display-shimmer[b-wot3abv40m] {
    background: linear-gradient(110deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cz-sub[b-wot3abv40m] {
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0 0;
}

/* ============================================================
   Section frames
   ============================================================ */

.cz-section[b-wot3abv40m] {
    margin-bottom: 3rem;
}
.cz-section-head[b-wot3abv40m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cz-section-icon[b-wot3abv40m] {
    font-size: 24px;
    color: var(--color-primary);
}
.cz-section-title[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-on-surface);
}

/* ============================================================
   .cz-glass — the base card recipe (every component sits in one)
   ============================================================ */

.cz-glass[b-wot3abv40m] {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--silk-edge);
    box-shadow: var(--shadow-silk-rest);
    border-radius: 2rem;
    transition:
        border-color var(--transition-silk),
        box-shadow var(--transition-silk);
    overflow: hidden;
    isolation: isolate;
}
.cz-glass:hover[b-wot3abv40m] {
    border-color: var(--silk-edge-strong);
    box-shadow: var(--shadow-silk-lift);
}

:root[data-theme*="-dark"] .cz-glass[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-surface-container-lowest) 70%, transparent);
    border-color: color-mix(in oklab, white 8%, transparent);
}

.cz-pad[b-wot3abv40m] { padding: 2rem; }

.cz-card-head[b-wot3abv40m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cz-card-head-row[b-wot3abv40m] {
    flex-wrap: wrap;
    align-items: center;
}
.cz-card-title[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-card-sub[b-wot3abv40m] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0;
}

/* ============================================================
   Layout helpers
   ============================================================ */

.cz-bento[b-wot3abv40m] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}
.cz-two-up[b-wot3abv40m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.cz-three-up[b-wot3abv40m] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.cz-four-up[b-wot3abv40m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1100px) {
    .cz-bento[b-wot3abv40m], .cz-two-up[b-wot3abv40m], .cz-three-up[b-wot3abv40m], .cz-four-up[b-wot3abv40m] {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 720px) {
    .cz-bento[b-wot3abv40m], .cz-two-up[b-wot3abv40m], .cz-three-up[b-wot3abv40m], .cz-four-up[b-wot3abv40m] {
        grid-template-columns: 1fr;
    }
}

.cz-bento-list[b-wot3abv40m] { padding: 2rem; }
.cz-bento-health[b-wot3abv40m] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.cz-mt[b-wot3abv40m]    { margin-top: 1.5rem !important; }
.cz-mt-2[b-wot3abv40m]  { margin-top: 0.5rem !important; }

/* ============================================================
   Accent palettes — shared with the rest of the admin
   ============================================================ */
.cz-accent-primary[b-wot3abv40m]   { background: color-mix(in oklab, var(--color-primary-container) 50%, transparent);
                       color: var(--color-primary); }
.cz-accent-secondary[b-wot3abv40m] { background: color-mix(in oklab, var(--color-secondary-container) 60%, transparent);
                       color: var(--color-secondary); }
.cz-accent-tertiary[b-wot3abv40m]  { background: color-mix(in oklab, var(--color-tertiary-container) 65%, transparent);
                       color: var(--color-tertiary); }
.cz-accent-error[b-wot3abv40m]     { background: color-mix(in oklab, var(--color-error-container) 60%, transparent);
                       color: var(--color-error); }
.cz-accent-muted[b-wot3abv40m]     { background: color-mix(in oklab, var(--color-surface-container-highest) 70%, transparent);
                       color: var(--color-on-surface-variant); }

.cz-primary[b-wot3abv40m]   { color: var(--color-primary); }
.cz-secondary[b-wot3abv40m] { color: var(--color-secondary); }
.cz-tertiary[b-wot3abv40m]  { color: var(--color-tertiary); }
.cz-error[b-wot3abv40m]     { color: var(--color-error); }

.cz-center-text[b-wot3abv40m] { text-align: center; }
.cz-center-block[b-wot3abv40m] { margin-left: auto; margin-right: auto; max-width: 28rem; }
.cz-mono[b-wot3abv40m] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
           font-variant-numeric: tabular-nums; }

/* ============================================================
   Pills — REAL-TIME / WEEKLY / MONTHLY toggle group
   ============================================================ */
.cz-pill-group[b-wot3abv40m] { display: flex; gap: 0.5rem; }
.cz-pill[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: white;
    border: 1px solid var(--silk-edge);
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background var(--transition-silk-fast);
}
.cz-pill:hover[b-wot3abv40m] { background: var(--color-surface-container-low); }
.cz-pill-active[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-primary-container) 55%, transparent);
    color: var(--color-primary);
    border-color: transparent;
}

/* ============================================================
   Ecosystem list rows (Data Ecosystem)
   ============================================================ */
.cz-eco-list[b-wot3abv40m] { display: flex; flex-direction: column; gap: 0.625rem; }

.cz-eco-row[b-wot3abv40m] {
    display: grid;
    grid-template-columns: 1fr auto 1.25rem;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid transparent;
    transition: background var(--transition-silk),
                border-color var(--transition-silk);
    cursor: pointer;
}
.cz-eco-row:hover[b-wot3abv40m] {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--silk-edge);
}
.cz-eco-left[b-wot3abv40m] { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.cz-eco-icon[b-wot3abv40m] {
    width: 3rem; height: 3rem;
    border-radius: 0.875rem;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.cz-eco-icon .material-symbols-outlined[b-wot3abv40m] {
    font-size: 22px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.cz-eco-name[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-eco-meta[b-wot3abv40m] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0.125rem 0 0;
}
.cz-eco-right[b-wot3abv40m] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem;
                min-width: 7rem; }
.cz-eco-count[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-on-surface);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.cz-chev[b-wot3abv40m] {
    font-size: 20px;
    color: var(--color-on-surface-variant);
    opacity: 0.5;
    transition: opacity var(--transition-silk),
                color var(--transition-silk),
                transform var(--transition-silk);
}
.cz-eco-row:hover .cz-chev[b-wot3abv40m],
.cz-list-row:hover .cz-chev[b-wot3abv40m] {
    opacity: 1;
    color: var(--color-primary);
    transform: translateX(2px);
}

/* ============================================================
   Bars
   ============================================================ */
.cz-bar[b-wot3abv40m] {
    width: 7rem;
    height: 6px;
    background: var(--color-surface-container-highest);
    border-radius: 9999px;
    overflow: hidden;
}
.cz-bar-tall[b-wot3abv40m] { height: 10px; width: 100%; }
.cz-bar-fill[b-wot3abv40m] {
    height: 100%;
    border-radius: inherit;
    transition: width var(--transition-silk-slow);
}
.cz-bar-primary[b-wot3abv40m]   { background: var(--color-primary); }
.cz-bar-secondary[b-wot3abv40m] { background: var(--color-secondary); }
.cz-bar-tertiary[b-wot3abv40m]  { background: var(--color-tertiary); }
.cz-bar-error[b-wot3abv40m]     { background: var(--color-error); }

/* ============================================================
   System Health card — circular SVG progress
   ============================================================ */
.cz-card-glow[b-wot3abv40m] {
    position: absolute;
    top: -3rem; right: -3rem;
    width: 12rem; height: 12rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--color-primary) 20%, transparent);
    filter: blur(40px);
    z-index: -1;
}
.cz-circular-wrap[b-wot3abv40m] {
    position: relative;
    align-self: center;
    width: 10rem; height: 10rem;
    margin: 0.5rem 0 1.25rem;
}
.cz-circular[b-wot3abv40m] { width: 100%; height: 100%; transform: rotate(-90deg); }
.cz-circular-track[b-wot3abv40m] { stroke: var(--color-surface-container-highest); }
.cz-circular-fill[b-wot3abv40m]  { stroke: var(--color-primary);
                     transition: stroke-dashoffset 1s var(--ease-silk); }
.cz-circular-inner[b-wot3abv40m] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.125rem;
}
.cz-circular-value[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.cz-circular-label[b-wot3abv40m] {
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-on-surface-variant);
}
.cz-health-stats[b-wot3abv40m] {
    display: flex; flex-direction: column;
    gap: 0.5rem; margin-top: auto;
}
.cz-health-row[b-wot3abv40m] {
    display: flex; align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
}
.cz-health-label[b-wot3abv40m] { color: var(--color-on-surface-variant); }
.cz-health-value[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
}
.cz-health-pulse[b-wot3abv40m] {
    display: flex; align-items: center; gap: 0.5rem;
    padding-top: 0.75rem;
    font-size: 0.75rem; font-weight: 700;
    color: var(--color-secondary);
}
.cz-pulse-dot[b-wot3abv40m] {
    width: 0.5rem; height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-secondary);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-secondary) 50%, transparent);
    animation: cz-pulse-b-wot3abv40m 2s ease-out infinite;
}
@keyframes cz-pulse-b-wot3abv40m {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-secondary) 50%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-secondary) 0%, transparent); }
}

/* ============================================================
   Member Directory table
   ============================================================ */
.cz-table-card[b-wot3abv40m] { padding: 0; }
.cz-table-card .cz-card-head[b-wot3abv40m] { padding: 2rem 2rem 1.25rem; margin-bottom: 0; }
.cz-table-tools[b-wot3abv40m] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.cz-search[b-wot3abv40m] {
    position: relative;
    display: flex; align-items: center;
}
.cz-search .material-symbols-outlined[b-wot3abv40m] {
    position: absolute;
    left: 0.75rem; top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
}
.cz-search input[b-wot3abv40m] {
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    border-radius: 0.875rem;
    border: 1px solid var(--silk-edge);
    background: var(--color-surface-container-low);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    width: 16rem;
    outline: none;
    transition: border-color var(--transition-silk-fast),
                box-shadow var(--transition-silk-fast);
}
.cz-search input:focus[b-wot3abv40m] {
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.cz-btn-primary[b-wot3abv40m], .cz-btn-secondary[b-wot3abv40m], .cz-btn-outline[b-wot3abv40m], .cz-btn-ghost[b-wot3abv40m], .cz-btn-danger[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.875rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition:
        transform var(--transition-silk-fast),
        background var(--transition-silk-fast),
        box-shadow var(--transition-silk-fast),
        border-color var(--transition-silk-fast);
}
.cz-btn-primary[b-wot3abv40m] {
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1.125rem;
    box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.cz-btn-primary:hover:not(:disabled)[b-wot3abv40m] {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -4px color-mix(in oklab, var(--color-primary) 45%, transparent);
}
.cz-btn-primary:disabled[b-wot3abv40m] { opacity: 0.45; cursor: not-allowed; }
.cz-btn-block[b-wot3abv40m] { width: 100%; justify-content: center; padding: 0.75rem 1rem; }

.cz-btn-secondary[b-wot3abv40m] {
    background: white;
    border: 1px solid var(--silk-edge-strong);
    color: var(--color-on-surface);
}
.cz-btn-secondary:hover[b-wot3abv40m] { background: var(--color-surface-container-low); }
.cz-btn-secondary .material-symbols-outlined[b-wot3abv40m] { font-size: 16px; }

.cz-btn-outline[b-wot3abv40m] {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    width: 100%; justify-content: center;
    padding: 0.625rem 1rem;
}
.cz-btn-outline:hover[b-wot3abv40m] { background: color-mix(in oklab, var(--color-primary) 8%, transparent); }

.cz-btn-ghost[b-wot3abv40m] {
    background: transparent;
    color: var(--color-on-surface-variant);
}
.cz-btn-ghost:hover[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-primary-container) 30%, transparent);
    color: var(--color-primary);
}

.cz-btn-danger[b-wot3abv40m] {
    background: var(--color-error);
    color: white;
    box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--color-error) 35%, transparent);
}
.cz-btn-danger:hover[b-wot3abv40m] {
    transform: translateY(-1px);
}

.cz-table-scroll[b-wot3abv40m] {
    overflow-x: auto;
    border-top: 1px solid var(--silk-edge);
}
.cz-table[b-wot3abv40m] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}
.cz-table thead th[b-wot3abv40m] {
    padding: 1rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    background: rgba(255, 255, 255, 0.4);
}
.cz-table thead th:first-child[b-wot3abv40m] { padding-left: 2rem; }
.cz-table thead th:last-child[b-wot3abv40m]  { padding-right: 2rem; }
.cz-table thead th.is-right[b-wot3abv40m]    { text-align: right; }
.cz-table tbody tr[b-wot3abv40m] {
    border-top: 1px solid color-mix(in oklab, white 50%, transparent);
    transition: background var(--transition-silk);
}
.cz-table tbody tr:hover[b-wot3abv40m] { background: rgba(255, 255, 255, 0.45); }
.cz-table tbody td[b-wot3abv40m] { padding: 1rem 1.25rem; color: var(--color-on-surface); }
.cz-table tbody td:first-child[b-wot3abv40m] { padding-left: 2rem; }
.cz-table tbody td:last-child[b-wot3abv40m]  { padding-right: 2rem; }
.cz-table tbody td.is-right[b-wot3abv40m] { text-align: right; }
.cz-table-muted[b-wot3abv40m] { color: var(--color-on-surface-variant); font-size: 0.8125rem; }

.cz-table-account[b-wot3abv40m] { display: flex; align-items: center; gap: 0.875rem; }
.cz-avatar[b-wot3abv40m] {
    flex-shrink: 0;
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    display: grid; place-items: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.875rem;
}
.cz-table-name[b-wot3abv40m] {
    font-weight: 600; color: var(--color-on-surface);
    margin: 0; line-height: 1.25;
}
.cz-table-id[b-wot3abv40m] { font-size: 0.75rem; color: var(--color-on-surface-variant); margin: 0; }

.cz-inline-bar[b-wot3abv40m] { display: flex; align-items: center; gap: 0.5rem; }
.cz-inline-bar .cz-bar[b-wot3abv40m] { width: 4rem; }
.cz-inline-bar-val[b-wot3abv40m] {
    font-size: 0.75rem; font-weight: 700;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
}

.cz-icon-btn[b-wot3abv40m] {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 0;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background var(--transition-silk-fast), color var(--transition-silk-fast);
}
.cz-icon-btn:hover[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-primary-container) 25%, transparent);
    color: var(--color-primary);
}
.cz-icon-btn .material-symbols-outlined[b-wot3abv40m] { font-size: 18px; }

.cz-table-foot[b-wot3abv40m] {
    display: flex; align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--silk-edge);
    background: rgba(255, 255, 255, 0.35);
}
.cz-table-foot-meta[b-wot3abv40m] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}
.cz-table-foot-meta strong[b-wot3abv40m] { color: var(--color-on-surface); }

/* ============================================================
   Pagination
   ============================================================ */
.cz-pagination[b-wot3abv40m] { display: flex; gap: 0.375rem; align-items: center; }
.cz-page-btn[b-wot3abv40m] {
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.625rem;
    background: white;
    border: 1px solid var(--silk-edge);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8125rem;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast),
                box-shadow var(--transition-silk-fast);
}
.cz-page-btn:hover:not(:disabled)[b-wot3abv40m] {
    background: var(--color-surface-container-low);
    color: var(--color-primary);
}
.cz-page-btn:disabled[b-wot3abv40m] { opacity: 0.3; cursor: not-allowed; }
.cz-page-btn-active[b-wot3abv40m] {
    background: var(--color-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.cz-page-btn-active:hover:not(:disabled)[b-wot3abv40m] {
    background: var(--color-primary);
    color: white;
}
.cz-page-btn .material-symbols-outlined[b-wot3abv40m] { font-size: 18px; }
.cz-page-ellipsis[b-wot3abv40m] {
    color: var(--color-on-surface-variant);
    padding: 0 0.25rem;
}

/* ============================================================
   Simple list (in two-up)
   ============================================================ */
.cz-list[b-wot3abv40m] {
    display: flex; flex-direction: column;
    margin-top: 1.25rem;
}
.cz-list-row[b-wot3abv40m] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid color-mix(in oklab, white 55%, transparent);
    cursor: pointer;
}
.cz-list-row:first-child[b-wot3abv40m] { border-top: 0; padding-top: 0; }
.cz-list-icon[b-wot3abv40m] {
    width: 2.75rem; height: 2.75rem;
    border-radius: 1rem;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.cz-list-icon .material-symbols-outlined[b-wot3abv40m] {
    font-size: 22px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.cz-list-meta[b-wot3abv40m] { min-width: 0; }
.cz-list-title[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-list-sub[b-wot3abv40m] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

/* ============================================================
   Compact / read-only table
   ============================================================ */
.cz-table-compact[b-wot3abv40m] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
    margin-top: 1.25rem;
}
.cz-table-compact thead th[b-wot3abv40m] {
    padding: 0.625rem 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    border-bottom: 1px solid var(--silk-edge);
}
.cz-table-compact tbody td[b-wot3abv40m] {
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in oklab, white 55%, transparent);
    color: var(--color-on-surface);
}
.cz-table-compact tbody tr:last-child td[b-wot3abv40m] { border-bottom: 0; }
.cz-table-compact .is-right[b-wot3abv40m] { text-align: right; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.cz-overline[b-wot3abv40m] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-on-surface-variant);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.cz-overline.cz-primary[b-wot3abv40m] { color: var(--color-primary); }
.cz-breadcrumbs[b-wot3abv40m] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}
.cz-breadcrumbs a[b-wot3abv40m] {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: color var(--transition-silk-fast);
}
.cz-breadcrumbs a:hover[b-wot3abv40m] { color: var(--color-primary); }
.cz-breadcrumbs .material-symbols-outlined[b-wot3abv40m] {
    font-size: 16px;
    opacity: 0.5;
}
.cz-breadcrumbs-current[b-wot3abv40m] {
    color: var(--color-primary);
    font-weight: 700;
}

/* ============================================================
   Tabs — pilled + underlined
   ============================================================ */
.cz-tabs-pill[b-wot3abv40m] {
    display: inline-flex;
    padding: 0.3125rem;
    border-radius: 9999px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--silk-edge);
    gap: 0.25rem;
}
.cz-tab-pill[b-wot3abv40m] {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: transparent;
    border: 0;
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast);
}
.cz-tab-pill:hover[b-wot3abv40m] { color: var(--color-primary); }
.cz-tab-pill-active[b-wot3abv40m] {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.cz-tab-pill-active:hover[b-wot3abv40m] { color: white; }

.cz-tabs-line[b-wot3abv40m] {
    display: flex; gap: 2rem;
    border-bottom: 1px solid var(--color-outline-variant);
}
.cz-tab-line[b-wot3abv40m] {
    padding: 0.75rem 0.25rem;
    background: transparent;
    border: 0;
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-silk-fast),
                border-color var(--transition-silk-fast);
}
.cz-tab-line:hover[b-wot3abv40m] { color: var(--color-primary); }
.cz-tab-line-active[b-wot3abv40m] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 700;
}

/* ============================================================
   Status badges (filled / outlined / ghost)
   ============================================================ */
.cz-chip-row[b-wot3abv40m] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cz-badge[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}
/* Soft (pastel container) — used in dashboard tables */
.cz-badge-success[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-secondary-container) 60%, transparent);
    color: var(--color-secondary);
}
.cz-badge-error[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-error-container) 70%, transparent);
    color: var(--color-error);
}
.cz-badge-warn[b-wot3abv40m] {
    background: color-mix(in oklab, var(--color-tertiary-container) 70%, transparent);
    color: var(--color-tertiary);
}
/* Solid filled — design pack's "FILLED BADGES" */
.cz-badge-success-solid[b-wot3abv40m] { background: var(--color-secondary); color: white; }
.cz-badge-primary-solid[b-wot3abv40m] { background: var(--color-primary);   color: white; }
.cz-badge-error-solid[b-wot3abv40m]   { background: var(--color-error);     color: white; }
.cz-badge-warn-solid[b-wot3abv40m]    { background: var(--color-tertiary);  color: white; }

/* Outlined tags */
.cz-tag[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border-radius: 9999px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid;
}
.cz-tag-success[b-wot3abv40m] { color: var(--color-secondary); border-color: var(--color-secondary); }
.cz-tag-primary[b-wot3abv40m] { color: var(--color-primary);   border-color: var(--color-primary); }
.cz-tag-error[b-wot3abv40m]   { color: var(--color-error);     border-color: var(--color-error); }
.cz-tag-muted[b-wot3abv40m]   { color: var(--color-on-surface-variant); border-color: var(--color-outline); }

/* Ghost pills — square-radius, fill-container, label-caps */
.cz-pill-ghost[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* ============================================================
   Forms — inputs, select, segmented, checkbox, radio, textarea
   ============================================================ */
.cz-form-field[b-wot3abv40m] { display: flex; flex-direction: column; gap: 0.5rem;
                 margin-top: 1.25rem; }
.cz-form-label[b-wot3abv40m] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}
.cz-form-grid[b-wot3abv40m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.cz-input[b-wot3abv40m] {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border-radius: 1rem;
    border: 1px solid var(--silk-edge);
    background: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    outline: none;
    transition:
        border-color var(--transition-silk-fast),
        background var(--transition-silk-fast),
        box-shadow var(--transition-silk-fast);
}
.cz-input[b-wot3abv40m]::placeholder { color: var(--color-on-surface-variant); opacity: 0.55; }
.cz-input:focus[b-wot3abv40m] {
    background: white;
    border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.cz-input-select[b-wot3abv40m] {
    appearance: none;
    -webkit-appearance: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25 7 8.75 10.5 5.25' stroke='%23494552' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        right 1rem center / 14px no-repeat,
        rgba(255, 255, 255, 0.55);
    padding-right: 2.5rem;
}
.cz-textarea[b-wot3abv40m] { resize: vertical; min-height: 6rem; }

.cz-segmented[b-wot3abv40m] {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--silk-edge);
}
.cz-seg[b-wot3abv40m] {
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast);
}
.cz-seg-active[b-wot3abv40m] {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(15, 12, 30, 0.06);
}

.cz-checks[b-wot3abv40m] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.cz-check[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-on-surface);
    cursor: pointer;
}
.cz-check input[b-wot3abv40m] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.cz-multiselect[b-wot3abv40m] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--silk-edge);
    flex-wrap: wrap;
}
.cz-multiselect-chip[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.625rem;
    background: color-mix(in oklab, var(--color-primary-container) 60%, transparent);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
}
.cz-multiselect input[b-wot3abv40m] {
    flex: 1;
    min-width: 6rem;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}
.cz-multiselect .material-symbols-outlined[b-wot3abv40m] {
    margin-left: auto;
    color: var(--color-on-surface-variant);
    font-size: 18px;
}

.cz-form-actions[b-wot3abv40m] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

/* ============================================================
   Progress card — linear stack
   ============================================================ */
.cz-progress-card[b-wot3abv40m] { display: flex; flex-direction: column; gap: 1rem; }
.cz-progress-stack[b-wot3abv40m] { display: flex; flex-direction: column; gap: 1rem; }
.cz-progress-row[b-wot3abv40m] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin-bottom: 0.375rem;
}
.cz-progress-row span:last-child[b-wot3abv40m] {
    font-variant-numeric: tabular-nums;
    color: var(--color-on-surface-variant);
}

/* Circular conic — pure CSS, no SVG. */
.cz-conic-progress[b-wot3abv40m] {
    position: relative;
    width: 8rem; height: 8rem;
    border-radius: 50%;
    margin: 0.5rem 0;
    background:
        radial-gradient(closest-side, white 75%, transparent 76% 100%),
        conic-gradient(var(--color-primary) calc(var(--cz-pct) * 1%),
                       var(--color-surface-container-highest) 0);
    display: grid;
    place-items: center;
}
.cz-conic-value[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.cz-center[b-wot3abv40m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Spinner + dots */
.cz-spinner-row[b-wot3abv40m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 0.75rem 0;
}
.cz-spinner[b-wot3abv40m] {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    border: 4px solid color-mix(in oklab, var(--color-primary) 18%, transparent);
    border-top-color: var(--color-primary);
    animation: cz-spin-b-wot3abv40m 1.2s linear infinite;
}
@keyframes cz-spin-b-wot3abv40m { to { transform: rotate(360deg); } }

.cz-dots[b-wot3abv40m] {
    display: flex; gap: 0.4375rem; align-items: center;
}
.cz-dots span[b-wot3abv40m] {
    width: 0.625rem; height: 0.625rem;
    border-radius: 9999px;
    background: var(--color-primary);
    opacity: 0.4;
    animation: cz-bounce-b-wot3abv40m 1s ease-in-out infinite;
}
.cz-dots span:nth-child(2)[b-wot3abv40m] { animation-delay: 0.15s; opacity: 0.7; }
.cz-dots span:nth-child(3)[b-wot3abv40m] { animation-delay: 0.3s;  opacity: 1; }
@keyframes cz-bounce-b-wot3abv40m {
    0%, 80%, 100% { transform: scale(0.6); }
    40%           { transform: scale(1); }
}

/* Skeletons */
.cz-skel[b-wot3abv40m] {
    background: linear-gradient(90deg,
        var(--color-surface-container) 0%,
        var(--color-surface-container-high) 50%,
        var(--color-surface-container) 100%);
    background-size: 200% 100%;
    animation: cz-shimmer-b-wot3abv40m 1.5s ease-in-out infinite;
    border-radius: 0.625rem;
}
@keyframes cz-shimmer-b-wot3abv40m {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.cz-skel-row[b-wot3abv40m] { display: flex; align-items: center; gap: 0.875rem; margin: 0.75rem 0; }
.cz-skel-stack[b-wot3abv40m] { flex: 1; display: flex; flex-direction: column; gap: 0.4375rem; }
.cz-skel-square[b-wot3abv40m] { width: 3rem; height: 3rem; border-radius: 0.875rem; }
.cz-skel-line[b-wot3abv40m] { height: 0.625rem; }
.cz-skel-line.is-short[b-wot3abv40m] { width: 60%; }
.cz-skel-block[b-wot3abv40m] { height: 5rem; margin-top: 0.5rem; }

/* ============================================================
   Content cards
   ============================================================ */
.cz-profile-card[b-wot3abv40m] { position: relative; }
.cz-avatar-xl[b-wot3abv40m] {
    width: 5.5rem; height: 5.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    color: white;
    display: grid; place-items: center;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.75rem;
    border: 4px solid white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 20px -4px color-mix(in oklab, var(--color-primary) 35%, transparent);
    margin-bottom: 0.5rem;
}
.cz-presence[b-wot3abv40m] {
    position: absolute;
    top: 7.25rem;
    left: 50%;
    transform: translateX(2.25rem);
    width: 0.875rem; height: 0.875rem;
    border-radius: 9999px;
    background: var(--color-secondary);
    border: 2px solid white;
}

.cz-media-card[b-wot3abv40m] { padding: 0; }
.cz-media-image[b-wot3abv40m] {
    position: relative;
    height: 11rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--color-primary-container) 70%, transparent),
        color-mix(in oklab, var(--color-secondary-container) 60%, transparent));
    display: grid; place-items: center;
    color: white;
}
.cz-media-image > .material-symbols-outlined[b-wot3abv40m] { font-size: 48px; }
.cz-media-dim[b-wot3abv40m] {
    position: absolute;
    top: 1rem; right: 1rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-on-surface);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.cz-pricing-card[b-wot3abv40m] {
    border-color: color-mix(in oklab, var(--color-primary) 25%, var(--silk-edge));
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%,
            color-mix(in oklab, var(--color-primary-container) 40%, transparent),
            transparent 60%),
        rgba(255, 255, 255, 0.7);
}
.cz-pricing-amount[b-wot3abv40m] {
    text-align: center;
    margin: 1rem 0 0.75rem;
}
.cz-pricing-num[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
}
.cz-pricing-period[b-wot3abv40m] {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}
.cz-pricing-list[b-wot3abv40m] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.cz-pricing-list li[b-wot3abv40m] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}
.cz-pricing-list .material-symbols-outlined[b-wot3abv40m] {
    font-size: 18px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ============================================================
   Feature cards (3-up)
   ============================================================ */
.cz-feature[b-wot3abv40m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.cz-feature-icon[b-wot3abv40m] {
    width: 4rem; height: 4rem;
    border-radius: 9999px;
    display: grid; place-items: center;
    margin-bottom: 0.5rem;
    transition: transform var(--transition-silk-slow);
}
.cz-feature-icon .material-symbols-outlined[b-wot3abv40m] { font-size: 28px; }
.cz-feature:hover .cz-feature-icon[b-wot3abv40m] { transform: scale(1.08); }
.cz-feature-cta[b-wot3abv40m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: gap var(--transition-silk-fast);
}
.cz-feature:hover .cz-feature-cta[b-wot3abv40m] { gap: 0.875rem; }
.cz-feature-cta .material-symbols-outlined[b-wot3abv40m] { font-size: 16px; }

/* ============================================================
   Heading samples
   ============================================================ */
.cz-heading-card[b-wot3abv40m] { display: flex; flex-direction: column; gap: 2.5rem; }
.cz-heading-block[b-wot3abv40m] { display: flex; flex-direction: column; gap: 0.375rem; }
.cz-heading-indent[b-wot3abv40m] {
    padding-left: 1.5rem;
    border-left: 4px solid var(--color-primary);
}
.cz-headline-lg[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-headline-md[b-wot3abv40m] {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--color-on-surface);
    margin: 0;
}
.cz-headline-underline[b-wot3abv40m] {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 2px;
}
.cz-body-lg[b-wot3abv40m] {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
    margin: 0;
}
.cz-body-md[b-wot3abv40m] {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-on-surface-variant);
    margin: 0;
}

/* ============================================================
   Iconography grid
   ============================================================ */
.cz-icon-grid[b-wot3abv40m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 1.25rem;
}
.cz-icon-cell[b-wot3abv40m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.cz-icon-tile[b-wot3abv40m] {
    width: 3rem; height: 3rem;
    border-radius: 0.875rem;
    display: grid; place-items: center;
}
.cz-icon-tile .material-symbols-outlined[b-wot3abv40m] { font-size: 22px; }
.cz-icon-label[b-wot3abv40m] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    letter-spacing: 0.04em;
}

/* ============================================================
   Buttons grid (every variant in one strip)
   ============================================================ */
.cz-button-grid[b-wot3abv40m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .cz-pulse-dot[b-wot3abv40m], .cz-spinner[b-wot3abv40m], .cz-dots span[b-wot3abv40m], .cz-skel[b-wot3abv40m] { animation: none; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Dashboard — rewritten 1:1 from the Silk & Pastel design pack.

   Layout grid: 12-col bento with 2rem gap. Cards float on the body
   atmosphere (lavender + mint radials behind everything, defined
   in admin-pages.css :root).

   All class names start with `sp-` so the new chrome doesn't
   inherit any old admin-dash-* / glass-card / page-* rules.
   ============================================================ */

/* ============================================================
   Page head — breadcrumbs + display headline + sub
   ============================================================ */

.sp-dash-head[b-ywrelspwap] {
    margin-bottom: 2.5rem;
    max-width: 42rem;
}

.sp-breadcrumbs[b-ywrelspwap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-on-surface-variant);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}
.sp-breadcrumbs .material-symbols-outlined[b-ywrelspwap] {
    font-size: 14px;
    opacity: 0.6;
}
.sp-breadcrumbs .is-current[b-ywrelspwap] {
    color: var(--color-primary);
}

/* 48px display headline per the design system spec. Clipped
   gradient for the dentist's name picks up the brand signature. */
.sp-display[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-on-surface);
    margin: 0;
}
.sp-display-name[b-ywrelspwap] {
    background: linear-gradient(110deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sp-sub[b-ywrelspwap] {
    color: var(--color-on-surface-variant);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0 0;
}

/* ============================================================
   12-col grid — bento layout
   ============================================================ */

.sp-grid[b-ywrelspwap] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

/* Card span helpers — semantic class per card so the page reads
   like a layout description, not a tangle of grid utilities. */
.sp-card-ecosystem[b-ywrelspwap] { grid-column: span 8 / span 8; }
.sp-card-health[b-ywrelspwap]    { grid-column: span 4 / span 4; }
.sp-card-table[b-ywrelspwap]     { grid-column: span 12 / span 12; }
.sp-card-actions[b-ywrelspwap]   { grid-column: span 6 / span 6; }
.sp-card-trend[b-ywrelspwap]     { grid-column: span 6 / span 6; }
.sp-feature-grid[b-ywrelspwap]   { grid-column: span 12 / span 12;
                      display: grid;
                      grid-template-columns: repeat(3, 1fr);
                      gap: 2rem; }
.sp-footer[b-ywrelspwap]         { grid-column: span 12 / span 12; }

@media (max-width: 1280px) {
    .sp-card-ecosystem[b-ywrelspwap],
    .sp-card-health[b-ywrelspwap],
    .sp-card-actions[b-ywrelspwap],
    .sp-card-trend[b-ywrelspwap] { grid-column: span 12 / span 12; }
    .sp-feature-grid[b-ywrelspwap] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .sp-feature-grid[b-ywrelspwap] { grid-template-columns: 1fr; }
}

/* ============================================================
   .sp-card — every glass surface on the page uses this base
   ============================================================ */

.sp-card[b-ywrelspwap] {
    position: relative;
    padding: 2rem;
    border-radius: 2rem;        /* 32px — design-system "card-2xl" */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--silk-edge);
    box-shadow: var(--shadow-silk-rest);
    transition:
        border-color var(--transition-silk),
        box-shadow var(--transition-silk),
        transform var(--transition-silk);
    overflow: hidden;
    isolation: isolate;
}
.sp-card:hover[b-ywrelspwap] {
    border-color: var(--silk-edge-strong);
    box-shadow: var(--shadow-silk-lift);
}

:root[data-theme*="-dark"] .sp-card[b-ywrelspwap] {
    background: color-mix(in oklab, var(--color-surface-container-lowest) 72%, transparent);
    border-color: color-mix(in oklab, white 8%, transparent);
}

.sp-card-head[b-ywrelspwap] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sp-card-head-row[b-ywrelspwap] {
    flex-wrap: wrap;
    align-items: center;
}

.sp-card-title[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
}
.sp-card-sub[b-ywrelspwap] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0;
}

/* ============================================================
   Pills — toggle pills (REAL-TIME / DAILY)
   ============================================================ */

.sp-pill-group[b-ywrelspwap] {
    display: flex;
    gap: 0.5rem;
}
.sp-pill[b-ywrelspwap] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: white;
    border: 1px solid var(--silk-edge);
    color: var(--color-on-surface-variant);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast);
}
.sp-pill:hover[b-ywrelspwap] {
    background: var(--color-surface-container-low);
}
.sp-pill-active[b-ywrelspwap] {
    background: color-mix(in oklab, var(--color-primary-container) 50%, transparent);
    color: var(--color-primary);
    border-color: transparent;
}

/* ============================================================
   Live Console — ecosystem list rows
   ============================================================ */

.sp-ecosystem-list[b-ywrelspwap] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-ecosystem-row[b-ywrelspwap] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 1.5rem;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-silk),
                border-color var(--transition-silk);
}
.sp-ecosystem-row:hover[b-ywrelspwap] {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--silk-edge);
}

.sp-ecosystem-row-left[b-ywrelspwap] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.sp-ecosystem-icon[b-ywrelspwap] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.sp-ecosystem-icon .material-symbols-outlined[b-ywrelspwap] {
    font-size: 22px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.sp-ecosystem-meta[b-ywrelspwap] {
    min-width: 0;
}
.sp-ecosystem-name[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.2;
}
.sp-ecosystem-detail[b-ywrelspwap] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0.125rem 0 0;
}

.sp-ecosystem-row-right[b-ywrelspwap] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    min-width: 7rem;
}
.sp-ecosystem-count[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--color-on-surface);
    margin: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.sp-ecosystem-chev[b-ywrelspwap] {
    font-size: 22px;
    color: var(--color-on-surface-variant);
    opacity: 0.5;
    transition: opacity var(--transition-silk),
                color var(--transition-silk),
                transform var(--transition-silk);
}
.sp-ecosystem-row:hover .sp-ecosystem-chev[b-ywrelspwap] {
    opacity: 1;
    color: var(--color-primary);
    transform: translateX(2px);
}

/* ============================================================
   Bars — used in ecosystem rows + health card
   ============================================================ */

.sp-bar[b-ywrelspwap] {
    width: 7rem;
    height: 6px;
    background: var(--color-surface-container-highest);
    border-radius: 9999px;
    overflow: hidden;
}
.sp-bar-fill[b-ywrelspwap] {
    height: 100%;
    border-radius: inherit;
    transition: width var(--transition-silk-slow);
}

/* ============================================================
   Accent palettes — same recipe applied to icons + bars + CTAs
   so a single class drives the colored tint everywhere.
   ============================================================ */
.sp-accent-primary[b-ywrelspwap]   { background: color-mix(in oklab, var(--color-primary-container) 50%, transparent);
                       color: var(--color-primary); }
.sp-accent-secondary[b-ywrelspwap] { background: color-mix(in oklab, var(--color-secondary-container) 50%, transparent);
                       color: var(--color-secondary); }
.sp-accent-tertiary[b-ywrelspwap]  { background: color-mix(in oklab, var(--color-tertiary-container) 60%, transparent);
                       color: var(--color-tertiary); }

/* For bar fills (background needs to be a solid tone, not the
   container tint) override accent variants. */
.sp-bar-fill.sp-accent-primary[b-ywrelspwap]   { background: var(--color-primary); color: inherit; }
.sp-bar-fill.sp-accent-secondary[b-ywrelspwap] { background: var(--color-secondary); color: inherit; }
.sp-bar-fill.sp-accent-tertiary[b-ywrelspwap]  { background: var(--color-tertiary); color: inherit; }

/* ============================================================
   System Health — circular SVG progress
   ============================================================ */

.sp-card-health[b-ywrelspwap] {
    display: flex;
    flex-direction: column;
}
.sp-card-glow[b-ywrelspwap] {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--color-primary) 18%, transparent);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

.sp-circular-wrap[b-ywrelspwap] {
    position: relative;
    align-self: center;
    width: 10rem;
    height: 10rem;
    margin: 0.5rem 0 1.25rem;
}

/* SVG starts at 3 o'clock by default; rotate so progress paints
   from 12 o'clock clockwise. */
.sp-circular[b-ywrelspwap] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.sp-circular-track[b-ywrelspwap] {
    stroke: var(--color-surface-container-highest);
}
.sp-circular-fill[b-ywrelspwap] {
    stroke: var(--color-primary);
    transition: stroke-dashoffset 1s var(--ease-silk);
}

.sp-circular-inner[b-ywrelspwap] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
}
.sp-circular-value[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sp-circular-label[b-ywrelspwap] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}

.sp-health-stats[b-ywrelspwap] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}
.sp-health-stat[b-ywrelspwap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
}
.sp-health-stat-label[b-ywrelspwap] {
    color: var(--color-on-surface-variant);
    font-weight: 500;
}
.sp-health-stat-value[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
}

.sp-health-pulse[b-ywrelspwap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-secondary);
}
.sp-pulse-dot[b-ywrelspwap] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-secondary);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-secondary) 50%, transparent);
    animation: sp-pulse-b-ywrelspwap 2s ease-out infinite;
}
@keyframes sp-pulse-b-ywrelspwap {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-secondary) 50%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-secondary) 0%, transparent); }
}

/* ============================================================
   Table — Recent login attempts
   ============================================================ */

.sp-table-actions[b-ywrelspwap] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.sp-btn-secondary[b-ywrelspwap],
.sp-btn-primary[b-ywrelspwap] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition:
        transform var(--transition-silk),
        background var(--transition-silk),
        box-shadow var(--transition-silk);
}
.sp-btn-secondary[b-ywrelspwap] {
    background: white;
    border: 1px solid var(--silk-edge-strong);
    color: var(--color-on-surface);
}
.sp-btn-secondary:hover[b-ywrelspwap] {
    background: var(--color-surface-container-low);
}
.sp-btn-secondary .material-symbols-outlined[b-ywrelspwap] {
    font-size: 16px;
}
.sp-btn-primary[b-ywrelspwap] {
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1.125rem;
    box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.sp-btn-primary:hover[b-ywrelspwap] {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -4px color-mix(in oklab, var(--color-primary) 45%, transparent);
}

.sp-table-scroll[b-ywrelspwap] {
    margin: 0 -2rem -2rem;
    padding: 0;
    overflow-x: auto;
    border-top: 1px solid var(--silk-edge);
}

.sp-table[b-ywrelspwap] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}
.sp-table thead th[b-ywrelspwap] {
    padding: 1rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    background: rgba(255, 255, 255, 0.4);
}
.sp-table thead th:first-child[b-ywrelspwap] { padding-left: 2rem; }
.sp-table thead th:last-child[b-ywrelspwap]  { padding-right: 2rem; }
.sp-table thead th.is-right[b-ywrelspwap]    { text-align: right; }

.sp-table tbody tr[b-ywrelspwap] {
    border-top: 1px solid color-mix(in oklab, white 50%, transparent);
    transition: background var(--transition-silk);
}
.sp-table tbody tr:hover[b-ywrelspwap] {
    background: rgba(255, 255, 255, 0.45);
}
.sp-table tbody td[b-ywrelspwap] {
    padding: 1rem 1.25rem;
    color: var(--color-on-surface);
}
.sp-table tbody td:first-child[b-ywrelspwap] { padding-left: 2rem; }
.sp-table tbody td:last-child[b-ywrelspwap]  { padding-right: 2rem; }
.sp-table tbody td.is-right[b-ywrelspwap]    { text-align: right; }
.sp-table-muted[b-ywrelspwap]               { color: var(--color-on-surface-variant); font-size: 0.8125rem; }

.sp-table-empty[b-ywrelspwap] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-on-surface-variant);
    font-style: italic;
}

.sp-table-account[b-ywrelspwap] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.sp-table-avatar[b-ywrelspwap] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--color-primary-container) 45%, transparent);
    color: var(--color-primary);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9375rem;
}
.sp-table-name[b-ywrelspwap] {
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.25;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-table-id[b-ywrelspwap] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.sp-source-chip[b-ywrelspwap] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--color-surface-container) 80%, transparent);
    color: var(--color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Status badges — filled pastel pills per attachment spec. */
.sp-badge[b-ywrelspwap] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.sp-badge-success[b-ywrelspwap] {
    background: color-mix(in oklab, var(--color-secondary-container) 60%, transparent);
    color: var(--color-secondary);
}
.sp-badge-error[b-ywrelspwap] {
    background: color-mix(in oklab, var(--color-error-container) 70%, transparent);
    color: var(--color-error);
}

/* ============================================================
   Quick actions
   ============================================================ */

.sp-quick-grid[b-ywrelspwap] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.sp-quick-tile[b-ywrelspwap] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--silk-edge);
    text-decoration: none;
    color: var(--color-on-surface);
    transition:
        transform var(--transition-silk),
        background var(--transition-silk),
        border-color var(--transition-silk);
}
.sp-quick-tile:hover[b-ywrelspwap] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--silk-edge-strong);
}

.sp-quick-icon[b-ywrelspwap] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.sp-quick-icon .material-symbols-outlined[b-ywrelspwap] {
    font-size: 22px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.sp-quick-meta[b-ywrelspwap] {
    min-width: 0;
}
.sp-quick-label[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    margin: 0;
}
.sp-quick-sub[b-ywrelspwap] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0.125rem 0 0;
}

.sp-quick-chev[b-ywrelspwap] {
    font-size: 20px;
    color: var(--color-on-surface-variant);
    opacity: 0.5;
    transition: transform var(--transition-silk-fast),
                opacity var(--transition-silk-fast);
}
.sp-quick-tile:hover .sp-quick-chev[b-ywrelspwap] {
    opacity: 1;
    transform: translateX(3px);
}

/* ============================================================
   Trend chart
   ============================================================ */

.sp-chart-bars[b-ywrelspwap] {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 12rem;
    padding-top: 0.5rem;
    background:
        linear-gradient(to top,
            transparent calc(100% - 1px),
            color-mix(in oklab, var(--color-outline-variant) 22%, transparent) 100%) bottom / 100% 25% repeat-y;
}

.sp-skeleton-bars[b-ywrelspwap] {
    background: linear-gradient(90deg,
        var(--color-surface-container) 0%,
        var(--color-surface-container-high) 50%,
        var(--color-surface-container) 100%);
    background-size: 200% 100%;
    animation: sp-skeleton-b-ywrelspwap 1.4s ease-in-out infinite;
    border-radius: 0.75rem;
}

.sp-chart-bar[b-ywrelspwap] {
    flex: 1;
    height: var(--bar-h, 0);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top,
        var(--color-primary) 0%,
        color-mix(in oklab, var(--color-primary-container) 70%, var(--color-primary)) 100%);
    position: relative;
    transition: filter var(--transition-silk-fast),
                transform var(--transition-silk-fast);
    cursor: default;
}
.sp-chart-bar:hover[b-ywrelspwap] {
    filter: brightness(1.1);
    transform: scaleY(1.04);
    transform-origin: bottom;
}

.sp-chart-tip[b-ywrelspwap] {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-on-surface);
    color: var(--color-surface);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity var(--transition-silk-fast),
                transform var(--transition-silk-fast);
    z-index: 2;
}
.sp-chart-bar:hover .sp-chart-tip[b-ywrelspwap] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sp-chart-axis[b-ywrelspwap] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
    text-transform: uppercase;
}

/* ============================================================
   Feature cards (col-12, 3-up)
   ============================================================ */

.sp-feature-card[b-ywrelspwap] {
    position: relative;
    padding: 1.75rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--silk-edge);
    box-shadow: var(--shadow-silk-rest);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition:
        transform var(--transition-silk),
        border-color var(--transition-silk),
        box-shadow var(--transition-silk);
}
.sp-feature-card:hover[b-ywrelspwap] {
    transform: translateY(-3px);
    border-color: var(--silk-edge-strong);
    box-shadow: var(--shadow-silk-lift);
}

:root[data-theme*="-dark"] .sp-feature-card[b-ywrelspwap] {
    background: color-mix(in oklab, var(--color-surface-container-lowest) 72%, transparent);
    border-color: color-mix(in oklab, white 8%, transparent);
}

.sp-feature-icon[b-ywrelspwap] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    transition: transform var(--transition-silk-slow);
}
.sp-feature-icon .material-symbols-outlined[b-ywrelspwap] {
    font-size: 28px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}
.sp-feature-card:hover .sp-feature-icon[b-ywrelspwap] {
    transform: scale(1.1);
}

.sp-feature-title[b-ywrelspwap] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0.5rem 0 0;
}

.sp-feature-body[b-ywrelspwap] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.sp-feature-cta[b-ywrelspwap] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent !important;
    color: var(--color-primary);
    transition: gap var(--transition-silk-fast);
}
.sp-feature-cta.sp-accent-secondary[b-ywrelspwap] { color: var(--color-secondary); }
.sp-feature-cta.sp-accent-tertiary[b-ywrelspwap]  { color: var(--color-tertiary); }
.sp-feature-card:hover .sp-feature-cta[b-ywrelspwap] {
    gap: 0.875rem;
}
.sp-feature-cta .material-symbols-outlined[b-ywrelspwap] {
    font-size: 16px;
}

/* ============================================================
   Skeleton — shared loading shimmer
   ============================================================ */

.sp-skeleton-row[b-ywrelspwap] {
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(90deg,
        var(--color-surface-container) 0%,
        var(--color-surface-container-high) 50%,
        var(--color-surface-container) 100%);
    background-size: 200% 100%;
    animation: sp-skeleton-b-ywrelspwap 1.4s ease-in-out infinite;
}
@keyframes sp-skeleton-b-ywrelspwap {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   Footer meta strip
   ============================================================ */

.sp-footer[b-ywrelspwap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid color-mix(in oklab, var(--color-outline-variant) 30%, transparent);
}
.sp-footer-links[b-ywrelspwap] {
    display: flex;
    gap: 1.5rem;
}
.sp-footer-links a[b-ywrelspwap] {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color var(--transition-silk-fast);
}
.sp-footer-links a:hover[b-ywrelspwap] {
    color: var(--color-primary);
}
.sp-footer-meta[b-ywrelspwap] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
    margin: 0;
}

/* ============================================================
   Floating action button — primary→secondary brand gradient
   ============================================================ */

.sp-fab[b-ywrelspwap] {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%);
    color: white;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    z-index: 50;
    text-decoration: none;
    box-shadow:
        0 8px 20px -2px color-mix(in oklab, var(--color-primary) 45%, transparent),
        0 24px 48px -10px color-mix(in oklab, var(--color-primary) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform var(--transition-silk),
                box-shadow var(--transition-silk);
}
.sp-fab .material-symbols-outlined[b-ywrelspwap] {
    font-size: 28px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
    transition: transform var(--transition-silk);
}
.sp-fab:hover[b-ywrelspwap] {
    transform: translateY(-2px) scale(1.04);
}
.sp-fab:hover .material-symbols-outlined[b-ywrelspwap] {
    transform: rotate(90deg);
}
.sp-fab:active[b-ywrelspwap] {
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
}

@media (max-width: 640px) {
    .sp-fab[b-ywrelspwap] {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-fab:hover[b-ywrelspwap],
    .sp-quick-tile:hover[b-ywrelspwap],
    .sp-feature-card:hover[b-ywrelspwap] {
        transform: none;
    }
    .sp-fab:hover .material-symbols-outlined[b-ywrelspwap] {
        transform: rotate(90deg);
    }
    .sp-pulse-dot[b-ywrelspwap] {
        animation: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Intentionally empty.
   The Sanctuary canvas classes (.login-canvas, .login-orb-*, .login-card,
   .login-brand*, .login-title, .login-form, .login-field-*, .login-submit,
   .login-footer-*, .auth-loading, .access-denied-*) live in the shared
   admin-pages.css stylesheet — NOT scoped CSS — because /login isn't the
   only page that uses them. NotFound, AccessDenied, and Error all share
   the same editorial chassis and need the same styles. Scoped .razor.css
   only applies to its own component's elements via a `[b-xyz]` attribute
   selector, which silently broke styling on the re-use surfaces. */
/* /Components/Pages/Messaging/SmsProxy.razor.rz.scp.css */
/* One device per row. Overrides the shared .roles-grid which is a
   responsive auto-fit grid — fine for the dense Admins / Roles pages,
   but proxy device cards carry long meta (owner email + timestamp +
   app version) that reads better as a wide card per row. Scoped so
   the override is local to this page only. */
.roles-grid[b-gn8gjczs1u] {
    grid-template-columns: 1fr;
}

.sms-proxy-card[b-gn8gjczs1u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sms-proxy-chips[b-gn8gjczs1u] {
    margin-left: auto;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Online / offline status pill. The dot mirrors a typical "presence
   indicator" pattern — green + soft pulse when live, muted + static
   when not. Built on the shared .chip base for sizing/typography so
   it lines up with the Default / Inactive chips next to it. */
.sms-proxy-status-dot[b-gn8gjczs1u] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.sms-proxy-status.is-online[b-gn8gjczs1u] {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
}
.sms-proxy-status.is-online .sms-proxy-status-dot[b-gn8gjczs1u] {
    background: var(--color-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 60%, transparent);
    animation: sms-proxy-pulse-b-gn8gjczs1u 1.8s ease-out infinite;
}

.sms-proxy-status.is-offline[b-gn8gjczs1u] {
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
}
.sms-proxy-status.is-offline .sms-proxy-status-dot[b-gn8gjczs1u] {
    background: var(--color-on-surface-variant);
    opacity: 0.5;
}

@keyframes sms-proxy-pulse-b-gn8gjczs1u {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--color-primary) 60%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary)  0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--color-primary)  0%, transparent); }
}

/* Honor reduced-motion preference — drop the pulse, keep the dot. */
@media (prefers-reduced-motion: reduce) {
    .sms-proxy-status.is-online .sms-proxy-status-dot[b-gn8gjczs1u] {
        animation: none;
    }
}

.sms-proxy-meta[b-gn8gjczs1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.25rem 0 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

/* min-width: 0 lets each meta cell shrink below its content size so a
   long owner email wraps inside its own column instead of overflowing
   visually into the adjacent Last seen / App columns. overflow-wrap
   handles the actual line break inside the dd. */
.sms-proxy-meta > div[b-gn8gjczs1u] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.sms-proxy-meta dd[b-gn8gjczs1u] {
    overflow-wrap: anywhere;
}

.sms-proxy-meta dt[b-gn8gjczs1u] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.sms-proxy-meta dd[b-gn8gjczs1u] {
    margin: 0;
    color: var(--color-on-surface);
}

.sms-proxy-actions[b-gn8gjczs1u] {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-foot-actions[b-gn8gjczs1u] {
    margin-top: 1.5rem;
    text-align: center;
}

/* Send-message modal. Pure CSS overlay — no JS portal needed because
   the page is rendered InteractiveServer and the markup lives at the
   end of the component tree. The backdrop is a click-target that
   closes the modal when clicked outside the card. */
.modal-backdrop[b-gn8gjczs1u] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-surface) 60%, black 40% / 60%);
    z-index: 90;
}

.modal-card[b-gn8gjczs1u] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(40rem, calc(100vw - 2rem));
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
/* /Components/Pages/PaymentGateways/PaymentGatewaysEdit.razor.rz.scp.css */
/* Soft-amber callout above the credentials block making it clear that
   the keys aren't a long-term secret store — they're scaffolding while
   the team picks a provider. Visual matches an info chip more than a
   warning so it doesn't fight the rest of the form for attention. */
.gateway-credentials-banner[b-f9o6w7d87l] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    margin: var(--space-3) 0 var(--space-2);
    border: 1px solid var(--color-outline-variant);
    border-left: 3px solid var(--color-tertiary, var(--color-primary));
    border-radius: var(--radius-md, 0.625rem);
    background: color-mix(in srgb, var(--color-tertiary-container, var(--color-primary-container)) 35%, transparent);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-on-surface);
}

.gateway-credentials-banner .material-symbols-outlined[b-f9o6w7d87l] {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 0.125rem;
    color: var(--color-tertiary, var(--color-primary));
}
/* /Components/Pages/PaymentGateways/PaymentGatewaysList.razor.rz.scp.css */
/* Per-card visual + action row for /payment-gateways. The default
   gateway gets a primary-tinted outline so it pops in a grid where
   most cards look the same. */

.gateway-card-default[b-ozny6betgi] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.gateway-card-chips[b-ozny6betgi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gateway-card-desc[b-ozny6betgi] {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-on-surface-variant);
    margin: 0.5rem 0 0;
}

.gateway-card-actions[b-ozny6betgi] {
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gateway-card-default-cta[b-ozny6betgi] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
}
/* /Components/Pages/Plans/PlansList.razor.rz.scp.css */
/* Feature breakdown inside each plan card on /plans. The horizontal
   divider sits above the list so it reads as its own block separate
   from the plan name + user count above. margin-top:auto pushes the
   block to the bottom of the card so cards in the same row stay
   visually aligned even when their feature counts differ. */
.plan-features[b-d7koz72x4b] {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0 0 0;
    border-top: 1px solid var(--color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-top: auto;
}

.plan-feature-row[b-d7koz72x4b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Allow long enum labels to wrap rather than ellipsing the column
       and pushing the value off-screen. */
    min-width: 0;
}

.plan-feature-name[b-d7koz72x4b] {
    color: var(--color-on-surface-variant);
    overflow-wrap: anywhere;
}

.plan-feature-value[b-d7koz72x4b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-on-surface);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Bool features get an icon + a slightly muted "Not included" tone
   so the eye can scan included vs. not at a glance. */
.plan-feature-value.on[b-d7koz72x4b] {
    color: var(--color-primary);
}
.plan-feature-value.off[b-d7koz72x4b] {
    color: var(--color-on-surface-variant);
    opacity: 0.7;
}

.plan-feature-icon[b-d7koz72x4b] {
    font-size: 1rem;
    line-height: 1;
}

/* Price line on each plan card. Larger than the rest of the meta so the
   monthly cost is the first thing the eye lands on after the plan name. */
[b-d7koz72x4b] .roles-card-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.25rem 0 0 0;
}
/* /Components/Pages/Procedures/ProceduresList.razor.rz.scp.css */
/* ============================================================
   ADA CDT codes list — Silk & Pastel "Member Directory" table.

   Card head (title + sub + search + filter) → table → footer
   (count + numbered pagination). All `.cdt-*` so this file is
   self-contained and doesn't leak to other pages.
   ============================================================ */

.cdt-card[b-e62b30rfny] {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--silk-edge);
    border-radius: 2rem;
    box-shadow: var(--shadow-silk-rest);
    overflow: hidden;
    transition: border-color var(--transition-silk),
                box-shadow var(--transition-silk);
}
.cdt-card:hover[b-e62b30rfny] {
    border-color: var(--silk-edge-strong);
    box-shadow: var(--shadow-silk-lift);
}

:root[data-theme*="-dark"] .cdt-card[b-e62b30rfny] {
    background: color-mix(in oklab, var(--color-surface-container-lowest) 72%, transparent);
    border-color: color-mix(in oklab, white 8%, transparent);
}

/* ---------- Card head: title + tools ---------- */

.cdt-card-head[b-e62b30rfny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--silk-edge);
    flex-wrap: wrap;
}

.cdt-card-meta[b-e62b30rfny] { min-width: 0; }

.cdt-card-title[b-e62b30rfny] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0;
}
.cdt-card-sub[b-e62b30rfny] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0;
}

.cdt-tools[b-e62b30rfny] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Search input with leading icon — pill-shape, glassy. */
.cdt-search[b-e62b30rfny] {
    position: relative;
    display: flex;
    align-items: center;
}
.cdt-search > .material-symbols-outlined[b-e62b30rfny] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
    pointer-events: none;
}
.cdt-search input[b-e62b30rfny] {
    width: 18rem;
    max-width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.625rem;
    border-radius: 0.875rem;
    border: 1px solid var(--silk-edge);
    background: var(--color-surface-container-low);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
    transition: background var(--transition-silk-fast),
                border-color var(--transition-silk-fast),
                box-shadow var(--transition-silk-fast);
}
.cdt-search input[b-e62b30rfny]::placeholder {
    color: var(--color-on-surface-variant);
    opacity: 0.55;
}
.cdt-search input:focus[b-e62b30rfny] {
    background: white;
    border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* Native <select> styled with a leading filter icon + custom
   chevron. Strips OS default chrome via appearance: none and
   paints an inline SVG arrow on the right edge. */
.cdt-filter[b-e62b30rfny] {
    position: relative;
    display: flex;
    align-items: center;
}
.cdt-filter > .material-symbols-outlined[b-e62b30rfny] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
    pointer-events: none;
}
.cdt-filter select[b-e62b30rfny] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.625rem 2.5rem 0.625rem 2.625rem;
    border-radius: 0.875rem;
    border: 1px solid var(--silk-edge);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25 7 8.75 10.5 5.25' stroke='%23494552' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        right 1rem center / 14px no-repeat,
        var(--color-surface-container-low);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
    cursor: pointer;
    min-width: 12rem;
    transition: background-color var(--transition-silk-fast),
                border-color var(--transition-silk-fast),
                box-shadow var(--transition-silk-fast);
}
.cdt-filter select:focus[b-e62b30rfny] {
    border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* ---------- Table ---------- */

.cdt-table-scroll[b-e62b30rfny] {
    overflow-x: auto;
}

.cdt-table[b-e62b30rfny] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.cdt-table thead th[b-e62b30rfny] {
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid var(--silk-edge);
    white-space: nowrap;
}
.cdt-table thead th:first-child[b-e62b30rfny] { padding-left: 2rem; }
.cdt-table thead th:last-child[b-e62b30rfny]  { padding-right: 2rem; }
.cdt-table thead th.is-right[b-e62b30rfny]    { text-align: right; }

.cdt-col-code[b-e62b30rfny]   { width: 8.5rem; }
.cdt-col-area[b-e62b30rfny]   { width: 6rem; }
.cdt-col-cat[b-e62b30rfny]    { width: 16rem; }
.cdt-col-status[b-e62b30rfny] { width: 6.5rem; }

.cdt-row[b-e62b30rfny] {
    border-top: 1px solid color-mix(in oklab, white 55%, transparent);
    transition: background var(--transition-silk-fast);
}
.cdt-row:hover[b-e62b30rfny] { background: rgba(255, 255, 255, 0.45); }
.cdt-row td[b-e62b30rfny] {
    padding: 0.875rem 1rem;
    color: var(--color-on-surface);
    vertical-align: middle;
}
.cdt-row td:first-child[b-e62b30rfny] { padding-left: 2rem; }
.cdt-row td:last-child[b-e62b30rfny]  { padding-right: 2rem; }
.cdt-row td.is-right[b-e62b30rfny]    { text-align: right; }

.cdt-muted[b-e62b30rfny] { color: var(--color-on-surface-variant); font-size: 0.8125rem; }

/* Code cell — letter-tile + mono numeral, doubles as a "go to
   edit" anchor so admins can click anywhere in the column. */
.cdt-code-cell[b-e62b30rfny] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-silk-fast);
}
.cdt-code-cell:hover[b-e62b30rfny] { color: var(--color-primary); }

.cdt-code-tile[b-e62b30rfny] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--color-primary-container) 55%, transparent);
    color: var(--color-primary);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
}

.cdt-code-num[b-e62b30rfny] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.cdt-name[b-e62b30rfny] {
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.3;
    max-width: 32rem;
}
.cdt-abbr[b-e62b30rfny] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0.125rem 0 0;
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdt-area[b-e62b30rfny] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--color-tertiary-container) 60%, transparent);
    color: var(--color-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cdt-badge[b-e62b30rfny] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.cdt-badge-success[b-e62b30rfny] {
    background: color-mix(in oklab, var(--color-secondary-container) 65%, transparent);
    color: var(--color-secondary);
}
.cdt-badge-muted[b-e62b30rfny] {
    background: color-mix(in oklab, var(--color-surface-container-highest) 70%, transparent);
    color: var(--color-on-surface-variant);
}

.cdt-icon-btn[b-e62b30rfny] {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast);
}
.cdt-icon-btn:hover[b-e62b30rfny] {
    background: color-mix(in oklab, var(--color-primary-container) 35%, transparent);
    color: var(--color-primary);
}
.cdt-icon-btn .material-symbols-outlined[b-e62b30rfny] { font-size: 18px; }

/* ---------- Skeleton row ---------- */

.cdt-skel[b-e62b30rfny] {
    margin: 0.5rem 1rem 0.5rem 2rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    background: linear-gradient(90deg,
        var(--color-surface-container) 0%,
        var(--color-surface-container-high) 50%,
        var(--color-surface-container) 100%);
    background-size: 200% 100%;
    animation: cdt-shimmer-b-e62b30rfny 1.5s ease-in-out infinite;
}
@keyframes cdt-shimmer-b-e62b30rfny {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Empty state ---------- */

.cdt-empty[b-e62b30rfny] {
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.cdt-empty-icon[b-e62b30rfny] {
    font-size: 40px;
    color: var(--color-on-surface-variant);
    opacity: 0.5;
}
.cdt-empty-title[b-e62b30rfny] {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}
.cdt-empty-sub[b-e62b30rfny] {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    max-width: 28rem;
}

/* ---------- Card foot: count + numbered pagination ---------- */

.cdt-table-foot[b-e62b30rfny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding: 1.125rem 2rem 1.5rem;
    border-top: 1px solid var(--silk-edge);
    background: rgba(255, 255, 255, 0.35);
}
:root[data-theme*="-dark"] .cdt-table-foot[b-e62b30rfny] {
    background: color-mix(in oklab, white 4%, transparent);
}

.cdt-foot-meta[b-e62b30rfny] {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.cdt-foot-meta strong[b-e62b30rfny] { color: var(--color-on-surface); font-weight: 700; }

.cdt-pagination[b-e62b30rfny] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cdt-page-btn[b-e62b30rfny] {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: white;
    border: 1px solid var(--silk-edge);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    transition: background var(--transition-silk-fast),
                color var(--transition-silk-fast),
                border-color var(--transition-silk-fast),
                box-shadow var(--transition-silk-fast);
}
.cdt-page-btn:hover:not(:disabled):not(.cdt-page-btn-active)[b-e62b30rfny] {
    background: var(--color-surface-container-low);
    color: var(--color-primary);
    border-color: color-mix(in oklab, var(--color-primary) 35%, var(--silk-edge));
}
.cdt-page-btn:disabled[b-e62b30rfny] {
    opacity: 0.35;
    cursor: not-allowed;
}
.cdt-page-btn-active[b-e62b30rfny] {
    background: var(--color-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--color-primary) 35%, transparent);
    cursor: default;
}
.cdt-page-btn .material-symbols-outlined[b-e62b30rfny] { font-size: 18px; }

.cdt-page-ellipsis[b-e62b30rfny] {
    padding: 0 0.25rem;
    color: var(--color-on-surface-variant);
    font-weight: 700;
    user-select: none;
}

@media (max-width: 720px) {
    .cdt-card-head[b-e62b30rfny] {
        flex-direction: column;
        align-items: stretch;
    }
    .cdt-tools[b-e62b30rfny] { flex-direction: column; align-items: stretch; }
    .cdt-search input[b-e62b30rfny],
    .cdt-filter select[b-e62b30rfny] { width: 100%; }
    .cdt-col-cat[b-e62b30rfny]  { display: none; }
    .cdt-row td.cdt-cat-cell[b-e62b30rfny] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cdt-skel[b-e62b30rfny] { animation: none; }
}
/* /Components/Pages/Updates/UpdatesCreate.razor.rz.scp.css */
/* Upload form — header row that pairs the "Release notes" label with the
   "Load draft notes" button so the button sits inline with the field
   label rather than floating above the textarea. */
.draftnotes-head[b-m0jwryhxte] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.draftnotes-head > .form-field-label[b-m0jwryhxte] {
    margin: 0;
}

/* Compact the secondary button a touch so it reads as an inline affordance. */
.draftnotes-load[b-m0jwryhxte] {
    padding-block: 0.375rem;
    font-size: 0.8125rem;
}
/* /Components/Pages/Updates/UpdatesDraft.razor.rz.scp.css */
/* Draft release-notes page — layout-only scoped styles. Colours come
   from the shared Material-3 token set (var(--color-*)) so the page
   tracks the admin light/dark themes with no extra theming here. */

/* Add form: text takes the room, kind stays compact. */
.draft-add-grid[b-53vqztcsih] {
    grid-template-columns: 1fr minmax(11rem, auto);
    align-items: end;
}

.draft-empty[b-53vqztcsih] {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    margin: 0;
}

/* ---- View switcher (Active vs a shipped version) ---- */
.draft-viewbar[b-53vqztcsih] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.draft-viewbar-label[b-53vqztcsih] {
    margin: 0;
    flex-shrink: 0;
}

.draft-viewbar-select[b-53vqztcsih] {
    max-width: 22rem;
}

/* ---- List ---- */
.draft-list[b-53vqztcsih] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-row[b-53vqztcsih] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-outline-variant);
    border-radius: 0.625rem;
    background: var(--color-surface-container-lowest);
}

.draft-kind-chip[b-53vqztcsih] {
    flex-shrink: 0;
}

.draft-text[b-53vqztcsih] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-on-surface);
    font-size: 0.9375rem;
    line-height: 1.35;
    word-break: break-word;
}

.draft-hash[b-53vqztcsih] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    background: var(--color-surface-container-high);
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
}

/* Action cluster sits at the trailing edge. */
.draft-row-actions[b-53vqztcsih] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
}

.draft-icon-btn[b-53vqztcsih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.draft-icon-btn .material-symbols-outlined[b-53vqztcsih] {
    font-size: 20px;
}

.draft-icon-btn:hover:not(:disabled)[b-53vqztcsih] {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.draft-icon-btn-primary:hover:not(:disabled)[b-53vqztcsih] {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.draft-icon-btn-danger:hover:not(:disabled)[b-53vqztcsih] {
    background: var(--color-error-container);
    color: var(--color-on-error-container);
}

.draft-icon-btn:disabled[b-53vqztcsih] {
    opacity: 0.35;
    cursor: default;
}

/* ---- Inline edit ---- */
.draft-edit[b-53vqztcsih] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.draft-edit-kind[b-53vqztcsih] {
    flex-shrink: 0;
    width: 11rem;
}

.draft-edit-text[b-53vqztcsih] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Bug-report link chip editor (add form + inline edit) ---- */
.draft-link-field[b-53vqztcsih] {
    grid-column: 1 / -1;
}

.draft-link-chips[b-53vqztcsih] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.4rem;
}

.draft-link-chip[b-53vqztcsih] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.draft-link-chip-x[b-53vqztcsih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 0.125rem;
    opacity: 0.7;
}
.draft-link-chip-x:hover[b-53vqztcsih] { opacity: 1; }
.draft-link-chip-x .material-symbols-outlined[b-53vqztcsih] { font-size: 16px; }

/* In inline edit the chip editor wraps onto its own full-width row. */
.draft-edit-links[b-53vqztcsih] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.draft-edit-linkpick[b-53vqztcsih] {
    width: auto;
    min-width: 12rem;
    flex: 0 1 auto;
}

/* ---- Compile ---- */
.draft-preview[b-53vqztcsih] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
    resize: vertical;
}

.draft-compile-actions[b-53vqztcsih] {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.draft-clear-btn[b-53vqztcsih] {
    color: var(--color-error);
    border-color: var(--color-error-container);
}

.draft-confirm-text[b-53vqztcsih] {
    color: var(--color-error);
    font-size: 0.875rem;
    align-self: center;
}

/* Narrow screens: stack the action cluster under the text. */
@media (max-width: 640px) {
    .draft-add-grid[b-53vqztcsih] {
        grid-template-columns: 1fr;
    }

    .draft-row[b-53vqztcsih] {
        flex-wrap: wrap;
    }

    .draft-edit[b-53vqztcsih] {
        flex-wrap: wrap;
    }

    .draft-edit-kind[b-53vqztcsih] {
        width: 100%;
    }
}
/* /Components/Pages/Users/RemoteScreenLockPanel.razor.rz.scp.css */
/* Live status / confirmation pill for remote screen-lock commands. */

.screenlock-status[b-0a7eji8kr5] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-outline-variant, rgba(0, 0, 0, 0.12));
    background: var(--color-surface-variant, rgba(0, 0, 0, 0.03));
    margin-bottom: 0.75rem;
}

.screenlock-status-icon[b-0a7eji8kr5] {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.2;
}

.screenlock-status-line[b-0a7eji8kr5] {
    font-size: 0.875rem;
    color: var(--color-on-surface, inherit);
}

.screenlock-status-sub[b-0a7eji8kr5] {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant, #555);
}

/* Confirmed — the device acked after applying. */
.screenlock-status--ok[b-0a7eji8kr5] {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: color-mix(in srgb, var(--color-primary-container, var(--color-primary)) 22%, transparent);
}
.screenlock-status--ok .screenlock-status-icon[b-0a7eji8kr5] {
    color: var(--color-primary);
}

/* Pending — waiting for the next device sync. */
.screenlock-status--pending .screenlock-status-icon[b-0a7eji8kr5] {
    color: var(--color-on-surface-variant, #777);
}

/* Superseded before delivery — muted. */
.screenlock-status--muted[b-0a7eji8kr5] {
    opacity: 0.85;
}
.screenlock-status--muted .screenlock-status-icon[b-0a7eji8kr5] {
    color: var(--color-on-surface-variant, #777);
}
/* /Components/Pages/Users/UserPricingManager.razor.rz.scp.css */
.pm-clinic[b-uxmwjcy6ai] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-outline-variant, #d0d0d0);
    border-radius: 0.75rem;
    background: var(--color-surface, #fff);
}
.pm-clinic-head[b-uxmwjcy6ai] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-outline-variant, #e0e0e0);
}

.pm-block[b-uxmwjcy6ai] { margin-top: 1rem; }
.pm-block-head[b-uxmwjcy6ai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.pm-sm[b-uxmwjcy6ai] { font-size: 0.8125rem; padding: 0.35rem 0.6rem; }
.pm-sm .material-symbols-outlined[b-uxmwjcy6ai] { font-size: 16px; vertical-align: middle; }

.pm-actions[b-uxmwjcy6ai] { display: flex; gap: 0.15rem; justify-content: flex-end; white-space: nowrap; }
.pm-icon[b-uxmwjcy6ai] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-on-surface-variant, #555);
    cursor: pointer;
}
.pm-icon:hover:not(:disabled)[b-uxmwjcy6ai] { background: var(--color-surface-variant, #eee); }
.pm-icon:disabled[b-uxmwjcy6ai] { opacity: 0.35; cursor: default; }
.pm-icon .material-symbols-outlined[b-uxmwjcy6ai] { font-size: 18px; }
.pm-danger:hover:not(:disabled)[b-uxmwjcy6ai] { color: var(--color-error, #c2410c); }

.pm-editor[b-uxmwjcy6ai] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed var(--color-outline-variant, #ccc);
    border-radius: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--color-surface-variant, #f7f7f7);
}
.pm-grid[b-uxmwjcy6ai] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pm-editor-actions[b-uxmwjcy6ai] { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.pm-err[b-uxmwjcy6ai] { color: var(--color-error, #c2410c); font-size: 0.8125rem; }

.pm-results[b-uxmwjcy6ai] { display: flex; flex-direction: column; gap: 0.25rem; max-height: 16rem; overflow-y: auto; }
.pm-result[b-uxmwjcy6ai] {
    text-align: left;
    border: 1px solid var(--color-outline-variant, #ddd);
    border-radius: 0.4rem;
    background: var(--color-surface, #fff);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
}
.pm-result:hover[b-uxmwjcy6ai] { border-color: var(--color-primary, #2563eb); }

/* Pricing editor modal */
.pm-modal-backdrop[b-uxmwjcy6ai] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
}
.pm-modal[b-uxmwjcy6ai] {
    width: 100%;
    max-width: 34rem;
    background: var(--color-surface, #fff);
    border-radius: 0.9rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.pm-modal-head[b-uxmwjcy6ai] { margin-bottom: 0.25rem; }

.pm-opts[b-uxmwjcy6ai] { display: flex; flex-direction: column; gap: 0.4rem; }
.pm-opt[b-uxmwjcy6ai] { display: flex; align-items: center; gap: 0.4rem; }
.pm-opt-label[b-uxmwjcy6ai] { flex: 1; min-width: 0; }
.pm-opt-price[b-uxmwjcy6ai] { width: 6rem; }
.pm-opt-dollar[b-uxmwjcy6ai] { color: var(--color-on-surface-variant, #666); font-weight: 700; }
.pm-opt-scope[b-uxmwjcy6ai] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant, #666);
    white-space: nowrap;
}