@import '_content/Nakala.Client.Components/Nakala.Client.Components.py5aba8wq8.bundle.scp.css';

/* /Pages/ChangePassword.razor.rz.scp.css */
/*
    CHANGE PASSWORD — the sign-in screen's twin.

    The tokens and the panel are deliberately identical to Login.razor.css. They are repeated
    rather than shared because Blazor's scoped CSS is per component and the alternative is a global
    stylesheet that every other screen would then be able to reach into. Two files that must move
    together are a real cost; a global auth theme that anything can override is a larger one.
*/

.auth[b-vvbf1tx6kx] {
    --page: #eceff3;
    --surface: #ffffff;
    --ink: #101720;
    --muted: #5b6572;
    --line: #dbe0e6;
    --line-strong: #c3cad3;
    --accent: #15693a;
    --accent-hover: #0f5330;
    --on-accent: #ffffff;
    --focus: rgba(21, 105, 58, 0.28);
    --bad: #9f1d1d;
    --bad-bg: #fdf4f4;
    --bad-line: #eec7c7;
    --notice-bg: #fbf6e9;
    --notice-line: #e6d9b4;
    --notice-ink: #6b530f;

    min-height: 100dvh;
    display: grid;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    .auth[b-vvbf1tx6kx] {
        --page: #0b0f14;
        --surface: #141b23;
        --ink: #e7edf4;
        --muted: #94a2b3;
        --line: #263140;
        --line-strong: #33404f;
        --accent: #1d7f45;
        --accent-hover: #23934f;
        --focus: rgba(46, 158, 92, 0.35);
        --bad: #f4a6a6;
        --bad-bg: #2a1616;
        --bad-line: #4d2626;
        --notice-bg: #241f10;
        --notice-line: #453a1c;
        --notice-ink: #e2cd93;
    }
}

.auth__panel[b-vvbf1tx6kx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 48px;
}

.panel[b-vvbf1tx6kx] {
    width: 100%;
    max-width: 420px;
}

