:root {
    color-scheme: light;
    --ink-950: #101828;
    --ink-900: #182230;
    --ink-800: #26364d;
    --ink-700: #344054;
    --ink-600: #475467;
    --ink-500: #667085;
    --ink-400: #98a2b3;
    --ink-300: #cbd2dc;
    --ink-200: #e1e6ed;
    --ink-100: #edf1f6;
    --ink-50: #f7f9fc;
    --white: #ffffff;
    --accent-700: #2851bc;
    --accent-600: #3768e5;
    --accent-500: #4f7bf0;
    --accent-100: #e9efff;
    --accent-50: #f5f7ff;
    --success-700: #067647;
    --success-100: #d9f5e8;
    --success-50: #ecfdf3;
    --warning-700: #b54708;
    --warning-100: #feefc7;
    --warning-50: #fffaeb;
    --danger-700: #b42318;
    --danger-100: #fee4e2;
    --danger-50: #fff2f0;
    --sidebar-width: 258px;
    --header-height: 72px;
    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.04);
    --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.07), 0 1px 2px rgb(16 24 40 / 0.04);
    --shadow-md: 0 12px 28px rgb(16 24 40 / 0.11), 0 2px 6px rgb(16 24 40 / 0.04);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink-50); color: var(--ink-900); }

body { min-width: 320px; font-size: 14px; line-height: 1.5; }

button, input, textarea, select { font: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin-top: 0; }

h1:focus { outline: none; }

.portal-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    min-height: 100dvh;
}

.portal-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 28px 0 24px;
    background: rgb(255 255 255 / 0.96);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
}

.portal-header__brand, .portal-header__actions, .brand-mark, .user-menu { display: flex; align-items: center; }

.brand-mark { gap: 11px; }

.brand-mark__symbol {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(145deg, #4f7bf0, #2851bc);
    box-shadow: 0 7px 15px rgb(55 104 229 / 0.24);
    transform: rotate(45deg);
}

.brand-mark__symbol > span {
    width: 12px;
    height: 18px;
    border: 3px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(0deg) translate(-1px, -2px);
}

.brand-mark__symbol--large { width: 46px; height: 46px; border-radius: 14px; }

.brand-mark > span:last-child, .login-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.brand-mark strong, .login-brand strong { color: var(--ink-950); font-size: 19px; letter-spacing: -0.02em; }
.brand-mark small, .login-brand small { margin-top: 4px; color: var(--ink-500); font-size: 10px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; }

.portal-header__actions { gap: 14px; }

.environment-pill, .read-only-pill, .privacy-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 6px 10px;
    border: 1px solid #cdd8fb;
    border-radius: 999px;
    color: var(--accent-700);
    background: var(--accent-50);
    font-size: 11px;
    font-weight: 700;
}

.environment-pill > span { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px #d1fadf; }

.header-icon-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-600);
    font-size: 23px;
    cursor: pointer;
}
.header-icon-button:hover { background: var(--ink-50); }
.header-icon-button i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #f04438; border: 1px solid white; }

.user-menu { gap: 10px; padding-left: 14px; border-left: 1px solid var(--ink-200); }
.user-menu__avatar, .person-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #26364d, #101828);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.user-menu__copy { display: flex; flex-direction: column; min-width: 115px; line-height: 1.25; }
.user-menu__copy strong { color: var(--ink-800); font-size: 12px; }
.user-menu__copy small { color: var(--ink-500); font-size: 10px; }

.mobile-menu-button { display: none; margin-right: 8px; }

.portal-sidebar {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 14px 18px;
    background: var(--white);
    border-right: 1px solid var(--ink-200);
    position: sticky;
    top: var(--header-height);
    height: calc(100dvh - var(--header-height));
    z-index: 30;
}

.portal-nav { flex: 1; overflow-y: auto; padding: 0 4px; }
.portal-nav__group + .portal-nav__group { margin-top: 25px; }
.portal-nav__label { display: block; margin: 0 11px 8px; color: var(--ink-400); font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.portal-nav__link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    margin: 3px 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 650;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}
.portal-nav__link:hover { color: var(--ink-900); background: var(--ink-50); transform: translateX(1px); }
.portal-nav__link.active { color: var(--accent-700); background: var(--accent-100); box-shadow: inset 3px 0 var(--accent-600); }
.nav-glyph { display: grid; place-items: center; width: 22px; height: 22px; color: currentColor; font-size: 17px; font-weight: 400; }

