/* TNG Cosmetics sales & partner portal - the control panel's visual language (App.Admin.Web/wwwroot/css/panel.css) on
   Bootstrap 5: brand gold accents, calm cards, soft status badges, tables that scroll inside their own box.
   Classes only, no inline styles (the portal's CSP). */

:root {
    --portal-radius: .625rem;
    --portal-gold: #c39a3f;
    --portal-gold-light: #e3c77a;
    --portal-gold-ink: #8c6a1f;
    --portal-page-bg: #f6f7f9;
    --portal-border: #e3e6ea;
    --portal-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --portal-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 .25rem .75rem rgba(16, 24, 40, .05);
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body.portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--portal-page-bg);
    color: var(--bs-body-color);
}

.portal-icon { flex-shrink: 0; vertical-align: -.125em; }
.portal-skip { position: absolute; z-index: 1100; padding: .5rem .75rem; background: var(--bs-body-bg); }

/* ---- Top bar ---------------------------------------------------------------------------------------------------- */
.portal-topbar {
    position: relative;
    z-index: 1020;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-sm);
}
/* Sticky on tablets and wider; on a phone the bar scrolls away and leaves the screen to the page (as on the website). */
@media (min-width: 768px) { .portal-topbar { position: sticky; top: 0; } }
.portal-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    min-height: 3.75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    border-radius: .375rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}
.portal-brand:hover { color: var(--bs-emphasis-color); }
.portal-brand-mark { width: 40px; height: 22px; flex-shrink: 0; }
.portal-brand-text { font-size: 1rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.portal-brand-sub {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--portal-gold);
}

.portal-nav { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.portal-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .4375rem .75rem;
    border-radius: .5rem;
    color: #495057;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.portal-nav-link > .portal-icon { color: var(--bs-secondary-color); }
.portal-nav-link:hover { background: rgba(var(--bs-emphasis-color-rgb), .05); color: var(--bs-emphasis-color); }
.portal-nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.portal-nav-link.active > .portal-icon { color: var(--bs-primary); }

.portal-account { display: flex; align-items: center; gap: .625rem; margin-left: auto; min-width: 0; }
.portal-user {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-width: 0;
    padding: .25rem .375rem .25rem .5rem;
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    font-size: .875rem;
}
.portal-user > .portal-icon { width: 1.25rem; height: 1.25rem; color: var(--bs-primary); }
.portal-user-name { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-role {
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.portal-role.is-sales { background: #fbf3df; color: var(--portal-gold-ink); box-shadow: inset 0 0 0 1px #ecd9a6; }
.portal-role.is-affiliate { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle); }
.portal-signout { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }

/* Phones: brand and account on the first line, the pages as a full-width row of tabs below. */
@media (max-width: 767.98px) {
    .portal-topbar-inner { gap: .5rem .75rem; padding-top: .5rem; padding-bottom: 0; }
    .portal-brand-text { font-size: .9375rem; }
    .portal-nav {
        order: 3;
        flex: 1 0 100%;
        gap: .125rem;
        margin: 0 calc(var(--bs-gutter-x) * -.5);
        padding: 0 calc(var(--bs-gutter-x) * .5);
        border-top: 1px solid var(--portal-border);
        overflow-x: auto;
    }
    .portal-nav-link { padding: .625rem .75rem; border-radius: 0; border-bottom: 2px solid transparent; }
    .portal-nav-link.active { background: none; border-bottom-color: var(--bs-primary); }
    .portal-user-name { max-width: 7.5rem; }
    .portal-user > .portal-icon { display: none; }
    .portal-user { padding-left: .625rem; }
}
@media (max-width: 419.98px) {
    .portal-brand-sub { display: none; }
    .portal-user-name { display: none; }
    .portal-user { padding: .125rem; border: 0; }
    .portal-signout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ---- Page frame ------------------------------------------------------------------------------------------------- */
.portal-main { flex: 1 0 auto; min-width: 0; padding-top: 1.5rem; padding-bottom: 2rem; outline: 0; }
.portal-foot { padding-top: 1rem; padding-bottom: 1.5rem; color: #8c7a4f; font-size: .8125rem; letter-spacing: .02em; }

.portal-page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.portal-page-title { min-width: 0; }
.portal-page-title h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -.015em; color: var(--bs-emphasis-color); }
.portal-page-title p { margin: .25rem 0 0; color: var(--bs-secondary-color); font-size: .9375rem; }
.portal-back { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .375rem; font-size: .875rem; color: var(--bs-secondary-color); text-decoration: none; }
.portal-back:hover { color: var(--bs-emphasis-color); }
.portal-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Cards ------------------------------------------------------------------------------------------------------ */
.portal-card {
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--portal-shadow);
}
.portal-card + .portal-card { margin-top: 1rem; }
.portal-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--portal-border);
}
.portal-card-head h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 600; color: var(--bs-emphasis-color); }
.portal-card-head h2 > .portal-icon { color: var(--portal-gold); }
.portal-card-hint { color: var(--bs-secondary-color); font-size: .8125rem; }
.portal-card-body { padding: 1.125rem 1.25rem 1.25rem; }
@media (max-width: 575.98px) {
    .portal-card-head { padding: .75rem 1rem; }
    .portal-card-body { padding: 1rem; }
}

