/* Generated from modular CSS sources. Do not edit. */

/* Public foundation tokens. All element rules are scoped to a library surface. */
:root, .f-root {
 --f-primary-light:#153A32; --f-accent-light:#16745F; --f-primary-dark:#BBD7C9; --f-accent-dark:#75CBB2;
 --f-primary:var(--f-primary-light); --f-accent:var(--f-accent-light); --f-canvas:#F3F5F5; --f-surface-light:#FFFFFF; --f-surface:var(--f-surface-light); --f-text-light:#112924; --f-text:var(--f-text-light); --f-muted:#4F645D;
 --f-display-board:#E5E8EB; --f-preview-light:#C9DFDA; --f-preview-dark:#2F5049; --f-click-light:#B5C9C4; --f-click-dark:#2A4842; --f-danger-light:#9D322D; --f-danger:var(--f-danger-light); --f-preview-danger:#7E2824; --f-click-danger:#712420; --f-info-text-light:#1565C0; --f-info-text:var(--f-info-text-light); --f-warning-background:#F2A33A; --f-warning-ink:var(--f-text); --f-border:#9FAEA9;
 /* Filled status colors stay semantic when a host changes its brand or theme. */
 --f-success-background:#16745F; --f-warning-strong:#B45309;
 --f-font:'Segoe UI',system-ui,sans-serif; --f-body-size:17px; --f-label-weight:400;
 --f-type-page:50px; --f-type-page-compact:38px; --f-type-h1:34px; --f-type-h2:28px; --f-type-h3:20px; --f-type-body:17px;
 --f-space-1:4px; --f-space-2:8px; --f-space-3:12px; --f-space-4:16px;
 --f-space-5:20px; --f-space-6:24px; --f-space-8:32px; --f-space-11:44px; --f-space-16:64px; --f-space-21:84px;
 --f-radius-small:10px; --f-radius-control:12px; --f-radius-panel:16px; --f-radius-emphasis:28px;
 --f-page-gutter:24px; --f-field-label-gap:7px; --f-control-height:48px; --f-choice-size:28px; --f-choice-radius:9px; --f-dense-height:36px; --f-topbar-height:68px; --f-primary-width:76px; --f-secondary-width:232px;
 --f-content-width:1180px; --f-shadow-control:0 2px 6px rgb(from var(--f-primary) r g b / .16); --f-shadow-popup:0 16px 48px rgb(from var(--f-primary) r g b / .16); --f-focus-width:3px;
 --f-icon-default-size:26px; --f-icon-primary-size:24px; --f-icon-tool-size:26px; --f-icon-information-size:22px;
 --f-primary-ink:var(--f-surface); --f-accent-ink:var(--f-surface); --f-accent-text:var(--f-accent); --f-accent-text-light:var(--f-accent); --f-accent-text-dark:var(--f-accent); --f-accent-hover:var(--f-accent);
 --f-ink-soft:var(--f-muted); --f-disabled:var(--f-muted);
 --f-surface-preview:var(--f-preview-light); --f-target-preview:var(--f-surface-preview); --f-primary-preview:var(--f-preview-dark); --f-surface-click:var(--f-click-light); --f-target-click:var(--f-surface-click); --f-primary-click:var(--f-click-dark); --f-accent-click:var(--f-click-dark); --f-row-active:var(--f-target-click); --f-surface-alternate:var(--f-canvas); --f-surface-raised:var(--f-surface); --f-row-hover:var(--f-target-preview); --f-navigation-children-surface:var(--f-surface);
 --f-display-board-surface:var(--f-display-board); --f-display-board-ink:var(--f-text); --f-display-board-dot:var(--f-border);
 --f-shadow-card:0 18px 52px rgb(from var(--f-primary) r g b / .16); --f-soft:var(--f-display-board); --f-chrome:var(--f-primary); --f-chrome-ink:var(--f-surface);
}
.f-root { color-scheme:light; font-family:var(--f-font); font-size:var(--f-body-size); line-height:1.55; color:var(--f-text); background:var(--f-canvas); }
.f-root.f-theme-dark {
 color-scheme:dark; --f-primary:var(--f-primary-dark); --f-accent:var(--f-accent-dark); --f-canvas:#18231D; --f-surface:#263A30; --f-text:#E7EFEA; --f-muted:#B8C9BF;
 --f-display-board:#31483B; --f-preview-light:#D5E5DE; --f-preview-dark:#395A48; --f-click-light:#C0CEC8; --f-click-dark:#335141; --f-danger:#FFB4AB; --f-preview-danger:#8C3430; --f-click-danger:#7E2F2B; --f-info-text:#8CB8FF; --f-warning-background:#E5A047; --f-warning-ink:var(--f-surface); --f-border:#526F60;
 --f-primary-ink:var(--f-surface); --f-accent-ink:var(--f-surface); --f-ink-soft:var(--f-muted); --f-surface-preview:var(--f-preview-dark); --f-target-preview:var(--f-surface-preview); --f-primary-preview:var(--f-preview-light); --f-surface-alternate:var(--f-canvas); --f-surface-raised:var(--f-surface);
 --f-surface-click:var(--f-click-dark); --f-target-click:var(--f-surface-click); --f-primary-click:var(--f-click-light); --f-accent-click:var(--f-click-light); --f-row-active:var(--f-target-click); --f-row-hover:var(--f-target-preview); --f-navigation-children-surface:var(--f-surface); --f-display-board-ink:var(--f-text); --f-soft:var(--f-display-board); --f-chrome:var(--f-canvas); --f-chrome-ink:var(--f-text);
}
@media(prefers-color-scheme:dark) {
 .f-root.f-theme-system { color-scheme:dark; --f-primary:var(--f-primary-dark); --f-accent:var(--f-accent-dark); --f-canvas:#18231D; --f-surface:#263A30; --f-text:#E7EFEA; --f-muted:#B8C9BF;
  --f-display-board:#31483B; --f-preview-light:#D5E5DE; --f-preview-dark:#395A48; --f-click-light:#C0CEC8; --f-click-dark:#335141; --f-danger:#FFB4AB; --f-preview-danger:#8C3430; --f-click-danger:#7E2F2B; --f-info-text:#8CB8FF; --f-warning-background:#E5A047; --f-warning-ink:var(--f-surface); --f-border:#526F60;
  --f-primary-ink:var(--f-surface); --f-accent-ink:var(--f-surface); --f-ink-soft:var(--f-muted); --f-surface-preview:var(--f-preview-dark); --f-target-preview:var(--f-surface-preview); --f-primary-preview:var(--f-preview-light); --f-surface-alternate:var(--f-canvas); --f-surface-raised:var(--f-surface);
  --f-surface-click:var(--f-click-dark); --f-target-click:var(--f-surface-click); --f-primary-click:var(--f-click-light); --f-accent-click:var(--f-click-light); --f-row-active:var(--f-target-click); --f-row-hover:var(--f-target-preview); --f-navigation-children-surface:var(--f-surface); --f-display-board-ink:var(--f-text); --f-soft:var(--f-display-board); --f-chrome:var(--f-canvas); --f-chrome-ink:var(--f-text); }
}
.f-root *, .f-root *::before, .f-root *::after { box-sizing:border-box; }
:where(.f-root) :where(button,input,select,textarea) { font:inherit; }
.f-root button, .f-root a, .f-root input, .f-root select, .f-root textarea, .f-root summary { -webkit-tap-highlight-color:transparent; }
.f-root :focus-visible { outline:var(--f-focus-width) solid var(--f-accent); outline-offset:3px; }
/* Route headings retain programmatic focus without looking like an input. */
.f-root h1[tabindex="-1"]:focus { outline:none; }
.f-root :where(a) { color:var(--f-accent-text); text-underline-offset:3px; }
.f-root h1, .f-root h2, .f-root h3, .f-root p { margin-block-start:0; }
.f-root h1, .f-root h2, .f-root h3 { overflow-wrap:anywhere; }
.f-root h1,.f-type-h1 { font-size:var(--f-type-h1,34px); }
.f-root h2,.f-type-h2 { font-size:var(--f-type-h2,28px); }
.f-root h3,.f-type-h3 { font-size:var(--f-type-h3,20px); font-weight:740; }
.f-type-page { font-size:var(--f-type-page,50px); }
.f-type-body { font-size:var(--f-type-body,17px); }
/* Artistic display is explicitly opt-in and may exceed the reading scale. */
.f-type-art { font-size:var(--f-type-art-size,42px); }
.f-root p:last-child { margin-bottom:0; }
.f-root .f-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.f-icon { --f-icon-size:var(--f-icon-default-size,26px); width:1em; height:1em; flex-shrink:0; display:inline-block; vertical-align:middle; }
.f-icon-button { border:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:48px; height:48px; padding:0; border-radius:12px; background:transparent; color:inherit; cursor:pointer; }
.f-icon-button:hover { background:var(--f-target-preview); }
.f-icon-button:active:not(:disabled) { background:var(--f-target-click); }
.f-icon-button:disabled { opacity:.5; cursor:default; }
.f-shell { height:100dvh; min-height:240px; width:100%; min-width:0; display:grid; grid-template-columns:calc(var(--f-primary-width) + var(--f-secondary-width)) minmax(0,1fr); grid-template-rows:var(--f-topbar-height) minmax(0,1fr); isolation:isolate; }
.f-titlebar { --f-target-preview:var(--f-preview-dark); --f-target-click:var(--f-click-dark); grid-column:1/-1; display:flex; align-items:center; min-width:0; background:var(--f-chrome); color:var(--f-chrome-ink); border-bottom:1px solid var(--f-border); z-index:50; }
.f-titlebar > .f-icon-button { display:none; }
.f-titlebar :focus-visible { outline-color:var(--f-accent); outline-offset:-3px; }
.f-application-brand { align-self:stretch; display:flex; align-items:center; min-width:0; max-width:min(58vw,560px); color:inherit!important; text-decoration:none; }
.f-application-logo { display:grid; align-self:stretch; flex:0 0 76px; width:76px; padding:8px; place-items:center; overflow:hidden; }
.f-application-logo img,.f-application-logo .f-icon { --f-icon-size:48px; display:block; width:48px; height:48px; max-width:100%; object-fit:contain; }
.f-application-title { min-width:0; padding:0 22px 0 10px; font-weight:760; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.f-titlebar-start { display:flex; align-items:center; align-self:stretch; min-width:0; }
.f-titlebar-center { display:flex; align-items:center; align-self:stretch; min-width:0; }
.f-titlebar-start .f-action-menu,.f-titlebar-center .f-action-menu { display:flex; align-items:center; height:100%; padding-inline:8px; }
.f-titlebar .f-menu-trigger-label { height:48px; min-height:48px; border-radius:var(--f-radius-control); border:0; padding-inline:14px; background:transparent; }
.f-titlebar .f-button-quiet,.f-titlebar .f-menu-trigger-label { color:inherit; }.f-titlebar .f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-titlebar .f-button-quiet:hover:not(:active):not(:disabled):not([aria-disabled=true]),.f-titlebar .f-action-menu:hover .f-menu-trigger-label:not(:active):not(:disabled),.f-titlebar .f-menu-trigger-label[aria-expanded=true] { color:var(--f-chrome-ink); background:var(--f-preview-dark); }.f-titlebar .f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-titlebar .f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-underline,.f-titlebar .f-action-menu .f-menu-trigger-label:active:not(:disabled),.f-titlebar .f-button-quiet:active:not(:disabled):not([aria-disabled=true]),.f-titlebar .f-button-underline:active:not(:disabled):not([aria-disabled=true]) { color:var(--f-chrome-ink); background:var(--f-click-dark); }
.f-titlebar-end { display:flex; align-items:center; justify-content:flex-end; gap:0; margin-left:auto; padding-right:10px; min-width:0; }
.f-title-search { --f-target-preview:var(--f-surface-preview); --f-target-click:var(--f-surface-click); margin-left:auto; min-width:0; max-width:480px; display:flex; align-items:center; color:var(--f-text); background:var(--f-surface); border-radius:12px; }
.f-title-search input { min-width:0; width:100%; max-width:360px; border:0; padding:8px 16px; height:48px; background:transparent; color:inherit; border-radius:12px; }
.f-navigation { grid-row:2; display:grid; grid-template-columns:var(--f-primary-width) minmax(0,1fr); min-height:0; }
.f-primary-navigation { --f-target-preview:var(--f-preview-dark); --f-target-click:var(--f-click-dark); display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0; background:var(--f-chrome); color:var(--f-chrome-ink); overflow-y:auto; scrollbar-width:none; }
.f-primary-navigation-main,.f-primary-navigation-fixed { display:flex; flex-direction:column; align-items:center; gap:8px; }
.f-primary-navigation-main { width:100%; }
.f-primary-navigation-fixed { width:100%; padding-top:8px; }
.f-primary-item { position:relative; display:flex; justify-content:center; align-items:center; flex-shrink:0; width:55px; height:55px; border-radius:18px; color:inherit!important; text-decoration:none; }
.f-primary-command { background:transparent; }
.f-primary-item .f-icon,.primary-nav-item .primary-navigation-icon { --f-icon-size:var(--f-icon-primary-size,24px); width:1em; height:1em; }
.f-primary-item:hover { background:var(--f-preview-dark); }
.f-primary-item.is-selected { color:var(--f-surface)!important; background:var(--f-accent); }
.f-primary-item:active:not([aria-disabled=true]):not(:disabled) { background:var(--f-click-dark); }
.f-primary-item.is-selected:active:not([aria-disabled=true]):not(:disabled) { color:var(--f-surface)!important; background:var(--f-accent-click); }
.f-primary-item.is-selected::before { content:""; position:absolute; left:-10px; top:50%; width:4px; height:28px; transform:translateY(-50%); border-radius:0 4px 4px 0; background:var(--f-accent); }
.f-primary-item:focus-visible { outline-color:var(--f-accent); outline-offset:3px; }
.f-primary-item[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.f-nav-tooltip { display:none; position:fixed; margin:0; inset:auto; padding:8px 12px; width:max-content; max-width:22rem; border-radius:10px; background:var(--f-surface); color:var(--f-text); border:1px solid var(--f-border); box-shadow:var(--f-shadow-popup); z-index:55; font-size:17px; line-height:1.4; white-space:normal; text-align:left; }
.f-nav-tooltip[data-open] { display:block; }
.f-secondary-navigation { padding:18px; overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--f-border); background:var(--f-surface-alternate); scrollbar-width:none; }
.f-secondary-item { display:flex; width:100%; min-width:0; gap:12px; align-items:center; min-height:46px; border:0; border-radius:12px; padding:9px 12px; margin-bottom:6px; background:transparent; color:var(--f-ink-soft)!important; font:inherit; font-weight:650; text-align:start; text-decoration:none; white-space:nowrap; cursor:pointer; }
.f-secondary-item:hover:not([aria-disabled=true]):not(:disabled) { color:var(--f-text)!important; background:var(--f-target-preview); }
.f-secondary-item.is-selected { background:var(--f-primary); font-weight:780; color:var(--f-surface)!important; }
.f-secondary-item:focus-visible { outline-offset:-3px; }
.f-secondary-item[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.f-secondary-list { display:block; }
.f-secondary-row { margin-bottom:6px; }
.f-secondary-row .f-secondary-item { margin:0; }
.f-secondary-toggle { display:flex; flex:0 0 36px; width:36px; min-height:46px; justify-content:center; align-items:center; border:0; padding:0; border-radius:12px; color:var(--f-ink-soft); background:transparent; font:inherit; cursor:pointer; }
.f-secondary-toggle:hover:not(:disabled) { color:var(--f-text); background:var(--f-target-preview); }
.f-secondary-toggle.is-selected { background:var(--f-primary); color:var(--f-surface); }
.f-secondary-item.is-selected:is(:hover,:focus-visible):not([aria-disabled=true]):not(:disabled),.f-secondary-row:has(> .f-secondary-item.is-selected):hover > :is(.f-secondary-item,.f-secondary-toggle):not(:disabled) { background:var(--f-primary); color:var(--f-surface)!important; }
.f-secondary-toggle:disabled { opacity:.5; cursor:not-allowed; }
.f-secondary-item:active:not([aria-disabled=true]):not(:disabled),.f-secondary-toggle:active:not(:disabled) { background:var(--f-target-click); color:var(--f-text)!important; }
.f-secondary-item.is-selected:active:not([aria-disabled=true]):not(:disabled),.f-secondary-row:has(> .f-secondary-item.is-selected) > :is(.f-secondary-item,.f-secondary-toggle):active:not(:disabled):not([aria-disabled=true]) { background:var(--f-primary-click); color:var(--f-surface)!important; }
.f-secondary-toggle:focus-visible { outline-offset:-3px; }
.f-navigation-chevron { display:block; }
.f-third-navigation { margin:0 0 6px; padding:0; border-radius:var(--f-radius-control); background:var(--f-navigation-children-surface); }
.f-third-navigation .f-secondary-row { margin:0; }
.f-third-item { font-weight:400; }
@media(forced-colors:active) { .f-third-navigation { border:1px solid CanvasText; } }
.f-content-scroll { min-height:0; min-width:0; overflow:auto; overflow-anchor:none; overscroll-behavior:contain; scroll-behavior:auto; }
/* Layout landmarks are skip-link targets, rather than interactive controls. */
.f-root main:is(.f-content-scroll,.application-stage,.content-stage)[tabindex="-1"]:focus { outline:none; }
.f-page-body { --f-page-gutter:24px; min-height:100%; padding-block:0 clamp(64px,9vw,120px); min-width:0; }
.f-page-fluid { --f-content-gutter:max(var(--f-page-gutter),calc((100% - var(--f-content-width))/6)); }
.f-page-centered { --f-content-gutter:calc(max(var(--f-page-gutter),calc((100% - var(--f-content-width))/2))*var(--f-centered-gutter-scale,1)); }
.f-page-full { --f-content-gutter:0px; }
.f-page-body > :not(.f-page-heading) { margin-inline:var(--f-content-gutter); }
.f-page-body > .f-notice { margin-top:24px; }
.f-page-body > .f-data { width:auto; padding-top:clamp(44px,7vw,84px); }
.f-page-body > .f-display-board { width:auto; }
/* Full-row controls must leave room for PageBody's horizontal content gutters. */
.f-page-body > .f-uniform-grid-rectangle,.f-page-body > .f-form-actions { width:auto; }
.f-page-heading { position:sticky; top:0; z-index:15; background:var(--f-canvas); display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding:42px var(--f-content-gutter) 32px; min-height:174px; border-bottom:1px solid var(--f-border); }
.f-heading-title { flex:1 1 320px; min-width:0; }
.f-page-heading h1 { max-width:100%; font-size:var(--f-type-page,50px); font-weight:780; line-height:1.15; letter-spacing:-.035em; margin:0; }
.f-heading-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }
.f-parent-link { margin-bottom:8px; }
:is(.f-shell,.content-surface,.navigation-surface)[data-compact-heading] .f-page-heading,.f-page-heading[data-heading-mode=compact] { align-items:center; gap:16px; min-height:72px; padding-block:12px; }
:is(.f-shell,.content-surface,.navigation-surface)[data-compact-heading] .f-page-heading h1,.f-page-heading[data-heading-mode=compact] h1 { font-size:var(--f-type-page-compact,38px); }
.f-section { margin-block:0; padding-top:clamp(44px,7vw,84px); min-width:0; }
.f-section-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.f-section-heading h2 { font-size:var(--f-type-h2,28px); font-weight:760; line-height:1.2; letter-spacing:-.02em; margin:0; }
.f-card { padding:24px; background:var(--f-primary); color:var(--f-primary-ink); border-radius:16px; min-width:0; overflow-wrap:anywhere; }
.f-card h3 { margin-bottom:16px; }
.f-code-block { max-width:100%; min-width:0; margin:0; padding:24px; border-radius:16px; background:var(--f-soft); color:var(--f-text); overflow:auto; font-family:var(--f-font); font-size:17px; line-height:1.6; font-variant-numeric:tabular-nums; }
.f-code-block code { font-family:inherit; }
.f-skip-link { position:fixed; left:16px; top:-120px; z-index:100; padding:12px 24px; border-radius:12px; background:var(--f-surface); color:var(--f-text); }
.f-skip-link:focus { top:12px; }
.f-navigation-backdrop { display:none; }
.f-no-navigation { grid-template-columns:minmax(0,1fr); }
.f-no-titlebar { grid-template-rows:minmax(0,1fr); }
.f-no-titlebar .f-navigation { grid-row:1; }
.f-no-secondary { grid-template-columns:var(--f-primary-width) minmax(0,1fr); }
.f-no-secondary .f-navigation { grid-template-columns:minmax(0,1fr); }
@media(max-width:980px) { .f-page-heading { min-height:156px; } }
@media(max-width:760px) {
 .f-shell { --f-topbar-height:60px; --f-primary-width:58px; --f-page-gutter:20px; grid-template-columns:58px minmax(0,1fr); grid-template-rows:60px 58px minmax(0,1fr); }
 .f-titlebar > .f-icon-button { display:inline-flex; width:40px; }
 .f-titlebar-end { padding-right:4px; }
 .f-application-brand { max-width:min(58vw,560px); }
 .f-application-logo { width:58px; flex-basis:58px; padding:7px; }
 .f-application-logo img,.f-application-logo .f-icon { --f-icon-size:43px; width:43px; height:43px; }
 .f-application-title { padding-inline:7px 12px; max-width:170px; }
 .f-title-search { max-width:200px; }
 .f-navigation { display:contents; }
 .f-primary-navigation { grid-column:1; grid-row:2/4; padding-top:10px; gap:6px; }
 .f-primary-item { width:45px; height:48px; border-radius:14px; }
 .f-primary-item.is-selected::before { left:-6px; height:24px; }
 .f-secondary-navigation { grid-column:2; grid-row:2; display:flex; align-items:center; gap:4px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--f-border); overflow-x:auto; overflow-y:hidden; }
 .f-secondary-list { display:flex; align-items:center; gap:4px; }
 .f-secondary-row { margin:0; }
 .f-secondary-item { white-space:nowrap; flex-shrink:0; min-height:42px; margin:0; padding-inline:12px; }
 .f-content-scroll { grid-column:2; grid-row:3; }
 .f-page-body { --f-page-gutter:20px; }
 .f-page-heading { display:block; min-height:142px; padding-block:32px 24px; }
 .f-page-heading h1 { font-size:var(--f-type-page,50px); }
 .f-page-heading .f-heading-actions { width:100%; margin-top:20px; }
 .f-page-heading .f-heading-actions > * { flex:1; }
 :is(:is(.f-shell,.content-surface,.navigation-surface)[data-compact-heading] .f-page-heading,.f-page-heading[data-heading-mode=compact]) .f-heading-actions { margin-top:12px; }
 :is(.f-shell,.content-surface,.navigation-surface)[data-compact-heading] .f-page-heading,.f-page-heading[data-heading-mode=compact] { min-height:72px; padding-block:12px; }
 :is(.f-shell,.content-surface,.navigation-surface)[data-compact-heading] .f-page-heading h1,.f-page-heading[data-heading-mode=compact] h1 { font-size:var(--f-type-page-compact,38px); }
 .f-section,.f-page-body > .f-data { padding-top:52px; }
 .f-section-heading { display:block; margin-bottom:20px; }
 .f-section-heading .f-heading-actions { margin-top:18px; }
 .f-shell[data-navigation-open=true] .f-secondary-navigation { position:fixed; top:60px; bottom:0; left:58px; width:min(232px,calc(100% - 58px)); display:flex; flex-direction:column; align-items:stretch; padding:20px 12px; z-index:52; border-right:1px solid var(--f-border); }
 .f-shell[data-navigation-open=true] .f-secondary-item { white-space:nowrap; }
 .f-shell[data-navigation-open=true] .f-secondary-list { display:block; }
 .f-has-navigation-tree { grid-template-rows:60px auto minmax(0,1fr); }
 .f-has-navigation-tree .f-secondary-navigation { display:block; max-height:40dvh; overflow:auto; }
 .f-has-navigation-tree .f-secondary-list { display:block; }
 .f-has-navigation-tree .f-secondary-item { white-space:nowrap; }
 .f-has-navigation-tree .f-secondary-row { margin-bottom:6px; }
 .f-has-navigation-tree .f-third-navigation .f-secondary-row { margin:0; }
 .f-has-navigation-tree[data-navigation-open=true] .f-secondary-navigation { max-height:none; }
 .f-shell[data-navigation-open=true] .f-navigation-backdrop { display:block; position:fixed; inset:60px 0 0 58px; border:0; padding:0; background:var(--f-text); z-index:51; }
 .f-no-navigation,.f-no-secondary { grid-template-rows:60px minmax(0,1fr); }
 .f-no-navigation { grid-template-columns:minmax(0,1fr); }
 .f-no-navigation .f-content-scroll { grid-row:2; grid-column:1; }
 .f-no-secondary .f-content-scroll { grid-row:2; }
 .f-no-secondary .f-primary-navigation { grid-row:2; }
 .f-no-titlebar { grid-template-rows:58px minmax(0,1fr); }
 .f-no-titlebar .f-primary-navigation { grid-row:1/3; }
 .f-no-titlebar .f-secondary-navigation { grid-row:1; }
 .f-no-titlebar .f-content-scroll { grid-row:2; }
 .f-no-titlebar.f-has-navigation-tree { grid-template-rows:auto minmax(0,1fr); }
 .f-no-titlebar.f-no-navigation { grid-template-rows:minmax(0,1fr); }
 .f-no-titlebar.f-no-navigation .f-content-scroll { grid-row:1; }
 .f-no-titlebar.f-no-secondary { grid-template-rows:minmax(0,1fr); }
 .f-no-titlebar.f-no-secondary .f-primary-navigation,.f-no-titlebar.f-no-secondary .f-content-scroll { grid-row:1; }
}
@media(max-width:520px) { .f-title-search { display:none; } .f-application-logo + .f-application-title { display:none; } .f-page-heading { min-height:126px; } .f-page-heading h1 { font-size:var(--f-type-page,50px); } .f-section,.f-page-body > .f-data { padding-top:44px; } }
@media(prefers-reduced-motion:reduce) { .f-root *, .f-root *::before, .f-root *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
/* Host opt-in prevents an additional document scroll around a full-height shell. */
body.f-document { margin:0; }

/* The optional skin replaces neutral functional fallbacks without changing their behavior. */
.f-root .f-page-centered { max-width:none; margin-inline:0; }
.f-progress-native, .f-toggle-state, .f-progress-ring-native { display:none; }
.f-progress-track { display:block; }



.f-button,.f-input,.f-toggle,.f-menu-trigger,.f-menu-item,.f-dialog-close{box-sizing:border-box;font-family:var(--f-font,"Segoe UI",sans-serif);font-size:17px;line-height:1.55}
/* Minimum height standardizes short labels; block padding remains when content grows. */
.f-button{position:relative;display:inline-flex;width:max-content;max-width:100%;min-width:0;min-height:48px;align-items:center;justify-content:center;justify-self:start;align-self:start;gap:10px;padding:10px 13px;border:1px solid transparent;border-radius:12px;font-weight:650;line-height:1.2;cursor:pointer;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.f-button-text{display:block;min-width:0;line-height:1.2}
@supports(text-box-trim:trim-both){.f-button-text{text-box-trim:trim-both;text-box-edge:cap alphabetic}}
.f-button-primary{color:var(--f-surface);background:var(--f-primary)}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-primary,.f-button-primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--f-primary-preview)}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-primary,.f-button-primary:active:not(:disabled):not([aria-disabled=true]){background:var(--f-primary-click)}
.f-button-secondary{--f-target-preview:var(--f-surface-preview);--f-target-click:var(--f-surface-click);color:var(--f-text);background:var(--f-canvas);border-color:var(--f-border)}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-secondary,.f-button-secondary:hover:not(:disabled):not([aria-disabled=true]){color:var(--f-text);background:var(--f-target-preview);border-color:var(--f-border)}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-secondary,.f-button-secondary:active:not(:disabled):not([aria-disabled=true]){color:var(--f-text);background:var(--f-target-click);border-color:var(--f-border)}
.f-button-quiet{background:transparent;color:var(--f-accent-text)}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-button-quiet:hover:not(:disabled):not([aria-disabled=true]){color:var(--f-text);background:var(--f-target-preview)}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-button-quiet:active:not(:disabled):not([aria-disabled=true]){color:var(--f-text);background:var(--f-target-click)}
/* Quiet adapts to the Primary access surface; explicit variants and unavailable actions do not. */
.f-access-form-primary .f-button-quiet:not(:disabled):not([aria-disabled=true]){--f-target-preview:var(--f-primary-preview);--f-target-click:var(--f-primary-click);color:var(--f-primary-ink)}.f-access-form-primary .f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-access-form-primary .f-button-quiet:hover:not(:disabled):not([aria-disabled=true]){color:var(--f-primary-ink);background:var(--f-primary-preview)}.f-access-form-primary .f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-access-form-primary .f-button-quiet:active:not(:disabled):not([aria-disabled=true]){color:var(--f-primary-ink);background:var(--f-primary-click)}
.f-button-danger{color:var(--f-surface);background:var(--f-danger)}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-danger,.f-button-danger:hover:not(:disabled):not([aria-disabled=true]){color:var(--f-surface-light);background:var(--f-preview-danger)}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-danger,.f-button-danger:active:not(:disabled):not([aria-disabled=true]){color:var(--f-surface-light);background:var(--f-click-danger)}
.f-button-underline{padding-inline:0;border:0;border-bottom:1px solid transparent;border-radius:0;color:var(--f-accent-text);background:transparent}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-underline,.f-button-underline:hover:not(:disabled):not([aria-disabled=true]){border-bottom-color:var(--f-border);background:transparent;text-decoration:none}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-underline,.f-button-underline:active:not(:disabled):not([aria-disabled=true]){color:var(--f-text);border-bottom-color:var(--f-border);background:var(--f-target-click);text-decoration:none}
/* Standard Underline's Primary footer context stays in the shared Button stylesheet. */
.f-presentation-footer .f-button-underline { color:var(--f-primary-ink); }.f-presentation-footer .f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-underline,.f-presentation-footer .f-button-underline:active:not(:disabled):not([aria-disabled=true]) { color:var(--f-primary-ink); background:var(--f-primary-click); }
.f-button-elevated{--f-target-preview:var(--f-surface-preview);--f-target-click:var(--f-surface-click);color:var(--f-text);background:var(--f-surface);box-shadow:var(--f-shadow-control)}.f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-elevated,.f-button-elevated:hover:not(:disabled):not([aria-disabled=true]){background:var(--f-target-preview)}.f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-elevated,.f-button-elevated:active:not(:disabled):not([aria-disabled=true]){background:var(--f-target-click)}.f-select.f-select-customized:is(:disabled,[aria-disabled=true]) > .f-select-trigger.f-button,.f-button:disabled,.f-button[aria-disabled=true]{color:var(--f-disabled);background:transparent;border-color:var(--f-border);box-shadow:none;cursor:not-allowed}.f-select.f-select-customized:is(:disabled,[aria-disabled=true]) > .f-select-trigger.f-button.f-button-elevated,/* Availability removes interaction, not the Elevated variant's surface/elevation identity. */
.f-button.f-button-elevated:disabled,.f-button.f-button-elevated[aria-disabled=true]{background:var(--f-surface);box-shadow:var(--f-shadow-control)}.f-select.f-select-customized:focus-visible > .f-select-trigger.f-button,.f-button:focus-visible,.f-input:focus-visible,.f-checkbox:focus-visible,.f-toggle:focus-visible,.f-menu-trigger:focus-visible,.f-menu-item:focus-visible,.f-disclosure>summary:focus-visible,.f-dialog-close:focus-visible{outline:3px solid var(--f-accent);outline-offset:3px}.f-select.f-select-customized:focus-visible > .f-select-trigger.f-button-primary,.f-button-primary:focus-visible{box-shadow:0 0 0 2px var(--f-surface)}
.f-form-layout{display:grid;grid-template-columns:repeat(var(--f-form-columns,2),minmax(0,1fr));gap:24px;min-width:0}
.f-field,.f-search{position:relative;display:grid;min-width:0;align-content:start;gap:var(--f-field-label-gap,7px);color:var(--f-ink-soft,var(--f-muted));font:400 17px/1.55 var(--f-font,"Segoe UI",sans-serif)}
.f-field-full{grid-column:1/-1}
.f-field-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:17px;font-weight:400;color:var(--f-ink-soft,var(--f-muted))}
/* Keep the native label-to-control hover path continuous without changing measured label geometry. */
.f-field > .f-field-label{position:relative}
.f-field > .f-field-label::before{content:"";position:absolute;inset-inline:0;inset-block-start:100%;block-size:var(--f-field-label-gap,7px);pointer-events:auto}
/* Labels inherit the paired surface foreground, not the Field's usual muted body color. */
.f-access-form-primary .f-field,.f-access-form-primary .f-field-label{color:var(--f-primary-ink)}
.f-required{margin-left:5px;color:var(--f-danger);font-weight:750}
.f-field-control{min-width:0;position:relative}
.f-input{display:block;width:100%;min-width:0;height:var(--f-control-height,48px);padding:0 16px;color:var(--f-text);background:var(--f-surface);border:1px solid var(--f-border);border-radius:12px;font-weight:400}
.f-input:disabled{color:var(--f-muted);background:var(--f-surface-alternate,var(--f-canvas));cursor:not-allowed}
.f-input.invalid,.f-input[aria-invalid="true"]{border-color:var(--f-danger)}
.f-textarea{min-height:116px;height:auto;padding:12px 16px;resize:vertical}
.f-select{vertical-align:middle;line-height:1.2}
.f-select option{color:var(--f-text);background:var(--f-surface);font:inherit}
@supports(appearance:base-select){.f-select,.f-select::picker(select){appearance:base-select}.f-select{display:flex;align-items:center;justify-content:space-between;gap:12px}.f-select::picker(select){position-area:bottom span-right;inset:auto;margin:0;position-try-fallbacks:flip-block;transition:none;animation:none}.f-select[data-f-popup-align="right"]::picker(select){position-area:bottom span-left}.f-select::picker-icon{flex:0 0 auto;margin-inline-start:auto;transition:transform 140ms ease}.f-select:open::picker-icon{transform:rotate(180deg)}}
.f-field-errors{position:absolute;top:calc(100% + 8px);left:0;z-index:45;display:grid;width:max-content;max-width:min(360px,calc(100vw - 48px));gap:4px;padding:9px 12px;color:var(--f-surface);background:var(--f-danger);border-radius:10px;box-shadow:0 12px 28px rgb(from var(--f-primary) r g b / 22%);font-size:17px;overflow-wrap:anywhere}
.f-form-actions{display:grid;grid-template-columns:repeat(var(--f-action-columns,2),minmax(0,1fr));gap:0;margin-top:44px;width:100%;min-width:0;border-radius:16px;overflow:hidden;background:transparent;color:var(--f-text);grid-column:1/-1}
.f-checkbox-label{display:inline-flex;min-height:var(--f-control-height,48px);align-items:center;gap:12px;font:400 17px/1.55 var(--f-font,"Segoe UI",sans-serif);color:var(--f-text);cursor:pointer}
.f-checkbox{box-sizing:border-box;display:grid;width:var(--f-choice-size,28px);height:var(--f-choice-size,28px);flex:0 0 var(--f-choice-size,28px);padding:0;margin:0;place-content:center;appearance:none;background:var(--f-surface);border:1px solid var(--f-border);border-radius:var(--f-choice-radius,9px);color:var(--f-accent-ink);cursor:pointer}
.f-checkbox:checked{background:var(--f-primary);border-color:var(--f-border)}
.f-checkbox:checked::before{content:"✓";font:800 17px/1 var(--f-font,"Segoe UI",sans-serif)}
.f-disabled{color:var(--f-muted);cursor:not-allowed}
.f-checkbox:disabled{opacity:.55;cursor:not-allowed}
.f-toggle{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;border:0;border-radius:12px;color:var(--f-text);background:transparent;font-weight:400;cursor:pointer;text-align:start}
.f-toggle-track{display:flex;flex:0 0 52px;width:52px;height:30px;box-sizing:border-box;align-items:center;padding:3px;border-radius:15px;background:var(--f-muted);transition:background 160ms ease}
.f-toggle-thumb{display:block;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--f-surface);transition:transform 160ms ease}
.f-toggle[aria-checked="true"] .f-toggle-track{background:var(--f-primary)}
.f-toggle[aria-checked="true"] .f-toggle-thumb{transform:translateX(22px)}
.f-toggle:hover:not(:disabled){color:var(--f-accent-text)}.f-toggle:focus-visible{outline-offset:4px}.f-toggle:disabled{opacity:.55;cursor:default}
.f-toggle:active:not(:disabled) .f-toggle-track{background:var(--f-primary-click)}
.f-notice{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:13px 16px;border-radius:10px;font:400 var(--f-body-size,17px)/1.55 var(--f-font,"Segoe UI",sans-serif);color:var(--f-notice-text,var(--f-text-light));background:var(--f-notice-background,var(--f-surface-light));box-shadow:var(--f-shadow-control);color-scheme:light;overflow-wrap:anywhere}
.f-notice-title{display:block;grid-column:1/-1;min-width:0;font-size:inherit;font-weight:700;color:var(--f-notice-title,var(--f-info-text-light))}
.f-notice-body{min-width:0;font-size:inherit;font-weight:400;color:inherit}
.f-notice-information{--f-notice-text:var(--f-text-light);--f-notice-background:var(--f-surface-light);--f-notice-title:var(--f-info-text-light)}
.f-notice-success{--f-notice-text:var(--f-surface-light);--f-notice-background:var(--f-success-background);--f-notice-title:var(--f-surface-light)}
.f-notice-warning{--f-notice-text:var(--f-surface-light);--f-notice-background:var(--f-warning-strong);--f-notice-title:var(--f-surface-light)}
.f-notice-error{--f-notice-text:var(--f-surface-light);--f-notice-background:var(--f-danger-light);--f-notice-title:var(--f-surface-light)}
.f-loading{display:flex;align-items:center;gap:12px;color:var(--f-muted);font-size:17px}
.f-spinner{display:inline-block;box-sizing:border-box;width:20px;height:20px;flex:0 0 20px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:f-spin .9s linear infinite}
@keyframes f-spin{to{transform:rotate(360deg)}}
.f-empty-state{padding-block:24px;color:var(--f-muted);font-size:17px}.f-empty-title{margin:0 0 16px;font-weight:600}.f-inline-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.f-empty-state[data-presentation=watermark] > .f-empty-title{font-size:clamp(40px,6vw,88px);font-weight:700;line-height:1.15;color:var(--f-muted);margin:0}
.f-button-structured .f-button-description{font-size:.875em;font-weight:400;line-height:1.4}.f-button-structured .f-button-trailing{font-size:.875em;font-weight:600;line-height:1.4}
.f-disclosure{min-width:0;margin-block:24px;color:var(--f-text)}.f-disclosure>summary{display:flex;align-items:center;gap:12px;min-height:48px;list-style:none;cursor:pointer;font-size:17px;font-weight:600;padding:8px 0;border-radius:12px}.f-disclosure>summary::-webkit-details-marker{display:none}.f-disclosure-content{display:grid;min-width:0;gap:24px;padding-top:16px}
.f-action-menu{display:inline-flex}.f-menu-trigger{display:grid;width:var(--f-control-height,48px);height:var(--f-control-height,48px);min-height:var(--f-control-height,48px);place-items:center;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--f-text);font-weight:800;letter-spacing:1px;line-height:1;cursor:pointer}.f-menu-trigger:hover:not(:disabled):not([aria-disabled="true"]),.f-menu-trigger[aria-expanded="true"]:not(:disabled):not([aria-disabled="true"]),.f-action-menu[data-f-native-menu]:not([data-f-enhanced])[open]:not([inert])>.f-menu-trigger:not([aria-disabled="true"]){background:var(--f-target-preview);border-color:var(--f-border)}
.f-menu-panel{--f-target-preview:var(--f-surface-preview);--f-target-click:var(--f-surface-click);display:none;position:fixed;inset:auto;width:max-content;margin:0;padding:6px;box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;color:var(--f-text);background:var(--f-surface);border:1px solid var(--f-border);border-radius:16px;box-shadow:var(--f-shadow-card,0 1px 2px rgb(from var(--f-primary) r g b / 6%));font:400 17px/1.55 var(--f-font,"Segoe UI",sans-serif)}
.f-menu-panel:not(:popover-open):not([data-f-open]){display:none}.f-menu-panel[data-f-open]{display:block;z-index:1000}.f-menu-item{display:flex;width:100%;min-height:38px;align-items:center;padding:8px 10px;border:0;border-radius:10px;color:inherit;background:transparent;text-align:start;font:inherit;font-weight:400;white-space:normal;overflow-wrap:anywhere;cursor:pointer}.f-menu-item:hover:not(:disabled):not([aria-disabled="true"]),.f-menu-item:focus-visible:not(:disabled):not([aria-disabled="true"]){background:var(--f-target-preview)}.f-menu-danger{color:var(--f-danger)}.f-menu-item:disabled,.f-menu-item[aria-disabled="true"],.f-menu-trigger:disabled,.f-menu-trigger[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.f-dialog{width:min(640px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:0;box-sizing:border-box;color:var(--f-text);background:var(--f-surface);border:1px solid var(--f-border);border-radius:16px;overflow:hidden;font:400 17px/1.45 var(--f-font,"Segoe UI",sans-serif)}
.f-dialog[open]{display:flex;flex-direction:column}.f-dialog::backdrop{background:rgb(from var(--f-primary) r g b / 40%)}.f-dialog-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}.f-dialog-header h2{margin:0;min-width:0;font-size:28px;font-weight:760;line-height:1.14;overflow-wrap:anywhere}.f-dialog-close{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:0;color:var(--f-text);border:0;border-radius:12px;background:transparent;cursor:pointer}.f-dialog-close svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}.f-dialog-close:hover:not(:disabled){background:var(--f-target-preview)}.f-dialog-close:active:not(:disabled){background:var(--f-target-click)}.f-dialog-close:disabled{opacity:.55;cursor:not-allowed}.f-dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px}.f-dialog-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding:16px 24px}
.f-bottom-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - 24px);margin:0;border:0;border-radius:24px 24px 0 0;box-shadow:none}.f-bottom-sheet[open]{animation:f-sheet-enter 180ms ease-out}.f-bottom-sheet .f-dialog-header,.f-bottom-sheet .f-dialog-body,.f-bottom-sheet .f-dialog-actions{width:100%;max-width:960px;box-sizing:border-box;margin-inline:auto}@keyframes f-sheet-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:760px){.f-field-errors{position:static;max-width:none;width:auto;margin-top:1px}}
@media(max-width:760px){.f-form-layout{grid-template-columns:minmax(0,1fr)}.f-form-actions{grid-template-columns:repeat(var(--f-action-narrow-columns,2),minmax(0,1fr))}.f-bottom-sheet{max-height:calc(100dvh - 12px)}.f-dialog-header,.f-dialog-body,.f-dialog-actions{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.f-spinner{animation:none}.f-toggle-track,.f-toggle-thumb{transition:none}.f-bottom-sheet[open]{animation:none}.f-select::picker-icon{transition:none}}
.f-toggle-section{margin-block:24px}.f-toggle-section-content{padding-top:16px}.f-toggle-section-content[hidden]{display:none}
.f-progress{display:grid;gap:10px;text-align:center}.f-progress-track{position:relative;width:100%;height:40px;overflow:hidden;border-radius:20px;background:var(--f-canvas)}.f-progress-fill{position:relative;display:block;height:100%;overflow:hidden;border-radius:inherit;background:var(--f-primary);transition:width 650ms cubic-bezier(.2,.8,.2,1)}.f-progress-fill::after{position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgb(from var(--f-surface-light) r g b / 47%) 50%,transparent 80%);background-size:250% 100%;background-position:100% 0;background-repeat:no-repeat;content:"";animation:f-progress-flow 2.4s ease-in-out infinite}.f-progress-indeterminate .f-progress-fill{width:35%;inset-inline-start:0;animation:f-progress-search 1.8s ease-in-out infinite alternate}.f-progress-percent{margin:0;color:var(--f-progress-text,var(--f-primary));font-size:28px;font-weight:740;line-height:1.14;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.f-progress-status{margin:0;font-size:17px;font-weight:650}
.f-progress-ring{position:relative;display:inline-grid;width:72px;height:72px;place-items:center;color:var(--f-accent-text,var(--f-accent))}.f-progress-ring svg{width:68px;height:68px;transform:rotate(-90deg)}.f-progress-ring circle{fill:none;stroke-width:4.5}.f-progress-ring-track{stroke:var(--f-border)}.f-progress-ring-arc{stroke:currentColor;stroke-linecap:round;transform-origin:26px 26px;animation:f-spin 2.2s linear infinite}.f-progress-ring>span{position:absolute;font-size:17px;font-weight:760;line-height:1;font-variant-numeric:tabular-nums}.f-progress-stopped .f-progress-ring-arc{animation:none}
@keyframes f-progress-flow{to{background-position:-100% 0}}@keyframes f-progress-search{to{inset-inline-start:65%}}

@media(prefers-reduced-motion:reduce){.f-progress-fill,.f-progress-fill::after,.f-progress-ring-arc{animation:none;transition:none}.f-progress-indeterminate .f-progress-fill{width:100%;inset-inline-start:0;opacity:.35;animation:none}}

.f-menu-panel :focus-visible,.f-dialog :focus-visible{outline:3px solid var(--f-accent);outline-offset:3px}.f-checkbox.invalid,.f-checkbox[aria-invalid="true"]{border-color:var(--f-danger)}

.f-disclosure>summary:hover{color:var(--f-accent-text)}.f-disclosure>summary:active{filter:none}.f-disclosure[open]>summary .f-toggle-track{background:var(--f-primary)}.f-disclosure[open]>summary .f-toggle-thumb{transform:translateX(22px)}
.f-bottom-sheet .f-dialog-header h2{font-size:28px;font-weight:600;line-height:1.5}.f-bottom-sheet .f-dialog-close{width:38px;height:38px;flex-basis:38px;color:var(--f-primary-ink);background:var(--f-primary);border:1px solid var(--f-border)}.f-bottom-sheet .f-dialog-close:hover:not(:disabled){background:var(--f-primary-preview)}.f-bottom-sheet .f-dialog-close:active:not(:disabled){background:var(--f-primary-click)}.f-bottom-sheet .f-dialog-body{padding-top:16px;padding-bottom:max(20px,env(safe-area-inset-bottom))}

/* Semantic states reuse the application color roles. */
.f-root{--f-progress-text:var(--f-primary)}
.f-root.f-theme-dark{--f-progress-text:var(--f-text)}
@media(prefers-color-scheme:dark){.f-root.f-theme-system{--f-progress-text:var(--f-text)}}
.f-button-icon{width:48px;height:48px;min-height:48px;flex:0 0 48px;gap:0;padding:0}
.f-menu-trigger-label{display:inline-flex;width:auto;min-width:var(--f-control-height,48px);height:auto;min-height:var(--f-control-height,48px);justify-content:center;gap:8px;padding:0 14px;font-weight:650;letter-spacing:normal;line-height:1.55}
.f-menu-trigger:focus-visible{outline-offset:2px}
.f-menu-panel::backdrop{background:transparent}
.f-bottom-sheet .f-dialog-header{width:100%;max-width:none;margin-inline:0;padding-inline:max(var(--f-page-gutter,24px),calc((100% - 960px)/2 + var(--f-page-gutter,24px)))}

/* Pressed feedback is distinct from hover and persistent selection. */
.f-checkbox:active:not(:disabled){background:var(--f-target-click)}.f-checkbox:checked:active:not(:disabled){background:var(--f-primary-click)}
.f-menu-trigger:active:not(:disabled):not([aria-disabled="true"]){background:var(--f-target-click);border-color:var(--f-border)}
.f-menu-item:active:not(:disabled):not([aria-disabled="true"]){background:var(--f-target-click)}
.f-disclosure>summary:hover{color:var(--f-text);background:var(--f-target-preview)}.f-disclosure>summary:active{color:var(--f-text);background:var(--f-target-click)}.f-disclosure>summary:active .f-toggle-track{background:var(--f-primary-click)}



.f-data { width:100%; min-width:0; color:var(--f-text); font:17px/1.5 var(--f-font); }
.f-data *, .f-data *::before, .f-data *::after { box-sizing:border-box; }
.f-data button, .f-data input, .f-data select, .f-data summary { font:inherit; }
.f-data :is(button, input, select, summary):focus-visible, .f-data-scroll:focus-visible { outline:3px solid var(--f-accent); outline-offset:3px; }
.f-data-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px 10px; flex-wrap:wrap; margin-bottom:14px; }
.f-data-page-group, .f-data-tools, .f-data-pager-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.f-data-tools { gap:10px; margin-left:auto; justify-content:flex-end; }
.f-data-view { display:inline-grid; grid-template-columns:auto auto; min-height:48px; padding:3px; border:1px solid var(--f-border); border-radius:12px; background:var(--f-surface-alternate); }
.f-data-view button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:40px; height:40px; padding:0 12px; border:0; border-radius:9px; color:var(--f-muted); background:transparent; font-weight:700; cursor:pointer; }

