:root {
    --brand: #243e55;
    --brand-accent: #8aa5bd;
    --text: #1f2e3b;
    --muted: #5b6b79;
    --border: #dee4ea;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: #f3f6f9;
}
/* Numeric values align by magnitude; format displayed money with grouped thousands. */
.num { text-align:right; font-variant-numeric:tabular-nums; }
thead th.num { text-align:right; }
.master-audit-stack-column { width:132px; }
.audit-stack span,.audit-stack time { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; line-height:15px; }
.audit-stack time { color:var(--muted); }
.icon-action { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; border:1px solid var(--border-strong); border-radius:5px; color:var(--brand); background:var(--surface); text-decoration:none; }
.icon-action:hover { background:var(--brand-light); }
.icon-action-danger { color:var(--danger); }
.icon-action-danger:hover { background:var(--danger-bg); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; border-radius: 4px; }
.site-header { background: #fff; border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1200px; margin: auto; padding: 16px 32px; display: flex; align-items: center; gap: 48px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 650; text-decoration: none; color: var(--text); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: 15px; }
nav a { display: block; padding: 10px 16px; text-decoration: none; border-radius: 8px; }
nav a[aria-current="page"] { background: var(--brand-light); font-weight: 600; }
main { width: 100%; max-width: 1200px; padding: 48px 32px; margin: 0 auto; flex: 1; }
.welcome { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 40px; min-height: 280px; }
.eyebrow { margin: 0 0 16px; color: var(--brand); font-size: 14px; font-weight: 600; }
h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 600; letter-spacing: -0.8px; line-height: 1.25; margin: 0 0 16px; }
.description { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
footer { max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px 32px; color: var(--muted); font-size: 12px; }
.skip-link { position: absolute; left: 12px; top: -100px; padding: 12px; background: #fff; z-index: 1; }
.skip-link:focus { top: 12px; }
@media (max-width: 600px) {
    .header-inner { padding: 14px 20px; justify-content: space-between; gap: 16px; }
    main { padding: 24px 20px; }
    .welcome { padding: 28px 24px; }
    footer { padding: 20px; }
}

/* Portal workspace components, based on the approved UI mockup tokens. */
:root { --brand-hover:#1b3043; --brand-light:#e8eff6; --brand-lighter:#f3f7fb; --surface:#fff; --surface-alt:#f8fafc; --border-strong:#c7d5e3; --text-faint:#728496; --success:#1e8a5c; --success-bg:#e5f5ec; --danger:#c0392b; --danger-bg:#fbeceb; --shadow-sm:0 1px 2px rgba(36,62,85,.06); --shadow-md:0 8px 24px rgba(36,62,85,.14); }
body { font-size:14px; color:var(--text); background:#f3f6f9; line-height:1.5; }
button,input,select,textarea { font:inherit; }
.header-inner { max-width:none; width:100%; margin:0; padding:14px 16px; gap:28px; }
.primary-nav { display:flex; align-items:center; gap:4px; }
.primary-nav a,.account-nav a { display:block; padding:9px 12px; border-radius:7px; text-decoration:none; color:var(--text); }
.primary-nav a[aria-current="page"] { color:var(--brand); background:var(--brand-light); font-weight:700; }
.account-nav { margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.account-nav form { margin:0; }
.account-nav button { appearance:none; border:0; background:transparent; padding:6px; color:var(--brand); cursor:pointer; font-weight:650; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:22px 16px; background:#fff; border-bottom:1px solid var(--border); }
.breadcrumb { margin-bottom:3px; color:var(--text-faint); font-size:11px; }
.page-title { margin:0; font-size:clamp(22px,2.5vw,28px); line-height:1.25; }
.page-description { max-width:780px; margin:4px 0 0; color:var(--muted); font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
main { max-width:none; width:100%; margin:0; padding:22px 16px; }
footer { max-width:none; margin:0; padding:18px 16px; }
.welcome { max-width:none; padding:clamp(28px,4vw,48px); }
.home-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,360px)); gap:14px; margin-top:28px; }
.home-tool { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none; background:var(--surface-alt); }
.home-tool:hover { border-color:var(--brand); background:var(--brand-lighter); }
.home-tool span { color:var(--muted); font-size:13px; }
.org-subgrid>.card { margin-bottom:16px; }
.org-subgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card { overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-sm); }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:17px 20px; border-bottom:1px solid var(--border); }
.card-title { font-size:14px; font-weight:700; }
.card-body { padding:20px; }
.table-wrap { max-width:100%; overflow-x:auto; }
.table-wrap-embedded { border:0; box-shadow:none; }
table { width:100%; min-width:600px; border-collapse:collapse; font-size:12.5px; }
thead th { padding:11px 13px; border-bottom:1px solid var(--border); background:var(--brand); color:var(--on-brand); text-align:left; text-transform:uppercase; letter-spacing:.05em; font-size:11px; white-space:nowrap; }
tbody td { padding:11px 13px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--brand-lighter); }
.cell-code { color:var(--text); font-weight:650; }
.cell-sub,.field-help { color:var(--text-faint); font-size:11px; }
.empty-state { padding:38px 20px; color:var(--muted); text-align:center; }
.badge { display:inline-flex; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:650; }
.badge-success { color:var(--success); background:var(--success-bg); }
.badge-muted { color:var(--text-faint); background:var(--surface-alt); border:1px solid var(--border); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.form-row { margin-bottom:16px; }
.form-row label { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:650; }
.form-control { width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:5px; background:#fff; color:var(--text); }
.form-control:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.form-control:disabled,.form-control[readonly] { background:var(--surface-alt); color:var(--muted); }
.checkbox-row { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.btn { appearance:none; display:inline-flex; min-height:38px; align-items:center; justify-content:center; padding:8px 14px; border:1px solid transparent; border-radius:7px; cursor:pointer; font-weight:650; text-decoration:none; }
.btn-primary { color:var(--on-brand); background:var(--brand); }
.btn-primary:hover { background:var(--brand-hover); }
.btn-ghost { color:var(--text); background:#fff; border-color:var(--border-strong); }
.btn-sm { min-height:32px; padding:6px 10px; font-size:11px; }
.create-panel { padding:0 20px 18px; border-top:1px solid var(--border); background:#fbfcfc; }
.create-panel>summary { display:inline-block; margin-top:14px; padding:7px 0; color:var(--brand); cursor:pointer; font-size:12.5px; font-weight:750; }
.create-panel[open]>summary { margin-bottom:10px; }
.row-editor { position:relative; }
.row-editor>summary { color:var(--brand); cursor:pointer; font-size:11px; font-weight:700; }
.row-editor[open] { position:absolute; right:28px; z-index:12; width:min(640px,calc(100vw - 56px)); padding:14px; border:1px solid var(--border-strong); border-radius:8px; background:#fff; box-shadow:var(--shadow-md); }
.split-create { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.split-create>.create-panel+.create-panel { border-left:1px solid var(--border); }
.compact-list { display:grid; gap:8px; }
.compact-list>div { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:9px 0; border-bottom:1px solid var(--border); }
.compact-list small { grid-column:1/-1; color:var(--muted); }
.empty-message { margin:0; color:var(--muted); }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 16px; padding:12px; border:1px solid var(--border); border-radius:8px; }
.permission-grid legend { padding:0 6px; font-size:12.5px; font-weight:700; }
.permission-grid .checkbox-row { align-items:flex-start; padding:8px; background:var(--surface-alt); border-radius:6px; }
.permission-grid small { display:block; color:var(--muted); font-size:11px; }
.announcements:empty { display:none; }
.alert { display:flex; gap:9px; margin-bottom:16px; padding:11px 13px; border:1px solid; border-radius:8px; font-size:12.5px; font-weight:650; }
.alert-success { color:#176a48; background:var(--success-bg); border-color:#b9dfcb; }
.alert-danger { color:#982e21; background:var(--danger-bg); border-color:#edc7c2; }

/* Account/setup and import views copied into the portal. */
.auth-page,.setup-page { min-height:100vh; background:var(--brand-light); }
.auth-shell { display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(360px,.9fr); width:min(980px,calc(100% - 32px)); min-height:590px; margin:clamp(24px,7vh,72px) auto; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(36,62,85,.13); }
.auth-welcome { display:flex; flex-direction:column; justify-content:space-between; padding:42px; background:linear-gradient(145deg,var(--brand),var(--nav-active)); color:var(--brand-light); }
.auth-welcome h1 { color:var(--on-brand); }
.auth-card { align-self:center; padding:clamp(30px,6vw,58px); }
.auth-card>p { color:var(--muted); }
.auth-card h1,.auth-card h2 { margin:0 0 8px; }
.auth-eyebrow { margin:0 0 8px; color:var(--brand); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.auth-brand { display:flex; align-items:center; gap:12px; }
.auth-submit { width:100%; margin-top:10px; }
.auth-help { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.auth-shell-single { display:block; width:min(600px,calc(100% - 32px)); min-height:0; }
.access-symbol { display:flex; width:48px; height:48px; align-items:center; justify-content:center; margin-bottom:18px; border-radius:50%; background:var(--danger-bg); color:var(--danger); font-size:24px; font-weight:800; }
.setup-shell { width:min(920px,calc(100% - 32px)); margin:clamp(24px,5vh,56px) auto; }
.setup-header { margin-bottom:24px; text-align:center; }
.setup-header .auth-brand { justify-content:center; margin-bottom:24px; }
.setup-block { margin-bottom:16px; }
.setup-block .card-header { justify-content:flex-start; }
.setup-number { display:flex; width:34px; height:34px; flex:0 0 34px; align-items:center; justify-content:center; border-radius:50%; background:var(--brand); color:var(--on-brand); font-weight:800; }
.setup-choice { align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-alt); }
.setup-submit { display:flex; justify-content:flex-end; }
.validation-summary-errors { margin-bottom:14px; padding:10px 12px; border-radius:5px; background:var(--danger-bg); color:var(--danger); font-size:12.5px; }
.field-validation-error { display:block; margin-top:4px; color:var(--danger); font-size:12px; font-weight:650; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:18px; }
.tab-link { padding:8px 11px; border-radius:6px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.tab-link.active { color:var(--brand); background:var(--brand-light); font-weight:700; }
.lines-table { width:100%; }
.upload-row { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.totline { display:flex; justify-content:space-between; gap:16px; padding:10px 12px; border-top:1px solid var(--border); }

@media (max-width:900px) {
    .org-subgrid { grid-template-columns:1fr; }
    .auth-shell { display:block; width:min(620px,calc(100% - 32px)); }
    .auth-welcome { min-height:240px; }
}
@media (max-width:640px) {
    .header-inner { flex-wrap:wrap; }
    .primary-nav { order:3; width:100%; overflow-x:auto; }
    .account-nav { margin-left:auto; }
    .page-header { align-items:flex-start; flex-direction:column; }
    main { padding:18px 16px; }
    .form-grid,.split-create,.permission-grid { grid-template-columns:1fr; }
    .split-create>.create-panel+.create-panel { border-left:0; }
    .row-editor[open] { right:16px; }
}

/* Original workspace sidebar, limited to modules available in this portal. */
:root { --sidebar-width: clamp(208px, 14vw, 252px); --sidebar-rail: 44px; }
.site-header { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); z-index:50; background:var(--brand); color:var(--sidebar-text); border:0; overflow-y:auto; transition:width .15s; }
.header-inner { min-height:100%; padding:0; display:flex; flex-direction:column; align-items:stretch; gap:0; }
.site-header .brand { padding:22px 46px 22px 18px; min-height:78px; border-bottom:1px solid var(--nav-active); color:var(--on-brand); }
.site-header .brand-mark { background:var(--nav-active); }
.site-header a:focus-visible,.site-header button:focus-visible { outline:2px solid var(--brand-accent); outline-offset:2px; }
.nav-rail-toggle { position:absolute; top:24px; right:10px; z-index:2; width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--nav-muted); cursor:pointer; }
.nav-rail-toggle:hover { background:var(--nav-hover); color:var(--on-brand); }
.nav-rail-toggle::before { content:""; width:7px; height:7px; border-left:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:translateX(2px) rotate(45deg); }
body.nav-collapsed .nav-rail-toggle { right:8px; }
body.nav-collapsed .nav-rail-toggle::before { transform:translateX(-2px) rotate(-135deg); }
/* Top-level page (Home), then groups: a collapsible header row with its pages indented on a guide line. */
.primary-nav { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:10px; }
.primary-nav .nav-top { padding:8px 10px; margin-bottom:6px; border-radius:6px; color:var(--on-brand); font-weight:650; text-decoration:none; }
.primary-nav .nav-top:hover { background:var(--nav-hover); }
.primary-nav .nav-top[aria-current="page"] { background:var(--nav-active); font-weight:600; }
.nav-group { padding:6px 0; border-top:1px solid var(--nav-hover); }
.nav-group:first-of-type { border-top:0; }
.nav-group-head { appearance:none; width:100%; display:flex; align-items:center; gap:6px; margin:0; padding:7px 10px; border:0; border-radius:6px; background:none; color:var(--on-brand); font:inherit; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:left; cursor:pointer; }
.nav-group-head:hover { background:var(--nav-hover); }
.nav-twisty { flex:none; width:14px; height:14px; display:grid; place-items:center; color:var(--nav-muted); }
.nav-twisty::before { content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .15s; }
.nav-group.collapsed .nav-twisty::before { transform:rotate(-45deg); }
.nav-group-items { margin:2px 0 2px 20px; padding-left:10px; border-left:1px solid var(--nav-hover); display:flex; flex-direction:column; gap:1px; }
.nav-group-items[hidden] { display:none; }
.primary-nav a { padding:6px 10px; border-radius:6px; color:var(--sidebar-text); font-size:13.5px; text-decoration:none; }
.primary-nav a:hover { background:var(--nav-hover); color:var(--on-brand); }
.primary-nav a[aria-current="page"] { background:var(--nav-active); color:var(--on-brand); font-weight:600; }
@media (prefers-reduced-motion: reduce) { .site-header,.portal-main,.nav-twisty::before { transition:none; } }
.account-nav { margin:auto 0 0; padding:18px; border-top:1px solid var(--nav-active); flex-direction:column; align-items:flex-start; color:var(--sidebar-text); overflow-wrap:anywhere; }
.account-nav a,.account-nav button { color:var(--sidebar-text); }
.portal-main { margin-left:var(--sidebar-width); min-width:0; min-height:100vh; display:flex; flex-direction:column; transition:margin-left .15s; }
.sidebar-scrim,.mobile-navigation { display:none; }
.skip-link { z-index:100; }
/* Fold to a slim rail (nav-rail-toggle, navigation.js): every sidebar child except the toggle hides, the rail keeps
   the toggle reachable, and the choice is carried in the ksmr-nav cookie so the server renders it without a jump. */
@media (min-width:761px) {
    body.nav-collapsed .site-header { width:var(--sidebar-rail); overflow:hidden; }
    body.nav-collapsed .portal-main { margin-left:var(--sidebar-rail); }
    body.nav-collapsed .site-header .header-inner > :not(.nav-rail-toggle) { visibility:hidden; }
}
@media (max-width:760px) {
    .site-header { visibility:hidden; transform:translateX(-100%); }
    .portal-main { margin-left:0; }
    .mobile-navigation { display:flex; align-items:center; gap:16px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); }
    .nav-open .site-header { visibility:visible; transform:translateX(0); }
    .nav-open .sidebar-scrim { display:block; position:fixed; inset:0; width:100%; height:100%; border:0; z-index:40; background:rgba(0,0,0,.4); }
    body.nav-open { overflow:hidden; }
    /* Off-canvas menu only below 760px: the rail toggle plays no part here, and a collapsed choice made on a wider
       screen must not carry over and shrink the off-canvas panel. */
    .nav-rail-toggle { display:none; }
    body.nav-collapsed .site-header { width:var(--sidebar-width); }
    body.nav-collapsed .portal-main { margin-left:0; }
    body.nav-collapsed .site-header .header-inner > :not(.nav-rail-toggle) { visibility:visible; }
}
@media print {
    .nav-rail-toggle { display:none; }
    body.nav-collapsed .portal-main { margin-left:0; }
}

/* Audit column widths and status rows referenced by table-columns.js/css (no current view uses the retired
   compact-master-table layout itself, but these class names are still read by the shared column-resize script). */
.master-audit-name-column { width:110px; }
.master-audit-date-column { width:132px; }
.audit-cell span,.audit-cell time,.audit-cell small { display:block; }
.audit-cell time,.audit-cell small { color:var(--muted); font-size:10.5px; margin-top:2px; white-space:nowrap; }
.table-edit { font-weight:650; }
.designation-editor-row td { padding:14px 16px; background:var(--brand-lighter); }
.inline-notice { margin:0; padding:8px 18px; color:var(--brand); background:var(--brand-light); font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Shared master layout: business columns receive the flexible width. */
.master-section { margin-bottom:24px; }
.master-table { width:100%; min-width:960px; table-layout:fixed; }
/* Tables with many columns (roughly 9+) keep the wider minimum so their content stays legible; they scroll inside
   their own .table-wrap (screen fit §4, 16 Sep 2026). */
.master-table.master-table-wide { min-width:1200px; }
.master-table th { padding:8px; font-size:10px; font-weight:400; }
.master-table td { padding:6px 8px; font-size:12px; font-weight:400; vertical-align:middle; }
.master-table .cell-code,.master-table strong,.master-table .table-edit { font-weight:400; }
.master-table .audit-cell span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.master-table .audit-date { white-space:nowrap; font-size:12px; }
.master-table .audit-date time { font-size:12px; }
.master-table .master-actions { width:72px; position:sticky; right:0; background:var(--surface); }
.master-table .master-actions button { border:0; background:transparent; padding:3px; cursor:pointer; color:var(--brand); font:inherit; text-decoration:underline; }
.master-section .master-editor { background:var(--brand-lighter); }
.master-section .master-editor>td { padding:12px 16px; }
.master-editor form { padding:12px 16px; }
.master-editor td form { padding:0; }
.master-editor .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; }
.master-editor .form-row { margin:0; }
.master-editor label { font-weight:400; }
.master-editor .form-control { min-height:35px; padding:7px 9px; font-size:12px; }
.master-editor .permission-grid { margin:14px 0; }
.master-editor .master-editor-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }
.master-form-error { color:var(--danger); font-size:12px; }
.master-section .master-section-status { margin:0; padding:8px 16px; color:var(--brand); background:var(--brand-light); }
.master-tools { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.master-tools .form-control { max-width:300px; min-height:34px; padding:6px 8px; }
.master-row-summary { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:760px) { .master-editor form { max-width:calc(100vw - 82px); } .master-editor .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .master-tools { flex-wrap:wrap; } }

.master-section { min-width:0; overflow:hidden; }
.master-section .table-wrap { max-width:100%; }

.master-table th { position:relative; }

/* The pager line under a paged table (00-page-pattern.md §2); always rendered, even with one page or no rows,
   so navigation stays at the bottom edge. Sits immediately after .table-wrap.table-fill inside the same .card. */
.table-pager { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:4px 12px; border-top:1px solid var(--border); background:var(--surface-alt); color:var(--muted); font-size:11px; }
.table-pager-controls { display:flex; align-items:center; gap:10px; }
.table-pager-position { white-space:nowrap; }
.table-pager .btn { min-height:28px; padding:4px 10px; font-size:11px; }
.table-pager .disabled { pointer-events:none; opacity:.5; }
@media print { .table-pager-controls { display:none; } }

/* Theme. The layout injects --brand, --brand-secondary, --on-brand and --on-brand-secondary per company
   (Appearance page); every other brand token derives from them so one pair of colours restyles the whole portal. */
:root {
    --brand-secondary:#8aa5bd;
    --on-brand:#fff;
    --on-brand-secondary:#1f2e3b;
    --brand-accent:var(--brand-secondary);
    --brand-hover:color-mix(in srgb, var(--brand) 82%, black);
    --nav-hover:color-mix(in srgb, var(--brand) 88%, var(--on-brand));
    --nav-active:color-mix(in srgb, var(--brand) 76%, var(--on-brand));
    --nav-muted:color-mix(in srgb, var(--brand) 45%, var(--on-brand));
    --sidebar-text:color-mix(in srgb, var(--on-brand) 88%, var(--brand));
    --sidebar-muted:color-mix(in srgb, var(--on-brand) 60%, var(--brand));
    --brand-light:color-mix(in srgb, var(--brand) 12%, white);
    --brand-lighter:color-mix(in srgb, var(--brand) 6%, white);
    --shadow-sm:0 1px 2px color-mix(in srgb, var(--brand) 6%, transparent);
    --shadow-md:0 8px 24px color-mix(in srgb, var(--brand) 14%, transparent);
}
.primary-nav a[aria-current="page"] { border-left-color:var(--brand-secondary); }
.badge-secondary { color:var(--on-brand-secondary); background:var(--brand-secondary); }
.nav-context { display:block; margin:6px 0; font-size:11px; color:var(--sidebar-muted); }
.account-nav a { padding:4px 0; }
.alert { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:10px 14px; border-radius:7px; font-size:13px; }
.alert-success { color:var(--success); background:var(--success-bg); }
.alert-danger { color:var(--danger); background:var(--danger-bg); }
.color-pair { display:flex; align-items:center; gap:10px; }
.color-pair input[type="color"] { width:46px; height:40px; padding:2px; border:1px solid var(--border-strong); border-radius:5px; background:#fff; cursor:pointer; }
.color-pair .form-control { max-width:140px; font-family:ui-monospace, Consolas, monospace; text-transform:uppercase; }
.theme-preview { display:grid; grid-template-columns:150px 1fr; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.theme-preview-sidebar { display:flex; flex-direction:column; gap:8px; padding:14px; background:var(--brand); color:var(--sidebar-text); font-size:12px; }
.theme-preview-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--nav-active); color:var(--on-brand); font-weight:700; }
.theme-preview-active { padding:6px 8px; border-left:3px solid var(--brand-secondary); background:var(--nav-active); color:var(--on-brand); border-radius:0 6px 6px 0; }
.theme-preview-body { padding:14px; background:var(--surface-alt); }
.theme-preview-body table { min-width:0; margin-bottom:12px; }
.auth-brand span > strong, .auth-brand span > small { display:block; }
.auth-brand span > small { font-size:11px; opacity:.85; }