/* Stat cards: tinted icon, label, big figure, a short line under it. */
.portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.portal-stat {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--portal-shadow);
}
.portal-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: .625rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.portal-stat-icon .portal-icon { width: 1.125rem; height: 1.125rem; }
.portal-stat-icon.is-gold { background: #fbf3df; color: var(--portal-gold-ink); }
.portal-stat-icon.is-green { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.portal-stat-icon.is-grey { background: var(--bs-secondary-bg); color: #495057; }
.portal-stat-body { min-width: 0; }
.portal-stat-label { color: var(--bs-secondary-color); font-size: .8125rem; font-weight: 500; }
.portal-stat-value { color: var(--bs-emphasis-color); font-size: 1.5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.portal-stat-value small { font-size: .8125rem; font-weight: 500; color: var(--bs-secondary-color); }
.portal-stat-note { margin-top: .25rem; color: var(--bs-secondary-color); font-size: .8125rem; }
.portal-stat-note strong { color: var(--bs-body-color); font-weight: 600; }
.portal-stat-note .sep { margin: 0 .375rem; color: var(--bs-border-color); }
/* Phones: two figures per row, the icon above the figure. */
@media (max-width: 575.98px) {
    .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .portal-stats > :first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* an odd count: the first figure gets the full row */
    .portal-stat { flex-direction: column; gap: .5rem; padding: .875rem; }
    .portal-stat-icon { width: 2.125rem; height: 2.125rem; }
    .portal-stat-value { font-size: 1.3125rem; }
}

/* ---- Tables: the page keeps its width, a wide table scrolls inside its card ------------------------------------- */
/* position: relative keeps absolutely positioned bits (visually-hidden labels) inside the scroll box, not the page. */
.portal-table-scroll { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.portal-table {
    width: 100%;
    margin: 0;
    font-size: .875rem;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04);
}
.portal-table > :not(caption) > * > * { padding: .625rem .875rem; border-bottom-color: var(--portal-border); vertical-align: middle; }
.portal-table > tbody > tr:last-child > * { border-bottom-width: 0; }
.portal-table thead th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--portal-border);
}
.portal-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.portal-table .nowrap { white-space: nowrap; }
.portal-table .sub { display: block; color: var(--bs-secondary-color); font-size: .75rem; }
.portal-table .strong { font-weight: 600; color: var(--bs-emphasis-color); }
.portal-table tr.is-closed > td { color: var(--bs-secondary-color); }
.portal-table tr.is-closed .strong { color: var(--bs-secondary-color); text-decoration: line-through; text-decoration-color: var(--bs-border-color); }
.portal-table .truncate { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-orders-table { min-width: 52rem; }
.portal-affiliate-orders { min-width: 30rem; }
.portal-clicks-table { min-width: 36rem; }
.portal-lines-table { min-width: 36rem; }

.portal-table-foot {
    padding: .625rem 1.25rem;
    border-top: 1px solid var(--portal-border);
    background: var(--bs-tertiary-bg);
    border-radius: 0 0 var(--portal-radius) var(--portal-radius);
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* Row actions */
.portal-row-actions { display: inline-flex; flex-wrap: nowrap; gap: .375rem; }
.portal-row-actions form { margin: 0; }

/* ---- Status badges: tint, darker text, hairline border (the panel's soft badges) --------------------------------- */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.portal-badge::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; opacity: .7; }
.portal-badge.status-info { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle); }
.portal-badge.status-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); box-shadow: inset 0 0 0 1px var(--bs-success-border-subtle); }
.portal-badge.status-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); box-shadow: inset 0 0 0 1px var(--bs-warning-border-subtle); }
.portal-badge.status-muted { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); box-shadow: inset 0 0 0 1px var(--bs-secondary-border-subtle); }
.portal-badge.status-neutral { background: var(--bs-body-bg); color: #495057; box-shadow: inset 0 0 0 1px var(--bs-border-color); }

/* ---- Empty states ----------------------------------------------------------------------------------------------- */
.portal-empty { padding: 2.75rem 1.25rem; text-align: center; }
.portal-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: #fbf3df;
    color: var(--portal-gold-ink);
}
.portal-empty-icon .portal-icon { width: 1.375rem; height: 1.375rem; }
.portal-empty-title { margin: 0 0 .25rem; font-weight: 600; color: var(--bs-emphasis-color); }
.portal-empty p { margin: 0 auto; max-width: 28rem; color: var(--bs-secondary-color); font-size: .9375rem; }
.portal-empty .btn { margin-top: 1rem; }

