/* License & Update Center: list pages, popups and editors (uses the variables from portal.css). */

/* ============================== List pages ============================== */

.page-wrap {
    height: calc(100dvh - 4.75rem);
    overflow-y: auto;
    padding: .25rem .25rem 2rem;
    color: var(--portal-ink);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 2rem;
}
    .page-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem; display: flex; align-items: center; gap: .6rem; }
    .page-header p { color: var(--portal-muted); margin: 0; max-width: 60rem; }

.page-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-header-actions .dxbl-btn { height: 40px; padding-inline: 1.1rem; font-weight: 600; border-radius: 10px; }

.page-count {
    display: inline-flex; align-items: center; height: 24px; padding: 0 .55rem; border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary);
    font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0;
}

.page-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    padding: .75rem;
    min-width: 0;
    flex: none;
}

.page-card-title { font-weight: 700; font-size: 1.02rem; padding: .25rem .25rem .75rem; display: flex; align-items: center; gap: .5rem; }
.page-loading { padding: 3rem; text-align: center; color: var(--portal-muted); }

.portal-grid .dxbl-grid-table > tbody > tr > td { vertical-align: middle; }

.chip-inline { margin-left: .45rem; font-size: .7rem; padding: .12rem .45rem; vertical-align: middle; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.filter-chip {
    display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .85rem;
    border: 1px solid var(--portal-line); border-radius: 999px; background: var(--portal-surface);
    color: var(--portal-ink); font-size: .9rem; cursor: pointer;
}
    .filter-chip b { font-variant-numeric: tabular-nums; }
    .filter-chip:hover { border-color: var(--bs-primary); }
    .filter-chip.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* ============================== Popups and editors ============================== */

.portal-popup .dxbl-modal-title { font-size: 1.15rem; font-weight: 700; }

.editor-loading { padding: 2rem; text-align: center; color: var(--portal-muted); }

.editor-layout .dxbl-fl-cpt { font-weight: 600; font-size: .85rem; color: var(--portal-ink); }

ul.editor-summary { margin: 0 0 1rem; padding: .7rem 1rem .7rem 2rem; border-radius: 10px; background: var(--portal-danger-soft); color: var(--portal-danger); font-size: .9rem; }
ul.editor-summary:not(:has(li)) { display: none; }

.editor-section { padding: 1rem 0; border-top: 1px solid var(--portal-line); }
    .editor-section:first-of-type { border-top: 0; padding-top: 0; }
    .editor-section h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--portal-muted); margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }

.editor-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.editor-section-links { display: flex; gap: .75rem; margin-bottom: .6rem; }

.link-button { border: 0; background: none; padding: 0; color: var(--bs-primary); font-weight: 600; font-size: .85rem; cursor: pointer; }
    .link-button:hover { text-decoration: underline; }

.editor-hint { font-size: .85rem; color: var(--portal-muted); margin: .75rem 0 0; line-height: 1.5; }

.editor-error {
    flex: 1; min-width: 200px; padding: .5rem .8rem; border-radius: 8px;
    background: var(--portal-danger-soft); color: var(--portal-danger); font-size: .9rem;
}

.editor-actions { display: flex; gap: .5rem; justify-content: flex-end; }
    .editor-actions .dxbl-btn { min-width: 96px; height: 38px; font-weight: 600; border-radius: 9px; }

.editor-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.25rem;
    margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--portal-canvas);
}
    .editor-facts:first-child { margin-top: 0; }
    .editor-facts dt { font-size: .75rem; font-weight: 700; color: var(--portal-muted); text-transform: uppercase; letter-spacing: .04em; }
    .editor-facts dd { margin: .15rem 0 0; font-weight: 600; word-break: break-all; }

.mono-input input, .mono-input textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }

.module-option {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 10px;
    border: 1px solid var(--portal-line); cursor: pointer; user-select: none; font-size: .92rem;
    transition: border-color .12s, background .12s;
}
    .module-option input { width: 17px; height: 17px; accent-color: var(--bs-primary); flex: none; }
    .module-option:hover { border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--portal-line)); }
    .module-option.is-selected { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 7%, transparent); }