.f-data-view button:hover:not(.f-data-view-selected) { color:var(--f-text); background:var(--f-row-hover); }
.f-data-view button.f-data-view-selected { color:var(--f-surface); background:var(--f-primary); box-shadow:var(--f-shadow-control); }
.f-data-view button:active { color:var(--f-text); background:var(--f-target-click); }
.f-data-view button.f-data-view-selected:active { color:var(--f-surface); background:var(--f-primary-click); }
.f-data-view button:focus-visible { outline-offset:2px; }
.f-data-view svg { width:23px; height:23px; flex:0 0 23px; }
.f-data-status, .f-data-empty { padding:20px 24px; margin:20px 0; border-radius:16px; color:var(--f-muted); background:var(--f-surface); overflow-wrap:anywhere; }
.f-data-empty { border:1px solid var(--f-border); }
.f-data-error { color:var(--f-surface); background:var(--f-danger); }
.f-data-scroll { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--f-border); border-radius:16px; background:var(--f-surface); scrollbar-width:thin; scrollbar-color:var(--f-border) var(--f-surface); }
.f-data-scroll::-webkit-scrollbar { height:8px; }
.f-data-scroll::-webkit-scrollbar-track { margin-inline:16px; }
.f-data-scroll::-webkit-scrollbar-thumb { background:var(--f-border); border-radius:8px; }
.f-data-scroll::-webkit-scrollbar-button { display:none; }
.f-data-table { border-spacing:0; border-collapse:separate; width:100%; color:var(--f-text); background:var(--f-surface); }
.f-data-table[data-f-sized] { table-layout:fixed; }
.f-data-table th, .f-data-table td { position:relative; height:76px; max-height:76px; padding:0; text-align:left; vertical-align:middle; border-bottom:1px solid var(--f-border); }
.f-data-table :is(th, td)[data-f-column]:not([data-f-last-column]) { max-width:320px; }
.f-data-table th { color:var(--f-text); background:var(--f-border); font-weight:760; letter-spacing:.025em; }
.f-data-table tbody tr:last-child :is(th, td) { border-bottom:0; }
.f-data-table .f-data-cell { display:block; min-width:0; max-width:100%; padding:0 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.f-list-view .f-data-table .f-data-cell { min-width:8rem; padding-block:12px; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.f-list-view .f-data-table tbody th { background:var(--f-surface); letter-spacing:normal; }
.f-data-sort.f-button { display:flex; align-self:stretch; justify-self:stretch; justify-content:flex-start; gap:0; width:100%; max-width:none; height:76px; min-height:76px; min-width:0; padding:0 16px; border:1px solid transparent; border-radius:0; background:transparent; color:inherit; cursor:pointer; text-align:left; font-weight:inherit; }
.f-data-sort-label { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:0; padding:5px 7px; border:1px solid transparent; border-radius:9px; }
.f-data-sort-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.f-data-sort.f-button:is(:hover,:active):not(:disabled):not([aria-disabled=true]) { color:var(--f-text); background:transparent; border-color:transparent; box-shadow:none; }
.f-data-sort:hover .f-data-sort-label { border-color:var(--f-border); background:var(--f-target-preview); }
.f-data-sort:active .f-data-sort-label { border-color:var(--f-border); background:var(--f-target-click); }
.f-data-sort:focus-visible { outline-offset:-4px; }
.f-data-sort-mark { flex:0 0 auto; font-size:17px; }
.f-data-resize { position:absolute; top:0; right:-1px; bottom:0; z-index:2; width:14px; min-height:76px; padding:0; border:0; border-radius:0; background:transparent; touch-action:none; cursor:col-resize; }
.f-data-resize::after { content:''; position:absolute; right:5px; top:10px; bottom:10px; width:1px; background:var(--f-border); opacity:0; }
.f-data-resize:hover::after, .f-data-resize:focus-visible::after, .f-data-resizing .f-data-resize::after { opacity:1; background:var(--f-accent); }
.f-data-resize:focus-visible { outline-offset:-3px; }
.f-data-spacer { padding:0 !important; border-left:0; }
.f-data-action-column { width:80px; }
.f-data-table .f-data-actions { position:sticky; right:0; z-index:3; width:80px; min-width:80px; padding:0 20px; background:var(--f-surface); box-shadow:-1px 0 0 var(--f-border); }
.f-data-table th.f-data-actions { z-index:4; background:var(--f-border); }
.f-data-actions .f-menu-trigger,.f-data-card-actions .f-menu-trigger { --f-control-height:var(--f-dense-height,36px); }
.f-data-openable { cursor:pointer; }
.f-data-table tbody .f-data-openable:hover td { background:var(--f-row-hover); }
.f-data-table tbody .f-data-openable:hover .f-data-actions { background:var(--f-row-hover); }
.f-data-table tbody .f-data-openable:active td,.f-data-table tbody .f-data-openable:active .f-data-actions { background:var(--f-target-click); }
.f-data-resizing { cursor:col-resize; user-select:none; }
.f-data-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:20px; }
.f-data-card { display:flex; align-items:flex-start; gap:12px; min-width:0; padding:24px; border:1px solid var(--f-border); border-radius:16px; background:var(--f-surface); }
.f-data-card-values { display:grid; gap:8px; min-width:0; flex:1; }
.f-data-card-value { min-width:0; height:24px; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.f-data-card-value:first-child { font-weight:700; }
.f-data-card-actions { flex:0 0 36px; }
.f-data-card.f-data-openable:hover { background:var(--f-target-preview); }
.f-data-card.f-data-openable:active { background:var(--f-target-click); }
.f-data-footer { display:flex; justify-content:flex-end; margin-top:14px; }
.f-data-count, .f-data-pager { display:inline-flex; align-items:center; min-height:48px; border:1px solid var(--f-border); border-radius:12px; background:var(--f-surface); font-weight:700; }
.f-data-count { gap:8px; padding:3px 18px; color:var(--f-muted); line-height:24px; }
.f-data-count > span { min-width:0; }
.f-data-pager { height:48px; padding:3px; gap:6px; }
.f-data-pager button { width:40px; min-width:40px; height:40px; padding:0; border:0; border-radius:9px; color:var(--f-text); background:transparent; font-weight:700; cursor:pointer; }
.f-data-pager button:hover:not(:disabled) { color:var(--f-text); background:var(--f-row-hover); }
.f-data-pager button:active:not(:disabled) { color:var(--f-text); background:var(--f-target-click); }
.f-data-pager button:disabled { opacity:.5; cursor:not-allowed; }
.f-data-pager button:focus-visible { outline-offset:-3px; }
.f-data-page-input { display:flex; align-items:center; }
.f-data-page-input input { width:64px; min-width:64px; height:38px; padding:0 8px; border:1px solid var(--f-border); border-radius:9px; color:var(--f-text); background:var(--f-surface); text-align:center; font-weight:700; font-variant-numeric:tabular-nums; appearance:textfield; }
.f-data-page-input input::-webkit-inner-spin-button, .f-data-page-input input::-webkit-outer-spin-button { appearance:none; margin:0; }
.f-data-page-total { padding-right:12px; white-space:nowrap; }
.f-data-page-size { display:inline-flex; align-items:center; gap:12px; min-height:48px; color:var(--f-muted); font-weight:400; white-space:nowrap; }
.f-data-page-size select { width:max-content; min-width:88px; font-variant-numeric:tabular-nums; }
.f-data-sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }
@media (max-width: 760px) {
    .f-data-tools { width:100%; }
    .f-data-toolbar { gap:16px; }
}
@media (prefers-reduced-motion: reduce) { .f-data * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
.f-data-card-value.f-data-card-title { font-weight:700; }
.f-data-card-value.f-data-card-metric { font-variant-numeric:tabular-nums; }
.f-data-progressive-cards .f-data-scroll { border:0; border-radius:0; background:transparent; }
.f-data-progressive-cards .f-data-table tr { padding:24px; border:1px solid var(--f-border); border-radius:16px; background:var(--f-surface); }
.f-data-progressive-cards .f-data-table td { border-bottom:0; background:transparent; box-shadow:none; }
.f-data-progressive-cards .f-data-table td[data-f-column]::before { color:var(--f-muted); font-size:var(--f-small-size,14px); }



:root {
color-scheme:light;

    font-family:"Segoe UI", sans-serif;
}

label {
font-weight:var(--f-label-weight);
}

.access-brand {
gap:16px;
    margin-bottom:28px;
}

.access-logo img {
object-fit:contain;
}

.access-brand h1 {
margin:0;
    font-size:var(--f-type-h1, 34px);
    font-weight:600;
}

html {
background:var(--f-canvas);
}

body {
margin:0;
    color:var(--f-text);
    background:var(--f-canvas);
    font-family:"Segoe UI", sans-serif;
    font-size:17px;
    line-height:1.45;
}

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

code,
pre,
kbd,
samp {
font-family:inherit;
    font-size:inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
outline:2px solid var(--f-accent);
    outline-offset:2px;
}

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

.page-root {
color:var(--f-text);
    background:var(--f-canvas);
}

.page-module {
    padding:0 var(--f-page-gutter) 24px;
    background:var(--f-surface);
    border-bottom:1px solid var(--f-border);
}

.section-heading {
gap:18px;
    padding:12px 0;
    background:inherit;
}

.section-heading > div {
gap:9px;
}

.section-heading h2 {
margin-bottom:0;
    font-size:var(--f-type-h2, 28px);
    font-weight:700;
}

.section-heading > span {
color:var(--f-muted);
    font-size:17px;
}

[data-resizable-table] .data-column-resizer::after {
background:var(--f-border);
}

[data-resizable-table] .data-column-resizer:hover::after,
[data-resizable-table] .data-column-resizer:focus-visible::after,
[data-resizable-table] .data-column-resizer.is-resizing::after {
background:var(--f-accent);
}

[data-resizable-table] .data-column-resizer:focus-visible {
outline:2px solid var(--f-accent);
    outline-offset:-2px;
}

.validation-message,
.validation-errors {
color:var(--f-surface);
    background:var(--f-danger);
    font-size:17px;
}

.form-check {
gap:12px;
    color:var(--f-text);
    font-size:17px;
    font-weight:var(--f-label-weight);
}

.form-check > input[type="checkbox"] {
width:var(--f-choice-size,28px);
    height:var(--f-choice-size,28px);
    flex:0 0 var(--f-choice-size,28px);
    box-sizing:border-box;
    margin:0;
    padding:0;
    appearance:none;
    color:var(--f-accent-ink);
    background:var(--f-surface);
    border:1px solid var(--f-border);
    border-radius:var(--f-choice-radius,9px);
}

.form-check > input[type="checkbox"]::before {
color:transparent;
    font-size:17px;
    font-weight:800;
    line-height:1;
}

.form-check > input[type="checkbox"]:checked {
background:var(--f-primary);
    border-color:var(--f-border);
}

.form-check > input[type="checkbox"]:checked::before {
color:currentColor;
}

.form-check > input[type="checkbox"]:focus-visible {
outline:3px solid var(--f-accent);
    outline-offset:3px;
}

.form-check:has(input:disabled) {
color:var(--f-disabled);
}

.form-check > input[type="checkbox"]:disabled {
background:var(--f-surface-alternate);
    border-color:var(--f-border);
}

:is(.navigation-surface, .content-surface) select:not(.f-select) option,
:is(.navigation-surface, .content-surface) select:not(.f-select) optgroup {
color:var(--f-text);
    background:var(--f-surface);
    font-size:17px;
}

.required-field::after,
label:has(input:required, select:required, textarea:required)::after,
label:has(+ input:required, + select:required, + textarea:required)::after {
color:var(--f-danger);
    font-size:20px;
    font-weight:800;
    line-height:1;
}

.validation-message {
padding:8px 10px;
    border-radius:var(--f-radius-control);
}

.validation-errors {
margin:0 0 14px;
    padding:10px 12px 10px 28px;
    border-radius:var(--f-radius-small);
}

.invalid {
border-color:var(--f-danger) !important;
}

.valid.modified {
border-color:var(--f-primary) !important;
}

.form-message {
margin:14px 0 0;
    padding:9px 11px;
}

.blazor-error-boundary {
padding:12px 16px;
    color:var(--f-surface);
    background:var(--f-danger);
}

/* Responsive design dimensions use the current Framework contract directly. */
@media (max-width: 760px) {
    .f-root { --f-page-gutter:20px; }
}




/* AccessBrand owns its typography; PresentationBand / AccessPanel own page geometry. */
.access-brand { gap:22px; margin-bottom:42px; }
.access-logo, .access-logo img { width:88px; height:88px; max-width:none; }
.access-brand h1 { margin:0; color:var(--f-text); font-size:var(--f-type-page,50px); font-weight:780; letter-spacing:-.055em; line-height:1.08; }
.access-brand .access-context { color:var(--f-accent); }
.access-brand p { max-width:660px; margin:10px 0 0; color:var(--f-muted); font-size:var(--f-type-body,17px); }
@media(max-width:760px) {
 .access-logo, .access-logo img { width:72px; height:72px; }
}



.data-pagination {
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
}
.data-pagination-range {
    gap: 8px;
    padding: 3px 18px;
    color: var(--f-muted);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-control);
    line-height: 24px;
}
.data-pagination-range-total {
    height: calc(var(--f-control-height) - 10px);
    padding: 0 10px;
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius-control) - 3px);
    font-variant-numeric: tabular-nums;
}
.data-pagination-controls {
    gap: 6px;
    height: var(--f-control-height);
    padding: 3px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-control);
}
.data-pagination-previous,
.data-pagination-next {
    width: 40px;
    height: calc(var(--f-control-height) - 8px);
    padding: 0;
    color: var(--f-text);
    background: transparent;
    border: 0;
    border-radius: calc(var(--f-radius-control) - 3px);
    cursor: pointer;
    font: inherit;
}
.data-pagination-previous svg,
.data-pagination-next svg {
    width: 20.3px;
    height: 20.3px;
}
.data-pagination-previous:hover:not(:disabled),
.data-pagination-next:hover:not(:disabled) {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}
.data-pagination-previous:focus-visible,
.data-pagination-next:focus-visible,
.data-pagination-input:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: 2px;
}
.data-pagination-previous:disabled,
.data-pagination-next:disabled,
.data-pagination-input:disabled {
    cursor: default;
    opacity: .5;
}
.data-pagination-page {
    gap: 8px;
    margin: 0;
    font-weight: inherit;
}
.data-pagination-input {
    width: 64px;
    height: calc(var(--f-control-height) - 10px);
    padding: 0 8px;
    color: var(--f-text);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius-control) - 3px);
    font: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
}
.data-pagination-input::-webkit-inner-spin-button,
.data-pagination-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}
.data-pagination-total {
    font-weight: inherit;
}
.visually-hidden {
    width: 1px;
    height: 1px;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
@media (max-width: 520px) {.data-pagination {
    gap: 8px;
}
.data-pagination-controls {
    column-gap: 6px;
}
.data-pagination-page {
    gap: 6px;
}
}

.data-pagination-previous:active:not(:disabled),
.data-pagination-next:active:not(:disabled) {
    color: var(--f-text);
    background: var(--f-target-click);
}



.spreadsheet-scroll {
background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 0;
}

.editing-grid-table {
font-size: 17px;
    line-height: 24px;
}

.editing-grid-table th,
.editing-grid-table td {
border-bottom: 1px solid var(--f-border);
    border-right: 1px solid var(--f-border);
    text-align: left;
    background: var(--f-surface);
}

.editing-grid-table th {
padding: 8px 12px;
    background: var(--f-border);
    font-weight: 700;
    color: var(--f-text);
}

.editing-grid-table td {
padding: 0;
}

.editing-grid-table td:last-child,
.editing-grid-table th:last-child {
border-right: 0;
}

.editing-grid-table .identity-column {
box-shadow: 1px 0 0 var(--f-border);
}

.editing-grid-table tr.is-dirty .identity-column {
    box-shadow: inset 3px 0 0 var(--f-accent), 1px 0 0 var(--f-border);
}

.editing-grid-table td.is-changed {
background: var(--f-target-preview, var(--f-preview-light));
}

.editing-grid-table td.is-selected-cell {
background: var(--f-primary);
    color: var(--f-surface);
}

.editing-grid-table td.is-selected-cell :is(.spreadsheet-cell-display, .masked-input-display .is-entered, input:not(.masked-input-control):not(:disabled), select:not(:disabled), textarea:not(:disabled), a) {
    color: var(--f-surface);
    caret-color: var(--f-surface);
}
.editing-grid-table td.is-selected-cell .masked-input-control {
    caret-color: var(--f-surface);
}
.editing-grid-table td.is-selected-cell .cell-error {
    color: var(--f-surface);
}
.editing-grid-table td.is-selected-cell.has-error {
    box-shadow: inset 0 0 0 2px var(--f-danger);
}

.editing-grid-table td.is-active-cell {
outline: 2px solid var(--f-accent);
    outline-offset: -2px;
}

.editing-grid-table td.is-editing-cell {
outline: 2px solid var(--f-accent);
    outline-offset: -2px;
}

.editing-grid-table td.has-error {
box-shadow: inset 0 0 0 2px var(--f-danger);
}

.spreadsheet-cell-surface {
padding: 0 10px;
}

.spreadsheet-cell-surface.has-options {
padding-right: 32px;
}

.spreadsheet-cell-display {
line-height: 24px;
}

.cell-select-marker {
color: var(--f-accent);
}

.cell-select-marker svg {
fill: currentColor;
}

.editing-grid-table input,
.editing-grid-table select,
.editing-grid-table textarea,
.editing-grid-table .masked-input {
background: transparent;
    color: var(--f-text);
    font: inherit;
}

.editing-grid-table input,
.editing-grid-table select,
.editing-grid-table textarea,
.editing-grid-table .masked-input-control {
margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--f-text);
    font: inherit;
}