/* ---- Alerts ----------------------------------------------------------------------------------------------------- */
.alert { border-radius: var(--portal-radius); }
.portal-flash { display: flex; align-items: flex-start; gap: .625rem; border-left: 4px solid var(--bs-alert-color); box-shadow: var(--portal-shadow-sm); }
.portal-flash > .portal-icon { margin-top: .1875rem; }
.portal-flash-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.alert-success.portal-flash { border-left-color: var(--bs-success); }
.alert-success.portal-flash > .portal-icon { color: var(--bs-success); }
.alert-warning.portal-flash { border-left-color: var(--bs-warning); }
.alert-danger.portal-flash { border-left-color: var(--bs-danger); }
.alert-danger.portal-flash > .portal-icon { color: var(--bs-danger); }

/* ---- Buttons, inputs, focus ------------------------------------------------------------------------------------- */
.btn { font-weight: 500; }
.btn:has(> .portal-icon) { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; }
.btn-primary { box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), .25); }
.btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #ced4da;
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-success { --bs-btn-bg: var(--bs-body-bg); }
.btn-outline-danger { --bs-btn-bg: var(--bs-body-bg); }

.form-label { margin-bottom: .3125rem; font-size: .875rem; font-weight: 500; color: #343a40; }
.form-label .optional { color: var(--bs-tertiary-color); font-weight: 400; }
.form-control,
.form-select { border-color: #ced4da; }
.form-control:hover:not(:disabled):not(:focus):not([readonly]),
.form-select:hover:not(:disabled):not(:focus) { border-color: #adb5bd; }
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .65);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .14); }
.form-control::placeholder { color: var(--bs-tertiary-color); }
.form-control[readonly] { background-color: var(--bs-tertiary-bg); }
.form-text { font-size: .8125rem; }
.field-validation-error { display: block; margin-top: .25rem; font-size: .8125rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.125rem; }

.portal-brand:focus-visible,
.portal-nav-link:focus-visible,
.portal-back:focus-visible,
.btn:focus-visible,
.portal-table-scroll:focus-visible,
a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: none;
}
.portal-nav-link:focus-visible { outline-offset: -2px; }

/* An input with an icon inside it, on its left (sign-in, customer fields). */
.portal-input-icon { position: relative; }
.portal-input-icon > .portal-icon {
    position: absolute;
    top: 50%;
    left: .875rem;
    z-index: 4;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}
.portal-input-icon > .form-control { padding-left: 2.5rem; }
.portal-input-icon:focus-within > .portal-icon { color: var(--bs-primary); }

/* ---- Affiliate: referral link ----------------------------------------------------------------------------------- */
.portal-share { display: flex; flex-wrap: wrap; gap: .5rem; }
.portal-share .portal-input-icon { flex: 1 1 18rem; min-width: 0; }
.portal-share .form-control { font-family: var(--bs-font-monospace); font-size: .875rem; }
.portal-share-meta { margin-top: .625rem; color: var(--bs-secondary-color); font-size: .875rem; }
.portal-share-meta code { padding: .0625rem .375rem; border-radius: .25rem; background: #fbf3df; color: var(--portal-gold-ink); font-size: .8125rem; }
.portal-copy.is-copied { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); }

/* ---- Sales: new order ------------------------------------------------------------------------------------------- */
.portal-order-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 992px) {
    .portal-order-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; }
    .portal-summary { position: sticky; top: 5rem; }
}
.portal-order-grid .portal-card + .portal-card { margin-top: 0; }
.portal-order-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }

.portal-picker { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 8rem auto; gap: .75rem; align-items: end; }
@media (max-width: 767.98px) {
    /* minmax(0, ...): the product list's long option labels must not widen the page. */
    .portal-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-picker-product, .portal-picker-add { grid-column: 1 / -1; }
}
.portal-picker > * { min-width: 0; }
.portal-picker .form-select { text-overflow: ellipsis; }
.portal-picker-add .btn { width: 100%; white-space: nowrap; }
.portal-picker-hint { min-height: 1.25rem; margin-top: .375rem; font-size: .8125rem; color: var(--bs-secondary-color); }