.sidebar-help {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 4px 0;
    padding: 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--ink-50), #fff);
}
.sidebar-help__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--accent-700); background: var(--accent-100); font-weight: 800; }
.sidebar-help div { display: flex; flex-direction: column; min-width: 0; }
.sidebar-help strong { color: var(--ink-700); font-size: 11px; }
.sidebar-help small { overflow: hidden; color: var(--ink-500); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

.nav-loading { display: grid; gap: 12px; padding: 10px; }
.nav-loading span { height: 38px; border-radius: 9px; background: linear-gradient(90deg, var(--ink-50), var(--ink-100), var(--ink-50)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

.portal-main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow-x: hidden; }
.page-container { width: min(100%, 1540px); margin: 0 auto; padding: 32px 36px 56px; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-eyebrow, .card-kicker { display: block; margin-bottom: 6px; color: var(--accent-600); font-size: 10px; font-weight: 800; letter-spacing: 0.095em; text-transform: uppercase; }
.page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.page-header h1 { margin: 0; color: var(--ink-950); font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -0.038em; }
.page-header p { max-width: 720px; margin: 8px 0 0; color: var(--ink-500); font-size: 13px; }
.page-header__actions { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.last-updated { color: var(--ink-500); font-size: 11px; }
.metadata-chip { padding: 7px 10px; border: 1px solid var(--ink-200); border-radius: 8px; color: var(--ink-600); background: #fff; font-size: 11px; }
.metadata-chip--mono { font-family: "Cascadia Code", Consolas, monospace; }
.back-link { display: inline-flex; margin-bottom: 13px; color: var(--accent-700); font-size: 11px; font-weight: 700; }
.back-link:hover { text-decoration: underline; }

.content-card, .toolbar-card, .metric-card, .application-card, .role-card, .ledger-summary-grid article, .session-status-strip {
    border: 1px solid var(--ink-200);
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.content-card { padding: 22px; border-radius: var(--radius-md); }
.content-card--flush { padding: 0; overflow: hidden; }
.content-card--flush .empty-state { min-height: 300px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card-heading h2 { margin: 0; color: var(--ink-900); font-size: 16px; line-height: 1.2; letter-spacing: -0.018em; }
.card-heading a, .card-heading button { border: 0; padding: 0; color: var(--accent-700); background: none; font-size: 11px; font-weight: 750; cursor: pointer; }
.table-total { color: var(--ink-500); font-size: 11px; font-weight: 700; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.metric-card { position: relative; overflow: hidden; padding: 18px; border-radius: var(--radius-md); }
.metric-card::after { content: ""; position: absolute; right: -30px; bottom: -54px; width: 110px; height: 110px; border-radius: 50%; background: var(--metric-wash, var(--accent-50)); }
.metric-card__topline { display: flex; align-items: center; justify-content: space-between; color: var(--ink-500); font-size: 11px; font-weight: 650; }
.metric-card__topline i { width: 8px; height: 8px; border-radius: 50%; background: var(--metric-color, var(--accent-600)); box-shadow: 0 0 0 4px var(--metric-wash, var(--accent-100)); }
.metric-card > strong { display: block; margin: 12px 0 2px; color: var(--ink-950); font-size: 27px; line-height: 1; letter-spacing: -0.035em; }
.metric-card p { margin: 7px 0 12px; color: var(--ink-500); font-size: 10px; }
.metric-card > small { position: relative; z-index: 1; color: var(--metric-color, var(--accent-700)); font-size: 9px; font-weight: 750; }
.metric-card--success { --metric-color: var(--success-700); --metric-wash: var(--success-50); }
.metric-card--warning { --metric-color: var(--warning-700); --metric-wash: var(--warning-50); }
.metric-card--danger { --metric-color: var(--danger-700); --metric-wash: var(--danger-50); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, 0.85fr); gap: 18px; margin-bottom: 18px; }
.chart-legend { display: flex; gap: 13px; color: var(--ink-500); font-size: 9px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--legend); }
.chart-legend .approved { --legend: var(--accent-600); }
.chart-legend .declined { --legend: #f97066; }
.chart-legend .incomplete { --legend: #fdb022; }
.usage-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; height: 208px; padding: 12px 10px 0; border-bottom: 1px solid var(--ink-200); background: repeating-linear-gradient(to bottom, transparent 0, transparent 48px, var(--ink-100) 49px); }
.usage-chart__column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.usage-chart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; flex: 1; }
.usage-chart__bars span { width: min(15px, 24%); min-height: 3px; border-radius: 4px 4px 1px 1px; transition: height 250ms ease; }
.usage-chart__approved { background: linear-gradient(#6d91f4, var(--accent-600)); }
.usage-chart__declined { background: #f97066; }
.usage-chart__incomplete { background: #fdb022; }
.usage-chart__column small { margin: 8px 0 -22px; color: var(--ink-500); font-size: 9px; }

.health-list { display: grid; gap: 2px; }
.health-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 5px; border-bottom: 1px solid var(--ink-100); }
.health-row:last-child { border-bottom: 0; }
.health-row:hover { background: var(--ink-50); }
.application-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--accent-700); background: var(--accent-100); font-size: 10px; font-weight: 850; }
.application-avatar--large { width: 42px; height: 42px; border-radius: 12px; font-size: 12px; }
.health-row__name, .health-row__units { display: flex; flex-direction: column; }
.health-row__name strong, .health-row__units strong { color: var(--ink-800); font-size: 11px; }
.health-row__name small, .health-row__units small { color: var(--ink-400); font-size: 9px; }
.health-row__units { align-items: flex-end; }

.status-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; white-space: nowrap; padding: 4px 8px; border-radius: 999px; color: var(--badge-color); background: var(--badge-bg); font-size: 9px; font-weight: 750; }
.status-badge > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-badge--success { --badge-color: var(--success-700); --badge-bg: var(--success-50); }
.status-badge--warning { --badge-color: var(--warning-700); --badge-bg: var(--warning-50); }
.status-badge--danger { --badge-color: var(--danger-700); --badge-bg: var(--danger-50); }
.status-badge--accent { --badge-color: var(--accent-700); --badge-bg: var(--accent-50); }
.status-badge--neutral { --badge-color: var(--ink-600); --badge-bg: var(--ink-100); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; color: var(--ink-600); font-size: 10.5px; }
.data-table th { padding: 10px 12px; border-bottom: 1px solid var(--ink-200); color: var(--ink-500); background: #fbfcfe; font-size: 9px; font-weight: 750; letter-spacing: 0.035em; text-align: left; text-transform: uppercase; }
.content-card:not(.content-card--flush) .data-table th:first-child, .content-card:not(.content-card--flush) .data-table td:first-child { padding-left: 0; }
.content-card:not(.content-card--flush) .data-table th:last-child, .content-card:not(.content-card--flush) .data-table td:last-child { padding-right: 0; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafbfe; }
.number-cell { text-align: right !important; font-variant-numeric: tabular-nums; }
.score-cell { color: var(--ink-800); font-weight: 750; }
.table-primary-link { color: var(--accent-700); font-weight: 750; }
.table-primary-link:hover { text-decoration: underline; }
.row-action { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 7px; color: var(--accent-700); background: var(--accent-50); font-size: 14px; font-weight: 800; }
.row-action:hover { color: #fff; background: var(--accent-600); }
.mono-muted, .mono-strong, .action-code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
.mono-muted { color: var(--ink-500); font-size: 9.5px; }
.mono-strong { color: var(--ink-700); font-size: 9.5px; font-weight: 650; }
.positive-number { color: var(--success-700) !important; font-weight: 750; }
.negative-number { color: var(--danger-700) !important; font-weight: 750; }
.date-stack, .resource-stack { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.date-stack strong, .resource-stack strong { color: var(--ink-700); font-size: 10px; }
.date-stack small, .resource-stack small { color: var(--ink-400); font-size: 9px; }

.toolbar-card { display: grid; grid-template-columns: minmax(260px, 1fr) 180px auto; align-items: end; gap: 14px; margin-bottom: 18px; padding: 14px; border-radius: var(--radius-md); }
.toolbar-card--wide { grid-template-columns: minmax(280px, 1fr) 165px 200px auto; }
.toolbar-card fluent-search, .toolbar-card fluent-select, .toolbar-card fluent-text-field { width: 100%; min-width: 0; }
.toolbar-card__summary { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; min-width: 90px; padding: 0 4px 7px; color: var(--ink-500); }
.toolbar-card__summary strong { color: var(--ink-900); font-size: 16px; }
.toolbar-card__summary span { font-size: 9px; }

.application-grid, .role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.application-card, .role-card { padding: 19px; border-radius: var(--radius-md); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
.application-card:hover { transform: translateY(-2px); border-color: #b8c8f7; box-shadow: var(--shadow-md); }
.application-card__heading, .role-card__heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.application-card__heading > span:nth-child(2), .role-card__heading > span:nth-child(2) { display: flex; flex-direction: column; }
.application-card__heading strong, .role-card__heading strong { color: var(--ink-900); font-size: 13px; }
.application-card__heading small, .role-card__heading small { color: var(--ink-400); font-size: 9px; }
.application-card > p, .role-card > p { min-height: 38px; margin: 14px 0; color: var(--ink-500); font-size: 10.5px; }
.application-card__units { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.application-card__units div { display: flex; flex-direction: column; padding: 0 9px; border-right: 1px solid var(--ink-100); }
.application-card__units div:first-child { padding-left: 0; }
.application-card__units div:last-child { padding-right: 0; border-right: 0; }
.application-card__units strong { color: var(--ink-800); font-size: 13px; font-variant-numeric: tabular-nums; }
.application-card__units span { color: var(--ink-400); font-size: 8px; }
.application-card__footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; margin-top: 13px; color: var(--ink-500); font-size: 9px; }
.application-card__footer > span { display: flex; align-items: center; gap: 6px; }
.health-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.health-dot--success { --dot: #12b76a; }
.health-dot--warning { --dot: #f79009; }
.health-dot--danger { --dot: #f04438; }

.detail-tabs { display: flex; gap: 3px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; overflow-x: auto; }
.detail-tabs button { padding: 8px 15px; border: 0; border-radius: 7px; color: var(--ink-500); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.detail-tabs button:hover { color: var(--ink-800); background: var(--ink-50); }
.detail-tabs button.active { color: var(--accent-700); background: var(--accent-100); }

.application-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.recent-activity-card { grid-column: 1 / -1; }
.unit-hero { display: flex; align-items: baseline; gap: 9px; margin: 22px 0; }
.unit-hero strong { color: var(--ink-950); font-size: 38px; line-height: 1; letter-spacing: -0.045em; }
.unit-hero span { color: var(--ink-500); font-size: 11px; }
.unit-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); padding: 14px; border-radius: 10px; background: var(--ink-50); }
.unit-breakdown div { display: flex; flex-direction: column; padding: 0 12px; border-right: 1px solid var(--ink-200); }
.unit-breakdown div:last-child { border-right: 0; }
.unit-breakdown span { color: var(--ink-500); font-size: 9px; }
.unit-breakdown strong { color: var(--ink-800); font-size: 13px; }
.read-only-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--ink-500); font-size: 9px; }
.read-only-note > span { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; color: var(--accent-700); background: var(--accent-100); font-size: 9px; font-weight: 800; }
.policy-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin: 10px 0 18px; }
.policy-flow span, .policy-flow strong { padding: 10px 8px; border-radius: 8px; text-align: center; font-size: 9px; }
.policy-flow span { color: var(--accent-700); background: var(--accent-50); border: 1px solid #dbe4ff; }
.policy-flow strong { color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-100); }
.policy-flow i { color: var(--ink-400); font-style: normal; }
.summary-list, .detail-list { margin: 0; }
.summary-list > div, .detail-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--ink-100); }
.summary-list > div:last-child, .detail-list > div:last-child { border-bottom: 0; }
.summary-list dt, .detail-list dt { color: var(--ink-500); font-size: 9.5px; }
.summary-list dd, .detail-list dd { margin: 0; color: var(--ink-800); font-size: 10px; font-weight: 700; text-align: right; }
.detail-list dd { max-width: 62%; }
.detail-list a { color: var(--accent-700); }
.compact-session-list { display: grid; }
.compact-session-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.compact-session-list a:last-child { border-bottom: 0; }
.compact-session-list a > span:first-child { display: flex; flex-direction: column; }
.compact-session-list strong { color: var(--ink-800); font-size: 10px; }
.compact-session-list small { color: var(--ink-400); font-size: 8.5px; }

.credential-list { display: grid; gap: 8px; }
.credential-row { display: grid; grid-template-columns: auto minmax(200px, 1.5fr) minmax(120px, 0.7fr) minmax(120px, 0.8fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--ink-200); border-radius: 10px; }
.credential-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--accent-700); background: var(--accent-100); font-size: 17px; }
.credential-row > span:not(.credential-icon):not(.status-badge) { display: flex; flex-direction: column; }
.credential-row small { color: var(--ink-400); font-size: 8px; }
.credential-row strong { color: var(--ink-700); font-size: 10px; }
.credential-row code { color: var(--ink-600); font-size: 9px; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 18px; }
.settings-card fluent-text-field, .settings-card fluent-text-area, .settings-card fluent-number-field, .portal-modal fluent-text-field, .portal-modal fluent-select, .portal-drawer fluent-text-field, .portal-drawer fluent-text-area, .portal-drawer fluent-select { width: 100%; }
.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; }
.form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fixed-flow-notice, .inline-alert, .audit-integrity-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 9px; }
.fixed-flow-notice { margin-bottom: 18px; color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-100); }
.fixed-flow-notice > span, .inline-alert > span, .audit-integrity-note > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; font-weight: 850; }
.fixed-flow-notice > span { color: #fff; background: var(--success-700); }
.fixed-flow-notice div, .inline-alert div, .audit-integrity-note div { min-width: 0; }
.fixed-flow-notice strong, .inline-alert strong, .audit-integrity-note strong { font-size: 10px; }
.fixed-flow-notice p, .inline-alert p, .audit-integrity-note p { margin: 2px 0 0; color: currentColor; opacity: 0.82; font-size: 9px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-100); }
.content-card > label { display: block; margin: 16px 0 6px; color: var(--ink-700); font-size: 9px; font-weight: 750; }
.content-card > textarea { width: 100%; resize: vertical; padding: 10px 12px; color: var(--ink-800); background: #fff; border: 1px solid var(--ink-200); border-radius: 8px; outline: none; }
.content-card > textarea:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-50); }
.save-state { color: var(--success-700); font-size: 9px; font-weight: 700; }

.ledger-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ledger-summary-grid article { display: flex; flex-direction: column; padding: 16px; border-radius: var(--radius-md); }
.ledger-summary-grid span { color: var(--ink-500); font-size: 9px; font-weight: 650; }
.ledger-summary-grid strong { margin: 5px 0 2px; color: var(--ink-900); font-size: 22px; letter-spacing: -0.025em; }
.ledger-summary-grid small { color: var(--ink-400); font-size: 8.5px; }
.ledger-type { display: inline-flex; padding: 4px 7px; border-radius: 6px; color: var(--ink-700); background: var(--ink-100); font-size: 8.5px; font-weight: 750; }
.ledger-type--allocation, .ledger-type--grant { color: var(--success-700); background: var(--success-50); }
.ledger-type--hold { color: var(--warning-700); background: var(--warning-50); }
.ledger-type--commit, .ledger-type--deallocation { color: var(--danger-700); background: var(--danger-50); }
.ledger-type--release { color: var(--accent-700); background: var(--accent-50); }
.ledger-type--suspense { color: #7a5af8; background: #f4f3ff; }
.reason-cell { min-width: 180px; max-width: 270px; color: var(--ink-500); }
.read-only-pill { color: var(--ink-600); background: var(--ink-50); border-color: var(--ink-200); }

.session-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; padding: 4px; border-radius: var(--radius-md); }
.session-status-strip button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 0; border-radius: 8px; color: var(--ink-500); background: transparent; font-size: 10px; cursor: pointer; }
.session-status-strip button strong { color: var(--ink-800); font-size: 14px; }
.session-status-strip button:hover { background: var(--ink-50); }
.session-status-strip button.active { color: var(--accent-700); background: var(--accent-100); }
.session-status-strip button.active strong { color: var(--accent-700); }