.editing-grid-table select {
appearance: none;
    padding-right: 32px;
}

/* Selection inverts the cell editor, not the independently surfaced picker. */
.editing-grid-table select :is(option, optgroup) {
    color: var(--f-text);
    background: var(--f-surface);
}

.editing-grid-table select option:checked {
    color: var(--f-text);
    background: var(--f-surface);
}

@supports (appearance: base-select) {
    .editing-grid-table select::picker(select) {
        --f-target-preview: var(--f-surface-preview);
        --f-target-click: var(--f-surface-click);
        color: var(--f-text);
        background: var(--f-surface);
    }

    .editing-grid-table select option:is(:hover, :focus-visible) {
        color: var(--f-text);
        background: var(--f-surface-preview);
    }

    .editing-grid-table select option:active {
        color: var(--f-text);
        background: var(--f-surface-click);
    }
}

.editing-grid-table .masked-input {
--masked-input-inline-padding: 10px;
    border: 0;
    border-radius: 0;
}

.editing-grid-table .masked-input-control {
background-color: transparent !important;
}

.editing-grid-table textarea {
padding-block: 0;
    line-height: 24px;
}

.editing-grid-table input:disabled,
.editing-grid-table select:disabled,
.editing-grid-table textarea:disabled {
color: var(--f-muted);
}

