@import '_content/StreamionPortal.Web.Components/StreamionPortal.Web.Components.84zzl0g9zs.bundle.scp.css';

/* /Components/Dialogs/MoveInCustomerDialog.razor.rz.scp.css */
.mic-search[b-ypka9vtcge] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
[b-ypka9vtcge] .mic-field { flex: 1 1 220px; min-width: 0; }
.mic-none[b-ypka9vtcge] { margin: 16px 0 0; font-size: 14px; color: var(--text-2); }
.mic-list[b-ypka9vtcge] { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.mic-choice[b-ypka9vtcge] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.mic-choice:hover[b-ypka9vtcge] { border-color: var(--accent); }
.mic-choice:focus-visible[b-ypka9vtcge] { outline: 2px solid var(--accent); outline-offset: 2px; }
.mic-choice.is-chosen[b-ypka9vtcge] { border-color: var(--accent); background: var(--accent-soft); }
/* /Components/Dialogs/MoveInServerDialog.razor.rz.scp.css */
.mis-invoices[b-0lelxd7b8z] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; }
.mis-invoices-label[b-0lelxd7b8z] { font-size: 12.5px; color: var(--text-3); margin-right: 4px; }
.mis-note[b-0lelxd7b8z] { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
/* /Components/Dialogs/PlanSwitchDialog.razor.rz.scp.css */
[b-jdr67kicdt] .ps-options { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.ps-option[b-jdr67kicdt] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* /Components/Dialogs/PriceChangeDialog.razor.rz.scp.css */
.pc-servers[b-49dqnvj2s6] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.pc-server[b-49dqnvj2s6] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* /Components/Pages/Account/AccountDataCard.razor.rz.scp.css */
/* Your data (#82): the export, and below it — set apart in red — deleting
   the account. */

.acc-head[b-5di8fe0tmw] { display: flex; gap: 12px; align-items: flex-start; }
.acc-icon[b-5di8fe0tmw] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.acc-icon.is-danger[b-5di8fe0tmw] { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.acc-text[b-5di8fe0tmw] { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.acc-list[b-5di8fe0tmw] { margin: 14px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.acc-list.is-tight[b-5di8fe0tmw] { margin: 4px 0 0; }
.acc-danger[b-5di8fe0tmw] { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.acc-actions[b-5di8fe0tmw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
@media (max-width: 599.98px) {
    .acc-actions[b-5di8fe0tmw]  .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}
/* /Components/Pages/Account/Security.razor.rz.scp.css */
/* Security (#126): one column — the second factor in whichever state it is
   in, and the new recovery codes right after they are made. */

.sec-stack[b-6w8dakd9zz] { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }

.sec-head[b-6w8dakd9zz] { display: flex; gap: 12px; align-items: flex-start; }
.sec-icon[b-6w8dakd9zz] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.sec-icon.is-on[b-6w8dakd9zz] { background: var(--ok-soft); color: var(--ok); }
.sec-title-row[b-6w8dakd9zz] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sec-title[b-6w8dakd9zz] {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}
.sec-text[b-6w8dakd9zz] { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }

.sec-actions[b-6w8dakd9zz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.sec-actions-end[b-6w8dakd9zz] { justify-content: flex-end; }
[b-6w8dakd9zz] .sec-off { margin-left: auto; }
@media (max-width: 599.98px) {
    .sec-actions[b-6w8dakd9zz]  .mud-button-root { flex: 1 1 auto; min-height: 44px; }
    [b-6w8dakd9zz] .sec-off { margin-left: 0; }
}

/* Setup: the code on the left, the two steps beside it; stacked on a phone. */
.sec-setup[b-6w8dakd9zz] { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.sec-qr[b-6w8dakd9zz] {
    width: 190px;
    flex: none;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}
.sec-qr[b-6w8dakd9zz]  svg { display: block; width: 100%; height: auto; }
.sec-steps[b-6w8dakd9zz] { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sec-steps > li[b-6w8dakd9zz] { display: flex; gap: 12px; align-items: flex-start; }
.sec-step-no[b-6w8dakd9zz] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.sec-step-body[b-6w8dakd9zz] { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; align-items: flex-start; }
.sec-step-title[b-6w8dakd9zz] { margin: 2px 0 0; font-size: 15px; font-weight: 800; }
[b-6w8dakd9zz] .sec-link { padding: 0 2px; min-width: 0; }
[b-6w8dakd9zz] .sec-code { max-width: 200px; }
[b-6w8dakd9zz] .sec-code input { font-family: var(--font-mono), monospace; letter-spacing: 0.12em; }

.sec-secret[b-6w8dakd9zz] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--font-mono), monospace;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    user-select: all;
}

/* The new codes: amber frame — they are shown this once. */
.sec-codes-card[b-6w8dakd9zz] { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.sec-codes[b-6w8dakd9zz] {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono), monospace;
    font-size: 14.5px;
}
.sec-codes li[b-6w8dakd9zz] { user-select: all; overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
    .sec-codes[b-6w8dakd9zz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* The password form: plain inputs, so the browser posts them itself (see the
   card), styled like the outlined MudBlazor fields around them. */
.sec-password[b-6w8dakd9zz] { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.sec-input[b-6w8dakd9zz] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.sec-input:focus-visible[b-6w8dakd9zz] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sec-hint[b-6w8dakd9zz] { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }

/* The sign-in address next to the name (#81): shown, not changed here. */
.sec-email[b-6w8dakd9zz] { display: flex; flex-direction: column; gap: 2px; }
.sec-email .sec-hint[b-6w8dakd9zz] { margin-top: 0; }
.sec-email-value[b-6w8dakd9zz] { font-size: 14px; overflow-wrap: anywhere; }
.sec-email-row[b-6w8dakd9zz] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* /Components/Pages/Admin/Accounting.razor.rz.scp.css */
/* Accounting (#126): the connection and what invoices refer to side by side,
   the invoices below (InvoicesPanel). One column below 1100 px. */

.acc-grid[b-ajvvyuaxf8] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.acc-grid.is-single[b-ajvvyuaxf8] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099.98px) {
    .acc-grid[b-ajvvyuaxf8] { grid-template-columns: minmax(0, 1fr); }
}

.acc-text[b-ajvvyuaxf8] { margin: 0; font-size: 14.5px; }
.acc-caption[b-ajvvyuaxf8] { margin: 0; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.acc-missing[b-ajvvyuaxf8] { margin: 6px 0 8px; padding-left: 20px; }
.acc-code[b-ajvvyuaxf8] { font-family: var(--font-mono), monospace; font-size: 12.5px; background: none; padding: 0; overflow-wrap: break-word; }
.acc-muted[b-ajvvyuaxf8] { color: var(--text-3); }
.acc-found[b-ajvvyuaxf8] { display: inline-flex; align-items: flex-start; gap: 6px; }
[b-ajvvyuaxf8] .acc-found-icon { color: var(--ok); flex: none; }
.acc-missing-ref[b-ajvvyuaxf8] { display: block; font-weight: 800; color: var(--danger); }
/* /Components/Pages/Admin/Hosts.razor.rz.scp.css */
/* Studio hosts (#126): the numbers, the queue of paid orders, the hosts with
   what runs on them. */

.hosts-tiles[b-0131omtm3k] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 719.98px) {
    .hosts-tiles[b-0131omtm3k] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.hosts-tile[b-0131omtm3k] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hosts-tile.is-warn[b-0131omtm3k] { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.hosts-tile-label[b-0131omtm3k] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}
.hosts-tile.is-warn .hosts-tile-label[b-0131omtm3k] { color: var(--warn); }
.hosts-tile-line[b-0131omtm3k] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hosts-tile-value[b-0131omtm3k] { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.hosts-tile-value.is-ok[b-0131omtm3k] { color: var(--ok); }
.hosts-tile-value.is-warn[b-0131omtm3k] { color: var(--warn); }
.hosts-tile-note[b-0131omtm3k] { font-size: 13px; color: var(--text-2); }

.hosts-waiting[b-0131omtm3k] { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }

.hosts-nowrap[b-0131omtm3k] { white-space: nowrap; }
.hosts-small[b-0131omtm3k] { display: block; font-size: 12.5px; }
.hosts-mono[b-0131omtm3k], .hosts-code[b-0131omtm3k] {
    display: block;
    font-family: var(--font-mono), monospace;
    font-size: 12.5px;
    color: var(--text-2);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.hosts-code[b-0131omtm3k] { display: inline; font-size: 13px; color: var(--text); margin-right: 6px; }
.hosts-fingerprint[b-0131omtm3k] {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono), monospace;
    font-size: 12px;
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.hosts-places[b-0131omtm3k] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hosts-actions[b-0131omtm3k] { display: inline-flex; gap: 2px; }
[b-0131omtm3k] .hosts-toggle { padding: 0 2px; min-width: 0; margin-top: 2px; }
[b-0131omtm3k] .hosts-choice { min-width: 16rem; }
[b-0131omtm3k] .hosts-state { min-width: 10rem; }
[b-0131omtm3k] .hosts-choice .mud-input-control, [b-0131omtm3k] .hosts-state .mud-input-control { margin-top: 0; }
/* /Components/Pages/Admin/InvoicesPanel.razor.rz.scp.css */
/* The invoices on the accounting page (#126): a dense table; an invoice that
   waits for the operator is tinted; its details open underneath in two
   columns — whom it is for, and what is on it and how to finish it. */

.inv-lead[b-iz9w728gon] { margin: -6px 0 0; padding: 0 20px 14px; font-size: 14px; color: var(--text-2); }
[b-iz9w728gon] .inv-attention > td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.inv-nowrap[b-iz9w728gon] { white-space: nowrap; }
.inv-right[b-iz9w728gon] { text-align: right; }
.inv-small[b-iz9w728gon] { display: block; font-size: 12.5px; }
.inv-code[b-iz9w728gon] { font-family: var(--font-mono), monospace; font-size: 12.5px; background: none; padding: 0; overflow-wrap: anywhere; }
.inv-error[b-iz9w728gon] { display: block; margin-top: 4px; font-size: 12.5px; color: var(--danger); overflow-wrap: anywhere; }
.inv-actions[b-iz9w728gon] { display: inline-flex; align-items: center; gap: 6px; }
.inv-actions[b-iz9w728gon]  .mud-button-root { white-space: nowrap; }

.inv-details[b-iz9w728gon] { padding: 16px 20px 18px 36px; display: flex; flex-direction: column; gap: 18px; }
.inv-details.is-card[b-iz9w728gon] { padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.inv-columns[b-iz9w728gon] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 28px; }
.inv-block[b-iz9w728gon] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inv-block-title[b-iz9w728gon] { margin: 0; font-size: 13px; font-weight: 800; color: var(--text-2); }
.inv-hint[b-iz9w728gon] { margin: 0; font-size: 13px; color: var(--text-3); }

.inv-candidates[b-iz9w728gon] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-candidates > li[b-iz9w728gon] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.inv-candidate-text[b-iz9w728gon] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
[b-iz9w728gon] .inv-link-button { padding: 0 2px; min-width: 0; }

.inv-positions[b-iz9w728gon] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.inv-positions td[b-iz9w728gon] { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.inv-positions tr:last-child td[b-iz9w728gon] { border-bottom: none; }

.inv-close[b-iz9w728gon] { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; }
[b-iz9w728gon] .inv-close-field { flex: 1 1 240px; }

/* The log sits flush inside the details, without the subtable's indent. */
.inv-log td:first-child[b-iz9w728gon] { padding-left: 12px; }
.inv-log[b-iz9w728gon] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* /Components/Pages/Admin/Jobs.razor.rz.scp.css */
/* Provisioning jobs (#126): one dense table; a failed job's row is tinted so
   it stands out among the many that went through. */

[b-ndlznzd8v4] .jobs-attention > td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.jobs-nowrap[b-ndlznzd8v4] { white-space: nowrap; }
.jobs-small[b-ndlznzd8v4] { display: block; font-size: 12.5px; }
.jobs-code[b-ndlznzd8v4] { font-family: var(--font-mono), monospace; font-size: 13px; background: none; padding: 0; overflow-wrap: anywhere; }
.jobs-job[b-ndlznzd8v4] { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.jobs-error[b-ndlznzd8v4] { display: block; font-size: 12.5px; color: var(--danger); overflow-wrap: anywhere; }
.jobs-actions[b-ndlznzd8v4] { display: inline-flex; align-items: center; gap: 6px; }
.jobs-actions[b-ndlznzd8v4]  .mud-button-root { white-space: nowrap; }
/* /Components/Pages/Admin/Locations.razor.rz.scp.css */
/* Server locations (#126): one card per country, its datacenters inside. */

.loc-head[b-1hood3x9uf] { align-items: center; }
.loc-title[b-1hood3x9uf] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.loc-tools[b-1hood3x9uf] { align-items: center; }
.loc-code[b-1hood3x9uf] { font-family: var(--font-mono), monospace; font-size: 13px; background: none; padding: 0; }
.loc-actions[b-1hood3x9uf] { display: inline-flex; gap: 2px; }
.loc-foot[b-1hood3x9uf] { padding: 12px 20px 16px; border-top: 1px solid var(--border); }
/* /Components/Pages/Admin/PlanWantedPanel.razor.rz.scp.css */
/* Plans customers want, waiting for room (#224): like the queue above, tinted. */

.pw-lead[b-5nd4skdd4e] { margin: -6px 0 0; padding: 0 20px 14px; font-size: 14px; color: var(--text-2); }
.pw-list[b-5nd4skdd4e] { list-style: none; margin: 0; padding: 0 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.pw-list > li[b-5nd4skdd4e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.pw-text[b-5nd4skdd4e] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pw-actions[b-5nd4skdd4e] { display: flex; flex-wrap: wrap; gap: 6px; }
/* /Components/Pages/Admin/PriceChangesPanel.razor.rz.scp.css */
/* Price changes on the accounting page (#79): what still needs the
   operator in orgaMAX is tinted, like the subscription reminders. */

.pc-lead[b-ocb1sy8utr] { margin: -6px 0 0; padding: 0 20px 14px; font-size: 14px; color: var(--text-2); }
.pc-code[b-ocb1sy8utr] { margin-left: 6px; font-family: var(--font-mono), monospace; font-size: 12.5px; background: none; padding: 0; overflow-wrap: anywhere; }
.pc-list[b-ocb1sy8utr] { list-style: none; margin: 0; padding: 0 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.pc-list > li[b-ocb1sy8utr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.pc-list > li.is-waiting[b-ocb1sy8utr] { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.pc-text[b-ocb1sy8utr] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pc-actions[b-ocb1sy8utr] { display: flex; flex-wrap: wrap; gap: 6px; }
/* /Components/Pages/Admin/SubscriptionsPanel.razor.rz.scp.css */
/* The monthly invoices on the accounting page (#148): reminders to set a
   subscription up in orgaMAX as a list, the invoices as a dense table; what
   needs the operator is tinted. */

.sub-lead[b-91j153zo8v] { margin: -6px 0 0; padding: 0 20px 14px; font-size: 14px; color: var(--text-2); }
[b-91j153zo8v] .sub-attention > td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.sub-nowrap[b-91j153zo8v] { white-space: nowrap; }
.sub-small[b-91j153zo8v] { display: block; font-size: 12.5px; }
.sub-code[b-91j153zo8v] { font-family: var(--font-mono), monospace; font-size: 12.5px; background: none; padding: 0; overflow-wrap: anywhere; }
.sub-warn[b-91j153zo8v] { display: block; margin-top: 4px; font-size: 12.5px; color: var(--warn); }
[b-91j153zo8v] .sub-assign { margin-top: 4px; }

.sub-block[b-91j153zo8v] { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 18px; }
.sub-block-title[b-91j153zo8v] { margin: 0; font-size: 13px; font-weight: 800; color: var(--text-2); }
.sub-reminders[b-91j153zo8v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-reminders > li[b-91j153zo8v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--warn) 6%, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sub-reminder-text[b-91j153zo8v] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.sub-reminder-text .sub-code[b-91j153zo8v] { margin-left: 6px; }
/* /Components/Pages/Admin/WorkspaceDetail.razor.rz.scp.css */
/* Workspace detail (#126): the servers across the page, members and history
   side by side below; one column below 960 px. */

.wd-pair[b-9aj64a74nc] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
@media (max-width: 959.98px) {
    .wd-pair[b-9aj64a74nc] { grid-template-columns: minmax(0, 1fr); }
}

.wd-nowrap[b-9aj64a74nc] { white-space: nowrap; }
.wd-email[b-9aj64a74nc] { overflow-wrap: anywhere; }
.wd-code[b-9aj64a74nc] { font-family: var(--font-mono), monospace; font-size: 13px; background: none; padding: 0; }

/* Moving a customer in (#143): three steps, each with its state and action. */
.wd-movein[b-9aj64a74nc] { display: flex; flex-direction: column; gap: 14px; }
.wd-lead[b-9aj64a74nc] { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.wd-steps[b-9aj64a74nc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wd-step[b-9aj64a74nc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.wd-step-text[b-9aj64a74nc] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }

/* Billing for support (#77): customer and billing details side by side, then servers and invoices. */
.wd-billing-facts[b-9aj64a74nc] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; padding: 0 16px 16px; }
.wd-fact[b-9aj64a74nc] { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.wd-fact-label[b-9aj64a74nc] { font-size: 12.5px; color: var(--text-3); }
.wd-vat[b-9aj64a74nc] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
/* /Components/Pages/Admin/Workspaces.razor.rz.scp.css */
/* All workspaces (#77): search and the billing filter above the list. */
.aw-filters[b-pqzsbdr2lj] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 0 16px 12px; }
[b-pqzsbdr2lj] .aw-search { flex: 1 1 260px; min-width: 0; max-width: 420px; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Dashboard (#126): what needs you, the numbers, the servers — and, beside
   them, ordering and billing. One column below 960 px. */

.dash-grid[b-e2tll81kj5] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 20px;
    align-items: start;
}
.dash-main[b-e2tll81kj5], .dash-side[b-e2tll81kj5] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 959.98px) {
    .dash-grid[b-e2tll81kj5] { grid-template-columns: minmax(0, 1fr); }
}

.dash-padded[b-e2tll81kj5] { align-items: flex-start; }
.portal-card-head.is-flush[b-e2tll81kj5] { width: 100%; }

.dash-attention[b-e2tll81kj5] { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
[b-e2tll81kj5] .dash-attention-icon { color: var(--warn); }
.dash-attention-row[b-e2tll81kj5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px 12px 20px;
    border-top: 1px solid var(--border);
}
.dash-attention-text[b-e2tll81kj5] { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.dash-attention-what[b-e2tll81kj5] { font-weight: 800; overflow-wrap: anywhere; }
.dash-attention-why[b-e2tll81kj5] { font-size: 14px; color: var(--text-2); }
.dash-attention-note[b-e2tll81kj5] { font-size: 13px; color: var(--text-3); }

.dash-tiles[b-e2tll81kj5] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 599.98px) {
    .dash-tiles[b-e2tll81kj5] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.dash-tile[b-e2tll81kj5] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-tile-label[b-e2tll81kj5] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}
.dash-tile-value[b-e2tll81kj5] { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.dash-tile-value.is-ok[b-e2tll81kj5] { color: var(--ok); }
.dash-tile-value.is-info[b-e2tll81kj5] { color: var(--info); }

.dash-server-list[b-e2tll81kj5] { list-style: none; margin: 0; padding: 0; }
.dash-server-row[b-e2tll81kj5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 16px 12px 20px;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    min-height: 44px;
}
.dash-server-row:hover[b-e2tll81kj5] { background: var(--surface-2); }
.dash-plan-icon[b-e2tll81kj5] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.dash-server-name[b-e2tll81kj5] { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dash-server-title[b-e2tll81kj5] { font-weight: 800; overflow-wrap: anywhere; }
.dash-server-meta[b-e2tll81kj5] { font-size: 12.5px; color: var(--text-3); }
.dash-server-date[b-e2tll81kj5] { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
[b-e2tll81kj5] .dash-server-chevron { color: var(--text-3); }
@media (max-width: 599.98px) {
    /* A phone: name and chevron on the first line, status under the name. */
    .dash-server-row[b-e2tll81kj5] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon name chevron" ". status status";
    }
    .dash-plan-icon[b-e2tll81kj5] { grid-area: icon; }
    .dash-server-name[b-e2tll81kj5] { grid-area: name; }
    .dash-server-status[b-e2tll81kj5] { grid-area: status; }
    [b-e2tll81kj5] .dash-server-chevron { grid-area: chevron; }
    .dash-server-date[b-e2tll81kj5] { display: none; }
}

.dash-order-plan[b-e2tll81kj5] { display: flex; align-items: center; gap: 12px; }
.dash-note[b-e2tll81kj5] { margin: 0; font-size: 14px; color: var(--text-2); }

.dash-facts[b-e2tll81kj5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    margin: 0;
    width: 100%;
    align-items: center;
}
.dash-facts dt[b-e2tll81kj5] { font-size: 14px; color: var(--text-2); }
.dash-facts dd[b-e2tll81kj5] { margin: 0; font-weight: 800; text-align: right; }
[b-e2tll81kj5] .dash-inline-button { min-width: 0; padding: 0 6px; }
/* /Components/Pages/OrderServer.razor.rz.scp.css */
/* Order a server (#126): plan and name on the left, the order beside them,
   sticky. Below 960 px one column; below 600 px Due today and the button
   move into a bar at the bottom of the screen. */

.order-layout[b-nojlgb8vey] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 20px;
    align-items: start;
}
.order-main[b-nojlgb8vey] { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (max-width: 959.98px) {
    .order-layout[b-nojlgb8vey] { grid-template-columns: minmax(0, 1fr); }
}

.order-section-title[b-nojlgb8vey] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.order-section-title h2[b-nojlgb8vey] {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
}
.order-step[b-nojlgb8vey] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex: none;
}

/* ---------- Plan cards ---------- */
.order-grid[b-nojlgb8vey] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.order-card[b-nojlgb8vey] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.order-card:hover:not(.is-coming)[b-nojlgb8vey] { border-color: var(--border-strong); }
.order-card.is-selected[b-nojlgb8vey] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.order-card.is-coming[b-nojlgb8vey] { opacity: 0.55; cursor: default; }
.order-card-top[b-nojlgb8vey] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-card-icon[b-nojlgb8vey] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[b-nojlgb8vey] .order-card-check { color: var(--accent); }
.order-card-name[b-nojlgb8vey] { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 17px; }
.order-card-text[b-nojlgb8vey] { font-size: 14px; color: var(--text-2); }
.order-card-bestfor[b-nojlgb8vey] { font-family: var(--font-mono), monospace; font-size: 12px; color: var(--text-3); }
.order-features[b-nojlgb8vey] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.order-features li[b-nojlgb8vey] { display: flex; gap: 8px; align-items: flex-start; }
.order-features li[b-nojlgb8vey]::before { content: "✓"; color: var(--accent); font-weight: 800; flex: none; }
.order-card-price[b-nojlgb8vey] { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); }
.order-price-main[b-nojlgb8vey] { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 22px; }
.order-price-per[b-nojlgb8vey] { font-size: 12.5px; color: var(--text-3); margin-left: 4px; }
.order-price-sub[b-nojlgb8vey] { font-family: var(--font-mono), monospace; font-size: 12px; color: var(--text-3); }

/* ---------- Boxes: name and summary ---------- */
.order-box[b-nojlgb8vey] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[b-nojlgb8vey] .order-name-field { max-width: 440px; }

.order-summary[b-nojlgb8vey] { position: sticky; top: 76px; }
.order-summary-title[b-nojlgb8vey] {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}
.order-lines[b-nojlgb8vey] { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.order-lines.is-ruled[b-nojlgb8vey] { border-top: 1px solid var(--border); padding-top: 12px; }
.order-line[b-nojlgb8vey] { display: flex; justify-content: space-between; gap: 12px; }
.order-line dt[b-nojlgb8vey] { color: var(--text-2); }
.order-line dd[b-nojlgb8vey] { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.order-line dd.is-mono[b-nojlgb8vey] { font-family: var(--font-mono), monospace; font-weight: 500; }
.order-total[b-nojlgb8vey] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.order-total span:last-child[b-nojlgb8vey] { font-size: 24px; }
.order-note[b-nojlgb8vey] { margin: 0; font-size: 14px; color: var(--text-2); }
.order-caption[b-nojlgb8vey] { margin: 0; font-size: 12.5px; color: var(--text-3); }
.order-caption.is-centered[b-nojlgb8vey] { text-align: center; }
.order-invoice[b-nojlgb8vey] { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 12px; }
.order-invoice-label[b-nojlgb8vey] { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.order-invoice-name[b-nojlgb8vey] { font-weight: 800; }
.order-link[b-nojlgb8vey] { color: var(--accent); font-weight: 800; text-decoration: none; font-size: 14px; margin-top: 4px; }
.order-link:hover[b-nojlgb8vey] { text-decoration: underline; }
.order-submit[b-nojlgb8vey] { display: flex; flex-direction: column; gap: 8px; }

/* ---------- The phone's bottom bar ---------- */
.order-bar[b-nojlgb8vey] { display: none; }
@media (max-width: 599.98px) {
    /* What can be ordered comes first; the plans still to come follow, small
       and side by side. */
    .order-grid[b-nojlgb8vey] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-card:not(.is-coming)[b-nojlgb8vey] { order: -1; grid-column: 1 / -1; }
    .order-card.is-coming[b-nojlgb8vey] { padding: 14px; }
    .order-card.is-coming .order-card-text[b-nojlgb8vey] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .order-card.is-coming .order-card-bestfor[b-nojlgb8vey],
    .order-card.is-coming .order-features[b-nojlgb8vey] { display: none; }

    .order-summary[b-nojlgb8vey] { position: static; }
    .order-submit.is-in-card[b-nojlgb8vey] { display: none; }
    .order-bar[b-nojlgb8vey] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        padding: 12px 16px 16px;
        background: var(--surface);
        border-top: 1px solid var(--border);
    }
    .order-total.is-bar[b-nojlgb8vey] { font-size: 16px; }
    .order-total.is-bar span:last-child[b-nojlgb8vey] { font-size: 22px; }
    /* Room under the last card, so the bar never covers it. */
    .order-layout[b-nojlgb8vey] { padding-bottom: 150px; }
}
/* /Components/Pages/ServerPage.razor.rz.scp.css */
/* A server's own page (#126), in tabs since #189: one panel at a time below
   the pills. On Connect the encoder's address sits next to Twitch's key; one
   column below 960 px. */

.sp-panel[b-qahqhmeyd9] { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin-top: 16px; }
.sp-panel[hidden][b-qahqhmeyd9] { display: none; }

.sp-grid[b-qahqhmeyd9] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 959.98px) {
    .sp-grid[b-qahqhmeyd9] { grid-template-columns: minmax(0, 1fr); }
}

.sp-card-head[b-qahqhmeyd9] { display: flex; flex-direction: column; gap: 2px; }
.sp-card-head.is-row[b-qahqhmeyd9] { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-note[b-qahqhmeyd9] { margin: 0; font-size: 14px; color: var(--text-2); }
.sp-note.is-warn[b-qahqhmeyd9] { color: var(--warn); }
.sp-subtitle[b-qahqhmeyd9] { margin: 16px 0 4px; font-size: 14px; font-weight: 600; }

.sp-address[b-qahqhmeyd9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.sp-address-text[b-qahqhmeyd9] {
    flex: 1 1 260px;
    min-width: 0;
    font-family: var(--font-mono), monospace;
    font-size: 14px;
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}
.sp-address-actions[b-qahqhmeyd9] { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-hint[b-qahqhmeyd9] { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-3); }
[b-qahqhmeyd9] .sp-hint-icon { color: var(--warn); flex: none; font-size: 16px; }

.sp-submit[b-qahqhmeyd9] { display: flex; justify-content: flex-end; }

.sp-facts[b-qahqhmeyd9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0;
    font-size: 14px;
}
.sp-facts dt[b-qahqhmeyd9] { color: var(--text-2); }
.sp-facts dd[b-qahqhmeyd9] { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.sp-plan-note[b-qahqhmeyd9] { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-2); }

@media (max-width: 599.98px) {
    .sp-address-actions[b-qahqhmeyd9] { width: 100%; }
    .sp-address-actions[b-qahqhmeyd9]  .mud-button-root { flex: 1 1 auto; min-height: 44px; }
    .sp-submit[b-qahqhmeyd9]  .mud-button-root { width: 100%; min-height: 44px; }
}
/* /Components/Pages/Servers.razor.rz.scp.css */
/* Servers (#126): orders still to be paid on top, then every server — a
   table on a desk, cards on a phone (ResponsiveTable). */

.srv-pending[b-he8fezyd6p] { padding: 16px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.srv-pending-head[b-he8fezyd6p] { display: flex; align-items: center; gap: 10px; }
[b-he8fezyd6p] .srv-pending-icon { color: var(--warn); }
.srv-note[b-he8fezyd6p] { margin: 0; font-size: 14px; color: var(--text-2); }
.srv-pending-row[b-he8fezyd6p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.srv-pending-actions[b-he8fezyd6p] { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.srv-plan-icon[b-he8fezyd6p] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.srv-name[b-he8fezyd6p] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; line-height: 1.3; }
.srv-title[b-he8fezyd6p] { font-weight: 800; overflow-wrap: anywhere; }
.srv-meta[b-he8fezyd6p] { font-size: 12.5px; color: var(--text-3); }
.srv-name-link[b-he8fezyd6p] { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; border-radius: 8px; }
.srv-name-link:hover .srv-title[b-he8fezyd6p] { color: var(--accent); }
.srv-row-actions[b-he8fezyd6p] { display: inline-flex; gap: 2px; justify-content: flex-end; }
.srv-card-link[b-he8fezyd6p] { color: var(--text); text-decoration: none; }

@media (max-width: 599.98px) {
    /* The cards carry their own frame; the outer card would double it. */
    .portal-card:not(.srv-pending)[b-he8fezyd6p] { background: transparent; border: 0; border-radius: 0; }
    .srv-pending-actions[b-he8fezyd6p] { width: 100%; margin-left: 0; }
    .srv-pending-actions[b-he8fezyd6p]  .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}
/* /Components/Pages/Workspace/Billing.razor.rz.scp.css */
/* Billing (#126): what is charged and what was invoiced on the left; how the
   workspace pays and who the invoices go to on the right. One column below
   960 px. */

.bill-grid[b-fkb09id64v] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 20px;
    align-items: start;
}
.bill-main[b-fkb09id64v], .bill-side[b-fkb09id64v] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 959.98px) {
    .bill-grid[b-fkb09id64v] { grid-template-columns: minmax(0, 1fr); }
}

[b-fkb09id64v] .bill-banner { margin: 0 16px 14px; }
[b-fkb09id64v] .bill-empty { border-top: 1px solid var(--border); }

.bill-name[b-fkb09id64v] { display: block; font-weight: 800; overflow-wrap: anywhere; }
.bill-sub[b-fkb09id64v] { display: block; margin: 0; font-size: 13px; color: var(--text-3); }
.bill-padded[b-fkb09id64v] { padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.bill-price[b-fkb09id64v] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; }
.bill-tax[b-fkb09id64v] { display: block; flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.bill-card-facts[b-fkb09id64v] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
    align-items: center;
}
.bill-card-facts dt[b-fkb09id64v] { font-size: 13px; color: var(--text-3); }
.bill-card-facts dd[b-fkb09id64v] { margin: 0; }
.bill-number[b-fkb09id64v] { font-family: var(--font-mono), monospace; font-size: 13px; background: none; padding: 0; }

.bill-total[b-fkb09id64v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.bill-total > div:first-child[b-fkb09id64v] { flex: 1 1 280px; min-width: 0; }
.bill-total-label[b-fkb09id64v] { font-weight: 800; }
.bill-total-value[b-fkb09id64v] {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 22px;
    white-space: nowrap;
}

.bill-icon-head[b-fkb09id64v] { display: flex; gap: 12px; align-items: flex-start; }
.bill-icon-head .bill-sub[b-fkb09id64v] { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.bill-icon[b-fkb09id64v] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.bill-caption[b-fkb09id64v] { margin: -6px 0 0; font-size: 12.5px; color: var(--text-3); }
/* /Components/Pages/Workspace/BillingDetails.razor.rz.scp.css */
/* The billing details page (#161): the banners above the form, the form at
   the content's width. */
.bdp[b-2jvtnv1ck9] { display: flex; flex-direction: column; gap: 16px; }
/* /Components/Pages/Workspace/Settings.razor.rz.scp.css */
/* Workspace settings (#126): the people on the left — members, invitations,
   history; the workspace itself on the right — its name, billing, deleting
   it. One column below 960 px. */

.ws-grid[b-s4ka55f8l2] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 20px;
    align-items: start;
}
.ws-main[b-s4ka55f8l2], .ws-side[b-s4ka55f8l2] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ws-main[b-s4ka55f8l2] { container-type: inline-size; }
@media (max-width: 959.98px) {
    .ws-grid[b-s4ka55f8l2] { grid-template-columns: minmax(0, 1fr); }
}

/* Invite and pending side by side where the column has the room. */
.ws-pair[b-s4ka55f8l2] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
@container (max-width: 719.98px) {
    .ws-pair[b-s4ka55f8l2] { grid-template-columns: minmax(0, 1fr); }
}

.ws-count[b-s4ka55f8l2] {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-text[b-s4ka55f8l2] { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.ws-caption[b-s4ka55f8l2] { margin: 0; font-size: 12.5px; color: var(--text-3); }
.ws-foot[b-s4ka55f8l2] { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }

.ws-name[b-s4ka55f8l2] { font-weight: 800; white-space: nowrap; }
.ws-sub[b-s4ka55f8l2] { display: block; font-size: 12.5px; color: var(--text-3); }
.ws-inline[b-s4ka55f8l2] { display: inline; font-weight: 600; margin-left: 4px; }
.ws-email[b-s4ka55f8l2] { overflow-wrap: anywhere; }
.ws-nowrap[b-s4ka55f8l2] { white-space: nowrap; }
.ws-actions[b-s4ka55f8l2] { display: inline-flex; gap: 2px; }
[b-s4ka55f8l2] .ws-role-select { max-width: 150px; min-width: 120px; }
[b-s4ka55f8l2] .ws-role-select .mud-input-control { margin-top: 0; }
.ws-card-role[b-s4ka55f8l2] { max-width: 180px; }

.ws-icon-head[b-s4ka55f8l2] { display: flex; gap: 12px; align-items: flex-start; }
.ws-initials[b-s4ka55f8l2], .ws-icon[b-s4ka55f8l2] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.ws-submit[b-s4ka55f8l2] { display: flex; justify-content: flex-end; }

.ws-danger[b-s4ka55f8l2] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ws-danger-title[b-s4ka55f8l2] { color: var(--danger); }