.decision-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--decision-border); border-radius: var(--radius-md); color: var(--decision-color); background: var(--decision-bg); }
.decision-banner--success { --decision-color: var(--success-700); --decision-bg: var(--success-50); --decision-border: var(--success-100); }
.decision-banner--danger { --decision-color: var(--danger-700); --decision-bg: var(--danger-50); --decision-border: var(--danger-100); }
.decision-banner--warning { --decision-color: var(--warning-700); --decision-bg: var(--warning-50); --decision-border: var(--warning-100); }
.decision-banner--neutral { --decision-color: var(--ink-600); --decision-bg: var(--ink-50); --decision-border: var(--ink-200); }
.decision-banner__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--decision-color); font-size: 19px; font-weight: 850; }
.decision-banner div:nth-child(2) > span, .decision-banner__unit small { display: block; margin-bottom: 1px; color: currentColor; opacity: 0.72; font-size: 8px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.decision-banner h2 { margin: 0; font-size: 17px; }
.decision-banner p { margin: 2px 0 0; color: currentColor; opacity: 0.85; font-size: 9.5px; }
.decision-banner__unit { min-width: 135px; padding-left: 18px; border-left: 1px solid var(--decision-border); text-align: right; }
.decision-banner__unit strong, .decision-banner__unit span { display: block; }
.decision-banner__unit strong { font-size: 12px; }
.decision-banner__unit span { font-size: 8.5px; opacity: 0.8; }

.session-detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.72fr); gap: 18px; align-items: start; }
.session-detail-main, .session-detail-side { display: grid; gap: 18px; }
.evidence-grid { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); align-items: center; gap: 10px; }
.evidence-grid figure { min-width: 0; margin: 0; }
.evidence-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--ink-200); border-radius: 12px; background: #eef1f5; }
.evidence-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evidence-frame--live { box-shadow: inset 0 0 0 2px rgb(55 104 229 / 0.1); }
.evidence-corner { position: absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 5px; color: #fff; background: rgb(16 24 40 / 0.72); backdrop-filter: blur(5px); font-size: 7px; font-weight: 850; letter-spacing: 0.08em; }
.evidence-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 3px 0; }
.evidence-grid figcaption > span { display: flex; flex-direction: column; }
.evidence-grid figcaption strong { color: var(--ink-800); font-size: 10px; }
.evidence-grid figcaption small { color: var(--ink-400); font-size: 8px; }
.evidence-connector { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--accent-700); }
.evidence-connector span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cdd8fb; border-radius: 50%; background: var(--accent-50); font-size: 15px; }
.evidence-connector small { color: var(--ink-400); font-size: 7px; }
.evidence-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink-500); }
.evidence-unavailable > span { font-size: 28px; color: var(--ink-300); }
.evidence-unavailable strong { margin-top: 5px; font-size: 11px; }
.evidence-unavailable small { font-size: 8px; }
.privacy-pill { color: var(--danger-700); background: var(--danger-50); border-color: var(--danger-100); }

