/* Shared spacing is derived from existing UI values and the model's 2px steps.
   Parents own inter-control spacing; controls do not add vertical outer margins. */
[data-m3-theme] {
  --f-space-unit:2px;
  --f-box-header-inset:16px;
  --f-box-header-gap:12px;
  --f-box-action-gap:4px;
  --f-editor-tool-gap:8px;
  --f-editor-tool-padding:12px;
  --f-control-neutral-fill:color-mix(in srgb,var(--f-content-ink,#29292c) 4%,transparent);
  --f-control-neutral-hover:color-mix(in srgb,var(--f-content-ink,#29292c) 7%,transparent);
  --f-neutral-badge-fill:color-mix(in srgb,var(--f-content-ink,#29292c) 9%,transparent);
  --f-control-hairline:color-mix(in srgb,var(--f-field-ink,#29292c) 9%,transparent);
  --f-control-shadow:0 1px 3px #0000000b,0 2px 7px #00000004;
  --f-control-shadow-hover:0 2px 5px #00000010;
  --f-drop-background:color-mix(in srgb,var(--f-content-ink,#29292c) 7%,var(--f-navigation-bg,#eeece9));
  --f-drop-hover:color-mix(in srgb,var(--f-content,#fcfbfa) 55%,var(--f-navigation-bg,#eeece9));
  --f-drop-line:color-mix(in srgb,var(--f-content-ink,#29292c) 24%,transparent);
  --f-drop-active-line:color-mix(in srgb,var(--f-content-ink,#29292c) 38%,transparent);
  --f-sidebar-padding-x:20px;
  --f-sidebar-padding-bottom:20px;
  --f-drop-radius:16px;
  --f-drop-padding:16px;
  --f-drop-icon-size:32px;
  --f-space-2:calc(var(--f-space-unit) * 1);
  --f-space-4:calc(var(--f-space-unit) * 2);
  --f-space-6:calc(var(--f-space-unit) * 3);
  --f-space-8:calc(var(--f-space-unit) * 4);
  --f-space-10:calc(var(--f-space-unit) * 5);
  --f-space-12:calc(var(--f-space-unit) * 6);
  --f-space-14:calc(var(--f-space-unit) * 7);
  --f-space-16:calc(var(--f-space-unit) * 8);
  --f-space-18:calc(var(--f-space-unit) * 9);
  --f-space-20:calc(var(--f-space-unit) * 10);
  --f-space-22:calc(var(--f-space-unit) * 11);
  --f-space-24:calc(var(--f-space-unit) * 12);
  --f-space-28:calc(var(--f-space-unit) * 14);
  --f-space-30:calc(var(--f-space-unit) * 15);
  --f-space-32:calc(var(--f-space-unit) * 16);
  --f-space-34:calc(var(--f-space-unit) * 17);
  --f-space-40:calc(var(--f-space-unit) * 20);
  --f-space-48:calc(var(--f-space-unit) * 24);
  --f-space-56:calc(var(--f-space-unit) * 28);
  --f-control-title-height:calc(var(--f-space-unit) * 19);
  --f-control-tool-height:var(--f-space-32);
  --f-control-box-height:var(--f-space-28);
  --f-control-height:var(--f-control-tool-height);
  --f-control-icon:16px;
  --f-control-font:13px;
  --f-control-compact-height:var(--f-control-box-height);
  --f-control-gap:var(--f-space-8);
  --f-control-padding-y:var(--f-space-6);
  --f-control-padding-x:var(--f-space-10);
  --f-row-height:var(--f-space-32);
  --f-tree-row-height:var(--f-space-30);
  --f-panel-padding:var(--f-space-16);
  --f-layout-gap:var(--f-space-20);
  --f-gap-board:var(--f-layout-gap);
  --f-gap-summary:var(--f-layout-gap);
  --f-gap-rows:var(--f-space-8);
  --f-gap-form:var(--f-space-16);
}
/* Shared surface contract. Load after app and chart styles; M3Design.apply supplies values. */
[data-m3-theme] {
  color-scheme: light;
  color: var(--f-content-ink);
  --f-ui-radius: 8px;
  --f-ui-focus: var(--f-content-ink);
  --m3-chart-label: var(--f-card-muted);
  --m3-chart-grid: var(--f-card-line);
  --m3-chart-zero: var(--f-card-control-line);
  --m3-chart-surface: var(--f-card);
  --m3-chart-control: var(--f-field);
  --m3-chart-focus: var(--f-card-ink);
  --m3-chart-accent: var(--f-accent);
  --m3-chart-ink: var(--f-card-ink);
  --m3-chart-point: var(--f-card);
  --m3-chart-comparison-base: var(--f-mutedCard);
  --m3-chart-series: var(--f-card-muted);
}
[data-m3-theme="dark"] { color-scheme: dark; }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="page"] { --f-local-bg:var(--f-page); --f-local-ink:var(--f-page-ink); --f-local-muted:var(--f-page-muted); --f-local-line:var(--f-page-line); --f-local-hover:var(--f-page-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="navigation"] { --f-local-bg:var(--f-navigation); --f-local-ink:var(--f-navigation-ink); --f-local-muted:var(--f-navigation-muted); --f-local-line:var(--f-navigation-line); --f-local-hover:var(--f-navigation-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="content"] { --f-local-bg:var(--f-content); --f-local-ink:var(--f-content-ink); --f-local-muted:var(--f-content-muted); --f-local-line:var(--f-content-line); --f-local-hover:var(--f-content-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="card"] { --f-local-bg:var(--f-card); --f-local-ink:var(--f-card-ink); --f-local-muted:var(--f-card-muted); --f-local-line:var(--f-card-line); --f-local-hover:var(--f-card-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="mutedCard"] { --f-local-bg:var(--f-mutedCard); --f-local-ink:var(--f-mutedCard-ink); --f-local-muted:var(--f-mutedCard-muted); --f-local-line:var(--f-mutedCard-line); --f-local-hover:var(--f-mutedCard-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="strongCard"] { --f-local-bg:var(--f-strongCard); --f-local-ink:var(--f-strongCard-ink); --f-local-muted:var(--f-strongCard-muted); --f-local-line:var(--f-strongCard-line); --f-local-hover:var(--f-strongCard-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="table"] { --f-local-bg:var(--f-table); --f-local-ink:var(--f-table-ink); --f-local-muted:var(--f-table-muted); --f-local-line:var(--f-table-line); --f-local-hover:var(--f-table-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="form"] { --f-local-bg:var(--f-form); --f-local-ink:var(--f-form-ink); --f-local-muted:var(--f-form-muted); --f-local-line:var(--f-form-line); --f-local-hover:var(--f-form-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="field"] { --f-local-bg:var(--f-field); --f-local-ink:var(--f-field-ink); --f-local-muted:var(--f-field-muted); --f-local-line:var(--f-field-line); --f-local-hover:var(--f-field-hover); }
:is([data-m3-theme], [data-m3-theme] *)[data-m3-surface="modal"] { --f-local-bg:var(--f-modal); --f-local-ink:var(--f-modal-ink); --f-local-muted:var(--f-modal-muted); --f-local-line:var(--f-modal-line); --f-local-hover:var(--f-modal-hover); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-surface], [data-m3-theme][data-m3-surface] {
  --f-preview-color: initial;
  --f-preview-ink: initial;
  background: var(--f-preview-color, var(--f-local-bg));
  color: var(--f-preview-ink, var(--f-local-ink));
}

/* Existing app consumers, including surfaces not yet annotated with data-m3-surface. */
#m3-glass[data-m3-theme] { background:radial-gradient(ellipse at 5% 70%,var(--m3-canvas-shadow) 0,transparent 58%),radial-gradient(ellipse at 90% 5%,var(--m3-canvas-light) 0,transparent 52%),var(--f-page); color:var(--f-content-ink); }
#m3-glass[data-m3-theme] .m3-window { background:var(--m3-shell); color:var(--f-shell-ink,var(--f-navigation-ink)); border-color:var(--f-shell-line,var(--f-navigation-line)); }
#m3-glass[data-m3-theme] :is(.m3-sidebar,.m3-icons,.m3-top) { color:var(--f-shell-ink,var(--f-navigation-ink)); }
#m3-glass[data-m3-theme] :is(.m3-nav,.m3-tree button,.m3-section-toggle,.m3-branch-toggle,.m3-account) { color:var(--f-shell-ink,var(--f-navigation-ink)); }
#m3-glass[data-m3-theme] :is(.m3-current,.m3-nav:hover,.m3-tree button:hover) { background:var(--f-shell-hover,var(--f-navigation-hover)); color:var(--f-shell-ink,var(--f-navigation-ink)); }
#m3-glass[data-m3-theme] .m3-content { background:var(--f-content); color:var(--f-content-ink); border-color:var(--f-content-line); border-top-left-radius:var(--f-content-radius); }
#m3-glass[data-m3-theme] :is(.m3-right-sidebar,#m3-ui-lab) { background:var(--f-navigation); color:var(--f-navigation-ink); border-color:var(--f-navigation-line); }
#m3-glass[data-m3-theme] :is(.m3-box-white,.m3-kpi,.m3-dashboard-box,.m3-detail-tiles>div) { background:var(--f-preview-color,var(--f-card)); color:var(--f-preview-ink,var(--f-card-ink)); border-color:var(--f-card-line); }
#m3-glass[data-m3-theme] .m3-box-outline { background:transparent; color:var(--f-content-ink); border-color:var(--f-content-line); box-shadow:none; }
#m3-glass[data-m3-theme] :is(.m3-box-muted,.m3-well) { background:var(--f-mutedCard); color:var(--f-mutedCard-ink); border-color:var(--f-mutedCard-line); }
#m3-glass[data-m3-theme] .m3-box-dark { background:var(--f-strongCard); color:var(--f-strongCard-ink); border-color:var(--f-strongCard-line); }
#m3-glass[data-m3-theme] :is(.m3-kpi-label,.m3-kpi-foot,.m3-box-foot,.m3-box-head p) { color:var(--f-card-muted); }
#m3-glass[data-m3-theme] .m3-box-dark :is(.m3-kpi-label,.m3-kpi-foot) { color:var(--f-strongCard-muted); }
#m3-glass[data-m3-theme] .m3-box-outline :is(.m3-box-foot,.m3-box-head p) { color:var(--f-content-muted); }
#m3-glass[data-m3-theme] :is(.m3-job,.m3-person,.m3-table-head) { background:var(--f-table); color:var(--f-table-ink); border-color:var(--f-table-line); }
#m3-glass[data-m3-theme] :is(.m3-person.m3-picked,.m3-person:hover,.m3-job:hover) { background:var(--f-table-hover); color:var(--f-table-ink); }
#m3-glass[data-m3-theme] :is(.m3-job>span,.m3-person span:last-child) { color:var(--f-table-muted); background:transparent; }
#m3-glass[data-m3-theme] :is(.m3-dialog,.m3-detail) { background:var(--f-form); color:var(--f-form-ink); border-color:var(--f-form-line); }
#m3-glass[data-m3-theme] :is(.m3-date-pop,.m3-topmenu) { background:var(--f-modal); color:var(--f-modal-ink); border-color:var(--f-modal-line); }
#m3-glass[data-m3-theme] :is(.m3-search,.m3-dialog input,#m3-ui-lab select,.m3-date-trigger,.m3-mini-btn,.m3-neutral-badge,.m3-splitbar button) { background:var(--f-field); color:var(--f-field-ink); border-color:var(--f-field-control-line); }
#m3-glass[data-m3-theme] :is(.m3-topmenu button:hover,.m3-date-trigger:hover,.m3-mini-btn:hover,.m3-splitbar button:hover,.m3-splitbar .m3-focus) { background:var(--f-field-hover); color:var(--f-field-ink); }
#m3-glass[data-m3-theme] :is(.m3-search input,.m3-lab-label,.m3-lab-hint,#m3-lab-status) { color:inherit; }
#m3-glass[data-m3-theme] :is(.m3-save,.m3-plus) { background:var(--f-accent); color:var(--f-accent-ink); }
#m3-glass[data-m3-theme] :is(.m3-dashboard-board) { gap:var(--f-gap-board,20px); }
#m3-glass[data-m3-theme] .m3-summary { gap:var(--f-gap-summary,20px); }
#m3-glass[data-m3-theme] #m3-jobs { display:grid; gap:var(--f-gap-rows,8px); }
#m3-glass[data-m3-theme] #m3-jobs .m3-job { margin:0; }

/* Shared controls style: consumed by app and gallery, not a gallery-only skin. */
:is(#m3-glass[data-m3-theme], [data-m3-theme]) :is(.f-button,.f-input,.f-choice,.f-form,.f-table,.f-menu,.f-modal) { font:inherit; box-sizing:border-box; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--f-space-6,6px); min-height:var(--f-control-height,34px); padding:var(--f-space-6,6px) var(--f-space-12,12px); border:1px solid var(--f-field-control-line); border-radius:var(--f-ui-radius); background:var(--f-field); color:var(--f-field-ink); cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button:not(:disabled):hover { background:var(--f-field-hover); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button:not(:disabled):active { transform:translateY(1px); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button.f-primary { background:var(--f-accent); color:#fff; border-color:transparent; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button.f-primary:hover { filter:brightness(.95); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-button.f-icon { min-width:34px; padding:var(--f-space-4,4px); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-input { width:100%; min-width:0; min-height:var(--f-control-height,34px); border:1px solid var(--f-field-control-line); border-radius:var(--f-ui-radius); background:var(--f-field); color:var(--f-field-ink); padding:var(--f-control-padding-y,6px) var(--f-control-padding-x,10px); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-input::placeholder { color:var(--f-field-muted); opacity:1; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) :is(.f-input,.f-button,input[type=range],input[type=color],.f-choice input,.f-table-link):focus-visible { outline:2px solid var(--f-local-ink,var(--f-content-ink)); outline-offset:3px; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) :is(.f-input,.f-button,.f-choice input):disabled { opacity:.5; cursor:default; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-field { display:grid; gap:var(--f-space-6,6px); min-width:0; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-field>label { font-size:12px; font-weight:550; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-input[aria-invalid=true] { outline:2px dashed var(--f-form-ink); outline-offset:2px; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-error { color:var(--f-form-ink); margin:0; font-size:12px; font-weight:550; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-error:not([hidden])::before { content:'! '; }
/* One native labelled input owns semantics; SVG check is decorative. */
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice{position:relative;display:flex;align-items:center;gap:var(--f-control-gap);min-height:var(--f-row-height);margin:0;cursor:pointer;color:inherit}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:18px;height:18px;margin:0;flex:none;border:1px solid var(--f-field-control-line);border-radius:3px;background:var(--f-field);cursor:pointer;transition:background-color 140ms,border-color 140ms,box-shadow 140ms}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:checked,:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:indeterminate{background:var(--f-accent-action,var(--f-accent));border-color:transparent}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice .f-check-mark{position:absolute;left:2px;top:50%;width:14px;height:14px;pointer-events:none;color:#fff;opacity:0;transform:translateY(-50%) scale(.8);transition:opacity 120ms,transform 140ms}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:is(:checked,:indeterminate)+.f-check-mark{opacity:1;transform:translateY(-50%) scale(1)}
.f-check-mark .f-check-mixed{display:none}
.f-choice input:indeterminate+.f-check-mark .f-check-tick{display:none}
.f-choice input:indeterminate+.f-check-mark .f-check-mixed{display:block}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice:hover input:not(:disabled){box-shadow:0 0 0 3px var(--f-field-hover)}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:not(:disabled):active{box-shadow:0 0 0 3px var(--f-field-control-line)}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:disabled{cursor:not-allowed;opacity:.5;background:var(--f-field-hover);border-color:var(--f-field-line)}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:disabled+.f-check-mark{color:var(--f-field-muted)}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:disabled:is(:checked,:indeterminate)+.f-check-mark{opacity:.5}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input:disabled~span{opacity:.55}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input{width:34px;height:20px;border-radius:12px;position:relative}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input:not(:checked):not(:disabled){background:color-mix(in srgb,var(--f-field-ink,#29292c) 22%,var(--f-field,#fff));border-color:transparent}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000014;top:3px;left:3px;transition:transform 160ms,background-color 140ms}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input:checked::after{transform:translateX(14px);background:#fff}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input:disabled::after{background:var(--f-field-muted)}
@media(prefers-reduced-motion:reduce){:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice :is(input,.f-check-mark),:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input::after{transition:none}}
@media(forced-colors:active){:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice input{appearance:auto;-webkit-appearance:auto}:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-choice .f-check-mark,:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-switch input::after{display:none}}
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-form { display:grid; gap:var(--f-gap-form,16px); padding:var(--f-panel-padding); border-radius:12px; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-actions { display:flex; justify-content:flex-end; gap:var(--f-space-8,8px); flex-wrap:wrap; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) :is(.f-hint,.f-empty) { color:var(--f-local-muted,var(--f-content-muted)); font-size:12px; line-height:1.5; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-hint:empty { display:none; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table-wrap { overflow:auto; max-width:100%; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table { width:100%; border-collapse:collapse; font-size:13px; text-align:left; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table :is(th,td) { padding:var(--f-space-10) var(--f-space-12); border-bottom:1px solid var(--f-table-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table caption { text-align:left; padding:var(--f-space-8) var(--f-space-12); font-size:12px; color:var(--f-table-muted); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table th { font-weight:550; color:var(--f-table-muted); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table :is(tr:hover,tr[aria-selected=true]) { background:var(--f-table-hover); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-table-link { font:inherit; padding:var(--f-space-2,2px); border:0; background:transparent; color:var(--f-table-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-menu { z-index:15; padding:var(--f-space-6,6px); border:1px solid var(--f-modal-line); border-radius:10px; background:var(--f-modal); color:var(--f-modal-ink); box-shadow:0 10px 30px #0002; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-menu button { display:block; width:100%; padding:var(--f-space-8) var(--f-space-12); border:0; border-radius:6px; font:inherit; text-align:left; background:transparent; color:inherit; cursor:pointer; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-menu button:is(:hover,:focus-visible) { background:var(--f-modal-hover); outline:1px solid var(--f-modal-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-modal { width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:var(--f-space-24,24px); border:1px solid var(--f-modal-line); border-radius:16px; background:var(--f-modal); color:var(--f-modal-ink); box-shadow:0 18px 70px #0003; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-modal::backdrop { background:#0006; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-modal-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--f-space-12,12px); margin-bottom:var(--f-space-16,16px); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-modal-heading h2 { margin:0; font-size:18px; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) .f-modal .f-form { padding:0; background:transparent; color:inherit; }
[data-m3-theme] [hidden] { display:none !important; }
@media(prefers-reduced-motion:reduce) { :is(#m3-glass[data-m3-theme], [data-m3-theme]) :is(.f-button,.f-switch input::after) { transition:none; transform:none; } }

/* Stable box IDs share defaults; explicit overrides stay local to that box. */
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box] { --f-box-bg:initial; --f-box-ink:initial; --f-box-muted:initial; --f-box-line:initial; --f-box-control-line:initial; }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="income"] { --f-box-bg:var(--f-box-income-bg); --f-box-ink:var(--f-box-income-ink); --f-box-muted:var(--f-box-income-muted); --f-box-line:var(--f-box-income-line); --f-box-control-line:var(--f-box-income-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="active-orders"] { --f-box-bg:var(--f-box-active-orders-bg); --f-box-ink:var(--f-box-active-orders-ink); --f-box-muted:var(--f-box-active-orders-muted); --f-box-line:var(--f-box-active-orders-line); --f-box-control-line:var(--f-box-active-orders-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="invoice-ready"] { --f-box-bg:var(--f-box-invoice-ready-bg); --f-box-ink:var(--f-box-invoice-ready-ink); --f-box-muted:var(--f-box-invoice-ready-muted); --f-box-line:var(--f-box-invoice-ready-line); --f-box-control-line:var(--f-box-invoice-ready-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="cashflow"] { --f-box-bg:var(--f-box-cashflow-bg); --f-box-ink:var(--f-box-cashflow-ink); --f-box-muted:var(--f-box-cashflow-muted); --f-box-line:var(--f-box-cashflow-line); --f-box-control-line:var(--f-box-cashflow-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="orders"] { --f-box-bg:var(--f-box-orders-bg); --f-box-ink:var(--f-box-orders-ink); --f-box-muted:var(--f-box-orders-muted); --f-box-line:var(--f-box-orders-line); --f-box-control-line:var(--f-box-orders-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="months"] { --f-box-bg:var(--f-box-months-bg); --f-box-ink:var(--f-box-months-ink); --f-box-muted:var(--f-box-months-muted); --f-box-line:var(--f-box-months-line); --f-box-control-line:var(--f-box-months-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="customers"] { --f-box-bg:var(--f-box-customers-bg); --f-box-ink:var(--f-box-customers-ink); --f-box-muted:var(--f-box-customers-muted); --f-box-line:var(--f-box-customers-line); --f-box-control-line:var(--f-box-customers-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="order-detail"] { --f-box-bg:var(--f-box-order-detail-bg); --f-box-ink:var(--f-box-order-detail-ink); --f-box-muted:var(--f-box-order-detail-muted); --f-box-line:var(--f-box-order-detail-line); --f-box-control-line:var(--f-box-order-detail-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="detail-revenue"] { --f-box-bg:var(--f-box-detail-revenue-bg); --f-box-ink:var(--f-box-detail-revenue-ink); --f-box-muted:var(--f-box-detail-revenue-muted); --f-box-line:var(--f-box-detail-revenue-line); --f-box-control-line:var(--f-box-detail-revenue-control-line); }
:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box="detail-deadline"] { --f-box-bg:var(--f-box-detail-deadline-bg); --f-box-ink:var(--f-box-detail-deadline-ink); --f-box-muted:var(--f-box-detail-deadline-muted); --f-box-line:var(--f-box-detail-deadline-line); --f-box-control-line:var(--f-box-detail-deadline-control-line); }

:is(#m3-glass[data-m3-theme], [data-m3-theme]) [data-m3-box] {
 background:var(--f-preview-color,var(--f-box-bg,var(--f-local-bg,var(--f-card))));
 color:var(--f-preview-ink,var(--f-box-ink,var(--f-local-ink,var(--f-card-ink))));
 border-color:var(--f-box-line,var(--f-local-line,var(--f-card-line)));
 --m3-chart-label:var(--f-box-muted,var(--f-card-muted));
 --m3-chart-grid:var(--f-box-line,var(--f-card-line));
 --m3-chart-zero:var(--f-box-control-line,var(--f-card-control-line));
 --m3-chart-point:var(--f-box-bg,var(--f-card));
 --m3-chart-surface:var(--f-box-bg,var(--f-card));
 --m3-chart-ink:var(--f-box-ink,var(--f-card-ink));
 --m3-chart-focus:var(--f-box-ink,var(--f-card-ink));
}
#m3-glass[data-m3-theme] [data-m3-box] :is(.m3-kpi-label,.m3-kpi-foot,.m3-box-foot,.m3-box-head p) { color:var(--f-box-muted); }

/* Product-wide primary-action contrast, including nested icon controls. */
:is(#m3-glass[data-m3-theme],[data-m3-theme]) :is(.f-button.f-primary,.m3-save,.m3-plus){color:#fff!important;border-color:transparent!important}
:is(#m3-glass[data-m3-theme],[data-m3-theme]) :is(.f-button.f-primary,.m3-save,.m3-plus) :is(i,span,svg,path){color:#fff!important}
:is(#m3-glass[data-m3-theme],[data-m3-theme]) .f-check-mark{color:#fff!important}

/* Native text highlighting, independent of selected rows and controls. */
:root{--f-text-selection-bg:#dedede;--f-text-selection-ink:#29292c}
::selection{background:var(--f-text-selection-bg,#dedede);color:var(--f-text-selection-ink,#29292c);text-shadow:none}
::-moz-selection{background:var(--f-text-selection-bg,#dedede);color:var(--f-text-selection-ink,#29292c);text-shadow:none}
:is([data-m3-theme],body.meta3-workspace) :is(input,textarea,[contenteditable=true]){caret-color:var(--f-field-ink,#29292c)}