.editing-grid-table .read-only-cell {
color: var(--f-muted);
}

.editing-grid-table .read-only-cell a {
line-height: 24px;
    padding: 0 10px;
}

.editing-grid-table .cell-error {
padding: 6px 10px;
    color: var(--f-danger);
    font-size: 17px;
}

.editing-grid-table .empty-grid {
padding: 24px;
}

.editing-grid-table .data-column-resizer::after {
background: var(--f-accent);
}

.editing-grid-table .data-column-resizer:focus-visible {
outline: 2px solid var(--f-accent);
    outline-offset: -2px;
}

.editing-grid-table td:active {
    color: var(--f-text);
    background: var(--f-target-click);
}
.editing-grid-table td.is-selected-cell:active {
    color: var(--f-surface);
    background: var(--f-primary-click);
}



.field-control .validation-message {
    width: max-content;
    max-width: min(360px, calc(100vw - 48px));
    padding: 9px 12px;
    color: var(--f-surface);
    background: var(--f-danger);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgb(from var(--f-primary) r g b / 22%);
    font-size: 17px;
    font-weight: 650;
}
@media (max-width: 760px) {
.field-control .validation-message {
    width: 100%;
    max-width: none;
    margin-top: 8px;
}
}



.interaction-lock {
    padding: 1.5rem;
    background: rgb(from var(--f-primary) r g b / 45%);
}
.interaction-message {
    max-width: 32rem;
    padding: 2rem;
    border-radius: 1rem;
    background: var(--f-surface);
    color: var(--f-text);
}