.score-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.score-gauge { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--ink-200); border-radius: 11px; }
.score-gauge__dial { --dial-color: var(--success-700); position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--dial-color) calc(var(--score) * 1%), var(--ink-100) 0); }
.score-gauge--fail .score-gauge__dial { --dial-color: var(--danger-700); }
.score-gauge__dial::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.score-gauge__dial span, .score-gauge__dial small { position: relative; z-index: 1; }
.score-gauge__dial span { align-self: end; color: var(--ink-900); font-size: 18px; font-weight: 800; }
.score-gauge__dial small { align-self: start; color: var(--ink-400); font-size: 7px; }
.score-gauge__copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.score-gauge__copy strong { color: var(--ink-800); font-size: 11px; }
.score-gauge__copy p { margin: 6px 0 8px; color: var(--ink-500); font-size: 8.5px; }
.score-gauge__copy > small { color: var(--ink-400); font-size: 8px; }

.timeline-list { margin: 0; padding: 0; list-style: none; }
.timeline-list__item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; min-height: 70px; }
.timeline-list__item::before { content: ""; position: absolute; top: 14px; bottom: -2px; left: 5px; width: 1px; background: var(--ink-200); }
.timeline-list__item:last-child::before { display: none; }
.timeline-list__item > span { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: var(--timeline, var(--ink-400)); box-shadow: 0 0 0 2px var(--timeline-wash, var(--ink-100)); }
.timeline-list__item--success { --timeline: #12b76a; --timeline-wash: var(--success-100); }
.timeline-list__item--danger { --timeline: #f04438; --timeline-wash: var(--danger-100); }
.timeline-list__item--warning { --timeline: #f79009; --timeline-wash: var(--warning-100); }
.timeline-list__item--accent { --timeline: var(--accent-600); --timeline-wash: var(--accent-100); }
.timeline-list time { display: block; color: var(--ink-400); font-family: "Cascadia Code", Consolas, monospace; font-size: 7.5px; }
.timeline-list strong { display: block; margin-top: 2px; color: var(--ink-800); font-size: 10px; }
.timeline-list p { margin: 2px 0 0; color: var(--ink-500); font-size: 8.5px; }

.person-cell { display: flex; align-items: center; gap: 9px; }
.person-cell .person-avatar { width: 30px; height: 30px; font-size: 9px; }
.person-cell strong { color: var(--ink-800); font-size: 10.5px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; min-width: 160px; }
.tag-list > span { padding: 3px 6px; border: 1px solid var(--ink-200); border-radius: 5px; color: var(--ink-600); background: var(--ink-50); font-size: 8px; }

.scope-explainer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.scope-explainer > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #dbe4ff; border-radius: 10px; background: var(--accent-50); }
.scope-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--accent-700); background: var(--accent-100); font-size: 16px; }
.scope-explainer p { margin: 0; color: var(--ink-500); font-size: 9px; }
.scope-explainer strong { display: block; color: var(--ink-800); font-size: 10px; }
.role-symbol { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; color: #6941c6; background: #f4f3ff; font-size: 19px; }
.role-card__facts { display: flex; gap: 22px; padding: 11px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); color: var(--ink-500); font-size: 9px; }
.role-card__facts strong { color: var(--ink-800); font-size: 12px; }
.role-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--ink-400); font-size: 8px; }

