/* Isolated reference components. No unscoped h1/h2, .card or .btn overrides. */
.fl-ui { font-family: var(--fl-font); font-size: var(--fl-text-base); color: var(--fl-text); line-height: var(--fl-line-height); min-width: 0; }
.fl-ui *, .fl-ui *::before, .fl-ui *::after { box-sizing: border-box; }
.fl-ui [hidden] { display: none !important; }
.fl-ui :is(h1,h2,h3,h4,p,dl) { margin: 0; height: auto; }
.fl-ui :is(h1,h2,h3,h4) { display: block; color: var(--fl-heading); line-height: 1.4; font-weight: 750; overflow-wrap: anywhere; }
.fl-ui :is(button,input,select,textarea) { font: inherit; }
.fl-ui :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid var(--fl-primary); outline-offset: 3px; }
.fl-ui a { color: var(--fl-primary); text-underline-offset: 3px; }
.fl-ui button { cursor: pointer; }
.fl-ui button:disabled { cursor: default; opacity: .5; }
.fl-ui .fl-page { width: 100%; min-width: 0; padding: var(--fl-page-padding); background: var(--fl-bg); }
.fl-ui.fl-stack,
.fl-ui .fl-stack { display: grid; gap: var(--fl-layout-gap); min-width: 0; }
.fl-ui .fl-detail { display: grid; grid-template-columns: minmax(0,1fr) var(--fl-aside-width); gap: var(--fl-layout-gap); align-items: start; }
.fl-ui .fl-detail > * { min-width: 0; }
.fl-ui .fl-panel { min-width: 0; border: 1px solid var(--fl-border); border-radius: var(--fl-radius-panel); background: var(--fl-surface); box-shadow: var(--fl-shadow-panel); overflow: hidden; }
.fl-ui .fl-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: var(--fl-panel-padding); border-bottom: 1px solid var(--fl-divider); }
.fl-ui .fl-panel-body { padding: var(--fl-panel-padding); }
.fl-ui .fl-eyebrow { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: var(--fl-muted); text-transform: uppercase; line-height: 1.6; }
.fl-ui .fl-title { margin-top: 6px; font-size: var(--fl-text-section); }
.fl-ui .fl-side-title { font-size: var(--fl-text-side); margin: 10px 0 18px; }
.fl-ui .fl-muted { color: var(--fl-muted); font-size: var(--fl-text-sm); }
.fl-ui .fl-meta { display: block; font-size: var(--fl-text-xs); color: var(--fl-muted); margin-top: 4px; line-height: 1.65; }
.fl-ui .fl-count { display: inline-grid; place-items: center; padding: 1px 5px; min-width: 21px; border-radius: 5px; color: var(--fl-info); background: var(--fl-info-bg); font-size: 11px; font-weight: 600; vertical-align: middle; }
.fl-ui .fl-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; margin-bottom: var(--fl-layout-gap); border-radius: 8px; background: linear-gradient(135deg,var(--fl-hero-start),var(--fl-hero-end)); color: var(--fl-on-primary); }
.fl-ui .fl-hero > div { min-width: 0; }
.fl-ui .fl-hero .fl-eyebrow { color: var(--fl-hero-accent); font-size: 12px; letter-spacing: .02em; }
.fl-ui .fl-hero h1 { color: var(--fl-on-primary); font-size: var(--fl-text-hero); margin: 7px 0; }
.fl-ui .fl-hero p { font-size: 14px; color: var(--fl-hero-text); max-width: 760px; }
.fl-ui .fl-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fl-ui .fl-hero-meta span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ffffff26; background: #ffffff12; border-radius: 8px; padding: 6px 9px; font-size: 12px; color: var(--fl-hero-text); }
.fl-ui.fl-actions,
.fl-ui .fl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fl-space-2); }
.fl-ui .fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fl-space-2); min-height: var(--fl-control-height); padding: 8px 13px; border: 1px solid var(--fl-border); border-radius: var(--fl-radius-control); background: white; color: var(--fl-text); font-size: 12px; font-weight: 650; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background var(--fl-duration), border-color var(--fl-duration); }
.fl-ui .fl-btn:hover:not(:disabled) { background: var(--fl-surface-selected); border-color: #9ec2dd; }
.fl-ui .fl-btn-primary { color: white; background: var(--fl-primary); border-color: var(--fl-primary); }
.fl-ui .fl-btn-primary:hover:not(:disabled) { color: white; background: var(--fl-primary-hover); border-color: var(--fl-primary-hover); }
.fl-ui .fl-btn-quiet { color: var(--fl-muted); background: var(--fl-surface-subtle); }
.fl-ui .fl-btn-danger { color: var(--fl-danger); background: var(--fl-danger-bg); border-color: #ebcad3; }
.fl-ui .fl-btn-hero { color: white; background: #ffffff14; border-color: #ffffff29; }
.fl-ui .fl-btn-hero:hover:not(:disabled) { background: #ffffff26; border-color: #ffffff55; }
.fl-ui .fl-btn-sm { min-height: var(--fl-control-compact); padding: 6px 10px; font-size: 12px; }
.fl-ui .fl-btn-icon { width: 40px; flex-shrink: 0; padding: 0; }
.fl-ui .fl-icon { width: var(--fl-icon-size); height: var(--fl-icon-size); display: inline-block; flex-shrink: 0; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fl-ui .fl-icon-box { width: 34px; height: 34px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 8px; color: var(--fl-info); background: var(--fl-info-bg); }
.fl-ui .fl-badge { --tone: var(--fl-neutral); --tint: var(--fl-neutral-bg); display: inline-flex; align-items: center; gap: 6px; color: var(--tone); background: var(--tint); border-radius: var(--fl-radius-badge); padding: 5px 8px; font-size: 11px; font-weight: 650; line-height: 1.5; width: fit-content; }
.fl-ui .fl-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.fl-ui .fl-success { --tone: var(--fl-success); --tint: var(--fl-success-bg); }
.fl-ui .fl-warning { --tone: var(--fl-warning); --tint: var(--fl-warning-bg); }
.fl-ui .fl-danger { --tone: var(--fl-danger); --tint: var(--fl-danger-bg); }
.fl-ui .fl-info { --tone: var(--fl-info); --tint: var(--fl-info-bg); }
.fl-ui .fl-purple { --tone: var(--fl-purple); --tint: var(--fl-purple-bg); }
.fl-ui .fl-field { min-width: 0; display: grid; gap: var(--fl-field-gap); align-content: start; }
.fl-ui .fl-field label { font-size: 12px; font-weight: 650; color: var(--fl-text); }
.fl-ui .fl-field :is(input:not([type=checkbox]):not([type=file]),select,textarea) { display: block; width: 100%; min-width: 0; min-height: var(--fl-control-height); padding: 9px 11px; color: var(--fl-text); border: 1px solid var(--fl-border); border-radius: 8px; background: white; outline-offset: 2px; }
.fl-ui .fl-field :is(input,select,textarea):focus { border-color: var(--fl-primary); box-shadow: var(--fl-focus); }
.fl-ui .fl-field input::placeholder, .fl-ui .fl-field textarea::placeholder { color: var(--fl-muted); opacity: 1; }
.fl-ui .fl-field [aria-invalid=true] { border-color: var(--fl-danger) !important; }
.fl-ui .fl-field textarea { resize: vertical; min-height: 90px; }
.fl-ui .fl-field :disabled { background: var(--fl-neutral-bg); color: var(--fl-muted); }
.fl-ui .fl-field small { font-size: 11px; color: var(--fl-muted); }
.fl-ui .fl-error-text { color: var(--fl-danger) !important; font-size: 12px; }
.fl-ui .fl-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.fl-ui .fl-form-grid .fl-span { grid-column: 1/-1; }
.fl-ui .fl-check { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.fl-ui .fl-check input { accent-color: var(--fl-primary); width: 16px; height: 16px; }
.fl-ui .fl-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--fl-border); background: #fbfcfe; border-radius: 8px; padding: 0 12px; flex: 1; max-width: 520px; margin-left: auto; }
.fl-ui .fl-search:focus-within { border-color: var(--fl-primary); box-shadow: var(--fl-focus); }
.fl-ui .fl-search input { min-width: 0; width: 100%; height: 42px; border: 0; background: none; color: var(--fl-text); outline: none; font-size: 13px; }
.fl-ui .fl-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 var(--fl-panel-padding) 20px; }
.fl-ui .fl-filters .fl-field { display: flex; align-items: center; gap: 8px; }
.fl-ui .fl-filters .fl-field label { font-size: 11px; font-weight: 400; }.fl-ui .fl-filters .fl-field select { width: auto; }
.fl-ui .fl-segmented { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; background: #eff4f8; border-radius: 8px; }
.fl-ui .fl-segmented button { min-height: 32px; padding: 7px 11px; background: none; border: 0; border-radius: 6px; color: var(--fl-muted); font-size: 12px; font-weight: 650; }
.fl-ui .fl-segmented button[aria-pressed=true] { background: white; color: var(--fl-primary); box-shadow: 0 1px 4px #173f5b12; }
.fl-ui .fl-sort { margin-left: auto; }
.fl-ui .fl-table-region { overflow: auto; scrollbar-width: thin; scrollbar-color: #c5d6e4 var(--fl-surface-subtle); }
.fl-ui .fl-table { width: 100%; border-spacing: 0; border-collapse: separate; min-width: 740px; }
.fl-ui .fl-table caption { text-align: left; padding: 10px 24px; color: var(--fl-muted); }
.fl-ui .fl-table th { background: var(--fl-surface-subtle); color: var(--fl-muted); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 13px 14px; border-block: 1px solid var(--fl-divider); }
.fl-ui .fl-table td { padding: var(--fl-cell-padding-y) 14px; font-size: 12px; vertical-align: middle; border-bottom: 1px solid var(--fl-divider); }
.fl-ui .fl-table :is(th,td):first-child { padding-left: var(--fl-panel-padding); }.fl-ui .fl-table :is(th,td):last-child { padding-right: var(--fl-panel-padding); }
.fl-ui .fl-table tbody tr:last-child td { border-bottom: 0; }.fl-ui .fl-table tbody tr:hover { background: #fbfdff; }
.fl-ui .fl-table strong { display: block; color: var(--fl-heading); font-size: 13px; font-weight: 650; }.fl-ui .fl-table a { text-decoration: none; font-weight: 650; }.fl-ui .fl-table a:hover { text-decoration: underline; }
.fl-ui .fl-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }.fl-ui .fl-table .fl-actions { flex-wrap: nowrap; justify-content: flex-end; }
.fl-ui .fl-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--fl-divider); font-size: 12px; }
.fl-ui .fl-detail-scroll { max-height: var(--fl-detail-scroll); }.fl-ui .fl-detail-scroll thead th { position: sticky; top: 0; z-index: var(--fl-z-sticky); }
.fl-ui .fl-entity-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; padding: var(--fl-panel-padding); }.fl-ui .fl-entity-grid > div { min-width: 0; }.fl-ui .fl-entity-grid > div + div { padding-left: 24px; border-left: 1px solid var(--fl-divider); }.fl-ui .fl-entity-grid h3 { font-size: 14px; margin-top: 14px; }
.fl-ui .fl-facts { display: grid; gap: 11px; margin-top: 18px; }.fl-ui .fl-facts > div { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 12px; font-size: 12px; }.fl-ui .fl-facts dt { color: var(--fl-muted); font-weight: 400; }.fl-ui .fl-facts dd { margin: 0; overflow-wrap: anywhere; }
.fl-ui .fl-total { color: var(--fl-heading); font-size: var(--fl-text-total); font-weight: 750; line-height: 1.4; font-variant-numeric: tabular-nums; margin: 20px 0 5px; }
.fl-ui .fl-summary-lines { margin: 22px 0; display: grid; }.fl-ui .fl-summary-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--fl-divider); font-size: 12px; }.fl-ui .fl-summary-lines dt { color: var(--fl-muted); }.fl-ui .fl-summary-lines dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.fl-ui .fl-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--fl-divider); padding: 8px 16px 0; }.fl-ui .fl-tabs button { white-space: nowrap; border: 0; border-bottom: 2px solid transparent; color: var(--fl-muted); background: none; padding: 12px; font-size: 12px; }.fl-ui .fl-tabs button[aria-selected=true] { border-color: var(--fl-primary); color: var(--fl-primary); }
.fl-ui .fl-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }.fl-ui .fl-metric { padding: 20px 24px; border-right: 1px solid var(--fl-divider); min-width: 0; }.fl-ui .fl-metric:last-child { border: 0; }.fl-ui .fl-metric strong { display: block; font-size: 25px; line-height: 1.5; color: var(--fl-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-ui .fl-notice { --tone: var(--fl-info); --tint: var(--fl-info-bg); display: flex; align-items: flex-start; gap: 12px; border: 1px solid color-mix(in srgb,var(--tone) 18%,white); border-radius: 8px; padding: 14px 16px; background: var(--tint); color: var(--tone); font-size: 12px; }.fl-ui .fl-notice strong { display: block; font-weight: 650; }.fl-ui .fl-notice p { margin-top: 3px; }.fl-ui .fl-notice.fl-warning { --tone: var(--fl-warning); --tint: var(--fl-warning-bg); }.fl-ui .fl-notice.fl-danger { --tone: var(--fl-danger); --tint: var(--fl-danger-bg); }.fl-ui .fl-notice.fl-success { --tone: var(--fl-success); --tint: var(--fl-success-bg); }
.fl-ui .fl-empty { padding: 40px 20px; text-align: center; display: grid; justify-items: center; gap: 10px; }.fl-ui .fl-empty h3 { font-size: 15px; }.fl-ui .fl-empty p { max-width: 370px; font-size: 12px; color: var(--fl-muted); }.fl-ui .fl-skeleton { background: #e7eef5; border-radius: 5px; height: 12px; width: 70%; margin: 10px 0; }.fl-ui .fl-skeleton:nth-child(2) { width: 45%; }
.fl-ui .fl-upload { position: relative; display: grid; justify-items: center; gap: 8px; border: 1px dashed #b5cadb; border-radius: 10px; padding: 20px; background: #fbfdff; text-align: center; }.fl-ui .fl-upload.dragging { background: var(--fl-info-bg); border-color: var(--fl-primary); }.fl-ui .fl-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }.fl-ui .fl-upload:focus-within { box-shadow: var(--fl-focus); }.fl-ui .fl-upload label { font-size: 13px; color: var(--fl-primary); font-weight: 650; cursor: pointer; }.fl-ui .fl-upload-preview { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--fl-border); border-radius: 10px; background: white; overflow: hidden; }.fl-ui .fl-upload-preview img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fl-ui .fl-timeline { display: grid; gap: 20px; }.fl-ui .fl-timeline-item { display: flex; gap: 12px; align-items: start; font-size: 12px; }.fl-ui .fl-timeline-item > div { min-width: 0; }.fl-ui .fl-timeline-item p { margin-top: 6px; color: var(--fl-muted); }
.fl-ui .fl-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--fl-avatar-size); height: var(--fl-avatar-size); border-radius: 8px; background: var(--fl-info-bg); color: var(--fl-info); font-size: 11px; font-weight: 650; }
.fl-ui .fl-operational { background: var(--fl-bg); min-width: 0; }.fl-ui .fl-operational-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: white; border-bottom: 1px solid var(--fl-border); }.fl-ui .fl-operational-head h1 { font-size: 22px; margin-top: 4px; }.fl-ui .fl-workspace { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 470px; }.fl-ui .fl-map-sidebar { padding: 20px; background: white; border-right: 1px solid var(--fl-border); }.fl-ui .fl-map { position: relative; min-height: 400px; background: #acd4df; overflow: hidden; }.fl-ui .fl-map > svg { width: 100%; height: 100%; position: absolute; inset: 0; }.fl-ui .fl-map-label { position: absolute; top: 16px; left: 16px; padding: 12px; background: #fffffff2; border-radius: 8px; max-width: calc(100% - 32px); }.fl-ui .fl-map-legend { position: absolute; bottom: 16px; left: 16px; right: 16px; padding: 10px 12px; border-radius: 8px; background: #fffffff2; font-size: 11px; display: flex; flex-wrap: wrap; gap: 8px 14px; }.fl-ui .fl-map-legend span { display: flex; align-items: center; gap: 6px; }.fl-ui .fl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-info); }
.fl-ui .fl-full { width: 100%; }.fl-ui .fl-gap-top { margin-top: 16px; }
@media (max-width:1050px) { .fl-ui .fl-detail { grid-template-columns: 1fr; }.fl-ui .fl-detail > aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.fl-ui .fl-hero { align-items: flex-start; flex-wrap: wrap; } }
@media (max-width:760px) { .fl-ui .fl-entity-grid { grid-template-columns: 1fr; }.fl-ui .fl-entity-grid > div + div { padding: 20px 0 0; border: 0; border-top: 1px solid var(--fl-divider); }.fl-ui .fl-search { flex-basis: 100%; max-width: none; margin: 0; }.fl-ui .fl-detail > aside { grid-template-columns: 1fr; }.fl-ui .fl-workspace { grid-template-columns: 1fr; }.fl-ui .fl-map-sidebar { border-right: 0; border-bottom: 1px solid var(--fl-border); }.fl-ui .fl-map { min-height: 360px; }.fl-ui .fl-form-grid { grid-template-columns: 1fr; }.fl-ui .fl-sort { margin: 0; } }
@media (max-width:640px) { .fl-ui .fl-hero { padding: 16px; gap: 16px; }.fl-ui .fl-hero .fl-actions { width: 100%; }.fl-ui .fl-hero .fl-actions > * { flex: 1; }.fl-ui .fl-hero p { font-size: 13px; }.fl-ui .fl-panel-head { padding: 18px; }.fl-ui .fl-filters { padding: 0 18px 18px; }.fl-ui .fl-filters .fl-field { flex: 1 1 150px; flex-direction: column; align-items: stretch; }.fl-ui .fl-filters .fl-field select { width: 100%; }.fl-ui .fl-metrics { grid-template-columns: 1fr; }.fl-ui .fl-metric { border-right: 0; border-bottom: 1px solid var(--fl-divider); padding: 16px 18px; }.fl-ui .fl-operational-head { flex-wrap: wrap; }.fl-ui .fl-pagination { padding: 16px 18px; }.fl-ui .fl-btn, .fl-ui .fl-btn-sm, .fl-ui .fl-segmented button { min-height: 44px; }.fl-ui .fl-btn-icon { width: 44px; }.fl-ui .fl-field :is(input:not([type=checkbox]),select,textarea) { min-height: 44px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .fl-ui * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* Approved workflow pattern: inventory stepper, distinct from tabs and filters. */
.fl-ui .fl-stepper { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; border: 1px solid var(--fl-border); border-radius: 8px; overflow: hidden; background: white; }
.fl-ui .fl-stepper li { min-width: 0; border-right: 1px solid var(--fl-divider); }.fl-ui .fl-stepper li:last-child { border: 0; }
.fl-ui .fl-stepper button { width: 100%; min-height: 64px; display: flex; align-items: center; text-align: left; gap: 10px; border: 0; background: white; padding: 12px 16px; color: var(--fl-muted); }
.fl-ui .fl-stepper button:disabled { opacity: 1; color: #687e91; background: #fbfcfe; }
.fl-ui .fl-step-number { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #bdcddd; color: #607b92; background: white; font-size: 14px; font-weight: 650; }
.fl-ui .fl-stepper strong { display: block; font-size: 13px; font-weight: 650; }.fl-ui .fl-stepper small { display: block; font-size: 11px; margin-top: 2px; }
.fl-ui .fl-stepper button[aria-current=step] { color: var(--fl-primary); background: #eaf4ff; }.fl-ui .fl-stepper button[aria-current=step] .fl-step-number { background: var(--fl-primary); border-color: var(--fl-primary); color: white; }
.fl-ui .fl-stepper button[data-complete=true] .fl-step-number { color: var(--fl-primary); background: var(--fl-info-bg); border-color: #aacbe2; }
.fl-ui .fl-context-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 16px; background: white; border: 1px solid var(--fl-border); border-radius: 8px; }
.fl-ui .fl-context-strip > div { padding: 12px 14px; border-right: 1px solid var(--fl-divider); min-width: 0; }.fl-ui .fl-context-strip > div:last-child { border: 0; }.fl-ui .fl-context-strip > div > span { display: block; color: var(--fl-muted); font-size: 10px; text-transform: uppercase; }.fl-ui .fl-context-strip strong { display: block; color: var(--fl-heading); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.fl-ui .fl-wizard-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--fl-divider); }
@media(max-width:760px) { .fl-ui .fl-context-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }.fl-ui .fl-context-strip > div:nth-child(2) { border-right: 0; }.fl-ui .fl-context-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--fl-divider); } }
@media(max-width:640px) { .fl-ui .fl-stepper { grid-template-columns: 1fr; }.fl-ui .fl-stepper li { border-right: 0; border-bottom: 1px solid var(--fl-divider); }.fl-ui .fl-stepper button { min-height: 62px; }.fl-ui .fl-wizard-actions { align-items: stretch; flex-direction: column; }.fl-ui .fl-wizard-actions .fl-actions { display: grid; grid-template-columns: 1fr 1fr; }.fl-ui .fl-wizard-actions .fl-btn { white-space: normal; } }
@media (pointer:coarse) { .fl-ui .fl-btn, .fl-ui .fl-btn-sm, .fl-ui .fl-segmented button, .fl-ui .fl-tabs button { min-height: 44px; }.fl-ui .fl-btn-icon { width: 44px; } }

/* 1.1 · Supporting components share the same tokens and scope. */
.fl-ui .fl-form-page { width: 100%; max-width: var(--fl-form-width); margin-inline: auto; }
.fl-ui .fl-field textarea { min-height: 96px; resize: vertical; }
.fl-ui .fl-form-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fl-space-3); padding: var(--fl-space-4) var(--fl-panel-padding); border-top: 1px solid var(--fl-divider); background: var(--fl-surface-subtle); }
.fl-ui .fl-choice-group { padding: 0; margin: 0; border: 0; display: grid; gap: var(--fl-space-2); }
.fl-ui .fl-choice-group legend { padding: 0; margin-bottom: var(--fl-space-2); font-size: var(--fl-text-sm); font-weight: var(--fl-weight-medium); }
.fl-ui .fl-choice-group label { display: flex; align-items: center; gap: var(--fl-space-2); min-height: var(--fl-touch-target); }
.fl-ui :is(.fl-check,.fl-choice-group,.fl-table) input:is([type=checkbox],[type=radio]) { width: 16px; height: 16px; accent-color: var(--fl-primary); flex-shrink: 0; }
.fl-ui .fl-switch { display: inline-flex; align-items: center; gap: var(--fl-space-3); min-height: var(--fl-touch-target); cursor: pointer; }
.fl-ui .fl-switch input { appearance: none; margin: 0; width: 36px; height: 22px; border: 1px solid var(--fl-muted); border-radius: 12px; background: var(--fl-neutral-bg); position: relative; flex-shrink: 0; cursor: pointer; }
.fl-ui .fl-switch input::before { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--fl-muted); border-radius: 50%; transition: transform var(--fl-duration); }
.fl-ui .fl-switch input:checked { background: var(--fl-primary); border-color: var(--fl-primary); }
.fl-ui .fl-switch input:checked::before { background: var(--fl-on-primary); transform: translateX(14px); }
.fl-ui .fl-switch input:disabled { opacity: .55; cursor: not-allowed; }
.fl-ui .fl-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--fl-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--fl-text-sm); }
.fl-ui .fl-breadcrumb li + li::before { content: '/'; color: var(--fl-muted); margin-right: var(--fl-space-2); }
.fl-ui .fl-disclosure { position: relative; width: fit-content; }
.fl-ui .fl-disclosure > summary { list-style: none; }
.fl-ui .fl-disclosure > summary::-webkit-details-marker { display: none; }
.fl-ui .fl-disclosure-content { position: absolute; top: calc(100% + 4px); right: 0; width: min(240px,calc(100vw - 48px)); z-index: var(--fl-z-menu); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-control); box-shadow: var(--fl-shadow-panel); background: var(--fl-surface); padding: var(--fl-space-2); display: grid; }
.fl-ui .fl-disclosure-content :is(button,a) { display: flex; align-items: center; gap: var(--fl-space-2); border: 0; border-radius: var(--fl-radius-badge); background: transparent; color: var(--fl-text); padding: var(--fl-space-2); min-height: var(--fl-touch-target); text-align: left; text-decoration: none; }
.fl-ui .fl-disclosure-content :is(button,a):hover { background: var(--fl-surface-selected); }
.fl-ui .fl-disclosure-content hr { border: 0; border-top: 1px solid var(--fl-divider); width: 100%; margin-block: var(--fl-space-1); }
.fl-ui .fl-filter-chips { display: flex; flex-wrap: wrap; gap: var(--fl-space-2); }
.fl-ui .fl-filter-chip { display: inline-flex; align-items: center; gap: var(--fl-space-2); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-badge); padding-left: var(--fl-space-3); background: var(--fl-surface-selected); font-size: var(--fl-text-sm); }
.fl-ui .fl-filter-chip button { border: 0; color: var(--fl-primary); background: transparent; min-width: var(--fl-control-compact); min-height: var(--fl-control-compact); }
.fl-ui .fl-accordion { border: 1px solid var(--fl-border); border-radius: var(--fl-radius-control); background: var(--fl-surface); }
.fl-ui .fl-accordion summary { padding: var(--fl-space-4); cursor: pointer; color: var(--fl-heading); font-weight: var(--fl-weight-medium); }
.fl-ui .fl-accordion > div { padding: 0 var(--fl-space-4) var(--fl-space-4); }
.fl-ui .fl-relation { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fl-space-3); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-control); padding: var(--fl-space-4); background: var(--fl-surface-subtle); }
.fl-ui .fl-relation > div { flex: 1; min-width: min(100%,160px); overflow-wrap: anywhere; }
.fl-ui .fl-relation strong { display: block; color: var(--fl-heading); }
.fl-ui .fl-relation small { display: block; color: var(--fl-muted); }
.fl-ui .fl-bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fl-space-3); padding: var(--fl-space-3) var(--fl-panel-padding); border-block: 1px solid var(--fl-border); background: var(--fl-surface-selected); }
.fl-ui .fl-bulk-bar > .fl-actions { margin-left: auto; }
.fl-ui .fl-table tr[data-selected=true] { background: var(--fl-surface-selected); }
.fl-ui .fl-selection-cell { width: 56px; }
.fl-ui .fl-selection-cell label { display: inline-grid; place-items: center; min-height: var(--fl-touch-target); min-width: var(--fl-touch-target); cursor: pointer; }
.fl-ui .fl-line-editor { width: 100%; border-collapse: collapse; min-width: 650px; }
.fl-ui .fl-line-editor :is(th,td) { border-bottom: 1px solid var(--fl-divider); padding: var(--fl-cell-padding-y); text-align: left; vertical-align: top; }
.fl-ui .fl-line-editor th { color: var(--fl-muted); background: var(--fl-surface-subtle); font-size: var(--fl-text-sm); font-weight: var(--fl-weight-medium); }
.fl-ui .fl-line-editor .fl-field { width: 130px; }
.fl-ui .fl-line-editor :is(th,td):first-child { padding-left: var(--fl-panel-padding); }
.fl-ui .fl-line-editor :is(th,td):last-child { padding-right: var(--fl-panel-padding); }
.fl-ui .fl-line-editor td:first-child { min-width: 180px; }
.fl-ui .fl-progress { display: block; width: 100%; height: 8px; border: 0; border-radius: var(--fl-radius-badge); background: var(--fl-neutral-bg); accent-color: var(--fl-primary); overflow: hidden; }
.fl-ui .fl-progress::-webkit-progress-bar { background: var(--fl-neutral-bg); }
.fl-ui .fl-progress::-webkit-progress-value { background: var(--fl-primary); }
.fl-ui .fl-progress::-moz-progress-bar { background: var(--fl-primary); }
.fl-ui .fl-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(var(--fl-drawer-width),100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--fl-border); padding: 0; background: var(--fl-surface); color: var(--fl-text); box-shadow: var(--fl-shadow-overlay); }
.fl-ui .fl-drawer[open] { display: flex; flex-direction: column; }
.fl-ui .fl-drawer::backdrop { background: #10243860; }
.fl-ui .fl-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-space-3); padding: var(--fl-panel-padding); border-bottom: 1px solid var(--fl-divider); }
.fl-ui .fl-drawer > .fl-panel-body { flex: 1; overflow-y: auto; min-height: 0; }
.fl-ui .fl-drawer > footer { padding: var(--fl-space-4) var(--fl-panel-padding); padding-bottom: max(var(--fl-space-4),env(safe-area-inset-bottom)); border-top: 1px solid var(--fl-divider); }
@media (max-width:640px) {
  .fl-ui .fl-btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .fl-ui .fl-form-actions { align-items: stretch; flex-direction: column; }
  .fl-ui .fl-form-actions .fl-actions { display: flex; flex-wrap: wrap; }
  .fl-ui .fl-form-actions .fl-actions > * { flex: 1; }
  .fl-ui .fl-filter-chip button { min-width: var(--fl-touch-target); min-height: var(--fl-touch-target); }
  .fl-ui .fl-bulk-bar > .fl-actions { margin: 0; width: 100%; }
}
@media (prefers-reduced-motion:reduce) { .fl-ui .fl-switch input::before { transition: none; } }