.module-no {
    flex: none; min-width: 26px; height: 22px; padding: 0 .35rem; border-radius: 6px; display: grid; place-items: center;
    background: #efedf4; color: var(--portal-muted); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.confirm-text { margin: 0; line-height: 1.55; }

/* ============================== License generation ============================== */

.checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }

.check { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .75rem; border-radius: 9px; font-size: .92rem; }
    .check b { margin-right: .3rem; }
.check-ok { background: var(--portal-ok-soft); }
.check-fail { background: var(--portal-danger-soft); }

.check-mark {
    flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: .75rem; font-weight: 700;
}
.check-ok .check-mark { background: var(--portal-ok); }
.check-fail .check-mark { background: var(--portal-danger); }

.license-key { margin-top: 1rem; }

.license-key-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; font-weight: 700; }

.license-key-text {
    width: 100%; resize: vertical; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--portal-line);
    background: var(--portal-canvas); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem;
    word-break: break-all; color: var(--portal-ink);
}

/* ============================== Customer workspace (CustomerEditor) ============================== */

.ce-popup .dxbl-modal-body { padding: 0 !important; }

.ce { display: flex; flex-direction: column; height: min(720px, 86vh); color: var(--portal-ink); }

.ce-header {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.5rem;
    border-bottom: 1px solid var(--portal-line);
    background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 8%, #fff), #fff 60%);
}

.ce-avatar {
    flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: var(--bs-primary); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
}

.ce-title { flex: 1; min-width: 0; }
    .ce-title h2 { font-size: 1.3rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ce-title p { margin: .15rem 0 0; color: var(--portal-muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
    .ce-title p span + span::before { content: "\00B7"; margin-right: .9rem; color: var(--portal-none); }

.ce-status {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .55rem; border-radius: 999px;
    background: #efedf4; color: var(--portal-muted); font-weight: 700; font-size: .85rem; cursor: pointer; margin: 0;
}
    .ce-status.is-on { background: var(--portal-ok-soft); color: var(--portal-ok); }

.ce-close {
    flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent;
    color: var(--portal-muted); font-size: 1rem; cursor: pointer;
}
    .ce-close:hover { background: #efedf4; color: var(--portal-ink); }

.ce-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }

.ce-nav { padding: 1rem .75rem; border-right: 1px solid var(--portal-line); background: #faf9fc; display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; }

.ce-nav-item {
    display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .75rem; border: 0; border-radius: 10px;
    background: transparent; text-align: left; cursor: pointer; color: var(--portal-ink); position: relative;
}
    .ce-nav-item:hover { background: #f0eef6; }
    .ce-nav-item.is-active { background: var(--portal-surface); box-shadow: var(--portal-shadow); }
    .ce-nav-item.is-active::before {
        content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--bs-primary);
    }

.ce-nav-icon {
    flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: #efedf4;
    fill: none; stroke: var(--portal-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ce-nav-item.is-active .ce-nav-icon { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); stroke: var(--bs-primary); }

.ce-nav-text { display: flex; flex-direction: column; min-width: 0; }
.ce-nav-label { font-weight: 700; font-size: .92rem; }
.ce-nav-hint { font-size: .78rem; color: var(--portal-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ce-nav-alert {
    margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: var(--portal-danger); color: #fff; font-size: .75rem; font-weight: 700;
}

.ce-content { overflow-y: auto; padding: 1.4rem 1.75rem 1.75rem; }

.ce-pane { display: none; }
    .ce-pane.is-active { display: block; }
    .ce-pane h3 {
        font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--portal-muted);
        margin: 1.5rem 0 .6rem; display: flex; align-items: center; gap: .5rem;
    }
    .ce-pane > h3:first-child, .ce-pane > .editor-summary + h3 { margin-top: 0; }
    .ce-pane > .ce-banner + h3 { margin-top: 1.4rem; }
    .ce-pane .editor-section-head h3 { margin-top: 0; }

.ce-banner { display: grid; gap: .8rem; padding: 1rem 1.15rem; border-radius: 12px; }
    .ce-banner strong { display: block; font-size: 1.15rem; }
    .ce-banner span { font-size: .88rem; }
.ce-banner-ok { background: var(--portal-ok-soft); color: var(--portal-ok); }
.ce-banner-warn { background: var(--portal-warn-soft); color: var(--portal-warn); }
.ce-banner-danger { background: var(--portal-danger-soft); color: var(--portal-danger); }
.ce-banner-muted { background: #efedf4; color: var(--portal-muted); }

.ce-progress { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); overflow: hidden; }
    .ce-progress span { display: block; height: 100%; border-radius: 999px; background: currentColor; opacity: .75; }

.ce-period { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; align-items: end; }
.ce-field { display: grid; gap: .35rem; }
    .ce-field label { font-weight: 600; font-size: .85rem; margin: 0; }

.ce-extend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
    .ce-extend span { font-size: .85rem; color: var(--portal-muted); margin-right: .25rem; }
    .ce-extend button {
        height: 32px; padding: 0 .8rem; border: 1px solid var(--portal-line); border-radius: 999px; background: var(--portal-surface);
        font-size: .85rem; font-weight: 600; color: var(--portal-ink); cursor: pointer;
    }
    .ce-extend button:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

.ce-limits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }

.ce-limit { display: grid; align-content: start; gap: .45rem; padding: .85rem .9rem; border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); }
.ce-limit-label { font-size: .78rem; font-weight: 700; color: var(--portal-muted); text-transform: uppercase; letter-spacing: .04em; }
.ce-limit-use { font-size: .78rem; color: var(--portal-muted); }
    .ce-limit-use.is-over { color: var(--portal-danger); font-weight: 700; }

.ce-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }

.ce-choice {
    display: grid; gap: .3rem; padding: .9rem 1rem; text-align: left; cursor: pointer;
    border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); color: var(--portal-ink);
}
    .ce-choice:hover { border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--portal-line)); }
    .ce-choice.is-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent); }