.masked-input {
    width: 100%;
    background: var(--f-surface);
    border-radius: var(--f-radius-control);
}
.masked-input-display,
.masked-input-control {
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
}
.masked-input-display {
    font-weight: 400;
    padding: 0 var(--masked-input-inline-padding, 16px);
}
.masked-input-display .is-entered {
    color: var(--f-text);
}
.masked-input-display .is-mask {
    color: var(--f-muted);
}
.masked-input-control {
    caret-color: var(--f-text);
}
.masked-input-control::selection {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}



.notice-trigger {
    width: max-content;
    max-width: 100%;
    margin: 0;
    font-size: var(--f-body-size, 17px);
    --trigger-ink: var(--f-info-text);
    --trigger-fill: var(--f-surface);
    --trigger-border: var(--f-border);
}
.notice-trigger-button {
    color: var(--trigger-ink);
    background: var(--trigger-fill);
    border: 1px solid var(--trigger-border);
    cursor: help;
}
.notice-trigger.notice-error {
    --trigger-ink: var(--f-surface);
    --trigger-fill: var(--f-danger);
    --trigger-border: var(--f-danger);
}
.notice-trigger.notice-warning {
    --trigger-ink: var(--f-warning-ink);
    --trigger-fill: var(--f-warning-background);
    --trigger-border: var(--f-warning-background);
}
.notice-trigger.notice-success {
    --trigger-ink: var(--f-surface);
    --trigger-fill: var(--f-primary);
    --trigger-border: var(--f-primary);
}
.notice-trigger-button:hover,
.notice-trigger-button:focus-visible {
    color: var(--trigger-ink);
    background: var(--trigger-fill);
}
.notice-trigger-button:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: 3px;
}
.notice-trigger-content {
    width: max-content;
    max-width: min(620px, calc(100vw - 112px));
    padding: 17px 19px;
    color: var(--f-text);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgb(from var(--f-primary) r g b / 22%);
    clip-path: inset(100%);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 120ms ease, transform 120ms ease;
}
.notice-trigger:hover .notice-trigger-content,
.notice-trigger:focus-within .notice-trigger-content {
    clip-path: none;
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 760px) {
.notice-trigger-content {
    max-width: calc(100vw - 86px);
}
}
@media (prefers-reduced-motion: reduce) {
.notice-trigger-content {
    transition: none;
}
}

.notice-trigger-button:active {
    color: var(--trigger-ink);
    background: var(--trigger-fill);
}



.primary-navigation-tooltip {
    width: max-content;
    max-width: min(22rem, calc(100vw - 90px));
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-small, 4px);
    color: var(--f-text);
    background: var(--f-surface);
    box-shadow: var(--f-shadow-card);
    font: 400 17px/1.4 "Segoe UI", sans-serif;
    text-align: left;
}
.primary-navigation-tooltip::before {
    width: 8px;
    height: 100%;
}
@media (prefers-reduced-motion: reduce) {.primary-navigation-tooltip {
    animation: none;
    transition: none;
}
}



.reference-panel {
    gap: 8px;
}
.reference-options {
    gap: 2px;
}
.reference-empty {
    padding: 10px;
    color: var(--f-muted);
    font-size: 17px;
}

.selection-dropdown-surface .selection-trigger {
    width: 100%;
    gap: 16px;
    padding: 0 16px;
    color: var(--f-text);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-control);
    font: inherit;
    font-size: 17px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.selection-dropdown-surface :is(.selection-trigger, .selection-search, .selection-option, .selection-create):focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: 3px;
}
.selection-dropdown-surface .selection-trigger:disabled {
    color: var(--f-muted);
    background: var(--f-display-board);
    cursor: not-allowed;
}
.selection-dropdown-surface .selection-search {
    width: 0;
    min-width: 100%;
    max-width: 100%;
    height: var(--f-control-height);
    padding: 0 16px;
    color: var(--f-text);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-control);
    font: inherit;
    font-size: 17px;
}
.selection-dropdown-surface :is(.selection-option, .selection-create) {
    width: 100%;
    padding: 6px 10px;
    color: var(--f-text);
    background: transparent;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    text-align: left;
    justify-content: left;
    cursor: pointer;
}
.selection-dropdown-surface :is(.selection-option, .selection-create):hover:not(:disabled):not(:has(input:disabled)) {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}
.selection-dropdown-surface .selection-option[aria-selected="true"],
.selection-dropdown-surface .selection-option:has(input:checked) {
    color: var(--f-surface);
    background: var(--f-primary);
}
.selection-dropdown-surface .selection-create {
    color: var(--f-accent);
    font-weight: 700;
    border-top: 1px solid var(--f-border);
    border-radius: 0 0 12px 12px;
}
.selection-dropdown-surface .selection-create:disabled {
    color: var(--f-muted);
    cursor: not-allowed;
}
.selection-dropdown-surface :is(.selection-option:disabled, .selection-option:has(input:disabled)) {
    color: var(--f-muted);
    cursor: not-allowed;
}
.selection-dropdown-surface label.selection-option {
    gap: 10px;
}
.selection-dropdown-surface label.selection-option:focus-within:not(:has(input:disabled)) {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}
.selection-dropdown-surface span.selection-option {
    cursor: default;
}

.selection-dropdown-surface :is(.selection-option, .selection-create):active:not(:disabled):not(:has(input:disabled)) {
    color: var(--f-text);
    background: var(--f-target-click);
}

.selection-dropdown-surface .selection-trigger:hover:not(:disabled) {
    background: var(--f-target-preview);
}
.selection-dropdown-surface .selection-trigger:active:not(:disabled) {
    background: var(--f-target-click);
}
.selection-dropdown-surface .selection-option:is([aria-selected="true"], :has(input:checked)):not(:active):not(:disabled):not(:has(input:disabled)) {
    color: var(--f-surface);
    background: var(--f-primary);
}
.selection-dropdown-surface .selection-option:is([aria-selected="true"], :has(input:checked)):active:not(:disabled):not(:has(input:disabled)) {
    color: var(--f-surface);
    background: var(--f-primary-click);
}



.search-autocomplete {
    width: 100%;
}
.search-autocomplete > input {
    width: 100%;
}
.search-autocomplete-options {
    gap: 4px;
}
.search-autocomplete-option,
.search-autocomplete-empty {
    padding: 6px 10px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    font-weight: 400;
    text-align: left;
    justify-content: left;
}
.search-autocomplete-option {
    cursor: pointer;
}
.search-autocomplete-option:hover {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
    outline: none;
}
.search-autocomplete-option.is-active {
    color: var(--f-surface);
    background: var(--f-primary);
}
.search-autocomplete-empty {
    color: var(--f-muted);
}

.search-autocomplete-option:active {
    color: var(--f-text);
    background: var(--f-target-click);
}

.search-autocomplete-option.is-active:is(:hover, :focus-visible) {
    color: var(--f-surface);
    background: var(--f-primary);
}
.search-autocomplete-option.is-active:active {
    color: var(--f-surface);
    background: var(--f-primary-click);
}



.service-menu {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-inline: 8px;
    color: var(--f-chrome-ink, var(--f-surface));
}
.service-menu-trigger {
    height: 48px;
    gap: 9px;
    padding: 0 16px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--f-radius-control);
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 400;
}
.service-menu:hover > .service-menu-trigger,
.service-menu-trigger:focus-visible,
.service-menu:has(.service-menu-view:focus-within) > .service-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-preview-dark);
}
.service-menu-trigger:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: -3px;
}
.service-menu-view {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.service-menu:hover > .service-menu-view,
.service-menu-trigger:focus-visible + .service-menu-view,
.service-menu-view:focus-within {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.service-menu-view nav {
    gap: 4px;
}
.service-menu-view a {
    padding: 10px 12px;
    color: var(--f-text);
    border-radius: var(--f-radius-small);
    text-decoration: none;
}
.service-menu-view a strong {
    font-size: 17px;
}
.service-menu-view a:hover {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}
.service-menu-view a:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: -2px;
}
@media (max-width: 760px) {.service-menu-trigger {
    padding-inline: 10px;
    font-size: 17px;
}
}
@media (hover: none) {.service-menu:focus-within > .service-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-preview-dark);
}
.service-menu:focus-within > .service-menu-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
}
@media (prefers-reduced-motion: reduce) {.service-menu-view {
    transition: none;
}
}

.service-menu:has(> .service-menu-trigger:active:not(:disabled)) > .service-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-click-dark);
}

.service-menu-view a:active {
    color: var(--f-text);
    background: var(--f-target-click);
}



.shell-header {
    width: 100%;
    height: var(--f-topbar-height, 68px);
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-chrome, var(--f-primary));
    border-bottom: 1px solid var(--f-border);
}
.shell-header-brand {
    align-self: stretch;
    max-width: min(58vw, 560px);
    color: inherit;
    text-decoration: none;
}
.shell-header-logo {
    align-self: stretch;
    width: 76px;
    padding: 8px;
}
.shell-header-logo img {
    width: 48px;
    height: 48px;
    max-width: 100%;
}
.shell-header-title {
    gap: 7px;
    padding: 0 22px 0 10px;
    font-size: 17px;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
}
.shell-header-title strong,
.shell-header-context {
    text-overflow: ellipsis;
}
.shell-header-title strong {
    font-weight: 760;
}
.shell-header-context {
    color: var(--shell-context-color, var(--f-chrome-ink, var(--f-surface)));
    font-weight: 650;
}
.shell-header-actions {
    margin-left: auto;
    padding-right: 10px;
}
.shell-header-identity {
    max-width: 290px;
    height: 48px;
    gap: 10px;
    padding: 0 15px;
    color: var(--f-chrome-ink, var(--f-surface));
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-decoration: none;
}
.shell-header-identity strong {
    max-width: 190px;
    font-size: 17px;
    text-overflow: ellipsis;
}
a.shell-header-identity:hover {
    background: var(--f-preview-dark);
}
a.shell-header-identity:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: -3px;
}
.shell-header-actions .shell-header-action {
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--f-chrome-ink, var(--f-surface));
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
}
.shell-header-actions .shell-header-action:hover {
    background: var(--f-preview-dark);
}
.shell-header-actions .shell-header-action:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: -3px;
}
.shell-header-actions .shell-header-action[data-tooltip]::after {
    padding: 8px 12px;
    color: var(--f-text);
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    font-size: 17px;
    font-weight: 400;
    opacity: 0;
}
.shell-header-actions .shell-header-action[data-tooltip]:hover::after,
.shell-header-actions .shell-header-action[data-tooltip]:focus-visible::after {
    opacity: 1;
}
.shell-header-actions .shell-header-text-action {
    height: 48px;
    padding: 0 14px;
    color: var(--f-chrome-ink, var(--f-surface));
    background: transparent;
    border: 0;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 650;
    text-decoration: none;
}
.shell-header-actions .shell-header-text-action:hover {
    background: var(--f-preview-dark);
}
.shell-header-actions .shell-header-text-action:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: -3px;
}
@media (max-width: 760px) {.shell-header-logo {
    width: 60px;
    padding: 7px;
}
.shell-header-logo img {
    width: 43px;
    height: 43px;
}
.shell-header-title {
    max-width: 190px;
    padding-inline: 7px 12px;
}
.shell-header-actions {
    padding-right: 4px;
}
.shell-header-identity {
    max-width: 54px;
    padding-inline: 10px;
}
.shell-header-identity strong {
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
}
.shell-header-actions .shell-header-text-action {
    padding-inline: 10px;
}
}

a.shell-header-identity:active {
    background: var(--f-click-dark);
}

.shell-header-actions .shell-header-action:active {
    background: var(--f-click-dark);
}

.shell-header-actions .shell-header-text-action:active {
    background: var(--f-click-dark);
}

a.shell-header-brand:hover {
    background: var(--f-preview-dark);
}
a.shell-header-brand:focus-visible {
    outline: 3px solid var(--f-accent);
    outline-offset: -3px;
}
a.shell-header-brand:active {
    background: var(--f-click-dark);
}