.panel__mark[b-vvbf1tx6kx] {
    margin-bottom: 28px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.panel__mark span[b-vvbf1tx6kx] {
    font-weight: 400;
    color: var(--accent);
}

.panel__title[b-vvbf1tx6kx] {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* See the note on .panel__title in Login.razor.css. */
.panel__title:focus:not(:focus-visible)[b-vvbf1tx6kx] {
    outline: none;
}

.panel__sub[b-vvbf1tx6kx] {
    margin: 6px 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.panel__sub--required[b-vvbf1tx6kx] {
    padding: 10px 12px;
    color: var(--notice-ink);
    background: var(--notice-bg);
    border: 1px solid var(--notice-line);
    border-radius: 8px;
}

.field[b-vvbf1tx6kx] {
    margin-bottom: 16px;
}

.field__row[b-vvbf1tx6kx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field label[b-vvbf1tx6kx] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

.field[b-vvbf1tx6kx]  input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.field[b-vvbf1tx6kx]  input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus);
}

.link[b-vvbf1tx6kx] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.link:hover[b-vvbf1tx6kx] {
    text-decoration: underline;
}

.link:focus-visible[b-vvbf1tx6kx] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.refusal[b-vvbf1tx6kx] {
    margin: 0 0 16px;
    padding: 10px 12px;
    color: var(--bad);
    background: var(--bad-bg);
    border: 1px solid var(--bad-line);
    border-radius: 8px;
}

.refusal__lead[b-vvbf1tx6kx] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.violations[b-vvbf1tx6kx] {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
}

.violations li + li[b-vvbf1tx6kx] {
    margin-top: 2px;
}

.submit[b-vvbf1tx6kx] {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 11px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}

.submit:hover:not(:disabled)[b-vvbf1tx6kx] {
    background: var(--accent-hover);
}

.submit:focus-visible[b-vvbf1tx6kx] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.submit:disabled[b-vvbf1tx6kx] {
    opacity: .6;
    cursor: default;
}

.panel__foot[b-vvbf1tx6kx] {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.hint__title[b-vvbf1tx6kx] {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hint[b-vvbf1tx6kx] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
}

.hint__note[b-vvbf1tx6kx] {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.panel__back[b-vvbf1tx6kx] {
    margin: 16px 0 0;
    font-size: 13px;
}

.panel__back a[b-vvbf1tx6kx] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.panel__back a:hover[b-vvbf1tx6kx] {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .field[b-vvbf1tx6kx]  input,
    .submit[b-vvbf1tx6kx] {
        transition: none;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/*
    THE SIGN-IN SCREEN.

    Design notes, because the previous version was a stopgap and this one should not be undone by
    accident:

    - No CSS framework and no icon font. The client ships bootstrap for the shell, but this page is
      the first thing anyone sees of the product and a recognisable framework default reads as
      unfinished. Everything here is 200 lines of plain CSS with no dependency.
    - Tokens are declared on .auth rather than :root because Blazor's scoped CSS rewrites selectors
      to the component's elements; :root would silently match nothing.
    - Both colour schemes are defined, not just recoloured. A sign-in that is unreadable on a phone
      set to dark is unreadable to a large share of the people who will use it.
    - Inputs are 16px and at least 44px tall: below 16px iOS zooms the page on focus, and 44px is
      the smallest comfortable touch target.
*/

.auth[b-tay7dasdt0] {
    --page: #eceff3;
    --surface: #ffffff;
    --ink: #101720;
    --muted: #5b6572;
    --line: #dbe0e6;
    --line-strong: #c3cad3;
    --accent: #15693a;
    --accent-hover: #0f5330;
    --on-accent: #ffffff;
    --focus: rgba(21, 105, 58, 0.28);
    --bad: #9f1d1d;
    --bad-bg: #fdf4f4;
    --bad-line: #eec7c7;
    --aside-ink: #f2f5f8;
    --aside-muted: #9fb0c2;
    --aside: linear-gradient(168deg, #0f1b2a 0%, #14283b 100%);

    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    .auth[b-tay7dasdt0] {
        --page: #0b0f14;
        --surface: #141b23;
        --ink: #e7edf4;
        --muted: #94a2b3;
        --line: #263140;
        --line-strong: #33404f;
        --accent: #1d7f45;
        --accent-hover: #23934f;
        --focus: rgba(46, 158, 92, 0.35);
        --bad: #f4a6a6;
        --bad-bg: #2a1616;
        --bad-line: #4d2626;
        --aside: linear-gradient(168deg, #080d13 0%, #0e1a26 100%);
    }
}

/* --- the brand column, wide screens only ------------------------------------------------- */

.auth__aside[b-tay7dasdt0] {
    display: none;
}

.mark[b-tay7dasdt0],
.panel__mark[b-tay7dasdt0] {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mark span[b-tay7dasdt0],
.panel__mark span[b-tay7dasdt0] {
    font-weight: 400;
}

.mark[b-tay7dasdt0] {
    font-size: 34px;
    color: var(--aside-ink);
}

.mark span[b-tay7dasdt0] {
    color: #4fbe80;
}

.mark__line[b-tay7dasdt0] {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--aside-muted);
    max-width: 22em;
}

/* --- the form column ----------------------------------------------------------------------- */

.auth__panel[b-tay7dasdt0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 48px;
}

.panel[b-tay7dasdt0] {
    width: 100%;
    max-width: 384px;
}

.panel__mark[b-tay7dasdt0] {
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 28px;
}

.panel__mark span[b-tay7dasdt0] {
    color: var(--accent);
}

.panel__title[b-tay7dasdt0] {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/*
    FocusOnNavigate moves focus to the routed heading on every navigation, and nakala.css deliberately
    restored the ring on it — "a screen-reader user who cannot see where they landed is the exact
    person that focus move exists for". A bare :focus here took it away again on this screen, at
    higher specificity than the base rule. Narrowed so the programmatic landing is quiet and a
    keyboard user still gets the ring.
*/
.panel__title:focus:not(:focus-visible)[b-tay7dasdt0] {
    outline: none;
}

.panel__sub[b-tay7dasdt0] {
    margin: 6px 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.field[b-tay7dasdt0] {
    margin-bottom: 16px;
}

.field__row[b-tay7dasdt0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field label[b-tay7dasdt0] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.field[b-tay7dasdt0]  input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.field[b-tay7dasdt0]  input::placeholder {
    color: var(--muted);
}

.field[b-tay7dasdt0]  input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus);
}

.link[b-tay7dasdt0] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.link:hover[b-tay7dasdt0] {
    text-decoration: underline;
}

.link:focus-visible[b-tay7dasdt0] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.refusal[b-tay7dasdt0] {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bad);
    background: var(--bad-bg);
    border: 1px solid var(--bad-line);
    border-radius: 8px;
}

.submit[b-tay7dasdt0] {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 11px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}

.submit:hover:not(:disabled)[b-tay7dasdt0] {
    background: var(--accent-hover);
}

.submit:focus-visible[b-tay7dasdt0] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.submit:disabled[b-tay7dasdt0] {
    opacity: .6;
    cursor: default;
}

.panel__foot[b-tay7dasdt0] {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

@media (min-width: 900px) {
    .auth[b-tay7dasdt0] {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .auth__aside[b-tay7dasdt0] {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 56px;
        background: var(--aside);
    }

    .panel__mark[b-tay7dasdt0] {
        display: none;
    }

    .auth__panel[b-tay7dasdt0] {
        padding: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .field[b-tay7dasdt0]  input,
    .submit[b-tay7dasdt0] {
        transition: none;
    }
}
/* /Pages/Users.razor.rz.scp.css */
/*
    USER ADMINISTRATION.

    This one lives inside the shell, so it inherits the application's page background rather than
    painting its own. Only the pieces the shell does not already provide are styled here, and both
    colour schemes are declared for the same reason the sign-in screen declares them.
*/

.sec[b-qlh6dc6k20],
.sec-denied[b-qlh6dc6k20] {
    --ink: #101720;
    --muted: #5b6572;
    --line: #dbe0e6;
    --line-strong: #c3cad3;
    --surface: #ffffff;
    --surface-alt: #f6f8fa;
    --accent: #15693a;
    --accent-hover: #0f5330;
    --on-accent: #ffffff;
    --focus: rgba(21, 105, 58, 0.28);
    --bad: #9f1d1d;
    --bad-bg: #fdf4f4;
    --bad-line: #eec7c7;
    --good-bg: #f1f8f3;
    --good-line: #cbe4d4;
    --good-ink: #16603a;
    --warn-bg: #fbf6e9;
    --warn-line: #e6d9b4;
    --warn-ink: #6b530f;

    color: var(--ink);
    max-width: 1180px;
}

@media (prefers-color-scheme: dark) {
    .sec[b-qlh6dc6k20],
    .sec-denied[b-qlh6dc6k20] {
        --ink: #e7edf4;
        --muted: #94a2b3;
        --line: #263140;
        --line-strong: #33404f;
        --surface: #141b23;
        --surface-alt: #1a2029;
        --accent: #1d7f45;
        --accent-hover: #23934f;
        --focus: rgba(46, 158, 92, 0.35);
        --bad: #f4a6a6;
        --bad-bg: #2a1616;
        --bad-line: #4d2626;
        --good-bg: #12241a;
        --good-line: #23412f;
        --good-ink: #93d3ac;
        --warn-bg: #241f10;
        --warn-line: #453a1c;
        --warn-ink: #e2cd93;
    }
}

.sec__head[b-qlh6dc6k20] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sec h1[b-qlh6dc6k20],
.sec-denied h1[b-qlh6dc6k20] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* See the note on .panel__title in Login.razor.css: the routed heading's programmatic focus is
   quiet, and a keyboard user keeps the ring the base sheet gives them. */
.sec h1:focus:not(:focus-visible)[b-qlh6dc6k20],
.sec-denied h1:focus:not(:focus-visible)[b-qlh6dc6k20] {
    outline: none;
}

.sec__sub[b-qlh6dc6k20] {
    margin: 5px 0 0;
    max-width: 60ch;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* --- refusal ------------------------------------------------------------------------------- */

.sec-denied[b-qlh6dc6k20] {
    max-width: 56ch;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn-line);
    border-radius: 10px;
}

.sec-denied p[b-qlh6dc6k20] {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.sec-denied__note[b-qlh6dc6k20] {
    color: var(--muted);
    font-size: 13px;
}

/* --- notes --------------------------------------------------------------------------------- */

.sec-note[b-qlh6dc6k20] {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid;
    border-radius: 8px;
}

.sec-note--bad[b-qlh6dc6k20] {
    color: var(--bad);
    background: var(--bad-bg);
    border-color: var(--bad-line);
}

.sec-note--good[b-qlh6dc6k20] {
    color: var(--good-ink);
    background: var(--good-bg);
    border-color: var(--good-line);
}

.sec-note__lead[b-qlh6dc6k20] {
    margin: 0;
    font-weight: 600;
}

.violations[b-qlh6dc6k20] {
    margin: 8px 0 0;
    padding-left: 18px;
    line-height: 1.55;
}

.violations li + li[b-qlh6dc6k20] {
    margin-top: 2px;
}

/* --- the create card ------------------------------------------------------------------------ */

.sec-card[b-qlh6dc6k20] {
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.sec-card__title[b-qlh6dc6k20] {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
}

.sec-card__actions[b-qlh6dc6k20] {
    margin-top: 16px;
}

.grid[b-qlh6dc6k20] {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .grid[b-qlh6dc6k20] {
        grid-template-columns: 1fr 1fr;
    }

    .field--wide[b-qlh6dc6k20] {
        grid-column: 1 / -1;
    }
}

.field label[b-qlh6dc6k20] {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.field[b-qlh6dc6k20]  input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 11px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 7px;
}

.field[b-qlh6dc6k20]  input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus);
}

.field__hint[b-qlh6dc6k20] {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.check[b-qlh6dc6k20] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13.5px;
}

.check[b-qlh6dc6k20]  input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* --- the table ------------------------------------------------------------------------------ */

.sec-table__scroll[b-qlh6dc6k20] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.sec-table[b-qlh6dc6k20] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sec-table th[b-qlh6dc6k20] {
    padding: 10px 14px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.sec-table td[b-qlh6dc6k20] {
    padding: 11px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.sec-table tbody tr:last-child td[b-qlh6dc6k20] {
    border-bottom: 0;
}

.cell--code[b-qlh6dc6k20] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
}

.cell--muted[b-qlh6dc6k20] {
    color: var(--muted);
    white-space: nowrap;
}

.cell--actions[b-qlh6dc6k20] {
    white-space: nowrap;
    text-align: right;
}

.chip[b-qlh6dc6k20] {
    display: inline-block;
    margin: 0 4px 3px 0;
    padding: 2px 7px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 5px;
}

.badge[b-qlh6dc6k20] {
    display: inline-block;
    margin: 0 4px 3px 0;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 20px;
    white-space: nowrap;
}

.badge--ok[b-qlh6dc6k20] {
    color: var(--good-ink);
    background: var(--good-bg);
    border-color: var(--good-line);
}

.badge--warn[b-qlh6dc6k20] {
    color: var(--warn-ink);
    background: var(--warn-bg);
    border-color: var(--warn-line);
}

.badge--off[b-qlh6dc6k20] {
    color: var(--bad);
    background: var(--bad-bg);
    border-color: var(--bad-line);
}

.sec-table__drawer td[b-qlh6dc6k20] {
    background: var(--surface-alt);
}

.drawer[b-qlh6dc6k20] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 720px;
}

.drawer .field[b-qlh6dc6k20] {
    min-width: 260px;
    flex: 1;
}

.drawer .check[b-qlh6dc6k20] {
    margin-top: 0;
    padding-bottom: 9px;
}

.drawer__note[b-qlh6dc6k20] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

/* --- buttons -------------------------------------------------------------------------------- */

.btn[b-qlh6dc6k20] {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    min-height: 36px;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.btn:hover:not(:disabled)[b-qlh6dc6k20] {
    background: var(--surface-alt);
}

.btn:focus-visible[b-qlh6dc6k20] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn:disabled[b-qlh6dc6k20] {
    opacity: .55;
    cursor: default;
}

.btn--primary[b-qlh6dc6k20] {
    color: var(--on-accent);
    background: var(--accent);
    border-color: transparent;
}

.btn--primary:hover:not(:disabled)[b-qlh6dc6k20] {
    background: var(--accent-hover);
}

.btn--quiet[b-qlh6dc6k20] {
    padding: 5px 10px;
    min-height: 30px;
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 500;
}

.sr-only[b-qlh6dc6k20] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}