.ce-choice-title { font-weight: 700; }
.ce-choice.is-selected .ce-choice-title { color: var(--bs-primary); }
.ce-choice-text { font-size: .82rem; color: var(--portal-muted); line-height: 1.4; }

.ce-footer { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.25rem .9rem 1.5rem; border-top: 1px solid var(--portal-line); background: #faf9fc; }
    .ce-footer .editor-actions { margin-left: auto; }
    .ce-footer .editor-error { flex: 1; }
.ce-footer-hint { font-size: .85rem; color: var(--portal-muted); }

@media (max-width: 860px) {
    .ce-body { grid-template-columns: 1fr; }
    .ce-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--portal-line); }
    .ce-nav-hint { display: none; }
    .ce-limits, .ce-choices { grid-template-columns: 1fr 1fr; }
}

/* ============================== Workspace frame: compact editors and extras ============================== */

.ce-compact { height: auto; max-height: 86vh; }
.ce-compact .ce-body { grid-template-columns: 1fr; }
.ce-compact .ce-content { max-height: calc(86vh - 170px); }

.ce-heading {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--portal-muted);
    margin: 1.4rem 0 .6rem;
}
.ce-content > .ce-heading:first-child, .ce-content > .editor-summary + .ce-heading { margin-top: 0; }
.ce-content > .editor-facts:first-child { margin-top: 0; }

.ce-avatar-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ce-chip-lg { font-size: .85rem; padding: .35rem .8rem; }

.ce-callout {
    display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--bs-primary) 7%, transparent); color: var(--portal-ink); font-size: .88rem; line-height: 1.5;
}
    .ce-callout svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--bs-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: .05rem; }

.ce-choices-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
    .ce-choices-5 .ce-choice { padding: .75rem .8rem; }

@media (max-width: 860px) {
    .ce-choices-5 { grid-template-columns: 1fr 1fr; }
}

/* ============================== Top bar and list grid (v2) ============================== */

.page-body { padding: .75rem 1.5rem 0; }

.crumbs { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--portal-muted); }
    .crumbs a { color: var(--portal-muted); text-decoration: none; font-weight: 600; }
    .crumbs a:hover { color: var(--bs-primary); }
    .crumbs [aria-current] { color: var(--portal-ink); font-weight: 600; }