.masked-input {
    width: 100%;
    background: var(--f-surface);
    border-radius: var(--f-radius-control);
}
.masked-input-display,
.masked-input-control {
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
}
.masked-input-display {
    padding: 0 var(--masked-input-inline-padding, 16px);
    font-weight: 400;
}
.masked-input-display .is-entered {
    color: var(--f-text);
}
.masked-input-display .is-mask {
    color: var(--f-muted);
}
.masked-input-control {
    caret-color: var(--f-text);
}
.masked-input-control::selection {
    background: var(--f-target-preview, var(--f-preview-light));
}



.system-menu {
    align-self: stretch;
    color: var(--f-chrome-ink, var(--f-surface));
}
.system-menu-trigger {
    height: 100%;
    gap: 9px;
    padding: 0 16px;
    color: inherit;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--f-border);
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 400;
}
.system-menu:hover > .system-menu-trigger,
.system-menu-trigger:focus-visible,
.system-menu:has(.system-menu-view:focus-within) > .system-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-preview-dark);
}
.system-menu-trigger:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: -3px;
}
.system-menu-view {
    --f-target-preview: var(--f-surface-preview);
    --f-target-click: var(--f-surface-click);
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgb(from var(--f-primary) r g b / 18%);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.system-menu:hover > .system-menu-view,
.system-menu-trigger:focus-visible + .system-menu-view,
.system-menu-view:focus-within {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.system-menu-view nav {
    gap: 4px;
}
.system-menu-view a {
    padding: 10px 12px;
    color: var(--f-text);
    border-radius: var(--f-radius-small);
    text-decoration: none;
}
.system-menu-view a strong {
    font-size: 17px;
}
.system-menu-view a:hover {
    color: var(--f-text);
    background: var(--f-target-preview, var(--f-preview-light));
}
.system-menu-view a.active {
    color: var(--f-surface);
    background: var(--f-primary);
}
.system-menu-view a:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: -2px;
}
@media (max-width: 760px) {.system-menu-trigger {
    padding-inline: 10px;
    font-size: 17px;
}
}
@media (hover: none) {.system-menu:focus-within > .system-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-preview-dark);
}
.system-menu:focus-within > .system-menu-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
}
@media (prefers-reduced-motion: reduce) {.system-menu-view {
    transition: none;
}
}

.system-menu:has(> .system-menu-trigger:active:not(:disabled)) > .system-menu-trigger {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-click-dark);
}

.system-menu-view a:active {
    color: var(--f-text);
    background: var(--f-target-click);
}

.system-menu-view a.active:is(:hover, :focus-visible) {
    color: var(--f-surface);
    background: var(--f-primary);
}
.system-menu-view a.active:active {
    color: var(--f-surface);
    background: var(--f-primary-click);
}





/* Reusable surface layout and content flow. */
.navigation-surface {

    color: var(--f-text);
    background: var(--f-canvas);
    color-scheme: inherit;
    accent-color: var(--f-accent);
}

.navigation-surface .skip-link {
padding: 10px 14px;
    color: var(--f-surface);
    background: var(--f-accent);
    border-radius: var(--f-radius-small);
    font-weight: 750;
}

.navigation-surface .primary-rail {
color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-chrome, var(--f-primary));
    border-right: 1px solid var(--f-border);
    scrollbar-width: none;
}

.navigation-surface .primary-rail nav {
gap: 8px;
    padding: 14px 10px;
}

.navigation-surface .primary-rail  .primary-nav-item {
color: var(--f-chrome-ink, var(--f-surface));
    border-radius: 18px;
    text-decoration: none;
}

.navigation-surface .primary-rail  .primary-nav-item:hover {
color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-preview-dark);
}

.navigation-surface .primary-rail  .primary-nav-item.is-active {
color: var(--f-surface);
    background: var(--f-accent);
    box-shadow: inset 0 0 0 2px var(--f-accent);
}

.navigation-surface .primary-rail  .primary-nav-item.is-active::before {
background: var(--f-accent);
    border-radius: 0 4px 4px 0;
}

.navigation-surface .primary-rail  .primary-nav-item.is-disabled {
color: var(--f-muted);
}

.navigation-surface .primary-rail  .primary-nav-item:focus-visible {
outline: 3px solid var(--f-accent);
    outline-offset: -3px;
}

.navigation-surface .primary-rail  .primary-nav-item.is-disabled:hover {
color: var(--f-muted);
    background: transparent;
}

.navigation-surface .secondary-rail {
color: var(--f-text);
    background: var(--f-display-board);
    border-right: 1px solid var(--f-border);
    scrollbar-width: none;
}

.navigation-surface .secondary-rail nav {
gap: 6px;
    padding: 18px;
}

.navigation-surface .application-stage {
background: var(--f-canvas);
    scrollbar-gutter: stable;
}

.navigation-surface  .page-root {
color: var(--f-text);
    background: var(--f-canvas);
    font-size: 17px;
    line-height: 1.55;
}

.navigation-surface  .page-root > .notice-trigger {
margin: 24px var(--f-content-gutter) 0;
}

.navigation-surface  .page-module {
padding: clamp(44px, 7vw, 84px) var(--f-content-gutter) 0;
    background: transparent;
    border: 0;
}

.navigation-surface  .page-root > .page-module:last-of-type {
padding-bottom: clamp(64px, 9vw, 120px);
}

.navigation-surface  .section-heading {
gap: 24px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
}

.navigation-surface  .section-heading h2 {
margin: 0;
    color: var(--f-text);
    font-size: var(--f-type-h2, 28px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.navigation-surface  .section-heading p,
.navigation-surface  .section-heading > span {
margin: 10px 0 0;
    color: var(--f-muted);
    font-size: 17px;
}

@supports (appearance: base-select) {.navigation-surface  select:not(.f-select)::picker(select) {
    appearance: base-select;
            color: var(--f-text);
            background: var(--f-surface);
            border: 1px solid var(--f-border);
            border-radius: 14px;
            box-shadow: 0 12px 28px rgb(from var(--f-primary) r g b / 15%);
    }

    .navigation-surface  select:not(.f-select) option {
    padding: 10px 13px;
            font-size: 17px;
    }
}

.navigation-surface .visually-hidden {
padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
}

.navigation-surface #blazor-error-ui {
padding: 11px 52px 11px 16px;
    color: var(--f-surface);
    background: var(--f-danger);
    border-top: 1px solid var(--f-border);
}

.navigation-surface #blazor-error-ui .reload {
margin-left: 10px;
    color: inherit;
    font-weight: 700;
}

.navigation-surface #blazor-error-ui .dismiss {
color: var(--f-surface);
    background: transparent;
    border: 0;
}

@media (max-width: 760px) {.navigation-surface .primary-rail nav {
    gap: 6px;
            padding: 10px 6px;
    }

    .navigation-surface .primary-rail  .primary-nav-item {
    border-radius: 14px;
    }

    .navigation-surface .secondary-rail {
    border-right: 0;
            border-bottom: 1px solid var(--f-border);
    }

    .navigation-surface .secondary-rail nav {
    gap: 4px;
            padding: 8px 12px;
    }

    .navigation-surface  .page-root {
    font-size: 17px;
    }

    .navigation-surface  .page-module {
    padding-top: 52px;
    }

    .navigation-surface  .section-heading {
    margin-bottom: 20px;
    }
}

@media (max-width: 520px) {.navigation-surface  .page-module {
    padding-top: 44px;
    }
}

.navigation-surface {
    --f-topbar-height: 68px;
    --f-primary-width: 76px;
    --f-secondary-width: 232px;
    --f-content-width: 1180px;
    --f-page-gutter: 24px;
}

.navigation-surface .primary-rail  .primary-nav-item {
width: 55px;
    height: 55px;
}

.navigation-surface .primary-rail  .primary-nav-item.is-active::before {
width: 4px;
    height: 28px;
}

@media (max-width: 980px) {.navigation-surface {
    --f-page-gutter: 24px;
    }
}

@media (max-width: 760px) {.navigation-surface {
    --f-topbar-height: 60px;
            --f-primary-width: 58px;
            --f-page-gutter: 20px;
    }

    .navigation-surface .primary-rail  .primary-nav-item {
    width: 45px;
            height: 48px;
    }

    .navigation-surface .primary-rail  .primary-nav-item.is-active::before {
    height: 24px;
    }

}

.navigation-surface .primary-rail  .primary-nav-item:active {
    color: var(--f-chrome-ink, var(--f-surface));
    background: var(--f-click-dark);
}

.navigation-surface .primary-rail  .primary-nav-item.is-disabled:active {
    color: var(--f-muted);
    background: transparent;
}

.navigation-surface .primary-rail .primary-nav-item.is-active:is(:hover, :focus-visible) {
    color: var(--f-surface);
    background: var(--f-accent);
}
.navigation-surface .primary-rail .primary-nav-item.is-active:active {
    color: var(--f-surface);
    background: var(--f-accent-click);
}

/* Native validated values retain this surface's established Accent role. */
.navigation-surface .valid.modified { border-color:var(--f-accent) !important; }



/* Reusable surface layout and content flow. */
.content-surface {

    color: var(--f-text);
    background: var(--f-canvas);
    color-scheme: inherit;
    accent-color: var(--f-accent);
}

.content-surface .skip-link {
padding: 10px 14px;
    color: var(--f-surface);
    background: var(--f-accent);
    border-radius: var(--f-radius-small);
    font-weight: 750;
}

.content-surface .content-stage {
background: var(--f-canvas);
    scrollbar-gutter: stable;
}

.content-surface  .page-root {
color: var(--f-text);
    background: var(--f-canvas);
    font-size: 17px;
    line-height: 1.55;
}

.content-surface  .page-module {
padding: clamp(44px, 7vw, 84px) var(--f-content-gutter) 0;
    background: transparent;
    border: 0;
}

.content-surface  .page-root > .page-module:last-of-type {
padding-bottom: clamp(64px, 9vw, 120px);
}

.content-surface  .section-heading {
gap: 24px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
}

.content-surface  .section-heading h2 {
margin: 0;
    color: var(--f-text);
    font-size: var(--f-type-h2, 28px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.content-surface  .section-heading > span,
.content-surface  .page-module > p {
color: var(--f-muted);
    font-size: 17px;
}

.content-surface  .validation-message,
.content-surface  .validation-errors {
font-size: 17px;
    border-radius: 10px;
}

.content-surface {
    --f-topbar-height: 68px;
    --f-content-width: 1180px;
    --f-page-gutter: 24px;
}

@media (max-width: 760px) {.content-surface {
    --f-topbar-height: 60px;
            --f-page-gutter: 20px;
    }
}



.masked-input-display {
    display: flex;
}
.masked-input-control,
.editing-grid-table .masked-input-control {
    color: transparent !important;
    background-color: transparent !important;
    caret-color: var(--f-text);
}
.disclosure-section > summary {
    display: flex;
}
.disclosure-section > summary::-webkit-details-marker {
    display: none;
}



.f-display-board { --f-display-board-padding:24px; padding:0; border-radius:16px; background-color:var(--f-display-board); color:var(--f-display-board-ink); }
.f-display-board + .f-display-board { margin-block-start:24px; }
.f-display-board + :not(.f-display-board) { margin-block-start:var(--f-space-6,24px); }
.f-display-board-dotted,.f-presentation-dotted { background-image:radial-gradient(circle,var(--f-border) 1px,transparent 1.2px); background-size:18px 18px; }
.f-display-board-content { box-sizing:border-box; padding:var(--f-display-board-padding); min-height:calc(120px + 2 * var(--f-display-board-padding)); gap:16px; }
.f-display-board-content:has(> .f-code-block) { align-items:flex-start; justify-content:flex-start; min-height:0; }
.f-display-board-content > .f-code-block { width:100%; padding:0; overflow:visible; border-radius:0; background:transparent; color:inherit; }
.f-display-board > .f-display-board-copy { inset-block-start:16px; inset-inline-end:16px; max-width:calc(100% - 32px); }
.f-display-board-copyable { min-block-size:80px; }
.f-display-board-copyable > .f-display-board-viewport > .f-display-board-content > .f-code-block { padding-inline-end:56px; }
.f-display-board-error { color:var(--f-danger); }
@media(max-width:520px) { .f-display-board { --f-display-board-padding:16px; } }



.f-split-button:not(.f-secondary-row) > :is(.f-split-button-primary,.f-split-button-secondary),
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .f-split-button-secondary {
    min-height:48px; padding:0 14px; border:1px solid var(--f-border);
    border-radius:var(--f-radius-control,12px); background:var(--f-surface); color:var(--f-text);
    font:650 var(--f-type-body,17px)/1.55 var(--f-font,"Segoe UI",sans-serif); text-decoration:none; cursor:pointer;
}
.f-split-button:not(.f-secondary-row) > .f-split-button-secondary,
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .f-split-button-secondary { padding:0 10px; }
.f-split-button:not(.f-secondary-row) > :is(.f-split-button-primary,.f-split-button-secondary):hover:not(:disabled):not([aria-disabled=true]),
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .f-split-button-secondary:hover { background:var(--f-row-hover); }
.f-split-button:not(.f-secondary-row) > :is(.f-split-button-primary,.f-split-button-secondary):active:not(:disabled):not([aria-disabled=true]),
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .f-split-button-secondary:active { background:var(--f-target-click); }
.f-split-button:not(.f-secondary-row) > .is-selected,
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .is-selected { background:var(--f-primary); color:var(--f-surface); }
.f-split-button:not(.f-secondary-row):has(> .is-selected):hover > .is-selected:not(:disabled):not([aria-disabled=true]) { background:var(--f-primary); color:var(--f-surface); }
.f-split-button:not(.f-secondary-row):has(> .is-selected) > .is-selected:active:not(:disabled):not([aria-disabled=true]) { background:var(--f-primary-click); color:var(--f-surface); }
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .is-selected:hover { background:var(--f-primary); color:var(--f-surface); }
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .is-selected:active { background:var(--f-primary-click); color:var(--f-surface); }
.f-split-button:not(.f-secondary-row) > :is(.f-split-button-primary,.f-split-button-secondary):is(:disabled,[aria-disabled=true]) { opacity:.55; cursor:not-allowed; }
.f-split-button > :is(.f-split-button-primary,.f-split-button-secondary):focus-visible,
.f-split-button > .f-split-button-menu > .f-split-button-secondary:focus-visible { outline:3px solid var(--f-accent); outline-offset:-3px; }
.f-split-button:not(.f-secondary-row) > .f-split-button-primary { border-top-right-radius:3px; border-bottom-right-radius:3px; }
.f-split-button:not(.f-secondary-row) > .f-split-button-secondary,
.f-split-button:not(.f-secondary-row) > .f-split-button-menu > .f-split-button-secondary { border-top-left-radius:3px; border-bottom-left-radius:3px; }
.f-split-button.f-secondary-row > .f-split-button-primary { border-radius:var(--f-radius-control,12px) 3px 3px var(--f-radius-control,12px); }
.f-split-button.f-secondary-row > .f-split-button-secondary { border-radius:3px var(--f-radius-control,12px) var(--f-radius-control,12px) 3px; }



/* Action menus and selection menus share the same popup and option surface. */
.f-dropdown-trigger,.selection-dropdown-surface .selection-trigger { box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--f-control-height,48px); padding:0 16px; border:1px solid var(--f-border); border-radius:12px; color:var(--f-text); background:var(--f-surface); font:inherit; font-weight:400; list-style:none; cursor:pointer; }
.f-dropdown-trigger::-webkit-details-marker { display:none; }
.f-select,.f-dropdown-trigger,.selection-dropdown-surface .selection-trigger { --f-target-preview:var(--f-surface-preview); --f-target-click:var(--f-surface-click); }
.f-select:hover:not(:disabled),.f-dropdown-trigger:hover,details[open] > .f-dropdown-trigger { color:var(--f-text); background:var(--f-target-preview); }
.f-select:active:not(:disabled),.f-dropdown-trigger:active { color:var(--f-text); background:var(--f-target-click); }
.f-dropdown-trigger:focus-visible { outline:3px solid var(--f-accent); outline-offset:3px; }
.f-dropdown-panel,.selection-dropdown-surface .selection-panel,.search-autocomplete-options,.service-menu-view { --f-target-preview:var(--f-surface-preview); --f-target-click:var(--f-surface-click); padding:6px; border:1px solid var(--f-border); border-radius:16px; color:var(--f-text); background:var(--f-surface); box-shadow:var(--f-shadow-popup); }
/* Keep each primitive's layout, keyboard state, filtering and selection semantics. */
:is(.f-dropdown-panel .f-dropdown-item,.selection-dropdown-surface .selection-option,.search-autocomplete-option,.service-menu-view a) { box-sizing:border-box; min-height:40px; padding:6px 10px; border:0; border-radius:12px; }
.f-dropdown-panel .f-dropdown-item { box-sizing:border-box; display:flex; align-items:center; justify-content:left; text-align:left; gap:12px; min-height:40px; padding:6px 10px; border:0; border-radius:12px; color:var(--f-text); background:transparent; cursor:pointer; }
.f-dropdown-panel .f-dropdown-item:hover:not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)),.f-dropdown-panel .f-dropdown-item:focus-visible:not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)),.f-dropdown-panel .f-dropdown-item:has(:focus-visible):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)) { background:var(--f-target-preview); }
.f-dropdown-panel .f-dropdown-item.is-selected { color:var(--f-text); background:transparent; }
.f-dropdown-panel .f-dropdown-item.is-selected:hover:not(:active):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)) { background:var(--f-target-preview); }
.f-dropdown-panel .f-menu-danger { color:var(--f-danger); }
.f-dropdown-panel .f-dropdown-item:disabled,.f-dropdown-panel .f-dropdown-item[aria-disabled="true"],.f-dropdown-panel .f-dropdown-item:has(input:disabled) { opacity:.5; cursor:not-allowed; }