.portal-lines { margin-top: 1rem; border: 1px solid var(--portal-border); border-radius: .5rem; overflow: hidden; }
.portal-lines .portal-table thead th { font-size: .6875rem; }
.portal-lines-empty { padding: 1.5rem 1rem; text-align: center; color: var(--bs-secondary-color); font-size: .875rem; }
.portal-lines-empty .portal-icon { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto .5rem; color: var(--bs-tertiary-color); }
.portal-was { margin-right: .3125rem; color: var(--bs-tertiary-color); font-size: .8125rem; }
.portal-disc { color: var(--bs-success-text-emphasis); font-weight: 600; }

.portal-qty { display: inline-flex; align-items: stretch; border: 1px solid #ced4da; border-radius: .375rem; overflow: hidden; background: var(--bs-body-bg); }
.portal-qty button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; padding: 0; border: 0; background: none; color: #495057; }
.portal-qty button:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.portal-qty button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.portal-qty output { min-width: 2.25rem; padding: .25rem .375rem; border-left: 1px solid #ced4da; border-right: 1px solid #ced4da; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-remove { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: .375rem; background: none; color: var(--bs-secondary-color); }
.portal-remove:hover { border-color: var(--bs-danger-border-subtle); background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.portal-remove:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

.portal-summary-rows { margin: 0; }
.portal-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; font-size: .9375rem; }
.portal-summary-row dt { font-weight: 400; color: var(--bs-secondary-color); }
.portal-summary-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-summary-row .free { color: var(--bs-success-text-emphasis); }
.portal-summary-total { margin-top: .375rem; padding-top: .75rem; border-top: 1px dashed var(--portal-border); font-size: 1.0625rem; }
.portal-summary-total dt { color: var(--bs-emphasis-color); font-weight: 600; }
.portal-summary-total dd { font-size: 1.25rem; color: var(--bs-emphasis-color); }
.portal-summary-note { margin: .75rem 0 0; padding: .625rem .75rem; border-radius: .5rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: .8125rem; }
.portal-summary-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.portal-summary-actions .btn-primary { padding-top: .625rem; padding-bottom: .625rem; font-weight: 600; }

/* ---- Status pages (no access, errors) --------------------------------------------------------------------------- */
.portal-status { max-width: 30rem; margin: 2.5rem auto; text-align: center; }
.portal-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.portal-status-icon .portal-icon { width: 1.5rem; height: 1.5rem; }
.portal-status-icon.is-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.portal-status h1 { font-size: 1.375rem; font-weight: 600; color: var(--bs-emphasis-color); }
.portal-status p { color: var(--bs-secondary-color); }
.portal-auth .portal-status { margin: 0 auto; }

/* ---- Signed-out pages: one card on the brand background (the panel's sign-in) ------------------------------------ */
body.portal-auth {
    min-height: 100vh;
    background-color: #f8f2e4;
    background-image:
        radial-gradient(60rem 36rem at 0% 0%, rgba(227, 199, 122, .38), transparent 62%),
        radial-gradient(50rem 32rem at 100% 100%, rgba(195, 154, 63, .26), transparent 60%),
        linear-gradient(160deg, #fdfaf2 0%, #f4ead2 100%);
    background-attachment: fixed;
}
.portal-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
    outline: 0;
}
.portal-auth-card {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 2.25rem 2.25rem 1.75rem;
    overflow: hidden;
    border: 1px solid rgba(195, 154, 63, .22);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(80, 60, 15, .06), 0 1.25rem 2.5rem -.75rem rgba(110, 80, 20, .22);
}
.portal-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--portal-gold), var(--portal-gold-light) 45%, var(--portal-gold));
}
.portal-auth-logo { margin-bottom: 1.25rem; text-align: center; }
.portal-auth-logo img { width: 7.5rem; height: auto; }
.portal-auth-head { margin-bottom: 1.5rem; text-align: center; }
.portal-auth-title { margin: 0 0 .25rem; color: var(--bs-emphasis-color); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.portal-auth-sub { margin: 0; color: var(--bs-secondary-color); }
.portal-auth-form .form-control { padding-top: .5625rem; padding-bottom: .5625rem; }
.portal-auth-submit { margin-top: .5rem; font-size: 1rem; font-weight: 600; }
.portal-auth-help { margin: 1.25rem 0 0; color: var(--bs-secondary-color); font-size: .8125rem; text-align: center; }
.portal-auth-foot { margin: 1.5rem 0 0; color: #8c7a4f; font-size: .8125rem; letter-spacing: .02em; }
@media (max-width: 575.98px) {
    .portal-auth-main { justify-content: flex-start; padding-top: 2rem; }
    .portal-auth-card { padding: 2rem 1.25rem 1.5rem; }
}