.crumbs-sep { color: var(--portal-none); font-size: 1rem; }


/* ---- Card + bar ---- */
.list-card { padding: 0; overflow: hidden; }

.list-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .9rem 1rem; border-bottom: 1px solid var(--portal-line);
}

.list-search {
    display: flex; align-items: center; gap: .5rem; flex: 0 1 340px; min-width: 220px; height: 40px; padding: 0 .8rem;
    border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-canvas); margin: 0; cursor: text;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
    .list-search:focus-within { background: var(--portal-surface); border-color: var(--bs-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent); }
    .list-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--portal-muted); stroke-width: 2; stroke-linecap: round; }
    .list-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .92rem; color: var(--portal-ink); }
    .list-search input::placeholder { color: #a29eb4; }

.list-selected {
    max-width: 260px; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent); color: var(--bs-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.list-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.list-btn {
    display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .85rem;
    border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-surface);
    color: var(--portal-ink); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
    .list-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .list-btn:hover:not(:disabled) { border-color: var(--bs-primary); color: var(--bs-primary); }
    .list-btn:disabled { opacity: .45; cursor: not-allowed; }
.list-btn-danger:hover:not(:disabled) { border-color: var(--portal-danger); color: var(--portal-danger); background: var(--portal-danger-soft); }
.list-btn-primary:not(:disabled) { border-color: var(--bs-primary); color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.list-btn-icon { width: 38px; padding: 0; justify-content: center; }
.list-divider { width: 1px; height: 24px; background: var(--portal-line); margin: 0 .2rem; }

/* ---- Grid ---- */
.portal-grid {
    --dxbl-grid-font-size: .92rem;
    --dxbl-grid-border-color: #eeecf3;
    --dxbl-grid-header-bg: #fbfaFD;
    --dxbl-grid-header-color: var(--portal-muted);
    --dxbl-grid-hover-bg: #f7f5fb;
    --dxbl-grid-focus-bg: color-mix(in srgb, var(--bs-primary) 9%, #fff);
    --dxbl-grid-focus-color: var(--portal-ink);
    --dxbl-grid-selection-bg: color-mix(in srgb, var(--bs-primary) 9%, #fff);
    --dxbl-grid-selection-color: var(--portal-ink);
    --dxbl-grid-focus-frame-color: transparent;
    --dxbl-grid-text-cell-padding-y: .7rem;
    --dxbl-grid-text-cell-padding-x: 1rem;
    --dxbl-grid-border-radius: 0;
    border: 0 !important;
}

/* No vertical lines between columns; light lines between rows. */
.portal-grid .dxbl-grid-table > thead > tr > th,
.portal-grid .dxbl-grid-table > tbody > tr > td {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}
.portal-grid .dxbl-grid-table > thead > tr > th { border-bottom: 1px solid var(--portal-line) !important; }
.portal-grid .dxbl-grid-header-content { font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }

/* Selected row: soft tint with an accent bar instead of solid purple. */
.portal-grid tr.dxbl-grid-focused-row > td { color: var(--portal-ink) !important; }
.portal-grid tr.dxbl-grid-focused-row > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.portal-grid tr.dxbl-grid-focused-row > td .chip { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }

.portal-grid .dxbl-grid-table > tbody > tr { cursor: default; }

/* Pager */
.portal-grid .dxbl-grid-bottom-panel { padding: .6rem 1rem; border-top: 1px solid var(--portal-line); }

/* Built-in search box (Update Tracking grids) */
.portal-grid .dxbl-grid-search-box-container { padding: .5rem 1rem .75rem; }

/* The grid paints the focused row with a ::before overlay that turns solid when the grid has keyboard focus;
   use one light tint in every state so the text stays readable. */
.portal-grid tr.dxbl-grid-focused-row > td::before { background-color: transparent !important; }
.portal-grid tr.dxbl-grid-focused-row > td { background-color: color-mix(in srgb, var(--bs-primary) 9%, #fff) !important; }

.list-bar-title { padding: 0; }
.list-search-end { margin-left: auto; }

/* ============================== Account, status pages, focus ============================== */

/* Sign-in helper pages (forgot / reset password, 2FA ...) still use the template markup: give it the sign-in look. */
.auth-card .main-content { display: block; height: auto; }
.auth-card .block-content { width: auto; gap: 1rem; }
.auth-card .title { gap: .35rem; padding-bottom: .75rem; }
.auth-card .title-header-text { font-size: 1.85rem; line-height: 1.2; font-weight: 700; padding: 0; }
.auth-card .title-content-text,
.auth-card .title-content-text-secondary { font-size: 1rem; line-height: 1.5; color: var(--portal-muted); }
.auth-card .links-container { justify-content: flex-start; flex-wrap: wrap; margin-top: .5rem; font-size: .92rem; color: var(--portal-muted); }
.auth-card .dxbl-btn { height: 46px; border-radius: 10px; font-weight: 600; }

.auth-link-button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
    .auth-link-button:hover { color: #fff; }

/* Account settings */
.acct-card { padding: 0; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--portal-line); }
.acct-tab {
    padding: .9rem .9rem .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--portal-muted); font-weight: 600; font-size: .92rem; text-decoration: none;
}
    .acct-tab:hover { color: var(--portal-ink); }
    .acct-tab.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.acct-body { padding: 1.5rem; max-width: 560px; }
    .acct-body .block-content, .acct-body .manage-content { width: auto; gap: 1rem; }
    .acct-body .main-content { display: block; height: auto; }
    .acct-body .title { gap: .3rem; padding-bottom: .5rem; }
    .acct-body .title-header-text { font-size: 1.15rem; line-height: 1.4; font-weight: 700; padding: 0; }
    .acct-body .title-content-text,
    .acct-body .title-content-text-secondary { font-size: .95rem; line-height: 1.5; color: var(--portal-muted); }
    .acct-body .dxbl-btn { height: 40px; border-radius: 10px; font-weight: 600; }
    .acct-body .alert { border-radius: 10px; font-size: .92rem; }

/* Error and not-found pages */
.state-card { max-width: 560px; margin: 3rem auto 0; padding: 2.5rem 2rem; text-align: center; display: grid; justify-items: center; gap: .75rem; }
    .state-card h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
    .state-card p { color: var(--portal-muted); margin: 0; line-height: 1.55; }
    .state-card .list-btn { margin-top: .75rem; text-decoration: none; }
.state-icon {
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary);
}
    .state-icon-danger { background: var(--portal-danger-soft); color: var(--portal-danger); }
.state-ref { font-size: .85rem; }

/* Keyboard focus for the custom buttons, chips and links. */
.list-btn:focus-visible, .filter-chip:focus-visible, .ce-nav-item:focus-visible, .ce-close:focus-visible, .ce-choice:focus-visible,
.link-button:focus-visible, .dash-btn:focus-visible, .kpi:focus-visible, .drawer-signout:focus-visible, .acct-tab:focus-visible,
.crumbs a:focus-visible, .ce-extend button:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Narrow screens: icon-only grid buttons. */
@media (max-width: 576px) {
    .list-bar .list-btn span { display: none; }
    .list-bar .list-btn { padding: 0 .65rem; }
    .list-search { flex: 1 1 100%; min-width: 0; }
}

.grid-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: 2.5rem 1rem; color: var(--portal-muted); }

/* Switch with an explanation (customer editor: automatic license approval). */
.ce-toggle {
    display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: 10px;
    border: 1px solid var(--portal-line); cursor: pointer; font-size: .9rem; color: var(--portal-muted); line-height: 1.5;
}
    .ce-toggle b { display: block; color: var(--portal-ink); font-size: .95rem; margin-bottom: .1rem; }
    .ce-toggle.is-on { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }
    .ce-toggle .dxbl-checkbox { margin-top: .15rem; }

.dash-btn-alert { background: var(--portal-warn-soft); border-color: color-mix(in srgb, var(--portal-warn) 40%, transparent); color: var(--portal-warn); }
    .dash-btn-alert:hover { border-color: var(--portal-warn); color: var(--portal-warn); }

.chip-lead { margin-right: .45rem; font-size: .7rem; padding: .12rem .45rem; vertical-align: middle; }