.f-dropdown-panel .f-dropdown-item:active:not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)) { color:var(--f-text); background:var(--f-target-click); }

/* Destructive options share the same red feedback as Danger buttons and cells. */
.f-menu-panel .f-menu-danger:is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]) { color:var(--f-surface-light); background:var(--f-preview-danger); }
.f-menu-panel .f-menu-danger:active:not(:disabled):not([aria-disabled="true"]) { color:var(--f-surface-light); background:var(--f-click-danger); }

/* Native SelectBox pickers use the same geometry and colors as menu panels. */
@supports (appearance:base-select) {
    /* A grid keeps its dense borderless editor and separate decorative marker. */
    .editing-grid-table .f-select,.editing-grid-table .f-select::picker(select) { appearance:base-select; }
    .editing-grid-table .f-select::picker-icon { display:none; }
    .f-select::picker(select) { --f-target-preview:var(--f-surface-preview); --f-target-click:var(--f-surface-click); padding:6px; border:1px solid var(--f-border); border-radius:16px; color:var(--f-text); background:var(--f-surface); box-shadow:var(--f-shadow-popup); font:400 17px/1.55 var(--f-font,"Segoe UI",sans-serif); }
    .f-select option { font:400 17px/1.55 var(--f-font,"Segoe UI",sans-serif); border:0; border-radius:12px; color:var(--f-text); background:transparent; }
    /* The native selection marker shares Checkbox geometry and paint without a nested input. */
    .f-select option::checkmark { color:var(--f-accent-ink); background:var(--f-surface); border:1px solid var(--f-border); border-radius:var(--f-choice-radius,9px); font:800 17px/1 var(--f-font,"Segoe UI",sans-serif); }
    .f-select option:checked::checkmark { background:var(--f-primary); border-color:var(--f-border); }
    .f-select option:is(:hover,:focus-visible):not(:disabled) { background:var(--f-surface-preview); }
    .f-select option:active:not(:disabled) { color:var(--f-text); background:var(--f-surface-click); }
    .f-select option:disabled { opacity:.5; cursor:not-allowed; }
}

/* Enhanced menus remain top-layer surfaces even when their trigger no longer has hover/focus. */
[data-f-popup][data-f-enhanced="true"] > [data-f-popup-panel][data-f-open] {
    visibility:visible; pointer-events:auto; clip-path:none; opacity:1; transform:none;
}
[data-f-popup][data-f-enhanced="true"] > [data-f-popup-panel]:not([data-f-open]) { display:none; }

/* Floating action tiles own their own surfaces; the menu still owns viewport bounds and scrolling. */
.f-menu-panel.f-menu-panel-unframed { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }



.f-multi-select-panel { width:max-content; min-width:0; max-width:calc(100vw - 24px); max-height:min(420px,70dvh); }
.f-multi-select-panel label { color:var(--f-text); font-weight:400; overflow-wrap:anywhere; cursor:pointer; }
.f-multi-select-panel input[type=checkbox] { display:grid; place-content:center; appearance:none; width:var(--f-choice-size,28px); height:var(--f-choice-size,28px); flex:0 0 var(--f-choice-size,28px); margin:0; border:1px solid var(--f-border); border-radius:var(--f-choice-radius,9px); background:var(--f-surface); cursor:inherit; }
.f-multi-select-panel input[type=checkbox]:checked { border-color:var(--f-border); background:var(--f-primary); }
.f-multi-select-panel input[type=checkbox]:active:not(:disabled) { background:var(--f-target-click); }
.f-multi-select-panel input[type=checkbox]:checked:active:not(:disabled) { background:var(--f-primary-click); }
.f-multi-select-panel input[type=checkbox]:checked::after { content:''; display:block; width:6px; height:11px; margin:0; border-right:2px solid var(--f-accent-ink); border-bottom:2px solid var(--f-accent-ink); transform:rotate(45deg); }
.f-multi-select-panel input[type=checkbox]:disabled { opacity:.55; cursor:not-allowed; }



.f-navigation-choices { gap:24px; }
.f-navigation-choices-nav > .f-uniform-grid { margin-block:0; }
.f-navigation-choices-sidebar { gap:40px; }
.f-navigation-choices-sidebar > .f-navigation-choices-nav { padding:12px; border:1px solid var(--f-border); border-radius:var(--f-radius-panel); background:var(--f-surface); }
.f-navigation-choices-sidebar .f-navigation-choice-link { padding-inline:16px; }
.f-navigation-choices-sidebar .f-navigation-choice-panel { padding:24px; border:1px solid var(--f-border); border-radius:var(--f-radius-panel); background:var(--f-surface); color:var(--f-text); }
@media(max-width:760px) { .f-navigation-choices-sidebar { gap:24px; } }
/* A panel is already a section boundary; its direct Sections do not reserve another page-sized gap. */
.f-navigation-choice-panel > .f-section { padding-top:0; }
@media(max-width:760px) { .f-navigation-choices-sidebar.f-navigation-choices-fill-height { gap:16px; } }



.f-access-layout { padding:24px; color:var(--f-text); background-color:var(--f-surface); }
.f-access-layout-dotted { background-image:radial-gradient(circle,var(--f-border) 1px,transparent 1.2px); background-size:18px 18px; }
.f-access-layout-content { gap:24px; }
.f-access-layout-brand { display:grid; justify-items:center; gap:12px; }
.f-access-layout-brand > :is(.f-access-actions,.f-inline-actions) { justify-self:stretch; margin-block:0; }
@media(max-width:760px) { .f-access-layout { padding:16px; } .f-access-layout-content { gap:16px; } }
@media(max-height:520px) { .f-access-layout { padding-block:12px; } .f-access-layout-content { gap:12px; } }
/* Narrow pages reserve the actual floating preference-control row before identity. */
@media(max-width:760px) { .f-content-surface-has-floating-actions > .content-stage > .f-access-layout { padding-block-start:80px; } }



.f-uniform-grid,.f-form-actions {
    --f-uniform-cell-background:var(--f-surface);
    --f-uniform-cell-foreground:var(--f-text);
    --f-uniform-cell-interaction-foreground:var(--f-text);
    --f-uniform-cell-border:transparent;
    --f-uniform-cell-hover:var(--f-target-preview);
    --f-uniform-cell-click:var(--f-target-click);
    --f-uniform-cell-shadow:var(--f-shadow-control);
}
.f-uniform-grid {
    --f-grid-gap:1px;
    margin-block:24px;
    gap:var(--f-grid-gap);
    overflow:hidden;
    border:0;
    border-radius:var(--f-radius-emphasis,28px);
    background:transparent;
    box-shadow:none;
}
.f-uniform-grid-variant-filled-elevated,.f-uniform-variant-filled-elevated {
    --f-uniform-cell-background:var(--f-primary);
    --f-uniform-cell-foreground:var(--f-primary-ink);
    --f-uniform-cell-interaction-foreground:var(--f-primary-ink);
    --f-uniform-cell-border:transparent;
    --f-uniform-cell-hover:var(--f-primary-preview);
    --f-uniform-cell-click:var(--f-primary-click);
    --f-uniform-cell-shadow:var(--f-shadow-control);
    border:0;
    border-radius:var(--f-radius-panel,16px);
}
.f-uniform-grid-variant-danger,.f-uniform-variant-danger {
    --f-uniform-cell-background:var(--f-danger);
    --f-uniform-cell-foreground:var(--f-surface);
    --f-uniform-cell-interaction-foreground:var(--f-surface-light);
    --f-uniform-cell-border:transparent;
    --f-uniform-cell-hover:var(--f-preview-danger);
    --f-uniform-cell-click:var(--f-click-danger);
    --f-uniform-cell-shadow:none;
    border:0;
    border-radius:var(--f-radius-panel,16px);
}
.f-uniform-grid-variant-elevated,.f-uniform-variant-elevated {
    --f-uniform-cell-background:var(--f-surface);
    --f-uniform-cell-foreground:var(--f-text);
    --f-uniform-cell-interaction-foreground:var(--f-text);
    --f-uniform-cell-border:transparent;
    --f-uniform-cell-hover:var(--f-target-preview);
    --f-uniform-cell-click:var(--f-target-click);
    --f-uniform-cell-shadow:var(--f-shadow-control);
}
/* Follow occupied cells instead of shadowing the empty rectangular grid footprint. */
.f-uniform-grid-variant-elevated,.f-uniform-grid-variant-filled-elevated,.f-form-actions { filter:drop-shadow(var(--f-shadow-control)); }
.f-uniform-cell,.f-button.f-uniform-grid-button {
    display:flex;
    width:100%;
    max-width:100%;
    min-height:110px;
    margin:0;
    padding:16px;
    border:1px solid var(--f-uniform-cell-border,transparent);
    border-radius:var(--f-radius-control,12px);
    color:var(--f-uniform-cell-foreground,var(--f-text));
    background:var(--f-uniform-cell-background,var(--f-surface));
    font:400 var(--f-type-body,17px)/1.45 var(--f-font,sans-serif);
    letter-spacing:normal;
    box-shadow:var(--f-uniform-cell-shadow,var(--f-shadow-control));
}
.f-uniform-grid > .f-uniform-cell {
    border-radius:0;
}
.f-uniform-grid-square > .f-uniform-cell { max-width:var(--f-grid-cell-max,280px); }
.f-uniform-cell.f-uniform-grid-button { align-self:stretch; justify-self:stretch; }
.f-uniform-cell-title { font-size:var(--f-type-h1,34px); font-weight:740; line-height:1.14; letter-spacing:-.035em; }
.f-uniform-cell-text { font-size:var(--f-type-body,17px); font-weight:400; line-height:1.45; }
.f-uniform-cell-heading > .f-icon,.f-uniform-cell-icon > .f-icon { --f-icon-size:34px; }
.f-uniform-grid-square > .f-uniform-cell { min-height:0; }
.f-uniform-grid-rectangle > .f-uniform-cell { min-height:0; }
.f-uniform-cell.f-uniform-grid-button:hover:not(:disabled):not([aria-disabled=true]) {
    color:var(--f-uniform-cell-interaction-foreground,var(--f-text));
    background:var(--f-uniform-cell-hover,var(--f-target-preview));
    border-color:transparent;
    box-shadow:var(--f-uniform-cell-shadow,var(--f-shadow-control));
}
.f-uniform-cell.f-uniform-grid-button:active:not(:disabled):not([aria-disabled=true]) {
    color:var(--f-uniform-cell-interaction-foreground,var(--f-text));
    background:var(--f-uniform-cell-click,var(--f-target-click));
    border-color:transparent;
    box-shadow:none;
    filter:none;
}
.f-uniform-cell.f-uniform-grid-button:focus-visible {
    outline:3px solid var(--f-accent);
    outline-offset:3px;
}
.f-uniform-cell.f-uniform-grid-button:is(:disabled,[aria-disabled=true]) {
    color:var(--f-uniform-cell-foreground,var(--f-text));
    background:var(--f-uniform-cell-background,var(--f-surface));
    border-color:var(--f-uniform-cell-border,transparent);
    box-shadow:none;
    opacity:.55;
    cursor:not-allowed;
}
.f-uniform-grid > .f-uniform-cell.f-uniform-grid-button:focus-visible,.f-form-actions > .f-uniform-cell.f-uniform-grid-button:focus-visible { outline-offset:-5px; }
.f-form-actions {
    gap:1px;
    background:transparent;
}
.f-form-actions > .f-uniform-cell { max-width:none; min-height:96px; border-radius:0; }



.f-section-link { color:var(--f-muted); }
.f-section-link:is(:hover,:focus-visible),.f-section-link[aria-current=location] { color:var(--f-accent-text); }
.f-section-label { border-color:var(--f-border); border-radius:var(--f-radius-small,10px); background:var(--f-surface); color:var(--f-text); font-size:var(--f-type-body,17px); font-weight:650; }
.f-section-link:focus-visible { outline-color:var(--f-accent); }



.f-line-chart { color:var(--f-text); }
.f-line-chart-legend { font-size:var(--f-type-body,17px); }
.f-line-chart-legend strong { font-weight:650; }
.f-line-chart-grid { stroke:var(--f-border); opacity:1; }
.f-line-chart [data-series="0"] { color:var(--f-primary); }
.f-line-chart [data-series="1"] { color:var(--f-accent); }
.f-line-chart [data-series="2"] { color:var(--f-info-text); }
.f-line-chart [data-series="3"] { color:var(--f-danger); }
.f-line-chart-labels,.f-line-chart-empty { color:var(--f-muted); }



.f-data-search > .f-field { font-weight:400; }



/* Native fallback uses thin scrollbars; WebKit targets below support the exact 4px skin. */
:where(.f-root,.f-root *) { scrollbar-width:thin; scrollbar-color:var(--f-border) transparent; }
.f-root::-webkit-scrollbar,.f-root *::-webkit-scrollbar { width:4px; height:4px; background:transparent; }
.f-root::-webkit-scrollbar-track,.f-root *::-webkit-scrollbar-track { margin:0; background:transparent; }
.f-root::-webkit-scrollbar-thumb,.f-root *::-webkit-scrollbar-thumb { min-height:24px; min-width:24px; border:0; border-radius:2px; background:var(--f-border); }
.f-root::-webkit-scrollbar-button,.f-root *::-webkit-scrollbar-button { display:none; width:0; height:0; }
.f-root::-webkit-scrollbar-corner,.f-root *::-webkit-scrollbar-corner { background:transparent; }
@supports selector(::-webkit-scrollbar) {
    .f-root :is(.f-content-scroll,.f-display-board-viewport,.f-uniform-cell,.f-code-block,.f-data-scroll,.f-dialog-body) { scrollbar-width:auto; scrollbar-color:auto; }
}



.f-expansion-indicator::before { font:400 var(--f-type-body,17px)/1.2 var(--f-font,sans-serif); transition:transform 140ms ease; }
.service-menu:hover .f-expansion-indicator::before,
.service-menu:has(> .service-menu-trigger:focus-visible, .service-menu-view:focus-within) .f-expansion-indicator::before,
.system-menu:hover .f-expansion-indicator::before,
.system-menu:has(> .system-menu-trigger:focus-visible, .system-menu-view:focus-within) .f-expansion-indicator::before { transform:rotate(180deg); }
@media(hover:none) {
    .service-menu:focus-within .f-expansion-indicator::before,
    .system-menu:focus-within .f-expansion-indicator::before { transform:rotate(180deg); }
}
@supports(appearance:base-select) {
    .f-select::picker-icon { content:counter(f-expansion,disclosure-open); display:inline-flex; align-items:center; justify-content:center; width:1em; height:1.2em; font:400 var(--f-type-body,17px)/1.2 var(--f-font,sans-serif); transition:transform 140ms ease; }
}
@media(prefers-reduced-motion:reduce) { .f-expansion-indicator::before { transition:none; } .f-select::picker-icon { transition:none; } }