.permission-groups { display: grid; gap: 14px; }
.permission-group { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 10px; }
.permission-group__heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.permission-group__heading strong { color: var(--ink-800); font-size: 10px; }
.permission-group__heading span { color: var(--ink-400); font-size: 8px; }
.permission-choice, .role-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--ink-100); cursor: pointer; }
.permission-choice:last-child, .role-choice:last-child { border-bottom: 0; }
.permission-choice:hover, .role-choice:hover { background: #fbfcfe; }
.permission-choice > span, .role-choice > span { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.permission-choice__title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.permission-tag { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid #d1d5db; border-radius: 5px; color: var(--accent-700); background: var(--accent-50); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.permission-choice strong, .role-choice strong { color: var(--ink-800); font-size: 11px; }
.permission-choice small, .role-choice small { color: var(--ink-500); font-size: 9px; margin-top: 1px; }
.permission-choice code { margin-top: 3px; color: var(--accent-600); font-size: 7.5px; }
.role-choice em { width: fit-content; margin-top: 5px; padding: 2px 5px; border-radius: 4px; color: var(--accent-700); background: var(--accent-50); font-size: 7px; font-style: normal; font-weight: 700; }
.role-choice-list { display: grid; max-height: 360px; overflow-y: auto; border: 1px solid var(--ink-200); border-radius: 10px; }
.drawer-section-heading { display: flex; flex-direction: column; margin: 22px 0 10px; }
.drawer-section-heading span { color: var(--ink-800); font-size: 11px; font-weight: 750; }
.drawer-section-heading small { color: var(--ink-500); font-size: 8.5px; }

.action-code { padding: 3px 5px; border-radius: 4px; color: var(--accent-700); background: var(--accent-50); font-size: 8px; }
.audit-result-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--audit-border); border-radius: 10px; color: var(--audit-color); background: var(--audit-bg); }
.audit-result-card--information { --audit-color: var(--accent-700); --audit-bg: var(--accent-50); --audit-border: #dbe4ff; }
.audit-result-card--warning { --audit-color: var(--warning-700); --audit-bg: var(--warning-50); --audit-border: var(--warning-100); }
.audit-result-card--critical { --audit-color: var(--danger-700); --audit-bg: var(--danger-50); --audit-border: var(--danger-100); }
.audit-result-card > span { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--audit-color); font-weight: 850; }
.audit-result-card strong { font-size: 11px; }
.audit-result-card p { margin: 3px 0 0; color: currentColor; opacity: 0.85; font-size: 9px; }
.action-title-stack { display: flex; flex-direction: column; gap: 3px; }
.action-title-stack strong { color: var(--ink-900); font-size: 11px; }

.audit-attributes-card { margin-bottom: 18px; padding: 14px; border: 1px solid var(--ink-200); border-radius: 10px; background: var(--ink-50); }
.audit-attributes-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.audit-attributes-card__header strong { color: var(--ink-800); font-size: 11px; }
.audit-attributes-card__header small { color: var(--ink-500); font-size: 8.5px; }

.audit-attributes-grid { display: grid; gap: 8px; }
.audit-attribute-item { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.audit-attribute-item__label { color: var(--ink-500); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.audit-attribute-item__value { color: var(--ink-900); font-size: 11px; font-weight: 500; word-break: break-word; margin-top: 2px; }

.portal-error-boundary { padding: 32px 20px; display: grid; place-items: center; }
.portal-error-boundary__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; max-width: 460px; padding: 28px; border: 1px solid var(--ink-200); border-radius: 12px; background: #fff; box-shadow: var(--shadow-md); }
.portal-error-boundary__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--danger-700); background: var(--danger-50); font-size: 20px; font-weight: 800; }
.portal-error-boundary__card h3 { margin: 0; color: var(--ink-950); font-size: 16px; }
.portal-error-boundary__card p { margin: 0; color: var(--ink-500); font-size: 11px; line-height: 1.5; }
.portal-error-boundary__actions { display: flex; gap: 10px; margin-top: 6px; }

.modal-backdrop, .mobile-nav-backdrop { position: fixed; inset: 0; border: 0; background: rgb(16 24 40 / 0.5); backdrop-filter: blur(2px); z-index: 90; }
.portal-modal, .portal-drawer { position: fixed; z-index: 100; padding: 22px; background: #fff; box-shadow: 0 28px 70px rgb(16 24 40 / 0.28); }
.portal-modal { top: 50%; left: 50%; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border-radius: var(--radius-lg); transform: translate(-50%, -50%); }
.portal-drawer { top: 0; right: 0; width: min(500px, calc(100vw - 24px)); height: 100dvh; overflow-y: auto; border-left: 1px solid var(--ink-200); }
.portal-drawer--wide { width: min(740px, calc(100vw - 24px)); }
.portal-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.portal-modal__header h2 { margin: 0; color: var(--ink-950); font-size: 20px; letter-spacing: -0.025em; }
.portal-modal > p, .portal-drawer > p { color: var(--ink-500); font-size: 10px; }
.portal-modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-100); }
.inline-alert { margin-top: 16px; }
.inline-alert--danger { color: var(--danger-700); background: var(--danger-50); border: 1px solid var(--danger-100); }
.inline-alert--warning { color: var(--warning-700); background: var(--warning-50); border: 1px solid var(--warning-100); }
.inline-alert--danger > span, .inline-alert--warning > span { color: #fff; background: currentColor; }
.success-seal { display: grid; place-items: center; width: 48px; height: 48px; margin: 8px auto 12px; border-radius: 50%; color: #fff; background: var(--success-700); box-shadow: 0 0 0 7px var(--success-100); font-size: 20px; font-weight: 850; }
.portal-modal > h3 { margin-bottom: 4px; text-align: center; }
.portal-modal > h3 + p { text-align: center; }
.secret-once { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 16px 0; padding: 10px; border: 1px dashed #9db3ef; border-radius: 9px; background: var(--accent-50); }
.secret-once code { overflow: hidden; color: var(--accent-700); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; padding: 30px; text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 11px; border-radius: 14px; color: var(--accent-700); background: var(--accent-100); font-size: 24px; }
.empty-state strong { color: var(--ink-800); font-size: 13px; }
.empty-state p { max-width: 340px; margin: 5px 0 0; color: var(--ink-500); font-size: 10px; }

.skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.skeleton-grid--three { grid-template-columns: repeat(3, 1fr); }
.skeleton-grid span, .detail-skeleton span { min-height: 120px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: linear-gradient(90deg, #fff, var(--ink-100), #fff); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.detail-skeleton { display: grid; gap: 16px; }
.detail-skeleton span:first-child { min-height: 85px; }
.detail-skeleton span:nth-child(2) { min-height: 260px; }

.login-shell { min-height: 100dvh; background: #fff; }
.login-page { display: grid; grid-template-columns: minmax(430px, 0.95fr) minmax(480px, 1.05fr); min-height: 100dvh; }
.login-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; padding: 38px 54px; color: #fff; background: radial-gradient(circle at 90% 10%, rgb(114 146 255 / 0.32), transparent 37%), radial-gradient(circle at 0% 100%, rgb(78 214 164 / 0.16), transparent 35%), linear-gradient(145deg, #142440, #1b3470 63%, #2851bc); }
.login-brand-panel::before, .login-brand-panel::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / 0.11); border-radius: 50%; }
.login-brand-panel::before { width: 440px; height: 440px; right: -210px; top: 18%; }
.login-brand-panel::after { width: 680px; height: 680px; right: -320px; top: 2%; }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.login-brand strong, .login-brand small { color: #fff; }
.login-brand small { opacity: 0.63; }
.login-brand-panel__body { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(220px, 1fr) auto; min-height: 0; flex: 1; gap: 10px; padding: 18px 0 6px; }
.login-brand-panel__visual { display: grid; min-height: 0; place-items: center; }
.login-brand-panel__visual img { display: block; width: min(100%, 500px); max-height: calc(100dvh - 300px); object-fit: contain; pointer-events: none; user-select: none; }
.login-brand-panel__content { max-width: 520px; }
.login-brand-panel__content h1 { margin: 0 0 10px; font-size: clamp(27px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.04em; }
.login-brand-panel__content > p { max-width: 500px; margin: 0; color: rgb(255 255 255 / 0.68); font-size: 13px; line-height: 1.65; }
.login-form-panel { display: grid; place-items: center; padding: 50px; }
.login-form-wrap { width: min(100%, 430px); }
.login-form-heading { margin-bottom: 26px; }
.login-form-heading h2 { margin: 0; color: var(--ink-950); font-size: 30px; letter-spacing: -0.035em; }
.login-form-heading p { margin: 6px 0 0; color: var(--ink-500); font-size: 12px; }
.login-mobile-brand { display: none; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.login-options > span { color: var(--ink-400); font-size: 8px; text-align: right; }
.login-submit { width: 100%; min-height: 42px; margin-top: 2px; }
.login-help { display: flex; align-items: flex-start; gap: 9px; margin-top: 24px; padding: 12px; border-radius: 9px; background: var(--ink-50); }
.login-help > span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; color: var(--accent-700); background: var(--accent-100); font-size: 9px; font-weight: 800; }
.login-help p { margin: 0; color: var(--ink-500); font-size: 8.5px; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success-700); }
.invalid { outline: 1px solid var(--danger-700); }
.validation-message { color: var(--danger-700); font-size: 9px; }
.blazor-error-boundary { padding: 1rem; color: white; background: var(--danger-700); }

#blazor-error-ui { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: none; width: min(460px, calc(100vw - 36px)); padding: 13px 42px 13px 16px; border: 1px solid var(--warning-100); border-radius: 10px; color: var(--warning-700); background: var(--warning-50); box-shadow: var(--shadow-md); font-size: 11px; }
#blazor-error-ui .reload { margin-left: 8px; color: var(--accent-700); font-weight: 800; }
#blazor-error-ui .dismiss { position: absolute; top: 10px; right: 13px; cursor: pointer; font-size: 17px; }

@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 1180px) {
    .metric-grid, .ledger-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .application-grid, .role-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .session-detail-grid { grid-template-columns: 1fr; }
    .application-health-card { min-height: auto; }
    .session-detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbar-card--wide { grid-template-columns: minmax(240px, 1fr) 150px 170px; }
    .toolbar-card--wide .toolbar-card__summary { display: none; }
}

@media (max-width: 900px) {
    :root { --header-height: 64px; }
    .portal-shell { grid-template-columns: 1fr; }
    .portal-main { grid-column: 1; }
    .portal-header { padding: 0 16px; }
    .mobile-menu-button { display: inline-flex; }
    .portal-sidebar { position: fixed; top: var(--header-height); left: 0; width: min(var(--sidebar-width), calc(100vw - 54px)); transform: translateX(-105%); transition: transform 180ms ease; box-shadow: var(--shadow-md); }
    .portal-sidebar--open { transform: translateX(0); }
    .mobile-nav-backdrop { top: var(--header-height); z-index: 20; }
    .environment-pill, .user-menu__copy { display: none; }
    .user-menu { padding-left: 8px; }
    .page-container { padding: 25px 22px 45px; }
    .application-overview-grid, .settings-grid { grid-template-columns: 1fr; }
    .recent-activity-card { grid-column: auto; }
    .login-page { grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .login-form-panel { padding: 36px 24px; }
    .login-mobile-brand { display: block; margin-bottom: 40px; color: var(--accent-700); font-size: 19px; font-weight: 850; }
}

@media (max-width: 680px) {
    .brand-mark small, .header-icon-button { display: none; }
    .portal-header__actions { gap: 5px; }
    .page-container { padding: 22px 14px 40px; }
    .page-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .page-header__actions { width: 100%; justify-content: space-between; }
    .metric-grid, .ledger-summary-grid, .application-grid, .role-grid, .scope-explainer, .score-grid, .form-grid--two, .session-detail-side { grid-template-columns: 1fr; }
    .dashboard-grid { gap: 14px; }
    .toolbar-card, .toolbar-card--wide { grid-template-columns: 1fr; align-items: stretch; }
    .toolbar-card__summary { justify-content: flex-start; }
    .session-status-strip { grid-template-columns: repeat(2, 1fr); }
    .application-card__footer { grid-template-columns: 1fr auto; }
    .application-card__footer > span:nth-child(2) { display: none; }
    .credential-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .credential-row > span:nth-child(3), .credential-row > span:nth-child(4) { display: none !important; }
    .evidence-grid { grid-template-columns: 1fr; }
    .evidence-connector { flex-direction: row; justify-content: center; margin: 4px 0; }
    .decision-banner { grid-template-columns: auto minmax(0, 1fr); }
    .decision-banner__unit { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--decision-border); border-left: 0; text-align: left; }
    .usage-chart { gap: 7px; }
    .chart-legend { display: none; }
    .portal-drawer, .portal-drawer--wide { width: calc(100vw - 12px); }
}
/* Native forms are used for cookie-changing login/logout boundaries. */
.portal-field { display: grid; gap: .45rem; color: #344054; font-weight: 650; }
.portal-field input { width: 100%; min-height: 46px; border: 1px solid #d8dee9; border-radius: 8px; padding: 0 .85rem; background: #fff; color: #172033; font: inherit; }
.portal-field input:focus { outline: 3px solid rgba(55, 104, 229, .18); border-color: #3768e5; }
.portal-login-form .login-submit { width: 100%; min-height: 46px; border: 0; border-radius: 8px; background: #3768e5; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.logout-form { display: inline-flex; margin: 0; }