.f-tutorial-trigger { color:inherit; background:transparent; border:0; border-radius:12px; }
.f-tutorial-trigger:hover:not(:disabled) { background:var(--f-target-preview); }
.f-tutorial-trigger:focus-visible { outline:3px solid var(--f-accent-text); outline-offset:2px; }
.f-tutorial-trigger:disabled { opacity:.5; cursor:not-allowed; }
.f-progress-ring.f-progress-ring-compact { font-size:11px; }
.f-tutorial-board { padding:24px 40px 32px; border:1px solid var(--f-border); border-radius:24px; box-shadow:var(--f-shadow-popup); }
.f-tutorial-primary { color:var(--f-primary-ink); background-color:var(--f-primary); --f-tutorial-dot:var(--f-primary-preview); }
.f-tutorial-surface { color:var(--f-text); background-color:var(--f-surface); --f-tutorial-dot:var(--f-border); }
.f-tutorial-canvas { color:var(--f-text); background-color:var(--f-canvas); --f-tutorial-dot:var(--f-border); }
.f-tutorial-dotted { background-image:radial-gradient(circle,var(--f-tutorial-dot) 1px,transparent 1.2px); background-size:18px 18px; }
.f-tutorial-content { padding-block:40px; }
.f-tutorial-content h1 { margin:0; font-size:var(--f-type-h1,34px); font-weight:780; line-height:1.2; }
.f-tutorial-content p { margin:0; max-width:700px; font-size:var(--f-type-body,17px); line-height:1.6; }
.f-tutorial-header > span { font-size:var(--f-type-body,17px); font-weight:650; }
.f-tutorial-primary .f-tutorial-header .f-button-quiet,.f-tutorial-primary .f-tutorial-skip .f-button-underline { color:inherit; }
.f-tutorial-primary .f-tutorial-header .f-button-quiet:hover:not(:disabled) { background:var(--f-primary-preview); }
.f-tutorial-segment { color:inherit; border:0; border-radius:0; background:transparent; }
.f-tutorial-segment::after { border-radius:4px; }
.f-tutorial-segment[aria-current=step]::after { box-shadow:0 0 0 2px currentColor; }
.f-tutorial-segment:focus-visible { outline:3px solid currentColor; outline-offset:2px; }
.f-tutorial-segment:disabled { cursor:not-allowed; }
.f-tutorial-preview { color:var(--f-text); background:var(--f-surface); border:1px solid var(--f-border); border-radius:16px; padding:24px; box-shadow:var(--f-shadow-popup); }
.f-tutorial-preview > p { margin:0 0 16px; }
.f-tutorial-preview-title { font-size:var(--f-type-h2,28px); font-weight:750; }
.f-tutorial-overview li[data-completed=true] .f-icon { color:var(--f-accent-text); }
@media(max-width:760px) { .f-tutorial-board { padding:20px; } .f-tutorial-content { padding-block:24px; min-height:200px; } }



/* Tutorial segments own the visual treatment; presentation only supplies its location state. */
.f-presentation-progress { color:var(--f-presentation-progress-foreground,var(--f-text)); }
.f-presentation-progress-link { color:inherit; text-decoration:none; }
.f-presentation-progress-link[aria-current=location]::after { box-shadow:0 0 0 2px currentColor; }




/* Static SSR surfaces share interactive control tokens and keep native form semantics. */
.f-root fieldset { min-width:0; border:0; margin:0; padding:0; }
.f-dropdown-surface { position:relative; display:inline-block; }
.f-dropdown-surface > summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; }
.f-dropdown-surface > summary::-webkit-details-marker { display:none; }
.f-dropdown-surface > .f-menu-panel { position:absolute; inset-block-start:100%; inset-inline-end:0; margin:4px 0 0; display:none; width:max-content; min-width:0; max-width:calc(100vw - 24px); z-index:40; }
.f-dropdown-surface[open] > .f-menu-panel { display:grid; gap:4px; }
/* Only chrome Quiet actions inherit chrome colors; other variants keep their own contract. */
@supports(appearance:base-select) {
    .f-root .shell-header .f-select.f-select-customized:has(> .f-button-quiet):not(:disabled):not([aria-disabled=true]) { color:inherit; }
}
.f-root .shell-header .f-select.f-select-customized:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet:not(:disabled):not([aria-disabled=true]),.f-root .shell-header .f-button-quiet:not(.f-select-trigger):not(:disabled):not([aria-disabled=true]) { color:inherit; --f-target-preview:var(--f-preview-dark); --f-target-click:var(--f-click-dark); }.f-root .shell-header .f-select.f-select-customized:is(:hover,:open):not(:active):not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-root .shell-header .f-button-quiet:hover:not(:disabled):not([aria-disabled=true]) { color:inherit; background:var(--f-target-preview); }.f-root .shell-header .f-select.f-select-customized:active:not(:disabled):not([aria-disabled=true]) > .f-select-trigger.f-button-quiet,.f-root .shell-header .f-button-quiet:active:not(:disabled):not([aria-disabled=true]) { color:inherit; background:var(--f-target-click); }
.f-root .service-menu-view a strong { font-weight:400; }

.f-root .secondary-rail .is-active { color:var(--f-surface); background:var(--f-primary); }




.f-file-input{padding:0;overflow:hidden;cursor:pointer}
.f-file-input::file-selector-button{height:calc(var(--f-control-height,48px) - 2px);margin:0 12px 0 0;padding:0 16px;border:0;border-inline-end:1px solid var(--f-border);color:var(--f-text);background:var(--f-surface);font:inherit;cursor:pointer}
.f-file-input:hover:not(:disabled)::file-selector-button{background:var(--f-surface-preview)}
.f-file-input:active:not(:disabled)::file-selector-button{background:var(--f-surface-click)}
.f-file-input:disabled,.f-file-input:disabled::file-selector-button{cursor:not-allowed}

@supports(appearance:base-select) {
    .f-select.f-select-customized:has(> .f-button) { padding:0; border:0; background:transparent; }
    .f-select.f-select-customized > .f-select-trigger:not(.f-button) { min-block-size:calc(var(--f-control-height,48px) - 2px); }
    /* The real select owns keyboard focus; the inert visual trigger receives the standard Button ring. */
    .f-select.f-select-customized:has(> .f-button):focus-visible { outline:none; }
}



/* Production display and access scenes use the active Flourish role palette and control variants. */
.f-presentation-band { padding-block:48px; }
/* A fixed single access scene uses compact outer spacing without shrinking its branding or form. */
:where(.content-surface:not(.f-document-surface) > .content-stage) > .f-presentation-band.f-presentation-fullheight:where(:only-child):has(> .f-content-container > .f-access-panel):not(:where(footer,[data-presentation-footer]) *) { padding-block:var(--f-space-4,16px); }
.f-logo-displayer { margin-bottom:40px; }
.f-logo-displayer > .f-logo-displayer-title { margin:0; font-size:clamp(56px,8vw,80px); font-weight:780; letter-spacing:-.055em; line-height:1.12; overflow-wrap:anywhere; }
.f-logo-displayer-context { margin-top:12px; color:var(--f-accent-text); font-size:var(--f-type-h2,28px); letter-spacing:normal; }
.f-logo-displayer > .f-logo-displayer-description { max-width:660px; margin:0; color:var(--f-muted); font-size:var(--f-type-body,17px); line-height:1.55; }
.f-presentation-canvas { color:var(--f-text); background-color:var(--f-canvas); }
.f-presentation-surface { color:var(--f-text); background-color:var(--f-surface); }
.f-presentation-primary { color:var(--f-primary-ink); background-color:var(--f-primary); }
.f-presentation-primary.f-presentation-dotted { background-image:radial-gradient(circle,var(--f-primary-preview) 1px,transparent 1.2px); }
.f-presentation-band-heading { gap:20px; margin-bottom:32px; }
.f-presentation-band-heading :is(h1,h2,h3,h4,h5,h6) { margin:0; font-size:var(--f-type-h2,28px); font-weight:780; line-height:1.12; overflow-wrap:anywhere; }
.f-presentation-band-heading h1 { font-size:var(--f-type-page,50px); }
.f-presentation-hero > .f-content-container { padding-inline:clamp(24px,5vw,72px); }
.f-presentation-hero-content > h1 { max-width:920px; margin:0; font-size:clamp(72px,11vw,128px); font-weight:780; letter-spacing:-.06em; line-height:1.12; overflow-wrap:anywhere; }
.f-presentation-hero-content > .f-presentation-hero-subtitle { max-width:900px; margin:0; color:var(--f-muted); font-size:clamp(32px,3.5vw,44px); font-weight:600; line-height:1.24; }
.f-presentation-hero-content > .f-presentation-hero-description { max-width:760px; margin:0; color:var(--f-muted); font-size:var(--f-type-body,17px); line-height:1.55; }
.f-presentation-hero.f-presentation-primary > .f-content-container > .f-presentation-hero-content > :is(.f-presentation-hero-subtitle,.f-presentation-hero-description) { color:inherit; }
.f-presentation-hero.f-presentation-primary > .f-content-container > .f-presentation-hero-layout > .f-presentation-hero-content > :is(.f-presentation-hero-subtitle,.f-presentation-hero-description) { color:inherit; }
.f-presentation-hero-actions { gap:12px; margin-top:8px; }
.f-presentation-footer { color:var(--f-primary-ink); background:var(--f-primary); }
.f-presentation-watermark { top:-.38em; left:-.075em; color:var(--f-primary-preview); font-size:clamp(170px,27vw,420px); font-weight:800; letter-spacing:-.08em; line-height:1; }
.f-presentation-footer-content { gap:32px; padding:90px clamp(24px,5vw,72px) 48px; }
.f-presentation-footer-identity { gap:14px; }
.f-presentation-footer-identity strong { font-size:clamp(64px,9vw,112px); font-weight:780; letter-spacing:-.06em; line-height:1; overflow-wrap:anywhere; }
.f-presentation-footer nav { padding-bottom:8px; }
.f-offer-stage { gap:10px; }
.f-offer-card { min-height:300px; gap:16px; padding:18px; color:var(--f-text); border:1px solid var(--f-border); border-radius:16px; background:var(--f-surface); }
.f-offer-card:focus-visible { outline:3px solid var(--f-accent); outline-offset:4px; }
.f-offer-card > .f-offer-title { position:relative; z-index:1; margin:0; color:inherit; font-size:clamp(22px,2vw,30px); font-weight:700; line-height:1.12; overflow-wrap:anywhere; }
.f-offer-details { gap:16px; }
.f-offer-details p { margin:0; color:var(--f-muted); line-height:1.5; }
.f-access-panel { color:var(--f-text); }
.f-access-panel-emphasized { padding:24px; border-radius:28px; background:var(--f-display-board); }
.f-access-form-surface { padding:clamp(26px,5vw,40px); color:var(--f-text); background:var(--f-surface); border:1px solid var(--f-border); border-radius:28px; }
.f-access-actions { gap:12px; margin-top:28px; }
@media(min-width:1100px) and (prefers-reduced-motion:no-preference) {
 .f-offer-stage[data-offer-ready] .f-offer-card::before { background:var(--f-primary); transition:transform .22s cubic-bezier(.25,.75,.25,1); }
 .f-offer-stage[data-offer-ready] .f-offer-card > .f-offer-title { transition:opacity .1s ease; }
 .f-offer-stage[data-offer-ready] .f-offer-card[data-active=true] > .f-offer-title { transition-delay:.12s; }
 .f-offer-stage[data-offer-ready] .f-offer-compact-title { color:var(--f-primary-ink); font-size:clamp(25px,2.2vw,33px); font-weight:780; line-height:1.12; transition:opacity .08s ease .14s; }
 .f-offer-stage[data-offer-ready] .f-offer-card[data-active=true] .f-offer-compact-title { transition-delay:0s; }
 .f-offer-stage[data-offer-ready] .f-offer-details { transition:opacity .1s ease; }
 .f-offer-stage[data-offer-ready] .f-offer-card[data-active=true] .f-offer-details { transition-delay:.12s; }
}
@media(max-width:760px) { .f-access-form-surface { padding:24px 18px; border-radius:22px; } }
@media(max-width:560px) {
 .f-presentation-hero > .f-content-container { padding-inline:18px; }
 .f-presentation-hero-content > h1 { font-size:clamp(56px,16vw,82px); }
}

/* The existing f-card role paint is shared by both variants. Only spacing and copy scale differ. */
.f-card.f-card-prominent { padding:clamp(24px,4vw,48px); }
.f-card-prominent-copy > .f-card-prominent-text { margin:0; font-size:var(--f-type-h1,34px); line-height:1.4; overflow-wrap:anywhere; }

.f-presentation-hero-split { padding-block:clamp(58px,9vw,116px); }
.f-presentation-hero-split .f-presentation-hero-content { gap:24px; padding-top:clamp(28px,4vw,42px); }
.f-presentation-hero-split .f-presentation-hero-content > h1 { max-width:100%; margin:0; font-size:clamp(64px,9.5vw,112px); font-weight:780; line-height:1; }
.f-presentation-hero-split .f-presentation-hero-content > .f-presentation-hero-description { max-width:620px; font-size:17px; }
.f-access-form-primary { color:var(--f-primary-ink); background:var(--f-primary); border-color:transparent; }
.f-access-form-canvas { background:var(--f-canvas); }
.f-access-form-surface > .f-section { margin:0; padding-top:0; }
.f-access-form-primary .f-section-heading { margin:0 0 24px; }
.f-access-form-primary .f-section-heading h2 { margin:0; color:inherit; font-size:clamp(30px,3.8vw,44px); font-weight:750; line-height:1.12; }
@media(max-width:860px) {
 .f-presentation-hero-split .f-presentation-hero-content { padding-top:0; }
 .f-presentation-hero-split .f-presentation-hero-content > h1 { font-size:clamp(58px,12vw,88px); }
}
@media(max-width:560px) {
 .f-presentation-hero-split > .f-content-container { padding-inline:18px; }
 .f-presentation-hero-split .f-presentation-hero-content > h1 { font-size:clamp(52px,16vw,72px); }
}

/* The Primary access variant keeps the same single surface at every width. */
.f-access-form-primary { padding:clamp(28px,4vw,42px); border-radius:28px; }
@media(max-width:560px) { .f-access-form-primary { padding:24px 18px; border-radius:22px; } }
.f-logo-displayer-compact { margin-bottom:0; }
.f-logo-displayer-context-primary .f-logo-displayer-project { font-size:var(--f-type-h2,28px); font-weight:600; line-height:1.2; letter-spacing:normal; }
.f-logo-displayer-context-primary .f-logo-displayer-context { margin-top:0; font-size:inherit; color:inherit; letter-spacing:inherit; }

/* The foreground copy sits over a dense Tone veil; media remains decorative in either theme. */
.f-presentation-canvas > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-canvas) 0%,var(--f-canvas) 52%,rgb(from var(--f-canvas) r g b / 92%) 76%,rgb(from var(--f-canvas) r g b / 20%) 100%); }
.f-presentation-surface > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-surface) 0%,var(--f-surface) 52%,rgb(from var(--f-surface) r g b / 92%) 76%,rgb(from var(--f-surface) r g b / 20%) 100%); }
.f-presentation-primary > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-primary) 0%,var(--f-primary) 52%,rgb(from var(--f-primary) r g b / 92%) 76%,rgb(from var(--f-primary) r g b / 20%) 100%); }

/* Narrow copy spans the image; keep the same dense Tone veil across its full width. */
@media(max-width:760px) {
 .f-presentation-canvas > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-canvas) 0%,var(--f-canvas) 52%,rgb(from var(--f-canvas) r g b / 92%) 76%,rgb(from var(--f-canvas) r g b / 78%) 100%); }
 .f-presentation-surface > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-surface) 0%,var(--f-surface) 52%,rgb(from var(--f-surface) r g b / 92%) 76%,rgb(from var(--f-surface) r g b / 78%) 100%); }
 .f-presentation-primary > .f-presentation-band-media::after { background:linear-gradient(90deg,var(--f-primary) 0%,var(--f-primary) 52%,rgb(from var(--f-primary) r g b / 92%) 76%,rgb(from var(--f-primary) r g b / 78%) 100%); }
}



.f-heading-loading { color:var(--f-primary); background:var(--f-soft); }
.f-heading-loading-fill { background:var(--f-primary); }
@media(forced-colors:active) {
    .f-heading-loading { color:Highlight; background:Canvas; }
    .f-heading-loading-fill { background:Highlight; }
}